/* room.css: the private room (/room/), and the video pieces the watch page and the studio share.
   Tokens come from /css/style.css; nothing here defines a colour, size or duration of its own
   except the stage blacks, which are video letterboxing, not text. Phone first. */

:root{--room-glow-1:rgba(230,198,92,.34);--room-glow-2:rgba(212,175,55,.12);--room-glow-0:rgba(212,175,55,0);--room-flame-1:#fffaf0;--room-flame-2:#f6e3a6;--room-video:#000;--room-scrim:rgba(6,4,14,.82)}
/* ---- page frame ---- */
.room-page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--night)}
.room-top{position:sticky;top:0;z-index:var(--z-nav);display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  min-height:56px;padding:var(--s2) var(--gutter);border-bottom:var(--soft);background:var(--night)}
.room-top .wordmark{font:500 18px/1 var(--f-display);color:var(--cream);text-decoration:none}
.room-top-right{display:flex;align-items:center;gap:var(--s2);min-width:0}
.room-main{flex:1;display:flex;flex-direction:column;min-height:0}
.room-main:focus:not(:focus-visible){outline-color:transparent}
.practice{margin:0;padding:var(--s2) var(--gutter);background:var(--card);border-bottom:1px solid var(--teal-line);color:var(--cream);font:500 var(--t6)/var(--lh6) var(--f-body)}
.practice a{color:var(--cream)}
.practice-nav{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s1)}
.practice-nav a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--s2)}

/* ---- the recording mark: a rose dot and a plain word ---- */
.rec-pill{display:inline-flex;align-items:center;gap:var(--s2);min-height:28px;padding:0 12px;border:1px solid var(--rose);border-radius:var(--r-full);
  color:var(--cream);font:500 var(--t6)/1 var(--f-body);background:var(--night)}
.rec-pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rose);flex:none}
@media (prefers-reduced-motion:no-preference){ .rec-pill::before{animation:rec-pulse 2.4s ease-in-out infinite} }
@keyframes rec-pulse{50%{opacity:.35}}
.quality{display:inline-flex;align-items:center;gap:6px;color:var(--cream-3);font:400 var(--t6)/1 var(--f-body)}
.quality i{display:inline-block;width:3px;border-radius:1px;background:var(--line)}
.quality i:nth-child(1){height:6px}.quality i:nth-child(2){height:10px}.quality i:nth-child(3){height:14px}
.quality[data-q="excellent"] i,.quality[data-q="good"] i:nth-child(-n+2),.quality[data-q="poor"] i:nth-child(1){background:var(--gold)}
.quality[data-q="lost"] i:nth-child(1){background:var(--rose)}

/* ---- lobby ---- */
.lobby{display:grid;gap:var(--s5);padding:var(--s5) var(--gutter) var(--s7);max-width:var(--wrap);margin-inline:auto;width:100%}
@media (min-width:1024px){ .lobby{grid-template-columns:7fr 5fr;gap:var(--s7);align-items:start;padding-top:var(--s7)} .lobby > .preview{position:sticky;top:96px} }
.lobby-side{display:flex;flex-direction:column;gap:var(--s4)}
.lobby-side h1{font-size:var(--t2);line-height:var(--lh2)}
@media (min-width:1024px){ .lobby-side h1{font-size:var(--t1);line-height:var(--lh1)} }
.lobby-when{color:var(--cream-2)}
.lobby .field select,.lobby .field input[type="text"]{width:100%}
.lobby-devices{display:grid;gap:var(--s3)}
@media (min-width:640px){ .lobby-devices{grid-template-columns:1fr 1fr} }
.lobby-toggles{display:flex;flex-wrap:wrap;gap:var(--s2)}
.consent{padding:var(--s3);border:var(--soft);border-left:2px solid var(--gold);border-radius:var(--r-s);background:var(--deep)}
.consent label{display:flex;gap:12px;align-items:flex-start;min-height:var(--tap);cursor:pointer;color:var(--cream)}
.consent input{width:22px;height:22px;margin:2px 0 0;flex:none;accent-color:var(--gold)}
.consent .small{margin-top:var(--s2)}
.consent + .consent{margin-top:var(--s2)}
.consent-teach{border-left-color:var(--gold-line)}
.lobby-note{color:var(--cream-3)}
.notice{padding:var(--s3);border:var(--soft);border-left:2px solid var(--rose);border-radius:var(--r-s);background:var(--card);color:var(--cream)}

/* the preview: a framed window, like the portrait plate */
.preview{position:relative;margin:12px}
.preview::after{content:"";position:absolute;inset:-12px;border:var(--hairline);pointer-events:none;z-index:var(--z-raised)}
.preview-in{position:relative;aspect-ratio:4/3;background:var(--deep);overflow:hidden;display:grid;place-items:center}
@media (min-width:768px){ .preview-in{aspect-ratio:16/10} }
.preview video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.preview .meter{position:absolute;left:var(--s3);right:var(--s3);bottom:var(--s3);height:2px;background:var(--line);z-index:var(--z-raised)}
.preview .meter span{display:block;height:100%;width:0;background:var(--gold);transition:width 90ms linear}
.preview-off{display:grid;place-items:center;gap:var(--s2);text-align:center;color:var(--cream-3);padding:var(--s4)}
.initial{width:96px;height:96px;border-radius:50%;border:var(--hairline);display:grid;place-items:center;background:var(--card);
  font:400 44px/1 var(--f-display);color:var(--cream)}
/* Rosemary's mark wherever her picture used to be (no photo of her on the site, 14 Oct 2026): a gilded R. */
.initial-mono{color:var(--gold);font-style:italic;border-color:var(--gold)}

/* ---- waiting: one slow breath of candlelight ---- */
.waiting{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)}
.breath{position:relative;width:96px;height:96px;margin:var(--s3) 0 var(--s4) var(--s3)}
.breath::before{content:"";position:absolute;inset:-18px;border-radius:50%;
  background:radial-gradient(circle,var(--room-glow-1) 0%,var(--room-glow-2) 45%,var(--room-glow-0) 70%)}
.breath::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:28px;margin:-18px 0 0 -9px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:radial-gradient(circle at 50% 70%,var(--room-flame-1) 0%,var(--room-flame-2) 40%,var(--gold) 100%)}
@media (prefers-reduced-motion:no-preference){
  .breath::before{animation:breathe 6s ease-in-out infinite}
  .breath::after{animation:flicker 3.2s ease-in-out infinite}
}
@keyframes breathe{0%,100%{transform:scale(.82);opacity:.6}50%{transform:scale(1.08);opacity:1}}
@keyframes flicker{0%,100%{transform:scale(1)}40%{transform:scale(.94,1.04)}70%{transform:scale(1.03,.97)}}

