/* Shared design system. One stylesheet for the landing page, both participant flows and
   the admin panel, so a token change lands everywhere at once. */
:root{
  --bg:#f7f5f0;
  --ink:#222;
  --muted:#666;
  --line:#e2ddd2;
  --accent:#2b2b2b;
  --panel:#fff;
  --ok:#1a7f3c;
  --warn:#a33c33;
}
*{box-sizing:border-box}
body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}

.wrap{max-width:820px;margin:0 auto;padding:96px 32px 130px;text-align:center}
.wrap.wide{max-width:1100px}
/* The doctor's working page needs room for three columns. Forms and prose inside it stay
   centred at their own widths, so only the dashboard actually uses the extra space. */
.wrap.app{max-width:1400px}
h1{font-size:clamp(18px,4.6vw,34px);font-weight:600;line-height:1.25;margin:0 0 34px;letter-spacing:-.01em}
h2{font-size:22px;font-weight:600;margin:0 0 24px}
h3{font-size:16px;font-weight:600;margin:32px 0 10px}
p{font-size:15px;line-height:1.75;color:var(--ink);margin:0 auto 26px;max-width:620px}
p.lede{font-size:17px;line-height:1.65;margin-bottom:40px}
.muted{color:var(--muted)}
.small{font-size:13px;color:var(--muted);line-height:1.7;margin:0 auto 22px;max-width:620px}

/* Steps: only one visible at a time. */
.step{display:none}
.step.active{display:block}

button.primary{margin-top:26px;padding:16px 48px;font-size:15px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--accent);color:#fff;border:none;border-radius:999px;cursor:pointer;font-family:inherit;font-weight:600}
button.primary:disabled{opacity:.4;cursor:not-allowed}
button.primary:hover:not(:disabled){background:#000}
a.primary{display:inline-block;text-decoration:none}
button.ghost{background:transparent;color:var(--muted);border:none;padding:14px 22px;cursor:pointer;font-family:inherit;font-size:14px}
.link-btn{background:transparent;border:none;color:var(--muted);font-family:inherit;font-size:13px;cursor:pointer;padding:4px 0}
.link-btn:hover{color:var(--ink)}

/* Landing: the two role buttons. */
.roles{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:44px}
.role{flex:1 1 260px;max-width:320px;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:44px 28px;cursor:pointer;font-family:inherit;text-align:center;text-decoration:none;color:var(--ink);
  transition:border-color .15s,transform .15s}
.role:hover{border-color:var(--accent);transform:translateY(-2px)}
.role .rt{font-size:24px;font-weight:600;margin-bottom:10px}
.role .rd{font-size:14px;color:var(--muted);line-height:1.6}

/* Forms */
label{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:520px;margin:0 auto 30px}
.field-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:2px}
.name-row{display:flex;gap:12px;width:100%;max-width:520px;margin:0 auto 30px}
.name-row label{flex:1;margin:0;max-width:none}
input[type=text],input[type=email]{width:100%;padding:13px 16px;font-size:16px;background:#fff;
  border:1px solid var(--line);border-radius:6px;color:var(--ink);text-align:center;font-family:inherit}
input:focus{outline:none;border-color:var(--accent)}

