/* Church Live design system: "Studio".
   Bright and light-first, Apple-calm surfaces, one vivid blue for every action, a vivid live red that only
   ever means "on air", and one spectrum gradient (pink, violet, blue) used sparingly as the brand signature.
   Instrument Sans for every word and number; JetBrains Mono only for stream keys and code.
   Shared by the dashboard (index.html) and Administration (admin.html). site/theme.css is a copy. */

/* ---------- tokens ---------- */
:root{
  color-scheme:light;
  /* surfaces */
  --bg:#F5F5F7; --panel:#FFFFFF; --raised:#FFFFFF; --sunk:#EFEFF2; --hover:rgba(0,0,0,.04); --field:#F3F3F6;
  --line:#E7E7EC; --line-2:#D4D4DA; --card-line:rgba(0,0,0,.05);
  /* text */
  --ink:#1D1D1F; --ink2:#48484D; --ink3:#6E6E73;
  /* the one action color: vivid blue */
  --accent:#0A6CFF; --accent-fg:#0062E6; --accent-strong:#0A6CFF; --accent-soft:rgba(10,108,255,.10);
  --primary:#0A6CFF; --primary-ink:#FFFFFF; --select:rgba(10,108,255,.08);
  /* live: only ever means on air */
  --live:#FF2D55; --live-fg:#E01E48; --live-strong:#F21D4E; --live-soft:rgba(255,45,85,.11);
  --live-grad:linear-gradient(100deg,#FF2D55 0%,#FF375F 45%,#FF5A36 100%);
  /* the signature: brand mark and hero words, never used to carry meaning */
  --spectrum:linear-gradient(120deg,#FF2D55 0%,#BF5AF2 42%,#5E5CE6 70%,#0A84FF 100%);
  /* status, always paired with an icon and a word */
  --good:#1E8E3E; --good-fill:#34C759; --good-soft:rgba(52,199,89,.14);
  --warn:#B25E00; --warn-fill:#FF9F0A; --warn-soft:rgba(255,159,10,.16);
  --serious:#D9480F; --critical:#E5243B; --critical-soft:rgba(229,36,59,.10);
  /* depth: soft, layered, never heavy */
  --shadow:0 1px 2px rgba(0,0,0,.04),0 12px 32px -14px rgba(0,0,0,.16);
  --card-shadow:0 1px 1px rgba(0,0,0,.03),0 4px 14px -6px rgba(0,0,0,.07);
  --glass:rgba(255,255,255,.72);

  /* type */
  --font:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --fs-micro:12px; --fs-meta:13px; --fs-ui:15px; --fs-body:17px; --fs-h3:17px; --fs-h2:21px; --fs-h1:34px;

  /* shape and motion (Emil Kowalski's curves) */
  --r-ctl:12px; --r-panel:20px; --r-tag:999px; --r-pill:999px;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.77,0,.175,1); --ease-drawer:cubic-bezier(.32,.72,0,1);
  --d-press:160ms; --d-1:180ms; --d-2:240ms;

  /* names the app code already uses */
  --paper:var(--bg); --blue:var(--primary); --blue-ink:var(--primary-ink); --blue-soft:var(--select);
  --tally:var(--live); --tally-soft:var(--live-soft); --ready:var(--good); --ready-soft:var(--good-soft);
  --amber:var(--warn); --amber-soft:var(--warn-soft); --series:var(--accent);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#000000; --panel:#1C1C1E; --raised:#2C2C2E; --sunk:#2A2A2D; --hover:rgba(255,255,255,.06); --field:#2A2A2D;
  --line:#2E2E33; --line-2:#3E3E44; --card-line:rgba(255,255,255,.07);
  --ink:#F5F5F7; --ink2:#C7C7CC; --ink3:#98989F;
  --accent:#2E8BFF; --accent-fg:#5AA2FF; --accent-strong:#1A7CFF; --accent-soft:rgba(46,139,255,.18);
  --primary:#1A7CFF; --primary-ink:#FFFFFF; --select:rgba(46,139,255,.16);
  --live:#FF375F; --live-fg:#FF6482; --live-strong:#FF2D55; --live-soft:rgba(255,55,95,.18);
  --good:#32D74B; --good-fill:#30D158; --good-soft:rgba(48,209,88,.16);
  --warn:#FFB340; --warn-fill:#FF9F0A; --warn-soft:rgba(255,159,10,.18);
  --serious:#FF8A3D; --critical:#FF453A; --critical-soft:rgba(255,69,58,.16);
  --shadow:0 1px 2px rgba(0,0,0,.5),0 16px 36px -14px rgba(0,0,0,.8);
  --card-shadow:none;
  --glass:rgba(28,28,30,.72);
}
@media (prefers-color-scheme:dark){
  :root[data-theme="system"]{
    color-scheme:dark;
    --bg:#000000; --panel:#1C1C1E; --raised:#2C2C2E; --sunk:#2A2A2D; --hover:rgba(255,255,255,.06); --field:#2A2A2D;
    --line:#2E2E33; --line-2:#3E3E44; --card-line:rgba(255,255,255,.07);
    --ink:#F5F5F7; --ink2:#C7C7CC; --ink3:#98989F;
    --accent:#2E8BFF; --accent-fg:#5AA2FF; --accent-strong:#1A7CFF; --accent-soft:rgba(46,139,255,.18);
    --primary:#1A7CFF; --primary-ink:#FFFFFF; --select:rgba(46,139,255,.16);
    --live:#FF375F; --live-fg:#FF6482; --live-strong:#FF2D55; --live-soft:rgba(255,55,95,.18);
    --good:#32D74B; --good-fill:#30D158; --good-soft:rgba(48,209,88,.16);
    --warn:#FFB340; --warn-fill:#FF9F0A; --warn-soft:rgba(255,159,10,.18);
    --serious:#FF8A3D; --critical:#FF453A; --critical-soft:rgba(255,69,58,.16);
    --shadow:0 1px 2px rgba(0,0,0,.5),0 16px 36px -14px rgba(0,0,0,.8);
    --card-shadow:none;
    --glass:rgba(28,28,30,.72);
  }
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--fs-ui);line-height:1.5;letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.15;text-wrap:balance}
h3,h4{line-height:1.3}
h1{font-size:var(--fs-h1);letter-spacing:-.032em}
h2{font-size:var(--fs-h2);letter-spacing:-.02em}
h3{font-size:var(--fs-h3);letter-spacing:-.012em}
p{text-wrap:pretty}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
img,svg{max-width:100%}
a{color:inherit;text-underline-offset:3px}
::selection{background:color-mix(in srgb,var(--accent) 28%,transparent)}
input,textarea{caret-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
html{scrollbar-color:var(--line-2) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:10px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}
.num,time{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--ink3);font-size:var(--fs-meta)}
.small{font-size:var(--fs-meta)}
.err{color:var(--critical);font-size:var(--fs-meta);margin:12px 0 0;min-height:1em}
.ph{line-height:1;vertical-align:-.125em}

