/* HAUTE LUMIÈRE — THE PANEL, on every page of the house.
 *
 * 19 September 2026, his word: "on the right side view the panel — make it a
 * panel, sitewide, where you have the signal. Take the sound effects from the
 * breathing app, all the different soundscapes, and build them in there. We'll
 * add the signal later. Just make it the sound, and DON'T MAKE IT SLIDE — just
 * add a sound icon or settings. And integrate a play-this-site-in-audio, run
 * every page through the voice box app through the Ava voice."
 *
 * IT DOES NOT SLIDE, and that is the whole difference from `signal.css`, which
 * this supersedes as chrome (signal.js stays exactly where it is at
 * signal.hautelumiere.life — nothing about the messenger changes). A drawer that
 * slides announces itself and takes the page away while it travels; a panel is
 * simply there when it is wanted. It cross-fades at 400ms on the one house
 * curve, the page does not move under it, and on a wide screen the reading
 * column is never covered.
 *
 * THE ROOMS, top to bottom: the voice · the soundscapes · the breath · Signal.
 * Signal's room is built and named and says plainly that it is not open yet —
 * an empty room somebody can see is how the next session knows where it goes.
 *
 *   <link rel="stylesheet" href="/_hl/panel.css">
 *   <script src="/_hl/panel.js" defer></script>
 */

:root{
  --hlp-w: 21.5em;
  --hlp-ease: cubic-bezier(.165,.84,.44,1);
}

/* ── THE MARK ─────────────────────────────────────────────────
   A sound icon in the fixed chrome, top right, under the bar's own
   z-index so a bar dropdown still wins. Three rising strokes — the
   one figure that reads as sound at 14px without an icon set, and
   the house owns no icon set (HOUSE-STYLE, the six that are not
   negotiable, §6). Gold is the STROKE and never a fill. */
.hlp-mark{
  position:fixed; top:0; right:calc(var(--hlb-h, 46px) + 46px); z-index:410;
  width:44px; height:var(--hlb-h, 46px);
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--muted, #A49C88);
  transition:color 400ms var(--hlp-ease);
}
.hlp-mark:hover, .hlp-mark:focus-visible{ color:var(--ink, #1a1a1a); }
.hlp-mark:focus-visible{ outline:1px solid var(--gold, #C5A059); outline-offset:-6px; }
.hlp-mark svg{ width:15px; height:15px; display:block; }
/* Lit while anything in the panel is actually making a sound. A mark,
   never a badge: no number, no red, no pending, no unread. */
.hlp-mark[data-sounding]{ color:var(--gold, #C5A059); }
body.hlp-open .hlp-mark{ color:var(--ink, #1a1a1a); }

/* ── THE PANEL ────────────────────────────────────────────────
   Docked right, full height, hairline rule down its left edge.
   Radius zero. No transform, no travel — opacity and visibility
   only, which is also the only pair that cannot cost a layout. */
.hlp-panel{
  position:fixed; top:0; right:0; bottom:0; z-index:409;
  width:min(var(--hlp-w), 92vw);
  background:var(--paper, #FBF7F0);
  border-left:1px solid var(--rule, rgba(26,26,26,.12));
  display:flex; flex-direction:column;
  overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  font-family:'Manrope', system-ui, -apple-system, sans-serif;
  color:var(--ink, #1a1a1a);
  opacity:0; visibility:hidden;
  transition:opacity 400ms var(--hlp-ease), visibility 0s linear 400ms;
  /* A panel sits one step off the page, and that is the only thing a
     shadow is allowed to say in this house. */
  box-shadow:var(--shadow-sheet, -1px 0 24px -12px rgba(0,0,0,.18));
}
body.hlp-open .hlp-panel{
  opacity:1; visibility:visible;
  transition:opacity 400ms var(--hlp-ease), visibility 0s linear 0s;
}
.hlp-panel *{ box-sizing:border-box; }

/* THE READING COLUMN IS NEVER COVERED. Above 1180px the page makes room
   for the panel instead of the panel sitting on top of the words — which
   is the difference between a panel and a thing in the way. Below that
   there is not room to give, so it overlays and closing it returns the
   reader exactly where they were. */
@media (min-width:1180px){
  body.hlp-open{ padding-right:min(var(--hlp-w), 92vw); transition:padding-right 400ms var(--hlp-ease); }
  body{ transition:padding-right 400ms var(--hlp-ease); }
}
@media (prefers-reduced-motion:reduce){
  .hlp-panel, body{ transition:none !important; }
}

/* ── the head ── */
.hlp-head{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:22px 22px 14px; border-bottom:1px solid var(--rule, rgba(26,26,26,.12));
}
.hlp-house{
  font-size:10px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted, #8a8272); margin:0;
}
.hlp-x{
  background:none; border:none; padding:0; cursor:pointer;
  min-width:44px; min-height:44px; margin:-14px -14px -14px 0;
  font-family:'Manrope', sans-serif; font-size:10px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted, #8a8272);
  transition:color 300ms var(--hlp-ease);
}
.hlp-x:hover{ color:var(--ink, #1a1a1a); }

/* ── a room ── */
.hlp-room{ padding:22px; border-bottom:1px solid var(--rule, rgba(26,26,26,.12)); }
.hlp-room:last-of-type{ border-bottom:none; }
.hlp-lab{
  font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted, #8a8272); margin:0 0 10px;
}
/* If a human would read it aloud, it is serif. */
.hlp-note{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:15px; line-height:1.55; color:var(--ink-soft, #4a4740);
  margin:0 0 14px;
}
.hlp-note em{ font-style:italic; }

/* ── a button ── */
.hlp-btn{
  font-family:'Manrope', sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  background:none; color:var(--ink, #1a1a1a);
  border:1px solid var(--rule, rgba(26,26,26,.16)); border-radius:0;
  padding:0 16px; min-height:44px; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  transition:border-color 300ms var(--hlp-ease), color 300ms var(--hlp-ease);
}
.hlp-btn:hover, .hlp-btn:focus-visible{ border-color:var(--gold, #C5A059); }
.hlp-btn:focus-visible{ outline:1px solid var(--gold, #C5A059); outline-offset:2px; }
.hlp-btn[disabled]{ opacity:.45; cursor:default; }
.hlp-btn[disabled]:hover{ border-color:var(--rule, rgba(26,26,26,.16)); }
.hlp-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* ── the soundscapes ──────────────────────────────────────────
   Cards are grid cells with gap:1px over the rule — the house's one
   card idiom, and it is why nothing here has a radius or a shadow. */
.hlp-fam{
  font-size:9px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted, #8a8272); margin:16px 0 8px; opacity:.75;
}
.hlp-fam:first-of-type{ margin-top:2px; }
.hlp-sounds{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--rule, rgba(26,26,26,.12));
  border:1px solid var(--rule, rgba(26,26,26,.12));
}
.hlp-snd{
  background:var(--paper, #FBF7F0); border:none; border-radius:0;
  padding:12px 12px; min-height:56px; cursor:pointer; text-align:left;
  display:flex; flex-direction:column; gap:3px;
  transition:background 300ms var(--hlp-ease);
}
.hlp-snd b{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:500; font-size:16px; line-height:1.15; color:var(--ink, #1a1a1a);
}
.hlp-snd i{
  font-family:'Manrope', sans-serif; font-style:normal;
  font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted, #8a8272);
}
.hlp-snd:hover{ background:var(--paper-2, rgba(26,26,26,.03)); }
.hlp-snd:focus-visible{ outline:1px solid var(--gold, #C5A059); outline-offset:-2px; }
/* Playing. A hairline of gold on the leading edge — a mark, never a fill. */
.hlp-snd[data-on]{ box-shadow:inset 2px 0 0 0 var(--gold, #C5A059); }
.hlp-snd[data-on] b{ color:var(--ink, #1a1a1a); }
/* A scape that is being MADE rather than played back says so, because a
   reader who chose Rain and is hearing a generated equivalent has been told
   something false otherwise. Set only when the recording could not be had. */
.hlp-snd[data-made] i::after{ content:' · made'; opacity:.7; }

/* ── a level ── */
.hlp-level{ display:flex; align-items:center; gap:12px; margin-top:16px; }
.hlp-vlab{
  font-size:9px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted, #8a8272); flex:none;
}
.hlp-range{ -webkit-appearance:none; appearance:none; flex:1; height:44px; background:none; cursor:pointer; }
.hlp-range::-webkit-slider-runnable-track{ height:1px; background:var(--rule, rgba(26,26,26,.24)); }
.hlp-range::-moz-range-track{ height:1px; background:var(--rule, rgba(26,26,26,.24)); }
.hlp-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:9px; height:9px; margin-top:-4px;
  border-radius:50%; background:var(--gold, #C5A059); border:none;
}
.hlp-range::-moz-range-thumb{
  width:9px; height:9px; border-radius:50%; background:var(--gold, #C5A059); border:none;
}
.hlp-range:focus-visible{ outline:1px solid var(--gold, #C5A059); outline-offset:-10px; }

/* ── the voice ────────────────────────────────────────────────
   The line Ava is reading, lit under the reader's eye. A wash of gold
   at 14% with a hairline down the leading edge — the same mark the
   read-along already uses on the tantra volumes, so a reader who has
   met one has met both. */
.hlp-lit{
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--gold, #C5A059) 14%, transparent) 0%, transparent 92%) !important;
  box-shadow:-10px 0 0 0 color-mix(in srgb, var(--gold, #C5A059) 14%, transparent),
             -11px 0 0 0 var(--gold, #C5A059);
  transition:background 500ms var(--hlp-ease);
}
@media (prefers-reduced-motion:reduce){ .hlp-lit{ transition:none; } }

.hlp-time{
  font-family:'Manrope', sans-serif; font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted, #8a8272);
}

/* ── the breath ── */
.hlp-breath{
  display:flex; align-items:center; gap:14px; margin:4px 0 14px; min-height:64px;
}
.hlp-orb{
  display:block; width:34px; height:34px; border-radius:50%; flex:none;
  border:1px solid var(--gold, #C5A059); opacity:.45;
  /* Physics, not a timing curve: the same symmetric ease the practice uses. */
  transition:transform 600ms cubic-bezier(.37,0,.63,1), opacity 600ms ease;
}
@media (prefers-reduced-motion:reduce){ .hlp-orb{ transition:none; } }
.hlp-bph{
  font-family:'Cormorant Garamond', Georgia, serif; font-style:italic;
  font-size:17px; color:var(--ink-soft, #4a4740);
}
.hlp-cnt{
  font-family:'Manrope', sans-serif; font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted, #8a8272);
}

/* ── the foot ── */
.hlp-foot{
  font-family:'Cormorant Garamond', Georgia, serif; font-style:italic;
  font-size:14px; line-height:1.5; color:var(--muted, #8a8272);
  margin:0; padding:18px 22px 26px;
}

/* ── the hush ─────────────────────────────────────────────────
   Only under 1180px, where the panel genuinely overlays the page.
   Above that the page made room and nothing needs to be dimmed.
   Tapping it always returns the reader exactly where they were. */
.hlp-hush{
  position:fixed; inset:0; z-index:408;
  background:color-mix(in srgb, var(--desk, #0B0E16) 14%, transparent);
  opacity:0; pointer-events:none;
  transition:opacity 400ms var(--hlp-ease);
}
body.hlp-open .hlp-hush{ opacity:1; pointer-events:auto; }
@media (min-width:1180px){ .hlp-hush{ display:none; } }

@media print{
  .hlp-panel, .hlp-mark, .hlp-hush{ display:none !important; }
  .hlp-lit{ background:none !important; box-shadow:none !important; }
}

/* ── THE SLEEP TIMER ──────────────────────────────────────────────────────
   Four words, not a dial. A control a person sets at midnight has to be
   readable at midnight — one glance, one tap, done. */
.hlp-mins{ display:flex; gap:1px; background:var(--rule, rgba(26,26,26,.12));
  border:1px solid var(--rule, rgba(26,26,26,.12)); flex:1; }
.hlp-min{
  flex:1; min-height:44px; padding:0 6px; cursor:pointer;
  background:var(--paper, #FBF7F0); border:none; border-radius:0;
  font-family:'Manrope', sans-serif; font-size:10px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted, #8a8272);
  transition:color 300ms var(--hlp-ease), background 300ms var(--hlp-ease);
}
.hlp-min:hover{ color:var(--ink, #1a1a1a); }
.hlp-min:focus-visible{ outline:1px solid var(--gold, #C5A059); outline-offset:-2px; }
.hlp-min[data-on]{ color:var(--ink, #1a1a1a); box-shadow:inset 0 -2px 0 0 var(--gold, #C5A059); }

/* ── WHAT THE HOUR SUGGESTS ───────────────────────────────────────────────
   A hairline of gold under the name, and nothing else. Not a badge, not a
   word like "recommended", and it disappears the moment anything is playing —
   a suggestion that stays up while you are listening to something else is
   an argument, not an offer. */
.hlp-snd[data-suggested] b{ box-shadow:inset 0 -1px 0 0 var(--gold, #C5A059); }