/* Agreement */
body.agreement-active .wrap{max-width:1100px}
.agreement{max-width:1040px;width:100%;margin:0 auto 28px;height:60vh;min-height:380px;overflow-y:auto;
  background:#fff;border:1px solid var(--line);border-radius:6px;padding:40px 56px;text-align:left;
  font-size:15px;line-height:1.75;color:#333}
.agreement h4{margin:24px 0 8px;font-size:15px}
.scroll-hint{font-size:13px;color:var(--muted);margin:0 0 24px}
.sig-input{width:100%;max-width:520px;padding:24px 12px;font-size:34px;
  font-family:"Brush Script MT","Lucida Handwriting",cursive;text-align:center;background:#fff;
  border:none;border-bottom:1px solid var(--line);color:var(--ink)}
.sig-label{display:block;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-top:10px}

/* Calendar */
.cal{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin:38px 0 10px}
.day{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 12px;min-width:150px}
.day .dh{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.slot{display:block;width:100%;margin:0 0 6px;padding:9px 8px;font-size:13px;font-family:inherit;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:7px;color:var(--ink)}
.slot:hover:not(:disabled){border-color:var(--accent)}
.slot.on{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}
.slot:disabled{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.slot-scroll{max-height:280px;overflow-y:auto}
.picked{font-size:13px;color:var(--muted);margin-top:16px;min-height:20px}

/* Notices */
.notice{background:#fff;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:6px;
  padding:20px 24px;margin:38px auto;max-width:620px;text-align:left;font-size:14px;line-height:1.7}
.err{color:var(--warn);font-size:14px;min-height:20px;margin-top:14px}
.tick{font-size:44px;color:var(--ok);margin-bottom:14px}

/* Signature modal: the name is typed into a hidden field and drawn back in cursive as
   they type, so the signature they see is the signature that gets stored. */
.modal{position:fixed;inset:0;background:rgba(30,28,24,.55);display:none;align-items:center;
  justify-content:center;padding:20px;z-index:60}
.modal.on{display:flex}
.modal-box{background:var(--panel);border-radius:14px;max-width:560px;width:100%;padding:34px 32px 26px;text-align:center}
.modal-box h2{margin:0 0 8px}
.sig-pad{border:1px solid var(--line);border-bottom:2px solid var(--ink);border-radius:8px;background:#fffdf8;
  min-height:104px;display:flex;align-items:center;justify-content:center;padding:12px 16px;margin:22px 0 6px}
.sig-drawn{font-family:"Brush Script MT","Snell Roundhand","Lucida Handwriting",cursive;font-size:42px;
  line-height:1.15;color:#1a2a5e;word-break:break-word}
.sig-drawn.empty{color:#c9c3b4;font-size:24px}
.sig-hidden{position:absolute;opacity:0;pointer-events:none;height:0;width:0}
.sig-caret{display:inline-block;width:2px;height:38px;background:#1a2a5e;margin-left:2px;vertical-align:middle;
  animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.modal .actions{display:flex;gap:10px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.modal label{margin:14px auto 0}

/* Case panel: what the doctor reads before and during a session. Guidelines lead,
   because that is what they act on; the patient's script sits underneath as context. */
.case{max-width:780px;margin:36px auto 0;text-align:left}
.case-head{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px 22px;margin-bottom:16px}
.case-head .who{font-size:22px;font-weight:600;margin-bottom:2px}
.case-head .cond{color:var(--muted);font-size:14px}
.case-block{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px 26px;margin-bottom:20px}
.case-block h3{margin:0 0 10px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.case-body{white-space:pre-wrap;font-size:15px;line-height:1.75;max-height:44vh;overflow-y:auto}
.case-actions{text-align:center;margin-top:6px}

/* Video call controls: mute, camera, recording */
.call-controls{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:10px}
.call-controls button{padding:8px 14px;font-size:13px;border-radius:6px;border:1px solid #ddd;background:#fff;cursor:pointer;font-family:inherit;text-transform:none;letter-spacing:0;margin-top:0}
.call-controls button:hover{background:#f5f5f5}
.call-controls button.rec{background:#c33;color:#fff;border-color:#c33}
.call-controls button.rec:hover{background:#a22}
.call-controls button.rec-stop{background:#fff;color:#c33;border-color:#c33}
.call-controls .rec-status{font-size:13px}

/* Outline button: for a step that leaves the flow (Upwork) so it cannot be mistaken for
   the way forward. The filled button is always the next step in this app. */
a.secondary,button.secondary{display:inline-block;margin-top:8px;padding:14px 34px;font-size:14px;
  letter-spacing:.06em;text-transform:uppercase;font-weight:600;font-family:inherit;cursor:pointer;
  text-decoration:none;border-radius:999px;background:transparent;color:var(--accent);border:1px solid var(--accent)}
a.secondary:hover,button.secondary:hover{background:var(--accent);color:#fff}

/* Account bar: pinned top right on every participant page so signing out is always one
   click away, and getting back in never means starting a duplicate signup. */
.userbar{position:fixed;top:0;right:0;left:0;display:flex;justify-content:flex-end;align-items:center;
  gap:12px;padding:12px 20px;font-size:13px;color:var(--muted);z-index:40;pointer-events:none}
.userbar > *{pointer-events:auto}
.userbar .name{font-weight:600;color:var(--ink)}
.userbar button{background:transparent;border:none;font-family:inherit;font-size:13px;color:var(--muted);cursor:pointer;padding:4px 2px}
.userbar button:hover{color:var(--ink)}

.userbar .adminlink{background:var(--accent);color:#fff;text-decoration:none;font-size:12px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;padding:6px 14px;border-radius:999px}
.userbar .adminlink:hover{background:#000}
#login-modal .modal-box{max-width:440px}
#login-modal input{text-align:center}
#lg-code{letter-spacing:.4em;font-size:22px;font-weight:600}

/* Session view: video on the left, script on the right. The whole reason for embedding
   rather than sending people to Zoom is that the performer can read while being seen. */
.session{display:flex;gap:20px;align-items:stretch;max-width:1240px;margin:0 auto;text-align:left}
.session .vid{flex:1 1 60%;min-width:0}
.session .side{flex:1 1 40%;min-width:280px;max-width:460px}
.stage{background:#111;border-radius:14px;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  color:#8b8b8b;font-size:14px;text-align:center;padding:24px;overflow:hidden;position:relative}
.stage canvas,.stage video{width:100%;height:100%;object-fit:cover}
.stage .placeholder{max-width:320px;line-height:1.7}
.side .case-block{margin-bottom:14px}
.side .case-body{max-height:none}
.sticky-side{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto}
@media (max-width:880px){.session{flex-direction:column}.session .side{max-width:none}}

/* Lobby / queue */
.queue{max-width:720px;margin:0 auto;text-align:left}
.qrow{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:14px 18px;margin-bottom:10px}
.qrow .qn{font-weight:600}
.qrow .qm{color:var(--muted);font-size:13px}
.qrow .qs{margin-left:auto;display:flex;align-items:center;gap:10px}
.badge{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 10px;border-radius:999px}
.b-waiting{background:#fdeceb;color:#b3261e}
.b-booked{background:#f3f1ec;color:#8a8578}
.b-live{background:#e6f2ec;color:#1a7f5a}
.b-done{background:#eceff5;color:#41506b}
.admit{background:var(--accent);color:#fff;border:none;border-radius:999px;padding:9px 20px;
  font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.admit:hover{background:#000}

.userbar .langs{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--panel)}
.userbar .langbtn{border:none;background:transparent;font-family:inherit;font-size:12px;font-weight:600;
  padding:5px 12px;color:var(--muted);cursor:pointer}
.userbar .langbtn.on{background:var(--ink);color:#fff}

/* Queue rows double as the case picker: the whole row selects, the button admits. */
.qrow{cursor:pointer}
.qrow.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
#step-portal .queue{max-width:none;margin:0}
#step-portal h3{margin-top:28px}

/* The join screen: video takes three quarters of the width, script the rest, and the
   start time sits directly under the video where it cannot be missed. */
.session.live{max-width:1320px}
.session.live .vid{flex:1 1 62.5%}
/* 25% means 25%: the shared minimum would otherwise widen the panel on smaller screens. */
.session.live .side{flex:0 1 37.5%;min-width:0;max-width:none}
.starts{margin-top:16px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px 22px}
.starts-label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.starts-time{font-size:30px;font-weight:600;margin-top:4px;line-height:1.2}
.starts-meta{color:var(--muted);font-size:14px;margin-top:6px}
.starts-state{margin-top:12px;font-size:14px;color:var(--muted)}

/* Waiting room: the doctor's working view, set apart from the full booking list. */
.room{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px 22px 24px;
  margin:8px 0 34px;text-align:left}
.room-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.room-title{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.room-count{background:var(--accent);color:#fff;font-size:12px;font-weight:700;border-radius:999px;
  min-width:22px;padding:2px 8px;text-align:center}
.room .qrow{margin-bottom:8px}
.room .qrow.live{border-color:var(--ok)}
.room button.primary{margin-top:16px;width:100%;padding:14px 20px}

/* Dashboards lead with the call. A narrow rail for who is waiting, the video in the
   middle, the reading panel on the right. */
.session.board{max-width:1400px;align-items:flex-start}
.session.board .rail{flex:0 0 24%;min-width:230px;text-align:left}
.session.board .rail h1{font-size:24px;margin-bottom:8px}
.session.board .main{flex:1 1 50%;min-width:0}
.session.board .side{flex:0 1 28%;min-width:0;max-width:none}
.session.board .room{margin-top:14px}
.session.board .queue{max-width:none;margin:0}
/* Narrow columns: let a row wrap rather than shoving the button off the edge. */
.session.board .qrow{flex-wrap:wrap;gap:8px}
.session.board .qrow .qs{margin-left:0;width:100%;justify-content:flex-end}
.session.board .room button.primary{padding:12px 16px;font-size:13px}
/* aspect-ratio on a flex item can compute a width wider than its column, which pushed
   the video under the panel beside it. Height is driven instead. */
.stage.idle{aspect-ratio:auto;width:100%;min-height:320px;color:#8b8b8b;font-size:14px;padding:24px}
#p-idlestage{max-width:720px;margin:0 auto 26px}
@media (max-width:1000px){
  .session.board{flex-direction:column}
  .session.board .rail,.session.board .main,.session.board .side{flex:1 1 auto;min-width:0;max-width:none}
}
/* The patient's call: script rail on the left, picture and its labels on the right.
   Only where there are two columns to order — stacked on a phone the video comes first,
   because a script above a video pushes the call itself off the screen. */
@media (min-width:881px){ .session.live .side{order:-1} }
.case-body.tall{max-height:calc(100vh - 160px)}

/* Navigation, top left, opposite the account bar. Fixed so booking again is reachable
   from anywhere on the page rather than only from the bottom of the dashboard. */
.navbar{position:fixed;top:0;left:0;display:flex;align-items:center;gap:14px;
  padding:16px 22px;z-index:51}
/* The account bar spans the full width, so it has to be told to keep clear of the nav
   sitting on top of it. On a phone the two were printing over each other. */
.userbar{padding-left:150px;flex-wrap:wrap;row-gap:6px}
@media (max-width:700px){
  .navbar{padding:10px 12px}
  .navlink{padding:5px 12px;font-size:11px}
  .userbar{padding-left:110px;font-size:12px}
  .userbar .langbtn{font-size:11px;padding:4px 8px}
}
.navlink{background:transparent;border:1px solid var(--line);border-radius:999px;
  font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);background:var(--panel);cursor:pointer;padding:6px 16px}
.navlink:hover{border-color:var(--accent);background:var(--accent);color:#fff}

/* Admin only: book a real session right now. Marked out from the normal picker so it is
   never mistaken for something an actor should use. */
.booknow{max-width:620px;margin:26px auto 0;padding:20px 24px;text-align:left;
  background:var(--panel);border:1px dashed var(--line);border-radius:12px}
.booknow-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.booknow-title{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.booknow-tag{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  background:var(--ink);color:var(--panel);border-radius:999px;padding:3px 9px}
.booknow .small{margin:0 0 14px}
.booknow-list{display:flex;gap:10px;flex-wrap:wrap}
.booknow-list button{margin-top:0;padding:10px 20px;font-size:13px}
/* Shown inside the video stage when the browser refuses camera or mic without a click. */
.stage .gesture{margin-top:0;padding:12px 22px;font-size:13px}
a.navlink{text-decoration:none;display:inline-block}

/* Zoom renders into its own custom elements. They carry no intrinsic size, so without
   explicit dimensions they either paint nothing or fall back to the camera's own portrait
   shape floating in a black box. Both were seen before this. */
.stage{position:relative;overflow:hidden}
.vp-box{position:absolute !important;inset:0;display:flex !important;gap:4px;padding:4px;width:100%;height:100%;border-radius:14px;overflow:hidden}
.vp-box video-player,.vp-box .vp{position:relative !important;flex:1;min-width:0;height:100% !important;display:block;border-radius:6px;overflow:hidden}
.vp-box video-player video,.vp-box .vp video,.vp-box video-player div,.vp-box .vp div{width:100%;height:100%;object-fit:cover}
.vp-note{position:absolute;z-index:3;left:0;right:0;top:50%;transform:translateY(-50%);
  text-align:center;color:#8b8b8b;font-size:14px;padding:0 24px}
.stage .gesture{position:absolute;z-index:4;left:50%;bottom:18px;transform:translateX(-50%);margin:0}