/* ============================================================
   m3llo design system v3.3 · graphite, for the web.

   Visual source of truth: mello/designs/design-system.html.
   Token values are copied from mello/client/ui/theme.slint, and
   tests/graphite-tokens.test.mjs fails when the two drift.

   Red is state. White is action. Everything else is graphite.
   Dark only.
   ============================================================ */

/* Self-hosted, Latin subset. Both faces are SIL OFL (see fonts/OFL-*.txt). */
@font-face {
  font-family: 'Oxanium';
  src: url('/assets/fonts/oxanium-var.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('/assets/fonts/barlow-300.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('/assets/fonts/barlow-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
/* There is no 500 file. Barlow 500 requests resolve to 600. */
@font-face {
  font-family: 'Barlow';
  src: url('/assets/fonts/barlow-600.woff2') format('woff2');
  font-weight: 500 700;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* ground */
  --bg-app: #121214;
  --bg-panel: #17171A;
  --bg-card: #1C1C20;
  --bg-card-hover: #212127;
  --bg-raised: #26262B;
  --bg-raised-hover: #2E2E34;
  --bg-inset: #0F0F11;
  --line: #2F2F35;
  --line-hi: #42424A;

  /* text */
  --text-hi: #F3F3F4;
  --text: #A2A2A8;
  --text-dim: #6F6F76;
  --text-faint: #4B4B52;

  /* action: white. One filled white button per surface. */
  --accent: #FFFFFF;
  --accent-press: #D2D2D6;
  --accent-dim: rgba(255, 255, 255, .10);
  --accent-line: rgba(255, 255, 255, .34);
  --on-accent: #121214;
  --accent-quiet: #8A8A92;

  /* state: the 3 in the mark, live, recording, unread */
  --live: #FF453A;
  --live-dim: rgba(255, 69, 58, .14);
  --on-live: #FFFFFF;

  /* commit: the button that makes something true wears the same red */
  --confirm: #FF453A;
  --confirm-press: #D93A30;
  --on-confirm: #FFFFFF;

  /* the person speaking, on their name. Nowhere else. */
  --speaking: #3FD07A;

  /* identity: people, crews, games. Never chrome. */
  --id-blue: #6E8FB8;
  --id-purple: #8E7FB0;
  --id-teal: #5FA396;
  --id-amber: #B39158;
  --id-pink: #B07793;
  --on-id: #0E0E10;

  /* over footage: washes, not palette */
  --over-media-soft: rgba(0, 0, 0, .267);
  --over-media: rgba(0, 0, 0, .667);
  --over-media-bar: rgba(0, 0, 0, .4);
  --over-media-line: rgba(255, 255, 255, .2);

  --scrim: rgba(0, 0, 0, .667);
  --selection: rgba(255, 255, 255, .24);
  --grad-stat: linear-gradient(96deg, #FFFFFF, #C9C9CF);
  --wave-off: #3A3A41;

  /* type */
  --display: 'Oxanium', sans-serif;
  --text-face: 'Barlow', 'Segoe UI', system-ui, sans-serif;

  /* shape */
  --cut: 10px;
  --notch: 16px;
  --notch-hero: 20px;
  --notch-sm: 12px;
  --r-sm: 5px;
  --r-pill: 999px;

  /* space */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { background: var(--bg-app); }
body {
  background: var(--bg-app);
  color: var(--text);
  font-family: var(--text-face);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--selection); color: var(--text-hi); }
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: -.03em;
  color: var(--text-hi);
  line-height: 1.08;
}
b, strong { font-weight: 600; color: var(--text-hi); }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

/* ── wordmark: the 3 is always red ─────────────────────────────── */
.mark {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text-hi);
}
.mark b { color: var(--live); font-weight: 700; }

/* ── type registers ───────────────────────────────────────────── */
.kick, .label {
  font-family: var(--text-face);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.label { letter-spacing: .16em; }
.data, .num { font-variant-numeric: tabular-nums; }
.data { font-weight: 600; font-size: 11px; color: var(--text-hi); }
.stat {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -.03em;
  background: var(--grad-stat);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}

/* ── card: keyline layer, fill inset by 1px, one corner cut ───── */
.card {
  position: relative;
  --n: var(--notch);
  --line-c: var(--line);
  --fill: var(--bg-card);
  clip-path: polygon(0 0, calc(100% - var(--n)) 0, 100% var(--n), 100% 100%, 0 100%);
}
.card.cut-tl { clip-path: polygon(var(--n) 0, 100% 0, 100% 100%, 0 100%, 0 var(--n)); }
.card.cut-br { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--n)), calc(100% - var(--n)) 100%, 0 100%); }
.card.cut-bl { clip-path: polygon(0 0, 100% 0, 100% 100%, var(--n) 100%, 0 calc(100% - var(--n))); }
.card::before { content: ""; position: absolute; inset: 0; background: var(--line-c); clip-path: inherit; }
.card::after { content: ""; position: absolute; inset: 1px; background: var(--fill); clip-path: inherit; }
.card > * { position: relative; z-index: 1; }
.card.accent { --line-c: var(--accent-line); }
.card.sm { --n: var(--notch-sm); }
.card.hero { --n: var(--notch-hero); }

