/* Church Live design system: "Control room".
   Dark-first graphite for a dim tech booth, tally red as the only accent (live, Go live, focus, charts),
   Geist for every word and Geist Mono only for time and measurements.
   Shared by the dashboard (index.html) and the owner page (owner.html). site/theme.css is a copy. */

/* ---------- tokens ---------- */
:root{
  color-scheme:dark;
  /* surfaces */
  --bg:#0F1115; --panel:#161920; --raised:#1C2028; --sunk:#1D2129; --hover:#1A1E25;
  --line:#262A33; --line-2:#343945;
  /* text */
  --ink:#ECEEF1; --ink2:#B4B9C2; --ink3:#8B919C;
  /* the one accent: tally red */
  --accent:#E5484D; --accent-fg:#F06A6D; --accent-strong:#D13A40; --accent-soft:rgba(229,72,77,.14);
  /* neutral primary action, so red keeps meaning "live" */
  --primary:#ECEEF1; --primary-ink:#0F1115; --select:rgba(236,238,241,.07);
  /* status, always paired with an icon and a word */
  --good:#3DD68C; --good-soft:rgba(61,214,140,.12); --warn:#F5B44A; --warn-soft:rgba(245,180,74,.12);
  --serious:#F0874F; --critical:#E5484D;
  /* depth: tinted, offset, soft */
  --shadow:0 1px 2px rgba(4,6,10,.4),0 10px 20px -10px rgba(4,6,10,.6);

  /* type */
  --font:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --fs-micro:12px; --fs-meta:13px; --fs-ui:14px; --fs-body:16px; --fs-h3:16px; --fs-h2:18px; --fs-h1:28px;

  /* shape and motion (Emil Kowalski's curves) */
  --r-ctl:10px; --r-panel:14px; --r-tag:6px;
  --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(--accent); --tally-soft:var(--accent-soft); --ready:var(--good); --ready-soft:var(--good-soft);
  --amber:var(--warn); --amber-soft:var(--warn-soft); --series:var(--accent);
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F4F5F7; --panel:#FFFFFF; --raised:#FFFFFF; --sunk:#EEF0F3; --hover:#F1F3F5;
  --line:#E1E4E9; --line-2:#CDD2D9;
  --ink:#12141A; --ink2:#444A55; --ink3:#626977;
  --accent:#D02B33; --accent-fg:#C8252D; --accent-strong:#C8252D; --accent-soft:rgba(208,43,51,.09);
  --primary:#12141A; --primary-ink:#FFFFFF; --select:rgba(18,20,26,.05);
  --good:#187A46; --good-soft:rgba(24,122,70,.1); --warn:#B97300; --warn-soft:rgba(185,115,0,.12);
  --serious:#C2541B; --critical:#D02B33;
  --shadow:0 1px 2px rgba(18,24,38,.06),0 10px 20px -10px rgba(18,24,38,.2);
}
@media (prefers-color-scheme:light){
  :root[data-theme="system"]{
    color-scheme:light;
    --bg:#F4F5F7; --panel:#FFFFFF; --raised:#FFFFFF; --sunk:#EEF0F3; --hover:#F1F3F5;
    --line:#E1E4E9; --line-2:#CDD2D9;
    --ink:#12141A; --ink2:#444A55; --ink3:#626977;
    --accent:#D02B33; --accent-fg:#C8252D; --accent-strong:#C8252D; --accent-soft:rgba(208,43,51,.09);
    --primary:#12141A; --primary-ink:#FFFFFF; --select:rgba(18,20,26,.05);
    --good:#187A46; --good-soft:rgba(24,122,70,.1); --warn:#B97300; --warn-soft:rgba(185,115,0,.12);
    --serious:#C2541B; --critical:#D02B33;
    --shadow:0 1px 2px rgba(18,24,38,.06),0 10px 20px -10px rgba(18,24,38,.2);
  }
}

