/* Essay outline ("tree"), reading progress and read time, built by
   /assets/js/essay-tree.js from the essay's h2/h3 headings.
   Wide screens: a sticky rail in the empty space left of the text, and the
   progress meter fixed at the top of the right margin.
   Narrow screens: a small "Tree · 42%" button that opens the same panel.
   Without JS nothing is shown. Opt out per essay with `tree: false`. */
.et-rail,.et-meter,.et-toggle{
  --et-ink:var(--st-ink,var(--fg,#333));
  --et-mute:var(--muted,#8a867f);
  --et-paper:var(--st-paper,var(--bg,#faf8f5));
  --et-line:var(--st-line,var(--line,#dedbd4));
  font-family:"JetBrains Mono","SF Mono",ui-monospace,Menlo,Consolas,"DejaVu Sans Mono",monospace;
  font-size:13px;line-height:1.45;color:var(--et-mute);text-align:left;
  box-sizing:border-box;z-index:90;
}
.et-rail[hidden]{display:none!important}
.et-rail p{margin:0}
.et-title{font-family:inherit;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:16px;font-weight:500;line-height:1.35;color:var(--et-ink);margin:0 0 26px!important;letter-spacing:-.01em}
.et-label{letter-spacing:.08em;text-transform:uppercase;font-size:12px;margin:0 0 12px!important}
.et-tree{list-style:none;margin:0;padding:0}
.et-tree li{margin:0}
.et-toggle .et-bar{flex:none;width:56px;height:11px}
.et-toggle .et-tpct{min-width:3.2em;text-align:right;font-variant-numeric:tabular-nums}
.et-tree a{display:grid;grid-template-columns:1.4em 1fr;padding:3px 0;color:inherit;text-decoration:none;border:0}
.et-tree .et-h3 a{padding-left:1.6em}
.et-tree a::before{content:"\2514";opacity:.7}
.et-tree a:hover{color:var(--et-ink)}
.et-tree a.et-active{color:var(--et-ink);font-weight:600}
/* Progress meter, after the claude.dev blog: a dithered bar and a percentage.
   The read part is a dense bright dither, the rest a faint one. */
.et-meter{display:flex;align-items:center;gap:12px;box-sizing:border-box;width:240px;max-width:100%;margin:26px 0 14px;
  font-family:"JetBrains Mono","SF Mono",ui-monospace,Menlo,Consolas,"DejaVu Sans Mono",monospace;font-size:13px;line-height:1;color:var(--et-ink)}
.et-bar{position:relative;flex:1;height:16px;overflow:hidden;
  background:repeating-conic-gradient(var(--et-mute) 0 25%,transparent 0 50%) 0 0/2px 2px;opacity:1}
.et-bar::before{content:"";position:absolute;inset:0;background:var(--et-paper);opacity:.45}
.et-fill{position:absolute;inset:0 auto 0 0;width:0;z-index:1;
  background:repeating-conic-gradient(var(--et-ink) 0 25%,transparent 0 50%) 0 0/2px 2px,
             linear-gradient(color-mix(in srgb,var(--et-ink) 55%,transparent),color-mix(in srgb,var(--et-ink) 55%,transparent))}
.et-pct{min-width:3.2em;text-align:right;font-variant-numeric:tabular-nums}
.et-meter.et-float{position:fixed;top:16px;margin:0;z-index:91;background:var(--et-paper);box-shadow:0 0 0 12px var(--et-paper)}
.et-read{margin-top:20px!important;letter-spacing:.08em;text-transform:uppercase;font-size:12px}

/* Wide: fixed rail, positioned by JS in the left gutter. */
.et-wide .et-rail{position:fixed;top:96px;max-height:calc(100vh - 120px);display:flex;flex-direction:column;overflow:hidden}
.et-wide .et-rail>*{flex:none}
/* A long outline scrolls on its own, so progress and share stay in view. */
.et-wide .et-rail>nav{flex:0 1 auto;min-height:72px;overflow-y:auto;scrollbar-width:thin;overscroll-behavior:contain}
.et-wide .et-toggle{display:none}

/* Narrow: floating button + bottom sheet. */
.et-toggle{position:fixed;left:16px;bottom:16px;z-index:95;display:flex;align-items:center;gap:8px;
  height:42px;padding:0 14px;border:1px solid var(--et-line);border-radius:21px;
  background:var(--et-paper);color:var(--et-ink);box-shadow:0 2px 8px rgba(0,0,0,.18);cursor:pointer;
  font:12px/1 "JetBrains Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em;text-transform:uppercase}
.et-narrow .et-rail{position:fixed;left:10px;right:10px;bottom:68px;max-height:70vh;overflow-y:auto;
  padding:20px 20px 16px;border:1px solid var(--et-line);border-radius:10px;
  background:var(--et-paper);box-shadow:0 8px 30px rgba(0,0,0,.2)}
.et-narrow .et-rail:not(.et-open){display:none}
.et-target{scroll-margin-top:24px}
@media print{.et-rail,.et-toggle,.et-meter{display:none!important}}
.et-share-label{margin-top:44px!important}
.et-share a{width:max-content;max-width:100%}
.et-share a.et-done{color:var(--et-ink)}
.et-meter-right .et-toggle .et-bar{display:none}