/* The dashboard pages (accounts layer, stage 3): the list of broadcasts,
   a new broadcast, one broadcast. Same broadcast-studio world as the room:
   navy set, the customer's colour as the band, white supers. */
:root{
  --navy:#0E1726; --set:#16233A; --panel:#1D2B44; --deep:#0A1220; --line:#2A3A57; --line-2:#34466A;
  --text:#FFFFFF; --soft:#D6DEEB; --muted:#93A3BF; --brand:#C2410C; --on-brand:#FFFFFF; --live:#E5202E;
  --ok:#3CC4A4; --hold:#E7C04B;
  --display:"Rubik",system-ui,sans-serif; --ui:"Heebo",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{min-height:100%}
body{margin:0;background:var(--navy);color:var(--text);font:400 15px/1.5 var(--ui);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
::selection{background:var(--brand);color:var(--on-brand)}
button,input,select{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* top bar */
.top{height:56px;display:flex;align-items:center;gap:18px;padding-block:0;padding-right:max(20px,env(safe-area-inset-right,0px));padding-left:max(20px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line)}
.mark{display:flex;align-items:center;gap:10px;padding-inline-end:18px;border-inline-end:1px solid var(--line);font:900 18px var(--display);height:32px;text-decoration:none}
.mark img{height:32px;width:auto}
.mark i{width:10px;height:10px;background:var(--brand)}
/* Our logo (stage 5): on our own screens; a small mark on the customer's dashboard */
.bc-logo{height:26px;width:auto;display:block}
.mark .bc-logo{height:26px}
.bc-mark{height:34px;width:auto;display:block;margin-inline:-6px}
.top h1{margin:0;font:700 16px var(--display)}
.top .back{color:var(--soft);text-decoration:none;font-size:14px}
.top .back:hover{color:var(--text)}
.who{margin-inline-start:auto;display:flex;align-items:center;gap:12px;color:var(--muted);font-size:14px;min-width:0}
.who bdi{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who select{height:36px;background:var(--deep);border:1px solid var(--line);color:var(--text);padding:0 8px}

/* support look / paused account (stage 8) */
.note-bar{margin:0;padding:10px max(20px,env(safe-area-inset-right,0px));background:var(--hold);color:#0E1726;font-weight:500;font-size:14.5px}
.note-bar a{font-weight:700}

/* pages */
main{min-height:calc(100vh - 56px);padding:36px max(16px,env(safe-area-inset-right,0px)) 56px max(16px,env(safe-area-inset-left,0px));background:radial-gradient(ellipse 70% 50% at 50% 0%,#1B2A47 0%,var(--navy) 70%)}
.page{width:min(980px,100%);margin:0 auto;display:flex;flex-direction:column;gap:26px}
.page.narrow{width:min(600px,100%)}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.page-head h2{margin:0;font:900 clamp(26px,3.4vw,36px)/1.1 var(--display);text-wrap:balance}
.page-head .sub{color:var(--muted);font-size:14px;margin-top:6px}

.card{position:relative;background:var(--set);border:1px solid var(--line);padding:30px 30px 32px;display:flex;flex-direction:column;gap:20px}
.card.band::after{content:"";position:absolute;inset:auto 0 0 0;height:6px;background:var(--brand)}
.card h2{margin:0;font:900 28px/1.1 var(--display)}
.card h3{margin:0;font:700 18px var(--display)}
.card p{margin:0;color:var(--soft);line-height:1.6}

/* form parts */
.field{display:flex;flex-direction:column;gap:8px;color:var(--muted);font-size:14px}
.input{height:50px;background:var(--deep);border:1px solid var(--line);border-radius:2px;padding:0 14px;color:var(--text);font-size:17px;min-width:0}
.input::placeholder{color:#6F80A0}
.input:focus{border-color:var(--brand);outline:none}
fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
legend{color:var(--muted);font-size:14px;margin-bottom:8px;padding:0}
.choice{position:relative;display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center;padding:14px 16px;background:var(--panel);border:1px solid var(--line);cursor:pointer;transition:border-color .15s,background .15s}
.choice:hover{border-color:var(--line-2)}
.choice input{grid-row:span 2;width:18px;height:18px;margin:0;accent-color:var(--brand)}
.choice b{font:700 16px var(--display)}
.choice small{grid-column:2;color:var(--muted);font-size:13px}
.choice:has(input:checked){border-color:var(--brand);background:#22335A}
.when-pick{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:6px}
.when-pick .input{color-scheme:dark}
.check{display:flex;align-items:center;gap:10px;color:var(--soft);font-size:15px;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--brand)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 22px;border:1px solid var(--line);background:var(--panel);font-weight:700;font-size:16px;cursor:pointer;border-radius:2px;color:var(--text);text-decoration:none;white-space:nowrap}
.btn:hover{background:#243656}
.btn.p{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.btn.p:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.45;cursor:default;filter:none}
.btn.sm{height:36px;padding:0 14px;font-size:14px;font-weight:500}

.link-box{display:flex;flex-direction:column;gap:10px;padding:16px;background:var(--panel);border:1px solid var(--line)}
.link-box h4{margin:0;font:700 16px var(--display)}
.link-box p{font-size:14px}
.url{display:flex;gap:8px;align-items:center}
.url code{flex:1;min-width:0;font:400 13px/1.4 ui-monospace,Consolas,monospace;color:var(--soft);direction:ltr;text-align:left;background:var(--deep);border:1px solid var(--line);padding:9px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* state chips */
.state{display:inline-flex;align-items:center;gap:6px;font:700 12.5px var(--display);padding:3px 9px;white-space:nowrap}
.state.live{background:var(--live);color:#fff}
.state.live::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff}
.state.soon{background:rgba(231,192,75,.14);color:var(--hold)}
.state.ready{background:rgba(255,255,255,.08);color:var(--soft)}
.state.done{background:rgba(60,196,164,.14);color:var(--ok)}
.state.cancel{background:rgba(255,255,255,.06);color:var(--muted);text-decoration:line-through}

.err{color:#FFB4BD;margin:0}
.err:empty{display:none}
.muted{color:var(--muted)}
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#fff;color:var(--navy);font-weight:500;padding:10px 18px;box-shadow:0 8px 28px rgba(0,0,0,.35);z-index:20}
#toast:empty{display:none}

@media (max-width:600px){
  .card{padding:24px 18px 26px}
  .card h2{font-size:24px}
  .top{gap:12px}
  .top h1{display:none}
}
/* Narrow: the account buttons take a second row instead of running off the screen. */
@media (max-width:760px){
  .top{height:auto;min-height:56px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px;row-gap:10px}
  .who{flex-wrap:wrap;gap:8px}
  .who bdi{display:none}
}

/* The light version (22.10, Dubi): html[data-theme] from i18n.js. The top bar stays dark: customers'
   logos are made for a dark bar, and so is ours there. */
:root[data-theme="light"]{
  --navy:#F5F7FB; --set:#FFFFFF; --panel:#EEF2F8; --deep:#E8EDF5; --line:#D5DCE8; --line-2:#C3CCDC;
  --text:#0E1726; --soft:#3A4862; --muted:#5E6C86; --ok:#0F8A6C; --hold:#A86A00;
  color-scheme:light;
}
:root[data-theme="light"] .top{
  --navy:#0E1726; --set:#16233A; --panel:#1D2B44; --deep:#0A1220; --line:#2A3A57; --line-2:#34466A;
  --text:#FFFFFF; --soft:#D6DEEB; --muted:#93A3BF; color-scheme:dark; background:#0E1726; color:var(--text);
}
:root[data-theme="light"] main{background:var(--navy)}
:root[data-theme="light"] .input::placeholder{color:#8090AA}
:root[data-theme="light"] .choice:has(input:checked){background:#FDF1EC}
/* not the orange button (white words on a pale hover vanished), and not in the bar, which stays dark */
:root[data-theme="light"] .btn:not(.p):hover{background:#E6EBF3}
:root[data-theme="light"] .top .btn:not(.p):hover{background:#243656}
:root[data-theme="light"] .state.ready{background:rgba(14,23,38,.06)}
:root[data-theme="light"] .state.cancel{background:rgba(14,23,38,.05)}
:root[data-theme="light"] .err{color:#B42318}
:root[data-theme="light"] #toast{background:#0E1726;color:#fff}

/* A screen of topics (the admin panel, 24.10): a cube for each, a click opens that one alone. */
.topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.topic{display:flex;flex-direction:column;gap:6px;padding:20px 20px 22px;min-height:150px;background:var(--set);border:1px solid var(--line);color:inherit;text-decoration:none;transition:border-color .15s,transform .15s}
.topic:hover,.topic:focus-visible{border-color:var(--brand);transform:translateY(-2px)}
.topic b{font:900 34px/1.1 var(--display)}
.topic h3{margin:auto 0 0;font:700 18px var(--display)}
.topic span{color:var(--muted);font-size:13.5px;line-height:1.5}
.topic.due b{color:var(--hold)}
.topic.live b{color:var(--live)}
.topic-back{align-self:flex-start}
.topic-off{display:none!important}
@media (prefers-reduced-motion:reduce){.topic{transition:none}.topic:hover{transform:none}}