/* ── buttons: cut top-left and bottom-right ───────────────────── */
.btn {
  font-family: var(--text-face);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  background: var(--bg-raised);
  color: var(--text-hi);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.btn:hover { background: var(--bg-raised-hover); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent); }
.btn-primary:active { background: var(--accent-press); }
.btn-confirm, .btn-danger { background: var(--confirm); color: var(--on-confirm); }
.btn-confirm:hover, .btn-danger:hover { background: var(--confirm); }
.btn-confirm:active, .btn-danger:active { background: var(--confirm-press); }
.btn-secondary { box-shadow: inset 0 0 0 1px var(--line-hi); }
.btn-outline { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.btn-outline:hover { background: var(--accent-dim); }
.btn-rec { background: transparent; color: var(--live); box-shadow: inset 0 0 0 1px rgba(255, 69, 58, .45); }
.btn-rec:hover { background: var(--live-dim); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--bg-raised); color: var(--text-faint); box-shadow: none; cursor: not-allowed; }
.btn .ic { width: 13px; height: 13px; }

/* icon button: a toggle whose state is visible */
.ib {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-raised);
  color: var(--text);
  border: 0; cursor: pointer;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.ib:hover { background: var(--bg-raised-hover); color: var(--text-hi); }
.ib.on { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.ib.leave { background: var(--live); color: var(--on-live); }
.ib .ic { width: 17px; height: 17px; }

/* ── field: a plain rectangle, no radius, no cut ──────────────── */
.field {
  font-family: var(--text-face);
  font-weight: 300;
  font-size: 14px;
  color: var(--text-hi);
  background: var(--bg-app);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 12px 14px;
  outline: 0;
}
.field::placeholder { color: var(--text-faint); }
.field:focus { border-color: var(--line-hi); }

/* ── badges and dots ──────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--text-face);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.4;
  padding: 4px 9px;
  background: var(--bg-raised);
  color: var(--text-dim);
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}
.badge-live { background: var(--live); color: var(--on-live); }
.badge-clip { background: var(--over-media); color: var(--text-hi); }
.badge-out { background: transparent; box-shadow: inset 0 0 0 1px var(--line-hi); }
.dot { width: 6px; height: 6px; border-radius: var(--r-pill); display: inline-block; flex: none; background: var(--text-dim); }
.dot-a { background: var(--accent); }
.dot-l { background: var(--live); }

/* ── people: octagon. Crews and games: two-corner tile. ───────── */
.av {
  --c: 7px;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px;
  font-family: var(--display);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: var(--on-id);
  text-transform: uppercase;
  background: var(--id-blue);
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
    calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}
.av.xs { width: 20px; height: 20px; --c: 5px; font-size: 7.5px; }
.av.sm { width: 24px; height: 24px; --c: 6px; font-size: 8.5px; }
.av.lg { width: 36px; height: 36px; --c: 8px; font-size: 11px; }
.tile {
  --c: 7px;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 9px;
  line-height: 1;
  color: var(--on-accent);
  text-transform: uppercase;
  background: var(--accent);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}
.id-blue { background: var(--id-blue); }
.id-purple { background: var(--id-purple); }
.id-teal { background: var(--id-teal); }
.id-amber { background: var(--id-amber); }
.id-pink { background: var(--id-pink); }

/* ── icons: the client's SVGs as masks, filled with currentColor ─ */
.ic {
  display: inline-block; flex: none;
  width: 16px; height: 16px;
  background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
}
.ic-broadcast { --i: url('/assets/icons/broadcast.svg'); }
.ic-calendar { --i: url('/assets/icons/calendar.svg'); }
.ic-chevron-down { --i: url('/assets/icons/chevron-down.svg'); }
.ic-clipboard-check { --i: url('/assets/icons/clipboard-check.svg'); }
.ic-download { --i: url('/assets/icons/download.svg'); }
.ic-external-link { --i: url('/assets/icons/external-link.svg'); }
.ic-headphone-off { --i: url('/assets/icons/headphone-off.svg'); }
.ic-headphones { --i: url('/assets/icons/headphones.svg'); }
.ic-lock { --i: url('/assets/icons/lock.svg'); }
.ic-message { --i: url('/assets/icons/message.svg'); }
.ic-mic { --i: url('/assets/icons/mic.svg'); }
.ic-mic-off { --i: url('/assets/icons/mic-off.svg'); }
.ic-monitor { --i: url('/assets/icons/monitor.svg'); }
.ic-pause { --i: url('/assets/icons/pause.svg'); }
.ic-phone-off { --i: url('/assets/icons/phone-off.svg'); }
.ic-play { --i: url('/assets/icons/play.svg'); }
.ic-scissors { --i: url('/assets/icons/scissors.svg'); }
.ic-speaker { --i: url('/assets/icons/speaker.svg'); }
.ic-user-plus { --i: url('/assets/icons/user-plus.svg'); }
.ic-volume { --i: url('/assets/icons/volume.svg'); }
.ic-x { --i: url('/assets/icons/x.svg'); }

/* content keeps its colour, slightly calmed */
.thumb img, .thumb video, img.thumb { filter: saturate(.85); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}