/* TraduLive Meeting — one stylesheet for the five views.
   The tokens and the components are those of the approved mock-ups
   (docs/meeting/design/kit.py and the six screens); what is added here is
   what a drawing does not need: real inputs and buttons, real video in a
   tile, and widths other than 1440 and 430.

   Nothing is loaded from another address (the page's security policy allows
   this origin only). Geist and Geist Mono are the site's own files, cut down
   to Latin letters; other scripts fall back to the system's fonts, as in the
   app. The ?v= on a font is its fingerprint, written by
   scripts/stamp-assets.py and never by hand. */

@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/geist-latin.woff2?v=15819f6757) format("woff2"); unicode-range: U+0020-007E, U+00A0-017F, U+0218-021B, U+02C6, U+02DA, U+02DC, U+2010-2027, U+2030-203A, U+20AC, U+2122, U+2190-2193, U+2212; }
/* Geist Mono as the site holds it has capitals, digits and a few signs only:
   enough for the clock and the language codes. Small letters (the link in
   the controls bar) come from the system's monospace. */
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 500 600; font-display: swap; src: url(/fonts/geist-mono-latin.woff2?v=d446907209) format("woff2"); unicode-range: U+0020-005A, U+00B7, U+2192; }

:root{
  --bg:#0B0D11; --panel:#13161C; --panel2:#1E232C; --line:#242A34; --outline:#343B47;
  --ink:#F3F5F8; --ink2:#A7AFBB; --ink3:#6F7885; --accent:#5EC8A0; --accent-ink:#0B1712; --accent-dim:#3F8F70;
  --danger:#E5484D; --warn:#E8A04C;
  --s1:#5EC8A0; --s2:#7FB3F5; --s3:#E8B573; --s4:#C79BF0; --s5:#F08FA8; --s6:#6FD3E0;
  --sans:"Geist",-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%;background:var(--bg);color:var(--ink)}
body{font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
[hidden]{display:none!important}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:disabled{cursor:default}
input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mono{font-family:var(--mono)}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* A speaker's colour follows the seat, so it is the same in every browser. */
.c1{--c:var(--s1)}.c2{--c:var(--s2)}.c3{--c:var(--s3)}.c4{--c:var(--s4)}.c5{--c:var(--s5)}.c6{--c:var(--s6)}

/* ── which view shows ── */
.view{display:none}
body[data-view="boot"] .lobby,body[data-view="room"] .lobby{display:none}
body[data-view="signin"] #view-signin{display:flex}
body[data-view="signin"] .door-stage{display:none}
body[data-view="hours"] #view-hours{display:flex}
body[data-view="hours"] .door-stage{display:none}
body[data-view="organization"] #view-organization{display:block}
body[data-view="organization"] .door-stage{display:none}
body[data-view="customer"] #view-customer{display:block}
body[data-view="customer"] .door-stage{display:none}
.customer-filters{display:grid;grid-template-columns:minmax(180px,1fr) 170px 170px auto;align-items:end;gap:14px;margin-bottom:26px}
.customer-stats{padding-top:18px}
.customer-stats dd{font-size:26px}
.customer-offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
.customer-offer{padding:20px 0;min-width:0}
.customer-offer h3{margin:0 0 12px}
.customer-offer p{margin-bottom:12px}
.customer-offer .org-field{margin-bottom:12px}
.customer-languages{margin:12px 0;font-size:14px;overflow-wrap:anywhere}
.customer-meeting{display:grid;grid-template-columns:minmax(180px,1fr) minmax(300px,2fr) auto;gap:22px;padding:22px 0;border-bottom:1px solid var(--line);align-items:start}
.customer-meeting h3,.customer-detail h3{margin:0;font-size:16px;overflow-wrap:anywhere}
.customer-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;font-size:13px;line-height:1.5}
.customer-facts dt{color:var(--ink2)}
.customer-facts dd{overflow-wrap:anywhere;margin-top:4px}
.customer-attendee{display:grid;grid-template-columns:minmax(160px,1fr) 3fr;gap:24px;padding:20px 0;border-top:1px solid var(--line)}
.customer-detail{padding-top:24px}
.customer-detail .org-heading{justify-content:space-between}
.customer-purchase{display:grid;grid-template-columns:1.3fr 1fr 100px 100px;align-items:center;gap:16px;padding:14px 0;border-top:1px solid var(--line);font-size:13px;overflow-wrap:anywhere}
#startBilling{margin-bottom:18px}
@media(max-width:720px){.customer-filters{grid-template-columns:1fr 1fr}.customer-filters>.org-field:first-child{grid-column:1/-1}.customer-offers,.customer-meeting,.customer-attendee{grid-template-columns:1fr}.customer-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.customer-purchase{grid-template-columns:1fr 1fr}.customer-meeting>.org-button{justify-self:start}.customer-stats dd{font-size:23px}}
.organization{padding:36px 24px 64px}
.org-frame{max-width:1120px;margin:0 auto;letter-spacing:0}
.org-heading{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.org-heading>div:first-child{flex:1;min-width:180px}
.org-heading h1{font-size:30px;line-height:1.25;margin-top:8px}
.org-heading .org-field{max-width:190px}
.org-frame>.org-heading:first-child{align-items:flex-end}
.org-frame>.org-heading:first-child>div:first-child{min-width:0;overflow-wrap:anywhere}
.org-frame>.org-heading:first-child>.org-field{min-width:min(160px,100%)}
.org-frame>.org-heading:first-child>.org-field>.org-input{height:42px}
.org-frame>.org-heading:first-child>.org-button{min-width:0;max-width:100%}
.org-frame h2{font-size:20px;line-height:1.35;overflow-wrap:anywhere}
.org-frame h3{font-size:16px;margin:24px 0 14px}
.org-frame p{line-height:1.5}
.org-frame>.org-field{max-width:420px;margin-bottom:30px}
.org-field{display:flex;flex-direction:column;gap:7px;font-size:13px;line-height:1.4;min-width:0;color:var(--ink2)}
.org-input{display:block;width:100%;min-width:0;min-height:42px;border:1px solid var(--outline);border-radius:6px;background:var(--panel);padding:9px 10px;color:var(--ink);font-size:14px}
.org-input[type="checkbox"]{width:20px;height:20px;min-height:20px;accent-color:var(--accent);margin:10px 0}
.org-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:9px 12px;border:1px solid var(--outline);border-radius:6px;background:var(--panel);font-size:13px;line-height:1.4;overflow-wrap:anywhere}
.org-button:hover:not(:disabled){border-color:var(--accent)}
.org-button:disabled,.org-input:disabled{opacity:.5}
.org-button .i{width:16px;height:16px}
.org-section{padding:25px 0;border-top:1px solid var(--line)}
.org-section>h2{margin-bottom:18px}
.org-section>summary{font-weight:600;cursor:pointer;font-size:16px;line-height:1.5}
.org-section>summary+.org-form{margin-top:20px}
.org-company{margin-bottom:14px}
.org-state{font-size:13px;color:var(--accent);font-weight:600}
.org-expired{color:var(--warn)}
.org-counts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding:0 0 28px}
.org-counts dt,.org-contract dt{font-size:13px;color:var(--ink2);line-height:1.5}
.org-counts dd{font-size:30px;line-height:1.5;font-variant-numeric:tabular-nums}
.org-counts>div:nth-child(2) dd{color:var(--s2)}
.org-counts>div:nth-child(3) dd{color:var(--warn)}
.org-counts>div:nth-child(4) dd{color:var(--accent)}
.org-contract{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:20px}
.org-contract dd{font-size:14px;margin-top:5px;line-height:1.5;overflow-wrap:anywhere}
.org-price{font-size:17px;font-weight:600;margin-bottom:6px}
.org-muted{font-size:13px;color:var(--ink2);line-height:1.5}
.org-status{color:var(--accent);padding:12px 0}
.org-frame>.alert{margin-bottom:18px}
.org-member{display:grid;grid-template-columns:minmax(180px,1fr) 150px 130px auto auto;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.org-identity{display:flex;flex-direction:column;gap:7px;min-width:0;font-size:14px;line-height:1.4;overflow-wrap:anywhere}
.org-invitation{display:grid;grid-template-columns:minmax(180px,1fr) 150px 150px auto;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);font-size:13px}
.org-confirm{grid-column:1/-1;display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--warn);font-size:14px}
.org-invite-form{display:grid;grid-template-columns:minmax(180px,1fr) 150px 150px auto;gap:14px;align-items:end;margin-bottom:12px}
.org-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.org-form>.org-button{justify-self:start}
.org-share{display:flex;align-items:center;gap:10px;margin-bottom:24px}
.org-share .org-input{flex:1;font-family:var(--mono);font-size:12px}
.org-share .org-button{flex:none}
.org-email{margin:10px 0 18px;overflow-wrap:anywhere}
#startOrganization{margin-bottom:20px}
#startOrganization .note{margin-top:9px}
#toOrganization{font-size:13px;text-decoration:none;white-space:nowrap}
@media(max-width:760px){
  .organization{padding:24px 16px 40px}
  .org-heading{gap:12px;margin-bottom:20px}
  .org-heading h1{font-size:26px}
  .org-heading>div:first-child{flex-basis:100%}
  .org-heading .org-field{flex:1}
  .org-counts{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .org-counts dd{font-size:26px}
  .org-contract{grid-template-columns:repeat(2,minmax(0,1fr))}
  .org-member,.org-invitation,.org-invite-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .org-member>.org-identity,.org-invitation>.org-identity,.org-invite-form>.org-field:first-child{grid-column:1/-1}
  .org-member>.org-button,.org-invitation>.org-button{justify-self:start}
  .org-form{grid-template-columns:minmax(0,1fr)}
  .org-share{align-items:stretch;flex-direction:column}
  body[data-view="organization"] .top,body[data-view="customer"] .top,body[data-view="start"] .top{flex-wrap:wrap;height:auto;min-height:72px;padding:14px 16px;gap:12px}
  body[data-view="organization"] .top>.vr,body[data-view="organization"] .top>.title,body[data-view="customer"] .top>.vr,body[data-view="customer"] .top>.title,body[data-view="start"] .top>.vr,body[data-view="start"] .top>.title{display:none}
  body[data-view="organization"] #acctBar,body[data-view="customer"] #acctBar{gap:10px;flex-wrap:wrap;min-width:0}
  body[data-view="customer"] #acctBar,body[data-view="start"] #acctBar{flex-basis:100%;margin-left:0}
  body[data-view="organization"] #hostWho{max-width:130px}
  body[data-view="start"] #hostWho,body[data-view="hours"] #hostWho{max-width:90px}
  body[data-view="start"] #acctBar,body[data-view="hours"] #acctBar{gap:8px;flex-wrap:wrap}
}
body[data-view="start"] #view-start,body[data-view="door"] #view-door,
body[data-view="end"] #view-end,body[data-view="unsupported"] #view-unsupported{display:block}
body[data-view="room"] #view-room{display:grid}
body[data-view="end"] #check,body[data-view="unsupported"] #check{display:none}

/* ── every page outside the room: the bar, the page, the footer ──
   The page takes the room between the two, so on a tall window the footer
   stands at the bottom of the window and on a long page after the content;
   it is never in the middle of the screen. */
.lobby{min-height:100dvh;display:flex;flex-direction:column}
.lobby > main{flex:1 0 auto}
.lobby > .top,.pagefoot{flex:none}

/* ── top bar ── */
.top{height:56px;display:flex;align-items:center;gap:16px;padding:0 24px;border-bottom:1px solid var(--line)}
.top .brand{display:flex;align-items:center;gap:10px;font-size:17px;line-height:1;font-weight:700;letter-spacing:-.2px;color:var(--ink)}
.top .mark{width:26px;height:26px;display:block;flex:none}
.top a.brand{text-decoration:none}
.vr{width:1px;height:20px;background:var(--line);flex:none}
.top .what{min-width:0}
.top .title{font-size:15px;font-weight:600;letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .title.soft{font-weight:500;color:var(--ink2)}
.top .sub{display:none;font-size:12px;line-height:16px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .timer{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--ink2)}
/* the host's hours left, beside the clock: there all the time, and it takes
   the warnings' colours when the hours run low */
.top .hleft{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px 0 8px;border-radius:999px;border:1px solid var(--outline);
  font-size:12.5px;font-weight:600;color:var(--ink2);white-space:nowrap;font-variant-numeric:tabular-nums}
.top .hleft svg{width:14px;height:14px;color:var(--ink3)}
.top .hleft.low{color:var(--warn);border-color:rgba(232,160,76,.45)}
.top .hleft.last{color:var(--danger);border-color:rgba(229,72,77,.5)}
.top .hleft.low svg,.top .hleft.last svg{color:currentColor}
.top .sub b{font-weight:500;color:var(--ink2)}
.top .sub b.low{color:var(--warn)}
.top .sub b.last{color:var(--danger)}
.live{display:inline-flex;align-items:center;gap:8px;height:26px;padding:0 12px 0 9px;border-radius:999px;
  background:rgba(94,200,160,.10);border:1px solid rgba(94,200,160,.34);color:var(--accent);
  font-size:11px;font-weight:700;letter-spacing:.14em;line-height:1;white-space:nowrap;flex:none}
.live i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(94,200,160,.2)}
.top .kind{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;border:1px solid var(--outline);
  color:var(--ink2);font-size:12.5px;font-weight:500;margin-left:-8px}
.top .end{margin-left:auto;display:flex;align-items:center;gap:16px}
.top .count{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--ink2);white-space:nowrap}
.top .count svg{width:18px;height:18px;color:var(--ink3)}
.top .count b{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--ink)}
.top .invite{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px 0 13px;border-radius:999px;
  border:1.5px solid var(--outline);font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap}
