:root {
  --bg: #000; --panel: #121214; --line: #26262b; --hover: #1e1e22; --menu: #0a0a0b;
  --ink: #f2f2f4; --accent: #f97316; --accent-ink: #fb923c; --accent-soft: rgba(249, 115, 22, .16); --bad: #f87171; --live: #ef4444;
  --font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}
html[data-theme=light] {
  --bg: #fff; --panel: #f4f4f6; --line: #e1e1e6; --hover: #e8e8ed; --menu: #fff;
  --ink: #111113; --accent: #ea580c; --accent-ink: #c2410c; --accent-soft: rgba(234, 88, 12, .12); --bad: #dc2626; --live: #dc2626;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; animation: none !important; transition: none !important; }   /* nothing on the board animates or eases */
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 14px/1.45 var(--font); overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
body { -webkit-user-select: none; user-select: none; }
input, [contenteditable=true], [contenteditable=plaintext-only] { -webkit-user-select: text; user-select: text; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible, [contenteditable]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; display: block; flex: none; }
[hidden] { display: none !important; }

/* layers, bottom to top: input surface, boxes and pictures, ink, everyone's live ink, my live stroke, cursors */
#c, #rv, #ov { position: fixed; inset: 0; display: block; pointer-events: none; }
#hit { position: fixed; inset: 0; touch-action: none; z-index: 1; }
#cards { position: fixed; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; z-index: 2; }
#cardsz { position: absolute; left: 0; top: 0; }
#c { z-index: 3; }
#rv { z-index: 4; }
#ov { z-index: 5; }
body[data-tool=eraser] #hit { cursor: cell; }
body[data-tool=select] #hit { cursor: default; }
body[data-tool=text] #hit { cursor: text; }
body[data-tool=line] #hit, body[data-tool=rect] #hit, body[data-tool=arrow] #hit, body[data-tool=ellipse] #hit, body[data-tool=tri] #hit, body[data-tool=diamond] #hit { cursor: crosshair; }
body[data-tool=hand] #hit, body.panning #hit { cursor: grab; }
body.grabbing #hit { cursor: grabbing; }

/* floating capsules and panels: flat, one hairline, no shadow, no blur */
.cap { position: fixed; z-index: 10; display: flex; align-items: center; gap: 2px; padding: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; }
.cap > button, #people .av { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; flex: none; }
.cap > button:hover { background: var(--hover); }
.cap > button[aria-pressed=true] { color: var(--accent-ink); background: var(--accent-soft); }
.cap > button:disabled { opacity: .35; cursor: default; background: none; }
.cap .sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; flex: none; }
.pop { position: fixed; z-index: 12; background: var(--menu); border: 1px solid var(--line); border-radius: 18px; corner-shape: squircle; }

/* boards, top left */
#boards { top: 12px; left: 12px; max-width: calc(100vw - 300px); }
#tabs { display: flex; gap: 2px; overflow-x: auto; min-width: 0; scrollbar-width: none; }
#tabs::-webkit-scrollbar { display: none; }
.tab { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; white-space: nowrap; font-weight: 500; flex: none; }
.tab:hover { background: var(--hover); }
.tab.cur { background: var(--hover); font-weight: 600; }
.tab .name[contenteditable=plaintext-only] { outline: 0; cursor: text; min-width: 2ch; }
.tab:has(.name[contenteditable=plaintext-only]) { outline: 1.5px solid var(--accent); outline-offset: -1.5px; }
.tab .dot { width: 7px; height: 7px; border-radius: 99px; flex: none; }
#tabmenu { display: grid; padding: 4px; min-width: 160px; }
#tabmenu button { height: 36px; padding: 0 12px; border-radius: 12px; text-align: left; }
#tabmenu button:hover { background: var(--hover); }
#tabmenu .bad { color: var(--bad); }
#tabmenu p { margin: 8px 10px 10px; font-weight: 500; }
#tabmenu .row { display: flex; gap: 4px; justify-content: flex-end; }
#tabmenu .row button { text-align: center; }
#tabmenu .row .bad { color: #fff; background: var(--live); }

/* people, theme and export, top right */
#right { top: 12px; right: 12px; }
#people { display: flex; gap: 2px; }
#people .av { font-size: 12px; font-weight: 600; color: #fff; background: var(--c); }
#people .av:not(.me):hover { outline: 2px solid var(--c); outline-offset: 1px; }
#net { padding: 0 10px; font-size: 13px; font-weight: 500; color: var(--accent-ink); white-space: nowrap; }
#update { height: 36px; padding: 0 14px; border-radius: 999px; font-weight: 600; color: #fff; background: var(--accent); flex: none; }

