/* Post structure: wayfinding for long, structured posts (front matter: structured: true).
   Scoped to ps-* classes. Neutrals derive from the page's own text color, so everything follows the
   site's light/dark theme. Each Part has one muted accent, used only for a short rule above the Part
   heading, small section markers, and the highlighter tint. post-structure.js tags every block in the
   post body with data-ps-part so the right accent applies. */

/* ---------- Tokens ---------- */
.ps-root,.ps-rail,.ps-pill{
  --ps-ink-70:color-mix(in srgb,currentColor 70%,transparent);
  --ps-ink-55:color-mix(in srgb,currentColor 55%,transparent);
  --ps-ink-40:color-mix(in srgb,currentColor 40%,transparent);
  --ps-ink-15:color-mix(in srgb,currentColor 15%,transparent);
  --ps-ink-08:color-mix(in srgb,currentColor 8%,transparent);
  --ps-ink-04:color-mix(in srgb,currentColor 4%,transparent);
  --ps-label:var(--ps-body-font,inherit);
  --ps-num:var(--ps-serif,Georgia,"Times New Roman",serif);
}
/* Part accents: muted, editorial; each reads on light and dark grounds. */
[data-ps-part]{--ps-part-c:#4a7fc1}
[data-ps-part="1"]{--ps-part-c:#4a7fc1}   /* Part I   steel blue */
[data-ps-part="2"]{--ps-part-c:#3a8a78}   /* Part II  sage       */
[data-ps-part="3"]{--ps-part-c:#ad5058}   /* Part III claret     */
[data-ps-part="4"]{--ps-part-c:#b0842b}   /* Part IV  ochre      */
[data-ps-part="5"]{--ps-part-c:#6a66ad}   /* Coda     slate      */
/* Declared on the same elements as --ps-part-c so each Part gets its own tint. */
[data-ps-part]{--ps-hl:color-mix(in srgb,var(--ps-part-c) 17%,transparent)}

/* ---------- Headings (classes added by post-structure.js) ---------- */
.ps-root h2.ps-h-part{position:relative;margin-top:4.25rem;padding-top:1.5rem;border-top:1px solid var(--ps-ink-15)}
.ps-root h2.ps-h-part::before{content:"";position:absolute;left:0;top:-1px;width:3rem;height:2px;background:var(--ps-part-c,var(--ps-ink-55))}
.ps-root .ps-eyebrow{display:block;font-family:var(--ps-label);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ps-ink-55);margin-bottom:.55rem;line-height:1.2}
.ps-root h3.ps-h-stage{margin-top:0}
.ps-root h3.ps-h-stage .ps-eyebrow{display:flex;align-items:center;gap:.6rem}
.ps-root h3.ps-h-stage .ps-eyebrow::before{content:"";width:1.1rem;height:2px;background:var(--ps-part-c,var(--ps-ink-40));flex:none}
.ps-root h4.ps-h-sub{font-family:var(--ps-label);font-size:1.02rem;font-weight:600;margin:2.2rem 0 .6rem;display:flex;align-items:center;gap:.6rem}
.ps-root h4.ps-h-sub::before{content:"";width:1rem;height:1px;background:var(--ps-part-c,var(--ps-ink-40));flex:none}

/* ---------- Stage sections ---------- */
.ps-stage{margin:3rem 0 0}
.ps-stage + .ps-stage{margin-top:3.5rem;padding-top:2.75rem;border-top:1px solid var(--ps-ink-08)}

/* ---------- Equation strip: "you are here" (one piece highlighted) ---------- */
.ps-eq{margin:1rem 0 1.8rem;padding:.3rem 0 0;overflow-x:auto}
.ps-eq-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:.3rem .35rem;font-size:1.05em}
.ps-eq-p{display:inline-flex;flex-direction:column;align-items:center;padding:.15rem .45rem;border-radius:2px;opacity:.45;transition:opacity .2s,background-color .2s}
.ps-eq-fixed,.ps-eq-arrow{opacity:.45;padding:.15rem .1rem}
.ps-eq-arrow{font-family:var(--ps-label);padding-inline:.3rem}
.ps-eq[data-stage="1"] [data-p="s"],
.ps-eq[data-stage="2"] [data-p="a"],
.ps-eq[data-stage="3"] [data-p="b"],.ps-eq[data-stage="3"] [data-p="c"],
.ps-eq[data-stage="4"] [data-p="c"],
.ps-eq[data-stage="5"] [data-p="c"]{opacity:1;background:var(--ps-hl,rgba(74,127,193,.17))}
.ps-eq[data-stage="3"] [data-p="b"]{border-radius:2px 0 0 2px;margin-right:-.35rem;padding-right:.2rem}
.ps-eq[data-stage="3"] [data-p="c"]{border-radius:0 2px 2px 0;padding-left:.2rem}
.ps-eq-all .ps-eq-p,.ps-eq-all .ps-eq-fixed,.ps-eq-all .ps-eq-arrow{opacity:1}
.ps-eq-all .ps-eq-p::after{content:attr(data-label);font-family:var(--ps-label);font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ps-ink-55);margin-top:.35rem;white-space:nowrap}
.ps-eq-cap{margin-top:.6rem;font-family:var(--ps-label);font-size:.78rem;letter-spacing:.02em;color:var(--ps-ink-55);text-align:center}
.ps-eq-cap b{color:var(--ps-ink-70);font-weight:600}

/* ---------- Key equation: highlighter, no box ---------- */
.ps-key{width:fit-content;max-width:100%;margin:1.4rem auto 1.6rem;padding:.35rem 1.5rem;background:var(--ps-hl,rgba(74,127,193,.17));border-radius:2px;overflow-x:auto}
.ps-key > p,.ps-key .math.display{margin:0}
.ps-key mjx-container[display="true"]{margin:.35em 0!important}

/* ---------- The map: open layout, hairlines only ---------- */
.ps-map{margin:1.6rem 0 2rem}
.ps-map .ps-eq{margin:.2rem 0 1.1rem}
.ps-map-list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--ps-ink-08)}
.ps-map-list li{margin:0;border-top:1px solid var(--ps-ink-08)}
.ps-map-list a{display:grid;grid-template-columns:1.75rem minmax(0,1fr) auto;align-items:baseline;gap:.9rem;padding:.7rem .2rem;color:inherit;text-decoration:none;font-family:var(--ps-label);transition:background-color .15s}
.ps-map-list a:hover,.ps-map-list a:focus-visible{background:var(--ps-hl,rgba(74,127,193,.12))}
.ps-map-n{font-family:var(--ps-num);font-size:1.05rem;color:var(--ps-ink-55);font-variant-numeric:lining-nums tabular-nums;text-align:right}
.ps-map-op b{font-weight:600}
.ps-map-as{font-size:.84rem;letter-spacing:.02em;color:var(--ps-ink-55);text-align:right}
@media (max-width:520px){.ps-map-list a{grid-template-columns:1.5rem minmax(0,1fr)}.ps-map-as{grid-column:2;text-align:left;margin-top:-.35rem}}

/* ---------- Beats: the labeled blocks inside each stage ---------- */
.ps-beat{margin:1.6rem 0;padding:.1rem 0 .1rem 1.15rem;border-left:1px solid var(--ps-ink-15)}
.ps-beat > p:first-child{margin:0 0 .4rem}
.ps-beat > :last-child{margin-bottom:0}
.ps-beat-label{display:inline-block;font-family:var(--ps-label);font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ps-ink-55)}
.ps-beat-protects{border-left:2px solid var(--ps-ink-40)}
.ps-beat-breaks,.ps-beat-autopsy{border-left:2px solid var(--ps-part-c,var(--ps-ink-70));background:var(--ps-ink-04);padding:.9rem 1.15rem .95rem}
.ps-beat-fix{border-left:2px solid var(--ps-ink-55);border-top:1px solid var(--ps-ink-08);border-bottom:1px solid var(--ps-ink-08);padding:.9rem 1.15rem .95rem}
.ps-beat-protects .ps-beat-label,.ps-beat-breaks .ps-beat-label,.ps-beat-autopsy .ps-beat-label,.ps-beat-fix .ps-beat-label{color:var(--ps-ink-70)}

