/* The Guide is three steps deep, and only one of them is ever on screen: the areas, one area, one chapter. */
body.module-guide .page-wrap { max-width: 1600px; padding-left: clamp(1rem, 2.5vw, 3rem); padding-right: clamp(1rem, 2.5vw, 3rem); }
.guide-page { --guide-stage-height: clamp(340px, 60vh, 680px); min-width: 0; padding-bottom: var(--space-2xl); }
.guide-page [hidden] { display: none !important; }
.guide-page :focus-visible { outline: 2px solid var(--color-accent-primary); outline-offset: 3px; }
/* The explanations panel carries the text, so the stage keeps no duplicated list or detail box. */
.guide-capture .doc-actions, .guide-capture .doc-detail, .guide-capture .doc-media { display: none !important; }

/* Opening of a browsing step */
.guide-intro { max-width: 1120px; margin: 0 auto var(--space-xl); }
.guide-intro h1 { display: flex; align-items: center; gap: .75rem; margin: 0 0 .6rem; font: 500 clamp(1.9rem, 3vw, 2.9rem)/1.15 var(--font-family-heading); letter-spacing: -.025em; }
.guide-intro h1 i { color: var(--color-accent-primary); font-size: .85em; }
.guide-intro > p { margin: 0 0 var(--space-lg); max-width: 640px; color: var(--color-text-secondary); font-size: 1.05rem; line-height: 1.7; }

/* Search reaches any chapter from any step, so nobody has to browse to find one thing. */
.guide-search { position: relative; max-width: 560px; }
.guide-search > i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; }
.guide-search input { width: 100%; min-height: 52px; padding: .8rem 1rem .8rem 2.85rem; border: 1px solid var(--color-border-default); border-radius: 999px; background: var(--color-bg-surface); color: var(--color-text-primary); font: 400 1rem/1.4 var(--font-family-base); }
.guide-search input::placeholder { color: var(--color-text-muted); }
.guide-search input:focus { outline: none; border-color: var(--color-accent-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-primary) 18%, transparent); }
.guide-search-results { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + .5rem); max-height: 56vh; margin: 0; padding: .35rem; list-style: none; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-bg-elevated); box-shadow: var(--shadow-surface); overflow-y: auto; }
.guide-search-results li + li { margin-top: 2px; }
.guide-search-results a { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: .65rem; padding: .6rem .7rem; border-radius: var(--radius-sm); color: var(--color-text-primary); font-size: .95rem; line-height: 1.45; }
.guide-search-results a > i { color: var(--color-text-muted); font-size: .9rem; }
.guide-search-results a small { display: block; margin-top: .15rem; color: var(--color-text-muted); font-size: .8rem; }
.guide-search-results .guide-search-match { margin-top: .32rem; color: var(--color-text-secondary); line-height: 1.45; }
.guide-search-match-source { color: var(--color-accent-primary); font-weight: 600; }
.guide-search-match mark { padding: 0 .12em; border-radius: .15rem; background: color-mix(in srgb, var(--color-accent-primary) 28%, transparent); color: var(--color-text-primary); font: inherit; font-weight: 600; }
.guide-search-results a:hover, .guide-search-results a.is-active { background: color-mix(in srgb, var(--color-accent-primary) 12%, transparent); }
.guide-search-results a:hover > i, .guide-search-results a.is-active > i { color: var(--color-accent-primary); }
.guide-search-empty { padding: .85rem .7rem; color: var(--color-text-muted); font-size: .92rem; }

/* Step one: the areas, and nothing else. */
.guide-areas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; max-width: 1120px; margin: 0 auto; }
.guide-area { display: flex; flex-direction: column; gap: .45rem; padding: 1.15rem 1.2rem 1rem; background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); color: var(--color-text-secondary); transition: border-color .2s, background .2s, transform .2s; }
.guide-area > i { margin-bottom: .3rem; font-size: 1.5rem; color: var(--color-accent-primary); }
.guide-area strong { color: var(--color-text-primary); font: 500 1.12rem/1.3 var(--font-family-heading); }
.guide-area span { flex: 1; color: var(--color-text-muted); font-size: .9rem; line-height: 1.55; }
.guide-area small { display: flex; align-items: center; gap: .45rem; margin-top: .4rem; color: var(--color-text-muted); font-size: .78rem; }
.guide-area small i { font-size: .7rem; opacity: 0; transition: opacity .2s, transform .2s; }
.guide-area:hover { border-color: color-mix(in srgb, var(--color-accent-primary) 45%, var(--color-border-default)); background: var(--color-bg-elevated); transform: translateY(-2px); }
.guide-area:hover small { color: var(--color-accent-primary); }
.guide-area:hover small i { opacity: 1; transform: translateX(2px); }

