/* Wayfinding over the released home: fuller section index, section in view,
   reading progress and a level index. Section layout and scroll geometry stay fixed. */
.nav .nav-x{display:none}
.nav a[aria-current]{color:var(--ink)}
.top::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;
  background:var(--ink-2);transform:scaleX(var(--gd-read,0));transform-origin:0 50%;opacity:0;
  transition:opacity .2s var(--ease);
}
.top.is-s::after{opacity:1}
@media (min-width:1200px){
  .nav a{position:relative}
  .nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:1px;background:var(--lime)}
}
/* the two extra sections join the bar only where there is room for them */
@media (min-width:1280px){
  .nav{gap:1.5rem}
  .nav .nav-x{display:inline-flex}
}
/* stacked menu: every chapter with its numeral, the one in view in lime */
@media (max-width:1199px){
  .nav .nav-x{display:inline-flex}
  .nav a:not(.nav-m)::before{content:attr(data-n);flex:none;width:2.6rem;color:var(--ink-3);transition:color .16s var(--ease)}
  .nav a[aria-current]:not(.nav-m)::before{color:var(--lime)}
  .nav a[href^="#"]+a:not([href^="#"]){margin-top:.9rem;border-top:1px solid var(--line)}
}

/* I · il sistema: the route in play, the five levels up front, a way past them */
.xv-route{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .9rem}
.xv-route b{font:500 .8125rem/1.45 var(--f-m);color:var(--ink)}
.xv-route .lnk{font-size:.9375rem}
.xv-tip{margin-top:-.75rem;font-size:.8125rem;line-height:1.4;color:var(--ink-3)}
.xv-tip-m{display:none}
.no-js .xv-route,.no-js .xv-tip{display:none}
.xv-idx ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0}
.xv-idx ol a{
  display:inline-flex;align-items:center;gap:.55rem;min-height:44px;padding:0 .8rem;
  border:1px solid var(--line-2);border-radius:2px;color:var(--ink-2);text-decoration:none;
  font:500 .6875rem/1 var(--f-m);letter-spacing:.08em;text-transform:uppercase;
  transition:border-color .16s var(--ease),color .16s var(--ease);
}
.xv-idx ol a span{color:var(--ink-3)}
.xv-idx .lnk{margin-top:.5rem;font-size:.9375rem}
@media (hover:hover) and (pointer:fine){.xv-idx ol a:hover{border-color:var(--ink-3);color:var(--ink)}}
@media (max-width:899px){
  /* on phones the engine stays pinned above the text: a level lands flush below it */
  .step[id]{scroll-margin-top:calc(44svh - 1rem)}
  .xv-tip-d{display:none}
  .xv-tip-m{display:inline}
}

/* The engine as a control: a plate leads to its level, a connected inlet or an
   available outlet picks the route. Unavailable labels keep the default cursor. */
.stage-eng .pl{cursor:pointer}
/* the travelling signal is drawn over the plates: it must not swallow their clicks */
.stage-eng .eng-trail,.stage-eng .eng-axis{pointer-events:none}
.stage-eng .pl-0>text.is-nc,.stage-eng .pl-4>text:not(.is-pick){cursor:default}
.stage-eng .pl-4>text.is-pick:not(.is-lit){fill:var(--ink-2)}
@media (hover:hover) and (pointer:fine){
  .stage-eng .pl:not(.is-act):hover .pl-rim{stroke:var(--ti-hi)}
  .stage-eng .eng.is-focus .pl:not(.is-act):hover{opacity:.75}
  .stage-eng .pl:hover .cname{fill:var(--ink)}
  .stage-eng .pl-0>text:not(.is-nc):not(.is-lit):hover,.stage-eng .pl-4>text.is-pick:not(.is-lit):hover{fill:var(--ink)}
}
/* inlets and outlets are controls now: a size that reads, laid out by the engine's own measuring */
.stage-eng .pl-0>text,.stage-eng .pl-4>text{font-size:calc(16px*var(--inv,1))}
.stage-eng .pl-0>text.is-kb{fill:var(--ink);text-decoration:underline}

/* Hero: project and source live with the engine, the left panel keeps only what the
   drawing cannot say. On wide screens the strip is pinned above the inlets and sources
   are picked on the drawing (their radios stay, unseen, for the keyboard); on phones
   it opens the panel under the pinned engine. */
.eng-pick .cap{color:var(--ink-2)}
.eng-pick .fs legend{margin-bottom:.6rem}
.eng-pick .cli{display:flex;flex-wrap:wrap;gap:.3rem;max-width:none}
.eng-pick .cli label{flex:0 0 auto}
.eng-pick .cli span{flex-direction:row;align-items:center;gap:0;min-height:36px;padding:0 .7rem;background:transparent;font-size:0}
.no-js .eng-pick{display:none}
#simTrace{display:none}
.sim-choice:has(.seg[hidden]){display:none}
@media (pointer:coarse){.eng-pick .cli span{min-height:44px}}
@media (min-width:900px){
  .eng-pick{grid-column:2;grid-row:1/4;align-self:start;position:sticky;top:var(--hh);z-index:2;padding:.9rem var(--gut) 0 0}
  .eng-pick-h{display:none}
  .eng-pick-cli legend{float:left;margin:0 1rem 0 0;line-height:36px}
  .eng-pick-src{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .stage-eng{padding-top:calc(var(--hh) + var(--pick-h,6rem))}
}
@media (max-width:899px){
  .eng-pick{padding:1.75rem var(--gut) 0}
  .eng-pick-h{margin:0 0 1.1rem;font:500 1.5rem/1.1 var(--f-d);letter-spacing:-.022em;color:var(--ink)}
  .eng-pick .cli{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem}
  .eng-pick .cli label{flex:1 1 auto}
  .eng-pick .cli span{min-height:44px}
  .eng-pick-src{margin-top:1.1rem}
  .sim{padding-top:1.1rem}
  .sim .sim-h{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .sim .sim-what,#simResultChoice{display:none}
  #sim{scroll-margin-top:calc(44svh + 1rem + var(--pick-h,14rem))}
}
@media print{.top::after{display:none}}