/* tools, bottom middle */
#island { bottom: 16px; left: 50%; transform: translateX(-50%); }
#island > button.arm { color: var(--bad); background: var(--hover); }
#mic span { display: none; }
#mic.live, #mic.busy { width: auto; padding: 0 14px 0 10px; gap: 6px; display: flex; font-weight: 600; }
#mic.live { color: #fff; background: var(--live); }
#mic.busy { color: var(--accent-ink); background: var(--accent-soft); }
#mic.live span, #mic.busy span { display: inline; }

/* colour and thickness, above the tools */
#pens { bottom: 70px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; padding: 4px; width: max-content; max-width: calc(100vw - 32px); flex-wrap: wrap; justify-content: center; }
#pens button, #pens .cc { width: 34px; height: 36px; border-radius: 12px; display: grid; place-items: center; }
#pens button:hover { background: var(--hover); }
#pens [aria-pressed=true] { color: var(--accent-ink); background: var(--accent-soft); }
#pens .psep { width: 1px; align-self: stretch; margin: 6px 4px; background: var(--line); }
#pens b { display: block; width: 18px; height: 18px; border-radius: 99px; }
#pens [aria-checked=true] b { outline: 2px solid var(--accent); outline-offset: 2px; }
#pens i { display: block; width: 20px; border-radius: 99px; height: var(--w); }
#pens [data-w][aria-checked=true] { background: var(--accent-soft); }
#pens .cc { position: relative; cursor: pointer; }
#pens .cc input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }

/* zoom, bottom left */
#zoom { left: 16px; bottom: 16px; }
#zoom button { width: auto; min-width: 36px; padding: 0 6px; font-weight: 600; font-size: 12px; font-variant-numeric: tabular-nums; }
#zoom [data-z=pct] { min-width: 52px; }
#zoom svg { width: 16px; height: 16px; }

#toast { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 13; padding: 8px 16px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font-weight: 500; max-width: min(560px, 90vw); }
#toast.err { color: var(--bad); }
#drop { position: fixed; inset: 12px; z-index: 50; display: grid; place-items: center; border: 2px dashed var(--accent); border-radius: 24px; corner-shape: squircle; pointer-events: none; font-size: 17px; font-weight: 600; color: var(--accent-ink); }

/* text boxes and pictures on the board */
.card { position: absolute; touch-action: none; pointer-events: none; color: var(--ink); }
body[data-tool=select] .card, body[data-tool=text] .card.text, .card.editing { pointer-events: auto; }
.card.text { padding: 4px; border-radius: 10px; cursor: move; }
.card.text .body { padding: 2px 6px; font-size: 18px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; }
.card.text.editing { outline: 1.5px solid var(--accent); background: var(--bg); }
.card.text .body.edit { outline: 0; min-height: 1.5em; }
.card a { pointer-events: auto; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.card.image img { display: block; width: 100%; cursor: grab; user-select: none; -webkit-user-drag: none; }
body.selmoving .card.sel, .card.moving { will-change: translate; }

/* everyone else: cursors, and an arrow on the edge for someone off screen */
#cursors, #arrows { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
#cursors { z-index: 6; }
#arrows { z-index: 7; }
.pcur { position: absolute; left: 0; top: 0; will-change: transform; }
.pcur svg { width: 20px; height: 20px; margin: -3px 0 0 -4px; }
.pcur span { position: absolute; left: 14px; top: 16px; padding: 1px 8px; border-radius: 999px; color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pcur.idle span { display: none; }
.pcur.idle { opacity: .5; }
.parrow { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.parrow i { position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; }
.parrow i::before { content: ""; position: absolute; right: -9px; top: 8px; border: 7px solid transparent; border-left: 10px solid var(--c); }
.parrow b { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 99px; display: grid; place-items: center; background: var(--c); color: #fff; font: 600 10px/1 var(--font); pointer-events: auto; cursor: pointer; }

/* join */
#join { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: var(--bg); }
.jform { width: min(340px, 100%); display: grid; gap: 10px; }
.jform h1 { margin: 0 0 8px; font-size: 28px; font-weight: 600; letter-spacing: -.02em; text-align: center; }
.jform input { height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: 15px var(--font); outline: 0; }
.jform input:focus { border-color: var(--accent); }
.jform .err:empty { display: none; }
.jform .err { margin: 0; font-size: 13px; color: var(--bad); text-align: center; }
.jform .go { height: 44px; border-radius: 999px; font-weight: 600; color: #fff; background: var(--accent); }