/* Step two: the chapters of one area, read as a path through the area rather than a wall of boxes.
   A thread joins the numbered nodes, so the order is visible without any of them shouting. */
.guide-chapter-list { --row-pad: 1rem; --node: 44px; --row-gap: .2rem; display: grid; gap: var(--row-gap); max-width: 860px; margin: 0 auto; padding: 0; list-style: none; }
.guide-chapter-list li { position: relative; }
.guide-chapter-list li:not(:last-child)::after { content: ''; position: absolute; left: calc(var(--row-pad) + var(--node) / 2); top: calc(var(--row-pad) + var(--node) + 6px); bottom: calc(6px - var(--row-gap) - var(--row-pad)); width: 1px; background: linear-gradient(to bottom, var(--color-border-strong), color-mix(in srgb, var(--color-border-default) 45%, transparent)); }
.guide-chapter-list a { display: grid; grid-template-columns: var(--node) minmax(0, 1fr) auto; align-items: start; gap: 1.15rem; padding: var(--row-pad); border-radius: var(--radius-md); color: var(--color-text-secondary); transition: background .2s; }
.guide-chapter-list a:hover { background: var(--color-bg-surface); }
.guide-chapter-node { position: relative; z-index: 1; display: grid; place-items: center; width: var(--node); height: var(--node); border: 1px solid var(--color-border-strong); border-radius: 50%; background: var(--color-bg-page); color: var(--color-text-muted); font: 500 1.05rem/1 var(--font-family-heading); font-variant-numeric: tabular-nums; transition: color .2s, background .2s, border-color .2s, box-shadow .2s; }
.guide-chapter-list a:hover .guide-chapter-node { border-color: var(--color-accent-primary); background: color-mix(in srgb, var(--color-accent-primary) 14%, var(--color-bg-surface)); color: var(--color-accent-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent-primary) 10%, transparent); }
.guide-chapter-body { display: block; padding-top: .35rem; }
.guide-chapter-body strong { display: block; color: var(--color-text-primary); font: 500 1.14rem/1.35 var(--font-family-heading); text-wrap: balance; transition: color .2s; }
.guide-chapter-body small { display: block; margin-top: .3rem; color: var(--color-text-muted); font-size: .92rem; line-height: 1.65; }
.guide-chapter-list a:hover .guide-chapter-body strong { color: var(--color-accent-primary); }
.guide-chapter-list a > i { align-self: center; color: var(--color-accent-primary); font-size: .82rem; opacity: 0; transition: opacity .2s, transform .2s; }
.guide-chapter-list a:hover > i { opacity: 1; transform: translateX(3px); }
.guide-chapter-number { color: var(--color-text-muted); font-size: .8rem; font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .04em; }

/* One quiet line says where you are and lets you move without going back. */
/* The breadcrumb and the two step controls share one row, so moving on sits where the eye starts. */
.guide-topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.25rem; margin: 0 0 var(--space-lg); }
.guide-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; min-width: 0; font-size: .9rem; }
.guide-crumbs > a { display: inline-flex; align-items: center; gap: .4rem; color: var(--color-text-muted); }
.guide-crumbs > a:hover { color: var(--color-accent-primary); }
.guide-crumbs > span { color: var(--color-border-strong); }
.guide-jump { position: relative; }
/* The picker has to look like a control, not like more breadcrumb text, and the count on its face
   is what tells a visitor there are other chapters at all. */
