/* =========================================================================
   Foolish social reading layer — shared stylesheet.
   Loaded by launch/index.html (Trace only) and the exploration doc.
   Trace: hairline heat rail, margin pins, action cluster. Nothing else.
   ========================================================================= */
:root{--sl-mono:ui-monospace,SFMono-Regular,Menlo,"Roboto Mono",monospace}
/* =========================================================================
   SOCIAL LAYER — near-invisible chrome. Hairlines, mono, 20% until touched.
   ========================================================================= */
.sl{position:fixed;inset:0;z-index:60;pointer-events:none;font-family:var(--sl-mono)}
.sl>*{pointer-events:auto}

/* ---- rail: a spare line, red squares for hot moments, purple you -------- */
/* rail on the LEFT, clear of the scrollbar and the thumb-scroll edge */
.sl-rail{position:fixed;top:12svh;bottom:12svh;left:20px;right:auto;width:22px;display:flex;justify-content:center;
  opacity:.72;transition:opacity .3s ease}
.sl-rail:hover{opacity:1}
.sl-rail::before{content:"";position:absolute;inset:0;left:50%;width:3px;margin-left:-1.5px;
  background:color-mix(in oklch,var(--purple) 22%,var(--ink-2));border-radius:2px}
.sl-rail__peaks{position:absolute;inset:0}
.sl-rail__track{display:none}
/* the discrete red heat squares are gone: they looked like the comment
   markers, were pressable, and only ever scrolled. Heat still reads through
   the rail's own --sl-heat glow. */
.sl-rail__peak{display:none}
/* driven by transform, not top: a top change re-lays-out the rail every frame
   the reader moves, which registered as continuous layout shift */
.sl-rail__thumb{position:absolute;left:50%;top:0;width:11px;height:11px;z-index:2;
  transform:translateY(calc(var(--p,0) * 76svh));will-change:transform;
  pointer-events:none;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--purple);
  box-shadow:0 0 0 2px color-mix(in oklch,var(--black) 92%,transparent),
             0 0 0 3px color-mix(in oklch,var(--purple) 50%,transparent),
             0 0 13px color-mix(in oklch,var(--purple) 60%,transparent)}
.sl-mark{position:absolute;left:50%;width:11px;height:2px;margin-left:-5.5px;background:var(--white);opacity:.8}
/* no reader has been here yet: the rail recedes to a bare thread, and the
   counter invites instead of reporting a zero */
.sl[data-sl-fresh] .sl-rail{opacity:.3}
.sl[data-sl-fresh] .sl-rail:hover{opacity:.62}
.sl[data-sl-fresh] .sl-count span{color:color-mix(in oklch,var(--purple-soft) 62%,transparent)}

/* ---- margin pins -------------------------------------------------------- */
.sl-pins{position:absolute;inset:0;z-index:4;pointer-events:none}
/* comment pins sit just to the RIGHT of the rail, reading as one cluster */
.sl-pin{position:absolute;left:-42px;right:auto;width:26px;height:26px;margin-top:-13px;padding:0;cursor:pointer;
  pointer-events:auto;background:rgba(1,0,17,.5);backdrop-filter:blur(6px);
  border:1px solid rgba(251,251,255,.22);border-radius:50%;color:rgba(251,251,255,.55);
  font:500 10px/1 var(--sl-mono);opacity:.2;transition:opacity .35s ease,transform .35s ease,border-color .2s,color .2s}