.top .invite svg{width:17px;height:17px}
.top .invite.done{border-color:var(--accent-dim);color:var(--accent)}
.top .who{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink2);white-space:nowrap;min-width:0}
.top .who b{font-weight:400;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.top .tostart{font-size:14px;font-weight:600;color:var(--accent);text-decoration-color:var(--accent-dim);white-space:nowrap}
.top .linkbtn{font-size:14px;white-space:nowrap}
/* with nobody signed in: the public page's two entries */
.top .links{gap:8px 24px;min-width:0;flex-wrap:wrap;justify-content:flex-end}
.top .links a{font-size:14px;font-weight:500;color:var(--ink2);text-decoration:none;white-space:nowrap}
.top .links a:hover{color:var(--ink)}
.lobby > .top{height:auto;min-height:56px;padding-block:12px}
.lobby > .top .brand{flex-shrink:0}
.me{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--c);background:color-mix(in srgb,var(--c) 13%,#141820);
  display:grid;place-items:center;font-size:10.5px;font-weight:600;color:var(--ink);flex:none}

/* ── START and DOOR: the device check and the card ── */
.door-stage{display:flex;align-items:center;justify-content:center;padding:32px 24px}
.pair{display:flex;align-items:stretch;justify-content:center;gap:72px;width:100%;max-width:1232px}
.left{flex:1 1 680px;max-width:680px;min-width:0;display:flex;flex-direction:column}
.right{flex:0 0 480px;min-width:0}
.right.solo{flex-basis:480px}

.lead-h{margin-bottom:24px;padding-top:4px}
.lead-h h2{margin-top:10px;font-size:22px;line-height:28px;font-weight:600;letter-spacing:-.01em}
.lead-h p{margin-top:4px;font-size:15px;line-height:20px;color:var(--ink2)}
.label{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}

/* ── avatar tile (the preview at the door, and every tile in the room) ── */
.tile{position:relative;border-radius:18px;border:1px solid var(--line);overflow:hidden;
  background:radial-gradient(70% 80% at 50% 42%,rgba(255,255,255,.055),rgba(255,255,255,0) 70%),var(--panel);
  display:flex;align-items:center;justify-content:center;min-width:0;min-height:0}
.tile.speaking{outline:2px solid var(--c);outline-offset:-1px;border-color:transparent}
.tile.nocam{background:#0E1116}
.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#07090C}
/* One sees oneself as in a mirror; the others receive the picture unturned. */
.tile.mine video{transform:scaleX(-1)}
.tile.hasvideo .avatar{display:none}
.avatar{width:96px;height:96px;border-radius:50%;border:2px solid var(--c);
  background:color-mix(in srgb,var(--c) 13%,#141820);display:grid;place-items:center;
  font-size:32px;font-weight:600;letter-spacing:.02em;color:var(--ink);margin-bottom:16px;flex:none}
.name{position:absolute;left:12px;bottom:12px;height:28px;max-width:calc(100% - 64px);padding:0 11px;border-radius:999px;
  background:rgba(11,13,17,.8);border:1px solid var(--line);display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;white-space:nowrap;z-index:1}
.name bdi{overflow:hidden;text-overflow:ellipsis}
.name .nm-first{display:none}
.name .mono{font-size:11px;font-weight:500;color:var(--ink3);letter-spacing:.06em}
.micst{position:absolute;right:12px;bottom:12px;width:28px;height:28px;border-radius:50%;
  background:rgba(11,13,17,.8);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink2);z-index:1}
.micst svg{width:15px;height:15px}
.micst .eq{display:none}
.micst.off{color:var(--danger);background:rgba(229,72,77,.12);border-color:rgba(229,72,77,.42)}
.micst.talk{border-color:color-mix(in srgb,var(--c) 55%,transparent);background:color-mix(in srgb,var(--c) 14%,#0B0D11)}
.micst.talk svg{display:none}
.micst.talk .eq{display:flex}
.eq{align-items:center;gap:2.5px;height:14px}
.eq b{display:block;width:2.5px;border-radius:2px;background:var(--c)}
.eq b:nth-child(1){height:6px}.eq b:nth-child(2){height:13px}.eq b:nth-child(3){height:9px}
.tag{position:absolute;left:12px;top:12px;height:24px;padding:0 10px;border-radius:999px;
  background:rgba(11,13,17,.8);border:1px solid var(--line);display:flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);white-space:nowrap;z-index:1}
.tag svg{width:13px;height:13px;margin-left:-2px}
.tag.hot{color:var(--c);border-color:color-mix(in srgb,var(--c) 45%,var(--line));background:color-mix(in srgb,var(--c) 12%,#0B0D11)}
.tag.spk{display:none}
.flag{position:absolute;right:12px;top:12px;height:24px;padding:0 10px 0 8px;border-radius:999px;
  border:1px solid var(--line);display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--ink3);white-space:nowrap;z-index:1}
.flag svg{width:13px;height:13px}

/* the preview tile at the door is the same tile, drawn larger */
.tile.preview{flex:1;min-height:424px}
.preview .avatar{width:136px;height:136px;border-width:3px;font-size:46px;margin:0 0 8px}
.preview .tag{height:32px;padding:0 12px;gap:8px;font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink);background:rgba(11,13,17,.78)}
.preview .tag.tl{left:16px;top:16px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.preview .tag.tl svg{width:16px;height:16px;margin:0}
.preview .tag.bl{left:16px;top:auto;bottom:16px;font-weight:600;max-width:calc(100% - 80px)}
.preview .tag.bl bdi{overflow:hidden;text-overflow:ellipsis}
.preview .tag.bl .code{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--ink3);letter-spacing:.06em}
.preview .tag.br{left:auto;top:auto;right:16px;bottom:16px;width:32px;padding:0;justify-content:center;color:var(--ink2)}
.preview .tag.br svg{width:16px;height:16px;margin:0}
.preview .tag.br.off{color:var(--danger);background:rgba(229,72,77,.12);border-color:rgba(229,72,77,.42)}

.check{margin-top:24px;display:flex;align-items:center;gap:12px}
.round{position:relative;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--panel);border:1px solid var(--line);color:var(--ink);flex:none}
.round.on{background:rgba(94,200,160,.13);border-color:var(--accent-dim);color:var(--accent)}
.round.off{background:rgba(229,72,77,.12);border-color:rgba(229,72,77,.5);color:var(--danger)}
.round svg{width:22px;height:22px}
.meter{flex:1;min-width:0;margin-left:12px;height:52px;padding:0 20px;border-radius:999px;border:1px solid var(--line);background:var(--panel);
  display:flex;align-items:center;gap:16px;overflow:hidden}
.meter .lab{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);white-space:nowrap}
.bars{display:flex;align-items:center;gap:4px;flex:1;min-width:0;overflow:hidden}
.bars i{display:block;width:4px;height:16px;border-radius:2px;background:var(--panel2);flex:none}
.bars i.on{background:var(--accent)}
.bars i.on.lo{background:var(--accent-dim)}
.heard{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--accent);white-space:nowrap}
.heard svg{width:16px;height:16px}
.heard.wait{color:var(--ink3)}
.heard.wait svg{display:none}

.devices{margin-top:20px;display:flex;align-items:center;flex-wrap:wrap;gap:8px 32px;padding-left:4px}
.dev{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink3);white-space:nowrap;min-width:0}
.dev svg{width:16px;height:16px}
/* A real picker dressed as the mock-up's text: the browser's own list opens. */
.dev select{appearance:none;-webkit-appearance:none;background:none;border:0;font-weight:500;color:var(--ink2);
  max-width:220px;text-overflow:ellipsis;cursor:pointer;padding:2px 0}
/* The camera's quality, between the camera's button and the two pickers:
   two words in one pill, the one in force lit; and, while HD is chosen, the
   line that says what it is for and what it costs — beside the pill where
   there is room, under it where there is not. A change that could not be
   made is said in that line's place. */
.quality{margin-top:18px;padding-left:4px;display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;min-height:36px}
.quality:not([hidden]) + .devices{margin-top:14px}
.qlab{font-size:14px;color:var(--ink3);white-space:nowrap}
.qseg{display:flex;align-items:center;height:32px;padding:2px;border-radius:999px;border:1px solid var(--line);background:var(--bg);flex:none}
.qseg button{height:26px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:600;line-height:1;color:var(--ink3);white-space:nowrap}
.qseg .on{background:var(--panel2);color:var(--ink)}
.qseg button:disabled{opacity:.55}
.qnote{flex:1 1 300px;min-width:0;font-size:13px;line-height:18px;color:var(--ink3);text-wrap:balance}
.qnote.bad{color:var(--warn)}
.devnote{margin-top:14px;padding-left:4px;font-size:14px;line-height:20px;color:var(--warn)}
option{background:var(--panel);color:var(--ink)}

/* ── the card ── */
.card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:28px 32px 28px}
.headrow{display:flex;align-items:center;justify-content:space-between;min-height:16px}
.now{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--accent);letter-spacing:.14em;text-transform:uppercase}
.now em{font-family:var(--mono);font-style:normal;font-weight:600;letter-spacing:.02em;color:var(--ink2)}
.now::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.card h1{margin-top:12px;font-size:28px;line-height:34px;font-weight:600;letter-spacing:-.015em;overflow-wrap:anywhere}
.host{margin-top:6px;font-size:15px;line-height:20px;color:var(--ink2)}
.host b{font-weight:500;color:var(--ink)}
.in{margin-top:16px;display:flex;align-items:center;gap:12px;font-size:14px;color:var(--ink2)}
.rings{display:flex}
.rings span{width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--c) 13%,#141820);border:2px solid var(--c);display:grid;place-items:center;
  font-size:11px;font-weight:600;color:var(--ink);margin-left:-6px;box-shadow:0 0 0 2px var(--panel);position:relative}
.rings span:first-child{margin-left:0}
.rule{height:1px;background:var(--line);margin:20px 0 20px}

.field + .field{margin-top:16px}
.field.after{margin-top:16px}
.field label{display:block;font-size:13px;line-height:18px;font-weight:500;color:var(--ink2);margin-bottom:8px}
.input{width:100%;height:48px;border-radius:14px;background:var(--bg);border:1px solid var(--line);padding:0 16px;display:flex;align-items:center;gap:10px;
  font-size:16px;font-weight:500;color:var(--ink)}
input.input:focus,.input.select:focus-within{outline:none;border-color:var(--accent-dim);box-shadow:0 0 0 3px rgba(94,200,160,.16)}
input.input::placeholder{color:var(--ink3);font-weight:400}
input.input.bad{border-color:rgba(229,72,77,.6)}
.input.select{border-color:var(--outline)}
.input svg{width:18px;height:18px;color:var(--accent)}
.input .grow{flex:1;min-width:0}
.input .chev{color:var(--ink3);pointer-events:none}
.input select{appearance:none;-webkit-appearance:none;background:none;border:0;outline:0;height:100%;font-weight:500;cursor:pointer}
.card .note{margin-top:6px;font-size:13px;line-height:18px;color:var(--ink3)}
.promise{margin-top:10px;font-size:15px;line-height:22px;color:var(--ink2)}
.promise b{font-weight:600;color:var(--ink)}
.notice{margin-top:18px;display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:20px;color:var(--ink2)}
.notice svg{width:18px;height:18px;color:var(--ink3);margin-top:1px}
.alert{margin-top:16px;padding:11px 14px;border-radius:12px;background:rgba(229,72,77,.10);border:1px solid rgba(229,72,77,.38);
  font-size:14px;line-height:20px;color:var(--ink)}
.join{margin-top:20px;width:100%;height:56px;border-radius:999px;background:var(--accent);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;letter-spacing:-.01em;
  box-shadow:0 10px 30px rgba(94,200,160,.22)}
.join:disabled{opacity:.55;box-shadow:none}
.ghost{margin-top:12px;width:100%;height:48px;border-radius:999px;border:1.5px solid var(--outline);font-size:15px;font-weight:600;color:var(--ink)}
.linkbtn{color:var(--ink2);text-decoration:underline;text-decoration-color:var(--outline);text-underline-offset:3px;font-size:inherit}
.signed{font-size:14px;line-height:20px;color:var(--ink3);margin-bottom:16px}
.signed b{font-weight:500;color:var(--ink)}
/* START: this account's meeting is already running */
.running{margin-bottom:20px;padding:14px 16px 16px;border-radius:14px;border:1px solid var(--outline)}
.running p{font-size:15px;line-height:21px;color:var(--ink);overflow-wrap:anywhere}
.running .join{margin-top:12px}
.running .or{margin-top:10px;font-size:13px;line-height:18px;color:var(--ink3)}
/* DOOR: the host's way back */
.hostway{margin-top:16px;text-align:center;font-size:13px;line-height:18px;color:var(--ink3)}
#newBtn{margin-top:16px}
.kinds{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* (a button centres what it holds; these are cards, read from the top) */
.kindopt{text-align:left;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--bg);display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}
.kindopt b{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:16px;font-weight:600;color:var(--ink)}
.kindopt > span{display:block;margin-top:4px;font-size:13px;line-height:18px;color:var(--ink2)}
.kindopt em{display:block;margin-top:4px;font-style:normal;font-size:13px;font-weight:600;color:var(--ink)}
.kindopt.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--bg))}
.radio{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--outline);display:grid;place-items:center;flex:none}
.on > b .radio,.on > .t .radio,.on > .nm .radio{border-color:var(--accent)}
.on > b .radio::after,.on > .t .radio::after,.on > .nm .radio::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent)}

/* ── START (mock-up 09): the lead above the camera, the card beside it ── */
body[data-view="start"] .pair{gap:32px}
body[data-view="start"] .left{flex-basis:720px;max-width:720px}
body[data-view="start"] .lead-h{padding-top:0;margin-bottom:24px}
body[data-view="start"] .lead-h .label{display:block;line-height:16px}
body[data-view="start"] .lead-h h2{font-size:28px;line-height:34px;letter-spacing:-.015em}
#view-start .card{padding:24px 28px;min-height:100%}
#view-start .card,#createStep{display:flex;flex-direction:column}
#createStep{flex:1}
#view-start .join.push{margin-top:auto}
#view-start .foot{margin-top:14px;display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:20px;color:var(--ink2)}
#view-start .foot svg{width:18px;height:18px;color:var(--ink3);margin-top:1px}
#startForm{padding-bottom:20px}
#startForm .field{margin-top:16px}
.field.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
#view-start .field .note{margin-top:8px}
/* what is left of a plan's hours; with several plans, one to choose from each */
.planchips{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.hoursleft{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:var(--bg);border:1px solid var(--line);font-size:14px;line-height:20px;color:var(--ink2);text-align:left}
.planchips:not(.several) .hoursleft{flex:1}
.hoursleft svg{width:18px;height:18px;color:var(--accent)}
.hoursleft b{color:var(--ink);font-weight:600}
.hoursleft .mono{font-size:13.5px;font-weight:600;color:var(--ink)}
.hoursleft a,.planchips > a{margin-left:auto;color:var(--accent);font-weight:600;font-size:14px;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.hoursleft.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--bg))}
button.hoursleft:disabled{opacity:.6}
.nohours{margin-top:4px}
.nohours p{font-size:17px;line-height:24px;font-weight:600;color:var(--ink)}
.planchips + .nohours{margin-top:16px}
a.join{text-decoration:none}
@media (min-width:981px){
  /* The lead is the left column's; the card starts where the camera does.
     A lead longer than its column runs on over the card's empty top. */
  body[data-view="start"] #view-start{display:flex;flex-direction:column;padding-top:84px}
  #view-start .card{flex:1;min-height:0}
  body[data-view="start"] .lead-h h2{white-space:nowrap}
}
.terms{margin-top:16px;text-align:center;font-size:13px;line-height:18px;color:var(--ink3)}
.terms a{color:var(--ink2);text-decoration:underline;text-decoration-color:var(--outline);text-underline-offset:3px}

