/* Flow Studios — shared tokens + components. FLOW brand: red, black, white (17 Oct 2026). */
:root {
  /* FLOW brand: red, black and white */
  --bg: #F4F4F4;            /* page */
  --bg-2: #FAFAFA;          /* top bars */
  --panel: #FFFFFF;         /* cards */
  --panel-2: #F2F2F2;       /* inputs, quiet tiles */
  --line: #E6E6E6;
  --line-2: #D9D9D9;
  --text: #0A0A0A;          /* black */
  --text-2: #555555;
  --text-3: #8A8A8A;
  --accent: #D71920;        /* FLOW red: buttons, selected tabs */
  --accent-2: #A80F16;      /* FLOW red-deep (hover) */
  --accent-soft: #FBE8E9;
  --accent-line: #F0B3B6;
  --red: #D71920;           /* live / on air / on a screen */
  --red-soft: #FBE8E9;
  --coral: #D71920;         /* leave, stop */
  --green: #10C66B;         /* open mic, sound */
  --green-soft: #E5F8EE;
  --amber: #F5B301;         /* hand up, armed output */
  --r: 14px;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.06);
  --ease: cubic-bezier(.2,.8,.2,1);
  color-scheme: light;
}
/* Night mode: same design, dark palette. Set on <html data-theme="dark"> (see theme script in each page). */
:root[data-theme="dark"] {
  /* matches flowoffering.com: ink, charcoal cards, grey text, FLOW red */
  --bg: #000000; --bg-2: #0E0E0E; --panel: #161616; --panel-2: #0E0E0E;
  --line: rgba(255,255,255,.10); --line-2: rgba(255,255,255,.16);
  --text: #FFFFFF; --text-2: #D9D9D9; --text-3: #8B8C90;
  --accent: #D71920; --accent-2: #A80F16; --accent-soft: #2A0C0E; --accent-line: #6B1418;
  --red: #D71920; --red-soft: #2A0C0E; --coral: #D71920;
  --green: #57E08A; --green-soft: #10291A;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.45);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 14px/1.45 "Montserrat", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .tile:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.i { flex: none; display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.btn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
  border-radius: 12px; background: var(--panel); border: 1px solid var(--line-2); color: var(--text);
  font-weight: 600; white-space: nowrap; transition: background .15s var(--ease), border-color .15s, box-shadow .15s;
}
.btn .i { color: var(--accent); }
.btn:hover { border-color: var(--accent-line); box-shadow: 0 2px 10px rgba(215,25,32,.10); }
.btn.red { background: var(--coral); border-color: var(--coral); color: #fff; }
.btn.red .i { color: #fff; }
.btn.red:hover { background: #ec2c34; }
.btn.violet { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.violet .i { color: #fff; }
.btn.violet:hover { background: var(--accent-2); }
.btn.ghost { background: var(--panel); }
a.btn { text-decoration: none; }
.icon-btn {
  width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 10px;
  color: var(--text-2); transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--accent-soft); color: var(--accent); }

.live-pill {
  display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px;
  border-radius: 8px; background: var(--red); color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: .06em;
}
.live-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .3; } }

/* signal bars (always over video, so white) */
.sig { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; }
.sig i { width: 3px; background: rgba(255,255,255,.35); border-radius: 1px; }
.sig i:nth-child(1) { height: 5px; } .sig i:nth-child(2) { height: 9px; } .sig i:nth-child(3) { height: 13px; }
.sig i.on { background: #fff; }
.sig[data-l="1"] i.on { background: var(--red); }
.sig[data-l="2"] i.on { background: var(--amber); }

/* video */
.vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0A0A0A; }
.feedembed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; object-fit: contain; z-index: 0; }
.has-video > .camoff { display: none !important; }
[hidden] { display: none !important; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; z-index: 100;
  background: var(--text); color: #fff; padding: 11px 18px; border-radius: 12px; font-weight: 600; font-size: 13.5px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25); transition: opacity .2s var(--ease), transform .2s var(--ease); pointer-events: none; max-width: calc(100vw - 32px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err { background: var(--coral); }
@media (prefers-reduced-motion: reduce) { .live-pill::before { animation: none; } }

/* day / night toggle */
.themebtn { position: relative; }
.themebtn .tm { position: absolute; right: -2px; bottom: -2px; font-size: 9px; font-weight: 800; background: var(--accent); color: #fff; border-radius: 5px; padding: 0 3px; line-height: 13px; }
/* Flow Studios lockup used in headers */
.brand-hd { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-hd img { height: 26px; width: auto; }
.brand-hd .sep, .brand .sep { width: 1px; align-self: stretch; background: var(--line-2); margin: 2px 2px; }
.fl-night { display: none !important; }
:root[data-theme="dark"] .fl-day { display: none !important; }
:root[data-theme="dark"] .fl-night { display: inline-block !important; }
.brand-hd span { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--text); white-space: nowrap; }
.brand-hd b { color: var(--accent); font-weight: 800; }