/* ---------- 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;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;font-feature-settings:"ss01"}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.2;text-wrap:balance}
h3,h4{line-height:1.35}
h1{font-size:var(--fs-h1);letter-spacing:-.025em}
h2{font-size:var(--fs-h2);letter-spacing:-.012em}
h3{font-size:var(--fs-h3);letter-spacing:-.006em}
p{text-wrap:pretty}
button,input,select,textarea{font:inherit;color:inherit}
img,svg{max-width:100%}
a{color:inherit;text-underline-offset:3px}
::selection{background:var(--accent);color:#fff}
input,textarea{caret-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
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}
.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(--accent-fg);font-size:var(--fs-meta);margin:12px 0 0;min-height:1em}
.ph{line-height:1;vertical-align:-.125em}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:8px 14px;border-radius:var(--r-ctl);
  border:1px solid var(--line-2);background:var(--raised);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}
.btn:active:not([disabled]):not([aria-disabled="true"]){transform:scale(.97)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.btn .ph{font-size:16px}
.btn-primary{background:var(--primary);border-color:var(--primary);color:var(--primary-ink);font-weight:600}
.btn-quiet{background:none;border-color:transparent;color:var(--ink2);min-height:0;padding:6px 8px}
.btn-danger{color:var(--accent-fg)}
.btn-go{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff;font-weight:600;font-size:15px;padding:10px 22px;min-height:42px}
.btn-go[aria-disabled="true"]{background:transparent;color:var(--ink3);border-color:var(--line-2);opacity:1}
.btn-end{background:#fff;border-color:#fff;color:#B42A30;font-weight:600;font-size:15px;padding:10px 20px;min-height:42px}
@media (hover:hover) and (pointer:fine){
  .btn:hover:not([disabled]){border-color:var(--ink3)}
  .btn-primary:hover:not([disabled]){background:color-mix(in srgb,var(--primary) 88%,var(--bg));border-color:transparent}
  .btn-quiet:hover{color:var(--ink);background:var(--select);border-color:transparent}
  .btn-go:hover:not([aria-disabled="true"]){background:color-mix(in srgb,var(--accent-strong) 86%,#000);border-color:transparent}
}
.link{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px;cursor:pointer;text-align:left}
@media (hover:hover){.link:hover{text-decoration-color:currentColor}}

/* ---------- fields ---------- */
.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:40px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);
  border-radius:var(--r-ctl);padding:9px 12px;font-size:16px;transition:border-color var(--d-1) ease,box-shadow 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;border-color:var(--ink3);box-shadow:0 0 0 3px 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 32px 8px 12px;font-weight:500;appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink3) 50%),linear-gradient(135deg,var(--ink3) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.in select,select.sel{width:100%;appearance:none;-webkit-appearance:none;padding-right:32px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink3) 50%),linear-gradient(135deg,var(--ink3) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 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:1px solid var(--line);border-radius:var(--r-ctl);padding:3px;max-width:100%}
.billing button,.seg-c button{border:0;background:none;padding:6px 12px;border-radius:7px;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}
.billing button[aria-pressed="true"],.seg-c button[aria-pressed="true"]{background:var(--raised);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.25)}

/* ---------- tags, badges, switch ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:3px 8px;border-radius:var(--r-tag);background:var(--sunk);color:var(--ink2);white-space:nowrap}
.pill.live{background:var(--accent-soft);color:var(--accent-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(--accent-soft);color:var(--accent-fg)}
.badge{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:#fff;flex-shrink:0;font-size:17px}
.badge.youtube{background:#C4302B}.badge.facebook{background:#1D5FC4}.badge.custom{background:#4A505C}
.switch{position:relative;width:38px;height:22px;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-1) ease}
.switch span::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform var(--d-2) var(--ease-out)}
.switch input:checked+span{background:var(--accent-strong)}
.switch input:checked+span::after{transform:translateX(16px)}
.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(--line);border-radius:var(--r-panel)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:var(--fs-ui)}
th,td{text-align:left;padding:12px 16px;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:1px solid var(--line-2);border-radius:16px;padding:0;width:min(480px,calc(100vw - 32px));background:var(--panel);color:var(--ink);box-shadow:var(--shadow);
  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(.97)}}
dialog::backdrop{background:rgba(6,8,12,.6);transition:opacity var(--d-2) ease}
dialog[open]::backdrop{@starting-style{opacity:0}}
.dlg{padding:22px 24px 24px}
.dlg h2{font-size:20px}
.dlg-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}
@media (max-width:639px){
  dialog{width:100%;max-width:100%;margin:auto 0 0;border-radius:18px 18px 0 0;border-bottom: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 ---------- */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,8px);background:var(--raised);color:var(--ink);
  border:1px solid var(--line-2);box-shadow:var(--shadow);padding:10px 16px;border-radius:var(--r-ctl);font-size:var(--fs-ui);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)}

@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)}
}