.sl-pin.is-near{opacity:.72}
.sl-pin--big{width:32px;height:32px;margin-top:-16px;border-color:color-mix(in oklch,var(--purple) 40%,transparent);color:color-mix(in oklch,var(--purple-soft) 85%,transparent)}
.sl-pin:hover{opacity:1;color:#fff;border-color:var(--purple);transform:scale(1.12)}
.sl-mine{position:absolute;left:-42px;right:auto;width:26px;height:26px;margin-top:-13px;display:grid;place-items:center;
  color:var(--red);font-size:12px;opacity:0;transform:scale(.4);transition:opacity .5s,transform .5s cubic-bezier(.2,1.4,.4,1)}
.sl-mine.is-in{opacity:1;transform:none}
.sl-mine--react{color:var(--purple)}
@media(max-width:900px){.sl-pin,.sl-mine{left:-34px}}
@media(max-width:600px){.sl-pin,.sl-mine{left:26px;right:auto;width:22px;height:22px;margin-top:-11px}}

/* ---- action cluster ----------------------------------------------------- */
.sl-cluster{position:fixed;right:44px;bottom:40px;display:flex;flex-direction:column;align-items:center;gap:4px;
  opacity:.2;transition:opacity .35s ease}
.sl-cluster:hover,.sl-cluster:focus-within,html.sl-idle .sl-cluster{opacity:1}
.sl-btn{width:40px;height:40px;display:grid;place-items:center;background:transparent;cursor:pointer;
  border:1px solid rgba(251,251,255,.16);border-radius:50%;color:rgba(251,251,255,.7);
  transition:border-color .2s,color .2s,background .2s;position:relative}
.sl-btn:hover{border-color:rgba(251,251,255,.55);color:#fff}
.sl-btn__g{font-size:14px;line-height:1}
.sl-btn__t{position:absolute;right:calc(100% + 10px);white-space:nowrap;font:400 9px/1 var(--sl-mono);
  letter-spacing:.14em;text-transform:uppercase;color:rgba(251,251,255,.5);opacity:0;transition:opacity .2s}
.sl-btn:hover .sl-btn__t{opacity:1}
.sl-btn[data-a="like"].is-on{color:var(--red);border-color:var(--red)}
.sl-btn[data-a="mark"].is-on{color:var(--purple-soft);border-color:var(--purple-soft)}
.sl-count{display:grid;justify-items:center;gap:2px;margin-top:6px;font-family:var(--sl-mono)}
.sl-count__n{font:500 11px/1 var(--sl-mono);color:rgba(251,251,255,.8)}
.sl-count span{font:400 8px/1 var(--sl-mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(251,251,255,.35)}
.sl-reacts{position:absolute;right:calc(100% + 12px);bottom:96px;display:flex;flex-direction:column;gap:6px;
  opacity:0;pointer-events:none;transform:translateX(8px);transition:opacity .22s,transform .22s}
.sl-reacts.is-open{opacity:1;pointer-events:auto;transform:none}
.sl-react{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;cursor:pointer;white-space:nowrap;
  background:rgba(1,0,17,.72);backdrop-filter:blur(10px);border:1px solid rgba(251,251,255,.14);border-radius:100px;
  color:rgba(251,251,255,.8);font:400 9px/1 var(--sl-mono);letter-spacing:.14em;text-transform:uppercase}
.sl-react:hover{border-color:var(--purple);color:#fff}
.sl-react.is-on{border-color:var(--purple);color:var(--purple);background:color-mix(in oklch,var(--purple) 14%,transparent)}
.sl-react span{font-size:13px}

/* ---- sheet (thread + composer) ------------------------------------------ */
/* The sheet lives in the letterbox margin BESIDE the column, never over it.
   --sl-col-half is the reading column's half-width (40vw column ⇒ 20vw);
   a host that caps its column should override it. */
.sl-sheet{position:fixed;left:calc(50% + var(--sl-col-half,20vw) + 22px);right:auto;top:20svh;
  width:min(330px,calc(50vw - var(--sl-col-half,20vw) - 86px));max-height:64svh;display:flex;flex-direction:column;
  background:rgba(1,0,17,.86);backdrop-filter:blur(16px);border:1px solid rgba(251,251,255,.14);
  opacity:0;transform:translateX(10px);pointer-events:none;transition:opacity .26s,transform .26s}
.sl-sheet__scroll{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(#000 calc(100% - 26px),transparent)}
.sl-sheet__scroll::-webkit-scrollbar{width:2px}
.sl-sheet__scroll::-webkit-scrollbar-thumb{background:rgba(251,251,255,.22)}
.sl-sheet__head,.sl-tabs,.sl-comp{flex:none}
.sl-sheet.is-open{opacity:1;transform:none;pointer-events:auto}
.sl-sheet__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px 10px;
  border-bottom:1px solid rgba(251,251,255,.1)}
.sl-sheet__at{font:400 9px/1.4 var(--sl-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--purple)}
.sl-sheet__x{background:none;border:0;color:rgba(251,251,255,.45);cursor:pointer;font-size:12px;padding:2px 4px}
.sl-sheet__x:hover{color:#fff}
.sl-sheet__hint{padding:12px 14px 0;font:400 10px/1.6 var(--sl-mono);color:rgba(251,251,255,.4)}
.sl-tabs{display:flex;align-items:center;gap:14px;padding:10px 14px;border-bottom:1px solid rgba(251,251,255,.07)}
.sl-tab{background:none;border:0;padding:0;cursor:pointer;font:400 9px/1 var(--sl-mono);letter-spacing:.16em;
  text-transform:uppercase;color:rgba(251,251,255,.34)}
.sl-tab:hover{color:rgba(251,251,255,.7)}
.sl-tab.is-on{color:#fff}
.sl-tabs__span{margin-left:auto;font:400 8px/1 var(--sl-mono);letter-spacing:.12em;text-transform:uppercase;
  color:rgba(251,251,255,.28)}
.sl-more{display:block;width:100%;background:none;border:0;border-bottom:1px solid rgba(251,251,255,.07);
  padding:12px 14px;cursor:pointer;text-align:left;font:400 9px/1 var(--sl-mono);letter-spacing:.16em;
  text-transform:uppercase;color:rgba(251,251,255,.42)}
.sl-more:hover{color:var(--purple)}
.sl-sheet__list{display:grid}
.sl-cmt{padding:13px 14px;border-bottom:1px solid rgba(251,251,255,.07)}
.sl-cmt__h{display:flex;align-items:center;gap:8px;font:500 10px/1 var(--sl-mono);color:var(--purple-soft);letter-spacing:.04em}
.sl-cmt__tag{font-style:normal;font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--purple);
  border:1px solid color-mix(in oklch,var(--purple) 50%,transparent);padding:2px 5px}
.sl-cmt__t{margin:7px 0 9px;font:250 13px/1.5 var(--font-body);color:rgba(251,251,255,.86);text-wrap:pretty}
.sl-cmt__like{background:none;border:0;padding:0;cursor:pointer;font:400 10px/1 var(--sl-mono);color:rgba(251,251,255,.35)}
.sl-cmt__like:hover,.sl-cmt__like.is-on{color:var(--red)}
.sl-comp{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:12px 14px;
  border-top:1px solid rgba(251,251,255,.1);background:rgba(1,0,17,.94)}
.sl-comp--solo{grid-template-columns:1fr;border-top:0}
.sl-comp__me{font:500 10px/1 var(--sl-mono);color:rgba(251,251,255,.4)}
.sl-comp textarea{width:100%;box-sizing:border-box;resize:none;background:rgba(251,251,255,.05);color:#fff;
  border:1px solid rgba(251,251,255,.12);padding:9px 10px;font:250 13px/1.45 var(--font-body);outline:none}
.sl-comp textarea:focus{border-color:var(--purple-soft)}
.sl-comp__send{justify-self:end;background:none;border:1px solid rgba(251,251,255,.2);color:rgba(251,251,255,.75);
  padding:7px 13px;cursor:pointer;font:400 9px/1 var(--sl-mono);letter-spacing:.16em;text-transform:uppercase}
.sl-comp__send:hover{border-color:var(--purple);color:var(--purple)}

/* ---- toast -------------------------------------------------------------- */
.sl-toast{position:fixed;left:50%;bottom:38px;transform:translate(-50%,14px);opacity:0;
  padding:9px 16px;background:rgba(1,0,17,.86);backdrop-filter:blur(10px);
  border:1px solid rgba(251,251,255,.14);font:400 10px/1 var(--sl-mono);letter-spacing:.12em;
  text-transform:uppercase;color:rgba(251,251,255,.8);transition:opacity .3s,transform .3s;pointer-events:none}
.sl-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---- sparks ------------------------------------------------------------- */
.sl-spark{position:fixed;width:3px;height:3px;background:var(--red);border-radius:50%;pointer-events:none;
  animation:slSpark .8s ease-out forwards}
@keyframes slSpark{from{opacity:1;transform:translate(0,0) scale(1)}to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3)}}

/* ---- end-of-chapter recap reel ------------------------------------------ */
.sl-reel{max-width:900px;margin:0 auto;padding:0 24px}
.sl-reel{opacity:.4}
.sl-reel__head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid rgba(251,251,255,.14)}
.sl-reel__eyebrow{font:500 11px/1 var(--sl-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--purple)}
.sl-reel__sub{font:400 10px/1 var(--sl-mono);letter-spacing:.1em;color:rgba(251,251,255,.42)}
.sl-reel__strip{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:16px}
@media(max-width:700px){.sl-reel__strip{grid-template-columns:repeat(3,1fr)}}
.sl-reel__card{display:grid;gap:8px;padding:0;background:none;border:0;cursor:pointer;text-align:left}
.sl-thumb{aspect-ratio:3/4;background:var(--ink-1) 50% 50%/cover;border:1px solid rgba(251,251,255,.14);filter:brightness(1.4) saturate(1.1);
  transition:border-color .2s,transform .3s}
.sl-reel__card:hover .sl-thumb{border-color:var(--purple);transform:translateY(-3px)}
.sl-reel__meta{display:flex;align-items:baseline;gap:8px;font-family:var(--sl-mono)}
.sl-reel__meta b{font:500 12px/1 var(--sl-mono);color:#fff}
.sl-reel__meta span{font:400 9px/1 var(--sl-mono);letter-spacing:.1em;color:rgba(251,251,255,.38)}

/* ---- not enough margin for a side panel: become a bottom sheet ---------- */
@media(max-width:1080px){
  .sl-sheet{left:0;right:0;bottom:0;top:auto!important;width:auto;max-height:62svh;
    transform:translateY(12px);border-left:0;border-right:0;border-bottom:0}
  .sl-sheet.is-open{transform:none}
}

/* ---- mobile: centered action bar, flush rail, both tied to the reading UI -- */
@media(max-width:700px){
  .sl-cluster{left:50%;right:auto;bottom:calc(10px + env(safe-area-inset-bottom));
    flex-direction:row;align-items:center;justify-content:center;gap:2px;opacity:1;padding:5px 12px;
    background:rgba(1,0,17,.74);backdrop-filter:blur(12px);
    border:1px solid rgba(251,251,255,.12);border-radius:100px;
    --sl-y:0;transform:translateX(-50%) translateY(var(--sl-y));
    transition:transform .32s cubic-bezier(.6,0,.2,1),opacity .32s}
  /* chrome clears the screen while you read; a pause or an up-gesture returns it */
  html:not(.ui-on) .sl-cluster{--sl-y:180%;opacity:0}
  html:not(.ui-on) .sl-rail{opacity:0;transform:translateX(-120%)}
  /* a comment is content, not chrome: notes left by other readers stay put
     when the rest of the layer clears. The reader's own hearts are a private
     trace and leave with the rail. */
  html:not(.ui-on) .sl-mine{opacity:0;pointer-events:none;transform:translateX(-14px)}
  .sl-btn{width:44px;height:44px;border-color:transparent}
  .sl-btn__t{display:none}
  .sl-count{margin:0 0 0 10px}
  .sl-reacts{left:50%;right:auto;bottom:calc(100% + 12px);width:max-content;max-width:94vw;
    flex-direction:row;flex-wrap:wrap;justify-content:center;
    transform:translateX(-50%) translateY(6px)}
  .sl-reacts.is-open{transform:translateX(-50%)}
  /* rail sits hard against the left edge — away from the scroll thumb */
  .sl-rail{left:0;right:auto;top:10svh;bottom:14svh;transition:opacity .3s ease,transform .32s cubic-bezier(.6,0,.2,1)}
  /* pins ride just inside the art, not in a margin that no longer exists */
  .sl-toast{bottom:84px}
}

@media(prefers-reduced-motion:reduce){
  .sl-spark{animation:none;display:none}
}

/* a reader owns their own note and can always take it back down */
.sl-cmt{position:relative}
.sl-cmt--mine{border-left:1px solid color-mix(in oklch,var(--purple,#695FF9) 55%,transparent);padding-left:10px}
.sl-cmt--mine .sl-cmt__like{margin-right:70px}
.sl-cmt__del{position:absolute;right:0;bottom:0;min-height:44px;padding:0 2px;background:none;border:0;cursor:pointer;font:inherit;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in oklch,currentColor 45%,transparent);transition:color .18s ease}
.sl-cmt__del:hover,.sl-cmt__del:focus-visible{color:#F26D6D}

/* =========================================================================
   COMMENT PINS — a note, not a dot.

   The heat rail speaks in small red squares. A comment had to stop being a
   circle in the same family and become its own object: a squared purple tag
   with a visible count and a leader nib pointing at the panel it belongs to.
   It is legible at rest, so a reader never has to hunt for other readers.
   ========================================================================= */
.sl-pin{width:auto;min-width:30px;height:24px;margin-top:-12px;padding:0 7px;border-radius:5px;
  background:color-mix(in oklch,var(--purple) 42%,rgba(1,0,17,.86));
  border:1px solid color-mix(in oklch,var(--purple) 68%,transparent);
  color:#fff;font:600 11px/1 var(--sl-mono);opacity:.9;
  box-shadow:0 2px 10px rgba(1,0,17,.5)}
/* the nib: points from the tag at the exact panel the note is pinned to */
.sl-pin::after{content:"";position:absolute;top:50%;left:100%;width:9px;height:1px;margin-top:-.5px;
  background:color-mix(in oklch,var(--purple) 70%,transparent)}
.sl-pin__n::after{content:" ▭";opacity:.6;font-size:9px}
.sl-pin.is-near{opacity:1;border-color:var(--purple);
  box-shadow:0 2px 14px color-mix(in oklch,var(--purple) 45%,transparent)}
.sl-pin--big{width:auto;height:27px;margin-top:-13.5px;padding:0 9px;font-size:12px}
.sl-pin:hover{transform:scale(1.06);background:var(--purple)}
/* on a phone the tag sits inside the column edge, so it points the other way */
@media(max-width:600px){
  .sl-pin{height:26px;margin-top:-13px;min-width:34px}
  .sl-pin::after{left:auto;right:100%}
}

/* a heart given is a soft ambient mark, never mistaken for a note */
.sl-mine--like{color:color-mix(in oklch,var(--red) 88%,transparent);font-size:11px}

/* the like button flashes and lets go — it is applause, not a switch */
.sl-btn.is-hit{color:#fff;border-color:var(--red);
  background:color-mix(in oklch,var(--red) 26%,transparent);
  transform:scale(1.14)}
.sl-btn.is-hit .sl-btn__g{transform:scale(1.2)}
.sl-btn__g{transition:transform .18s cubic-bezier(.2,1.5,.4,1)}

/* =========================================================================
   THE RAIL AS THE WAY IN

   A chapter is thousands of pixels tall; the rail is one screen. Notes and
   hearts are mapped onto it so the whole chapter's social life is reachable
   without scrolling to find it. Pressing a note travels there and opens it.
   ========================================================================= */
.sl-rail__notes{position:absolute;inset:0}
.sl-rail__note{position:absolute;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;
  background:none;cursor:pointer;display:grid;place-items:center;pointer-events:auto}
/* the mark itself: a small purple bar — a note, not a dot */
.sl-rail__note i{width:15px;height:7px;border-radius:2px;background:var(--purple);
  box-shadow:0 0 0 1px rgba(1,0,17,.6),0 1px 8px color-mix(in oklch,var(--purple) 60%,transparent);
  transition:transform .2s cubic-bezier(.2,1.5,.4,1),background .2s}
/* the count rides out to the side, only when reached for */
.sl-rail__note b{position:absolute;left:26px;white-space:nowrap;padding:3px 7px;border-radius:4px;
  background:rgba(1,0,17,.9);border:1px solid color-mix(in oklch,var(--purple) 45%,transparent);
  color:#fff;font:600 10px/1 var(--sl-mono);letter-spacing:.04em;
  opacity:0;transform:translateX(-4px);pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.sl-rail__note:hover i,.sl-rail__note:focus-visible i{transform:scaleX(1.45);background:var(--purple-soft,#9d95ff)}
.sl-rail__note:hover b,.sl-rail__note:focus-visible b{opacity:1;transform:none}

/* your own hearts, accumulating down the mini-map as you read */
.sl-rail__heart{position:absolute;left:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
  border-radius:50%;background:var(--red);opacity:0;transform:scale(.3);
  box-shadow:0 0 0 1px rgba(1,0,17,.7),0 0 10px color-mix(in oklch,var(--red) 70%,transparent);
  transition:opacity .5s,transform .5s cubic-bezier(.2,1.5,.4,1)}
.sl-rail__heart.is-in{opacity:.9;transform:none}

/* =========================================================================
   THE RAIL IS CHROME, AT EVERY WIDTH

   Hiding it while reading only ever existed inside the 700px mobile block, so
   on a desktop it sat over the letterbox margin permanently. The art comes
   first on every screen: the bar clears on the way down and returns on a
   pause or an up-gesture. Its note marks are content, but the bar they ride
   on is not.
   ========================================================================= */
html:not(.ui-on) .sl-rail{opacity:0;transform:translateX(-120%);pointer-events:none}
html:not(.ui-on) .sl-mine{opacity:0;pointer-events:none;transform:translateX(-14px)}
.sl-rail{transition:opacity .32s ease,transform .32s cubic-bezier(.6,0,.2,1)}


/* ---- mobile legibility nudge (Aron note): the small type gains 1-2px ----- */
@media(max-width:600px){
  .sl-cmt__t{font-size:14.5px}
  .sl-comp textarea{font-size:14.5px}
  .sl-cmt__h{font-size:11.5px}
  .sl-cmt__tag{font-size:9.5px}
  .sl-cmt__like{font-size:11.5px}
  .sl-cmt__del{font-size:12px}
  .sl-tab{font-size:10.5px}
  .sl-more{font-size:10.5px}
  .sl-comp__send{font-size:10.5px}
  .sl-comp__me{font-size:11.5px}
  .sl-sheet__at{font-size:10.5px}
  .sl-sheet__hint{font-size:11.5px}
  .sl-toast{font-size:11.5px}
  .sl-count__n{font-size:12.5px}
  .sl-count span{font-size:9.5px}
  .sl-react{font-size:10.5px}
  .sl-reel__eyebrow{font-size:12px}
  .sl-reel__sub{font-size:11.5px}
  .sl-reel__meta b{font-size:13px}
  .sl-reel__meta span{font-size:10.5px}
}