/* ---------- buttons: pills ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:8px 16px;border-radius:var(--r-pill);
  border:1px solid transparent;background:var(--sunk);color:var(--ink);font-size:var(--fs-ui);font-weight:500;line-height:1.3;
  cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:transform var(--d-press) var(--ease-out),background-color var(--d-1) ease,border-color var(--d-1) ease,color var(--d-1) ease,box-shadow var(--d-1) ease}
.btn:active:not([disabled]):not([aria-disabled="true"]){transform:scale(.97)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.42;cursor:not-allowed}
.btn .ph{font-size:17px}
.btn-primary{background:var(--primary);color:var(--primary-ink);font-weight:600;box-shadow:0 1px 2px rgba(10,108,255,.25),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-quiet{background:none;color:var(--accent-fg);min-height:0;padding:6px 10px}
.btn-danger{color:var(--critical)}
.btn-go{background:var(--live-grad);color:#fff;font-weight:600;font-size:16px;padding:10px 24px;min-height:44px;
  box-shadow:0 6px 18px -6px rgba(255,45,85,.55),inset 0 1px 0 rgba(255,255,255,.22)}
.btn-go[aria-disabled="true"]{background:var(--sunk);color:var(--ink3);box-shadow:none;opacity:1}
.btn-end{background:#fff;color:#D70F3A;font-weight:600;font-size:16px;padding:10px 22px;min-height:44px;box-shadow:0 4px 14px -6px rgba(0,0,0,.3)}
@media (hover:hover) and (pointer:fine){
  .btn:hover:not([disabled]):not(.btn-primary):not(.btn-go):not(.btn-end):not(.btn-quiet){background:color-mix(in srgb,var(--sunk) 92%,var(--ink))}
  .btn-primary:hover:not([disabled]){background:color-mix(in srgb,var(--primary) 90%,#000)}
  .btn-quiet:hover{background:var(--select)}
  .btn-go:hover:not([aria-disabled="true"]){filter:saturate(1.1) brightness(1.04)}
}
.link{background:none;border:0;padding:0;font:inherit;color:var(--accent-fg);text-decoration:none;cursor:pointer;text-align:left}
@media (hover:hover){.link:hover{text-decoration:underline}}

/* ---------- fields: soft fills, blue focus ring ---------- */
.in{display:block;margin-top:16px}
.in>span,.field>label,.gpick legend{display:block;font-size:var(--fs-meta);font-weight:500;color:var(--ink2);margin-bottom:6px}
.in input,.in select,.in textarea,input.grow,select.btn,.search,.title-in{width:100%;min-height:42px;border:1px solid transparent;background:var(--field);color:var(--ink);
  border-radius:var(--r-ctl);padding:10px 13px;font-size:16px;transition:border-color var(--d-1) ease,box-shadow var(--d-1) ease,background-color var(--d-1) ease}
@media (min-width:768px) and (pointer:fine){.in input,.in select,input.grow,select.btn,.search,.title-in{font-size:var(--fs-ui)}}
.in input:focus,.in select:focus,input.grow:focus,.search:focus,.title-in:focus{outline:none;background:var(--panel);border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.in input::placeholder,input.grow::placeholder,.search::placeholder,.title-in::placeholder{color:var(--ink3)}
.in input.mono{font-family:var(--mono)}
select.btn{width:auto;padding:8px 34px 8px 14px;font-weight:500;appearance:none;-webkit-appearance:none;border-radius:var(--r-pill);
  background-image:linear-gradient(45deg,transparent 50%,var(--ink3) 50%),linear-gradient(135deg,var(--ink3) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.in select,select.sel{width:100%;appearance:none;-webkit-appearance:none;padding-right:34px;border-radius:var(--r-ctl);
  background-image:linear-gradient(45deg,transparent 50%,var(--ink3) 50%),linear-gradient(135deg,var(--ink3) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px;background-repeat:no-repeat}
input[type=radio],input[type=checkbox]{accent-color:var(--accent)}

/* ---------- segmented control ---------- */
.billing,.seg-c{display:inline-flex;flex-wrap:wrap;gap:2px;background:var(--sunk);border-radius:12px;padding:3px;max-width:100%}
.billing button,.seg-c button{border:0;background:none;padding:6px 14px;border-radius:9px;font-weight:500;font-size:var(--fs-meta);cursor:pointer;color:var(--ink2);
  transition:background-color var(--d-1) ease,color var(--d-1) ease,box-shadow var(--d-1) ease}
.billing button[aria-pressed="true"],.seg-c button[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 1px rgba(0,0,0,.04)}
:root[data-theme="dark"] .billing button[aria-pressed="true"],:root[data-theme="dark"] .seg-c button[aria-pressed="true"]{background:#636366}
@media (prefers-color-scheme:dark){:root[data-theme="system"] .billing button[aria-pressed="true"],:root[data-theme="system"] .seg-c button[aria-pressed="true"]{background:#636366}}

/* ---------- tags, badges, switch ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:var(--r-tag);background:var(--sunk);color:var(--ink2);white-space:nowrap}
.pill.live{background:var(--live-soft);color:var(--live-fg)}
.pill.live::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--good-soft);color:var(--good)}
.pill.wait{background:var(--warn-soft);color:var(--warn)}
.pill.bad{background:var(--critical-soft);color:var(--critical)}
.badge{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:#fff;flex-shrink:0;font-size:17px}
.badge.youtube{background:linear-gradient(160deg,#FF3B3B,#E00000)}.badge.facebook{background:linear-gradient(160deg,#2D8CFF,#0866FF)}.badge.custom{background:linear-gradient(160deg,#9A9AA2,#6E6E76)}
.switch{position:relative;width:46px;height:28px;flex-shrink:0}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.switch span{position:absolute;inset:0;border-radius:999px;background:var(--line-2);transition:background-color var(--d-2) ease}
.switch span::after{content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.18),0 0 0 .5px rgba(0,0,0,.04);transition:transform var(--d-2) var(--ease-out)}
.switch input:checked+span{background:var(--good-fill)}
.switch input:checked+span::after{transform:translateX(18px)}
.switch input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;background:var(--panel);border:1px solid var(--card-line);border-radius:var(--r-panel);box-shadow:var(--card-shadow)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:var(--fs-ui)}
th,td{text-align:left;padding:13px 18px;border-top:1px solid var(--line);white-space:nowrap}
thead th{border-top:0;font-weight:500;color:var(--ink3);font-size:var(--fs-meta)}
td.num{font-variant-numeric:tabular-nums}

/* ---------- dialog: scales in on desktop, slides up as a sheet on phones ---------- */
dialog{border:0;border-radius:22px;padding:0;width:min(480px,calc(100vw - 32px));background:var(--panel);color:var(--ink);box-shadow:0 30px 80px -20px rgba(0,0,0,.35),0 0 0 1px var(--card-line);
  opacity:1;transform:none;transition:opacity var(--d-1) var(--ease-out),transform var(--d-2) var(--ease-out),overlay var(--d-2) allow-discrete,display var(--d-2) allow-discrete}
dialog[open]{@starting-style{opacity:0;transform:scale(.96)}}
dialog::backdrop{background:rgba(0,0,0,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:opacity var(--d-2) ease}
dialog[open]::backdrop{@starting-style{opacity:0}}
.dlg{padding:26px 26px 24px}
.dlg h2{font-size:22px}
.dlg-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:24px}
@media (max-width:639px){
  dialog{width:100%;max-width:100%;margin:auto 0 0;border-radius:24px 24px 0 0;max-height:92dvh;padding-bottom:env(safe-area-inset-bottom,0px);
    transition:transform 380ms var(--ease-drawer),overlay 380ms allow-discrete,display 380ms allow-discrete}
  dialog[open]{@starting-style{transform:translateY(100%);opacity:1}}
}

/* ---------- toast: a dark glass HUD in both themes ---------- */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,10px) scale(.98);background:rgba(28,28,30,.9);color:#fff;
  backdrop-filter:blur(14px) saturate(1.6);-webkit-backdrop-filter:blur(14px) saturate(1.6);box-shadow:0 12px 30px -10px rgba(0,0,0,.45);
  padding:11px 18px;border-radius:var(--r-pill);font-size:var(--fs-ui);font-weight:500;opacity:0;pointer-events:none;
  transition:opacity var(--d-2) var(--ease-out),transform var(--d-2) var(--ease-out);z-index:50;max-width:calc(100vw - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0) scale(1)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}
  .toast,.toast.show{transform:translate(-50%,0)}
}