/* ---------- Derivation steps ---------- */
.ps-steps{margin:1.2rem 0 .4rem;padding-left:1.15rem;border-left:1px solid var(--ps-ink-15)}

.ps-trylist ul{padding-left:1.1rem}
.ps-trylist li{margin:.6rem 0}

/* ---------- Contents (filled by JS) ---------- */
.ps-contents{margin:2.2rem 0 1rem;padding:1rem 0 1.1rem;border-top:1px solid var(--ps-ink-15);border-bottom:1px solid var(--ps-ink-15);font-family:var(--ps-label)}
.ps-contents:empty{display:none}
.ps-contents-title{font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ps-ink-55);margin:0 0 .7rem}
.ps-contents ol{list-style:none;margin:0;padding:0}
.ps-contents > ol > li{margin:0;padding:.5rem 0}
.ps-contents a{color:inherit;text-decoration:none}
.ps-contents a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ps-toc-part{display:flex;gap:.75rem;align-items:baseline;font-weight:600;font-size:.98rem}
.ps-toc-eb{display:inline-flex;align-items:center;gap:.5rem;font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ps-ink-55);min-width:4.6rem}
.ps-toc-eb::before{content:"";width:.8rem;height:2px;background:var(--ps-part-c,var(--ps-ink-40));flex:none}
.ps-contents .ps-toc-subs{display:flex;flex-wrap:wrap;gap:.15rem 1.1rem;margin:.3rem 0 0 5.35rem;font-size:.86rem;color:var(--ps-ink-70)}
@media (max-width:520px){.ps-contents .ps-toc-subs{margin-left:1.3rem}.ps-toc-part{flex-direction:column;gap:.15rem}}