/* ── SIGN IN: the way in, one thing at a time (mock-ups 07 and 07b) ──
   Everything of the account screens is under .acct, because the mock-ups'
   short names (.key, .sent, .steps …) mean other things in the room.
   One calm column: a card that asks one thing, the trail of where the
   person is above it, the way to another code or address under it.
   .acct.new is the wider card with the square (07). The mock-ups'
   "English" in the top bar is not built: the page has one language, and
   nothing in the bar may look like a control and do nothing. */
.acct{flex-direction:column;align-items:center;justify-content:center;padding:36px 24px}
.acct .frame{width:100%;max-width:520px}
.acct.new .frame{max-width:760px}
.acct .why{margin-bottom:20px;padding:12px 16px;border-radius:14px;background:rgba(94,200,160,.08);border:1px solid rgba(94,200,160,.28);
  font-size:15px;line-height:21px;font-weight:500;color:var(--ink)}
.acct .card{min-width:0;padding:36px 40px 36px}
/* The way in and the footer fit a 900 px window together. */
@media (min-width:700px){.acct .card.way{padding:28px 40px 30px}}
.acct .card h1{margin-top:0}
.acct .card .label + h1{margin-top:10px}
.acct .card .sub{margin-top:10px;font-size:16px;line-height:24px;color:var(--ink2)}
.acct .card .sub b{color:var(--ink);font-weight:600}
.acct .card .sub.first{margin-top:0}
#signinSub{display:block}
/* where the person is: the address, the code, the phone */
.acct .trail{list-style:none;display:flex;align-items:center;gap:10px;margin-bottom:16px;padding:0 4px;font-size:13px;line-height:22px;font-weight:500;color:var(--ink3)}
.acct .trail li{display:flex;align-items:center;gap:8px;white-space:nowrap}
.acct .trail li + li::before{content:"";width:28px;height:1px;background:var(--outline);margin-right:2px}
.acct .trail b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--outline);color:var(--ink3);flex:none}
.acct .trail .cur b::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.acct .trail .cur{color:var(--ink)}
.acct .trail .cur b{background:rgba(94,200,160,.13);border-color:var(--accent);color:var(--accent)}
.acct .trail .ok{color:var(--ink2)}
.acct .trail .ok b{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.acct .trail .ok svg{width:13px;height:13px;stroke-width:2.8}
/* the way in: the three steps to a first meeting, and the two choices */
.acct .steps{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:16px;counter-reset:w}
.acct .steps li{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:14px;counter-increment:w;font-size:15px;line-height:21px;color:var(--ink2)}
.acct .steps li::before{content:counter(w);grid-row:1/3;align-self:start;margin-top:5px;width:32px;height:32px;border-radius:50%;border:1px solid var(--outline);background:var(--panel2);
  display:grid;place-items:center;font-size:14px;font-weight:700;color:var(--ink)}
.acct .steps b{grid-column:2;font-size:16px;line-height:22px;font-weight:600;color:var(--ink)}
.acct .steps span{grid-column:2}
.acct .choose{margin-top:28px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.acct .choose .go,.acct .choose .ghost{margin-top:0;height:56px;font-size:17px}
.acct .choose .ghost{font-weight:600}
.acct .under{margin-top:16px;text-align:center;font-size:14px;line-height:20px}
.acct .field{margin-top:18px}
/* the address is typed into a real field inside the mock-up's box */
.acct .input input{background:none;border:0;outline:0;height:100%;min-width:0;font-weight:500}
.acct .input:focus-within{border-color:var(--accent-dim);box-shadow:0 0 0 3px rgba(94,200,160,.16)}
.acct .input input:read-only{cursor:default}
.acct .card .note{margin-top:8px}
.acct .card .note.mt14{margin-top:14px}
/* Six cells, one field. The field lies over the cells and is see-through:
   what is typed is drawn in the cells by script, so a paste, the phone's
   own code suggestion and a password manager all meet one ordinary input. */
.acct .digits{position:relative;display:flex;gap:10px;width:max-content;max-width:100%}
.acct .digits span{width:52px;height:60px;border-radius:14px;background:var(--bg);border:1px solid var(--line);display:grid;place-items:center;
  font-family:var(--mono);font-size:26px;font-weight:600;flex:0 1 52px;min-width:0}
.acct .digits span.cur{border-color:var(--accent);box-shadow:0 0 0 3px rgba(94,200,160,.18)}
.acct .digits span.cur::after{content:"";width:2px;height:26px;background:var(--accent)}
.acct .digits i{width:8px;flex:none}
.acct .digits input{position:absolute;inset:0;width:100%;height:100%;border:0;outline:0;background:transparent;color:transparent;caret-color:transparent;
  font-size:26px;letter-spacing:1em;cursor:text;border-radius:14px}
.acct .digits input::selection{background:transparent}
.acct .digits.bad span{border-color:rgba(229,72,77,.6)}
.acct .go{margin-top:22px;width:100%;height:56px;border-radius:999px;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:700;letter-spacing:-.01em;box-shadow:0 10px 30px rgba(94,200,160,.22);flex:none}
.acct .go.mt22{margin-top:22px}
.acct .go.wait,.acct .go:disabled{background:var(--panel2);color:var(--ink3);box-shadow:none}
/* under the card: another code, another address */
.acct .foot{margin-top:18px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 22px;font-size:14px;line-height:20px;color:var(--ink3)}
.acct .scan{margin-top:24px;padding-top:24px;border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start}
.acct .scan canvas{display:block;width:198px;height:198px;border-radius:12px;background:#fff}
.acct .how{display:flex;flex-direction:column;gap:14px;counter-reset:h}
.acct .how li{list-style:none;display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:15px;line-height:21px;color:var(--ink2);counter-increment:h}
.acct .how li::before{content:counter(h);font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink3);line-height:21px}
.acct .how li b{color:var(--ink);font-weight:600}
.acct .key{margin-top:4px;font-size:13px;line-height:18px;color:var(--ink3)}
.acct .key b{font-family:var(--mono);font-weight:500;color:var(--ink2);letter-spacing:.04em;word-spacing:.3em}
/* the recovery code is the same block, large: it is read and copied once */
.acct .key.rec{margin-top:20px;padding:18px 20px;border-radius:14px;background:var(--bg);border:1px solid var(--line)}
.acct .key.rec b{display:block;font-size:20px;line-height:30px;font-weight:600;color:var(--ink);user-select:all;-webkit-user-select:all}
.acct .rowd{margin-top:22px;display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 20px}
.acct .rowd .go{margin-top:0;flex:1;width:auto;height:60px}
.acct .rowd .alert{order:3;flex:0 0 100%;margin-top:0}
.acct .sent{margin-bottom:24px;padding:12px 16px;border-radius:14px;background:rgba(94,200,160,.08);border:1px solid rgba(94,200,160,.28);font-size:14px;line-height:20px;color:var(--ink2);
  display:flex;align-items:flex-start;gap:10px}
.acct .sent svg{width:18px;height:18px;color:var(--accent);margin-top:1px}
.acct .sent b{color:var(--ink);font-weight:600}
.acct .alert{margin-top:14px}
#devHostSlot .ghost{margin-top:16px}
/* the mock-ups' style attributes, as classes (the policy allows none) */
.mt14{margin-top:14px}
.mt16{margin-top:16px}
.mt22{margin-top:22px}
.push{margin-top:auto}
.center{text-align:center}
.ulink{color:var(--ink2);text-decoration:underline;text-decoration-color:var(--outline);text-underline-offset:3px;font-size:inherit}
.digits-label{display:block;font-size:13px;font-weight:500;color:var(--ink2);margin-bottom:8px}
.acct .key.mt16{margin-top:16px}

/* ── HOURS (mock-up 08) ──
   Everything of the hours screen is under .buy, for the same reason as
   .acct: the mock-up's short names (.hours, .plan, .what, .sum …) mean
   other things elsewhere. */
.buy{flex-direction:column;align-items:center;justify-content:center;padding:32px 24px}
.buy .frame{width:100%;max-width:1232px}
.buy .lead{margin-bottom:24px}
.buy .lead h1{margin-top:10px;font-size:28px;line-height:34px;font-weight:600;letter-spacing:-.015em}
.buy .lead p{margin-top:6px;font-size:16px;line-height:22px;color:var(--ink2)}
.buy .pair{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:24px;align-items:stretch;max-width:none}
.buy .left{display:flex;flex-direction:column;flex:none;max-width:none}
.buy .card{display:flex;flex-direction:column;min-width:0}
.buy .card h2{margin-top:10px;font-size:22px;line-height:28px;font-weight:600;letter-spacing:-.01em}
.buy .sec{font-size:13px;font-weight:600;color:var(--ink2);margin:0 0 10px;padding:0;display:flex;align-items:center;gap:10px}
.buy .sec b{width:22px;height:22px;border-radius:50%;background:var(--panel2);border:1px solid var(--outline);display:grid;place-items:center;font-size:12px;color:var(--ink)}
.buy .sec.mt22{margin-top:22px}
/* one selector of hours: minus, the number (it can be typed), plus; the
   sentence beside it says what that number gives. (.says .sum is the
   amount; the order card's .sum, below, is another thing.) */
.buy .pick{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center;border-radius:18px;border:1px solid var(--accent-dim);background:var(--panel);padding:18px 22px}
.buy .step{display:flex;align-items:center;gap:14px}
.buy .pm{width:48px;height:48px;flex:none;border-radius:50%;border:1px solid var(--outline);background:var(--panel2);color:var(--ink);font:500 24px/1 var(--sans);display:grid;place-items:center;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.buy .pm:disabled{color:var(--ink3);border-color:var(--line);background:none}
.buy .num{min-width:132px;height:64px;border-radius:14px;border:1px solid var(--outline);background:var(--bg);display:flex;align-items:baseline;justify-content:center;gap:8px;padding:12px 12px 0;cursor:text}
.buy .num:focus-within{border-color:var(--accent-dim);box-shadow:0 0 0 3px rgba(94,200,160,.16)}
.buy .num.bad{border-color:rgba(229,72,77,.6)}
/* the field is as wide as its digits (the script sets the width in ch), so
   the word "hours" sits beside the number as in the drawing */
.buy .num input{width:2ch;min-width:1ch;padding:0;border:0;outline:0;background:none;text-align:center;font-family:var(--mono);font-size:34px;line-height:36px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.buy .num span{font-size:14px;color:var(--ink3)}
.buy .says{font-size:15px;line-height:22px;color:var(--ink2)}
.buy .says b{color:var(--ink);font-weight:600}
.buy .says .sum{display:block;margin-top:6px;border:0;font-size:26px;line-height:28px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
/* the fifth row: any other whole number, typed */
.buy .note{margin-top:8px;font-size:13px;line-height:18px;color:var(--ink3)}
.buy .note.bad{color:var(--warn)}
.buy .note.bad .ulink{color:inherit;text-decoration-color:currentColor}
.buy .note.mt14{margin-top:14px}
.buy .note.by{margin-top:6px}
/* a hundred hours or more: the bank transfer, said quietly under the card payment */
.buy .note.teststrip{margin:0 0 20px;padding:10px 16px;border-radius:14px;border:1px dashed var(--warn);color:var(--warn);font-weight:600;text-align:center}
.buy .plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.buy .plan{position:relative;border-radius:18px;border:1px solid var(--line);background:var(--panel);padding:18px 20px;text-align:left;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}
.buy .plan.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--panel))}
.buy .plan .nm{display:flex;align-items:center;justify-content:space-between;font-size:17px;font-weight:600;color:var(--ink)}
.buy .plan .radio{width:20px;height:20px;visibility:hidden}
.buy .plan.on .radio{visibility:visible}
.buy .plan .radio::after{width:10px;height:10px}
.buy .plan p{margin-top:8px;font-size:14px;line-height:20px;color:var(--ink2)}
.buy .plan p b{color:var(--ink);font-weight:600}
.buy .plan .fr{margin-top:8px;font-size:13px;color:var(--ink3)}
/* Enterprise is not bought here and shows no figure: what is set up with the
   customer, and where to write. Not a button; lit when 100 or more is typed. */
.buy .plan.ent ul{list-style:none;margin:6px 0 0;padding:0;font-size:13px;line-height:19px;color:var(--ink2)}
.buy .plan.ent li{position:relative;padding-left:12px}
.buy .plan.ent li::before{content:"";position:absolute;left:0;top:8px;width:4px;height:4px;border-radius:50%;background:var(--ink3)}
.buy .plan.ent .ulink{margin-top:10px;align-self:flex-start;font-size:14px;font-weight:600}
.buy .what{margin-top:22px;border-radius:18px;border:1px solid var(--line);padding:16px 20px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center}
.buy .left .what{margin-top:auto}
.buy .plans{margin-bottom:22px}
.buy .what p{font-size:15px;line-height:22px;color:var(--ink2)}
.buy .what p b{color:var(--ink);font-weight:600}
.buy .bal{text-align:right;white-space:nowrap}
.buy .bal small{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.buy .bal b{display:block;margin-top:4px;font-family:var(--mono);font-size:17px;font-weight:600}
.buy .bal b.none{font-family:var(--sans)}
.buy .bal > span{display:block;margin-top:2px;font-size:13px;color:var(--accent)}
.buy .sum{margin-top:18px;border-top:1px solid var(--line)}
.buy .sum > div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink2)}
.buy .sum > div b{color:var(--ink);font-weight:600;white-space:nowrap}
.buy .sum .tot{font-size:17px;color:var(--ink)}
.buy .sum .tot b{font-size:28px;letter-spacing:-.02em}
.buy .vat{margin-top:8px;font-size:13px;line-height:18px;color:var(--ink3)}
.buy .vat + .vat{margin-top:2px}
.buy .paybox{margin-top:18px;border-radius:14px;border:1.5px dashed var(--outline);padding:14px 16px;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}
.buy .paybox svg{width:26px;height:26px;color:var(--ink2)}
.buy .paybox b{display:block;font-size:14.5px;font-weight:600}
.buy .paybox span{display:block;margin-top:2px;font-size:13px;line-height:18px;color:var(--ink3)}
.buy .inv{margin-top:14px;display:flex;gap:10px;font-size:13.5px;line-height:19px;color:var(--ink2)}
.buy .inv svg{width:17px;height:17px;color:var(--ink3);margin-top:1px}
.buy .inv b{color:var(--ink);font-weight:500;overflow-wrap:anywhere}
.buy .paybar{margin-top:auto;padding-top:18px}
.buy .go{width:100%;height:56px;border-radius:999px;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:700;letter-spacing:-.01em;box-shadow:0 10px 30px rgba(94,200,160,.22)}
.buy .go.wait,.buy .go:disabled{background:var(--panel2);color:var(--ink3);box-shadow:none}
.buy .go.small{width:auto;height:40px;padding:0 20px;font-size:15px;box-shadow:none;flex:none}
/* back from paying: what became of it */
.buy .why{margin-bottom:20px;padding:12px 16px;border-radius:14px;background:rgba(94,200,160,.08);border:1px solid rgba(94,200,160,.28);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;font-size:15px;line-height:22px;font-weight:600;color:var(--ink)}
.buy .why.bad{background:rgba(232,160,76,.08);border-color:rgba(232,160,76,.4)}
.buy .alert{margin-top:14px}
/* "Your purchases": the order card's rows, one per purchase, gift or meeting */
.buy .bought{margin-top:24px}
.buy .bought .sum{margin-top:14px}
.buy .bought .item{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;min-width:0;color:var(--ink)}
.buy .bought .item small{font-size:13px;color:var(--ink3)}
.buy .bought .item .when{min-width:96px;color:var(--ink2);font-size:14px}
.buy .bought .item .gone{color:var(--warn)}
.buy .bought .item .said{flex-basis:100%;padding-left:106px;overflow-wrap:anywhere}
.buy .bought .testtag{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--warn);border:1px solid currentColor;border-radius:999px;padding:1px 8px}
.buy .bought .amt{display:flex;align-items:baseline;gap:14px;white-space:nowrap}
.buy .bought .ulink{font-size:14px;color:var(--accent);text-decoration-color:var(--accent-dim)}

/* ── DOOR: waiting to be let in ── */
.waitline{display:flex;align-items:center;gap:12px;margin-top:22px;font-size:18px;line-height:26px;font-weight:600;letter-spacing:-.01em}
.waitline i{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(94,200,160,.2);animation:pulse 1.4s ease-in-out infinite;flex:none}
.waitnote{margin-top:8px;font-size:14px;line-height:20px;color:var(--ink2);overflow-wrap:anywhere}
.waitbox .quiet{margin-top:22px;width:100%;height:48px;font-size:15px}

/* ── ROOM ── */
.app{grid-template-rows:56px minmax(0,1fr) clamp(192px,32vh,300px) 76px;height:100dvh;overflow:hidden}
.main{position:relative;display:grid;gap:16px;padding:16px 24px;min-height:0}
.grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(0,1fr);gap:12px;min-height:0}
.grid.cols-1{grid-template-columns:minmax(0,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Three rows of tiles (seven to twelve people): everything on a tile a size
   smaller, so twelve fit one screen without a scroll bar. */
@media (min-width:700px){
  .grid.dense{gap:10px}
  .grid.dense .avatar{width:56px;height:56px;font-size:19px;margin-bottom:18px}
  .grid.dense .name{left:8px;bottom:8px;height:24px;max-width:calc(100% - 48px);padding:0 9px;gap:6px;font-size:12px}
  .grid.dense .micst{right:8px;bottom:8px;width:24px;height:24px}
  .grid.dense .micst svg{width:13px;height:13px}
  .grid.dense .mod{right:8px;top:8px}
  /* One page of a larger room keeps a full page's three rows, so the last
     page's few tiles are the size of every other page's. */
  .grid.paged{grid-template-rows:repeat(3,minmax(0,1fr));grid-auto-rows:0}
}
/* ‹ 1 / 3 › under the tiles */
.pager{display:flex;align-items:center;justify-content:center;gap:10px;height:32px}
.pager .mono{min-width:52px;text-align:center;font-size:13px;font-weight:500;color:var(--ink2)}
.pager .ib{border:1px solid var(--line);background:var(--panel)}
.pager .ib:disabled{opacity:.38}
.pager .prev svg{transform:rotate(90deg)}
.pager .next svg{transform:rotate(-90deg)}
.main[data-layout="grid"] .col{grid-template-rows:minmax(0,1fr);grid-auto-rows:auto;row-gap:8px}
/* Notices over the tiles: reconnecting, the host has left, the host's hours.
   They stack, and never take a press meant for what is under them. */
.banners{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:8px;
  max-width:calc(100% - 48px);pointer-events:none}
.banner{min-height:32px;padding:6px 14px;border-radius:16px;display:flex;align-items:center;text-align:center;
  background:rgba(11,13,17,.92);border:1px solid var(--outline);font-size:13px;line-height:18px;font-weight:500;color:var(--warn)}
.banner.strong{background:rgba(42,14,16,.96);border-color:rgba(229,72,77,.55);color:var(--ink);font-size:14px;font-weight:600;padding:8px 16px}

/* ── the host's two actions on a tile, and the one question before a removal ── */
.mod{position:absolute;right:12px;top:12px;display:flex;align-items:center;gap:6px;z-index:2}
.mb{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px 0 9px;border-radius:999px;background:rgba(11,13,17,.8);
  border:1px solid var(--outline);font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.mb svg{width:14px;height:14px}
.mb.rm{color:var(--danger);border-color:rgba(229,72,77,.42)}
.mb:disabled{opacity:.42}
.asking .mb.mute,.asking .act.floor,.asking .act.mute,.asking .mk,.asking .pill.admit{display:none}
.ask{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 4px 0 11px;border-radius:999px;background:rgba(11,13,17,.94);
  border:1px solid rgba(229,72,77,.5);font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.ask .yes,.ask .no{height:20px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:700;line-height:1}
.ask .yes{background:var(--danger);color:#fff}
.ask .no{background:var(--panel2);color:var(--ink)}
/* "Camera off" gives its corner to the buttons */
.tile.modded .flag{right:auto;left:12px}
.tag.plain svg{display:none}
.subt{display:none}

/* ── the stage: a shared screen, or a training's presenter ── */
.col{display:grid;min-width:0;min-height:0}
.stage{position:relative;border-radius:18px;border:1px solid var(--line);background:#07090C;display:grid;grid-template-rows:44px minmax(0,1fr);
  min-width:0;min-height:0;overflow:hidden;padding:0 12px 12px}
.stage-h{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.sharing-tag{display:inline-flex;align-items:center;gap:8px;height:26px;padding:0 12px 0 9px;border-radius:999px;min-width:0;
  background:rgba(94,200,160,.12);border:1px solid rgba(94,200,160,.36);color:var(--accent);font-size:12.5px;font-weight:600;white-space:nowrap}
.sharing-tag svg{width:15px;height:15px}
.sharing-tag bdi{overflow:hidden;text-overflow:ellipsis}
.sharing-tag.quiet-tag{background:rgba(11,13,17,.8);border-color:var(--line);color:var(--ink2)}
.screen{position:relative;border-radius:10px;overflow:hidden;background:var(--panel);display:grid;place-items:center;min-width:0;min-height:0}
.screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#07090C}
.screen.shared video{object-fit:contain}
.screen.mine video{transform:scaleX(-1)}
.screen .avatar{width:136px;height:136px;border-width:3px;font-size:46px;margin:0}
.stage-note{font-size:15px;line-height:22px;color:var(--ink3);text-align:center;padding:0 24px}
.quiet{display:flex;align-items:center;justify-content:center;height:36px;padding:0 16px;border-radius:999px;border:1px solid var(--outline);
  font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.quiet:disabled{opacity:.5}
.stopshare{height:28px;padding:0 12px;font-size:12.5px;color:var(--danger);border-color:rgba(229,72,77,.45);flex:none}

/* ── a training: the floor card, the host's panel, a guest's cards ── */
.floorcard{border-radius:18px;border:1px solid var(--line);background:var(--panel);padding:14px;display:flex;flex-direction:column;justify-content:space-between;
  gap:10px;min-height:120px;flex:none}
.floorcard .label{color:var(--ink3);font-size:11px}
.floorcard .who{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:6px;min-width:0}
.floorcard .who b{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.floorcard .who .mono{font-size:13px;color:var(--s3)}
.floorcard .fnote{margin-top:6px;font-size:13px;line-height:18px;color:var(--ink3)}

.people{border-radius:20px;border:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.ph{display:flex;align-items:center;justify-content:space-between;height:52px;padding:0 12px 0 16px;border-bottom:1px solid var(--line);flex:none}
.ph .t{display:flex;align-items:baseline;gap:10px;font-size:16px;font-weight:600}
.ph .t .mono{font-size:13px;font-weight:500;color:var(--ink2)}
.ib{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--ink2)}
.ib svg{width:17px;height:17px}
.people .closer{display:none}
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:10px 16px;border-bottom:1px solid var(--line);flex:none}
.chip{display:flex;align-items:center;justify-content:center;gap:7px;height:26px;border-radius:999px;border:1px solid var(--line);
  background:var(--bg);font-family:var(--mono);font-size:12px;font-weight:500;color:var(--ink3);white-space:pre}
.chip b{font-weight:500;color:var(--ink)}
.sec{padding:14px 16px 8px;flex:none;min-height:0}
.sec + .sec{border-top:1px solid var(--line)}
.sec.grow{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--outline) transparent}
/* The raised hands are what the host must see: they sit at the top, lit. */
.sec.some{background:rgba(94,200,160,.045)}
.sh{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:16px;margin-bottom:8px}
.sh .label{color:var(--ink2)}
.sh .label.hot{color:var(--accent)}
.lowerall{font-size:13px;color:var(--ink2);border-bottom:1px solid var(--outline);padding-bottom:1px;white-space:nowrap}
.sec .none{font-size:13px;line-height:18px;color:var(--ink3);padding:2px 0 8px}
/* Many hands: the first four show, the rest scroll — the list of listeners stays in sight. */
.hands{max-height:176px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--outline) transparent}
.hand{display:grid;grid-template-columns:14px 32px minmax(0,1fr) auto auto;align-items:center;column-gap:10px;height:44px}
.hand .n{font-family:var(--mono);font-size:12px;color:var(--ink3);text-align:center}
.sav{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--c);background:color-mix(in srgb,var(--c) 14%,var(--panel));
  display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--ink);flex:none}
.hand .nmx{display:flex;flex-direction:column;gap:2px;min-width:0}
.hand .nmx b{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hand .nmx .mono{font-size:11px;color:var(--ink3)}
.hand .ago{font-family:var(--mono);font-size:12px;color:var(--ink2);display:flex;align-items:center;gap:5px}
.hand .ago svg{width:13px;height:13px;color:var(--ink3)}
.give{display:inline-flex;align-items:center;justify-content:center;height:32px;width:112px;border-radius:999px;font-size:13px;font-weight:600;
  color:var(--accent);border:1px solid var(--accent-dim);background:rgba(94,200,160,.1);white-space:nowrap}
.give.first{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.people .row{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;column-gap:10px;height:44px;padding:0 2px 0 6px;margin:0 -6px;border-radius:10px}
.people .row.asking{background:var(--panel2)}
/* "Find a name", above the listeners of a large training; it stays in
   sight while the list scrolls under it */
.people .find{position:sticky;top:-14px;z-index:1;height:40px;margin:-4px 0 12px;border-radius:12px;background:var(--bg);box-shadow:0 -14px 0 var(--panel),0 8px 0 var(--panel)}
.people .find svg{width:16px;height:16px;color:var(--ink3)}
.people .find input{background:none;border:0;outline:0;height:100%;min-width:0;font-size:14px}
.people .find input::placeholder{color:var(--ink3)}
.people .find input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.people .find:focus-within{border-color:var(--accent-dim);box-shadow:0 -14px 0 var(--panel),0 8px 0 var(--panel),0 0 0 3px rgba(94,200,160,.16)}
.lav{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--c);background:color-mix(in srgb,var(--c) 14%,var(--panel));display:grid;place-items:center;
  font-size:10px;font-weight:600;color:var(--ink)}
.row .who{display:flex;align-items:baseline;gap:8px;font-size:14px;white-space:nowrap;min-width:0}
.row .who bdi{overflow:hidden;text-overflow:ellipsis}
.row .who .mono{font-size:11px;color:var(--ink3)}
.acts{display:flex;align-items:center;gap:6px}
.act{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:var(--panel2);color:var(--ink2)}
.act svg{width:16px;height:16px}
.act span{display:none}
.act.floor{color:var(--accent);border-color:var(--accent-dim);background:rgba(94,200,160,.1)}
.act.rm{color:var(--danger);border-color:rgba(229,72,77,.38);background:rgba(229,72,77,.08)}
.legend{display:flex;align-items:center;gap:14px;font-size:11px;color:var(--ink3)}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend svg{width:12px;height:12px}
.legend .f{color:var(--accent)}
.legend .r{color:var(--danger)}
.legend .m{color:var(--ink2)}
/* Who is in the room: the list the people button opens for everybody. One
   row a person — the face; the name with the language they read in, and
   under it Host, You or both; at the end a raised hand and the microphone;
   for the host of a meeting Mute and Remove, named once over the rows. It
   has a close button at every width: unlike a training host's panel it is
   there only while it is asked for. */
.people.who .closer{display:grid}
.whosec{padding-top:10px}
.whosec .sh.end{justify-content:flex-end;margin-bottom:2px}
.people .row.w{grid-template-columns:32px minmax(0,1fr) auto;column-gap:12px;height:52px}
.row.w .who{flex-direction:column;align-items:stretch;gap:1px}
.row.w .nm{display:flex;align-items:baseline;gap:8px;min-width:0;font-weight:500;line-height:18px}
.row.w .nm .mono{flex:none}
.row.w .sub{font-size:12px;line-height:16px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis}
.mk{width:24px;height:32px;display:grid;place-items:center;color:var(--ink3);flex:none}
.mk svg{width:16px;height:16px}
.mk.on,.mk.raised{color:var(--accent)}
.mk + .act{margin-left:4px}
/* the host's own row has no buttons: its microphone keeps the column */
.list.acting .row.own .acts{padding-right:80px}
.act:disabled{opacity:.42}

/* The door, in the People panel — the host's: on top whoever waits to come
   in, each with Admit and Refuse in words; at the foot "Let everyone in
   without asking" and the lock. And for everybody a small lock beside the
   count while the meeting is locked: in the panel's heading, in the top
   bar, on the people button. */
.ph .t .lk{display:grid;place-items:center;align-self:center;color:var(--warn)}
.ph .t .lk svg{width:14px;height:14px}
.waitsec{border-bottom:1px solid var(--line)}
.waitsec + .sec{border-top:0}
.pill{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 13px;border-radius:999px;border:1px solid var(--outline);
  font-size:12.5px;font-weight:600;color:var(--ink2);white-space:nowrap}
.pill.admit{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.doorsec{display:flex;flex-direction:column;gap:8px;padding:10px 16px 12px;border-top:1px solid var(--line)}
/* With the door in it the host's panel can hold more than its height (a
   training on a small window: who waits, the languages, the hands, the
   listeners, the switches). Then the panel itself scrolls — the heading and
   the door's switches stay in sight, and the list keeps room to be read. */
.people:has(.doorsec){overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--outline) transparent}
.people:has(.doorsec) .ph,.people .doorsec{position:sticky;z-index:2;background:var(--panel)}
.people:has(.doorsec) .ph{top:0}
.people .doorsec{bottom:0}
.people:has(.doorsec) .sec.grow{min-height:120px}
.doorsec .tog{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:28px;font-size:13.5px;line-height:18px;color:var(--ink);text-align:left}
.lockbtn{display:flex;align-items:center;justify-content:center;gap:8px;height:34px;border-radius:999px;border:1px solid var(--outline);font-size:13.5px;font-weight:600;color:var(--ink)}
.lockbtn svg{width:15px;height:15px;color:var(--ink2)}
.lockbtn.on{border-color:rgba(232,160,76,.55);background:rgba(232,160,76,.08);color:var(--warn)}
.lockbtn.on svg{color:currentColor}
.lockmark{display:grid;place-items:center;color:var(--warn)}
.top .count .lockmark svg{width:15px;height:15px;color:currentColor}

.side{display:flex;flex-direction:column;row-gap:12px;min-width:0;min-height:0}
.side .card{border-radius:20px;padding:14px 16px;flex:none}
.side .room{padding-bottom:8px}
.side .hd{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--ink)}
.side .hd svg{width:18px;height:18px;color:var(--ink3)}
.side .p{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:12px;align-items:center;height:50px}
.side .p:not([hidden]) ~ .p{border-top:1px solid var(--line)}
.side .hd{margin-bottom:8px}
.side .p .who{display:flex;align-items:baseline;gap:7px;font-size:14px;font-weight:500;white-space:nowrap;min-width:0}
.side .p .who bdi{overflow:hidden;text-overflow:ellipsis}
.side .p .who .mono{font-size:11px;color:var(--ink3)}
.role{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:12.5px;font-weight:500;color:var(--ink2);white-space:nowrap}
.role svg{width:13px;height:13px}
.role.floor{color:var(--c)}
.side .st{display:flex;align-items:center;gap:12px}
.side .listen{flex:1 1 0;display:flex;flex-direction:column;justify-content:space-between;gap:14px;padding:16px;min-height:0}
.side .ic{width:40px;height:40px;border-radius:50%;background:var(--panel2);border:1px solid var(--outline);display:grid;place-items:center;color:var(--ink2);flex:none}
.side .ic svg{width:18px;height:18px}
.side h2{font-size:17px;line-height:22px;font-weight:600;letter-spacing:-.01em}
.side h2 + p{font-size:14px;line-height:19px;color:var(--ink2);margin-top:2px}
.side .help{font-size:13.5px;line-height:1.45;color:var(--ink3);margin-top:10px}
.raise{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:56px;border-radius:999px;background:var(--accent);color:var(--accent-ink);
  font-size:17px;font-weight:700;letter-spacing:-.01em;box-shadow:0 10px 30px rgba(94,200,160,.22);flex:none}
.raise svg{width:22px;height:22px;stroke-width:2.2}
.raise:disabled{opacity:.55;box-shadow:none}
.side .up,.side .onfloor{border-color:rgba(94,200,160,.34)}
.side .up .ic,.side .onfloor .ic{width:36px;height:36px;background:rgba(94,200,160,.14);border-color:var(--accent-dim);color:var(--accent)}
.side .up b{display:block;font-size:15px;line-height:20px;font-weight:600}
.side .up b span{color:var(--accent)}
.side .up small{display:block;font-size:13px;line-height:18px;color:var(--ink3);margin-top:2px}
.side .up .quiet{margin-top:12px;width:100%}
.side .fbtns{display:flex;gap:12px;margin-top:14px}

/* ── wide screens: the three drawings of the room ── */
@media (min-width:700px){
  /* a notice gets a line of its own: it must never lie over a tile's
     buttons (a browser too old for :has() draws it over the tiles' top) */
  .main:has(.banner:not([hidden])){padding-top:58px}
  .main[data-layout="share"]{grid-template-columns:minmax(0,1fr) 264px}
  .main[data-layout="training"]{grid-template-columns:minmax(0,1fr) 208px 320px;gap:12px}
  .app.ishost .main[data-layout="training"]{grid-template-columns:minmax(0,1fr) 208px 384px}
  .app.training{grid-template-rows:56px minmax(0,1fr) clamp(182px,25.4vh,240px) 76px}

  /* beside a shared screen every tile is a small row: face, name, microphone */
  .main[data-layout="share"] .grid{grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:8px}
  /* more than six beside a shared screen: the column scrolls */
  .main[data-layout="share"] .grid.dense{grid-template-rows:none;grid-auto-rows:minmax(56px,1fr);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--outline) transparent}
  .main[data-layout="share"] .tile{justify-content:flex-start;gap:12px;padding:0 12px;
    background:radial-gradient(90px 70px at 36px 50%,rgba(255,255,255,.055),rgba(255,255,255,0) 100%),var(--panel)}
  .main[data-layout="share"] .tile.nocam{background:#0E1116}
  .main[data-layout="share"] .tile .avatar{width:40px;height:40px;border-width:2px;font-size:14px;margin:0}
  .main[data-layout="share"] .tile video{position:static;width:40px;height:40px;border-radius:50%;border:2px solid var(--c);flex:none}
  .main[data-layout="share"] .tile .name{position:static;flex:1;min-width:0;max-width:none;height:auto;padding:0;border:0;border-radius:0;background:none;
    display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;row-gap:2px;font-size:14px;line-height:18px}
  .main[data-layout="share"] .name .nm-full{grid-column:1/-1}
  .main[data-layout="share"] .name .mono{line-height:14px}
  .main[data-layout="share"] .name .subt{display:block;font-size:11.5px;line-height:14px;font-weight:400;color:var(--ink2);overflow:hidden;text-overflow:ellipsis}
  .main[data-layout="share"] .tile .tag,.main[data-layout="share"] .tile .flag{display:none}
  .main[data-layout="share"] .tile .micst{position:static;flex:none}
  .main[data-layout="share"] .mod{position:static;flex:none}
  .main[data-layout="share"] .mb{width:28px;padding:0;justify-content:center}
  .main[data-layout="share"] .mb span{display:none}
  .main[data-layout="share"] .tile.asking .mod{position:absolute;inset:0;justify-content:center;background:rgba(11,13,17,.94);z-index:3}

  /* a training's column: the presenter, the floor, oneself (or the floor card) */
  .main[data-layout="training"] .col{display:flex;flex-direction:column;gap:12px}
  .main[data-layout="training"] .grid{flex:1;grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-rows:minmax(0,1fr);gap:12px}
  .main[data-layout="training"] .grid.n-0{display:none}
  .main[data-layout="training"] .tile{max-height:236px}
  .main[data-layout="training"] .tile .avatar{width:72px;height:72px;font-size:24px;margin-bottom:4px}
  .main[data-layout="training"] .tile.self .avatar{width:48px;height:48px;font-size:16px;margin-bottom:30px}
  .main[data-layout="training"] .tile .flag{display:none}
}

/* ── the live conversation, docked across the bottom ── */
.strip{background:var(--panel);border-top:1px solid var(--line);display:grid;grid-template-rows:56px 1fr;min-height:0;overflow:hidden}
.strip-h{display:flex;align-items:center;gap:14px;padding:0 24px;border-bottom:1px solid var(--line)}
.strip-h .live{height:24px}
/* "Reading in …" is the one control of this bar that changes what a person
   reads — every line, their own words, the chat and the summary follow it —
   so it is the largest thing in the bar and carries the app's green: nobody
   should have to look for it. The others beside it stay quiet. */
.strip-h .reading{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px 0 14px;border-radius:999px;border:1.5px solid var(--accent-dim);
  background:rgba(94,200,160,.12);font-size:15px;font-weight:500;color:var(--ink2);white-space:nowrap;min-width:0;flex:0 1 auto}
.strip-h .reading>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.strip-h .reading b{font-weight:700;color:var(--ink)}
.strip-h .reading svg{width:18px;height:18px;color:var(--accent);flex:none}
.strip-h .reading:hover{border-color:var(--accent);background:rgba(94,200,160,.18)}
.strip-h .end{margin-left:auto;display:flex;align-items:center;gap:16px;font-size:13px;color:var(--ink2);flex:none}
.strip-h .tog,.strip-h .size{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:13px;color:var(--ink2)}
.narrow,.sizebtn{display:none}
.sw{position:relative;width:36px;height:22px;border-radius:999px;background:var(--accent);flex:none}
.sw::after{content:"";position:absolute;right:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff}
.tog[aria-pressed="false"] .sw{background:var(--outline)}
.tog[aria-pressed="false"] .sw::after{right:auto;left:3px;background:var(--ink2)}
.seg{display:flex;align-items:center;height:28px;padding:2px;border-radius:999px;border:1px solid var(--line);background:var(--bg)}
.seg button{width:30px;height:22px;border-radius:999px;display:grid;place-items:center;font-weight:600;color:var(--ink3);line-height:1}
.seg button:nth-child(1){font-size:11px}.seg button:nth-child(2){font-size:14px}.seg button:nth-child(3){font-size:17px}
.seg .on{background:var(--panel2);color:var(--ink)}
.strip{position:relative}
.strip-h .reading{position:relative;cursor:pointer}
.strip-h .reading select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;appearance:none;-webkit-appearance:none;border:0}
.strip-h .reading:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(94,200,160,.22)}
.strip-h .busy,.strip-h .keynote{font-size:13px;color:var(--warn);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* The lines scroll; a few lines sit in the middle as the mock-up draws them
   (auto margins centre without making the top unreachable when they overflow). */
.lines{display:flex;flex-direction:column;padding:0 24px;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--outline) transparent}
.lines:focus{outline:none}
.lines-in{display:flex;flex-direction:column;gap:8px;margin:auto 0;padding:10px 0}
.lines .empty{text-align:center;font-size:15px;line-height:22px;color:var(--ink3);margin:auto 0}
.lines .empty:not([hidden])~.lines-in{display:none}
.newlines{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:2;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 14px 0 10px;
  border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:13px;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.45)}