.guide-jump > button { display: inline-flex; align-items: center; gap: .55rem; max-width: min(70vw, 560px); padding: .45rem .7rem .45rem .8rem; border: 1px solid var(--color-border-strong); border-radius: 999px; background: var(--color-bg-surface); color: var(--color-text-primary); font: 500 .95rem/1.4 var(--font-family-base); cursor: pointer; transition: border-color .2s, background .2s; }
.guide-jump > button > i:first-child { color: var(--color-accent-primary); font-size: .95rem; }
.guide-jump-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guide-jump-count { flex-shrink: 0; padding: .15rem .5rem; border-radius: 999px; background: color-mix(in srgb, var(--color-accent-primary) 12%, transparent); color: var(--color-accent-primary); font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.guide-jump-caret { flex-shrink: 0; color: var(--color-text-muted); font-size: .7rem; transition: transform .2s; }
.guide-jump > button:hover, .guide-jump > button[aria-expanded="true"] { border-color: var(--color-accent-primary); background: var(--color-bg-elevated); }
.guide-jump > button[aria-expanded="true"] .guide-jump-caret { transform: rotate(180deg); }
.guide-jump-menu { position: absolute; left: 0; top: calc(100% + .4rem); z-index: 30; min-width: 340px; max-width: min(90vw, 480px); max-height: 62vh; padding: .35rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-bg-elevated); box-shadow: var(--shadow-surface); overflow-y: auto; }
.guide-jump-heading { margin: 0; padding: .5rem .7rem .55rem; color: var(--color-text-muted); font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.guide-jump-menu ol { margin: 0; padding: 0; list-style: none; }
.guide-jump-menu li + li { margin-top: 2px; }
.guide-jump-menu a { display: flex; align-items: baseline; gap: .65rem; padding: .55rem .7rem; border-radius: var(--radius-sm); color: var(--color-text-secondary); font-size: .93rem; line-height: 1.45; }
.guide-jump-menu a:hover { background: color-mix(in srgb, var(--color-accent-primary) 12%, transparent); color: var(--color-text-primary); }
.guide-jump-menu a[aria-current] { background: color-mix(in srgb, var(--color-accent-primary) 10%, var(--color-bg-surface)); color: var(--color-text-primary); box-shadow: inset 2px 0 var(--color-accent-primary); }
.guide-jump-menu a[aria-current] .guide-chapter-number { color: var(--color-accent-primary); }

/* Step three: capture beside explanations. The page is the only thing that scrolls, so the
   capture stays put while the explanations move past it. */
.guide-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(310px, 27vw, 440px); gap: clamp(1rem, 2vw, 2rem); align-items: start; }
.guide-article { position: sticky; top: 7rem; min-width: 0; }
.guide-capture { position: relative; padding: clamp(.5rem, 1vw, .9rem); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); background: radial-gradient(ellipse at top, color-mix(in srgb, var(--color-accent-primary) 4%, transparent), transparent 60%), var(--color-bg-surface); }
/* The canvas never scrolls: guide.js sizes the stage for the chosen zoom and moves it with a
   transform, so the wheel always belongs to the page and no second scrollbar appears. */
.guide-canvas { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; height: var(--guide-stage-height); min-width: 0; overflow: hidden; }
.guide-canvas .doc-stage { max-width: none; }
.guide-canvas .doc-stage.is-fitted { width: min(100%, calc(var(--guide-stage-height) * var(--doc-ratio))); }
/* A drag may begin on a highlighted marker too, so the grabbing cursor has to reach them as well. */
.guide-canvas.is-zoomed .doc-stage { cursor: grab; }
.guide-canvas.is-panning { user-select: none; }
.guide-canvas.is-panning .doc-stage, .guide-canvas.is-panning .doc-region { cursor: grabbing; }
.guide-canvas .doc-region { cursor: pointer; }
/* Zoom has its own control, so a click on the capture always means the region under it. */
.guide-zoom { position: absolute; right: clamp(.9rem, 1.6vw, 1.5rem); bottom: clamp(.9rem, 1.6vw, 1.5rem); display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--color-border-strong); border-radius: 999px; background: color-mix(in srgb, var(--color-bg-elevated) 93%, transparent); box-shadow: var(--shadow-surface); }
.guide-zoom button { display: grid; place-items: center; width: 34px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--color-text-primary); font-size: .92rem; cursor: pointer; transition: color .2s, background .2s; }
.guide-zoom button:hover:not(:disabled) { background: color-mix(in srgb, var(--color-accent-primary) 16%, transparent); color: var(--color-accent-primary); }
.guide-zoom button:disabled { opacity: .3; cursor: default; }
.guide-zoom output { min-width: 48px; color: var(--color-accent-primary); font: 600 .85rem/1 var(--font-family-base); font-variant-numeric: tabular-nums; text-align: center; }
.guide-zoom-separator { width: 1px; height: 20px; margin: 0 3px; background: var(--color-border-default); }