/* ---- in the room ---- */
.call{flex:1;display:flex;flex-direction:column;min-height:0;position:relative}
.stage{flex:1;position:relative;display:grid;gap:var(--s2);padding:var(--s2);min-height:0;grid-template-rows:1fr}
.stage.has-cards{grid-template-rows:3fr 2fr}
@media (min-width:1024px){
  .stage{padding:var(--s3);gap:var(--s3)}
  .stage.has-cards{grid-template-rows:1fr;grid-template-columns:3fr 2fr}
}
.stage.has-strip{padding-bottom:0}
.vtile{position:relative;min-height:0;min-width:0;overflow:hidden;background:var(--room-video);border:1px solid var(--line);border-radius:var(--r-m)}
.vtile video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--room-video)}
.vtile.cover video{object-fit:cover}
.vtile.is-self video{transform:scaleX(-1)}
.vtile.speaking{border-color:var(--gold)}
.vtile-empty{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:var(--s2);background:var(--deep);text-align:center;padding:var(--s3)}
.vtile-empty img{width:96px;height:96px;border-radius:50%;object-fit:cover;border:var(--hairline)}
.vtile-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.vtile-name{position:absolute;left:var(--s2);bottom:var(--s2);z-index:var(--z-raised);display:inline-flex;align-items:center;gap:6px;max-width:calc(100% - 16px);
  padding:4px 10px;border-radius:var(--r-s);background:var(--night);color:var(--cream);font:500 var(--t6)/var(--lh6) var(--f-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vtile-name .ico{width:14px;height:14px}
.vtile-name.is-host{color:var(--gold)}
.vtile-label{position:absolute;right:var(--s2);top:var(--s2);z-index:var(--z-raised)}
.hand{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--r-full);background:var(--gold);color:var(--on-gold);font:500 12px/20px var(--f-body)}

/* self view: small, top right on a phone, bottom right and draggable on a desktop */
.self{position:absolute;z-index:var(--z-raised);right:var(--s3);top:var(--s3);width:96px;aspect-ratio:3/4;touch-action:none}
@media (min-width:1024px){ .self{top:auto;bottom:var(--s4);right:var(--s4);width:200px;aspect-ratio:16/10;cursor:grab} .self.dragging{cursor:grabbing} }
.self .vtile{position:absolute;inset:0;border-color:var(--gold-line)}
.self .initial{width:48px;height:48px;font-size:24px}
@media (min-width:1024px){ .self .initial{width:64px;height:64px;font-size:30px} }

/* other people in a circle */
.strip{display:flex;gap:var(--s2);overflow-x:auto;padding:var(--s2);scroll-snap-type:x mandatory}
.strip:empty{display:none}
.strip .vtile{flex:0 0 132px;aspect-ratio:4/3;scroll-snap-align:start}
.strip .vtile video{object-fit:cover}
@media (min-width:1024px){ .strip{padding:var(--s3)} .strip .vtile{flex-basis:184px} }

/* controls */
.controls{display:flex;justify-content:center;align-items:flex-start;gap:var(--s2);flex-wrap:wrap;
  padding:var(--s2) var(--gutter) calc(var(--s2) + env(safe-area-inset-bottom));border-top:var(--soft);background:var(--night)}
.ctl{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:60px;min-height:56px;padding:6px 8px;
  border:1px solid var(--line);border-radius:var(--r-m);background:var(--deep);color:var(--cream);font:500 12px/16px var(--f-body);
  transition:border-color var(--dur-ui),background-color var(--dur-ui)}
.ctl:hover{border-color:var(--gold-line)}
.ctl .ico{width:22px;height:22px}
.ctl.is-off{color:var(--cream-2)}
.ctl.is-off .ico{stroke:var(--rose)}
.ctl[aria-pressed="true"].is-toggle{border-color:var(--gold-line)}
.ctl.is-on{border-color:var(--gold);color:var(--gold)}
.ctl-leave{border-color:var(--gold-line)}
.ctl[hidden]{display:none}
.ico{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.btn .ico{width:18px;height:18px;flex:none}
.btn-icon .ico{width:20px;height:20px}

/* banners inside the call */
.banner{position:absolute;z-index:var(--z-sheet);left:50%;top:var(--s3);transform:translateX(-50%);max-width:calc(100% - 32px);
  padding:10px 16px;border:var(--hairline);border-radius:var(--r-m);background:var(--card);color:var(--cream);font:500 14px/20px var(--f-body);text-align:center}
.banner[hidden]{display:none}

/* side panel: people, chat, Rosemary's controls. A drawer on a desktop, a sheet on a phone. */
.side{position:fixed;z-index:var(--z-sheet);left:0;right:0;bottom:0;max-height:78vh;display:flex;flex-direction:column;
  background:var(--card);border-top:var(--hairline);border-radius:var(--r-m) var(--r-m) 0 0;box-shadow:var(--shadow-modal)}
@media (min-width:1024px){ .side{left:auto;top:56px;width:380px;max-height:none;border-top:0;border-left:var(--hairline);border-radius:0} }
.side[hidden]{display:none}
.side-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:var(--s2) var(--s3);border-bottom:var(--soft)}
.side-head h2{font-size:var(--t3);line-height:var(--lh3);font-weight:var(--w-heading)}
.side-body{flex:1;overflow:auto;padding:var(--s3);display:flex;flex-direction:column;gap:var(--s4)}
.side-section h3{font:400 var(--t-label)/var(--lh-label) var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:var(--s2)}
.people{display:flex;flex-direction:column}
.person{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) 0;border-bottom:var(--soft);flex-wrap:wrap}
.person:last-child{border-bottom:0}
.person-name{flex:1;min-width:120px;color:var(--cream);overflow-wrap:anywhere}
.person-name .small{display:block}
.person .row{gap:var(--s2)}
.host-actions{display:flex;flex-direction:column;gap:var(--s2)}
.host-actions .btn{width:100%}