.newlines svg{width:14px;height:14px}
.ln{display:grid;grid-template-columns:208px minmax(0,1fr);column-gap:16px}
.ln .who bdi{overflow:hidden;text-overflow:ellipsis}
.ln .say{min-width:0}
.ln .tr,.ln .or{overflow-wrap:anywhere}
.ln .tr:empty{display:none}
.ln .tr .par{display:block}
.ln .tr .par+.par{margin-top:6px}
.ln .or{text-align:left}
.ln .or .dim{opacity:.6}
.ln .or.rtl{font-size:15px}
.ln .note{font-size:12px;line-height:18px;font-weight:600;letter-spacing:.04em;color:var(--warn)}
.ln .who{display:flex;align-items:center;gap:8px;height:30px;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c);white-space:nowrap}
.ln .who i{width:8px;height:8px;border-radius:2.5px;background:var(--c);flex:none}
.ln .who .mono{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--ink3)}
.ln .tr{font-size:22px;line-height:30px;font-weight:500;letter-spacing:-.15px;color:var(--ink)}
.ln .tr .dim{color:rgba(243,245,248,.42)}
.ln .or{font-size:14px;line-height:20px;color:var(--ink3)}
.ln .or[dir=rtl]{text-align:left;unicode-bidi:isolate;font-size:15px}
.strip:not(.orig) .ln .or{display:none}
.strip.size-s .ln .tr{font-size:18px;line-height:26px}
.strip.size-l .ln .tr{font-size:27px;line-height:36px}
.ln .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c);margin-left:12px;vertical-align:middle;
  position:relative;top:-2px;box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 24%,transparent);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}

/* ── controls (76px, under the conversation) ── */
.ctl{height:76px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 24px;border-top:1px solid var(--line);background:var(--bg)}
.ctl .l{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;font-weight:500;color:var(--ink3);white-space:nowrap;min-width:0;overflow:hidden}
.ctl .l svg{width:15px;height:15px}
.ctl .l span{overflow:hidden;text-overflow:ellipsis}
.ctl .c{position:relative;display:flex;align-items:center;gap:12px}
.ctl .r{justify-self:end;display:flex;align-items:center;gap:10px;text-align:right;white-space:nowrap;min-width:0}
.ctl .r b{display:block;font-size:13.5px;line-height:18px;font-weight:500;color:var(--ink)}
.ctl .r small{display:block;font-size:12px;line-height:16px;color:var(--ink3)}
.cb{position:relative;width:52px;height:52px;border-radius:50%;background:var(--panel);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink);flex:none}
.cb svg{width:22px;height:22px}
.cb.on{background:rgba(94,200,160,.13);border-color:var(--accent-dim);color:var(--accent)}
.cb.off{background:rgba(229,72,77,.12);border-color:rgba(229,72,77,.5);color:var(--danger)}
.cb.dis{color:var(--ink3)}
.cb.dis>svg,.cb.locked>svg{opacity:.55}
.cb .lock{position:absolute;right:-3px;bottom:-3px;width:22px;height:22px;border-radius:50%;background:var(--panel2);border:1px solid var(--outline);
  display:grid;place-items:center;color:var(--ink2)}
.cb .lock svg{width:11px;height:11px;stroke-width:2.4;opacity:1}
.cb .n{position:absolute;top:-4px;right:-8px;min-width:22px;height:20px;padding:0 5px;border-radius:999px;
  background:var(--panel2);border:1px solid var(--outline);display:grid;place-items:center;
  font-family:var(--mono);font-size:11px;font-weight:500;font-style:normal;color:var(--ink);box-shadow:0 0 0 2px var(--bg)}