/* Explanations */
.guide-notes { display: flex; flex-direction: column; gap: .7rem; }
.guide-notes-title { margin: 0; font: 500 clamp(1.4rem, 1.9vw, 1.95rem)/1.2 var(--font-family-heading); letter-spacing: -.02em; text-wrap: balance; }
.guide-notes-intro { margin: 0 0 .3rem; color: var(--color-text-secondary); font-size: .95rem; line-height: 1.6; }
.doc-notes { display: grid; align-content: start; gap: .55rem; margin: 0; padding: 0; list-style: none; }
/* Each card is one large target: the overlay on the button covers the explanation text too. */
.doc-note { position: relative; padding: .7rem .85rem .8rem; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-surface); transition: border-color .2s, background .2s, box-shadow .2s; }
.doc-note:hover, .doc-note.is-linked { border-color: color-mix(in srgb, var(--color-accent-primary) 40%, var(--color-border-default)); background: color-mix(in srgb, var(--color-accent-primary) 5%, var(--color-bg-surface)); }
.doc-note.is-active { border-color: var(--color-accent-primary); background: color-mix(in srgb, var(--color-accent-primary) 9%, var(--color-bg-surface)); box-shadow: inset 3px 0 var(--color-accent-primary); }
.doc-note-button { display: flex; align-items: flex-start; gap: .6rem; width: 100%; padding: 0; border: 0; background: none; color: var(--color-text-primary); font: 600 .96rem/1.4 var(--font-family-base); text-align: left; cursor: pointer; }
.doc-note-button::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.doc-note-button:focus-visible { outline: none; }
.doc-note:has(.doc-note-button:focus-visible) { outline: 2px solid var(--color-accent-primary); outline-offset: 2px; }
.doc-note-number { display: grid; place-items: center; flex-shrink: 0; min-width: 24px; height: 24px; padding: 0 6px; border: 1px solid var(--color-border-strong); border-radius: 50%; color: var(--color-text-secondary); font-size: .76rem; font-weight: 600; line-height: 1; transition: color .2s, background .2s, border-color .2s; }
.doc-note:hover .doc-note-number, .doc-note.is-linked .doc-note-number, .doc-note.is-active .doc-note-number { border-color: var(--color-accent-primary); background: var(--color-accent-primary); color: var(--color-accent-contrast); }
.doc-note-text { margin: .4rem 0 0 calc(24px + .6rem); color: var(--color-text-secondary); font-size: .93rem; line-height: 1.6; white-space: pre-wrap; }
.doc-note-demo { display: flex; align-items: center; gap: .4rem; margin: .45rem 0 0 calc(24px + .6rem); color: var(--color-accent-primary); font-size: .88rem; font-weight: 500; }

/* Previous and next chapter */
.guide-steps { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.guide-step { display: inline-flex; align-items: center; gap: .5rem; min-height: 38px; padding: 0 .9rem; border: 1px solid var(--color-border-strong); border-radius: 999px; background: var(--color-bg-surface); color: var(--color-text-secondary); font: 500 .88rem/1 var(--font-family-base); white-space: nowrap; transition: color .2s, border-color .2s, background .2s; }
.guide-step i { color: var(--color-text-muted); font-size: .75rem; transition: color .2s, transform .2s; }
.guide-step:hover { border-color: var(--color-accent-primary); background: var(--color-bg-elevated); color: var(--color-text-primary); }
.guide-step:hover i { color: var(--color-accent-primary); }
.guide-step:hover[rel="next"] i { transform: translateX(2px); }
.guide-step:hover[rel="prev"] i { transform: translateX(-2px); }
.guide-step-next { border-color: color-mix(in srgb, var(--color-accent-primary) 45%, var(--color-border-strong)); background: color-mix(in srgb, var(--color-accent-primary) 9%, var(--color-bg-surface)); color: var(--color-text-primary); }
.guide-step-next i { color: var(--color-accent-primary); }
.guide-step.is-disabled { opacity: .35; }

@media (max-width: 1200px) { .guide-areas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .guide-layout { grid-template-columns: minmax(0, 1fr); } .guide-article { position: static; } }
@media (max-width: 720px) {
  .guide-page { --guide-stage-height: clamp(240px, 42vh, 420px); }
  .guide-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .guide-area { padding: .9rem; }
  .guide-area span { display: none; }
  .guide-chapter-list { --row-pad: .7rem; --node: 38px; }
  .guide-chapter-list a { gap: .85rem; }
  .guide-jump, .guide-jump > button { max-width: 100%; width: 100%; }
  .guide-jump-menu { min-width: 0; width: min(88vw, 400px); }
  .guide-topbar { gap: .6rem; }
  .guide-steps { width: 100%; }
  .guide-step { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .guide-area, .guide-area small i, .guide-jump > button > i, .doc-note, .doc-note-number, .guide-step, .guide-step i,
  .guide-chapter-list a, .guide-chapter-node, .guide-chapter-body strong, .guide-chapter-list a > i { transition: none; }
  .guide-area:hover { transform: none; }
  .guide-chapter-list a:hover > i, .guide-step:hover i { transform: none; }
}