/* HAUTE LUMIÈRE — the sharing layer.
   Every passage, every section, every page: takeable.
   Nothing snaps, nothing bounces, nothing pops. It rises and it settles. */

:root{ --hl-ease:cubic-bezier(.165,.84,.44,1); }

.hl-share, .hl-share *{ box-sizing:border-box; }

/* ── the passage popover ─────────────────────────────────────────── */
.hl-pop{
  position:absolute; z-index:9000; left:0; top:0;
  display:flex; align-items:center; gap:2px;
  padding:5px; border-radius:20px;
  background:var(--panel-bg, var(--ink, #33201A));
  color:var(--panel-fg, #FDF7EA);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 1px 2px rgba(0,0,0,.10), 0 10px 34px rgba(0,0,0,.22);
  opacity:0; transform:translateY(6px) scale(.985); pointer-events:none;
  visibility:hidden;   /* out of sight is also out of the tab order */
  transition:opacity 420ms var(--hl-ease), transform 420ms var(--hl-ease),
             visibility 0s linear 420ms;
  -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
  font-family:var(--sans,'Manrope',system-ui,sans-serif);
}
.hl-pop[data-open="1"]{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto;
  visibility:visible; transition-delay:0s; }
.hl-pop::after{
  content:""; position:absolute; left:var(--tail,50%); bottom:-5px; width:10px; height:10px;
  margin-left:-5px; transform:rotate(45deg); border-radius:2px;
  background:var(--panel-bg, var(--ink, #33201A));
  border-right:1px solid rgba(255,255,255,.10); border-bottom:1px solid rgba(255,255,255,.10);
}
.hl-pop[data-flip="1"]::after{ bottom:auto; top:-5px; transform:rotate(225deg); }

.hl-b{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:30px; min-width:30px; padding:0 9px; border-radius:15px;
  background:transparent; border:0; cursor:pointer;
  color:inherit; opacity:.72;
  transition:opacity 300ms var(--hl-ease), background 300ms var(--hl-ease);
}
.hl-b:hover, .hl-b:focus-visible{ opacity:1; background:rgba(255,255,255,.09); outline:none; }
.hl-b:focus-visible{ box-shadow:0 0 0 1.5px var(--gold,#D69A4C); }
.hl-b svg{ width:15px; height:15px; display:block; fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.hl-b svg.solid{ fill:currentColor; stroke:none; }
.hl-b .lbl{ font-size:8.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap; }
.hl-sep{ width:1px; height:16px; margin:0 3px; background:currentColor; opacity:.18; flex:none; }
.hl-pop .hl-b[data-act="copy"]{ color:var(--gold,#D69A4C); opacity:.95; }

/* ── the section handle: appears beside a heading on approach ─────── */
.hl-anchor{
  position:absolute; margin-left:-2.1em; width:1.7em; height:1.7em;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; color:var(--muted,#8A7166); opacity:0;
  transition:opacity 380ms var(--hl-ease), color 380ms var(--hl-ease);
  cursor:pointer; border:0; background:none; padding:0;
}
.hl-anchor svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round; }
:is(h2,h3,h4):hover > .hl-anchor, .hl-anchor:focus-visible{ opacity:.55; }
.hl-anchor:hover{ opacity:1 !important; color:var(--gold-d,var(--gold,#B07932)); }
@media (max-width:900px){ .hl-anchor{ display:none; } }

/* ── the page rail ───────────────────────────────────────────────── */
.hl-rail{
  position:fixed; right:clamp(10px,1.6vw,20px); bottom:clamp(14px,3vh,30px); z-index:8500;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 4px; border-radius:22px;
  background:rgba(var(--veil,51,32,26),.055);
  border:1px solid var(--rule,rgba(0,0,0,.10));
  -webkit-backdrop-filter:blur(16px) saturate(1.2); backdrop-filter:blur(16px) saturate(1.2);
  color:var(--ink,#33201A);
  font-family:var(--sans,'Manrope',system-ui,sans-serif);
  opacity:0; transform:translateY(8px);
  transition:opacity 600ms var(--hl-ease), transform 600ms var(--hl-ease);
}
.hl-rail[data-ready="1"]{ opacity:1; transform:none; }
.hl-rail .hl-b{ opacity:.5; }
.hl-rail .hl-b:hover{ opacity:1; }
.hl-rail .hl-more{ max-height:0; overflow:hidden; display:flex; flex-direction:column; align-items:center;
  visibility:hidden;
  transition:max-height 520ms var(--hl-ease), visibility 0s linear 520ms; }
.hl-rail[data-open="1"] .hl-more{ max-height:320px; visibility:visible; transition-delay:0s; }
.hl-rail[data-open="1"] .hl-b[data-act="toggle"]{ opacity:1; color:var(--gold-d,#B07932); }
@media print{ .hl-rail,.hl-pop,.hl-anchor{ display:none !important; } }

/* ── the quiet word ──────────────────────────────────────────────── */
.hl-said{
  position:fixed; left:50%; bottom:clamp(18px,5vh,44px); transform:translate(-50%,8px); z-index:9500;
  padding:9px 18px; border-radius:20px;
  background:var(--panel-bg,var(--ink,#33201A)); color:var(--panel-fg,#FDF7EA);
  font-family:var(--sans,'Manrope',system-ui,sans-serif);
  font-size:9px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  opacity:0; pointer-events:none;
  transition:opacity 500ms var(--hl-ease), transform 500ms var(--hl-ease);
  box-shadow:0 10px 30px rgba(0,0,0,.20);
}
.hl-said[data-open="1"]{ opacity:1; transform:translate(-50%,0); }

@media (prefers-reduced-motion:reduce){
  .hl-pop,.hl-rail,.hl-said,.hl-anchor,.hl-b,.hl-rail .hl-more{ transition-duration:1ms !important; }
  .hl-pop,.hl-rail,.hl-said{ transform:none !important; }
}