.cb.on .n{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
/* somebody waits to come in: how many, on the people button's other shoulder */
.cb .w{position:absolute;top:-4px;left:-8px;min-width:22px;height:20px;padding:0 5px;border-radius:999px;background:var(--warn);border:1px solid var(--warn);
  display:grid;place-items:center;font-family:var(--mono);font-size:11px;font-weight:600;font-style:normal;color:#1B1205;box-shadow:0 0 0 2px var(--bg)}
#peopleLock{color:var(--warn)}
/* hands are up while the host looks elsewhere: the people button says so */
.cb.handsup{border-color:var(--accent)}
.ctl .gap{width:1px;height:28px;background:var(--line);margin:0 4px}
.leave{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 24px 0 18px;border-radius:999px;
  background:var(--danger);color:#fff;font-size:15px;font-weight:600;flex:none}
.leave svg{width:22px;height:22px}
.sound{display:none}

/* ── the chat (mock-up 02, .chat) ── */
.chat{border-radius:20px;background:var(--panel);border:1px solid var(--line);display:grid;grid-template-rows:48px minmax(0,1fr) auto;min-height:0;overflow:hidden}
.chat-h{display:flex;align-items:center;justify-content:space-between;padding:0 10px 0 16px;border-bottom:1px solid var(--line)}
.chat-h .t{display:flex;align-items:baseline;gap:8px;font-size:16px;font-weight:600}
.chat-h .t span{font-size:12px;font-weight:500;color:var(--ink3)}
.x{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--ink2);background:var(--panel2);border:1px solid var(--line);flex:none}
.x svg{width:15px;height:15px}
.msgs{display:flex;flex-direction:column;padding:0 16px;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.msgs:focus{outline:none}
.msgs-in{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding:10px 0}
.msgs .empty{margin:auto 0;text-align:center;font-size:13.5px;line-height:20px;color:var(--ink3);padding:0 12px}
.msgs .empty:not([hidden])~.msgs-in{display:none}
.msg{min-width:0}
.msg .h{display:flex;align-items:baseline;gap:8px;font-size:13px;font-weight:600;line-height:18px;color:var(--c)}
.msg .h bdi{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg .h .mono{font-size:11px;font-weight:500;color:var(--ink3);flex:none}
.msg p{margin-top:4px;font-size:14px;line-height:20px;color:var(--ink);overflow-wrap:anywhere;white-space:pre-wrap}
.msg .note{display:flex;align-items:center;gap:5px;margin-top:4px;font-size:12px;line-height:16px;color:var(--ink3);text-align:left}
.msg .note svg{width:12px;height:12px}
.msg .note[aria-expanded="true"]{color:var(--ink2)}
.msg .orig{margin-top:4px;padding-left:10px;border-left:2px solid var(--outline);font-size:13px;line-height:19px;color:var(--ink2)}
/* a link the sender typed: the SITE, whole, then the file's name — which is
   the part that is cut when there is no room */
.msg .link{margin-top:6px;display:inline-flex;align-items:center;gap:10px;height:40px;max-width:100%;padding:0 14px 0 8px;border-radius:12px;
  background:var(--panel2);border:1px solid var(--line);font-size:13px;white-space:nowrap;color:var(--ink);text-decoration:none}
.msg .link .ico{width:26px;height:26px;border-radius:8px;background:rgba(127,179,245,.14);color:var(--s2);display:grid;place-items:center;flex:none}
.msg .link .ico svg{width:15px;height:15px}
.msg .link{overflow:hidden}
.msg .link .lw{min-width:0;display:flex;align-items:baseline}
.msg .link b{font-weight:600;color:var(--ink);flex:none}
.msg .link em{font-style:normal;color:var(--ink3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:pre}
/* "Host" beside a name on the strip and in the chat: a name is only what
   somebody typed at the door */
.hosttag{flex:none;padding:1px 6px;border-radius:6px;border:1px solid var(--outline);font-size:10px;line-height:14px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.msg .thumb{margin-top:6px;display:block;max-width:100%;border-radius:12px;border:1px solid var(--line);background:var(--panel2);overflow:hidden;line-height:0}
.msg .thumb img{display:block;max-width:100%;width:auto;height:auto;max-height:104px;object-fit:cover}
.chat-in{padding:4px 12px 12px}
.chatnote{margin:0 4px 6px;font-size:12.5px;line-height:17px;color:var(--warn)}
.cfield{height:44px;border-radius:16px;background:var(--bg);border:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 6px 0 14px}
.cfield:focus-within{border-color:var(--accent-dim)}
.cfield input[type=text]{flex:1;min-width:0;height:100%;background:none;border:0;outline:0;font-size:14px;color:var(--ink)}
.cfield input::placeholder{color:var(--ink3)}
.cfield .ib:disabled{opacity:.45}
.cfield .ib.send{background:var(--accent);color:var(--accent-ink)}
.cb.unread{border-color:var(--accent)}
.cb.unread .n{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
/* a picture from the chat, large */
.imgview{position:fixed;inset:0;z-index:30;background:rgba(6,8,11,.94);display:grid;place-items:center;padding:56px 24px 24px}
.imgview img{max-width:100%;max-height:100%;border-radius:12px;object-fit:contain}
.imgview .x{position:absolute;right:16px;top:14px;width:40px;height:40px}
.imgview .x svg{width:18px;height:18px}
/* Leave asks once, in a bubble over the button */
.leavewrap{position:relative;display:flex;flex:none}
.leavewrap .ask{position:absolute;left:50%;bottom:calc(100% + 14px);transform:translateX(-50%);z-index:6;height:auto;min-height:48px;padding:8px 8px 8px 18px;gap:10px;
  font-size:14px;line-height:19px;border-width:1.5px;background:var(--bg);box-shadow:0 10px 30px rgba(0,0,0,.5);white-space:nowrap}
.leavewrap .ask .yes,.leavewrap .ask .no{height:32px;padding:0 16px;font-size:14px}
/* The host's Leave asks which: end the meeting for everyone, leave and come
   back, or stay — three buttons in that bubble, each saying what it does,
   the one that ends first. The host has no other way out in the bar. */
.leavewrap .ask.pick{flex-direction:column;align-items:stretch;gap:8px;width:344px;padding:10px;border-radius:20px;border-color:var(--outline);white-space:normal}
.opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:11px 14px;border-radius:12px;border:1px solid var(--outline);text-align:left;color:var(--ink)}
.opt b{font-size:15px;line-height:20px;font-weight:600}
.opt small{font-size:12.5px;line-height:17px;font-weight:400;color:var(--ink2)}
.opt.end{background:var(--danger);border-color:var(--danger);color:#fff}
.opt.end small{color:rgba(255,255,255,.88)}
.opt.stay{align-items:center;border-color:transparent;background:var(--panel2)}
/* The camera's quality in the room: a small button on the camera's shoulder
   — an arrow, and "HD" while HD is on — opens the two choices in the same
   bubble, over the camera. The one in force is lit and carries the mark. */
.camwrap{position:relative;display:flex;flex:none}
.qchip{position:absolute;top:-4px;right:-7px;z-index:1;min-width:22px;height:20px;padding:0 4px;border-radius:999px;background:var(--panel2);border:1px solid var(--outline);
  display:grid;place-items:center;color:var(--ink2);box-shadow:0 0 0 2px var(--bg)}
/* a finger needs more than the eye is shown — upwards and outwards, away
   from the camera's own button */
.qchip::before{content:"";position:absolute;inset:-10px -4px -2px -4px}
.qchip svg{width:11px;height:11px;stroke-width:2.6;transform:rotate(180deg)}
.qchip b{display:none;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.04em;line-height:1}
.qchip.hd{border-color:var(--accent-dim);color:var(--accent)}
.qchip.hd svg{display:none}
.qchip.hd b{display:block}
.qchip:disabled{opacity:.6}
.camwrap.asking .qchip{border-color:var(--accent-dim);color:var(--ink)}
.camwrap .ask{position:absolute;left:50%;bottom:calc(100% + 14px);transform:translateX(-50%);z-index:6;height:auto;border-width:1.5px;background:var(--bg);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.camwrap .ask.pick{flex-direction:column;align-items:stretch;gap:8px;width:344px;padding:14px 10px 10px;border-radius:20px;border-color:var(--outline);white-space:normal}
.ask.one > .label{padding:0 6px 2px;font-size:11px;line-height:16px}
.ask.one .opt{padding:10px 12px 11px 14px;gap:3px}
.ask.one .opt b{align-self:stretch;display:flex;align-items:center;justify-content:space-between;gap:12px}
.ask.one .opt small{text-wrap:balance}
.ask.one .opt.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--bg))}
.sharewrap{position:relative;display:flex;flex:none}
.sharewrap .ask,.share-status{position:absolute;left:50%;bottom:calc(100% + 14px);transform:translateX(-50%);z-index:6;width:280px;max-width:calc(100vw - 24px);height:auto;padding:12px;border:1px solid var(--outline);border-radius:8px;background:var(--bg);box-shadow:0 10px 30px rgba(0,0,0,.5);white-space:normal}
.sharewrap .ask.pick{flex-direction:column;align-items:stretch;gap:8px}
.sharewrap .ask.commands .opt b{justify-content:flex-start;text-align:left;white-space:normal;overflow-wrap:anywhere}
.sharewrap .ask.commands .opt .i{flex:none;width:20px;height:20px}
.share-status{font-size:13px;line-height:20px;color:var(--ink2);text-align:center}
.presentation-expand{display:none}

/* END is an account workspace, not a dialog over the old meeting. */
body[data-view="end"] .door-stage{align-items:flex-start;padding:56px 24px 64px}
body[data-view="end"] .pair{max-width:1040px}
.completion{width:100%;min-width:0;letter-spacing:0}
.completion-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding-bottom:32px}
.completion-heading{min-width:0;flex:1}
.completion .label{letter-spacing:0;font-size:13px;text-transform:none;color:var(--accent)}
.completion h1{margin-top:12px;font-size:28px;line-height:36px;font-weight:600;letter-spacing:0;overflow-wrap:anywhere}
.completion h2{font-size:17px;line-height:24px;font-weight:600;letter-spacing:0}
.completion-meeting{margin-top:12px;font-size:16px;line-height:24px;font-weight:500;overflow-wrap:anywhere}
.completion-note{margin-top:8px;font-size:14px;line-height:22px;color:var(--ink2);overflow-wrap:anywhere}
.completion-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;padding-top:30px;max-width:100%}
.completion-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;max-width:100%;padding:11px 16px;border:1px solid var(--outline);border-radius:8px;font-size:14px;line-height:20px;font-weight:600;text-align:center;letter-spacing:0;overflow-wrap:anywhere}
.completion-button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.completion-button:hover:not(:disabled){border-color:var(--accent)}
.completion-button:disabled{opacity:.45}
.completion-section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.completion-section-head h2{display:flex;align-items:center;gap:10px}
.completion-section-head h2 .i{color:var(--ink2);width:18px;height:18px}
.completion-account,.completion-summary{padding:28px 0;border-top:1px solid var(--line)}
.completion-balances{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px;margin-top:22px}
.completion-balance{min-width:0;padding:20px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.completion-balance dt{font-size:13px;line-height:20px;color:var(--ink2)}
.completion-balance dd{margin-top:10px;font-family:var(--mono);font-size:24px;line-height:32px;color:var(--ink);overflow-wrap:anywhere;letter-spacing:0}
.completion-balance.low dd{color:var(--warn)}
.completion-account > .completion-button,.completion-summary > .completion-button{margin-top:16px}
.completion-home{display:inline-flex;align-items:center;min-height:44px;margin-top:12px;color:var(--ink2);font-size:14px;line-height:22px;text-underline-offset:4px}
.completion .sumtext{border-radius:8px}
@media(max-width:699px){
  body[data-view="end"] .door-stage{padding:28px 16px 40px}
  .completion-head{flex-direction:column;gap:18px;padding-bottom:24px}
  .completion h1{font-size:24px;line-height:32px}
  .completion-actions{padding-top:0;justify-content:flex-start}
  .completion-account,.completion-summary{padding:24px 0}
  .completion-balances{grid-template-columns:minmax(0,1fr)}
  body[data-view="end"] .top > .vr,body[data-view="end"] .top > .title{display:none}
  body[data-view="end"] #acctBar{min-width:0;gap:10px}
  body[data-view="end"] #hostWho{max-width:120px}
}
@media(max-width:389px){body[data-view="end"] #hostWho{display:none}}

/* The summary content is shared with all completion states. */
.sum .rule{margin-bottom:18px}
.sumstate{margin-top:8px;font-size:15px;line-height:22px;color:var(--ink2)}
.sumstate.busy::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:10px;vertical-align:middle;position:relative;top:-1px;animation:pulse 1.4s ease-in-out infinite}
.sumstate.hostline{margin-top:6px;font-size:14px;line-height:20px;color:var(--ink3)}
.sumtext{margin-top:14px;max-height:min(52vh,560px);overflow-y:auto;padding:16px 18px;border-radius:14px;background:var(--bg);border:1px solid var(--line);
  font-size:14.5px;line-height:22px;color:var(--ink);overflow-wrap:anywhere}
.sumtext:focus{outline:none}
.sumtext h3{font-size:15px;line-height:22px;font-weight:600;margin:18px 0 6px}
.sumtext h3:first-child{margin-top:0}
.sumtext p{margin:0 0 10px}
.sumtext ul{margin:0 0 10px;padding-inline-start:20px}
.sumtext li{margin:0 0 4px}
.sumtext b{font-weight:600}
.linkshow{margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--bg);border:1px solid var(--line);font-family:var(--mono);font-size:13px;line-height:18px;
  color:var(--ink);overflow-wrap:anywhere;user-select:all;-webkit-user-select:all}

/* ── the footer of the pages round the account ──
   What the public page's footer says, drawn for the dark pages and lower:
   the name and its sentence, Prices and FAQ, the privacy lines, the legal
   links with Contact, and under a rule the company with its address.
   It stands where a person chooses, signs in, manages the account and buys
   (the way in and its steps, the account, HOURS) and NOT in the application
   itself — the camera check, a guest's door, the end, the room: the owner,
   4 October 2026, "in the application itself there is no reason for a
   footer; the pages where I choose the account and sign in must have one,
   with the contact". */
.pagefoot{display:none;background:#07090C;border-top:1px solid var(--line);color:var(--ink2)}
body[data-view="signin"] .pagefoot,body[data-view="account"] .pagefoot,body[data-view="hours"] .pagefoot{display:block}
.pf-in{max-width:1280px;margin:0 auto;padding:28px 24px 20px}
.pf-top{display:grid;grid-template-columns:260px 150px minmax(0,1fr) 150px;gap:40px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.pf-mark{font-size:13px;line-height:18px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-bottom:10px}
.pf-say{font-size:13px;line-height:20px;color:var(--ink3);max-width:30rem}
.pf-h{font-size:11px;line-height:18px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:6px}
.pf-col{display:flex;flex-direction:column;gap:8px;align-items:flex-start;min-width:0}
.pf-col a{font-size:13px;line-height:18px;color:var(--ink2);text-decoration:none}
.pf-col a:hover{color:var(--ink)}
.pf-col .gdpr{display:inline-flex;align-items:center;gap:6px;color:var(--accent)}
.pf-col .gdpr svg{width:14px;height:14px;stroke-width:2.4}
.pf-lede{font-size:13px;line-height:19px;color:var(--ink2)}
.pf-priv{list-style:none;display:flex;flex-direction:column;gap:5px}
.pf-priv li{position:relative;padding-left:13px;font-size:12.5px;line-height:18px;color:var(--ink3)}
.pf-priv li::before{content:"";position:absolute;left:0;top:7px;width:4px;height:4px;border-radius:50%;background:var(--accent)}
.pf-bottom{padding-top:14px;display:flex;flex-wrap:wrap;gap:6px 30px;justify-content:space-between;font-size:11px;line-height:17px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}

/* ── between a laptop and a phone: the door stacks, the bar tightens ── */
@media (max-width:1180px){
  .pair{gap:40px}
  .right{flex-basis:440px}
  .ctl .l{visibility:hidden}
}
@media (max-width:980px){
  .door-stage{align-items:flex-start;padding:24px 16px 40px}
  .pair{flex-direction:column;align-items:center;gap:28px}
  .left,.right{flex:none;width:100%;max-width:560px}
  .tile.preview{flex:none;min-height:0;aspect-ratio:16/10}
  /* a training on a narrow window: the column lies under the stage */
  .main[data-layout="training"],.app.ishost .main[data-layout="training"]{grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:minmax(0,1fr) auto}
  .main[data-layout="training"] .stage{grid-column:1;grid-row:1}
  .main[data-layout="training"] .col{grid-column:1;grid-row:2;flex-direction:row}
  .main[data-layout="training"] .grid{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);height:96px}
  .main[data-layout="training"] .tile .avatar,.main[data-layout="training"] .tile.self .avatar{width:40px;height:40px;font-size:14px;margin:0 0 22px}
  .main[data-layout="training"] .people,.main[data-layout="training"] .side{grid-column:2;grid-row:1/3}
  .floorcard{min-height:96px;flex:1}
}
@media (max-width:980px){
  /* SIGN IN: the card at the top of the page */
  .acct{justify-content:flex-start;padding:24px 16px 40px}
  .acct.new .frame{max-width:560px}
  /* the footer: two columns, the privacy lines across */
  .pf-top{grid-template-columns:1fr 1fr;gap:28px 32px}
  .pf-brand,.pf-wide{grid-column:1/-1}
  .pf-col{order:2}
  .pf-col.pf-wide{order:1}
  /* HOURS: one column — the number, the plans, the order, the purchases */
  .buy{justify-content:flex-start;padding:24px 16px 40px}
  .buy .frame{max-width:640px}
  .buy .pair{grid-template-columns:minmax(0,1fr)}
  .buy .left .what{margin-top:22px}
  /* START: the lead, the camera, then the card */
  body[data-view="start"] .left{flex:none;max-width:560px}
  #view-start .join.push{margin-top:20px}
  .top .who b{max-width:180px}
}
/* the chat lies over the right of the room… */
@media (min-width:700px){
  .chat{position:absolute;right:24px;top:16px;bottom:16px;width:min(360px,calc(100% - 48px));z-index:5;box-shadow:0 14px 40px rgba(0,0,0,.5)}
}
/* …and where there is room for it, it takes a column of its own (mock-up 02) */
@media (min-width:1000px){
  .main.chatopen[data-layout="grid"]{grid-template-columns:minmax(0,1fr) 400px}
  .main.chatopen[data-layout="share"]{grid-template-columns:minmax(0,1fr) 264px 360px}
  .main[data-layout="grid"] .chat,.main[data-layout="share"] .chat{position:static;width:auto;box-shadow:none}
}

/* The list of who is in the room stands where the chat does: over the right
   of the room on a narrow window… */
@media (min-width:700px){
  .people.who{position:absolute;right:24px;top:16px;bottom:16px;width:min(336px,calc(100% - 48px));z-index:5;box-shadow:0 14px 40px rgba(0,0,0,.5)}
  /* …in a training in the column of the guest's own cards, over them (the
     place a training host's panel has)… */
  .main[data-layout="training"] .people.who{position:static;width:auto;z-index:1;box-shadow:none}
}
@media (min-width:981px){
  .main[data-layout="training"] .people.who,.main[data-layout="training"] .side{grid-column:3;grid-row:1}
  /* a training's host: the chat lies over the host's panel edge to edge —
     no strip of the panel is left showing beside it (the people button
     closes the chat and the panel is back) */
  .app.ishost .main[data-layout="training"] .chat{width:384px}
}
/* …and beside the tiles, in a column of its own, where there is room. Closed,
   it takes none. */
@media (min-width:1000px){
  .main.peopleopen[data-layout="grid"]{grid-template-columns:minmax(0,1fr) 336px}
  .main.peopleopen[data-layout="share"]{grid-template-columns:minmax(0,1fr) 264px 320px}
  .main[data-layout="grid"] .people.who,.main[data-layout="share"] .people.who{position:static;width:auto;box-shadow:none}
}
/* The list and the chat side by side: only where the tiles keep their room
   (PANELS_BOTH_GRID_PX and PANELS_BOTH_SHARE_PX in panels.js; under them the
   page closes one when the other opens). */
@media (min-width:1320px){
  .main.peopleopen.chatopen[data-layout="grid"]{grid-template-columns:minmax(0,1fr) 336px 400px}
}
@media (min-width:1520px){
  .main.peopleopen.chatopen[data-layout="share"]{grid-template-columns:minmax(0,1fr) 264px 320px 360px}
}

/* ── a phone (mock-up 05). The same number as PHONE_MAX_PX in config.js. ── */
@media (max-width:699px){
  .top{padding:0 16px;gap:12px}
  .card{padding:22px 20px 22px;border-radius:18px}
  .card h1{font-size:24px;line-height:30px}
  .preview .avatar{width:96px;height:96px;font-size:32px}
  .meter{margin-left:4px;padding:0 14px;gap:10px}
  .meter .lab{display:none}
  .devices{gap:8px 20px}
  .dev select{max-width:150px}

  .acct .card{padding:24px 20px 24px}
  .acct .trail{gap:8px;align-items:flex-start}
  .acct .trail li{flex:1;min-width:0;flex-direction:column;align-items:flex-start;white-space:normal;line-height:18px}
  .acct .trail li span{min-width:0;overflow-wrap:anywhere}
  .acct .trail li + li::before{display:none}
  /* "Authenticator" is a long word: on the narrowest phones the line still fits. */
  @media (max-width:359px){.acct .trail{gap:5px;padding:0;font-size:12px}.acct .trail li{gap:5px}.acct .trail li + li::before{width:8px;margin-right:0}.acct .trail b{width:20px;height:20px}}
  .acct .foot{flex-direction:column;gap:8px}
  .pf-in{padding:28px 16px 22px}
  .acct .scan{grid-template-columns:minmax(0,1fr);gap:18px}
  .acct .scan canvas{width:200px;height:200px;margin:0 auto}
  .acct .rowd{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:18px}
  .acct .rowd .alert{order:0;flex:none}
  .acct .rowd .go{flex:none}
  .acct .digits{gap:8px}
  .acct .digits i{width:4px}
  .acct .digits span{height:56px;font-size:24px}
  .acct .key.rec b{font-size:17px;line-height:28px}

  /* the account in the bar: the initials and the way out; the address is
     on the screen below wherever it matters */
  .top .who b{display:none}
  body[data-view="hours"] .lobby .top > .vr,body[data-view="hours"] .lobby .top > .title{display:none}
  .top .end{gap:12px}
  body[data-view="start"] .lead-h h2{font-size:24px;line-height:30px}
  .buy .lead h1{font-size:24px;line-height:30px}
  /* the selector over its sentence, the number in the middle of the row */
  .buy .pick{grid-template-columns:minmax(0,1fr);gap:14px;padding:16px}
  .buy .step{justify-content:center}
  .buy .num{flex:1;min-width:0;max-width:200px}
  .buy .says{text-align:center}
  .buy .plans{grid-template-columns:minmax(0,1fr)}
  .buy .what{grid-template-columns:minmax(0,1fr);gap:14px}
  .buy .bal{text-align:left;white-space:normal}
  .buy .bought .item .when{min-width:0;flex-basis:100%}
  .buy .bought .item .said{padding-left:0}
  /* the pay button stays in view, at the bottom of the screen — except
     right after a payment (.justpaid), when it would sit under "12 Pro
     hours were added." as the largest thing on the screen */
  .buy:not(.justpaid){padding-bottom:112px}
  .buy:not(.justpaid) .paybar{position:fixed;left:0;right:0;bottom:0;z-index:6;margin:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line)}
  /* the footer is the last thing on the page now: the room for the pinned
     button is left under it, so its last line can be read above the button */
  body[data-view="hours"] .buy:not(.justpaid){padding-bottom:40px}
  body[data-view="hours"] .pagefoot{padding-bottom:calc(84px + env(safe-area-inset-bottom))}

  .app{display:none;flex-direction:column;height:100dvh}
  body[data-view="room"] #view-room{display:flex}
  .app .top{height:60px;flex:none;border-bottom:0}
  .app .top .brand,.app .top .vr,.app .top .end,.app .top .kind,.app .top .hleft{display:none}
  .app .top .what{flex:1}
  .app .top .title{line-height:20px;letter-spacing:-.01em}
  .app .top .sub{display:block}

  .main{display:block;flex:none;padding:4px 16px 0}
  .col{display:block}
  /* a notice must not lie over the big tile and its buttons: on a phone it
     takes a line of its own above the tiles */
  .banners{position:static;transform:none;max-width:none;align-items:stretch;gap:6px}
  .banners .banner{margin-bottom:6px;justify-content:center}
  .banners .banner + .banner{margin-top:-6px}

  /* a shared screen (or a training's presenter) takes the big tile's place;
     everybody is then a small tile under it, and oneself stays inset */
  .stage{height:244px;padding:0;display:block}
  .stage-h{position:absolute;left:10px;top:10px;right:84px;z-index:2}
  .presentation-expand{display:grid;place-items:center;position:absolute;left:0;top:38px;width:40px;height:40px;border:1px solid var(--outline);border-radius:8px;background:var(--bg);color:var(--ink)}
  .presentation-expand[aria-pressed="true"]{color:var(--accent);border-color:var(--accent)}
  .main.presentation-expanded .stage{height:clamp(244px,calc(100dvh - 300px),620px)}
  .main.presentation-expanded .col,.main.presentation-expanded > .side{display:none}
  .stopshare{display:none}
  .screen{height:100%;border-radius:0}
  .screen .avatar{width:92px;height:92px;font-size:31px;border-width:2px}
  .main:not([data-layout="grid"]) .grid{position:static;margin-top:8px}
  .main:not([data-layout="grid"]) .grid .tile.self{top:14px;right:26px}
  .main:not([data-layout="grid"]) .grid.n-1:has(.self){margin-top:0}
  /* a training's host with nobody on the floor has no tile: no empty band */
  .main[data-layout="training"] .grid.n-0{display:none}
  .floorcard{margin-top:8px;min-height:0;flex-direction:row;align-items:center}
  .floorcard .who{margin-top:2px;gap:10px;justify-content:flex-start}
  .floorcard .fnote{display:none}

  /* the host's Mute and Remove on a phone: two round buttons under each
     small tile's name, with words on the big tile */
  .grid .tile.modded{height:118px}
  .grid .tile .mod{position:static;gap:8px}
  .grid .tile .mb{width:32px;height:28px;padding:0;justify-content:center}
  .grid .tile .mb span{display:none}
  .grid .tile.asking .mod{position:absolute;inset:0;justify-content:center;background:rgba(11,13,17,.95);z-index:3}
  .grid .tile.asking .ask{flex-wrap:wrap;justify-content:center;height:auto;padding:0;border:0;background:none;gap:6px;white-space:normal}
  .grid .tile.asking .ask .q{flex-basis:100%;text-align:center}
  .grid .tile.asking .ask .yes,.grid .tile.asking .ask .no{height:26px;padding:0 10px}
  .grid .tile.big.modded{height:244px}
  .grid .tile.big .mod,.grid .tile.big.asking .mod{position:absolute;inset:auto;left:auto;right:46px;top:auto;bottom:10px;background:none;gap:6px}
  .grid .tile.big.modded .name,.grid .tile.big.modded.hasvideo .name{max-width:calc(100% - 140px)}
  .grid .tile.big.asking .name{visibility:hidden}
  .grid .tile.big.asking .ask{flex-wrap:nowrap;height:28px;padding:0 4px 0 11px;border:1px solid rgba(229,72,77,.5);background:rgba(11,13,17,.94);white-space:nowrap}
  .grid .tile.big.asking .ask .q{flex-basis:auto}
  .grid .tile.big.asking .ask .yes,.grid .tile.big.asking .ask .no{height:20px;padding:0 9px}
  .grid .tile.modded .flag{display:none}

  /* the people panel lies over the room when the people button opens it:
     for everybody the list of who is in the room, for a training's host
     the hands and the listeners */
  .people{display:none}
  .people.open{display:flex;position:fixed;left:0;right:0;top:60px;bottom:calc(88px + env(safe-area-inset-bottom));z-index:6;border-radius:20px 20px 0 0;border-bottom:0}
  .people .closer{display:grid}
  .give{width:auto;padding:0 14px}

  /* a training's guest: one line of standing; the hand itself is in the bar */
  .side{margin-top:8px;row-gap:0}
  .side .card,.side .listen{padding:10px 12px;border-radius:14px;flex:none;display:block}
  .side .room,.side .listen .help,.side .raise,.side .fbtns{display:none}
  .side .ic,.side .up .ic,.side .onfloor .ic{width:32px;height:32px}
  .side h2{font-size:14px;line-height:18px}
  .side h2 + p{font-size:12.5px;line-height:16px}
  .side .up{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .side .up b{font-size:14px;line-height:18px}
  .side .up small{font-size:12.5px;line-height:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .side .up .st{min-width:0}
  .side .up .st > div{min-width:0}
  .side .up .quiet{margin-top:0;width:auto;height:32px;padding:0 12px;font-size:12.5px;flex:none}
  .grid,.grid[class*="cols-"]{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto;gap:8px;position:relative;overflow:visible}
  .grid .tile{height:84px;border-radius:14px;flex-direction:column;gap:7px}
  .grid .tile .avatar{width:34px;height:34px;font-size:12px;margin:0}
  .grid .tile .name{position:relative;left:auto;bottom:auto;height:auto;max-width:100%;padding:0 6px;border:0;border-radius:6px;background:none;
    gap:5px;font-size:12px;line-height:14px;font-weight:500}
  .grid .tile.hasvideo .name{position:absolute;left:4px;bottom:4px;padding:2px 6px;background:rgba(11,13,17,.72)}
  .grid .tile .name .nm-full{display:none}
  .grid .tile .name .nm-first{display:block}
  .grid .tile .name .mono{font-size:10px}
  .grid .tile .tag,.grid .tile .flag,.grid .tile .micst{display:none}
  .grid .tile .micst.off{display:grid;right:6px;top:6px;bottom:auto;width:20px;height:20px;border:0;background:rgba(229,72,77,.14)}
  .grid .tile .micst.off svg{width:12px;height:12px}

  /* more than four small tiles (a room of seven or more): they stay one
     row, which scrolls sideways under the big tile; nothing is paged on a
     phone. Oneself is then inset against the column, which does not scroll. */
  .main[data-layout="grid"] .col{position:relative}
  .main[data-layout="grid"] .grid.dense{position:static;grid-template-columns:none;grid-template-rows:244px 84px;grid-auto-flow:column;
    grid-auto-columns:calc((100% - 24px) / 4);overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
  .main[data-layout="grid"] .grid.dense::-webkit-scrollbar{display:none}
  /* the same one row under a shared screen: the conversation below must
     not be pushed off the screen by six rows of tiles */
  .main[data-layout="share"] .grid.dense{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 24px) / 4);
    overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
  .main[data-layout="share"] .grid.dense::-webkit-scrollbar{display:none}
  .main[data-layout="grid"] .grid.dense .tile{grid-row:2}
  .main[data-layout="grid"] .grid.dense .tile.big{grid-row:1;grid-column:1 / span 4;position:sticky;left:0}

  /* (.grid in front of every rule here: the door's preview is a tile too,
     and must not shrink with these)
     the person speaking, large; oneself, inset in its corner */
  .grid .tile.big{grid-column:1/-1;order:-1;height:244px;border-radius:18px;display:flex;flex-direction:row}
  .grid .tile.big.speaking{outline-offset:-2px}
  .grid .tile.big .avatar{width:92px;height:92px;font-size:31px;margin-bottom:12px}
  .grid .tile.big .name,.grid .tile.big.hasvideo .name{position:absolute;left:10px;bottom:10px;height:28px;max-width:calc(100% - 60px);padding:0 10px;border-radius:999px;
    background:rgba(11,13,17,.8);border:1px solid var(--line);gap:7px;font-size:13px;font-weight:600}
  .grid .tile.big .name .nm-full{display:block}
  .grid .tile.big .name .nm-first{display:none}
  .grid .tile.big .name .mono{font-size:11px}
  .grid .tile.big .micst,.grid .tile.big .micst.off{display:grid;right:10px;top:auto;bottom:10px;width:28px;height:28px;border:1px solid var(--line)}
  .grid .tile.big .micst.off{border-color:rgba(229,72,77,.42)}
  .grid .tile.big .micst.off svg{width:15px;height:15px}
  .grid .tile.big.speaking .tag.spk{display:flex;left:10px;top:10px}
  .grid .tile.self{position:absolute;right:10px;top:10px;width:62px;height:76px;border-radius:12px;border:1px solid var(--outline);background:var(--bg);
    z-index:2;gap:6px;outline:0}
  .grid .tile.self .avatar{width:32px;height:32px;font-size:11px}
  /* a training's own tile is this same small inset: without this the wider
     window's rule for a training's column (40px and a margin under it) wins
     and the initials and "You" are cut by the tile's edge */
  .main[data-layout="training"] .grid .tile.self .avatar{width:32px;height:32px;font-size:11px;margin:0}
  /* Shared documents have their own header; no controls or self-view cover the text. */
  .stage:has(.screen.shared){display:grid;grid-template-rows:48px minmax(0,1fr);gap:0}
  .stage:has(.screen.shared) .stage-h{position:static;padding:4px 8px;min-width:0}
  .stage:has(.screen.shared) .sharing-tag{flex:1;max-width:calc(100% - 48px)}
  .stage:has(.screen.shared) .presentation-expand{position:static;flex:none}
  .main:has(.screen.shared) .grid{grid-template-columns:none;grid-template-rows:84px;grid-auto-flow:column;grid-auto-columns:calc((100% - 24px) / 4);
    overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
  .main:has(.screen.shared) .grid::-webkit-scrollbar{display:none}
  .main:has(.screen.shared) .grid .tile.self{position:relative;inset:auto;width:auto;height:84px;min-width:0;display:flex}
  .main:has(.screen.shared) .grid.n-1:has(.self){margin-top:8px;grid-template-columns:minmax(0,1fr)}
  .grid .tile.self .name{font-size:11px;line-height:12px;color:var(--ink2)}
  .grid .tile.self.hasvideo .name{left:3px;bottom:3px}
  .grid .tile.self .name .mono{display:none}
  .grid .tile.self .micst.off{right:3px;top:3px;width:16px;height:16px}
  .grid .tile.self .micst.off svg{width:10px;height:10px}

  .strip{flex:1;margin-top:12px;border-radius:20px 20px 0 0;display:flex;flex-direction:column}
  .strip-h{flex:none;height:64px;padding:0 12px;gap:10px;justify-content:space-between}
  .strip-h .live,.strip-h .vr,.strip-h .reading svg:first-child,.wide,.seg{display:none}
  .narrow{display:inline}
  /* on a phone the language button is a full finger high and still one line:
     a long language name gives way with three dots, the button never wraps */
  .strip-h .reading{height:44px;padding:0 10px 0 14px;font-size:15px}
  .strip-h .end{gap:12px}
  .strip-h .tog{gap:8px}
  .sizebtn{height:30px;padding:0 10px;border-radius:999px;border:1px solid var(--line);background:var(--panel2);display:flex;align-items:baseline;gap:2px;
    color:var(--ink);font-weight:600;line-height:28px}
  .sizebtn .sm{font-size:11px;color:var(--ink2)}
  .sizebtn .lg{font-size:15px}
  .lines{flex:1;padding:0 16px}
  .lines-in{gap:18px;margin:auto 0 0;padding:16px 0}
  .newlines{bottom:10px}
  .strip-h .busy{display:none}
  /* what the person must know (the hours are used up, the host is away) is
     never hidden: on a phone it is a line under the strip's header */
  .strip-h .keynote{position:absolute;left:0;right:0;top:64px;z-index:1;padding:6px 16px;background:var(--panel2);white-space:normal;font-size:12.5px;line-height:17px}
  .ln{display:block}
  .ln .who{height:auto;line-height:16px}
  .ln .tr{margin-top:6px}
  .ln .or{margin-top:4px}

  .ctl{flex:none;height:auto;min-height:88px;padding:14px 24px calc(22px + env(safe-area-inset-bottom));display:flex;align-items:flex-start;justify-content:space-between}
  .ctl .l,.ctl .r,.ctl .gap{display:none}
  /* A narrow desktop browser can still share: capability, not width, hides it. */
  .ctl:has(.sharewrap:not([hidden])){padding-left:12px;padding-right:12px;gap:4px}
  .ctl:has(.sharewrap:not([hidden])) .cb,.ctl:has(.sharewrap:not([hidden])) .leave{width:44px;height:44px}
  /* a training's listener has six buttons in the bar (the hand too): they
     keep a gap between them on a narrow phone */
  .app.training .ctl{padding-left:16px;padding-right:16px}
  /* the host's Invite, as a round button: on a phone the link is nowhere else */
  .app.ishost .top .end{display:flex;margin-left:0}
  .app.ishost .top .end .count{display:none}
  .app.ishost .top .invite{width:36px;padding:0;justify-content:center}
  .app.ishost .top .invite span{display:none}
  .ctl .c{display:contents}
  .leave{width:52px;padding:0;justify-content:center}
  .leave span{display:none}

  /* the chat covers the room; its one button closes it */
  .chat{position:fixed;inset:0;z-index:20;border-radius:0;border:0;grid-template-rows:56px minmax(0,1fr) auto;padding-bottom:env(safe-area-inset-bottom)}
  .chat-h{padding:0 12px 0 18px}
  .chat-h .x{width:40px;height:40px}
  .chat-h .x svg{width:18px;height:18px}
  .cfield{height:48px}
  .cfield input[type=text]{font-size:16px}
  .cfield .ib{width:36px;height:36px}
  .leavewrap{display:contents}
  .leavewrap .ask{position:fixed;left:12px;right:12px;bottom:calc(104px + env(safe-area-inset-bottom));transform:none;white-space:normal;border-radius:18px;justify-content:space-between}
  .leavewrap .ask .q{flex:1}
  .leavewrap .ask.pick{width:auto;border-radius:20px}
  /* the camera's two choices lie over the bar, as the Leave question does */
  .camwrap .ask,.camwrap .ask.pick{position:fixed;left:12px;right:12px;bottom:calc(104px + env(safe-area-inset-bottom));transform:none;width:auto}
  .sharewrap .ask,.share-status{position:fixed;left:12px;right:12px;bottom:calc(104px + env(safe-area-inset-bottom));transform:none;width:auto}
  /* at the check the two words are a finger high */
  .qseg{height:40px}
  .qseg button{height:34px;padding:0 18px;font-size:14px}
}

/* Keep authentication tokens and counters readable in right-to-left interfaces. */
html[dir="rtl"] :is(input[type="email"],input[type="url"],input[inputmode="numeric"],.digits,.key,.clock,.timer){direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] :is(.org-frame,.acct) :is(h1,h2,h3,label,button){letter-spacing:0}
html[lang="ar"] :is(.org-frame,.acct){font-family:"Geeza Pro","Noto Sans Arabic",Tahoma,Arial,sans-serif}
html[lang="he"] :is(.org-frame,.acct){font-family:"Arial Hebrew","Noto Sans Hebrew",Arial,sans-serif}

/* A phone turned sideways has desktop width, but not desktop height.
   Reserve captions and controls, then give the remaining height to the slide. */
@media (orientation:landscape) and (max-height:540px){
  body[data-view="room"] #view-room:has(.screen.shared){display:grid;grid-template-rows:44px minmax(0,1fr) 96px 60px}
  .app:has(.screen.shared) > .top{height:44px}
  .main:has(.screen.shared){display:grid;padding:4px 12px;gap:8px}
  .main:has(.screen.shared)[data-layout="share"]{grid-template-columns:minmax(0,1fr) 208px;grid-template-rows:minmax(0,1fr)}
  .main:has(.screen.shared) .col{display:grid;min-height:0}
  .main:has(.screen.shared) .stage{height:auto;grid-template-rows:32px minmax(0,1fr);padding:0 6px 4px}
  .main:has(.screen.shared) .stage-h{position:static;padding:0;min-width:0}
  .main:has(.screen.shared) .sharing-tag{max-width:100%}
  .main:has(.screen.shared) .presentation-expand{display:none}
  .main:has(.screen.shared) .screen{height:auto}
  .main:has(.screen.shared) .grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row;grid-auto-columns:auto;grid-auto-rows:minmax(56px,1fr);height:auto;overflow-x:hidden;overflow-y:auto}
  .main:has(.screen.shared)[data-layout="share"] .grid .tile{position:relative;inset:auto;width:auto;height:56px;grid-column:auto;grid-row:auto;flex-direction:row;justify-content:flex-start;gap:8px;padding:0 8px}
  .main:has(.screen.shared)[data-layout="share"] .tile .avatar{width:40px;height:40px;margin:0;font-size:14px}
  .main:has(.screen.shared)[data-layout="share"] .tile .name{position:static;flex:1;min-width:0;max-width:none;height:auto;padding:0;border:0;background:none}
  .main:has(.screen.shared)[data-layout="share"] .tile video{position:static;width:40px;height:40px;border-radius:50%;flex:none}
  .main:has(.screen.shared)[data-layout="share"] .tile .micst{position:static;flex:none}
  .main:has(.screen.shared)[data-layout="training"]{grid-template-columns:minmax(0,1fr) 128px 220px;grid-template-rows:minmax(0,1fr)}
  .main:has(.screen.shared)[data-layout="training"] .col{display:flex;grid-column:2;grid-row:1;flex-direction:column;overflow-y:auto}
  .main:has(.screen.shared)[data-layout="training"] .grid{flex:none;min-height:128px;grid-auto-rows:minmax(128px,1fr)}
  .main:has(.screen.shared)[data-layout="training"] .grid .tile{position:relative;inset:auto;width:auto;height:128px}
  .main:has(.screen.shared)[data-layout="training"] .grid .tile .avatar{width:40px;height:40px;font-size:14px;margin:0 0 8px}
  .main:has(.screen.shared)[data-layout="training"] .floorcard{min-height:96px;flex:none;flex-direction:column;align-items:stretch;padding:8px}
  .main:has(.screen.shared)[data-layout="training"] .floorcard .quiet{height:auto;min-height:32px;padding:6px 8px;white-space:normal;line-height:16px;text-align:center}
  .main:has(.screen.shared)[data-layout="training"] .people,.main:has(.screen.shared)[data-layout="training"] .side{grid-column:3;grid-row:1;overflow-y:auto}
  .main:has(.screen.shared)[data-layout="training"] > .side{display:flex}
  .main:has(.screen.shared)[data-layout="training"] .people:not(.who){display:flex;position:static;width:auto}
  .main:has(.screen.shared) .chat,.main:has(.screen.shared) .people.who{position:fixed;top:48px;bottom:64px;left:auto;right:12px;width:min(360px,calc(100% - 24px));z-index:6}
  .main:has(.screen.shared) .banners:not(:has(.banner:not([hidden]))){display:none}
  .main:has(.screen.shared):has(.banner:not([hidden])){grid-template-rows:minmax(0,40px) minmax(0,1fr)}
  .main:has(.screen.shared):has(.banner:not([hidden])) .banners{position:static;transform:none;grid-column:1/-1;grid-row:1;max-width:none;max-height:40px;overflow-y:auto;pointer-events:auto;align-items:stretch}
  .main:has(.screen.shared):has(.banner:not([hidden])) .banner{flex:none;margin:0}
  .main:has(.screen.shared):has(.banner:not([hidden])) > .stage,.main:has(.screen.shared):has(.banner:not([hidden])) > .col,
  .main:has(.screen.shared):has(.banner:not([hidden])) > .side,.main:has(.screen.shared):has(.banner:not([hidden])) > .people:not(.who){grid-row:2}
  .app:has(.screen.shared) > .strip{display:grid;margin:0;border-radius:0;grid-template-rows:36px minmax(0,1fr)}
  .app:has(.screen.shared) .strip-h{height:36px;padding:0 12px;gap:10px}
  .app:has(.screen.shared) .strip-h .reading{height:32px}
  .app:has(.screen.shared) > .ctl{height:60px;min-height:60px;padding:8px 12px;align-items:center}
  .app:has(.screen.shared) .ctl .cb,.app:has(.screen.shared) .ctl .leave{height:44px}
  .app:has(.screen.shared) .ctl .cb{width:44px}
}