/* ---------- Side rail (wide screens) ---------- */
.ps-rail{position:fixed;top:96px;width:220px;max-height:calc(100vh - 128px);overflow:auto;font-family:var(--ps-label);font-size:.8rem;line-height:1.35;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;z-index:5;color:var(--ps-fg,inherit)}
.ps-rail.ps-show{opacity:1;visibility:visible}
.ps-rail ol{list-style:none;margin:0;padding:0}
.ps-rail a{display:block;color:var(--ps-ink-55);text-decoration:none;padding:.28rem .7rem;border-left:1px solid var(--ps-ink-15)}
.ps-rail a:hover{color:currentColor}
.ps-rail .ps-rail-part > a{font-weight:600;margin-top:.6rem}
.ps-rail .ps-rail-part:first-child > a{margin-top:0}
.ps-rail .ps-rail-sub a{padding-left:1.35rem;font-size:.77rem}
.ps-rail a.ps-active{color:currentColor;border-left:2px solid var(--ps-part-c,currentColor);padding-left:calc(.7rem - 1px)}
.ps-rail .ps-rail-sub a.ps-active{padding-left:calc(1.35rem - 1px)}
.ps-rail .ps-rail-part > a.ps-in{color:currentColor}

/* ---------- Location bar (narrow screens) ---------- */
.ps-pill{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translate(-50%,12px);max-width:calc(100vw - 32px);display:flex;flex-direction:column;border:1px solid var(--ps-ink-15);border-radius:6px;background:var(--ps-bg,Canvas);color:var(--ps-fg,inherit);box-shadow:0 4px 18px rgba(0,0,0,.1);font-family:var(--ps-label);font-size:.78rem;opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s;z-index:20;overflow:hidden;cursor:pointer}
.ps-pill.ps-show{opacity:1;visibility:visible;transform:translate(-50%,0)}
.ps-pill-text{padding:.5rem .95rem .45rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-pill-text b{font-weight:600;letter-spacing:.04em}
.ps-pill-bar{height:2px;background:var(--ps-ink-08)}
.ps-pill-bar i{display:block;height:100%;width:0;background:var(--ps-part-c,var(--ps-ink-55))}
.ps-pill:focus-visible{outline:2px solid var(--ps-ink-55);outline-offset:2px}

@media (prefers-reduced-motion:reduce){.ps-rail,.ps-pill,.ps-eq-p,.ps-map-list a{transition:none}}

/* ---------- Wide display equations ---------- */
/* Slightly smaller math on phones (same breakpoint as the site) so most equations fit. Set on the
   inner mjx-math because MathJax puts an inline font-size on the container itself. */
@media (max-width:600px){.ps-root mjx-container[display="true"] > mjx-math{font-size:90%}}
/* Fade the right edge while an equation still has more to scroll (class toggled by post-structure.js).
   A mask, not an overlay, so it needs no background color and works in both themes. */
.ps-root mjx-container.ps-math-more{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}