/* AI Brain: shared look. Cool studio grey, one dark "booth" band on the home screen, business colours as channel colours. */
:root {
  --bg: #eef0f4; --panel: #ffffff; --ink: #14161b; --muted: #5e6472; --line: #d9dde5; --chip: #e7eaf0;
  --booth: #1b1e26; --booth-ink: #f2f3f6; --booth-muted: #a3a9b6; --booth-line: #2c303b;
  --ok: #1f7a4a; --bad: #b3261e; --accent: #14161b; --accent-ink: #ffffff; --focus: #2b59c3;
  --r-s: 8px; --r-m: 12px; --r-l: 18px;
  --wide: 118%;
  --font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --rail: 84px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1116; --panel: #171a21; --ink: #e9ebf0; --muted: #9aa1ae; --line: #272b35; --chip: #20242d;
    --booth: #1d2233; --booth-ink: #e9ebf0; --booth-muted: #9aa1ae; --booth-line: #2c303b;
    --ok: #5cc98d; --bad: #ff8a80; --accent: #e9ebf0; --accent-ink: #0f1116; --focus: #7aa2e0;
    color-scheme: dark;
  }
}
/* business channel colours */
[data-c="dj-archie"] { --c: #b8860b; }
[data-c="school"] { --c: #e8452c; }
[data-c="centreforce-academy"] { --c: #2b59c3; }
[data-c="agency"] { --c: #7b3fbf; }
[data-c="archfest"] { --c: #1f8a5b; }
[data-c="sound-steps"] { --c: #0e8a8a; }
[data-c="group"] { --c: #5e6472; }
@media (prefers-color-scheme: dark) {
  [data-c="centreforce-academy"] { --c: #5b85e6; }
  [data-c="agency"] { --c: #a274e0; }
  [data-c="group"] { --c: #9aa1ae; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.55 var(--font); font-stretch: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }

/* headings use Archivo's wide cut */
.wide { font-stretch: var(--wide); letter-spacing: -.01em; }
h1, h2 { font-stretch: var(--wide); letter-spacing: -.015em; margin: 0; }

/* ---------- navigation: bottom bar on phones, left rail on bigger screens ---------- */
.tabbar { position: fixed; z-index: 20; display: flex; background: var(--panel); border-color: var(--line); }
.tabbar a { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none;
  color: var(--muted); font-size: 11.5px; font-weight: 600; padding: 8px 4px; border-radius: var(--r-m); }
.tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tabbar a[aria-current="page"] { color: var(--ink); }
.tabbar a[aria-current="page"] svg { stroke-width: 2.2; }
.tabbar .badge { position: absolute; top: 3px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #e8452c; color: #fff; font-size: 11px; line-height: 18px; text-align: center; font-weight: 700; }
@media (max-width: 760px) {
  .tabbar { left: 0; right: 0; bottom: 0; border-top: 1px solid var(--line); padding: 4px 8px max(6px, env(safe-area-inset-bottom)); }
  body.has-tabbar { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
}
@media (min-width: 761px) {
  .tabbar { top: 0; bottom: 0; left: 0; width: var(--rail); flex-direction: column; justify-content: flex-start; gap: 4px;
    border-right: 1px solid var(--line); padding: 16px 8px; }
  .tabbar a { flex: none; padding: 10px 4px; }
  .tabbar a:hover { background: var(--chip); color: var(--ink); }
  .tabbar .logo { display: block; width: 40px; height: 40px; border-radius: 10px; margin: 0 auto 14px; }
  body.has-tabbar { padding-left: var(--rail); }
}
@media (max-width: 760px) { .tabbar .logo { display: none; } }

/* ---------- page header ---------- */
.bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px;
  padding: max(14px, env(safe-area-inset-top)) 20px 14px; background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.bar h1 { font-size: 22px; font-weight: 750; line-height: 1.15; }
.bar p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.bar .sp { flex: 1; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); background: var(--panel);
  border-radius: var(--r-m); padding: 9px 14px; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.go { background: var(--c, var(--accent)); color: #fff; border-color: var(--c, var(--accent)); }
.btn:disabled { opacity: .45; cursor: default; }

/* ---------- filter pills ---------- */
.pills { display: flex; gap: 8px; overflow-x: auto; padding: 12px 20px 4px; scrollbar-width: none; }
.pills::-webkit-scrollbar { display: none; }
.pills button { flex: none; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--panel);
  border-radius: 999px; padding: 7px 14px; font-weight: 600; font-size: 14px; cursor: pointer; }
.pills button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pills .n { min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--chip); color: var(--ink); font-size: 12px; line-height: 20px; text-align: center; }
.pills button[aria-pressed="true"] .n { background: color-mix(in srgb, var(--bg) 22%, transparent); color: var(--bg); }

/* status light: lit in the business colour when something needs doing */
.led { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--c, var(--muted)); }
.led.off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.led.on { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }

/* ---------- content column ---------- */
.page { max-width: 860px; margin: 0 auto; padding: 14px 20px 32px; display: grid; gap: 12px; }
.tag { display: inline-flex; align-items: center; gap: 6px; background: var(--chip); border-radius: var(--r-s); padding: 3px 9px; font-size: 13px; }
.muted { color: var(--muted); }
.empty { text-align: center; color: var(--muted); padding: 56px 16px; }
.empty b { display: block; color: var(--ink); font-size: 18px; font-stretch: var(--wide); margin-bottom: 4px; }
.note { font-size: 13px; color: var(--muted); }
.err { color: var(--bad); font-size: 13.5px; }
.ok { color: var(--ok); font-size: 13.5px; font-weight: 600; }

input, textarea, select { border: 1px solid var(--line); border-radius: var(--r-m); padding: 10px 12px; background: var(--bg); font-size: 15px; }
textarea { line-height: 1.55; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }
@media (max-width: 760px) {
  input, textarea, select { font-size: 16px; }
  .bar { padding-left: 16px; padding-right: 16px; }
  .pills { padding-left: 16px; padding-right: 16px; }
  .page { padding: 12px 14px 28px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }