/* HAUTE LUMIÈRE — Signal, on every page.
 *
 * Two pieces of chrome, always mounted, never loud: a pull at the left edge
 * that opens the correspondence, and a mark beside the bar's own right-side
 * controls that goes gold — quietly — when something has been said since the
 * reader last looked. A mark, never a badge: no number, no red, no pending,
 * no unread. See Signal/SPEC.md V. VOICE.
 *
 *   <link rel="stylesheet" href="/_hl/signal.css">
 *   <script src="/_hl/signal.js" defer></script>
 */

:root{
  --hls-w:min(88vw, 380px);
}

/* ── the pull ─────────────────────────────────────────────────
   Left edge, vertically centered, under the bar's own z-index so a
   sticky bar dropdown still wins, and above ordinary content. */
.hl-signal-pull{
  position:fixed; top:50%; left:0; z-index:399; transform:translateY(-50%);
  writing-mode:vertical-rl; text-orientation:mixed;
  font-family:'Manrope',sans-serif; text-transform:uppercase; letter-spacing:.22em;
  font-size:10px; font-weight:700;
  padding:16px 7px; min-height:44px;
  border:1px solid var(--rule); border-left:none; border-radius:0;
  background:var(--paper); color:var(--muted); cursor:pointer;
  transition:color 300ms cubic-bezier(.165,.84,.44,1), border-color 300ms cubic-bezier(.165,.84,.44,1);
}
.hl-signal-pull:hover,
.hl-signal-pull:focus-visible{ color:var(--ink); border-color:var(--gold-d, var(--gold)); }
.hl-signal-pull:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* ── the mark ─────────────────────────────────────────────────
   Sits where the bar's own right-side controls live — see bar.css
   --hlb-h. A 44px touch target holding a small gold mark, never a
   fill, never a number. */
.hl-signal-mark{
  position:fixed; top:0; right:calc(var(--hlb-h, 46px) + 2px); z-index:410;
  width:44px; height:var(--hlb-h, 46px);
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer; padding:0;
}
.hl-signal-mark .dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--rule); transition:background 400ms cubic-bezier(.165,.84,.44,1);
}
.hl-signal-mark.lit .dot{
  background:var(--gold);
  animation:hl-signal-pulse 2.4s ease-in-out infinite;
}
@keyframes hl-signal-pulse{
  0%,100%{ box-shadow:0 0 0 0 transparent, 0 0 10px 1px color-mix(in oklab, var(--gold), transparent 45%); transform:scale(1); }
  50%{ box-shadow:0 0 0 0 transparent, 0 0 16px 4px color-mix(in oklab, var(--gold), transparent 25%); transform:scale(1.15); }
}
@media (prefers-reduced-motion:reduce){
  .hl-signal-mark.lit .dot{ animation:none; }
}

/* ── the scrim + drawer ───────────────────────────────────────
   Same shape every modal surface in the house already uses: a
   scrim behind, a sheet that slides rather than pops. Radius zero,
   hairline rule, gold only as a rule at focus. */
.hl-signal-scrim{
  position:fixed; inset:0; z-index:498; background:rgba(var(--veil, 12,30,22),.4);
  opacity:0; pointer-events:none; transition:opacity 400ms cubic-bezier(.165,.84,.44,1);
}
.hl-signal-scrim.open{ opacity:1; pointer-events:auto; }

.hl-signal-drawer{
  position:fixed; top:0; left:0; bottom:0; z-index:499;
  width:var(--hls-w); background:var(--paper);
  border-right:1px solid var(--rule);
  transform:translateX(-100%);
  transition:transform 500ms cubic-bezier(.165,.84,.44,1);
  display:flex; flex-direction:column;
}
.hl-signal-drawer.open{ transform:translateX(0); }
.hl-signal-drawer iframe{
  flex:1; width:100%; border:none; background:var(--paper);
}
.hl-signal-drawer .hl-signal-close{
  position:absolute; top:8px; right:8px; z-index:1;
  min-width:44px; min-height:44px;
  background:none; border:none; cursor:pointer;
  font-family:'Manrope',sans-serif; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
}
.hl-signal-drawer .hl-signal-close:hover{ color:var(--ink); }

@media (max-width:520px){
  .hl-signal-pull{ font-size:9px; padding:14px 6px; }
}

@media print{
  .hl-signal-pull, .hl-signal-mark, .hl-signal-drawer, .hl-signal-scrim{ display:none !important; }
}