/* chat (circles in the room; the watch page reuses it) */
.chat{display:flex;flex-direction:column;min-height:0;gap:var(--s2)}
.chat-log{flex:1;overflow:auto;display:flex;flex-direction:column;gap:12px;min-height:120px;padding:var(--s1) 0}
.chat-msg{color:var(--cream-2);overflow-wrap:anywhere;font:400 15px/22px var(--f-body)}
.chat-msg b{font-weight:500;color:var(--cream);margin-right:6px}
.chat-msg.is-host b{color:var(--gold)}
.chat-msg .row{display:inline-flex;gap:var(--s1);margin-left:var(--s1)}
.chat-msg.is-hidden{color:var(--cream-3);font-style:italic}
.chat-form{display:flex;gap:var(--s2);align-items:flex-end}
.chat-form .field{flex:1;margin:0}
.chat-form input{width:100%}
.btn-tiny{min-height:var(--tap);padding:0 10px;font-size:14px}

/* ended */
.ended{flex:1;display:flex;flex-direction:column;justify-content:center;gap:var(--s3);padding:var(--s7) var(--gutter);max-width:640px;margin:0 auto}
.ended h1{font-size:var(--t1);line-height:var(--lh1)}

/* the 3-2-1 before going live */
.count{position:fixed;inset:0;z-index:var(--z-dialog);display:grid;place-items:center;background:var(--room-scrim);color:var(--cream);
  font:400 160px/1 var(--f-display)}
.count[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){ .count span{animation:count-in 900ms var(--ease) both} }
@keyframes count-in{from{opacity:0;transform:scale(1.12)}to{opacity:1;transform:none}}

.sr-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.quality .q-word{display:none}
@media (min-width:640px){ .quality .q-word{display:inline} }
.strip .initial{width:56px;height:56px;font-size:26px}
@media (min-width:1024px){ .side-open .call{margin-right:380px} }
/* the hidden attribute must win over the display set above */
.rec-pill[hidden],.vtile-empty[hidden],.vtile video[hidden],.preview video[hidden],.preview-off[hidden],.self[hidden],.vtile[hidden],.quality[hidden]{display:none}

/* ---- phones ----
   The back camera is never mirrored (only your own face is, like a mirror). Controls stay inside
   the home-bar and notch insets. A phone turned sideways puts the buttons down the right edge so
   the picture keeps the height, and her picture and the cards sit side by side. */
.preview.is-back video{transform:none}
.room-top{padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right))}
.controls{padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right))}
@media (pointer:coarse){ .ctl{min-width:64px;min-height:60px;font-size:14px;line-height:18px} }
@media (orientation:landscape) and (max-height:540px){
  .room-top{min-height:44px;padding-top:2px;padding-bottom:2px}
  .call{flex-direction:row}
  .stage.has-cards{grid-template-rows:1fr;grid-template-columns:3fr 2fr}
  .strip{flex-direction:column;flex:0 0 148px;overflow-x:hidden;overflow-y:auto;scroll-snap-type:y mandatory}
  .strip .vtile{flex:0 0 auto}
  .call > .controls{flex-direction:column;flex-wrap:nowrap;justify-content:center;border-top:0;border-left:var(--soft);overflow-y:auto;
    padding:var(--s1) max(var(--s2),env(safe-area-inset-right)) calc(var(--s1) + env(safe-area-inset-bottom)) var(--s2)}
  .call > .controls .ctl{min-height:48px;width:88px}
  .self{right:calc(112px + env(safe-area-inset-right))}
  .lobby{grid-template-columns:1fr 1fr;align-items:start}
}
.stage .vtile-empty p{font-size:16px;line-height:24px}
.room-page .toast{bottom:calc(96px + env(safe-area-inset-bottom))}
@media (min-width:1024px){ .room-page .toast{bottom:calc(96px + var(--s3))} }
@media (orientation:landscape) and (max-height:540px){ .room-page .toast{bottom:calc(var(--s3) + env(safe-area-inset-bottom))} }