/* h1v3MIND/ed — the office. No external fonts, frameworks or CDNs: every font is bundled (fonts-OFL.txt). :root
   holds Paper and ink's tokens, the base every theme builds on. theme.js sets two attributes on <html> (16-bit by
   default; Settings → Appearance mixes them): data-theme picks the colours and how the rooms are drawn, data-type
   picks the fonts. Their blocks are at the end of this file. */
@font-face { font-family: "Instrument Serif"; src: url(/static/instrument-serif-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url(/static/instrument-serif-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(/static/instrument-sans-var.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url(/static/dm-mono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url(/static/dm-mono-500.woff2) format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url(/static/space-grotesk-var.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(/static/jetbrains-mono-var.woff2) format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(/static/ibm-plex-mono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(/static/ibm-plex-mono-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(/static/ibm-plex-mono-600.woff2) format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url(/static/ibm-plex-sans-var.woff2) format("woff2"); font-weight: 100 700; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url(/static/fredoka-var.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Nunito"; src: url(/static/nunito-var.woff2) format("woff2"); font-weight: 200 1000; font-display: swap; }
@font-face { font-family: "Pixelify Sans"; src: url(/static/pixelify-sans-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Pixelify Sans"; src: url(/static/pixelify-sans-600.woff2) format("woff2"); font-weight: 500 800; font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url(/static/silkscreen-400.woff2) format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Sora"; src: url(/static/sora-var.woff2) format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url(/static/space-mono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url(/static/space-mono-700.woff2) format("woff2"); font-weight: 500 800; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url(/static/chakra-petch-500.woff2) format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url(/static/chakra-petch-600.woff2) format("woff2"); font-weight: 600 800; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(/static/barlow-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(/static/barlow-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(/static/barlow-600.woff2) format("woff2"); font-weight: 600 800; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url(/static/plus-jakarta-sans-var.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Fragment Mono"; src: url(/static/fragment-mono-400.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Lexend"; src: url(/static/lexend-var.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Caveat"; src: url(/static/caveat-var.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Manrope"; src: url(/static/manrope-var.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Red Hat Mono"; src: url(/static/red-hat-mono-var.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }

/* Paper and ink: cream paper, ink lines, a vermilion stamp, and highlighter for what glows */
:root {
  color-scheme: light;
  --bg: #f1efe8; --panel: #f7f5ef; --panel-2: #ebe8df; --raised: #fffefb; --hover: #e6e3da;
  --line: #c9c5b8; --line-soft: #dedad0; --line-strong: #8f8a7c; --line-hover: #6b6658;
  --text: #1d2433; --muted: #4c5363; --subtle: #646a78;
  --gold: #b33a26; --gold-2: #8f2d1c; --gold-bg: #f6e3dc; --gold-line: #e0ad9f; --on-gold: #ffffff;
  --green: #2a7350; --green-bg: #e3f2e9; --green-line: #a6d0b8;
  --red: #b2412e; --red-bg: #fbe7e2; --red-line: #e2a698; --red-text: #8f2f1f;
  --blue: #2f6c8f; --blue-bg: #e2eef5; --blue-line: #a9c8da;
  --purple: #6b4fa0; --purple-bg: #efe9f9; --purple-line: #c9bbe4; --purple-text: #4f3a7a;
  --radius: 6px; --shadow: 0 18px 50px #1d24332e;
  --field: #fffefb; --field-2: #fffefb; --sunken: #ebe8df; --bar: #ebe8df; --drawer: #f7f5ef; --dialog: #fbfaf6;
  --row-hover: #ebe8df; --code-bg: #e9e5da; --code-text: #1d2433; --tag-bg: #e6e3da; --tag-text: #3d4448;
  --avatar-bg: #e6e3da; --avatar-line: #b9b4a6; --avatar-text: #1d2433; --avatar-agent: #f3ead2;
  --nav-text: #1d2433; --nav-active: #fff0a8; --topline: #1d2433; --mention-bg: #fff3b066; --mention-tag: #fff0a8;
  --unread-bg: #fbf2dc; --flash: #ffe45c88; --gold-bg-2: #fbf3e1; --gold-grad: #fbf1dc;
  --drop-bg: #f2eedf; --toast-bg: #1d2433; --toast-text: #f1efe8; --backdrop: #1d243366; --backdrop-light: #1d243344;
  --overlay: #f1efe8e8; --knob: #ffffff; --shade: #0000001f; --floor-ink-bg: #f4f1e8;
  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --code: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --title-font: 400 28px/1.1 var(--display);
  --brand-font: 400 25px/1 var(--display);
  /* the office */
  --floor-bg: #f1efe8;
  --floor-grid: linear-gradient(#1d24330d 1px, transparent 1px), linear-gradient(90deg, #1d24330d 1px, transparent 1px);
  --floor-grid-size: 24px 24px;
  --room-bg: #f7f5ef; --room-line: #1d2433; --room-wall: 3px; --room-radius: 6px; --room-shadow: 6px 6px 0 #1d243318;
  --room-name: #1d2433; --room-name-font: 400 21px/1.1 var(--display); --room-sub: #646a78;
  --glow: #ffe45c; --glow-ring: 0 0 0 5px #ffe45cb8, 0 0 22px 6px #ffd6004a;
  --thing-bg: #efe6d2; --thing-line: #1d2433; --thing-line-w: 2px; --thing-radius: 3px;
  --tag: #1d2433; --tag-sub: #4c5363; --tag-font: 500 10.5px/1.3 var(--mono); --tag-case: uppercase; --tag-track: .12em;
  --desk: #e9dcc3; --desk-line: #1d2433;
  --agent-bg: #fffefb; --agent-ring: 2.5px; --agent-font: 400 19px/1 var(--display); --agent-tag-bg: #1d2433; --agent-tag-text: #f7f5ef;
  --bubble-bg: #fffefb; --bubble-text: #1d2433; --bubble-line: #1d2433; --bubble-font: 12.5px/1.38 var(--sans); --bubble-radius: 18px;
  --who-font: 500 9.5px var(--mono); --speech-text: #15181f; --speech-radius: 6px;
  font-family: var(--sans);
}

/* photos stay on a dark stage in every theme */
.lightbox { --text: #edf0e9; --muted: #a3afb3; --bg: #0c1115; --line-soft: #222e36; color: var(--text); }

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
html[data-density="compact"] body { font-size: 14px; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
button:disabled { opacity: .5; cursor: default; }
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }
[hidden] { display: none !important; }
::selection { background: color-mix(in srgb, var(--glow) 55%, transparent); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
h1, h2, h3, h4 { margin: 0; font-family: var(--mono); font-weight: 600; letter-spacing: -.02em; }
p { margin: 0; }
svg.i { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.subtle { color: var(--subtle); }
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }

/* Night shift's terminal effects (device setting, off with reduced motion) */
html[data-effects="on"][data-theme="night"] body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1000;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #dbe6dd07 3px 4px);
}
html[data-effects="on"][data-theme="night"] .brand-name, html[data-effects="on"][data-theme="night"] .page-title h1 { text-shadow: 0 0 14px #f5b45040; }

/* form controls */
input, textarea, select {
  width: 100%; background: var(--field); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 9px 11px; outline: none; transition: border-color .12s, box-shadow .12s;
}
input:focus, textarea:focus, select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 12%, transparent); }
input::placeholder, textarea::placeholder { color: var(--subtle); }
textarea { resize: vertical; min-height: 40px; line-height: 1.5; }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; accent-color: var(--gold); margin: 0; }
label { display: block; font-size: 13px; color: var(--muted); }
label > input, label > textarea, label > select { margin-top: 6px; color: var(--text); }
.field { margin-top: 14px; }
.check { display: flex; align-items: center; gap: 9px; color: var(--text); margin-top: 12px; }
.hint { font-size: 12px; color: var(--subtle); margin-top: 6px; line-height: 1.5; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.error { margin-top: 12px; padding: 9px 12px; border: 1px solid var(--red-line); background: var(--red-bg); color: var(--red-text); border-radius: var(--radius); font-size: 13px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 8px 14px;
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--raised); font-size: 13px; font-weight: 600;
  white-space: nowrap; transition: background .12s, border-color .12s;
}
.btn:hover:not(:disabled) { background: var(--hover); border-color: var(--line-strong); }
.btn.primary { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.btn.primary:hover:not(:disabled) { background: var(--gold-2); border-color: var(--gold-2); }
.btn.danger { background: var(--red-bg); border-color: var(--red-line); color: var(--red); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover:not(:disabled) { color: var(--text); background: var(--hover); }
.btn.small { min-height: 30px; padding: 5px 10px; font-size: 12px; }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius); color: var(--muted); }
.icon-btn:hover { background: var(--hover); color: var(--text); }
.link { color: var(--gold); font-size: 13px; }
.link:hover { color: var(--gold-2); text-decoration: underline; }
.kbd { font-family: var(--mono); font-size: 11px; padding: 1px 5px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); background: var(--panel-2); }

/* badges, dots, avatars */
.badge { min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--gold); color: var(--on-gold); font: 600 11px/19px var(--mono); text-align: center; }
.badge.quiet { background: var(--hover); color: var(--muted); }
.badge.alert { background: var(--red); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--subtle); flex-shrink: 0; }
.dot.on { background: var(--green); box-shadow: 0 0 0 2px #93d9b322; }
.dot.working { background: var(--gold); }
.dot.blocked { background: var(--red); }
.dot.review { background: var(--purple); }
.dot.listening { position: relative; background: var(--green); }
/* the halo fades in and out with opacity, which the compositor runs without repainting the page */
.dot.listening::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: #93d9b31f; opacity: 0; animation: pulse 2.4s ease-in-out infinite; pointer-events: none; }
@keyframes pulse { 50% { opacity: 1; } }
.chip { display: inline-flex; align-items: center; gap: 5px; font: 11px/1 var(--mono); padding: 4px 7px; border-radius: 4px; border: 1px solid var(--line); color: var(--muted); background: var(--panel-2); white-space: nowrap; }
.chip.ok { color: var(--green); border-color: var(--green-line); background: var(--green-bg); }
.chip.warn { color: var(--gold-2); border-color: var(--gold-line); background: var(--gold-bg); }
.chip.bad { color: var(--red); border-color: var(--red-line); background: var(--red-bg); }
.chip.agent { color: var(--gold); border-color: var(--gold-line); background: var(--gold-bg); }
.avatar { position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; flex-shrink: 0;
  background: var(--avatar-bg); border: 1px solid var(--avatar-line); color: var(--avatar-text); font: 600 12px var(--mono); overflow: visible; }
.avatar.agent { background: var(--avatar-agent); border-color: var(--gold-line); color: var(--gold-2); }
.avatar.sm { width: 24px; height: 24px; font-size: 10px; border-radius: 5px; }
.avatar.lg { width: 56px; height: 56px; font-size: 20px; border-radius: 10px; }
.avatar .dot { position: absolute; right: -3px; bottom: -3px; border: 2px solid var(--panel); width: 11px; height: 11px; }

/* loading + auth */
.loading { min-height: 100vh; min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 16px; font: 13px var(--mono); color: var(--muted); }
.loading img { width: 84px; height: 84px; border-radius: 10px; animation: breathe 2s ease-in-out infinite; }
.loading span { max-width: min(36em, calc(100vw - 40px)); text-align: center; }
@keyframes breathe { 50% { opacity: .55; } }
.auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth-story { position: relative; background: var(--panel); border-right: 1px solid var(--line); padding: 44px 9%; display: flex; flex-direction: column; gap: 28px; overflow: hidden; }
.auth-story::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 60%, color-mix(in srgb, var(--gold) 6%, transparent), transparent 65%); pointer-events: none; }
.auth-story .logo-art { width: min(100%, 300px); align-self: center; border-radius: 8px; display: block; position: relative; }
.auth-story h1 { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.12; font-weight: 500; letter-spacing: -.05em; position: relative; }
.auth-story p { color: var(--muted); max-width: 460px; position: relative; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; position: relative; }
.tags span { font: 11px var(--mono); color: var(--gold-2); background: var(--gold-bg); border: 1px solid var(--gold-line); padding: 4px 8px; border-radius: 4px; }
.auth-panel { display: grid; place-items: center; padding: 40px 24px; background: var(--sunken); }
.auth-form { width: 100%; max-width: 360px; }
.auth-form h2 { font-size: 26px; margin: 8px 0 6px; }
.auth-form .btn { width: 100%; margin-top: 22px; min-height: 44px; }
.auth-foot { margin-top: 26px; font: 11px var(--mono); color: var(--subtle); }

/* app shell: a bar across the top, a menu down the left and the crew down the right (narrow until a mouse rests on
   them, or pinned open, each on its own), the page between, and the log as a drawer */
.shell { --rail-l: 64px; --rail-r: 64px; --top: 62px; position: relative; display: grid; grid-template-columns: var(--rail-l) minmax(0, 1fr) var(--rail-r);
  grid-template-rows: var(--top) minmax(0, 1fr); height: 100vh; height: 100dvh; overflow: hidden; background: var(--bg); }
.shell.nav-pinned { --rail-l: 240px; }
.shell.crew-pinned { --rail-r: 220px; }
.topbar { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; gap: 16px; padding: 10px 16px; min-width: 0; z-index: 20; }
.brand { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex: 0 1 280px; color: var(--text); text-align: left; }
.brand-mark { align-self: center; width: 18px; height: 18px; flex: none; border-radius: 5px; background: var(--gold); box-shadow: 0 0 0 3px var(--bg), 0 0 0 4.5px var(--gold); }
.brand-name { font: var(--brand-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-where { font: 12px var(--mono); color: var(--subtle); white-space: nowrap; }
.ask-slot { flex: 1 1 560px; max-width: 640px; min-width: 0; position: relative; }
.ask-wrap { position: relative; }
.askbar { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 5px 0 7px; border-radius: 22px; background: var(--field); box-shadow: inset 0 0 0 1.5px var(--line-strong), 0 6px 18px #0000000d; width: 100%; }
.askbar:focus-within { box-shadow: inset 0 0 0 2px var(--gold), 0 6px 18px #0000001a; }
.askbar input { flex: 1; min-width: 0; border: 0; background: none; padding: 0; box-shadow: none !important; font-size: 14.5px; }
.askbar .avatar { border-radius: 50%; }
.ask-who { font: 500 9.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--subtle); padding: 3px 7px; border-radius: 999px; background: var(--panel-2); }
.ask-send { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: var(--on-gold); }
.askbar.no-lead { justify-content: center; gap: 8px; color: var(--muted); font-weight: 600; font-size: 13.5px; }
.askbar.no-lead:hover { color: var(--text); }
.peek { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 45; max-height: min(60vh, 460px); overflow: auto; padding: 12px 14px;
  background: var(--dialog); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.peek-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; font: 600 12px var(--sans); color: var(--muted); }
.peek-list { display: flex; flex-direction: column; gap: 8px; }
.peek-msg { align-self: flex-start; max-width: 88%; padding: 8px 11px; border-radius: 12px 12px 12px 4px; background: var(--panel-2); font-size: 13.5px; }
.peek-msg.mine { align-self: flex-end; border-radius: 12px 12px 4px 12px; background: var(--gold-bg); }
.peek-msg small { display: block; font: 11px var(--mono); color: var(--subtle); margin-bottom: 2px; }
.peek-msg .body { white-space: pre-wrap; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.top-btn { height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 13px; border-radius: 17px; border: 1px solid var(--line); color: var(--muted); font: 600 12.5px var(--sans); white-space: nowrap; }
.top-btn:hover { color: var(--text); border-color: var(--line-strong); }
.top-btn.needs-btn.on { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.top-btn[aria-pressed="true"] { background: var(--hover); border-color: var(--line-strong); color: var(--text); }
.top-btn svg.i { width: 16px; height: 16px; }
/* the update button: first in the top bar while there's an update to install, and hard to miss */
.top-btn.update-btn { background: var(--gold); border-color: var(--gold); color: var(--on-gold); font-weight: 700; animation: update-ring 2.4s ease-out infinite; }
.top-btn.update-btn:hover { color: var(--on-gold); filter: brightness(1.08); }
.top-btn.update-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.top-btn.update-btn.busy { animation: none; opacity: 1; cursor: progress; }
.top-btn.update-btn.busy svg.i { animation: spin 1.1s linear infinite; }
@keyframes update-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 9px transparent; } }
@media (prefers-reduced-motion: reduce) { .top-btn.update-btn, .top-btn.update-btn.busy svg.i { animation: none; } }
.topbar .me { border-radius: 50%; padding: 0; }
.topbar .me .avatar { border-radius: 50%; width: 34px; height: 34px; }
.conn { font: 11px var(--mono); padding: 4px 8px; border-radius: 4px; border: 1px solid var(--green-line); color: var(--green); background: var(--green-bg); white-space: nowrap; }
.conn.off { color: var(--red); border-color: var(--red-line); background: var(--red-bg); }

/* the side menus: icons until a mouse rests on them (app.js adds .wide), or pinned open from their top button */
.rail { position: absolute; top: var(--top); bottom: 0; z-index: 25; width: 64px; padding: 4px 0 12px; transition: width .2s ease; }
.rail-left { left: 0; }
.rail-right { right: 0; }
.rail > *, .rail-scroll > * { min-width: 0; }
.rail::before { content: ""; position: absolute; inset: 0 8px 12px; z-index: -1; border-radius: 16px; background: var(--panel); border: 1px solid var(--line-soft); box-shadow: 0 10px 30px #0000000f; }
.rail { display: flex; flex-direction: column; overflow: hidden; }
/* the list scrolls, not the rail: the panel (.rail::before) is drawn on the rail and has to stay put. The side padding is the
   list's own, so the active item's marker and a folded rail's badges can still reach into it */
.rail-scroll { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 2px; padding: 0 8px; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
.rail-scroll::-webkit-scrollbar { display: none; }
.rail-left, .rail-right { padding-top: 10px; }
.rail.wide { width: 240px; }
.rail-right.wide { width: 220px; }
.rail.hover-open::before { box-shadow: 0 18px 50px #00000026; }
.rail-item { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 38px; padding: 0 12px; border-radius: 10px; color: var(--nav-text); white-space: nowrap; text-align: left; flex: none; }
.rail-item:hover { background: var(--hover); }
.rail-item.on { background: var(--nav-active); color: var(--text); font-weight: 600; }
.rail-item.drop-on { background: var(--gold-bg); box-shadow: inset 0 0 0 2px var(--gold); }
.rail .lbl { opacity: 0; transition: opacity .15s; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rail.wide .lbl { opacity: 1; }
.rail-item .lbl { flex: 1; }
.rail-item .lbl.ws { font: var(--brand-font); font-size: 19px; }
.rail-item .badge { flex: none; }
.rail:not(.wide) .rail-item .badge { position: absolute; left: 26px; top: 2px; transform: scale(.85); }
.rail-item.sub { min-height: 32px; font-size: 13.5px; }
.rail:not(.wide) .rail-item.sub { display: none; }
.room-dot { width: 18px; text-align: center; font: 600 13px var(--mono); color: var(--subtle); flex: none; }
.room-dot.busy { color: var(--gold); }
.rail-head { display: flex; align-items: center; gap: 12px; min-height: 28px; padding: 6px 12px 2px; font: 600 10px var(--mono); letter-spacing: .14em; color: var(--subtle); white-space: nowrap; flex: none; }
.rail-head .lbl { flex: 1; }
.rail-head button.lbl { flex: none; color: var(--subtle); }
.rail-head button.lbl:hover { color: var(--gold); }
.rail:not(.wide) .rail-head .lbl { display: none; }
.rail-head.pin { width: 100%; min-height: 38px; padding: 0 12px 0 15px; border-radius: 10px; text-align: left; cursor: pointer; }
.rail-head.pin:hover { background: var(--hover); color: var(--text); }
.rail-head.pin[aria-pressed="true"] svg.i { color: var(--gold); }
.rail-sep { height: 1px; margin: 6px 10px; background: var(--line-soft); flex: none; }
.rail .grow { flex: 1; }
.rail-item.has-update::after, #settings-btn.has-update::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); position: absolute; margin-left: 12px; margin-top: -14px; }
.crew-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 5px 6px; border-radius: 10px; text-align: left; flex: none; cursor: grab; }
.crew-row:hover { background: var(--hover); }
.crew-row .avatar { width: 34px; height: 34px; border-radius: 50%; }
.crew-row .lbl { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.crew-row strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; }
.crew-row small { font-size: 11.5px; color: var(--subtle); overflow: hidden; text-overflow: ellipsis; }
.crew-row.working small { color: var(--gold); }
.crew-row.failing small, .crew-row.away small { color: var(--red); }
.lead-tag { margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--gold-bg); color: var(--gold-2); font: 500 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; vertical-align: 1px; }
.rail .hint { padding: 6px 12px; }

/* the page between the rails */
.main { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 0 6px; }
.pagebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 18px 10px; }
.crumb { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 11px 0 7px; border-radius: 999px; border: 1.5px solid var(--line-strong); font: 600 12.5px var(--sans); color: var(--text); }
.crumb:hover { border-color: var(--text); text-decoration: none; }
.crumb svg.i { width: 15px; height: 15px; }
.page-title { display: flex; align-items: baseline; gap: 12px; min-width: 0; flex: 1 1 260px; }
.page-title h1, .floor-head h1, .roles-head h1 { font: var(--title-font); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-title .sym { color: var(--gold); margin-right: 3px; }
.page-desc { font-size: 13px; color: var(--muted); }
.page-title .page-desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-actions { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tab { font: 600 12.5px var(--sans); padding: 6px 11px; border-radius: 999px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.tab:hover { color: var(--text); background: var(--hover); }
.tab.active { color: var(--text); background: var(--hover); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.page { flex: 1; min-height: 0; overflow: auto; padding: 4px 18px 32px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.floor-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 8px 0 14px; }
.floor-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; padding: 12px 16px; border: 1.5px dashed var(--gold-line); border-radius: 12px; background: var(--gold-bg-2); color: var(--text); font-size: 14px; }
.room-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; margin-top: 18px; align-items: start; }
.card-box { min-width: 0; background: var(--raised); border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); padding: 14px 16px; }
.card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 10px; }
.card-head h2 { font: var(--title-font); font-size: 21px; }
.card-box p.pre { white-space: pre-wrap; font-size: 13.5px; color: var(--muted); }
.card-box .actions { margin-top: 10px; }
.who-list { display: flex; flex-direction: column; gap: 4px; }
.who-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 6px; border-radius: 8px; text-align: left; }
.who-row:hover { background: var(--hover); }
.who-row .grow { min-width: 0; flex: 1; }
.who-row strong { display: block; font-size: 13.5px; }
.who-row small { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
div.who-row:hover { background: none; }
.hive-group .drawer-sub { margin-top: 4px; }
.hive-group + .hive-group { margin-top: 10px; }
.mini-floor { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.mini-room { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 9px; border: 1.5px solid var(--line-strong); border-radius: 6px; text-align: left; min-width: 0; }
.mini-room strong { font: 500 12px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.mini-room small { font: 11px var(--mono); color: var(--subtle); }
.mini-room:hover { border-color: var(--text); }
.mini-room.here { background: var(--nav-active); border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.mini-room.here small { color: var(--gold-2); }
.mini-task .status { flex: none; }
.mini-task.big { padding: 10px; }
.mini-task small { color: var(--subtle); font: 11px var(--mono); white-space: nowrap; }
.thought-line { margin-top: 8px; font: italic 14px/1.4 var(--display); color: var(--muted); }
.ledger { display: flex; flex-direction: column; }
.ledger-row { display: grid; grid-template-columns: 54px minmax(60px, 90px) 58px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--line-soft); font: 12.5px var(--mono); text-align: left; }
.ledger-row:hover { background: var(--row-hover); }
.ledger-row .when, .ledger-row .scope { color: var(--subtle); }
.ledger-row .by { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; }
.ledger-row .what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger-row .mark { justify-self: start; padding: 0 6px; border-radius: 3px; font-size: 10.5px; border: 1.5px solid var(--text); }
.ledger-row .mark.in { background: var(--text); color: var(--bg); }
.ledger-row .mark.out { border-color: var(--gold); color: var(--gold); }
.ledger-row .mark.gone { border-style: dashed; color: var(--subtle); border-color: var(--subtle); }
.ledger-row.in:first-child .what { background: linear-gradient(transparent 55%, #ffe45cc0 55%); }

/* the log: a drawer you open, read only */
.logdrawer { position: fixed; top: calc(var(--top) + 2px); right: 10px; bottom: 10px; width: min(400px, calc(100vw - 20px)); z-index: 30; display: flex; flex-direction: column;
  background: var(--drawer); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; animation: slide-in .18s ease-out; }
@keyframes slide-in { from { transform: translateX(24px); opacity: 0; } }
.log-head { display: flex; align-items: center; gap: 10px; padding: 12px 10px 8px 16px; }
.log-head h2 { font: var(--title-font); font-size: 24px; flex: 1; }
.log-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; }
.chip-btn { padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font: 600 12px var(--sans); }
.chip-btn.on { background: var(--text); border-color: var(--text); color: var(--bg); }
.log-list { flex: 1; min-height: 0; border-top: 1px solid var(--line-soft); }
.log-row { padding: 9px 16px 8px; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
.log-row:hover { background: var(--row-hover); }
.log-row.event { color: var(--muted); font-size: 12.5px; }
.log-row.flash { animation: flash 2s ease-out; }
.log-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font: 12px var(--mono); color: var(--subtle); margin-bottom: 2px; }
.log-meta strong { font: 600 13px var(--sans); color: var(--text); }
.log-meta .to { color: var(--gold); }
.log-meta .hive-tag { padding: 0 6px; border-radius: 999px; border: 1px dashed var(--line-strong); font-size: 10.5px; line-height: 16px; }
.log-row .body { white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.log-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; opacity: 0; transition: opacity .12s; }
.log-row:hover .log-acts, .log-row:focus-within .log-acts { opacity: 1; }
.log-acts .icon-btn { width: 28px; height: 28px; }
.log-foot { padding: 10px 16px 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
@media (hover: none) { .log-acts { opacity: 1; } }

/* your office: who you're talking to on the left, the conversation on the right */
.office-page.talking { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: 16px; padding: 4px 18px 16px; overflow: hidden; }
.office-page.drop-on { box-shadow: inset 0 0 0 3px var(--gold); border-radius: 16px; }
.office-side { min-height: 0; display: flex; flex-direction: column; gap: 12px; padding-bottom: 12px; }
.office-side .office-host { flex: none; }
.visitor { display: flex; align-items: center; gap: 12px; }
.visitor .avatar { border-radius: 50%; }
.visitor h2 { font: var(--title-font); font-size: 24px; }
.visitor small { font-size: 12.5px; color: var(--muted); }
.side-toggle { display: none; }
.office-chat { display: flex; flex-direction: column; min-height: 0; min-width: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--raised); overflow: hidden; }
.office-chat .chat-view { flex: 1; min-height: 0; }

/* crew and roles, and the welcome that asks for them */
.roles-page { padding: 8px 18px 40px; }
.roles-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 6px 0 18px; }
.roles-page.welcome .roles-head h1 { font-size: 34px; }
.steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; display: flex; align-items: center; gap: 7px; padding: 5px 12px 5px 6px; border-radius: 999px; background: var(--panel-2); font: 600 12.5px var(--sans); color: var(--muted); }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--line); color: var(--text); font: 700 11px var(--sans); }
.steps li.on { background: var(--gold-bg); color: var(--gold-2); }
.steps li.on::before { background: var(--gold); color: var(--on-gold); }
.roles-grid { display: grid; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); gap: 24px; align-items: start; }
.roles-grid h2 { font: var(--title-font); font-size: 22px; margin-bottom: 4px; }
.roles-grid .page-desc { margin-bottom: 12px; max-width: 60ch; }
.elect-list { display: flex; flex-direction: column; gap: 8px; }
.elect { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--raised); text-align: left; }
.elect:hover:not(:disabled) { border-color: var(--line-strong); }
.elect.on { border-color: var(--gold); background: var(--gold-bg-2); box-shadow: inset 0 0 0 1px var(--gold); }
.elect .avatar { border-radius: 50%; width: 44px; height: 44px; }
.elect .grow { min-width: 0; flex: 1; }
.elect strong { display: block; font-size: 14.5px; }
.elect small { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.elect-chip { flex: none; padding: 5px 11px; border-radius: 999px; border: 1.5px solid var(--line-strong); font: 600 12px var(--sans); }
.elect.on .elect-chip { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.role-rows { display: flex; flex-direction: column; gap: 8px; }
.crew-role { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 14px; align-items: start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-soft); background: var(--raised); }
.crew-role.lead { border-color: var(--gold-line); background: var(--gold-bg-2); }
.role-who { display: flex; align-items: center; gap: 8px; min-width: 0; padding-top: 5px; }
.role-who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* an agent's roles: a chip for each one it can hold, then what each chosen role tells it */
.role-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.role-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.role-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: 999px; border: 1.5px solid var(--line); background: transparent; color: var(--muted); font: 600 12px var(--sans); }
.role-chip:hover:not(:disabled):not(.fixed) { border-color: var(--line-strong); color: var(--text); }
.role-chip.on, :root[data-theme] .role-chip.on { border-color: var(--gold); background: var(--gold-bg); color: var(--text); }
.role-chip.add { border-style: dashed; }
.role-chip .i { width: 12px; height: 12px; }
.role-chip:disabled:not(.on) { opacity: .45; }
.role-list { display: flex; flex-direction: column; gap: 6px; }
.role-item { font-size: 13px; line-height: 1.5; color: var(--muted); }
.role-item strong { color: var(--text); font-weight: 600; }
.role-item.custom { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px dashed var(--line-strong); border-radius: 10px; }
.role-custom-head { display: flex; align-items: center; gap: 6px; }
.role-custom-head input { flex: 1; min-width: 0; margin: 0; padding: 7px 9px; }
.role-item textarea { margin: 0; font-size: 13px; }
.roles-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-top: 4px; }
.roles-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.btn.big { min-height: 44px; padding: 10px 20px; font-size: 14px; border-radius: 22px; }

/* menus from the top bar */
.menu-who { padding: 8px 12px 10px; border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; }
.menu-who strong { display: block; font-size: 14px; }
.menu-who small { display: block; font-size: 12px; color: var(--muted); }
.needs-menu .need { display: flex; gap: 8px; align-items: flex-start; white-space: normal; text-align: left; }
.needs-menu .need .chip { flex: none; }

/* Settings → Appearance: the ten looks, each with a swatch of its own colours */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-top: 10px; }
.theme-pick { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--raised); text-align: left; }
.theme-pick:hover { border-color: var(--line-strong); }
.theme-pick.on { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.theme-swatch { position: relative; flex: none; width: 46px; height: 40px; border-radius: 7px; background: var(--s0); box-shadow: inset 0 0 0 1px #00000026; overflow: hidden; }
.theme-swatch i { position: absolute; display: block; }
.theme-swatch i:nth-child(1) { left: 6px; top: 6px; width: 20px; height: 15px; border-radius: 3px; background: var(--s1); }
.theme-swatch i:nth-child(2) { right: 6px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--s2); }
.theme-swatch i:nth-child(3) { left: 6px; right: 6px; bottom: 6px; height: 7px; border-radius: 2px; background: var(--s3); }
.theme-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.theme-text strong { font-size: 13.5px; }
.theme-text small { font-size: 11.5px; color: var(--muted); }
.mix-title { margin-top: 22px; }
.mix-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 6px 14px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.mix-head { display: flex; flex-direction: column; padding-top: 5px; line-height: 1.3; }
.mix-head strong { font-size: 13.5px; }
.mix-head small { font-size: 11.5px; color: var(--subtle); }
.mix-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.mix-opt { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--raised); color: var(--muted); font-size: 13px; }
.mix-opt:hover { color: var(--text); border-color: var(--line-strong); }
.mix-opt.on { color: var(--text); border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); background: var(--gold-bg-2); }
.mix-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-top: 12px; }
.mix-foot .hint { margin: 0; }
@media (max-width: 560px) { .mix-row { grid-template-columns: minmax(0, 1fr); } .mix-head { flex-direction: row; gap: 8px; align-items: baseline; padding-top: 0; } }

/* messages */
.messages { flex: 1; min-height: 0; padding: 14px 24px 26px; overscroll-behavior: contain; }
.day { display: flex; align-items: center; gap: 12px; margin: 18px 0 8px; font: 11px var(--mono); color: var(--subtle); letter-spacing: .05em; }
.day::before, .day::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
.msg { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 0 12px; padding: 5px 8px; margin: 0 -8px; border-radius: 6px; position: relative; }
.msg:hover { background: var(--row-hover); }
.msg.cont { padding-top: 1px; padding-bottom: 1px; }
.msg.cont .avatar { visibility: hidden; height: 0; }
.msg.mine .who { color: var(--gold-2); }
.msg.mention { background: var(--mention-bg); box-shadow: inset 2px 0 0 var(--gold); }
.msg.urgent { box-shadow: inset 2px 0 0 var(--red); }
.msg.flash { animation: flash 1.6s ease-out; }
@keyframes flash { from { background: var(--flash); } }
.msg.pending { opacity: .55; }
.msg.failed .body { color: var(--red); }
.meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.who { font-weight: 600; font-size: 14px; }
.when { font: 11px var(--mono); color: var(--subtle); }
.seq { font: 11px var(--mono); color: var(--subtle); opacity: 0; }
.msg:hover .seq { opacity: 1; }
.msg-main { min-width: 0; }
.body { font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap; min-width: 0; }
.body code { font: .88em var(--mono); background: var(--code-bg); border: 1px solid var(--line-soft); padding: 1px 5px; border-radius: 4px; }
.body pre { position: relative; max-width: 100%; white-space: pre; overflow-wrap: normal; word-break: normal; overflow-x: auto; background: var(--sunken); border: 1px solid var(--line-soft); border-radius: 6px; padding: 10px 12px; margin: 6px 0; font: 13px/1.5 var(--mono); }
.body pre .copy { position: absolute; top: 6px; right: 6px; font: 11px var(--mono); color: var(--muted); padding: 2px 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel-2); opacity: 0; }
.body pre:hover .copy { opacity: 1; }
.body .mention-tag { color: var(--gold-2); background: var(--mention-tag); padding: 0 3px; border-radius: 3px; }
.body .mention-tag.to-me { color: var(--on-gold); background: var(--gold); }
.body blockquote { margin: 4px 0; padding-left: 10px; border-left: 3px solid var(--line); color: var(--muted); }
.reply-ref { display: block; min-width: 0; font-size: 12px; color: var(--muted); margin: 2px 0 2px; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.reply-ref:hover { color: var(--text); }
.reply-ref::before { content: "↩"; color: var(--gold); margin-right: 6px; }
.msg-actions { position: absolute; top: -10px; right: 8px; display: none; gap: 2px; background: var(--raised); border: 1px solid var(--line); border-radius: 6px; padding: 2px; }
.msg:hover .msg-actions { display: flex; }
.msg-actions button { font: 11px var(--mono); color: var(--muted); padding: 3px 7px; border-radius: 4px; }
.msg-actions button:hover { background: var(--hover); color: var(--text); }
.older { display: block; margin: 8px auto; }
.empty { display: grid; place-items: center; text-align: center; padding: 60px 20px; color: var(--muted); gap: 10px; }
.empty h3 { color: var(--text); font-size: 17px; }
.empty img { width: 70px; opacity: .8; border-radius: 8px; }

.composer-wrap { position: relative; padding: 6px 24px 16px; }
.reply-bar { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); padding: 6px 10px; border: 1px solid var(--line); border-bottom: 0; border-radius: 6px 6px 0 0; background: var(--panel-2); }
.reply-bar span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.composer { position: relative; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--field-2); padding: 10px 12px 8px; }
.reply-bar + .composer { border-top-left-radius: 0; border-top-right-radius: 0; }
.composer:focus-within { border-color: var(--gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 10%, transparent); }
.composer textarea { border: 0; background: transparent; padding: 2px 0; resize: none; max-height: 40vh; min-height: 24px; box-shadow: none; font-size: 15px; }
.composer-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.composer-row .hint { margin: 0; flex: 1; font-family: var(--mono); font-size: 11px; }
.composer-row label.check { margin: 0; font-size: 12px; color: var(--muted); }
.readonly-note { text-align: center; font-size: 13px; color: var(--muted); padding: 12px; border: 1px dashed var(--line); border-radius: 7px; }
.popup { position: absolute; bottom: calc(100% + 6px); left: 8px; min-width: 240px; max-height: 260px; background: var(--raised); border: 1px solid var(--line); border-radius: 7px; box-shadow: var(--shadow); padding: 4px; z-index: 30; }
.popup button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 5px; text-align: left; font-size: 13px; }
.popup button.active, .popup button:hover { background: var(--hover); }

/* board */
.board-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 14px 24px; border-bottom: 1px solid var(--line-soft); }
.board-bar input[type="search"] { max-width: 240px; }
.board-bar select { width: auto; min-width: 150px; }
.board-bar .stats { margin-left: auto; font: 12px var(--mono); color: var(--muted); }
.board { flex: 1; min-height: 0; display: flex; gap: 12px; padding: 14px 24px 20px; overflow-x: auto; align-items: flex-start; }
.col { width: 280px; min-width: 280px; max-height: 100%; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line-soft); border-radius: 8px; border-top: 2px solid var(--line); }
.col[data-status="ready"] { border-top-color: #4f7b62; }
.col[data-status="running"] { border-top-color: var(--gold); }
.col[data-status="blocked"] { border-top-color: #a8665a; }
.col[data-status="review"] { border-top-color: #8d79ad; }
.col[data-status="done"] { border-top-color: #5f8f73; }
.col.drop { border-color: var(--gold); background: var(--drop-bg); }
.col-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; font: 12px var(--mono); border-bottom: 1px solid var(--line-soft); }
.col-body { padding: 8px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 60px; }
.card { background: var(--raised); border: 1px solid var(--line); border-radius: 7px; padding: 10px 11px; cursor: pointer; text-align: left; width: 100%; transition: border-color .12s; }
.card:hover { border-color: var(--line-hover); }
.card.dragging { opacity: .4; }
.card-top { display: flex; align-items: center; gap: 6px; font: 11px var(--mono); color: var(--subtle); }
.card h4 { font: 600 14px/1.4 var(--sans); letter-spacing: 0; margin: 5px 0 7px; color: var(--text); }
.card-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.prio { font: 10px var(--mono); text-transform: uppercase; padding: 2px 5px; border-radius: 3px; background: var(--tag-bg); color: var(--tag-text); }
.prio.high { background: var(--gold-bg); color: var(--gold-2); }
.prio.urgent { background: var(--red-bg); color: var(--red-text); }
.label { font: 11px var(--mono); padding: 1px 6px; border-radius: 3px; border: 1px solid var(--line-strong); color: var(--tag-text); }
.status { display: inline-flex; align-items: center; gap: 6px; font: 11px var(--mono); padding: 3px 8px; border-radius: 4px; border: 1px solid var(--line); }
.status.running { color: var(--gold-2); border-color: var(--gold-line); background: var(--gold-bg); }
.status.blocked { color: var(--red); border-color: var(--red-line); background: var(--red-bg); }
.status.review { color: var(--purple-text); border-color: var(--purple-line); background: var(--purple-bg); }
.status.done, .status.ready { color: var(--green); border-color: var(--green-line); background: var(--green-bg); }

/* activity / inbox / search lists */
.list { flex: 1; min-height: 0; padding: 10px 24px 24px; }
.row { display: flex; gap: 12px; padding: 11px 10px; border-bottom: 1px solid var(--line-soft); border-radius: 6px; cursor: pointer; align-items: flex-start; }
.row:hover { background: var(--row-hover); }
.row.unread { background: var(--unread-bg); box-shadow: inset 2px 0 0 var(--gold); }
.row .grow { flex: 1; min-width: 0; }
.row .title { font-size: 14px; }
.row .excerpt { font-size: 13px; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: pre-wrap; }
.row .when { white-space: nowrap; }
.kind-ico { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-2); color: var(--gold); flex-shrink: 0; }
.list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 0 8px; }

/* people in lists */
.person { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 6px; cursor: pointer; text-align: left; width: 100%; }
.person:hover { background: var(--hover); }
.person .grow { flex: 1; min-width: 0; }
.person strong { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person span { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* drawers + dialogs */
.backdrop { position: fixed; inset: 0; background: var(--backdrop); z-index: 50; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); background: var(--drawer); border-left: 1px solid var(--line-strong); box-shadow: var(--shadow); z-index: 60; display: flex; flex-direction: column; }
.drawer.wide { width: min(820px, 100vw); }
.drawer.narrow { width: min(400px, 100vw); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.drawer-head h2 { font-size: 18px; }
.drawer-body { flex: 1; min-height: 0; padding: 18px 20px 30px; overscroll-behavior: contain; }
.drawer-tabs { display: flex; gap: 2px; padding: 0 20px; border-bottom: 1px solid var(--line-soft); overflow-x: auto; }
dialog { background: var(--dialog); color: var(--text); border: 1px solid var(--line-strong); border-radius: 9px; box-shadow: var(--shadow); padding: 0; width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overscroll-behavior: contain; }
dialog.wide { width: min(760px, calc(100vw - 24px)); }
dialog::backdrop { background: var(--backdrop); }
.dlg-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 0; }
.dlg-head h2 { font-size: 18px; }
.dlg-body { padding: 6px 20px 20px; }
.dlg-foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 20px; }
.dlg-foot .hint { margin: 0 auto 0 0; }
.section { padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.section:last-child { border-bottom: 0; }
.section > h3 { font-size: 14px; margin-bottom: 4px; }
.section > p { font-size: 13px; color: var(--muted); }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; font-size: 13px; margin-top: 10px; }
.kv dt { font: 12px var(--mono); color: var(--subtle); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.code { position: relative; font: 12.5px/1.55 var(--mono); background: var(--sunken); border: 1px solid var(--line-soft); border-radius: 6px; padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 8px; color: var(--code-text); }
.code .copy { position: absolute; top: 6px; right: 6px; }
.comment { padding: 10px 0; border-top: 1px solid var(--line-soft); }
.comment .meta { margin-bottom: 2px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.agent-card { border: 1px solid var(--line); background: var(--panel-2); border-radius: 8px; padding: 14px; margin-top: 12px; }
.agent-card .top { display: flex; align-items: center; gap: 12px; }
.agent-card .top .grow { flex: 1; min-width: 0; }
@media (max-width: 560px) { .agent-card .top { flex-wrap: wrap; } .agent-card .top .seg { width: 100%; } .agent-card .top .seg button { flex: 1; } }
.agent-card .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.agent-card .err { font: 12px var(--mono); color: var(--red); margin-top: 8px; }
.member-line { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.member-line .grow { flex: 1; min-width: 0; }
.member-line small { display: block; color: var(--muted); font-size: 12px; }
.member-pick { max-height: 280px; overflow-y: auto; border: 1px solid var(--line); border-radius: 6px; margin-top: 6px; }
.member-pick .opt { display: grid; grid-template-columns: 20px 1fr auto auto; gap: 8px; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.member-pick .opt:last-child { border-bottom: 0; }
.member-pick .opt input[type="text"] { padding: 3px 7px; font-size: 12px; width: 120px; }
.member-pick .opt label { display: flex; gap: 5px; align-items: center; font-size: 12px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg button { font: 12px var(--mono); padding: 6px 10px; color: var(--muted); border-right: 1px solid var(--line); }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--gold-bg); color: var(--gold-2); }

/* switcher */
.switcher { position: fixed; top: 12vh; left: 50%; transform: translateX(-50%); width: min(600px, calc(100vw - 24px)); background: var(--raised); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: var(--shadow); z-index: 70; overflow: hidden; }
.switcher input { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 14px 16px; font-size: 16px; background: transparent; box-shadow: none; }
.switcher .results { max-height: 50vh; padding: 6px; }
.switcher .results button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; text-align: left; }
.switcher .results button.active { background: var(--hover); }
.switcher .results .kindtag { margin-left: auto; font: 11px var(--mono); color: var(--subtle); }

/* toasts */
.toasts { position: fixed; right: 16px; top: 76px; display: flex; flex-direction: column; gap: 8px; z-index: 96; max-width: min(380px, calc(100vw - 32px)); }
.toast { background: var(--toast-bg); border: 1px solid var(--green-line); color: var(--toast-text); padding: 10px 14px; border-radius: 7px; font-size: 13px; box-shadow: var(--shadow); cursor: pointer; animation: rise .18s ease-out; }
.toast.error { background: var(--red-bg); border-color: var(--red-line); color: var(--red-text); }
.toast.notice { background: var(--gold-bg); border-color: var(--gold-line); color: var(--gold-2); }
.toast.hosted-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; cursor: default; }
.toast.hosted-note .grow { flex: 1 1 14em; }
/* not connected to the workspace (app.js markOffline): nothing on the page reads as live until it reconnects. Who's
   online, who's working and who's typing go neutral in the side menus, the crew panel, the floor and the strip, and
   on phones the note stays in view while a menu or the crew panel is open. */
:root[data-conn="off"] .dot { background: var(--subtle); box-shadow: none; }
:root[data-conn="off"] .dot.listening::after, :root[data-conn="off"] .ag.working .ag-body::after { display: none; }
:root[data-conn="off"] #typing-slot { visibility: hidden; }
:root[data-conn="off"] .ag .ag-gem, :root[data-conn="off"] .t-wall .cell { background: var(--subtle); }
:root[data-conn="off"] :is(.crew-row.working, .crew-row.failing, .crew-row.away) small, :root[data-conn="off"] .room-dot.busy { color: var(--subtle); }
:root[data-conn="off"] :is(.thing.live, .thing.fresh) .art::after { animation: none; opacity: 0; }
:root[data-conn="off"] .strip-stat b { opacity: .45; }
.shell.nav-open ~ .toasts .conn-note, .shell.crew-open ~ .toasts .conn-note { visibility: visible; }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } }

/* ---------------------------------------------------------------- motion
   Animations run when the device setting is on (the default) and the system
   doesn't ask for reduced motion; html[data-motion="off"] switches them off. */
@keyframes fade { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.96) translateY(-4px); } }
@keyframes dlg-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes dlg-out { to { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes drawer-in { from { transform: translateX(40px); opacity: 0; } }
@keyframes drawer-out { to { transform: translateX(40px); opacity: 0; } }
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes sheet-out { to { transform: translateY(100%); } }
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(16px); } }
@keyframes jump-in { from { opacity: 0; transform: translate(-50%, 8px); } }
@keyframes pop { 0% { transform: scale(.4); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes blink { 0%, 80%, 100% { opacity: .25; transform: none; } 40% { opacity: 1; transform: translateY(-2px); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 33%, transparent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
@keyframes spin { to { transform: rotate(360deg); } }
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after, html[data-motion="off"] ::backdrop { animation: none !important; transition: none !important; }

dialog[open] { animation: dlg-in .17s cubic-bezier(.2, .8, .2, 1); }
dialog[open]::backdrop { animation: fade .17s ease-out; }
dialog.out { animation: dlg-out .14s ease-in forwards; }
dialog.out::backdrop { animation: fade-out .14s ease-in forwards; }
.backdrop { animation: fade .18s ease-out; }
.drawer { animation: drawer-in .22s cubic-bezier(.2, .8, .2, 1); }
.backdrop.out { animation: fade-out .18s ease-in forwards; pointer-events: none; }
.drawer.out { animation: drawer-out .18s ease-in forwards; pointer-events: none; }
.switcher { animation: pop-in .14s ease-out; }
.toast.out { animation: toast-out .18s ease-in forwards; }
.msg.new, .wf-line.new { animation: msg-in .24s ease-out; }
.drawer-title { font: 600 21px/1.35 var(--sans); letter-spacing: -.01em; margin: 2px 0 6px; }
.danger-text { color: var(--red) !important; }
.btn.ghost.danger-text:hover:not(:disabled) { background: var(--red-bg); }
.confirm-text { white-space: pre-line; color: var(--muted); overflow-wrap: anywhere; }

/* skeleton rows while something loads */
.skeleton { padding: 14px 0; }
.sk-row { display: flex; gap: 12px; padding: 8px 0; }
.sk-av { width: 32px; height: 32px; border-radius: 6px; flex-shrink: 0; }
.sk-lines { flex: 1; display: flex; flex-direction: column; gap: 9px; padding-top: 3px; }
.sk-lines i { display: block; height: 10px; border-radius: 4px; }
.sk-av, .sk-lines i { background: linear-gradient(90deg, var(--panel-2) 0, var(--hover) 40%, var(--panel-2) 80%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }

/* ------------------------------------------------------------ chat extras */
.chat-view { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-wrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.jump-latest { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 6; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 999px; background: var(--raised); border: 1px solid var(--line); box-shadow: 0 6px 24px var(--shade);
  font: 12px var(--mono); color: var(--text); animation: jump-in .18s ease-out; }
.jump-latest:hover { border-color: var(--line-strong); background: var(--hover); }
.jump-latest svg { width: 15px; height: 15px; }
.jump-latest.has-new { background: var(--gold); border-color: var(--gold); color: var(--on-gold); font-weight: 600; }
.new-divider { display: flex; align-items: center; gap: 10px; margin: 12px 0 6px; font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.new-divider::before { content: ""; flex: 1; height: 1px; background: #a8665a; }
.gutter-time { display: block; width: 48px; margin-left: -12px; padding-top: 4px; text-align: right; font: 10px var(--mono); color: var(--subtle); white-space: nowrap; opacity: 0; }
.msg:hover .gutter-time { opacity: 1; }
.msg.deleted .avatar { opacity: .5; }
.deleted-note { font-style: italic; color: var(--subtle); font-size: 14px; }
.edited { font: 11px var(--mono); color: var(--subtle); white-space: nowrap; }
.msg.editing { background: var(--panel-2); }
.msg.pressing { background: var(--hover); transition: background .35s; }
.msg-actions { align-items: center; box-shadow: 0 4px 16px var(--shade); }
.msg-actions button { display: inline-grid; place-items: center; min-width: 28px; height: 28px; }
.msg-actions button svg { width: 16px; height: 16px; }
.msg-actions .quick { font-size: 15px; padding: 0 4px; }
.msg-actions .quick:hover { transform: scale(1.15); }

/* reactions */
.reactions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.reaction { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--muted); font-size: 14px; line-height: 1; transition: border-color .12s, background .12s; }
.reaction:disabled { opacity: 1; cursor: default; }
.reaction:hover:not(:disabled) { border-color: var(--line-hover); background: var(--hover); }
.reaction .count { font: 600 11px var(--mono); }
.reaction.mine { border-color: var(--gold-line); background: var(--gold-bg); color: var(--gold-2); }
.reaction.pop .emo { display: inline-block; animation: pop .32s ease-out; }
.reaction.add { opacity: 0; padding: 0 7px; color: var(--subtle); }
.reaction.add svg { width: 15px; height: 15px; }
.msg:hover .reaction.add, .reaction.add:focus-visible { opacity: 1; }

/* attachments */
.files { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 6px; max-width: 100%; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, 168px); gap: 6px; max-width: min(520px, 100%); width: 100%; }
.thumbs.single { grid-template-columns: minmax(0, auto); width: auto; }
.thumb { display: block; padding: 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--line-soft); background: var(--sunken); cursor: zoom-in; }
.thumb img { display: block; width: 100%; height: 124px; object-fit: cover; transition: transform .25s ease, opacity .2s; }
.thumb:hover img { transform: scale(1.03); }
.thumbs.single .thumb img { width: auto; height: auto; max-width: 100%; max-height: 340px; object-fit: contain; }
.file-ico { position: relative; width: 40px; height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border-radius: 7px; background: var(--blue-bg); color: var(--blue); flex-shrink: 0; }
.file-ico svg { width: 17px; height: 17px; }
.file-ico b { font: 700 8px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.file-ico.pdf { background: var(--red-bg); color: var(--red); }
.file-ico.archive { background: var(--gold-bg); color: var(--gold); }
.file-ico.code { background: var(--purple-bg); color: var(--purple); }
.file-ico.text { background: var(--green-bg); color: var(--green); }
.file-card { display: flex; align-items: center; gap: 6px; width: min(380px, 100%); padding: 7px 12px 7px 7px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel-2); color: var(--text); transition: border-color .12s, background .12s; }
.file-card:hover { border-color: var(--gold-line); background: var(--hover); }
.file-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--text); }
.file-main:hover { text-decoration: none; }
.file-main > svg.i { color: var(--subtle); }
.file-card:hover .file-main > svg.i { color: var(--gold); }
.file-card .share { width: 30px; height: 30px; margin-right: -6px; }
.file-card .share svg { width: 16px; height: 16px; }
.file-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.file-meta strong { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta small { font: 11px var(--mono); color: var(--muted); }

/* composer: uploads, typing, drop target */
.upload-tray { display: none; gap: 8px; overflow-x: auto; padding: 0 0 8px; scrollbar-width: thin; }
.upload-tray.on { display: flex; }
.upload { position: relative; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; width: 236px; padding: 6px 4px 6px 6px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--panel-2); animation: msg-in .18s ease-out; }
.upload img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.up-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.up-meta strong { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-meta small { font: 11px var(--mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload .bar { display: block; height: 3px; margin-top: 4px; border-radius: 2px; background: var(--line-soft); overflow: hidden; }
.upload .bar i { display: block; height: 100%; width: 0; background: var(--gold); border-radius: 2px; transition: width .2s ease; }
.upload.done { border-color: var(--green-line); }
.upload.error { border-color: var(--red-line); background: var(--red-bg); }
.upload.error small { color: var(--red); }
.upload .icon-btn { width: 28px; height: 28px; }
.upload .icon-btn svg { width: 15px; height: 15px; }
.btn.busy { background: var(--gold-bg); border-color: var(--gold-line); color: var(--gold-2); }
.btn.busy svg { animation: blink 1.2s ease-in-out infinite; }
.typing { position: absolute; left: 24px; right: 24px; bottom: 100%; height: 24px; display: flex; align-items: center; gap: 8px; padding: 0 2px;
  font-size: 12px; color: var(--muted); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .18s, transform .18s;
  background: linear-gradient(transparent, var(--bg) 45%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.typing.on { opacity: 1; transform: none; }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); animation: blink 1.2s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }
.drop-overlay { position: absolute; inset: 8px; z-index: 20; display: grid; place-items: center; border: 2px dashed var(--gold); border-radius: 12px;
  background: var(--overlay); pointer-events: none; animation: fade .12s ease-out; }
.drop-overlay > div { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 20px; }
.drop-overlay svg { width: 36px; height: 36px; color: var(--gold); }
.drop-overlay strong { font: 600 16px var(--mono); color: var(--gold-2); }
.drop-overlay span { font-size: 13px; color: var(--muted); }

/* menus, emoji picker, bottom sheet */
.picker-back { position: fixed; inset: 0; z-index: 79; }
.menu { width: 230px; z-index: 80; padding: 4px; background: var(--raised); border: 1px solid var(--line-strong); border-radius: 9px; box-shadow: var(--shadow); animation: pop-in .12s ease-out; }
.menu-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; text-align: left; font-size: 13px; color: var(--text); }
.menu-item svg { width: 16px; height: 16px; color: var(--muted); }
.menu-item:hover, .menu-item:focus-visible { background: var(--hover); outline: none; }
.menu-item.danger, .menu-item.danger svg { color: var(--red); }
.emoji-picker { width: 296px; z-index: 80; padding: 8px; background: var(--raised); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: var(--shadow); animation: pop-in .12s ease-out; }
.emoji-picker input { padding: 7px 10px; font-size: 13px; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-height: 216px; overflow-y: auto; margin-top: 8px; scrollbar-width: thin; }
.emoji-grid button { height: 34px; border-radius: 6px; font-size: 20px; line-height: 1; transition: transform .1s, background .1s; }
.emoji-grid button:hover, .emoji-grid button:focus-visible { background: var(--hover); transform: scale(1.12); outline: none; }
.backdrop.sheet-back { z-index: 84; background: var(--backdrop-light); }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 85; width: min(560px, 100%); margin: 0 auto; max-height: 82vh; max-height: 82dvh; overflow-y: auto;
  padding: 6px 12px calc(12px + env(safe-area-inset-bottom)); background: var(--raised); border: 1px solid var(--line-strong); border-bottom: 0; border-radius: 16px 16px 0 0;
  box-shadow: 0 -10px 40px var(--shade); animation: sheet-in .24s cubic-bezier(.2, .8, .2, 1); overscroll-behavior: contain; }
.sheet.out { animation: sheet-out .19s ease-in forwards; pointer-events: none; }
.sheet-grip { width: 38px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 4px auto 10px; }
.sheet-title { font: 12px var(--mono); color: var(--subtle); padding: 0 6px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-react { display: flex; justify-content: space-between; gap: 4px; padding: 4px 2px 10px; border-bottom: 1px solid var(--line-soft); margin-bottom: 6px; }
.quick-react button { width: 46px; height: 46px; border-radius: 50%; background: var(--panel-2); font-size: 23px; line-height: 1; display: grid; place-items: center; transition: transform .1s; }
.quick-react button:active { transform: scale(.9); background: var(--hover); }
.quick-react button.more { color: var(--muted); }
.sheet-item { width: 100%; display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 10px; border-radius: 8px; font-size: 15px; text-align: left; color: var(--text); }
.sheet-item svg { width: 19px; height: 19px; color: var(--muted); }
.sheet-item:active, .sheet-item:hover { background: var(--hover); }
.sheet-item.danger, .sheet-item.danger svg { color: var(--red); }
.sheet .emoji-picker { width: auto; padding: 0 2px; border: 0; background: none; box-shadow: none; animation: none; }
.sheet .emoji-grid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); max-height: 46vh; }
.sheet .emoji-grid button { height: 44px; font-size: 25px; }

/* image viewer */
.lightbox { position: fixed; inset: 0; z-index: 95; display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; grid-template-rows: minmax(0, 1fr) auto;
  background: #030506f0; animation: fade .16s ease-out; }
.lightbox.out { animation: fade-out .17s ease-in forwards; }
.lb-stage { grid-column: 2; grid-row: 1; display: grid; place-items: center; min-width: 0; min-height: 0; padding: 60px 0 10px; }
.lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 20px 60px #000a; opacity: 0; transform: scale(.98); transition: opacity .2s, transform .2s; }
.lb-stage img.in { opacity: 1; transform: none; }
.lb-nav { grid-row: 1; align-self: center; justify-self: center; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #ffffff14; color: var(--text); }
.lb-nav:hover { background: #ffffff2a; }
.lb-nav.prev { grid-column: 1; }
.lb-nav.next { grid-column: 3; }
.lb-close { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; background: #ffffff14; color: var(--text); }
.lb-close:hover { background: #ffffff2a; }
.lb-cap { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line-soft); }
.lb-cap > div { min-width: 0; }
.lb-cap strong { display: block; font-size: 14px; overflow-wrap: anywhere; }
.lb-cap span { font-size: 12px; color: var(--muted); }

/* forward / share */
.share-preview { margin-bottom: 12px; }
.share-quote { padding: 8px 12px; border-left: 3px solid var(--gold-line); background: var(--panel-2); border-radius: 0 6px 6px 0; font-size: 13px; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 140px; overflow-y: auto; }
.share-quote small { display: block; font: 11px var(--mono); color: var(--subtle); margin-bottom: 2px; }
.share-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.share-files .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.share-files .chip svg { width: 13px; height: 13px; }
.share-list { margin-top: 8px; max-height: 248px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 4px; scrollbar-width: thin; }
.share-opt { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 5px 8px; border-radius: 6px; text-align: left; font-size: 14px; }
.share-opt .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-opt .subtle { font: 11px var(--mono); white-space: nowrap; }
.share-opt:hover, .share-opt.active { background: var(--hover); }
.share-opt.on { background: var(--gold-bg); box-shadow: inset 0 0 0 1px var(--gold-line); }
.share-opt.on svg.i { color: var(--gold); }
.share-mark { width: 24px; text-align: center; font-family: var(--mono); color: var(--subtle); }
.share-warn { color: var(--gold-2); }
.lb-acts { display: flex; gap: 6px; flex-shrink: 0; }

/* files tab */
.files-view .list-head input { max-width: 300px; }
.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 14px; }
.file-grid:empty { display: none; }
.file-grid .thumb img { height: 132px; }
.file-row { align-items: center; }
.file-row.removed { opacity: .72; }
.file-row .title .chip { margin-left: 8px; }
.file-card.removed { cursor: default; border-style: dashed; color: var(--muted); }

/* bug reports */
.bugs-view .bug-intro { margin: 4px 0 10px; }
.bug-row { width: 100%; text-align: left; align-items: center; background: none; border-left: 0; border-right: 0; border-top: 0; color: inherit; font: inherit; }
.bug-row:hover { background: var(--panel-2); }
.sev { flex-shrink: 0; min-width: 64px; text-align: center; font: 600 11px/1 var(--mono); text-transform: uppercase; padding: 5px 7px; border-radius: 4px; border: 1px solid var(--line); color: var(--muted); background: var(--panel-2); }
.sev-medium { color: var(--gold-2); border-color: var(--gold-line); background: var(--gold-bg); }
.sev-high, .sev-critical { color: var(--red); border-color: var(--red-line); background: var(--red-bg); }
.sev-critical { font-weight: 800; }
.bug-head { display: flex; gap: 10px; align-items: center; }
.bug-head strong { font-size: 16px; overflow-wrap: anywhere; }
.bug-detail h3 { margin: 16px 0 4px; font-size: 14px; }
.bug-detail h4 { margin: 12px 0 4px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.bug-status { margin: 8px 0; padding-left: 18px; font-size: 13px; }
.bug-text, .bug-payload { margin: 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
.bug-payload { font-size: 12px; word-break: break-all; }
.payload-end { height: 1px; }
.bug-detail .hint { overflow-wrap: anywhere; }
.bug-detail .dlg-foot { flex-wrap: wrap; }
.file-card.removed:hover { border-color: var(--line); background: none; }
.file-card.removed .file-main { cursor: default; }

/* storage meter (Settings → Storage) */
.meter { height: 10px; border-radius: 6px; background: var(--sunken); border: 1px solid var(--line); overflow: hidden; margin: 10px 0 8px; }
.meter > span { display: block; height: 100%; background: var(--green); border-radius: 6px 0 0 6px; }
.meter.nearly > span { background: var(--gold); }
.meter.full > span { background: var(--red); }
.warn-note { padding: 8px 10px; border: 1px solid var(--gold-line); border-radius: 8px; background: var(--gold-bg); color: var(--text); }
.storage-box .meter.full ~ .warn-note { border-color: var(--red-line); background: var(--red-bg); }

/* workflows */
.wf-line { display: flex; align-items: center; gap: 10px; margin: 6px 0; padding: 6px 10px; border: 1px dashed var(--line); border-radius: 8px;
  background: var(--drawer); font-size: 13px; color: var(--muted); cursor: pointer; transition: border-color .12s; }
.wf-line:hover { border-color: var(--gold-line); }
.wf-line.notice { cursor: default; border-style: solid; }
.wf-line.notice:hover { border-color: var(--line); }
.wf-line .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.wf-line strong { color: var(--text); font-weight: 600; }
.wf-ico { width: 24px; height: 24px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--panel-2); color: var(--gold); }
.wf-ico svg { width: 14px; height: 14px; }
.wf-line.done .wf-ico, .wf-line.step_done .wf-ico { background: var(--green-bg); color: var(--green); }
.wf-line.failed .wf-ico, .wf-line.step_failed .wf-ico, .wf-line.cancelled .wf-ico { background: var(--red-bg); color: var(--red); }
.wf-section { margin-top: 12px; }
.wf-section > h3 { font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--subtle); margin-bottom: 8px; }
.wf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.wf-card { width: 100%; display: flex; flex-direction: column; gap: 9px; padding: 13px 15px; text-align: left; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); transition: border-color .15s, transform .15s, box-shadow .15s; }
.wf-card .actions { margin-top: 2px; }
button.wf-card:hover { border-color: var(--line-hover); transform: translateY(-1px); box-shadow: 0 8px 24px var(--shade); }
.wf-card.run { border-left: 3px solid var(--line); }
.wf-card.run.running { border-left-color: var(--gold); }
.wf-card.run.done { border-left-color: #5f8f73; }
.wf-card.run.failed { border-left-color: #a8665a; }
.wf-card-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wf-card-top strong { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-card-foot { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: 12px; color: var(--muted); }
.wf-card .muted { font-size: 13px; }
.wf-mine { display: flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid var(--gold-line); border-radius: 7px; background: var(--gold-bg); color: var(--gold-2); font-size: 12px; }
.wf-mine svg { width: 14px; height: 14px; }
.wf-empty p { max-width: 540px; }
.progress { height: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
.progress i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-2)); transition: width .45s ease; }
.progress.big { height: 8px; margin: 12px 0 6px; }
.wf-card.done .progress i { background: var(--green); }
.wf-card.failed .progress i { background: var(--red); }
.steps-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.step-pill { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 10px 3px 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); font-size: 12px; }
.step-pill .avatar.sm { width: 20px; height: 20px; font-size: 9px; border-radius: 50%; }
.arrow { font-family: var(--mono); color: var(--subtle); }
.timeline { list-style: none; margin: 18px 0 0; padding: 0; }
.tl-step { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 12px; padding-bottom: 18px; }
.tl-step::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; border-radius: 1px; background: var(--line-soft); }
.tl-step:last-child::before { display: none; }
.tl-step.done::before { background: var(--green-line); }
.tl-dot { position: relative; z-index: 1; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--line); background: var(--panel); color: var(--subtle); }
.tl-dot svg { width: 14px; height: 14px; }
.tl-step.done .tl-dot { border-color: var(--green-line); background: var(--green-bg); color: var(--green); }
.tl-step.active .tl-dot { border-color: var(--gold); background: var(--gold-bg); color: var(--gold); animation: ring 2s ease-out infinite; }
.tl-step.failed .tl-dot, .tl-step.cancelled .tl-dot { border-color: var(--red-line); background: var(--red-bg); color: var(--red); }
.tl-body { min-width: 0; }
.tl-step.mine .tl-body { margin-top: -4px; padding: 10px 12px; border: 1px solid var(--gold-line); border-radius: 9px; background: var(--gold-bg-2); }
.tl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 28px; }
.tl-head strong { font-size: 14px; }
.tl-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; font-size: 12px; color: var(--muted); }
.tl-instr, .tl-result { margin-top: 8px; padding: 6px 10px; border: 1px solid var(--line-soft); border-radius: 7px; background: var(--sunken); }
.tl-instr summary, .tl-result summary { cursor: pointer; font: 12px var(--mono); color: var(--muted); }
.tl-instr[open] summary, .tl-result[open] summary { margin-bottom: 6px; }
.tl-form { margin-top: 10px; }
.tl-form .actions { margin-top: 8px; }
.wf-editor .section > h3 { margin-bottom: 2px; }
.step-card { margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.step-card:focus-within { border-color: var(--line-hover); }
.step-card-head { display: flex; align-items: center; gap: 6px; }
.step-card-head input { flex: 1; min-width: 0; font-weight: 600; }
.step-num { width: 26px; height: 26px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gold-line); background: var(--gold-bg); color: var(--gold-2); font: 600 12px var(--mono); }
.insert-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; }
.insert-chips .chip { cursor: pointer; }
.insert-chips .chip:hover { border-color: var(--gold-line); color: var(--gold-2); }
.deps > label { margin-bottom: 0; }
.dep-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.dep { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); color: var(--muted); font-size: 12px; cursor: pointer; }
.dep input { width: 14px; height: 14px; }
.dep.on { border-color: var(--gold-line); background: var(--gold-bg); color: var(--gold-2); }
.input-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr) 124px; gap: 8px; align-items: center; margin: 8px 0; }
.input-ctl { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.json-edit { min-height: 380px; font-size: 12.5px; }
.sticky-foot { position: sticky; bottom: 0; z-index: 3; flex-wrap: wrap; margin: 16px -20px 0; padding: 12px 20px 14px; background: var(--drawer); border-top: 1px solid var(--line-soft); }
.sticky-foot .error { order: -1; flex-basis: 100%; margin: 0 0 4px; }

/* workflow builder: step options, order overview, templates, drafts */
.i.flip { transform: rotate(180deg); }
.drawer-body:has(> .wf-editor) { padding-bottom: 0; }     /* nothing shows below the sticky Save bar */
.tpl-import > .steps-strip { margin-top: 10px; }
.wf-head-actions { margin: 0; }
.chip.opt { color: var(--gold-2); border-color: var(--gold-line); background: var(--gold-bg-2); font-size: 10.5px; padding: 3px 6px; }
.pill-opts { font: 10px var(--mono); color: var(--gold); margin-left: -2px; }
.step-pill.plain { padding: 3px 10px; }
.input-head { margin: 10px 0 -4px; font: 11px var(--mono); color: var(--subtle); }
.input-row.has-error input { border-color: var(--red-line); }
.step-card.has-error { border-color: var(--red-line); }
.step-error { margin: 10px 0 0; }
.instr-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.instr-head > label { margin: 0; }
.insert-wrap { position: relative; }
.insert-btn svg { width: 13px; height: 13px; }
.insert-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 6; width: min(340px, 78vw); max-height: 300px; overflow-y: auto; padding: 6px;
  background: var(--dialog); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: var(--shadow); animation: pop-in .12s ease-out; }
.insert-pop .hint { margin: 4px 6px; }
.insert-group { padding: 6px 8px 2px; font: 600 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--subtle); }
.insert-pop button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 6px 8px; border-radius: 6px; text-align: left; font-size: 13px; }
.insert-pop button:hover, .insert-pop button:focus-visible { background: var(--hover); outline: none; }
.insert-pop code { font: 11px var(--mono); color: var(--gold-2); overflow-wrap: anywhere; }
.step-more { margin-top: 12px; border-top: 1px dashed var(--line-soft); padding-top: 8px; }
.step-more > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; cursor: pointer; font: 12px var(--mono); color: var(--muted); list-style: none; }
.step-more > summary::-webkit-details-marker { display: none; }
.step-more > summary > span:first-child::before { content: "▸ "; color: var(--subtle); }
.step-more[open] > summary > span:first-child::before { content: "▾ "; }
.opt-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.opt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; }
.opt-grid .when-field { grid-column: 1 / -1; }
.opt-grid .field > label { margin-bottom: 6px; }
.opt-grid small.hint { display: block; }
.when-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.when-row.full { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); }
.due-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.opt-check { grid-column: 1 / -1; font-size: 13px; }
.wf-flow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.wf-layer { flex: 1 1 170px; min-width: 0; max-width: 100%; display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px dashed var(--line); border-radius: 9px; background: var(--sunken); }
.wf-layer-head { font: 600 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--subtle); }
.wf-node { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; padding: 7px 9px; text-align: left; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); font-size: 12px; }
.wf-node:hover { border-color: var(--gold-line); }
.wf-node.bad { border-color: var(--red-line); }
.wf-node strong { font-size: 13px; overflow-wrap: anywhere; }
.wf-waits { color: var(--muted); overflow-wrap: anywhere; }
.wf-start { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px; margin-bottom: 10px; }
.wf-start.single { grid-template-columns: minmax(0, 1fr); }
.opt-off { align-items: center; margin-top: 12px; }
.opt-off .opt-chips { margin-right: 4px; }
.wf-start-box { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.wf-start-box strong { font-size: 14px; }
.wf-start-box .hint { margin: 0; }
.wf-start-box .actions { margin-top: 2px; }
.draft-status { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--muted); }
.draft-status:empty { display: none; }
.draft-status.bad { color: var(--red); }
.draft-status.ok { color: var(--green); }
.spinner { flex-shrink: 0; width: 13px; height: 13px; margin-top: 2px; border: 2px solid var(--gold-line); border-top-color: var(--gold); border-radius: 50%; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.tpl-gallery { display: flex; flex-direction: column; gap: 10px; }
.tpl-card { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 12px 14px; text-align: left; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); transition: border-color .15s; }
.tpl-card:hover, .tpl-card:focus-visible { border-color: var(--gold-line); outline: none; }
.tpl-card strong { font-size: 14px; }
.tpl-card .muted { font-size: 13px; }
.tpl-card .subtle { font: 11.5px var(--mono); }
.role-title { margin-top: 18px; font-size: 14px; }
.role-map { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.role-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--panel-2); }
.role-row strong { display: block; font-size: 13px; }
.role-row .hint { display: block; margin: 2px 0 0; overflow-wrap: anywhere; }
.role-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.json-view { min-height: 220px; font-size: 12px; }
.tl-opts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tl-note { margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.tl-note.bad { color: var(--red); }
.tl-errors ul { margin: 0; padding-left: 18px; font-size: 12.5px; }
.tl-errors li { margin: 3px 0; overflow-wrap: anywhere; }
.tl-step.skipped .tl-dot { border-style: dashed; color: var(--subtle); }
.tl-step.skipped .tl-head strong { color: var(--muted); }
.tl-step.late .tl-dot { border-color: var(--red); color: var(--red); background: var(--red-bg); }
.tl-step.failed.optional .tl-dot { border-style: dashed; }
.progress.big.done i { background: var(--green); }
.wf-line.step_retry .wf-ico { background: var(--gold-bg); color: var(--gold); }
.wf-line.step_skipped .wf-ico { color: var(--subtle); }
@media (max-width: 700px) {
  .wf-start, .opt-grid, .role-row { grid-template-columns: minmax(0, 1fr); }
  .when-row.full { grid-template-columns: minmax(0, 1fr); }
  .input-head { display: none; }
}

/* trusted circles */
.hive-card { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 12px; padding: 14px 16px; border: 1px solid var(--gold-line); border-radius: 10px; background: linear-gradient(135deg, var(--gold-grad), var(--panel)); }
.hive-card .grow { flex: 1; min-width: 200px; }
.hive-card strong { display: block; font-size: 16px; }
.fp { text-align: right; }
.fp small { display: block; font-size: 11px; color: var(--subtle); }
.fp code { font: 600 13px var(--mono); color: var(--gold-2); letter-spacing: .04em; overflow-wrap: anywhere; }
.notice-box { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--gold-line); border-radius: 8px; background: var(--gold-bg); color: var(--gold-2); font-size: 13px; }
.license-box { margin-top: 12px; padding: 14px 16px; border: 1px dashed var(--gold-line); border-radius: 10px; background: var(--panel-2); }
.license-box.on { border-style: solid; background: linear-gradient(135deg, var(--gold-grad), var(--panel-2) 70%); }
.plugin-card .license-box { background: var(--panel); }
.license-head { display: flex; align-items: center; gap: 12px; }
.license-head .grow { flex: 1; min-width: 0; }
.license-head strong { display: block; }
.license-head small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.license-form { display: flex; gap: 8px; margin-top: 12px; }
.license-form input { flex: 1; min-width: 0; }
.license-box .hint.err, .kv dd.err { color: var(--red); }
@media (max-width: 560px) { .license-form { flex-direction: column; } }
.circle-card { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.circle-card:not(.active) { border-style: dashed; opacity: .85; }
.circle-top { display: flex; align-items: center; gap: 12px; }
.circle-top .grow { flex: 1; min-width: 0; }
.circle-top strong { display: block; font-size: 15px; }
.circle-top small { display: block; font-size: 12px; color: var(--muted); }
.ring-ico { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gold-line); background: var(--gold-bg); color: var(--gold); font-size: 21px; }
.hive-list { margin-top: 12px; border: 1px solid var(--line-soft); border-radius: 8px; overflow: hidden; }
.hive-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); }
.hive-row:last-child { border-bottom: 0; }
.hive-row .grow { flex: 1; min-width: 0; }
.hive-row strong { display: block; font-size: 13px; }
.hive-row small { display: block; font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.hive-row small.err { color: var(--red); }
.member-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip.remote { color: var(--blue); border-color: var(--blue-line); background: var(--blue-bg); }
.section.how { margin-top: 18px; }
.fp-box { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--gold-line); border-radius: 9px; background: var(--gold-bg); }
.fp-box small { display: block; font-size: 12px; color: var(--muted); }
.fp-box code { display: block; margin-top: 6px; font: 600 17px var(--mono); letter-spacing: .06em; color: var(--gold-2); overflow-wrap: anywhere; }
.fp-inline { font: 12.5px var(--mono); color: var(--gold-2); overflow-wrap: anywhere; }
.person.remote { cursor: default; }

/* settings: plugins, shortcuts */
.plugin-card { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2); transition: border-color .2s, background .2s; }
.plugin-card.on { border-color: var(--gold-line); background: linear-gradient(135deg, var(--gold-grad), var(--panel-2) 70%); }
.plugin-head { display: flex; align-items: center; gap: 12px; }
.plugin-head .grow { flex: 1; min-width: 0; }
.plugin-head strong { display: block; font-size: 15px; }
.plugin-head small { display: block; font-size: 12.5px; color: var(--muted); }
.plugin-ico { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); background: var(--raised); color: var(--muted); transition: color .2s, background .2s; }
.plugin-card.on .plugin-ico, .license-box.on .plugin-ico { border-color: var(--gold-line); background: var(--gold-bg); color: var(--gold); }
.plugin-desc { margin-top: 10px; font-size: 13px; color: var(--muted); white-space: pre-line; }
.switch { position: relative; width: 46px; height: 27px; flex-shrink: 0; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--line); transition: background .2s, border-color .2s; }
.switch .knob { position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%; background: var(--knob); box-shadow: 0 1px 3px var(--shade); transition: transform .22s cubic-bezier(.3, 1.4, .6, 1), background .2s; }
.switch.on { background: var(--gold); border-color: var(--gold); }
.switch.on .knob { transform: translateX(19px); background: var(--on-gold); }
.switch:disabled { opacity: .6; cursor: progress; }
.shortcuts { display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; align-items: center; margin: 6px 0 4px; }
.shortcuts dt { display: flex; flex-wrap: wrap; gap: 4px; }
.shortcuts dd { margin: 0; font-size: 13px; color: var(--muted); }
.shortcuts .kbd { font-size: 12px; padding: 2px 6px; }

/* the Overmind panel */
.om-view { max-width: 920px; }
.om-head .avatar.lg { background: var(--gold-bg); color: var(--gold); border: 1px solid var(--gold-line); }
.om-head .muted { font-size: 13px; margin-top: 2px; }
.om-head .chip { margin-left: 4px; vertical-align: 1px; }
.om-usage { font-family: var(--mono); font-size: 12px !important; }
.om-head .actions { margin-top: 0; }
.om-view .section > h3 { display: flex; align-items: center; gap: 8px; }
.om-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 8px; border-bottom: 1px solid var(--line-soft); }
.om-row:last-child { border-bottom: 0; }
.om-row .grow { flex: 1; min-width: 0; }
.om-row .chip { flex-shrink: 0; margin-top: 2px; min-width: 76px; justify-content: center; }
.om-row .excerpt { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; white-space: pre-wrap; }
.om-row .excerpt.err { color: var(--red); }
.om-row .title { font-size: 14px; }
.om-row .when { font-size: 12px; color: var(--subtle); white-space: nowrap; margin-top: 2px; }
.om-row.link { cursor: pointer; border-radius: 6px; }
.om-row.link:hover { background: var(--hover); }
.om-row.small { padding: 6px 8px; }
.om-row.refused .excerpt { color: var(--subtle); }
.om-row.approval { margin-top: 10px; padding: 12px; border: 1px solid var(--gold-line); border-radius: 9px; background: var(--gold-bg); }
.om-row.approval .excerpt { color: var(--text); }
.om-row.approval .actions { margin-top: 0; flex-shrink: 0; }
.om-row .kind-ico { color: var(--gold); margin-top: 2px; }
.om-row .subtle { font-size: 12px; margin-top: 2px; }
.om-steps:not(:empty) { margin-top: 14px; }
.inbox-actions { margin-top: 8px; }
#settings-btn.has-update { position: relative; }
#settings-btn.has-update::after { content: ""; position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--bar); }
.update-new { display: flex; align-items: center; gap: 8px; color: var(--gold-2) !important; font-weight: 600; }
.update-new svg { width: 16px; height: 16px; flex-shrink: 0; }
.update-notes { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--panel-2); font-size: 13.5px; }
.update-notes summary { cursor: pointer; font-weight: 600; margin-bottom: 6px; }
.updates .hint.err { color: var(--red); }
.update-machines { margin-top: 12px; }
.update-machines h4 { margin: 0 0 6px; font-size: 13px; }
.update-machines ul { margin: 0 0 6px; padding-left: 18px; font-size: 13.5px; }
.update-machines li.behind { color: var(--gold-2); }
.avatar.clickable { cursor: pointer; }
.overdue { color: var(--red); }
input[type="color"] { width: 64px; height: 38px; padding: 3px; cursor: pointer; }
.inbox-decision { margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.inbox-decision.done { color: var(--green); }
.inbox-decision.failed { color: var(--red); }
.om-view .section p code, .om-view label.check code { font: 12px var(--mono); color: var(--gold-2); }
.om-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.om-choice { display: flex; flex-direction: column; gap: 4px; padding: 11px 13px; text-align: left; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); transition: border-color .2s, background .2s; }
.om-choice:hover { border-color: var(--gold-line); }
.om-choice.on { border-color: var(--gold); background: linear-gradient(135deg, var(--gold-grad), var(--panel-2) 70%); box-shadow: inset 0 0 0 1px var(--gold-line); }
.om-choice strong { font-size: 14px; }
.om-choice.on strong { color: var(--gold-2); }
.om-choice small { font-size: 12px; color: var(--muted); line-height: 1.45; }
.om-view label.check { align-items: flex-start; }
.om-view label.check input { margin-top: 4px; }
.om-view .grid2 .field small.hint { display: block; }
@media (max-width: 700px) {
  .om-choices { grid-template-columns: 1fr; }
  .om-row { flex-wrap: wrap; }
  .om-row .grow { flex: 1 1 60%; }
  .om-row .chip { min-width: 0; }
  .om-row .when { width: 100%; margin-top: 0; }
  .om-row:not(.approval) .when { padding-left: 2px; }
  .om-row.approval .grow { flex-basis: calc(100% - 44px); }
  .om-row.approval .actions { width: 100%; padding-left: 40px; }
}

/* getting started */
.setup-view { max-width: 820px; }
.setup-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; margin-top: 12px; }
.setup-head .grow { flex: 1; min-width: 220px; }
.setup-head h2 { font-size: 21px; margin: 4px 0 2px; }
.setup-head p { font-size: 13.5px; }
.setup-bar { height: 4px; margin: 16px 0 6px; border-radius: 2px; background: var(--line-soft); overflow: hidden; }
.setup-bar i { display: block; height: 100%; background: var(--gold); border-radius: 2px; transition: width .4s ease; }
.setup-step { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.setup-step:last-child { border-bottom: 0; }
.setup-step .grow { flex: 1; min-width: 0; }
.setup-step h3 { font-size: 15px; margin-bottom: 4px; }
.setup-step h3 .sub { font: 11px var(--mono); color: var(--subtle); margin-left: 4px; }
.setup-step p { font-size: 13.5px; color: var(--muted); margin: 0 0 6px; }
.setup-step p code, .setup-step .hint code { font: 12px var(--mono); color: var(--gold-2); white-space: nowrap; }
.setup-step.done h3 { color: var(--muted); }
.setup-num { width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gold-line); background: var(--gold-bg); color: var(--gold); font: 600 13px var(--mono); }
.setup-num svg { width: 15px; height: 15px; }
.setup-step.done .setup-num { border-color: var(--green-line); background: var(--green-bg); color: var(--green); }
.setup-ok { color: var(--green) !important; }
.setup-agent { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--panel-2); }
.setup-agent strong { font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.setup-err { margin-top: 6px; }
@media (max-width: 560px) { .setup-agent { flex-wrap: wrap; } .setup-agent .btn { margin-left: 34px; } }
.setup-agent .grow { flex: 1; min-width: 0; }
.setup-hello { font-size: 13px !important; margin: 2px 0 0 !important; overflow-wrap: anywhere; }
.setup-fork { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.setup-choice { display: grid; gap: 4px; align-content: start; text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); color: var(--text); }
.setup-choice strong { font-size: 14.5px; }
.setup-choice span { font-size: 13px; color: var(--muted); }
.setup-choice:hover { border-color: var(--line-strong); }
.setup-choice.on { border-color: var(--gold); background: var(--gold-bg); box-shadow: inset 0 0 0 1px var(--gold); }
.setup-switch { margin: 14px 0 6px; }
/* one step at a time: the one to do now is open, the rest are a line each */
.setup-step.later { opacity: .5; }
.setup-step.later h3, .setup-step.done h3 { margin-bottom: 0; }
.setup-step.now { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 16px 14px; margin: 8px 0; }
.setup-step.now h3 { font-size: 17px; margin-bottom: 10px; }
.setup-done-line { margin: 2px 0 0 !important; font-size: 13px !important; }
.setup-q { font-weight: 600; color: var(--text) !important; margin: 10px 0 6px !important; }
.setup-runtimes { display: flex; flex-wrap: wrap; gap: 6px; }
.setup-runtime { min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); color: var(--text); font: 600 13px var(--sans); }
.setup-runtime:hover { border-color: var(--line-strong); }
.setup-runtime.on { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.setup-name { display: grid; gap: 5px; margin: 12px 0 4px; max-width: 520px; }
.setup-name span { font-size: 13px; font-weight: 600; color: var(--text); }
.setup-name input { min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); color: var(--text); font: 15px var(--sans); }
.setup-name input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.setup-step .actions .btn.big { min-height: 44px; padding: 0 18px; font-size: 15px; }
.setup-then { margin-top: 8px !important; }
.setup-more { margin-top: 8px; font-size: 13px; color: var(--muted); }
.setup-more summary { cursor: pointer; }
.setup-msg { max-height: 240px; overflow: auto; white-space: pre-wrap; font: 12px/1.5 var(--mono); background: var(--code-bg); color: var(--code-text); padding: 10px; border-radius: 6px; }
.setup-wait { display: flex; align-items: center; gap: 10px; color: var(--text) !important; }
.setup-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--gold); animation: spin .9s linear infinite; flex: none; }
.setup-plan { margin: 0 0 4px; padding-left: 18px; font-size: 14px; }
.setup-plan li { margin: 3px 0; }
@media (prefers-reduced-motion: reduce) { .setup-spin { animation: none; } }
@media (max-width: 560px) { .setup-fork { grid-template-columns: 1fr; } }

/* touch screens: long-press replaces the hover toolbar */
@media (hover: none) {
  .msg:hover { background: none; }
  .msg:hover .msg-actions, .msg:hover .seq, .msg:hover .gutter-time { display: none; opacity: 0; }
  .msg { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  .reaction.add { opacity: 1; }
  .thumb:hover img { transform: none; }
}
@media (pointer: coarse) {
  .icon-btn { width: 40px; height: 40px; }
  .rail-item { min-height: 44px; }
  .reaction { height: 30px; padding: 0 10px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.mobile-only { display: none; }
/* the auth page's own brand: the mark and the word */
.auth-story .brand { align-items: center; flex: none; color: var(--gold); }
.auth-story .brand img { width: 34px; height: 34px; border-radius: 6px; }
.brand-word { font: 600 18px var(--mono); letter-spacing: -.05em; white-space: nowrap; }
.brand-word b { color: var(--text); font-weight: 600; }
.brand-word i { color: var(--muted); font-style: normal; font-weight: 400; }

@media (max-width: 1100px) {
  .office-page.talking { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); }
  .roles-grid { grid-template-columns: minmax(0, 1fr); }
}
/* a touch screen wide enough for the desktop layout (a tablet): no hovering, so the top bar has the menu buttons and
   an open menu sits over a dimmed page until a tap outside */
@media (hover: none) and (min-width: 861px) {
  .mobile-only { display: inline-grid; }
  .shell.nav-open .rail-left, .shell.crew-open .rail-right { z-index: 56; }
  .shell.nav-open::after, .shell.crew-open::after { content: ""; position: fixed; inset: 0; z-index: 55; background: var(--backdrop-light); animation: fade .18s ease-out; }
}
/* phones: the side menus slide in from the edges, the ask box takes its own line under the top bar */
@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; }
  .auth-story { display: none; }
  .mobile-only { display: inline-grid; }
  .shell, .shell.nav-pinned, .shell.crew-pinned { --rail-l: 0px; --rail-r: 0px; grid-template-columns: 0 minmax(0, 1fr) 0; grid-template-rows: auto minmax(0, 1fr); }
  .topbar { flex-wrap: wrap; gap: 8px; padding: max(8px, env(safe-area-inset-top)) 10px 8px; }
  .brand { flex: 1 1 0; }
  .brand-where, .conn { display: none; }
  .ask-slot { order: 5; flex: 1 1 100%; max-width: none; }
  .askbar { height: 40px; }
  .ask-who { display: none; }
  /* 16px text in every field: a phone zooms the page in when a smaller one gets focus */
  input:not([type="checkbox"]):not([type="radio"]), textarea, select { font-size: 16px !important; }
  .top-actions { gap: 4px; }
  .top-btn { padding: 0 10px; }
  .top-btn .tb-text { display: none; }
  .top-btn.update-btn { padding: 0 12px; }          /* on a phone the others lose their words; this one keeps them */
  .rail, .rail.wide { top: 0; width: min(280px, 78vw); z-index: 56; padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: max(12px, env(safe-area-inset-bottom)); transition: transform .18s ease; }
  .rail::before { inset: 0; border-radius: 0; border: 0; box-shadow: var(--shadow); }
  .rail-right, .rail-right.wide { width: min(248px, 66vw); }
  .rail-left { transform: translateX(-102%); }
  .rail-right { transform: translateX(102%); }
  .rail-left, .rail-right { visibility: hidden; transition: transform .18s ease, visibility 0s linear .18s; }
  .shell.nav-open .rail-left, .shell.crew-open .rail-right { transform: none; visibility: visible; transition: transform .18s ease; }
  .rail .lbl, .rail:not(.wide) .lbl { opacity: 1; }
  .rail:not(.wide) .rail-head .lbl { display: inline; }
  .rail:not(.wide) .rail-item.sub { display: flex; }
  .rail:not(.wide) .rail-item .badge { position: static; transform: none; }
  .rail-pin, .rail-head.pin { pointer-events: none; }
  .rail-pin svg { display: none; }
  .shell.nav-open::after, .shell.crew-open::after { content: ""; position: fixed; inset: 0; z-index: 55; background: var(--backdrop-light); animation: fade .18s ease-out; }
  .main { padding: 0; }
  .pagebar { padding: 4px 12px 8px; }
  .page-title { flex-basis: 100%; flex-wrap: wrap; row-gap: 2px; }
  .page-title h1 { white-space: normal; }
  .page-title .page-desc { flex-basis: 100%; white-space: normal; }
  .page-actions { margin-left: 0; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .page-actions::-webkit-scrollbar { display: none; }
  .page-actions > * { flex: none; }
  .page { padding: 4px 12px 28px; }
  .logdrawer { top: 0; right: 0; bottom: 0; width: 100vw; border-radius: 0; border: 0; padding-top: env(safe-area-inset-top); z-index: 57; }
  .office-page.talking { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 10px; padding: 4px 12px 12px; }
  .office-side { padding-bottom: 0; gap: 8px; }
  .office-side .office-host, .office-side .card-box, .office-side > .actions { display: none; }
  .office-side .side-toggle { display: inline-flex; align-self: flex-start; }
  .office-page.show-side .office-side { max-height: 46vh; overflow-y: auto; }
  .office-page.show-side .office-side .card-box, .office-page.show-side .office-side > .actions { display: block; }
  .office-page.show-side .office-side > .actions { display: flex; }
  .visitor .avatar.lg { width: 44px; height: 44px; }
  .visitor h2 { font-size: 20px; }
  .roles-head h1, .roles-page.welcome .roles-head h1 { white-space: normal; font-size: 26px; }
  .board { scroll-snap-type: x mandatory; scroll-padding: 0 12px; gap: 10px; }
  .col { width: 84vw; min-width: 84vw; scroll-snap-align: start; }
  .board-bar input[type="search"] { max-width: none; flex: 1 1 100%; }
  .board-bar select { flex: 1 1 40%; }
  .crew-role { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .role-who { padding-top: 0; }
  .ledger-row { grid-template-columns: 44px 56px minmax(0, 1fr); }
  .ledger-row .by, .ledger-row .scope { display: none; }
  .board-bar, .board { padding-left: 12px; padding-right: 12px; }
  .messages, .list { padding-left: 12px; padding-right: 12px; }
  .composer-wrap { padding: 6px 12px 12px; }
  .composer textarea { font-size: 16px; }
  .composer-row .hint { display: none; }
  .body pre { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
  .grid2 { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  input, textarea, select { font-size: 16px; }
  .composer-wrap { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .typing { left: 14px; right: 14px; }
  .send-label { display: none; }
  #send-btn { min-width: 42px; min-height: 36px; padding: 6px 10px; }
  .thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .thumbs.single { grid-template-columns: minmax(0, auto); }
  .lightbox { grid-template-columns: minmax(0, 1fr); }
  .lb-stage { grid-column: 1; padding: 56px 0 8px; }
  .lb-nav { position: absolute; top: 45%; width: 40px; height: 40px; }
  .lb-nav.prev { left: 8px; }
  .lb-nav.next { right: 8px; }
  .lb-cap { padding-left: 14px; padding-right: 14px; }
  .toasts { left: 12px; right: 12px; top: auto; bottom: calc(118px + env(safe-area-inset-bottom)); max-width: none; flex-direction: column-reverse; }
  .shell.nav-open ~ .toasts, .shell.crew-open ~ .toasts { visibility: hidden; }
  .wf-cards { grid-template-columns: minmax(0, 1fr); }
  .input-row { grid-template-columns: 1fr 1fr; }
  .input-row .icon-btn { justify-self: end; }
  .file-row { flex-wrap: wrap; }
  .file-row .grow { flex-basis: calc(100% - 60px); }
  .fp { text-align: left; }
  .drawer-body { padding: 14px 14px 30px; }
  .drawer-head { padding: 12px 14px; padding-top: max(12px, env(safe-area-inset-top)); }
  .sticky-foot { margin: 16px -14px 0; padding: 10px 14px max(12px, env(safe-area-inset-bottom)); }
  .shortcuts { grid-template-columns: 1fr; gap: 2px; }
  .shortcuts dd { margin-bottom: 8px; }
}

/* editions: Core or PRO */
.pro-tag { display: inline-block; margin-left: 8px; padding: 1px 6px; border: 1px solid var(--gold-line); border-radius: 4px; background: var(--gold-bg); color: var(--gold); font: 700 10px/1.5 var(--mono); letter-spacing: .08em; vertical-align: 2px; }
.pro-lock { margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--gold-line); border-radius: 8px; background: var(--panel-2); }
.pro-lock .hint { margin: 0 0 8px; }
.plugin-setup { margin-top: 10px; }
.plugin-setup .hint { margin: 0 0 6px; }
.om-detail { margin: 6px 0 2px; padding: 8px 10px; border-left: 2px solid var(--gold-line); background: var(--panel-2); border-radius: 4px; font-size: 13px; white-space: pre-line; max-height: 220px; overflow: auto; }
.om-memory-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.om-memory-head h3 { margin: 0; }
.edition-box .edition-tier { margin: 0 0 6px; font: 700 34px/1 var(--mono); letter-spacing: .14em; color: var(--muted); }
.edition-box.pro .edition-tier { color: var(--gold); text-shadow: 0 0 18px color-mix(in srgb, var(--gold) 33%, transparent); }
.edition-box.section { border: 1px solid var(--line-soft); border-radius: 10px; padding: 16px 18px; }
.edition-box.section.pro { border-color: var(--gold-line); background: linear-gradient(135deg, var(--gold-grad, var(--gold-bg)), var(--panel-2) 70%); }

/* Inbound webhooks */
.hooks-view { max-width: 920px; }
.hooks-view .list-head .muted { font-size: 13px; }
.hook-card .top { flex-wrap: nowrap; }
.hook-card.off { border-style: dashed; }
.hook-card.off .top strong { color: var(--muted); }
.hook-sub { font-size: 12px; overflow-wrap: anywhere; }
.hook-url { font-size: 12px; color: var(--subtle); margin-top: 10px; overflow-wrap: anywhere; }
.hook-log { margin-top: 12px; border-top: 1px solid var(--line-soft); padding-top: 8px; }
.hook-log summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 2px 0; }
.hook-log summary:hover { color: var(--gold-2); }
.hook-log .om-row .chip { min-width: 46px; }
.hook-log .om-row .title { font-size: 13px; overflow-wrap: anywhere; }
.hook-help { margin: 8px 0 0 18px; display: grid; gap: 4px; }
.hook-help code { font: 12px var(--mono); color: var(--gold-2); }
.hook-result .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.hook-result.bad { border-color: var(--red-line); background: var(--red-bg); color: var(--red); }

/* analytics (PRO plugin). The outcome colors are the app's status hues (done green, failed red, cancelled neutral,
   running gold) stepped for each theme and checked with a palette validator against the card (--panel): every
   mark clears 3:1, and stacked neighbours stay apart for full colour vision and under protanopia and deuteranopia.
   Text never wears them: legends and tooltips pair a swatch with an icon and a label. */
.an-view { --an-done: #55a57d; --an-failed: #974e42; --an-cancelled: #819197; --an-running: #876416; }
:root:is(:not([data-theme]), [data-theme="paper"], [data-theme="iso"], [data-theme="daylight"]) .an-view { --an-done: #40916a; --an-failed: #a8321f; --an-cancelled: #7e959e; --an-running: #8a671a; }
.an-view > * { max-width: 1180px; }
.an-body { transition: opacity .15s; }
.an-body.loading { opacity: .5; pointer-events: none; }
.an-note { font-size: 12px; }
.an-h { font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--subtle); margin: 12px 0 8px; }
.an-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.an-tile { min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.an-tile-label { font-size: 12.5px; color: var(--muted); }
.an-tile-value { margin-top: 2px; font: 600 26px/1.25 var(--sans); letter-spacing: -.01em; color: var(--text); }
.an-tile-sub { margin-top: 2px; font-size: 12px; color: var(--subtle); overflow-wrap: anywhere; }
.an-off { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: 13.5px; }
.an-off svg { color: var(--subtle); margin-top: 2px; }
.an-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.an-charts > :only-child { grid-column: 1 / -1; }
.an-tables { display: grid; gap: 10px; margin-top: 10px; }
.an-card { position: relative; min-width: 0; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.an-card figcaption, .an-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.an-card figcaption strong, .an-card-head strong { font-size: 14px; }
.an-card figcaption .subtle, .an-card-head .subtle { font-size: 12px; }
.an-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 2px; font-size: 12px; color: var(--muted); }
.an-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.an-legend svg.i { width: 13px; height: 13px; color: var(--subtle); }
.an-legend b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.an-key { width: 10px; height: 10px; border-radius: 2px; }
.an-key.done, .an-key.ok, .an-line.done, .an-line.ok, .an-seg.done, .an-seg.ok { background: var(--an-done); fill: var(--an-done); }
.an-key.failed, .an-line.failed, .an-seg.failed { background: var(--an-failed); fill: var(--an-failed); }
.an-key.cancelled, .an-line.cancelled, .an-seg.cancelled { background: var(--an-cancelled); fill: var(--an-cancelled); }
.an-key.running, .an-line.running, .an-seg.running { background: var(--an-running); fill: var(--an-running); }
.an-plot { position: relative; min-height: 196px; margin-top: 6px; }
.an-svg { display: block; touch-action: pan-y; }
.an-svg:focus { outline: none; }
.an-svg:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.an-grid { stroke: var(--line-soft); stroke-width: 1; }
.an-base { stroke: var(--line-strong); stroke-width: 1; }
.an-tick { fill: var(--subtle); font: 11px var(--sans); font-variant-numeric: tabular-nums; }
.an-hit { fill: transparent; }
.an-col.on .an-hit { fill: var(--hover); }
.an-tip { position: absolute; top: 4px; left: 0; z-index: 3; min-width: 150px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--dialog); box-shadow: 0 8px 24px var(--shade); font-size: 12.5px; pointer-events: none; }
.an-tip-day { margin-bottom: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.an-tip-row { display: flex; align-items: center; gap: 8px; line-height: 1.6; }
.an-tip-row b { min-width: 3ch; text-align: right; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.an-tip-row span { color: var(--muted); }
.an-line { width: 12px; height: 2px; border-radius: 1px; flex-shrink: 0; }
.an-toggle { margin-top: 4px; }
.an-table-wrap { margin-top: 8px; overflow-x: auto; }
.an-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.an-table th, .an-table td { padding: 7px 8px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: middle; white-space: nowrap; }
.an-table thead th { font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--subtle); }
.an-table tbody th { font-weight: 500; white-space: normal; min-width: 120px; }
.an-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.an-table tbody tr:last-child > * { border-bottom: 0; }
.an-name small { display: block; font-size: 12px; font-weight: 400; color: var(--subtle); }
.an-who { display: inline-flex; align-items: center; gap: 8px; }
.an-empty { max-width: 640px; padding: 12px 0 4px; font-size: 13.5px; color: var(--muted); }
@media (max-width: 1000px) { .an-charts { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .an-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .an-tile { padding: 10px 12px; }
  .an-tile-value { font-size: 22px; }
  .an-table { font-size: 12.5px; }
  .an-table .opt { display: none; }
  .an-table th, .an-table td { padding: 7px 4px; }
  .an-table thead th { white-space: normal; vertical-align: bottom; letter-spacing: .03em; }
  .an-table tbody th { min-width: 0; }
  .an-who { gap: 6px; }
  .an-who .avatar { display: none; }
}
@media (forced-colors: active) { .an-seg { forced-color-adjust: none; } .an-col.on .an-hit { fill: Highlight; } }
/* crew memory */
.mem-view { max-width: 1100px; }
.mem-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 14px 0 8px; }
.mem-bar input[type="search"] { flex: 1 1 240px; max-width: 420px; }
.mem-bar select { width: auto; min-width: 150px; max-width: 100%; }
.mem-tag-on { cursor: pointer; color: var(--gold-2); border-color: var(--gold-line); background: var(--gold-bg); }
.mem-tag-on svg { width: 12px; height: 12px; }
.mem-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.mem-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel-2); cursor: pointer; transition: border-color .12s, transform .12s, box-shadow .12s; }
.mem-card:hover, .mem-card:focus-visible { border-color: var(--line-hover); transform: translateY(-1px); box-shadow: 0 8px 24px var(--shade); outline: none; }
.mem-card.pinned { border-color: var(--gold-line); background: linear-gradient(135deg, var(--gold-grad), var(--panel-2) 70%); }
.mem-card-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mem-card-top strong { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mem-card-top .chip { max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
.mem-pin { width: 30px; height: 30px; margin: -4px -6px -4px 0; color: var(--subtle); }
.mem-pin svg { width: 16px; height: 16px; }
.mem-pin.on { color: var(--gold); }
.mem-pin:disabled { opacity: .45; cursor: default; }
.mem-pin:disabled:hover { background: none; }
.mem-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; font-size: 12px; overflow-wrap: anywhere; }
.mem-key button.label { cursor: pointer; }
.mem-key button.label:hover { border-color: var(--gold-line); color: var(--gold-2); }
.mem-excerpt { margin: 0; font-size: 13px; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.mem-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; color: var(--muted); }
.mem-foot .grow { flex: 1; min-width: 0; }
.mem-count { margin: 14px 0 0; }
.mem-forgotten { margin-top: 14px; font-size: 13px; color: var(--muted); }
.mem-forgotten summary { cursor: pointer; font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--subtle); padding: 6px 0; }
.mem-gone { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.mem-gone .mono { min-width: 0; overflow-wrap: anywhere; }
.mem-gone .grow { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.mem-text { padding-top: 12px; }
.mem-evidence { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.mem-evidence li { margin: 3px 0; }
.mem-version { margin-top: 8px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--panel-2); }
.mem-version summary { cursor: pointer; padding: 8px 12px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.mem-version-body { padding: 0 12px 12px; }
.mem-version-body .body { margin-top: 8px; font-size: 13px; }
.mem-form .hint { display: block; }
.mem-form .hint code, .kv code { font: 12px var(--mono); color: var(--gold-2); overflow-wrap: anywhere; }
.kv dd .chip { margin-left: 2px; }
@media (max-width: 860px) {
  .mem-cards { grid-template-columns: minmax(0, 1fr); }
  .mem-bar select { flex: 1 1 140px; }
}

/* small lists the views share: what needs you, handoffs, tasks */
.needs, .handoffs { display: flex; flex-direction: column; gap: 6px; }
.need, .handoff, .mini-task { display: flex; gap: 8px; align-items: center; width: 100%; padding: 7px 8px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--panel-2); color: var(--text); text-align: left; font-size: 12.5px; cursor: pointer; }
.handoff { flex-direction: column; align-items: stretch; gap: 3px; }
.need:hover, .handoff:hover, .mini-task:hover { border-color: var(--line-hover); }
.handoff .who { font-size: 12.5px; }
.handoff .arrow { color: var(--gold); }
.handoff .sub, .mini-task .sub { color: var(--subtle); font: 10.5px var(--mono); }
.handoff .what { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-tasks { display: flex; flex-direction: column; gap: 6px; }
.mini-task .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-sub { margin: 18px 0 8px; font: 600 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--subtle); }
.list.compact { padding: 0; }
.agent-title { display: flex; align-items: center; gap: 10px; }
.agent-title .sub { color: var(--subtle); font: 13px var(--mono); }

/* an agent's own colour on its avatar */
.avatar.hued { background: color-mix(in srgb, var(--hue) 22%, var(--avatar-bg)); border-color: color-mix(in srgb, var(--hue) 70%, var(--avatar-line)); color: var(--hue); }
.avatar img.portrait { width: 100%; height: 100%; display: block; border-radius: inherit; }
.avatar.xs { width: 18px; height: 18px; font-size: 8px; border-radius: 4px; border-width: 1px; }
/* an avatar beside a name keeps its own shape (the name's span rules aren't for it) */
.person > .avatar, .me > .avatar { display: inline-grid; overflow: visible; color: var(--avatar-text); font-size: 12px; }
.person > .avatar.hued, .me > .avatar.hued { color: var(--hue); }

/* ---- the office (office.js): rooms on one floor, the things in them glowing with their names beneath, the crew
   at their desks, and what they think and say in bubbles. Every theme restyles these through the tokens. ---- */
.office { position: relative; width: 100%; }
.office-stage { position: relative; margin: 0 auto; }
.office-plane { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.office-paths, .office-talk { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.office-crew, .office-bubbles, .office-ftags { position: absolute; inset: 0; pointer-events: none; }
.office-crew > *, .office-hud > * { pointer-events: auto; }
.office-crew { z-index: 3; }
.office-talk { z-index: 4; }
.office-bubbles { z-index: 5; }
.office-hud { position: absolute; inset: 0; z-index: 6; pointer-events: none; }

.room { position: absolute; display: flex; flex-direction: column; padding: 10px 14px 12px; color: var(--text);
  background-color: var(--room-bg); background-image: var(--floor-grid); background-size: var(--floor-grid-size);
  border: var(--room-wall) solid var(--room-line); border-radius: var(--room-radius); box-shadow: var(--room-shadow); }
.room.corner-1 { border-top-right-radius: calc(var(--room-radius) * 5); }
.room.corner-3 { border-bottom-left-radius: calc(var(--room-radius) * 4); }
.room.round { border-radius: 50%; padding: 54px 44px 36px; align-items: center; }
.room.round .room-floor { flex: none; justify-content: center; min-height: 0; }
.room.round .decor { display: none; }
.room-name { display: flex; align-items: baseline; gap: 6px; max-width: 100%; color: var(--room-name); font: var(--room-name-font); text-align: left; white-space: nowrap; }
.room-name .nm { overflow: hidden; text-overflow: ellipsis; }
.room-name .sym { color: var(--gold); font-size: .8em; }
.room-name small { font: 11px var(--mono); color: var(--room-sub); letter-spacing: .04em; }
.room-name:hover .nm { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.room-name .bell { align-self: center; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); color: var(--on-gold); font: 700 11px var(--sans); }
.room.busy { --busy: 1; }
.room-things { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 18px; margin-top: 8px; }
.room-floor { position: relative; flex: 1; min-height: 60px; display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-end; gap: 8px 14px; margin-top: 6px; }
.room.round .room-things { justify-content: center; }
.office.with-ring .office-stage::before { content: ""; position: absolute; left: calc(var(--ring-x) - var(--ring-r)); top: calc(var(--ring-y) - var(--ring-r)); width: calc(var(--ring-r) * 2); height: calc(var(--ring-r) * 2);
  border-radius: 50%; border: 1.5px dashed var(--line); pointer-events: none; }
.door { position: absolute; bottom: calc(-1 * var(--room-wall)); left: 50%; width: 46px; height: var(--room-wall); margin-left: -23px; background: var(--floor-bg); }
.office[data-layout="single"] .door { display: none; }
.spot { position: absolute; width: 1px; height: 1px; }
.spot[data-spot="0"] { right: 22%; bottom: 24px; }
.spot[data-spot="1"] { right: 8%; bottom: 24px; }
.spot[data-spot="2"] { right: 36%; bottom: 24px; }
.spot[data-spot="3"] { right: 50%; bottom: 24px; }
.kind-library .spot[data-spot="0"] { right: 30%; bottom: 46px; }
.kind-library .spot[data-spot="1"] { right: 52%; bottom: 46px; }

/* a thing in a room: its picture glows, its name sits beneath */
.thing { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; padding: 0; color: var(--tag); text-align: center; border-radius: 4px; }
.thing .art { position: relative; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 3px; padding: 5px; background: var(--thing-bg);
  border: var(--thing-line-w) solid var(--thing-line); border-radius: var(--thing-radius); box-shadow: var(--glow-ring); transition: box-shadow .2s, transform .15s; }
.thing:hover .art, .thing:focus-visible .art { transform: translateY(-2px); }
.thing .tag { display: flex; flex-direction: column; align-items: center; max-width: 150px; }
.thing .tag b { font: var(--tag-font); text-transform: var(--tag-case); letter-spacing: var(--tag-track); color: var(--tag); white-space: nowrap; }
.thing .tag small { font: var(--tag-font); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--tag-sub); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thing.warn .tag small { color: var(--gold); }
.thing.live .art::after, .thing.fresh .art::after { content: ""; position: absolute; inset: -9px; border-radius: inherit; box-shadow: 0 0 0 2px var(--glow); opacity: 0; animation: glow-pulse 2.6s ease-in-out infinite; pointer-events: none; }
@keyframes glow-pulse { 50% { opacity: .9; } }
.t-board .art { width: 98px; height: 50px; }
.t-board .note { width: 19px; height: 11px; background: #fff7c2; border: 1px solid #0003; }
.t-board .note.running { background: #ffd27a; } .t-board .note.review { background: #cdbcff; } .t-board .note.blocked { background: #ff9a84; }
.t-board .note.none { opacity: .35; }
.t-shelf .art { width: 124px; height: 50px; flex-wrap: nowrap; align-items: flex-end; gap: 2px; padding: 4px 5px 5px; overflow: hidden; }
.t-shelf .book { flex: none; width: 5px; height: var(--h); border: 1px solid var(--thing-line); border-radius: 1px; background: var(--book, #1d2433); }
.t-shelf .book:nth-child(3n+1) { background: #f7f5ef; } .t-shelf .book:nth-child(3n+2) { background: #c9c5b8; }
.t-shelf .book.ghost { opacity: .18; }
.t-shelf .book.fresh { background: var(--glow); box-shadow: 0 0 8px var(--glow); }
.t-shelf .book.out { background: transparent; border-style: dashed; border-color: var(--gold); }
.t-belt .art { width: 112px; height: 20px; padding: 2px 4px; background-image: repeating-linear-gradient(90deg, #0002 0 2px, transparent 2px 12px); flex-wrap: nowrap; gap: 14px; }
.t-belt .box { width: 13px; height: 12px; border: 1px solid var(--thing-line); background: #d8a35a; }
.t-log .art { width: 44px; height: 34px; gap: 2px; padding: 4px; flex-wrap: nowrap; }
.t-log .a-page { flex: 1; background: repeating-linear-gradient(#0000 0 4px, #0003 4px 5px), #fffefb; border: 1px solid #0003; }
.t-pin .art { width: 66px; height: 42px; background: #d9b07a; }
.t-pin .a-card { width: 17px; height: 13px; background: #fffefb; transform: rotate(calc((var(--i) - 1.5) * 4deg)); }
.t-mailbox .art { width: 36px; height: 34px; background: #e0503a; }
.t-mailbox .flag { position: absolute; right: -6px; top: -10px; width: 4px; height: 16px; background: var(--text); }
.t-mailbox.live .flag { background: #ffd65a; height: 20px; }
.t-wall .art { width: 92px; height: 38px; background: #1d2433; display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.t-wall .cell { background: #4fbf7a; border-radius: 1px; } .t-wall .cell.working { background: #ffd65a; } .t-wall .cell.failing, .t-wall .cell.away { background: #ff7a64; } .t-wall .cell.waiting { background: #7cc4ff; }
.t-deleg .art { width: 86px; height: 44px; background: #fffefb; flex-direction: column; flex-wrap: nowrap; gap: 4px; padding: 6px 8px; }
.t-deleg .line { height: 5px; width: 80%; background: var(--hue, var(--text)); border-radius: 2px; }
.t-deleg .line:nth-child(2n) { width: 62%; } .t-deleg .line.none { opacity: .2; }
.t-catalog .art { width: 50px; height: 54px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.t-catalog .a-drawer { border: 1.5px solid var(--thing-line); border-radius: 2px; }
.t-returns .art { width: 72px; height: 32px; }
.t-returns .tray { position: absolute; left: 8px; bottom: 5px; width: 40px; height: 14px; border: 1.5px solid var(--thing-line); background: #fffefb; }
.t-returns .paper { position: absolute; left: 14px; bottom: 12px; width: 28px; height: 16px; border: 1px solid var(--thing-line); background: var(--glow); transform: rotate(-8deg); }
.t-desk .art { width: 156px; height: 40px; border-radius: 26px 26px 6px 6px; background: var(--thing-bg); }
/* a trusted circle: the link to the other workspaces, a line between two buildings that carries a pulse */
.t-link .art { width: 96px; height: 40px; flex-wrap: nowrap; align-items: center; gap: 0; padding: 6px 7px; }
.t-link .a-end { flex: none; width: 18px; height: 22px; border: var(--thing-line-w) solid var(--thing-line); border-radius: 3px 3px 1px 1px; background: var(--gold-bg-2);
  box-shadow: inset 0 -7px 0 color-mix(in srgb, var(--thing-line) 30%, transparent); }
.t-link .a-end.far { background: color-mix(in srgb, var(--glow) 35%, var(--thing-bg)); }
.t-link .a-end.many { box-shadow: inset 0 -7px 0 color-mix(in srgb, var(--thing-line) 30%, transparent), 4px -4px 0 -1px var(--thing-line); }
.t-link .a-wire { position: relative; flex: 1; height: 2px; margin: 0 3px; background: repeating-linear-gradient(90deg, var(--thing-line) 0 4px, transparent 4px 7px); }
.t-link .a-pulse { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 8px var(--glow); animation: link-pulse 1.8s ease-in-out infinite alternate; }
@keyframes link-pulse { to { left: calc(100% - 8px); } }
.t-link.warn .a-wire { background: repeating-linear-gradient(90deg, var(--red, #e0503a) 0 4px, transparent 4px 10px); }
/* a circle's room is shared: a second, dashed wall around it */
.room.kind-circle { outline: 2px dashed color-mix(in srgb, var(--gold) 60%, transparent); outline-offset: 4px; }
.room.kind-circle .room-name .sym { color: var(--gold); }
.t-desk { position: relative; order: 2; }
.desk-seat { position: absolute; left: 50%; top: -14px; width: 1px; height: 1px; }
.kind-reception .room-things { align-items: flex-end; }
.kind-reception .t-desk { margin: 26px auto 0; }
.t-drop { flex: 1 1 100%; min-height: 96px; justify-content: center; padding: 12px; border: 2px dashed var(--gold); border-radius: 14px; background: var(--gold-bg-2); transition: background .15s; }
.t-drop .art { display: none; }
.t-drop .tag { max-width: none; gap: 3px; }
.t-drop .tag b { font: 600 15px/1.3 var(--sans); text-transform: none; letter-spacing: 0; white-space: normal; }
.t-drop .tag small { font: 12.5px/1.4 var(--sans); white-space: normal; max-width: 300px; }
.t-drop .recent { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 6px; pointer-events: auto; }
.t-drop .chip { cursor: pointer; }
.office.dragging .t-drop, .room.kind-office.drop-on .t-drop { background: var(--gold-bg); box-shadow: 0 0 0 4px var(--gold-line); }
.room.kind-office.drop-on { box-shadow: var(--room-shadow), 0 0 0 4px var(--gold); }
.kind-office .room-things { order: 2; }

/* desks, chairs and the furniture that's only there to look at */
.desk { position: relative; width: 94px; height: 84px; flex: none; }
.desk::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36px; background: var(--desk); border: 2px solid var(--desk-line); border-radius: 4px; }
.desk .screen { position: absolute; left: 34px; bottom: 30px; width: 26px; height: 16px; background: var(--desk-line); border-radius: 2px; }
.desk .chair { position: absolute; left: 50%; top: 22px; width: 1px; height: 1px; }
.desk.mine::before { background: var(--gold-bg); }
.guest-seat { position: relative; width: 60px; height: 84px; flex: none; }
.guest-seat .chair { position: absolute; left: 50%; top: 22px; width: 1px; height: 1px; }
.kind-office .room-floor { justify-content: flex-end; flex: 0 0 auto; order: 1; }
.decor { flex: none; display: block; }
.decor.plant { width: 26px; height: 26px; border-radius: 50%; background: #5f9a6a; box-shadow: inset 0 0 0 4px #4b8457; align-self: flex-end; }
.decor.sofa { width: 120px; height: 34px; border-radius: 12px; background: #b5542e33; border: 2px solid var(--room-line); }
.decor.table { width: 54px; height: 54px; border-radius: 50%; background: var(--desk); border: 2px solid var(--room-line); }
.decor.cooler { width: 24px; height: 40px; border-radius: 6px; background: #fffefb; border: 2px solid var(--room-line); box-shadow: inset 0 12px 0 #8cc7e8; }
.reading { position: relative; width: 150px; height: 46px; border-radius: 23px; background: var(--desk); border: 2px solid var(--room-line); margin: 0 auto; }
.reading .lamp { position: absolute; right: 18px; top: -10px; width: 14px; height: 14px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 18px 6px #ffe45c66; }
.chairs { display: flex; gap: 8px; } .chairs .chair { width: 24px; height: 24px; border: 2px solid var(--room-line); border-radius: 6px; display: block; }
.mat { width: 90px; height: 12px; background: var(--gold); opacity: .5; border-radius: 3px; position: absolute; bottom: -4px; left: 50%; margin-left: -45px; }

/* the crew: a disc in each agent's colour, its name, a gem for its state */
.ag { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 2; transition-property: transform; transition-timing-function: cubic-bezier(.45, .05, .4, 1); cursor: grab; outline: none; }
.ag-body { position: absolute; left: -19px; top: -19px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  background: var(--agent-bg); border: var(--agent-ring) solid var(--hue, var(--text)); color: var(--hue, var(--text)); font: var(--agent-font); box-shadow: 0 4px 10px #0000002a; }
.ag-face { line-height: 1; }
.ag-name { position: absolute; top: 21px; left: 0; transform: translateX(-50%); white-space: nowrap; padding: 1px 7px; border-radius: 999px; background: var(--agent-tag-bg); color: var(--agent-tag-text); font: 600 10.5px/1.5 var(--sans); }
.ag-gem { position: absolute; right: -4px; top: -3px; width: 10px; height: 10px; transform: rotate(45deg); border-radius: 2px; background: #9aa0a6; box-shadow: 0 0 0 2px var(--agent-bg); }
.ag.working .ag-gem { background: #4fbf7a; } .ag.waiting .ag-gem { background: #f2b640; } .ag.failing .ag-gem { background: #e0503a; } .ag.away .ag-gem { background: #9aa0a6; }
.ag.me .ag-gem, .ag.overmind .ag-gem, .ag.visitor .ag-gem { display: none; }
/* an agent visiting from another workspace in a circle: its workspace's initials on a tag, and it can't be dragged */
.ag.visitor { cursor: pointer; }
.ag-hive { position: absolute; left: -12px; bottom: -6px; min-width: 18px; height: 14px; padding: 0 3px; border-radius: 4px; display: grid; place-items: center;
  background: var(--gold); color: var(--on-gold); font: 700 8.5px/1 var(--mono); letter-spacing: .02em; box-shadow: 0 0 0 2px var(--agent-bg); }
.ag:has(.ag-sprite) .ag-hive { bottom: auto; top: -18px; left: 11px; }
.ag.away .ag-body { opacity: .55; }
.ag-star { position: absolute; left: -7px; top: -7px; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--agent-bg); }
.ag-star::before { content: "★"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--on-gold); font: 10px/1 var(--sans); }
.ag.working .ag-body::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--hue, var(--gold)); opacity: 0; animation: ag-ring 2.4s ease-in-out infinite; }
@keyframes ag-ring { 50% { opacity: .75; } }
.ag.walking .ag-body { animation: bob .42s ease-in-out infinite alternate; }
@keyframes bob { to { transform: translateY(-3px); } }
.ag:hover .ag-body, .ag:focus-visible .ag-body { box-shadow: 0 0 0 3px var(--gold), 0 6px 14px #0003; }
.ag.lifted { opacity: .4; }
.ag.gone { opacity: 0; pointer-events: none; transition: opacity .3s; }
.ag.me { cursor: default; }
.ag.me .ag-body { border-style: dashed; }
/* a sprite steps through its state's frames: a strip of --n frames, one round every --ms (office.js, floor-pixels.js) */
.ag-sprite { position: absolute; left: -16px; top: -54px; width: 32px; height: 64px; image-rendering: pixelated;
  background: var(--sheet) 0 0 / calc(var(--n) * 100%) 100% no-repeat; animation: ag-frames var(--ms) steps(var(--n), jump-none) infinite; }
@keyframes ag-frames { to { background-position: 100% 0; } }
.ag:has(.ag-sprite) .ag-body { background: none; border: 0; box-shadow: none; }
.ag:has(.ag-sprite) .ag-name { top: 14px; }

/* what they think (a cloud) and what they say (aimed at whoever is listening) */
.bubble { position: absolute; left: 0; top: 0; max-width: 220px; padding: 7px 11px 8px; font: var(--bubble-font); color: var(--bubble-text); background: var(--bubble-bg);
  border-radius: var(--bubble-radius); box-shadow: 0 8px 22px #0000002a; animation: bubble-pop .25s ease-out; }
@keyframes bubble-pop { from { opacity: 0; margin-top: 6px; } }
.bubble .who { display: block; margin-bottom: 1px; font: var(--who-font); letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--hue, var(--gold)) 70%, var(--bubble-text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bubble .said { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bubble.thought { border: 1.5px solid var(--bubble-line); }
.bubble .puff { position: absolute; border-radius: 50%; background: var(--bubble-bg); border: 1.5px solid var(--bubble-line); }
.bubble .p1 { width: 9px; height: 9px; left: calc(var(--tx, 50%) - 4px); bottom: -13px; }
.bubble .p2 { width: 5px; height: 5px; left: calc(var(--tx, 50%) + 4px); bottom: -21px; }
/* the puffs leave from whichever edge faces the agent (office.js sets .tail-* and --tx); none when it's tethered */
.bubble.tail-top .p1 { bottom: auto; top: -13px; }
.bubble.tail-top .p2 { bottom: auto; top: -21px; }
.bubble.tail-left .p1 { left: -13px; top: calc(50% - 2px); bottom: auto; }
.bubble.tail-left .p2 { left: -21px; top: calc(50% + 6px); bottom: auto; }
.bubble.tail-right .p1 { left: auto; right: -13px; top: calc(50% - 2px); bottom: auto; }
.bubble.tail-right .p2 { left: auto; right: -21px; top: calc(50% + 6px); bottom: auto; }
.bubble.far .puff { display: none; }
/* a click on a bubble opens the agent's outlook */
.office-bubbles .bubble, .office-bubbles .bubble-chip { pointer-events: auto; cursor: pointer; transition: box-shadow .12s, filter .12s; }
.office-bubbles .bubble:hover, .office-bubbles .bubble-chip:hover { filter: brightness(1.04); box-shadow: 0 0 0 2px var(--hue, var(--gold)), 0 10px 26px #00000033; }
.office-bubbles .bubble:focus-visible, .office-bubbles .bubble-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.bubble-chip { position: absolute; left: 0; top: 0; display: grid; place-items: center; min-width: 26px; height: 22px; padding: 0 7px; border-radius: 11px;
  background: var(--bubble-bg); color: var(--bubble-text); border: 1.5px solid var(--hue, var(--bubble-line)); font: 700 13px/1 var(--sans); box-shadow: 0 4px 12px #0000002a; animation: bubble-pop .25s ease-out; }
.bubble-chip.speech { background: var(--hue, var(--gold)); color: var(--speech-text); border-color: transparent; }
/* an agent's outlook, opened from a bubble: a card beside it, or a sheet from the bottom on a phone */
.outlook-back { position: fixed; inset: 0; z-index: 57; pointer-events: none; }
.outlook { position: fixed; z-index: 58; width: min(340px, calc(100vw - 16px)); max-height: min(70vh, 560px); overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
  padding: 12px 14px 14px; background: var(--dialog); color: var(--text); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); animation: pop-in .14s ease-out; outline: none; }
.outlook.sheet-style { left: 0 !important; right: 0; bottom: 0; top: auto !important; width: 100%; max-height: 78vh; border-radius: 16px 16px 0 0; padding-bottom: max(14px, env(safe-area-inset-bottom)); animation: sheet-in .2s ease-out; }
.outlook-back:has(+ .outlook.sheet-style) { pointer-events: auto; background: var(--backdrop-light); }
.outlook-head { display: flex; align-items: center; gap: 10px; }
.outlook-head .avatar { width: 40px; height: 40px; }
.outlook-head .grow { min-width: 0; flex: 1; }
.outlook-head strong { display: block; font-size: 15px; }
.outlook-head small { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.outlook-head .chip { flex: none; }
.outlook-head .icon-btn { width: 30px; height: 30px; margin: -4px -6px 0 0; }
.outlook-part h3 { margin: 0 0 5px; font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--subtle); }
.outlook-part .thought-line { margin: 0; }
.outlook-said { margin: 0; padding: 7px 10px; border-radius: 10px; background: var(--panel-2); font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.outlook-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 4px; font: 11.5px var(--mono); color: var(--subtle); }
.outlook-blocked { margin: 6px 0 0; padding: 6px 9px; border-radius: 8px; background: var(--red-bg); color: var(--red-text); font-size: 12.5px; }
.outlook-actions { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; border-top: 1px solid var(--line-soft); margin-top: 2px; padding-top: 10px; }
.office-talk .tether { fill: none; stroke: var(--hue, var(--line-strong)); stroke-width: 1.5; stroke-dasharray: 2 4; opacity: .7; }
.bubble.speech { background: var(--hue, var(--gold)); color: var(--speech-text); border-radius: var(--speech-radius); }
.bubble.speech .who { color: color-mix(in srgb, var(--speech-text) 78%, transparent); }
.bubble.speech:not(.live) { opacity: .82; }
.office-talk .arrow { fill: none; stroke: var(--hue, var(--gold)); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 5 6; }
.office-talk .arrow.live { animation: flow 1.2s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -22; } }
.office-talk .arrow-end { fill: var(--hue, var(--gold)); }
.office-talk .beam { stroke: var(--hue, var(--gold)); stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; opacity: .8; }
.beam-tag { position: absolute; left: 0; top: 0; padding: 2px 9px; margin: -11px 0 0 -40px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--hue, var(--gold)); font: 600 11px var(--sans); color: var(--text); white-space: nowrap; }
.ftag { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; width: 160px; margin-left: -80px; text-align: center; }
.ftag b { font: var(--tag-font); text-transform: var(--tag-case); letter-spacing: var(--tag-track); color: var(--tag); white-space: nowrap; }
.ftag small { font: var(--tag-font); font-weight: 400; color: var(--tag-sub); white-space: nowrap; }
.ftag.room-tag b { font: var(--room-name-font); font-size: 15px; text-transform: none; letter-spacing: 0; padding: 0 8px; border-radius: 999px; background: var(--bg); }

/* the map's HUD: the coordinator's plan, zoom, and a minimap */
.office.with-map .office-paths .trail { fill: none; stroke: var(--line-strong); stroke-width: 3; stroke-dasharray: 2 9; stroke-linecap: round; opacity: .6; }
.quest { position: absolute; left: 10px; top: 10px; width: 250px; padding: 10px 12px; border-radius: 10px; background: var(--dialog); box-shadow: inset 0 0 0 1px var(--gold-line), var(--shadow); pointer-events: auto; }
.quest-head { display: flex; align-items: center; gap: 8px; font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.quest-head .star::before { content: "★"; }
.quest-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12.5px; }
.quest-row .q { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quest-row .mark { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--subtle); flex: none; }
.quest-row.running .mark, .quest-row.review .mark { border-color: var(--gold); background: radial-gradient(var(--gold) 40%, transparent 45%); }
.quest-row.blocked .mark { border-color: var(--red); }
.quest-row .who { width: 8px; height: 8px; border-radius: 50%; background: var(--hue); flex: none; }
/* on a narrow screen the plan is a button in the corner that opens it */
.quest.folded { left: auto; right: 0; top: 4px; width: auto; max-width: 100%; padding: 0; }
.quest.folded .quest-head { width: 100%; margin: 0; padding: 8px 11px; min-height: 36px; cursor: pointer; }
.quest.folded.open { width: min(290px, 100%); padding-bottom: 8px; }
.quest.folded.open .quest-head { margin-bottom: 2px; }
.quest.folded .quest-row { padding: 4px 12px; }
.quest-head .count { margin-left: auto; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--gold); color: var(--on-gold); font: 600 10.5px/18px var(--mono); letter-spacing: 0; text-align: center; }
.zoom { position: absolute; right: 10px; top: 10px; display: flex; gap: 6px; pointer-events: auto; }
.zoom button { width: 36px; height: 36px; border-radius: 8px; background: var(--dialog); box-shadow: inset 0 0 0 1px var(--gold-line); font: 600 16px var(--mono); color: var(--gold); }
.minimap { position: absolute; right: 10px; bottom: 10px; width: 150px; border-radius: 8px; background: var(--dialog); box-shadow: inset 0 0 0 1px var(--gold-line); overflow: hidden; pointer-events: none; }
.mm-room { position: absolute; background: var(--line-strong); opacity: .5; border-radius: 2px; }
.mm-room.kind-office, .mm-room.kind-lead { background: var(--gold); opacity: .7; }

/* the compact office (office.js sets .compact under 560px wide): smaller things and desks, the same rooms */
.office.compact .room { padding: 7px 10px 9px; }
.office.compact .room-name { font-size: min(1em, 16px); }
.office.compact .room-things { gap: 4px 8px; margin-top: 6px; }
.office.compact .thing { gap: 4px; }
.office.compact .thing .tag { max-width: 96px; }
.office.compact .thing .tag small { max-width: 96px; }
.office.compact .thing .art { padding: 3px; gap: 2px; }
.office.compact .t-board .art { width: 66px; height: 36px; }
.office.compact .t-board .note { width: 13px; height: 8px; }
.office.compact .t-shelf .art { width: 76px; height: 36px; padding: 3px 4px 4px; }
.office.compact .t-shelf .book { width: 4px; }
.office.compact .t-belt .art { width: 72px; height: 16px; gap: 8px; }
.office.compact .t-belt .box { width: 10px; height: 9px; }
.office.compact .t-log .art { width: 34px; height: 26px; padding: 3px; }
.office.compact .t-pin .art { width: 48px; height: 30px; }
.office.compact .t-pin .a-card { width: 12px; height: 9px; }
.office.compact .t-mailbox .art { width: 28px; height: 26px; }
.office.compact .t-wall .art { width: 64px; height: 28px; gap: 2px; }
.office.compact .t-deleg .art { width: 62px; height: 32px; padding: 4px 6px; gap: 3px; }
.office.compact .t-deleg .line { height: 4px; }
.office.compact .t-catalog .art { width: 38px; height: 40px; }
.office.compact .t-returns .art { width: 52px; height: 24px; }
.office.compact .t-returns .tray { left: 6px; bottom: 4px; width: 28px; height: 10px; }
.office.compact .t-returns .paper { left: 10px; bottom: 9px; width: 20px; height: 12px; }
.office.compact .t-desk .art { width: 112px; height: 30px; }
.office.compact .t-link .art { width: 70px; height: 30px; padding: 4px 5px; }
.office.compact .t-link .a-end { width: 13px; height: 16px; }
.office.compact .kind-reception .t-desk { margin-top: 18px; }
.office.compact .t-drop { min-height: 74px; padding: 8px; }
.office.compact .t-drop .tag, .office.compact .t-drop .tag small { max-width: none; }
.office.compact .t-drop .tag b { font-size: 14px; }
.office.compact .room-floor { min-height: 46px; gap: 4px 8px; margin-top: 4px; }
.office[data-layout="single"] .room-floor { align-content: flex-end; }
.office.sprites .room:not(.kind-office) .room-floor { margin-top: 22px; }      /* room for the sprites' heads under the things' names */
.office.sprites .kind-reception .t-desk { margin-top: 42px; }
.office.sprites.compact .kind-reception .t-desk { margin-top: 34px; }
.office.sprites.compact .room:not(.kind-office) .room-floor { margin-top: 20px; }      /* a room's own page: open floor above the desks for what they say */
.office.compact .desk { width: 60px; height: 58px; }
.office.compact .desk::before { height: 24px; }
.office.compact .desk .screen { left: 22px; bottom: 21px; width: 16px; height: 10px; }
.office.compact .desk .chair, .office.compact .guest-seat .chair { top: 14px; }
.office.compact .guest-seat { width: 44px; height: 58px; }
.office.compact :is(.decor.sofa, .decor.table, .decor.cooler, .reading, .chairs, .mat) { display: none; }
.office.compact .decor.plant { width: 18px; height: 18px; box-shadow: inset 0 0 0 3px #4b8457; }
.office.compact .spot { bottom: 18px !important; }
.office.compact .ag-body { left: -16px; top: -16px; width: 32px; height: 32px; font-size: .85em; }
.office.compact .ag-name { top: 17px; font-size: 10px; }
.office.compact .ag-sprite { left: -13px; top: -43px; width: 26px; height: 52px; }
.office.compact .ag:has(.ag-sprite) .ag-name { top: 11px; }
.office.compact .bubble { max-width: 168px; padding: 5px 9px 6px; font-size: 12px; }
.office.compact .bubble .said { -webkit-line-clamp: 2; }

@media (max-width: 720px) {
  .room { padding: 8px 10px 10px; }
  .room-things { gap: 8px 12px; }
  .thing .tag { max-width: 110px; }
  .t-board .art { width: 80px; } .t-shelf .art { width: 96px; } .t-belt .art { width: 84px; }
  .bubble { max-width: 170px; font-size: 12px; }
}

/* ================================================================ themes
   Paper and ink is :root above. Each theme below sets a handful of core colours and fonts; the shared blocks derive
   the rest (tints, lines, fields) from them, and a theme's own rules redraw what tokens can't reach. */

/* the dark ones share their derived colours */
:root:is([data-theme="night"], [data-theme="blueprint"], [data-theme="pixel"], [data-theme="glass"], [data-theme="map"], [data-theme="ring"], [data-theme="cozy"]) {
  color-scheme: dark;
  --panel-2: color-mix(in srgb, var(--panel) 93%, var(--text)); --hover: color-mix(in srgb, var(--panel) 86%, var(--text));
  --line-soft: color-mix(in srgb, var(--line) 55%, var(--panel)); --line-strong: color-mix(in srgb, var(--line) 62%, var(--text)); --line-hover: color-mix(in srgb, var(--line) 40%, var(--text));
  --gold-2: color-mix(in srgb, var(--gold) 72%, #fff); --gold-bg: color-mix(in srgb, var(--gold) 16%, var(--panel)); --gold-line: color-mix(in srgb, var(--gold) 50%, var(--panel));
  --green-bg: color-mix(in srgb, var(--green) 14%, var(--panel)); --green-line: color-mix(in srgb, var(--green) 45%, var(--panel));
  --red-bg: color-mix(in srgb, var(--red) 15%, var(--panel)); --red-line: color-mix(in srgb, var(--red) 45%, var(--panel)); --red-text: color-mix(in srgb, var(--red) 50%, #fff);
  --blue-bg: color-mix(in srgb, var(--blue) 14%, var(--panel)); --blue-line: color-mix(in srgb, var(--blue) 45%, var(--panel));
  --purple-bg: color-mix(in srgb, var(--purple) 16%, var(--panel)); --purple-line: color-mix(in srgb, var(--purple) 45%, var(--panel)); --purple-text: color-mix(in srgb, var(--purple) 55%, #fff);
  --shadow: 0 18px 60px #0009;
  --field: color-mix(in srgb, var(--bg) 60%, var(--panel)); --field-2: var(--field); --sunken: color-mix(in srgb, var(--bg) 85%, #000); --bar: var(--panel);
  --drawer: var(--panel); --dialog: var(--raised); --row-hover: color-mix(in srgb, var(--panel) 93%, var(--text));
  --code-bg: color-mix(in srgb, var(--bg) 55%, var(--panel)); --code-text: var(--text); --tag-bg: var(--hover); --tag-text: var(--muted);
  --avatar-bg: var(--hover); --avatar-line: var(--line-strong); --avatar-text: var(--text); --avatar-agent: var(--gold-bg);
  --nav-text: var(--text); --nav-active: color-mix(in srgb, var(--gold) 15%, var(--panel)); --topline: var(--gold);
  --mention-bg: color-mix(in srgb, var(--gold) 12%, transparent); --mention-tag: var(--gold-bg); --unread-bg: color-mix(in srgb, var(--gold) 6%, transparent);
  --flash: color-mix(in srgb, var(--gold) 25%, transparent); --gold-bg-2: color-mix(in srgb, var(--gold) 8%, var(--panel)); --gold-grad: var(--gold-bg-2); --drop-bg: var(--gold-bg-2);
  --toast-bg: var(--raised); --toast-text: var(--text); --backdrop: #000000b3; --backdrop-light: #00000080;
  --overlay: color-mix(in srgb, var(--bg) 92%, transparent); --knob: var(--text); --shade: #0008; --floor-ink-bg: var(--bg);
  --floor-bg: var(--bg); --floor-grid: none; --room-bg: var(--panel); --room-line: var(--line); --room-name: var(--text); --room-sub: var(--subtle);
  --thing-bg: var(--raised); --thing-line: var(--line-strong); --tag: var(--text); --tag-sub: var(--muted);
  --desk: var(--raised); --desk-line: var(--line-strong); --agent-bg: var(--panel); --agent-tag-bg: var(--text); --agent-tag-text: var(--bg);
  --bubble-bg: var(--raised); --bubble-text: var(--text); --bubble-line: var(--line-strong); --speech-text: #12141b;
  --glow: var(--gold); --glow-ring: 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent), 0 0 20px 3px color-mix(in srgb, var(--gold) 38%, transparent);
}
:root:is([data-theme="night"], [data-theme="blueprint"], [data-theme="pixel"], [data-theme="glass"], [data-theme="map"], [data-theme="ring"], [data-theme="cozy"]) ::selection { background: color-mix(in srgb, var(--gold) 35%, transparent); }
/* the light ones too */
:root:is([data-theme="iso"], [data-theme="daylight"]) {
  --panel-2: color-mix(in srgb, var(--panel) 95%, var(--text)); --hover: color-mix(in srgb, var(--panel) 91%, var(--text));
  --line-soft: color-mix(in srgb, var(--line) 55%, var(--panel)); --line-strong: color-mix(in srgb, var(--line) 70%, var(--text)); --line-hover: color-mix(in srgb, var(--line) 45%, var(--text));
  --gold-2: color-mix(in srgb, var(--gold) 80%, #000); --gold-bg: color-mix(in srgb, var(--gold) 12%, #fff); --gold-line: color-mix(in srgb, var(--gold) 45%, #fff); --on-gold: #fff;
  --field: #fff; --field-2: #fff; --sunken: var(--panel-2); --bar: var(--panel-2); --drawer: var(--panel); --dialog: #fff;
  --row-hover: var(--panel-2); --code-bg: var(--panel-2); --code-text: var(--text); --tag-bg: var(--hover); --tag-text: var(--muted);
  --avatar-bg: var(--hover); --avatar-line: var(--line-strong); --avatar-text: var(--text); --avatar-agent: var(--gold-bg);
  --nav-text: var(--text); --nav-active: var(--gold-bg); --topline: var(--gold);
  --mention-bg: color-mix(in srgb, var(--gold) 10%, transparent); --mention-tag: var(--gold-bg); --unread-bg: color-mix(in srgb, var(--gold) 6%, #fff);
  --flash: color-mix(in srgb, var(--gold) 25%, transparent); --gold-bg-2: color-mix(in srgb, var(--gold) 6%, #fff); --gold-grad: var(--gold-bg-2); --drop-bg: var(--gold-bg-2);
  --overlay: color-mix(in srgb, var(--bg) 92%, transparent); --floor-ink-bg: var(--bg);
  --nav-active: color-mix(in srgb, var(--gold) 10%, #fff);
}
/* agents' colours are bright; on paper-coloured ground their letters and rings go darker so they still read */
:root:is(:not([data-theme]), [data-theme="paper"], [data-theme="iso"], [data-theme="daylight"]) .ag-body { color: color-mix(in srgb, var(--hue, var(--text)) 45%, #000); border-color: color-mix(in srgb, var(--hue, var(--text)) 70%, #000); }
:root:is(:not([data-theme]), [data-theme="paper"], [data-theme="iso"], [data-theme="daylight"]) .avatar.hued { background: color-mix(in srgb, var(--hue) 30%, #fff); border-color: color-mix(in srgb, var(--hue) 60%, #000); color: color-mix(in srgb, var(--hue) 45%, #000); }
:root:is(:not([data-theme]), [data-theme="paper"], [data-theme="iso"], [data-theme="daylight"]) .bubble .who { color: color-mix(in srgb, var(--hue, var(--gold)) 45%, #000); }
:root:is(:not([data-theme]), [data-theme="paper"], [data-theme="iso"], [data-theme="daylight"]) .office-talk .arrow { stroke: color-mix(in srgb, var(--hue, var(--gold)) 75%, #000); }

/* ---- 1 · Night shift: a dark office after hours, warm lamps over each room, amber for what's live */
:root[data-theme="night"] {
  --bg: #0b0e14; --panel: #12151c; --raised: #1a1e27; --line: #2c3039;
  --text: #ece6da; --muted: #aaa497; --subtle: #8c877b;
  --gold: #f5b450; --on-gold: #1d1406; --green: #80e2a0; --red: #ff8a73; --blue: #68d6ec; --purple: #c0a2ff;
  --radius: 8px;
  --floor-grid: radial-gradient(circle at 28% 62%, #f5b45024, transparent 55%), repeating-linear-gradient(0deg, #ffffff06 0 1px, transparent 1px 26px); --floor-grid-size: auto;
  --room-bg: #17140f; --room-line: #2b2a26; --room-wall: 2px; --room-radius: 14px; --room-shadow: 0 18px 40px #00000073;
  --room-name: #ece6da; --room-sub: #8f978f;
  --thing-bg: #2c2419; --thing-line: #3b3022; --thing-line-w: 1.5px; --thing-radius: 6px;
  --tag: #ece6da; --tag-sub: #a59d8f;
  --desk: #262b35; --desk-line: #3a3f4a;
  --agent-bg: #12151c; --agent-tag-bg: #ece6da; --agent-tag-text: #0b0e14;
  --bubble-bg: #f3eee4; --bubble-text: #2c2419; --bubble-line: #f3eee4; --bubble-radius: 12px;
}
:root[data-type="night"] .room-name { text-transform: uppercase; letter-spacing: .14em; }
:root[data-type="night"] .room-name small { text-transform: none; letter-spacing: 0; }
:root[data-theme="night"]:not([data-conn="off"]) .ag.working .ag-body { box-shadow: 0 0 0 6px #f5b4501f, 0 0 22px #f5b45066; }
:root[data-theme="night"] .askbar { background: #12151c; }
:root[data-theme="night"] .rail::before { background: #10131a; }

/* ---- 2 · Blueprint: the floor plan as drawn, chalk lines on blue paper */
:root[data-theme="blueprint"] {
  --bg: #0b2547; --panel: #0d2a51; --raised: #11325e; --line: #3d6294;
  --text: #e6f0ff; --muted: #a9bfe0; --subtle: #8fa8cc;
  --gold: #7fe3ff; --on-gold: #062039; --green: #80e2a0; --red: #ff9c88; --blue: #9fd0ff; --purple: #c9b5ff;
  --radius: 2px;
  --room-bg: #7fe3ff08; --room-line: #dbe8ff; --room-wall: 3px; --room-radius: 0; --room-shadow: none;
  --room-name: #dbe8ff; --room-sub: #9db4d8;
  --thing-bg: transparent; --thing-line: #dbe8ffcc; --thing-line-w: 1.5px; --thing-radius: 0;
  --tag: #dbe8ff; --tag-sub: #9db4d8;
  --desk: transparent; --desk-line: #dbe8ff99;
  --agent-bg: #0b2547; --agent-ring: 2px; --agent-tag-bg: #dbe8ff; --agent-tag-text: #0b2547;
  --bubble-bg: #0b2547f2; --bubble-text: #e6f0ff; --bubble-line: #9fefff; --bubble-radius: 3px; --speech-radius: 2px;
  --glow: #7fe3ff; --glow-ring: 0 0 0 1px #7fe3ff73, 0 0 16px #7fe3ff59;
}
:root[data-theme="blueprint"] .shell { background-image: linear-gradient(#96beff12 1px, transparent 1px), linear-gradient(90deg, #96beff12 1px, transparent 1px), linear-gradient(#96beff24 1px, transparent 1px), linear-gradient(90deg, #96beff24 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px; }
:root[data-type="blueprint"] .room-name { text-transform: uppercase; letter-spacing: .16em; }
:root[data-type="blueprint"] .room-name small { text-transform: none; letter-spacing: 0; }
:root[data-theme="blueprint"] .thing .art, :root[data-theme="blueprint"] .thing .art > :not(.cell):not(.line) { background: transparent; border-color: #dbe8ffaa; }
:root[data-theme="blueprint"] .thing .art > :not(.cell):not(.line):not(.flag) { border: 1px solid #dbe8ffaa; box-shadow: none; }
:root[data-theme="blueprint"] .t-shelf .book.fresh, :root[data-theme="blueprint"] .t-returns .paper { background: #7fe3ff; }
:root[data-theme="blueprint"] .t-wall .art { background: transparent; }
:root[data-theme="blueprint"] .decor, :root[data-theme="blueprint"] .reading, :root[data-theme="blueprint"] .chairs .chair, :root[data-theme="blueprint"] .desk .screen { background: transparent; border: 1.5px solid #dbe8ff88; box-shadow: none; }
:root[data-theme="blueprint"] .desk::before { border-style: solid; border-width: 1.5px; }
:root[data-theme="blueprint"] .bubble.thought, :root[data-theme="blueprint"] .bubble .puff { border-style: dashed; }
:root[data-theme="blueprint"] .outlook, :root[data-theme="blueprint"] .rail::before, :root[data-theme="blueprint"] .logdrawer, :root[data-theme="blueprint"] .peek { background: #091f3df5; border: 1.5px solid #dbe8ff55; border-radius: 4px; }
:root[data-theme="blueprint"] .askbar, :root[data-theme="blueprint"] .top-btn, :root[data-theme="blueprint"] .crumb, :root[data-theme="blueprint"] .tab { border-radius: 3px; }
:root[data-theme="blueprint"] .card-box { background: #0b254799; border: 1.5px solid #dbe8ff55; border-radius: 2px; }

/* ---- 3 · Isometric: the office seen from a corner, soft lilac walls and coral where things happen */
:root[data-theme="iso"] {
  color-scheme: light;
  --bg: #f4eee6; --panel: #fbf8fc; --raised: #ffffff; --line: #d9cee8;
  --text: #3a3150; --muted: #5c5370; --subtle: #6c6382;
  --gold: #c9502b; --green: #2f8a57; --green-bg: #e2f4e8; --green-line: #a8d8b9; --red: #b8402c; --red-bg: #fbe6e0; --red-line: #e8b0a4; --red-text: #8a2e1f;
  --blue: #3f6fc4; --blue-bg: #e6eefb; --blue-line: #b3c7ec; --purple: #7a5cd6; --purple-bg: #efe9fb; --purple-line: #cbbcf0; --purple-text: #563fa3;
  --radius: 10px; --shadow: 0 18px 50px #46326424;
  --toast-bg: #3a3150; --toast-text: #fbf8fc; --backdrop: #3a315066; --backdrop-light: #3a315044;
  --floor-bg: #ebe3f6;
  --floor-grid: linear-gradient(45deg, #3a315009 25%, transparent 25%, transparent 75%, #3a315009 75%), linear-gradient(45deg, #3a315009 25%, transparent 25%, transparent 75%, #3a315009 75%); --floor-grid-size: 40px 40px;
  --room-bg: #ebe3f6; --room-line: #ffffff; --room-wall: 7px; --room-radius: 4px; --room-shadow: 9px 9px 0 #c8badc;
  --room-name: #3a3150; --room-sub: #6d6480;
  --glow: #ff8a65; --glow-ring: 0 0 0 4px #ff8a6533, 0 6px 16px #46326424;
  --thing-bg: #ffffff; --thing-line: #c8badc; --thing-line-w: 2px; --thing-radius: 6px;
  --tag: #3a3150; --tag-sub: #6d6480;
  --desk: #d8b48a; --desk-line: #c39a6c;
  --agent-bg: #ffffff; --agent-ring: 3px; --agent-tag-bg: #3a3150; --agent-tag-text: #ffffff;
  --bubble-bg: #ffffff; --bubble-text: #3a3150; --bubble-line: #d9cee8; --bubble-radius: 14px; --speech-text: #2a2140;
}
:root[data-theme="iso"] .shell { background-image: linear-gradient(45deg, #3a315008 25%, transparent 25%, transparent 75%, #3a315008 75%), linear-gradient(45deg, #3a315008 25%, transparent 25%, transparent 75%, #3a315008 75%); background-size: 48px 48px; background-position: 0 0, 24px 24px; }
:root[data-theme="iso"] .rail::before { border-radius: 22px; border-color: #e6ddf0; box-shadow: 0 10px 30px #46326414; }
:root[data-theme="iso"] .btn, :root[data-theme="iso"] .top-btn, :root[data-theme="iso"] .crumb { border-radius: 999px; }
:root[data-theme="iso"] .card-box { border-radius: 18px; border-color: #e6ddf0; box-shadow: 0 8px 24px #46326410; }
:root[data-theme="iso"] .bubble.thought { box-shadow: 0 10px 24px #46326426; }

/* ---- 4 · 16-bit: a game's menus. Framed windows over a dotted night, a gold cursor, pixel type, the crew as sprites */
:root[data-theme="pixel"] {
  --bg: #17132b; --panel: #2b2140; --raised: #352a4f; --line: #6c5f96;
  --text: #f4f0ff; --muted: #c9c1ec; --subtle: #a59cc9;
  --gold: #ffd65a; --gold-2: #fff6b0; --on-gold: #1b1530; --green: #6fdc8c; --red: #ff8a78; --blue: #9fd3ff; --purple: #d0b4ff;
  --radius: 3px; --shadow: 6px 6px 0 #0009;
  --frame: #f4f0ff; --frame-in: #1b1530; --window: linear-gradient(180deg, #33284d 0%, #251c3a 100%);
  --floor-bg: #2b2140;
  --floor-grid: linear-gradient(90deg, #1b15301f 2px, transparent 2px), linear-gradient(#1b15301f 2px, transparent 2px); --floor-grid-size: 24px 24px;
  --room-bg: #8fa3c0; --room-line: #2b2140; --room-wall: 6px; --room-radius: 0; --room-shadow: 0 0 0 3px #f4f0ff, 6px 6px 0 3px #0009;
  --room-name: #f4f0ff; --room-sub: #c9c1ec;
  --glow: #ffd65a; --glow-ring: 0 0 0 3px #ffd65a99;
  --thing-bg: #f4f0ff; --thing-line: #1b1530; --thing-line-w: 3px; --thing-radius: 0;
  --tag: #fff6b0; --tag-sub: #f4f0ff;
  --desk: #b07a46; --desk-line: #4a2b17;
  --agent-bg: #2b2140; --agent-ring: 3px; --agent-tag-bg: #1b1530; --agent-tag-text: #fff6b0;
  --bubble-bg: #f4f0ff; --bubble-text: #1b1530; --bubble-line: #1b1530; --bubble-radius: 0; --speech-radius: 0;
}
:root[data-type="pixel"] body { font-size: 16px; -webkit-font-smoothing: auto; }
:root[data-theme="pixel"] .shell { background: #17132b radial-gradient(#2a2450 1px, transparent 1.5px) 0 0 / 8px 8px; }
:root[data-type="pixel"] h1, :root[data-type="pixel"] h2, :root[data-type="pixel"] h3, :root[data-type="pixel"] h4 { letter-spacing: 0; font-weight: 400; }
/* code stays in a real monospace: a pixel font is for menus, not for reading a stack trace */
:root[data-type="pixel"] code, :root[data-type="pixel"] pre, :root[data-type="pixel"] .body code, :root[data-type="pixel"] .body pre, :root[data-type="pixel"] input.mono { font-family: var(--code) !important; }
/* windows framed in white, floating on the dotted ground */
:root[data-theme="pixel"] .outlook, :root[data-theme="pixel"] .rail::before, :root[data-theme="pixel"] .logdrawer, :root[data-theme="pixel"] .peek, :root[data-theme="pixel"] .drawer, :root[data-theme="pixel"] dialog, :root[data-theme="pixel"] .toast, :root[data-theme="pixel"] .popup, :root[data-theme="pixel"] .menu {
  background: var(--window); border: 3px solid var(--frame); border-radius: 4px; box-shadow: inset 0 0 0 2px var(--frame-in), var(--shadow); }
:root[data-theme="pixel"] .drawer-head { background: transparent; border-bottom: 2px solid var(--frame-in); }
:root[data-theme="pixel"] .card-box, :root[data-theme="pixel"] .card, :root[data-theme="pixel"] .col, :root[data-theme="pixel"] .wf-card, :root[data-theme="pixel"] .agent-card, :root[data-theme="pixel"] .plugin-card, :root[data-theme="pixel"] .mem-card, :root[data-theme="pixel"] .elect, :root[data-theme="pixel"] .crew-role, :root[data-theme="pixel"] .office-chat {
  border: 2px solid var(--line-strong); border-radius: 3px; box-shadow: inset 0 0 0 1px var(--frame-in), 3px 3px 0 #0008; background: var(--window); }
/* the menu cursor: a gold pointer beside whatever is chosen */
:root[data-theme="pixel"] .rail-item { border-radius: 2px; }
:root[data-theme="pixel"] .rail-item.on { background: var(--hover); color: var(--gold-2); }
:root[data-theme="pixel"] .rail-item.on::before { content: ""; position: absolute; left: -2px; top: 50%; margin-top: -5px; border: 5px solid transparent; border-left: 7px solid var(--gold); filter: drop-shadow(1px 1px 0 #000a); }
:root[data-theme="pixel"] .rail-head { color: var(--gold); }
:root[data-type="pixel"] .rail-head { letter-spacing: .04em; }
/* buttons press in */
:root[data-theme="pixel"] .btn, :root[data-theme="pixel"] .top-btn, :root[data-theme="pixel"] .crumb, :root[data-theme="pixel"] .chip-btn, :root[data-theme="pixel"] .elect-chip, :root[data-theme="pixel"] .role-chip { border: 2px solid var(--line-strong); border-radius: 3px; box-shadow: 2px 2px 0 #000a; }
:root[data-type="pixel"] .btn, :root[data-type="pixel"] .top-btn, :root[data-type="pixel"] .crumb, :root[data-type="pixel"] .chip-btn, :root[data-type="pixel"] .elect-chip, :root[data-type="pixel"] .role-chip { font-family: var(--mono); font-size: 11px; font-weight: 400; }
:root[data-theme="pixel"] .btn:active:not(:disabled), :root[data-theme="pixel"] .top-btn:active { transform: translate(2px, 2px); box-shadow: none; }
:root[data-theme="pixel"] .btn.primary, :root[data-theme="pixel"] .top-btn.needs-btn.on { border-color: #fff3c4; }
:root[data-theme="pixel"] .btn.ghost { box-shadow: none; border-color: transparent; }
:root[data-theme="pixel"] .icon-btn, :root[data-theme="pixel"] .tab { border-radius: 2px; }
:root[data-theme="pixel"] input, :root[data-theme="pixel"] textarea, :root[data-theme="pixel"] select, :root[data-theme="pixel"] .composer, :root[data-theme="pixel"] .askbar {
  border: 2px solid var(--line); border-radius: 3px; box-shadow: inset 2px 2px 0 #0006; }
:root[data-theme="pixel"] .askbar { background: #120e22; }
:root[data-theme="pixel"] .askbar input, :root[data-theme="pixel"] .composer textarea { box-shadow: none !important; border: 0; }
:root[data-theme="pixel"] input:focus, :root[data-theme="pixel"] textarea:focus, :root[data-theme="pixel"] select:focus, :root[data-theme="pixel"] .composer:focus-within, :root[data-theme="pixel"] .askbar:focus-within { border-color: var(--gold); box-shadow: inset 2px 2px 0 #0006; }
:root[data-theme="pixel"] .ask-send, :root[data-theme="pixel"] .askbar .avatar, :root[data-theme="pixel"] .topbar .me .avatar, :root[data-theme="pixel"] .crew-row .avatar, :root[data-theme="pixel"] .brand-mark { border-radius: 2px; }
:root[data-theme="pixel"] .badge, :root[data-theme="pixel"] .chip, :root[data-theme="pixel"] .status, :root[data-theme="pixel"] .prio, :root[data-theme="pixel"] .conn, :root[data-theme="pixel"] .kbd, :root[data-theme="pixel"] .lead-tag, :root[data-theme="pixel"] .ask-who { border-radius: 2px; }
:root[data-theme="pixel"] .badge { box-shadow: 1px 1px 0 #000a; }
:root[data-type="pixel"] .badge, :root[data-type="pixel"] .chip, :root[data-type="pixel"] .status { font-size: 9px; }
:root[data-theme="pixel"] .chip, :root[data-theme="pixel"] .status { border-width: 2px; }
:root[data-theme="pixel"] .avatar { border-radius: 3px; border-width: 2px; }
:root[data-theme="pixel"] .avatar img, :root[data-theme="pixel"] img.portrait { image-rendering: pixelated; }
:root[data-theme="pixel"] .avatar.hued { background: color-mix(in srgb, var(--hue) 35%, #2b2140); }
:root[data-theme="pixel"] .msg { border-radius: 3px; }
:root[data-theme="pixel"] .msg.mention { box-shadow: inset 3px 0 0 var(--gold); }
:root[data-theme="pixel"] .scroll { scrollbar-color: var(--line) #120e22; }
:root[data-type="pixel"] .composer-row .hint { font-family: var(--sans); font-size: 13px; }
/* the rooms: tiled floors, a name plate, things on labels */
:root[data-theme="pixel"] .room.kind-library, :root[data-theme="pixel"] .room.kind-office { --room-bg: #b07a46; --floor-grid: conic-gradient(#cf9a62 0 25%, #b07a46 0 50%); --floor-grid-size: 32px 32px; }
:root[data-theme="pixel"] .room.kind-commons, :root[data-theme="pixel"] .room.kind-reception { --room-bg: #c6bce0; --floor-grid: conic-gradient(#d8d0ec 0 25%, #c6bce0 0 50%); --floor-grid-size: 40px 40px; }
:root[data-theme="pixel"] .room.kind-lead { --room-bg: #57c873; --floor-grid: linear-gradient(90deg, #3fae5a 2px, transparent 2px), linear-gradient(#3fae5a 2px, transparent 2px); --floor-grid-size: 16px 16px; }
:root[data-theme="pixel"] .room-name { align-self: flex-start; max-width: 100%; padding: 2px 8px 3px; background: #2b2140; box-shadow: 2px 2px 0 #0008; }
:root[data-theme="pixel"] .thing .tag b { padding: 1px 4px; background: #1b1530; }
:root[data-theme="pixel"] .thing .tag small { padding: 0 4px; background: #1b1530cc; }
:root[data-theme="pixel"] .ftag b, :root[data-theme="pixel"] .ftag small { padding: 0 4px; background: #1b1530; }
:root[data-theme="pixel"] .bubble { border: 3px solid #1b1530; box-shadow: 3px 3px 0 #0008; }
:root[data-theme="pixel"] .bubble .puff { border-radius: 0; border-width: 3px; }
:root[data-theme="pixel"] .bubble-chip { border-radius: 0; border-width: 3px; box-shadow: 3px 3px 0 #0008; }
:root[data-theme="pixel"] .office-bubbles .bubble:hover { box-shadow: 0 0 0 3px var(--gold), 3px 3px 0 #0008; }
:root[data-theme="pixel"] .ag-name { border-radius: 0; }
:root[data-type="pixel"] .ag-name { font: 400 9px/1.6 var(--mono); }
:root[data-theme="pixel"] .t-drop { border-style: dashed; border-width: 3px; border-radius: 0; background: #1b153099; }
:root[data-theme="pixel"] .t-drop .tag b, :root[data-theme="pixel"] .t-drop .tag small { background: none; }
:root[data-theme="pixel"] .office-talk .arrow { stroke-width: 3; stroke-dasharray: 4 6; stroke-linecap: square; }

/* ---- 5 · Glass: frosted panes over coloured light */
:root[data-theme="glass"] {
  --bg: #0a1020; --panel: #141b2e; --raised: #1b2338; --line: #343f5c;
  --text: #eef2ff; --muted: #b8bfd6; --subtle: #9aa6c4;
  --gold: #ffb85c; --on-gold: #2a1a05; --green: #5cc28a; --red: #ff7a8a; --blue: #68d6ec; --purple: #b597ff;
  --radius: 12px; --shadow: 0 24px 60px #000a;
  --room-bg: #ffffff0b; --room-line: #ffffff24; --room-wall: 1px; --room-radius: 26px; --room-shadow: inset 0 1px 0 #ffffff38, 0 20px 50px #0006;
  --room-name: #b8bfd6; --room-sub: #9aa6c4;
  --thing-bg: #ffffff10; --thing-line: #ffffff30; --thing-line-w: 1px; --thing-radius: 10px;
  --tag: #eef2ff; --tag-sub: #9aa6c4;
  --desk: #ffffff0d; --desk-line: #ffffff26;
  --agent-bg: #1b2338; --agent-tag-bg: #ffffff24; --agent-tag-text: #eef2ff;
  --bubble-bg: #1d2640ee; --bubble-text: #eef2ff; --bubble-line: #ffffff2e; --bubble-radius: 16px; --speech-radius: 14px;
  --glow: #ffb85c; --glow-ring: 0 0 0 1px #ffb85c80, 0 0 24px 4px #ffb85c40;
}
:root[data-theme="glass"] .shell { background-color: #0a1020; background-image: radial-gradient(circle at 30% 24%, #ffb85c29, transparent 32%), radial-gradient(circle at 22% 30%, #5fddc81f, transparent 26%), radial-gradient(circle at 74% 58%, #b597ff29, transparent 30%), radial-gradient(circle at 40% 90%, #68d6ec1c, transparent 30%); background-attachment: fixed; }
:root[data-theme="glass"] .outlook, :root[data-theme="glass"] .rail::before, :root[data-theme="glass"] .logdrawer, :root[data-theme="glass"] .peek, :root[data-theme="glass"] .menu, :root[data-theme="glass"] .drawer, :root[data-theme="glass"] dialog {
  background: #161e33c4; border: 0; border-radius: 22px; box-shadow: inset 0 0 0 1px #ffffff24, inset 0 1px 0 #ffffff38, 0 24px 60px #0008; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
:root[data-theme="glass"] .drawer { border-radius: 22px 0 0 22px; }
:root[data-theme="glass"] .card-box, :root[data-theme="glass"] .elect, :root[data-theme="glass"] .crew-role, :root[data-theme="glass"] .office-chat, :root[data-theme="glass"] .card, :root[data-theme="glass"] .col { background: #ffffff0b; border: 0; box-shadow: inset 0 0 0 1px #ffffff1f, inset 0 1px 0 #ffffff2e; border-radius: 20px; }
:root[data-theme="glass"] .askbar { background: #ffffff0f; box-shadow: inset 0 0 0 1px #ffffff29, inset 0 1px 0 #ffffff33; }
:root[data-theme="glass"] .top-btn:not(.on), :root[data-theme="glass"] .crumb { border-color: #ffffff29; background: #ffffff0a; }
:root[data-type="glass"] .room-name { text-transform: uppercase; letter-spacing: .16em; }
:root[data-type="glass"] .room-name small { text-transform: none; letter-spacing: 0; }
:root[data-theme="glass"] .bubble { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px #ffffff2e, 0 10px 26px #0007; }
:root[data-theme="glass"] .bubble.speech { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---- 6 · Map: the office as a game map, every room its own ground, a trail to follow and a quest log */
:root[data-theme="map"] {
  --bg: #0e1a1c; --panel: #132326; --raised: #1a2e31; --line: #2f4a4a;
  --text: #e8f1ec; --muted: #a9c4ba; --subtle: #8fa59d;
  --gold: #7cf0c5; --on-gold: #062019; --green: #7cf0c5; --red: #ff8a8a; --blue: #68d6ec; --purple: #b597ff;
  --radius: 6px;
  --room-bg: #20372c; --room-line: #7cf0c540; --room-wall: 2px; --room-radius: 6px; --room-shadow: 0 0 0 1px #0007, 0 14px 30px #0006;
  --room-name: #c4ffe9; --room-sub: #8fa59d;
  --thing-bg: #0e1a1ccc; --thing-line: #7cf0c566; --thing-line-w: 1.5px; --thing-radius: 4px;
  --tag: #e8f1ec; --tag-sub: #a9c4ba;
  --desk: #0e1a1c99; --desk-line: #7cf0c555;
  --agent-bg: #0e1a1c; --agent-tag-bg: #e8f1ec; --agent-tag-text: #0e1a1c;
  --bubble-bg: #081012ee; --bubble-text: #e8f1ec; --bubble-line: #7cf0c566; --bubble-radius: 6px; --speech-radius: 4px;
  --glow: #ffcf5c; --glow-ring: 0 0 0 1px #ffcf5c80, 0 0 18px 3px #ffcf5c3d;
}
:root[data-theme="map"] .shell { background-image: radial-gradient(circle at 18% 30%, #7cf0c50d, transparent 30%), radial-gradient(circle at 80% 70%, #68d6ec0d, transparent 30%); }
:root[data-theme="map"] .room:nth-child(6n+2) { --room-bg: #2a2142; }
:root[data-theme="map"] .room:nth-child(6n+3) { --room-bg: #14313a; }
:root[data-theme="map"] .room:nth-child(6n+4) { --room-bg: #372b20; }
:root[data-theme="map"] .room:nth-child(6n+5) { --room-bg: #232647; }
:root[data-theme="map"] .room:nth-child(6n+6) { --room-bg: #3a1c2c; }
:root[data-theme="map"] .room.kind-lead { --room-bg: #26294a; --room-line: #ffcf5c99; }
:root[data-theme="map"] .room.kind-office { --room-bg: #2b2626; }
:root[data-theme="map"] .room.kind-commons { border-radius: 40% 40% 24px 24px / 30% 30% 24px 24px; }
:root[data-type="map"] .room-name, :root[data-type="map"] .thing .tag b { text-transform: uppercase; letter-spacing: .12em; }
:root[data-type="map"] .room-name small { text-transform: none; letter-spacing: 0; }
:root[data-theme="map"] .rail::before, :root[data-theme="map"] .logdrawer, :root[data-theme="map"] .peek { background: #081012e6; border-color: #7cf0c533; }
:root[data-theme="map"] .quest-head .star, :root[data-theme="map"] .quest-head { color: #ffcf5c; }

/* ---- 7 · Coordinator view: the lead in the middle, every room around them, lines to whoever they've handed work */
:root[data-theme="ring"] {
  --bg: #0c0f1a; --panel: #121726; --raised: #181e30; --line: #2a3048;
  --text: #eef0f8; --muted: #a6adc2; --subtle: #8b93ab;
  --gold: #ffcf5c; --on-gold: #2a2108; --green: #5cc28a; --red: #ff8a9a; --blue: #68d6ec; --purple: #b597ff;
  --radius: 10px;
  --room-bg: #141a2b; --room-line: #ffffff17; --room-wall: 1.5px; --room-radius: 22px; --room-shadow: 0 16px 40px #0007;
  --room-name: #a6adc2; --room-sub: #8b93ab;
  --thing-bg: #1d2438; --thing-line: #ffffff26; --thing-line-w: 1px; --thing-radius: 8px;
  --tag: #eef0f8; --tag-sub: #8b93ab;
  --desk: #1d2438; --desk-line: #ffffff22;
  --agent-bg: #0c0f1a; --agent-tag-bg: #eef0f8; --agent-tag-text: #0c0f1a;
  --bubble-bg: #eef0f8; --bubble-text: #141a2b; --bubble-line: #eef0f8; --bubble-radius: 14px;
}
:root[data-type="ring"] .room-name { text-transform: uppercase; letter-spacing: .16em; }
:root[data-type="ring"] .room-name small { text-transform: none; letter-spacing: 0; }
:root[data-theme="ring"] .room.kind-lead { --room-line: #ffcf5c; --room-wall: 2px; background-image: radial-gradient(circle, #ffcf5c26, #141a2b 68%); background-size: auto; box-shadow: 0 0 0 10px #ffcf5c0d, 0 0 60px #ffcf5c26; }
:root[data-theme="ring"] .room.kind-lead .room-name { color: #ffe7a8; }
:root[data-theme="ring"] .office.with-ring .office-stage::before { border: 1px solid #ffffff14; background: radial-gradient(circle, #ffcf5c12, #ffffff05 45%, transparent 70%); box-shadow: inset 0 0 0 60px #ffffff04; }
:root[data-theme="ring"] .office-talk .beam { stroke-dasharray: 3 7; opacity: .9; }

/* ---- 8 · Cozy: a warm studio. Wooden rooms on a dark floor, cream cards, thoughts in handwriting */
:root[data-theme="cozy"] {
  --bg: #2a211c; --panel: #33281f; --raised: #3d3026; --line: #5a4436;
  --text: #f6ead8; --muted: #d9c6ae; --subtle: #b8a28a;
  --gold: #ffb15c; --on-gold: #2a1606; --green: #8fd6a0; --red: #ff9a7c; --blue: #9cc8f0; --purple: #c9b5ff;
  --radius: 12px;
  --floor-bg: #2a211c;
  --floor-grid: repeating-linear-gradient(0deg, #5a3c2329 0 2px, transparent 2px 22px); --floor-grid-size: auto;
  --room-bg: #c9a074; --room-line: #4a372c; --room-wall: 6px; --room-radius: 14px; --room-shadow: 0 16px 34px #0007;
  --room-name: #2a211c; --room-sub: #4a372c;
  --thing-bg: #fffaf2; --thing-line: #4a372c; --thing-line-w: 2px; --thing-radius: 6px;
  --tag: #2a211c; --tag-sub: #3d2618;
  --desk: #8a5a36; --desk-line: #3d2618;
  --agent-bg: #fffaf2; --agent-tag-bg: #2a211c; --agent-tag-text: #fffaf2;
  --bubble-bg: #fffaf2; --bubble-text: #2a211c; --bubble-line: #4a372c; --bubble-radius: 16px;
  --glow: #ffc878; --glow-ring: 0 0 0 4px #ffc87866, 0 0 22px 4px #ffc87859;
}
/* cream cards keep dark ink: the tokens flip inside them */
:root[data-theme="cozy"] :is(.outlook, .rail, .card-box, .logdrawer, .peek, .menu, .popup, .drawer, dialog, .toast, .office-chat, .elect, .crew-role, .askbar, .sheet, .card, .col, .floor-note) {
  --text: #2a211c; --muted: #5a463a; --subtle: #6b5a4c; --panel: #fffaf2; --panel-2: #f6ead8; --raised: #fffdf8; --hover: #f1e3cd;
  --line: #e3d6c2; --line-soft: #efe4d3; --line-strong: #c9b39c; --line-hover: #a5896e;
  --gold: #b5542e; --gold-2: #8f3f20; --gold-bg: #f8e4d6; --gold-line: #e2b79e; --gold-bg-2: #fbf0e4; --on-gold: #fffaf2;
  --green: #2f7d4b; --green-bg: #e3f2e6; --green-line: #a8d4b4; --red: #b5402e; --red-bg: #fbe5df; --red-line: #e6ac9f; --red-text: #8a2f1f;
  --field: #fffdf8; --field-2: #fffdf8; --sunken: #f6ead8; --bar: #f6ead8; --dialog: #fffaf2; --drawer: #fffaf2; --row-hover: #f6ead8;
  --code-bg: #f1e3cd; --code-text: #2a211c; --tag-bg: #f1e3cd; --tag-text: #4a372c; --nav-text: #2a211c; --nav-active: #f6ddc0;
  --avatar-bg: #f1e3cd; --avatar-line: #c9b39c; --avatar-text: #2a211c; --avatar-agent: #f8e4d6;
  --mention-bg: #ffe2b866; --mention-tag: #f8e4d6; --unread-bg: #fbf0e4; --flash: #ffc87866; --drop-bg: #fbf0e4; --gold-grad: #fbf0e4;
  --blue: #2f5f9a; --blue-bg: #e4eef8; --blue-line: #aac6e4; --purple: #6a4fa8; --purple-bg: #eee8fa; --purple-line: #c9bbe8; --purple-text: #4f3a85;
  --shadow: 0 18px 50px #2a211c40;
  color: var(--text); color-scheme: light;
}
:root[data-theme="cozy"] .rail::before { background: #fffaf2; border-color: #4a372c; border-width: 2px; }
:root[data-theme="cozy"] .rail-item.on { background: #f6ddc0; }
:root[data-theme="cozy"] .room { background-image: var(--floor-grid), linear-gradient(#0000, #0000); }
:root[data-theme="cozy"] .room.kind-commons, :root[data-theme="cozy"] .room.kind-reception { --room-bg: #e8d3b4; --floor-grid: repeating-linear-gradient(90deg, #5a3c231f 0 2px, transparent 2px 26px); }
:root[data-theme="cozy"] .room.kind-office { --room-bg: #f6ead8; --floor-grid: none; }
:root[data-theme="cozy"] .room-name { align-self: flex-start; max-width: 100%; padding: 3px 10px; border-radius: 999px; background: #fffaf2; box-shadow: 0 2px 0 #4a372c; }
:root[data-theme="cozy"] .thing .tag b { padding: 1px 6px; border-radius: 4px; background: #fffaf2e6; }
:root[data-theme="cozy"] .bubble .said { -webkit-line-clamp: 3; }
:root[data-type="cozy"] .bubble.speech { font: 13px/1.38 var(--sans); }
:root[data-type="cozy"] .thought-line { font-size: 19px; }
:root[data-theme="cozy"] .t-drop { background: #fffaf2; }
:root[data-theme="cozy"] .t-drop :is(b, small) { color: #2a211c; }
:root[data-theme="cozy"] .office .beam-tag, :root[data-theme="cozy"] .ftag.room-tag b { background: #fffaf2; color: #2a211c; }

/* ---- 9 · Daylight: a bright studio, white rooms in deep frames, one blue for what to do next */
:root[data-theme="daylight"] {
  color-scheme: light;
  --bg: #f6f3ee; --panel: #ffffff; --raised: #ffffff; --line: #dcd5c9;
  --text: #23262d; --muted: #4f5561; --subtle: #646a75;
  --gold: #2f5fd0; --green: #2a7350; --green-bg: #e3f2e9; --green-line: #a6d0b8; --red: #b2412e; --red-bg: #fbe7e2; --red-line: #e2a698; --red-text: #8f2f1f;
  --blue: #2f5fd0; --blue-bg: #eaf0fc; --blue-line: #b9c6e6; --purple: #4a52b8; --purple-bg: #e3e5fb; --purple-line: #bcc0ee; --purple-text: #363c8f;
  --radius: 10px; --shadow: 0 18px 50px #3c322824;
  --toast-bg: #23262d; --toast-text: #f6f3ee; --backdrop: #23262d66; --backdrop-light: #23262d44;
  --floor-bg: #f6f3ee;
  --floor-grid: repeating-linear-gradient(45deg, #785a3c0d 0 2px, transparent 2px 18px), repeating-linear-gradient(-45deg, #785a3c0d 0 2px, transparent 2px 18px); --floor-grid-size: auto;
  --room-bg: #efe7da; --room-line: #ffffff; --room-wall: 6px; --room-radius: 16px; --room-shadow: 0 10px 30px #3c32280f, 0 0 0 1px #3c322814;
  --room-name: #23262d; --room-sub: #646a75;
  --glow: #e0a62a; --glow-ring: 0 0 0 4px #e0a62a33, 0 0 16px 2px #e0a62a33;
  --thing-bg: #ffffff; --thing-line: #c9c0b2; --thing-line-w: 1.5px; --thing-radius: 8px;
  --tag: #23262d; --tag-sub: #646a75;
  --desk: #e9dcc6; --desk-line: #c9b9a0;
  --agent-bg: #ffffff; --agent-tag-bg: #23262d; --agent-tag-text: #ffffff;
  --bubble-bg: #ffffff; --bubble-text: #23262d; --bubble-line: #dcd5c9; --bubble-radius: 14px; --speech-text: #16181d;
}
:root[data-theme="daylight"] .rail::before { border-color: #ece6dc; box-shadow: 0 10px 30px #3c32280f; }
:root[data-theme="daylight"] .card-box { border-color: #ece6dc; border-radius: 16px; box-shadow: 0 10px 30px #3c32280f; }
:root[data-theme="daylight"] .btn, :root[data-theme="daylight"] .top-btn { border-radius: 999px; }
:root[data-theme="daylight"] .askbar { box-shadow: inset 0 0 0 1.5px #dcd5c9, 0 6px 18px #3c32280f; }

/* ================================================================ type
   Each theme's fonts, on their own so Settings → Appearance can pair one theme's type with another's colours.
   Paper and ink's are the :root defaults at the top. theme.js sets data-type to the theme's own unless the
   person picked other type. */
/* Night shift: Space Grotesk and JetBrains Mono */
:root[data-type="night"] {
  --sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --display: "Space Grotesk", ui-sans-serif, sans-serif; --title-font: 600 24px/1.15 var(--sans); --brand-font: 600 17px/1 var(--sans);
  --room-name-font: 500 10.5px/1.3 var(--mono); --tag-font: 500 9.5px/1.35 var(--mono); --agent-font: 600 13px/1 var(--mono);
  --bubble-font: 12.5px/1.38 var(--sans); --who-font: 500 9.5px var(--mono);
}
/* Blueprint: IBM Plex */
:root[data-type="blueprint"] {
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --display: "IBM Plex Sans", ui-sans-serif, sans-serif; --title-font: 500 22px/1.15 var(--mono); --brand-font: 600 15px/1 var(--mono);
  --room-name-font: 500 11px/1.3 var(--mono); --tag-font: 500 9.5px/1.35 var(--mono); --agent-font: 500 13px/1 var(--mono);
  --who-font: 500 9.5px var(--mono);
}
/* Isometric: Fredoka and Nunito */
:root[data-type="iso"] {
  --sans: "Nunito", ui-sans-serif, system-ui, sans-serif; --mono: "DM Mono", ui-monospace, Menlo, Consolas, monospace;
  --display: "Fredoka", "Nunito", ui-sans-serif, sans-serif; --title-font: 600 26px/1.1 var(--display); --brand-font: 600 21px/1 var(--display);
  --room-name-font: 600 17px/1.1 var(--display); --tag-font: 800 9.5px/1.35 var(--sans); --agent-font: 600 15px/1 var(--display);
  --bubble-font: 12.5px/1.38 var(--sans);
}
/* 16-bit: Pixelify Sans and Silkscreen */
:root[data-type="pixel"] {
  --sans: "Pixelify Sans", ui-sans-serif, system-ui, sans-serif; --mono: "Silkscreen", "Pixelify Sans", ui-monospace, monospace;
  --display: "Pixelify Sans", ui-sans-serif, sans-serif; --code: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --title-font: 600 24px/1.15 var(--sans); --brand-font: 400 15px/1 var(--mono); --room-name-font: 400 15px/1.2 var(--sans);
  --tag-font: 400 9px/1.4 var(--mono); --tag-track: .04em; --agent-font: 400 13px/1 var(--mono); --bubble-font: 14px/1.25 var(--sans);
  --who-font: 400 8.5px var(--mono);
}
/* Pixelify Sans joins "fi" and "ff" into one glyph that reads as "A" ("five" came out "Ave"); `font:` shorthands
   turn ligatures back on, hence !important */
:root[data-type="pixel"] *, :root[data-type="pixel"] *::before, :root[data-type="pixel"] *::after { font-variant-ligatures: none !important; }
/* Glass: Sora and Space Mono */
:root[data-type="glass"] {
  --sans: "Sora", ui-sans-serif, system-ui, sans-serif; --mono: "Space Mono", ui-monospace, Menlo, Consolas, monospace;
  --display: "Sora", ui-sans-serif, sans-serif; --title-font: 600 23px/1.15 var(--sans); --brand-font: 600 17px/1 var(--sans);
  --room-name-font: 400 10.5px/1.3 var(--mono); --tag-font: 400 9.5px/1.35 var(--mono); --agent-font: 600 13px/1 var(--sans);
  --who-font: 400 9.5px var(--mono);
}
/* Map: Chakra Petch and Barlow */
:root[data-type="map"] {
  --sans: "Barlow", ui-sans-serif, system-ui, sans-serif; --mono: "Chakra Petch", ui-monospace, Menlo, Consolas, monospace;
  --display: "Chakra Petch", ui-sans-serif, sans-serif; --title-font: 600 24px/1.15 var(--display); --brand-font: 600 17px/1 var(--display);
  --room-name-font: 600 12px/1.25 var(--mono); --tag-font: 600 9.5px/1.35 var(--mono); --agent-font: 600 13px/1 var(--mono);
  --who-font: 600 9.5px var(--mono);
}
/* Coordinator view: Plus Jakarta Sans and Fragment Mono */
:root[data-type="ring"] {
  --sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; --mono: "Fragment Mono", ui-monospace, Menlo, Consolas, monospace;
  --display: "Plus Jakarta Sans", ui-sans-serif, sans-serif; --title-font: 700 23px/1.15 var(--sans); --brand-font: 700 16px/1 var(--sans);
  --room-name-font: 400 10.5px/1.3 var(--mono); --tag-font: 400 9.5px/1.35 var(--mono); --agent-font: 700 14px/1 var(--sans);
  --who-font: 400 9.5px var(--mono);
}
/* Cozy: Lexend, with Caveat for thoughts */
:root[data-type="cozy"] {
  --sans: "Lexend", ui-sans-serif, system-ui, sans-serif; --mono: "DM Mono", ui-monospace, Menlo, Consolas, monospace;
  --display: "Caveat", "Lexend", cursive; --title-font: 600 22px/1.15 var(--sans); --brand-font: 600 17px/1 var(--sans);
  --room-name-font: 600 13px/1.2 var(--sans); --tag-font: 600 9.5px/1.35 var(--mono); --agent-font: 600 14px/1 var(--sans);
  --bubble-font: 600 17px/1.15 var(--display); --who-font: 500 9.5px var(--mono);
}
/* Daylight: Manrope and Red Hat Mono */
:root[data-type="daylight"] {
  --sans: "Manrope", ui-sans-serif, system-ui, sans-serif; --mono: "Red Hat Mono", ui-monospace, Menlo, Consolas, monospace;
  --display: "Manrope", ui-sans-serif, sans-serif; --title-font: 700 24px/1.15 var(--sans); --brand-font: 700 17px/1 var(--sans);
  --room-name-font: 700 14px/1.2 var(--sans); --tag-font: 600 9.5px/1.35 var(--mono); --agent-font: 700 14px/1 var(--sans);
}

/* ================================================================ the strip
   /?strip draws the floor as one row of rooms along the bottom of a screen, for the HiveBar Mac app (app.js,
   office.js's "strip" layout). The page is see-through above the rooms; --strip-air is the clear space there
   for bubbles and --strip-room the rooms' height. A browser preview gets a plain backdrop instead. */
html[data-strip] { --strip-air: 66px; --strip-room: 140px; --strip-hud: 196px; }
html[data-strip], html[data-strip] body { background: transparent !important; overflow: hidden; }
html[data-strip]:not([data-native]) body { background: linear-gradient(#5f86a8, #9db8cc 70%, #6d8f4e 70%) !important; }
html[data-strip] .shell { display: block; position: fixed; inset: auto 0 0 0; height: calc(var(--strip-air) + var(--strip-room)); background: transparent !important; }
html[data-strip] :is(.topbar, .rail, .pagebar, .logdrawer, .toasts, .floor-head, .floor-note) { display: none !important; }
html[data-strip] .main { position: absolute; left: 0; right: var(--strip-hud); top: 0; bottom: 0; padding: 0; }
html[data-strip] .view { height: 100%; }
html[data-strip] .office-host { height: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior: contain; }
html[data-strip] .office-host::-webkit-scrollbar { display: none; }
.office[data-layout="strip"] .office-stage { margin: 0; }
.office[data-layout="strip"] .office-plane { top: var(--strip-air); display: flex; gap: 10px; width: max-content; height: var(--strip-room); padding: 0 6px; }
.office[data-layout="strip"] .room { position: relative; left: auto !important; top: auto !important; width: auto !important; height: 100% !important; flex: none;
  display: grid; grid-template-columns: auto auto; grid-template-rows: auto minmax(0, 1fr); column-gap: 14px; align-items: end; }
.office[data-layout="strip"] .room-name { grid-column: 1 / -1; align-self: start; }
.office[data-layout="strip"] .room-things { flex-wrap: nowrap; margin: 0; align-self: end; }
.office[data-layout="strip"] .room-floor { flex: none; flex-wrap: nowrap; align-content: flex-end; margin: 0 !important; min-height: 58px; min-width: 60px; align-self: end; }
.office[data-layout="strip"] .door { display: none; }
/* standing room beside the desks for whoever is visiting */
.office[data-layout="strip"] .room-floor { padding-right: 56px; }
.office[data-layout="strip"] .spot[data-spot="0"] { right: 16px; }
.office[data-layout="strip"] .spot[data-spot="1"] { right: 42px; }
.office[data-layout="strip"] .spot[data-spot="2"] { right: 68px; }
.office[data-layout="strip"] .spot[data-spot="3"] { right: 94px; }

/* the panel at the right end: the workspace, and what's going on in it */
.strip-hud { position: absolute; right: 0; bottom: 0; width: var(--strip-hud); height: var(--strip-room); display: flex; flex-direction: column; gap: 6px; padding: 8px;
  background: var(--panel); border: 2px solid var(--line-strong); border-right: 0; border-bottom: 0; border-top-left-radius: 10px; color: var(--text); }
.strip-head { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 2px 4px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.strip-head strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.strip-head:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.strip-live { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--red); }
.strip-live.on { background: var(--green); }
.strip-stats { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.strip-stat { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; padding: 3px 8px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--raised); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.strip-stat:hover { border-color: var(--gold); }
.strip-stat b { font: 600 17px/1.1 var(--mono); }
.strip-stat small { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.strip-stat.alert b { color: var(--red); }

/* signing in, and the notices, sit on the strip itself */
html[data-strip] .auth { position: fixed; inset: auto 0 0 0; height: var(--strip-room); min-height: 0; display: block; }
html[data-strip] .auth-story, html[data-strip] :is(.auth-foot, #auth-sub, #setup-fields, #password-hint) { display: none !important; }
html[data-strip] .auth-panel { height: 100%; padding: 10px 22px; place-items: center start; border-top: 3px solid var(--gold); }
html[data-strip] .auth-form { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 14px; }
html[data-strip] .auth-form .eyebrow { flex-basis: 100%; margin: 0; }
html[data-strip] .auth-form h2 { margin: 0 8px 6px 0; font-size: 20px; }
html[data-strip] .auth-form .field { margin: 0; }
html[data-strip] .auth-form .btn { width: auto; min-height: 36px; margin: 0; }
html[data-strip] .auth-form .error { flex-basis: 100%; margin: 4px 0 0; padding: 4px 10px; }
html[data-strip] .loading { position: fixed; inset: auto 0 0 0; min-height: 0; height: var(--strip-room); grid-auto-flow: column; gap: 14px; background: var(--panel); border-top: 3px solid var(--gold); }
html[data-strip] .loading img { width: 40px; height: 40px; }
html[data-strip] .loading.strip-notice { cursor: pointer; color: var(--text); }
/* an agent that stopped after a failed wake, and the button that lets it go again */
.stopped-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 12px; color: var(--red); font-size: 13px; line-height: 1.45; }
.stopped-note p { margin: 0; flex: 1 1 240px; }

/* Usage counts: the report preview is shown whole, in a box that scrolls */
.usage-box details { margin-top: 10px; }
.usage-box summary { cursor: pointer; font-weight: 600; }
.usage-body { max-height: 340px; overflow: auto; white-space: pre; font-size: 12px; line-height: 1.45; margin-top: 8px; }
.usage-box ul.plain { list-style: none; padding: 0; margin: 8px 0 0; font-size: 13px; }
.usage-box label.opt { display: flex; gap: 8px; align-items: center; margin: 6px 0; }

/* a trusted circle's shared board, inside its room page */
.circle-board { flex: none; padding: 4px 0 10px; }
.circle-board .col { width: 230px; min-width: 230px; max-height: none; }
.circle-board .col-body { overflow: visible; }
.card.conflict { border-color: var(--red-line); box-shadow: inset 3px 0 0 var(--red); }
.room-cards .card-box.span-all { grid-column: 1 / -1; }
.pick-row { flex-wrap: nowrap; align-items: center; }
.pick-row select { width: auto; flex: 1; min-width: 0; }
.pick-row .hint { white-space: nowrap; margin: 0; }

/* ---------------------------------------------------------------- what each agent is doing
   Readable at a glance, like a 16-bit game: the sprite plays its state's frames (typing at a laptop, stretching awake,
   dozing, asleep and grey with no listener, dizzy after a failed wake, holding up a stop sign while held), and a small
   sign over its head says the same in every theme. Round tokens move to match. With reduced motion everything holds
   still on a frame that still says it; with the connection lost, the signs turn to "?" because the state isn't known. */
.ag-emote { position: absolute; left: 0; top: -42px; z-index: 3; display: flex; align-items: flex-end; justify-content: center; gap: 2px; transform: translateX(-50%); pointer-events: none; }
.ag:has(.ag-sprite) .ag-emote { top: -62px; }
.office.compact .ag:has(.ag-sprite) .ag-emote { top: -52px; }
.ag-emote i { display: block; font-style: normal; }
.ag-emote.e-idle { display: none; }
/* working: typing dots in a little bubble */
.e-working { padding: 4px 6px; border-radius: 9px; background: var(--bubble-bg); border: 1.5px solid var(--bubble-line); box-shadow: 0 2px 0 var(--shade); }
.e-working i { width: 5px; height: 5px; border-radius: 50%; background: var(--hue, var(--gold)); animation: ag-dot .9s ease-in-out infinite; }
.e-working .d2 { animation-delay: .15s; } .e-working .d3 { animation-delay: .3s; }
@keyframes ag-dot { 0%, 60%, 100% { transform: none; opacity: .55; } 30% { transform: translateY(-4px); opacity: 1; } }
/* waking: an "!" that pops up and down, as when someone in a game notices you */
.e-waking .bang { display: grid; place-items: center; width: 16px; height: 19px; border-radius: 4px; background: #ffd65a; color: #1b1530; border: 2px solid #1b1530;
  font: 900 14px/1 var(--sans); box-shadow: 0 2px 0 #0005; animation: ag-bang .7s ease-in-out infinite; }
@keyframes ag-bang { 0%, 100% { transform: none; } 40% { transform: translateY(-5px) scale(1.12); } }
/* scheduled: a clock ticking until its next check */
.e-scheduled { width: 16px; height: 16px; }
.e-scheduled .face { position: absolute; inset: 0; border-radius: 50%; background: var(--bubble-bg); border: 2px solid var(--bubble-text); }
.e-scheduled .hand { position: absolute; left: 7px; top: 3px; width: 2px; height: 6px; background: var(--bubble-text); border-radius: 1px; transform-origin: 50% 5px; animation: ag-tick 6s steps(12) infinite; }
@keyframes ag-tick { to { transform: rotate(360deg); } }
/* off: no listener, so it sleeps; z's drift up */
.e-off { width: 26px; height: 22px; }
.e-off i { position: absolute; font: 800 10px/1 var(--mono); color: var(--muted); text-shadow: 0 1px 0 var(--agent-bg); animation: ag-z 2.4s ease-in infinite; }
.e-off .z1 { left: 2px; bottom: 0; } .e-off .z2 { left: 9px; bottom: 6px; font-size: 12px; animation-delay: .8s; } .e-off .z3 { left: 16px; bottom: 12px; font-size: 14px; animation-delay: 1.6s; }
@keyframes ag-z { 0% { opacity: 0; transform: translate(-3px, 6px) scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(4px, -10px) scale(1.15); } }
/* failing: stars circling its head */
.e-failing { width: 34px; height: 12px; }
.ag:not(:has(.ag-sprite)) .e-failing { top: -28px; }
.ag:has(.ag-sprite) .e-failing { top: -44px; }
.e-failing i { position: absolute; left: 14px; top: 3px; width: 7px; height: 7px; background: #ffd65a; border: 1px solid #1b1530; transform: rotate(45deg); animation: ag-orbit 1.2s linear infinite; }
.e-failing .s1 { left: 2px; } .e-failing .s3 { left: 26px; }
.e-failing .s1, .e-failing .s2, .e-failing .s3 { animation-name: ag-orbit; } .e-failing .s2 { animation-delay: -.4s; } .e-failing .s3 { animation-delay: -.8s; }
@keyframes ag-orbit { 0% { left: 2px; transform: translateY(0) rotate(45deg) scale(.75); opacity: .7; } 25% { left: 14px; transform: translateY(4px) rotate(45deg) scale(1.1); opacity: 1; }
  50% { left: 26px; transform: translateY(0) rotate(45deg) scale(.75); opacity: .7; } 75% { left: 14px; transform: translateY(-4px) rotate(45deg) scale(.5); opacity: .4; } 100% { left: 2px; transform: translateY(0) rotate(45deg) scale(.75); opacity: .7; } }
/* stopped: held until someone presses Retry; the sprite holds its own sign up, so this is for round tokens */
.e-stopped { width: 19px; height: 19px; gap: 3px; align-items: center; background: #e04838; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); animation: ag-alarm 1.4s ease-in-out infinite; }
.e-stopped i { width: 3px; height: 8px; background: #fff; }
.ag:has(.ag-sprite) .e-stopped { display: none; }
@keyframes ag-alarm { 50% { transform: translateX(-50%) scale(1.15); } }
/* round tokens (every theme drawn without sprites) move to match */
.ag.v-idle:not(:has(.ag-sprite)) .ag-body { animation: ag-breathe 3.2s ease-in-out infinite; }
.ag.v-scheduled:not(:has(.ag-sprite)) .ag-body { animation: ag-breathe 4.4s ease-in-out infinite; opacity: .85; }
.ag.v-working:not(:has(.ag-sprite)) .ag-body { animation: ag-hop .56s ease-in-out infinite alternate; }
.ag.v-waking:not(:has(.ag-sprite)) .ag-body { animation: ag-shake .55s ease-in-out infinite; box-shadow: 0 0 0 3px #ffd65a; }
.ag.v-failing:not(:has(.ag-sprite)) .ag-body { animation: ag-wobble 1.2s ease-in-out infinite; box-shadow: 0 0 0 3px #e0503a; }
.ag.v-stopped:not(:has(.ag-sprite)) .ag-body { box-shadow: 0 0 0 3px #e0503a; }
.ag.v-off .ag-body { filter: grayscale(1); }
.ag.v-off:not(:has(.ag-sprite)) .ag-body { transform: translateY(2px); }
.ag.away:has(.ag-sprite) .ag-body { opacity: .85; }
.ag:is(.v-failing, .v-stopped) .ag-sprite { filter: drop-shadow(0 0 2px #e0503a) drop-shadow(0 0 4px #e0503a88); }
.ag.v-waking .ag-sprite { filter: drop-shadow(0 0 3px #ffd65aaa); }
@keyframes ag-breathe { 50% { transform: scale(1.04); } }
@keyframes ag-hop { to { transform: translateY(-3px); } }
@keyframes ag-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-2px) rotate(-4deg); } 75% { transform: translateX(2px) rotate(4deg); } }
@keyframes ag-wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
.ag.v-stopped .ag-gem { background: #e0503a; }
/* with the connection lost the state isn't known: every sign says "?" and the sprites hold still */
:root[data-conn="off"] .ag-emote { display: grid; place-items: center; width: 16px; height: 16px; padding: 0; border-radius: 50%; background: var(--subtle); border: 0; clip-path: none; animation: none; }
:root[data-conn="off"] .ag-emote > * { display: none; }
:root[data-conn="off"] .ag-emote::before { content: "?"; color: var(--bg); font: 800 11px/1 var(--sans); }
:root[data-conn="off"] .ag:has(.ag-sprite) .ag-emote.e-stopped { display: grid; }
:root[data-conn="off"] .ag-sprite { animation-play-state: paused; filter: grayscale(.8); }
:root[data-conn="off"] .ag .ag-body { animation: none; }
/* the crew list: the same sign, small, on each agent's picture */
.crew-face { position: relative; flex: none; display: grid; }
.crew-face .ag-emote { top: -7px; left: auto; right: -9px; transform: scale(.72); transform-origin: 100% 0; }
.crew-face .e-failing { top: -4px; }
.crew-face .e-stopped { display: flex; }
.crew-face .e-stopped { animation: none; }
.rail:not(.wide) .crew-face .ag-emote { right: -6px; }
/* the floor's key: each state someone is in, with its sign and a count */
.vibe-key { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
.vibe-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 2px 10px 2px 4px; border-radius: 15px; border: 1px solid var(--line); background: var(--panel); font: 600 12.5px var(--sans); color: var(--text); cursor: help; }
.vibe-sign { position: relative; display: grid; place-items: center; width: 30px; height: 24px; }
.vibe-sign .ag-emote { position: relative; left: auto; top: auto; transform: scale(.85); }
.vibe-sign .e-failing { top: auto; }
.vibe-sign .e-stopped { display: flex; animation: none; }
.vibe-chip.v-idle .vibe-sign::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #4fbf7a; box-shadow: 0 0 0 3px #4fbf7a33; }
.vibe-chip.v-failing, .vibe-chip.v-stopped { border-color: #e0503a; }
.vibe-chip.v-waking { border-color: #f2b640; }
:root[data-conn="off"] .vibe-chip { opacity: .6; }

/* the Constitution: current law by scope, proposals with their roll, the record */
.cn-view .cn-tabs { margin: 12px 0 4px; }
.cn-gov { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); }
.cn-gov .hint { margin: 4px 0 0; }
.cn-legend { display: grid; gap: 6px; margin: 12px 0 4px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.cn-legend .hint { margin: 2px 0 0; }
.cn-legend .chip { margin-right: 6px; }
.chip.lvl-briefed { color: var(--blue); border-color: var(--blue-line); background: var(--blue-bg); }
.chip.lvl-checked { color: var(--gold-2); border-color: var(--gold-line); background: var(--gold-bg); }
.chip.lvl-blocked { color: var(--red); border-color: var(--red-line); background: var(--red-bg); }
.cn-text { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 10px; font-size: 14px; line-height: 1.5; }
.cn-law.off { border-style: dashed; }
.cn-law.off .cn-text { color: var(--muted); }
.cn-note { margin-top: 8px; font-size: 13px; color: var(--gold-2); }
.cn-more { margin-top: 10px; }
.cn-more p { margin: 6px 0; }
.cn-title { font: 600 20px/1.35 var(--sans); letter-spacing: -.01em; margin: 2px 0 6px; overflow-wrap: anywhere; }
.cn-options { padding-left: 4px; list-style: none; margin: 10px 0 0; display: grid; gap: 6px; }
.cn-ballot { padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.cn-ballot .who { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cn-vote { margin-top: 4px; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.cn-vote.replaced { text-decoration: line-through; color: var(--muted); }
.cn-act { border: 1px solid var(--gold-line); border-radius: 8px; padding: 12px 14px; background: var(--gold-bg); }
.cn-act textarea { width: 100%; margin-top: 8px; }
.cn-choices { flex-wrap: wrap; }
.cn-kinds { flex-wrap: wrap; margin-bottom: 12px; }
.cn-opts { display: grid; gap: 6px; margin: 6px 0; }
.task-laws .actions select { width: auto; flex: 1; min-width: 0; }
.receipt-entries { font: 12px/1.5 var(--mono); max-height: 320px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0 0; }
@media (max-width: 560px) { .cn-gov { flex-wrap: wrap; } .cn-gov .btn { width: 100%; } }

/* ---------------------------------------------------------------- get started: motion
   The step you're on slides in, a tick pops when one is done, the bar shimmers while there's more to do, and a burst
   of colour marks an agent's hello. All of it stops with reduced motion (the rules near the top). */
.setup-lede { color: var(--text) !important; font-size: 14.5px !important; }
.setup-step.now { box-shadow: 0 10px 30px var(--shade); }
.setup-step.now.enter { animation: setup-in .45s cubic-bezier(.2, .9, .3, 1.2) both; }
.setup-step.ticked .setup-num svg { animation: pop .45s ease-out both; }
.setup-bar { height: 6px; border-radius: 3px; }
.setup-bar i { border-radius: 3px; transition: width .7s cubic-bezier(.3, 1.3, .4, 1);
  background: linear-gradient(90deg, var(--gold) 0%, color-mix(in srgb, var(--gold) 45%, #fff) 50%, var(--gold) 100%) 0 0 / 200% 100%; animation: shimmer 2.4s linear infinite; }
.setup-agent.here { border-color: var(--green-line); }
.setup-agent.here.enter { animation: setup-in .4s ease-out both; }
.setup-role { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 10px; font: 600 11px var(--sans); vertical-align: 1px;
  background: var(--blue-bg); color: var(--text); border: 1px solid var(--blue-line); }
.setup-role.enter { animation: pop .4s ease-out both; }
.setup-role.lead { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.setup-next { margin-top: 18px !important; }
.setup-finish { margin-top: 16px; flex-wrap: wrap; align-items: center; }
.setup-head .btn.big { min-height: 44px; padding: 0 18px; font-size: 15px; }
.setup-head .btn.big.enter { animation: setup-in .5s ease-out both; }
.setup-wait .setup-spin { margin-right: 2px; }
@keyframes setup-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.burst { position: fixed; z-index: 97; width: 0; height: 0; pointer-events: none; }
.burst i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 2px; background: var(--c);
  animation: burst .9s cubic-bezier(.2, .8, .3, 1) forwards; }
.burst i:nth-child(odd) { border-radius: 50%; width: 6px; height: 6px; }
@keyframes burst { 0% { transform: rotate(var(--a)) translateX(0) scale(.4); opacity: 1; }
  70% { opacity: 1; } 100% { transform: rotate(var(--a)) translateX(var(--d)) translateY(14px) scale(1); opacity: 0; } }

/* ---------------------------------------------------------------- the door
   The front door, drawn from the theme's own colours and type: each theme below sets the wood, the frame, the lines
   and the knob, and some add their own touch (an arch, a round window, chalk lines, frosted glass). */
.door-scene { --door-w: min(300px, 64vw); --door-h: min(540px, 58vh, calc(var(--door-w) * 1.85));
  --door-wood: var(--desk); --door-line: var(--desk-line); --door-frame: var(--room-line); --door-knob: var(--gold); --door-wall: var(--floor-bg);
  position: fixed; inset: 0; z-index: 95; display: grid; grid-template-rows: 1fr auto; overflow: hidden;
  background: radial-gradient(ellipse 60% 55% at 50% 38%, color-mix(in srgb, var(--glow) 16%, transparent), transparent 70%), var(--door-wall);
  color: var(--text); opacity: 0; transition: opacity .45s ease; }
.door-scene::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--floor-grid); background-size: var(--floor-grid-size); pointer-events: none; }   /* the theme's floor, however many layers it has */
.door-scene.in { opacity: 1; }
.door-scene.leaving { opacity: 0; transition: opacity .25s ease; }
.door-stage { display: grid; place-items: end center; padding: 56px 16px 0; transition: transform .8s cubic-bezier(.6, 0, .9, .5), opacity .7s ease-in; transform-origin: 50% 62%; }
.door-wall { position: relative; display: grid; justify-items: center; }
.door-lamp { width: 44px; height: 14px; margin-bottom: 10px; border-radius: 0 0 22px 22px; background: var(--door-frame);
  box-shadow: 0 10px 40px 14px color-mix(in srgb, var(--glow) 45%, transparent); animation: lamp 4s ease-in-out infinite; }
@keyframes lamp { 50% { box-shadow: 0 10px 48px 20px color-mix(in srgb, var(--glow) 55%, transparent); } }
.door-plate { margin-bottom: 14px; padding: 6px 16px; max-width: calc(var(--door-w) + 40px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: var(--title-font); font-size: 22px; color: var(--room-name); background: var(--room-bg); border: 2px solid var(--door-frame); border-radius: var(--room-radius); box-shadow: var(--room-shadow); }
.door-frame { position: relative; width: var(--door-w); height: var(--door-h); border: 12px solid var(--door-frame); border-bottom: 0; border-radius: 6px 6px 0 0; perspective: 1500px;
  box-shadow: 0 0 0 1px var(--shade), 0 30px 60px -20px var(--shade); }
.door-inside { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 75%, color-mix(in srgb, var(--glow) 85%, #fff), color-mix(in srgb, var(--glow) 35%, var(--bg)) 55%, var(--bg)); }
.door-inside span { font: var(--title-font); color: var(--text); opacity: 0; transform: translateY(10px); transition: opacity .6s .5s, transform .6s .5s; }
.door-leaf { position: absolute; inset: 0; cursor: pointer; transform-origin: 0 50%; transition: transform 1.15s cubic-bezier(.55, .05, .25, 1);
  background: var(--door-wood); border: 3px solid var(--door-line); box-shadow: inset -10px 0 18px -10px var(--shade), inset 0 0 0 6px color-mix(in srgb, var(--door-line) 25%, transparent); }
.door-window { position: absolute; top: 6%; left: 20%; right: 20%; height: 15%; border: 3px solid var(--door-line); border-radius: 40px 40px 4px 4px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--glow) 70%, #fff) 0%, color-mix(in srgb, var(--glow) 40%, transparent) 60%); }
.door-panel { position: absolute; left: 14%; right: 14%; top: 64%; height: 28%; border: 3px solid color-mix(in srgb, var(--door-line) 70%, transparent); border-radius: 4px; }
.door-panel + .door-panel { top: 25%; height: 34%; border-style: solid; opacity: .5; }
.door-knob { position: absolute; right: 8%; top: 56%; width: 16px; height: 16px; border-radius: 50%; background: var(--door-knob); border: 2px solid var(--door-line); box-shadow: 0 2px 0 var(--shade); }
.door-string { position: absolute; left: 50%; top: 26%; width: 40px; height: 40px; translate: -50% 0; rotate: 45deg; border: 2px solid var(--door-line); border-right: 0; border-bottom: 0; }
.door-string::before { content: ""; position: absolute; left: -5px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--door-knob); }
.door-sign { position: absolute; left: 50%; top: calc(26% + 22px); width: 66%; height: 52px; padding: 0; border: 0; background: none; translate: -50% 0;
  transform-style: preserve-3d; transform-origin: 50% -16px; transition: transform .7s cubic-bezier(.4, 1.7, .5, 1); animation: sway 3.2s ease-in-out infinite; cursor: pointer; }
.door-sign:hover { scale: 1.04; }
.door-sign:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
.door-sign-face { position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  font: 700 19px var(--display); text-transform: uppercase; letter-spacing: .16em; color: var(--bg); border: 3px solid var(--door-line); border-radius: 6px; box-shadow: 0 4px 0 var(--shade); }
.door-sign-face.closed { background: var(--red); }
.door-sign-face.open { background: var(--green); transform: rotateY(180deg); }
@keyframes sway { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
.door-tip { position: absolute; left: calc(100% + 26px); top: calc(26% + 30px); white-space: nowrap; pointer-events: none;
  padding: 8px 14px; font: 600 15px var(--sans); color: var(--bubble-text); background: var(--bubble-bg); border: 2px solid var(--bubble-line); border-radius: var(--bubble-radius);
  box-shadow: 0 8px 20px var(--shade); animation: tip-in .5s .5s ease-out both, tip-bob 1.6s 1s ease-in-out infinite; transition: opacity .25s; }
.door-tip::before { content: ""; position: absolute; left: -9px; top: 50%; width: 14px; height: 14px; translate: 0 -50%; rotate: 45deg; background: var(--bubble-bg); border-left: 2px solid var(--bubble-line); border-bottom: 2px solid var(--bubble-line); }
@keyframes tip-in { from { opacity: 0; transform: translateX(14px); } }
@keyframes tip-bob { 50% { transform: translateX(-6px); } }
.door-step { width: calc(var(--door-w) + 64px); height: 16px; background: var(--door-frame); border-radius: 3px; box-shadow: 0 10px 24px -8px var(--shade); }
.door-themes { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; padding: 16px 16px 22px; transition: opacity .4s; }
.door-themes-lbl { font: 600 12px var(--sans); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.door-theme-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 900px; }
.door-theme-list button { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px 0 8px; border-radius: 18px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 88%, transparent); color: var(--text); font: 600 13px var(--sans); transition: transform .15s, border-color .15s; }
.door-theme-list button:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.door-theme-list button[aria-pressed="true"] { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); background: var(--gold-bg); }
.door-swatch { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--s0) 50%, var(--s1) 50%); box-shadow: 0 0 0 1px #0003; }
.door-skip { position: absolute; top: 14px; right: 16px; z-index: 2; min-height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font: 600 13px var(--sans); }
.door-skip:hover { color: var(--text); border-color: var(--line-strong); }
.door-scene.flip .door-sign { transform: rotateY(180deg); animation: none; }
.door-scene.flip .door-tip { opacity: 0; animation: none; }
.door-scene.opening .door-leaf { transform: rotateY(-104deg); }
.door-scene.opening .door-inside span { opacity: 1; transform: none; }
.door-scene.through .door-stage { transform: scale(3.4); opacity: 0; }
.door-scene.through { opacity: 0; transition: opacity .7s .25s ease; }
.door-scene.through :is(.door-themes, .door-skip) { opacity: 0; }
@media (max-width: 760px) {          /* too narrow for the tooltip beside the door: it goes under the sign */
  .door-tip { left: 50%; top: calc(26% + 86px); translate: -50% 0; }
  .door-tip::before { left: 50%; top: -9px; translate: -50% 0; rotate: 135deg; }
}
@media (max-width: 600px) {
  .door-scene { --door-w: min(240px, 66vw); --door-h: min(440px, 52vh, calc(var(--door-w) * 1.8)); }
  .door-stage { padding-top: 60px; }
}
@media (max-width: 600px), (max-height: 460px) {
  .door-theme-list { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; max-width: 100%; padding-bottom: 4px; scrollbar-width: none; }
  .door-theme-list button { flex: none; }
}
@media (max-height: 460px) {          /* a phone on its side */
  .door-scene { --door-h: min(250px, 56vh); --door-w: min(150px, 40vw); }
  .door-lamp, .door-plate { display: none; }
  .door-stage { padding-top: 14px; }
  .door-themes { padding: 6px 16px 10px; }
  .door-themes-lbl { display: none; }
  .door-sign { height: 40px; } .door-sign-face { font-size: 14px; }
}
@media (max-height: 640px) { .door-scene { --door-h: min(360px, 50vh); } .door-lamp, .door-plate { margin-bottom: 6px; } .door-stage { padding-top: 40px; } }
/* each theme's door */
:root[data-theme="pixel"] .door-scene { --door-wood: #b07a46; --door-line: #4a2b17; --door-frame: #f4f0ff; --door-knob: #ffd65a; }
:root[data-theme="pixel"] :is(.door-frame, .door-leaf, .door-window, .door-panel, .door-sign-face, .door-tip, .door-plate, .door-step, .door-lamp, .door-theme-list button, .door-skip) { border-radius: 0; }
:root[data-theme="pixel"] .door-frame { border-width: 10px; box-shadow: inset 0 0 0 3px #1b1530, 8px 8px 0 #0009; }
:root[data-theme="pixel"] .door-leaf { border-width: 4px; box-shadow: inset 0 0 0 4px #8a5a30, inset -12px 0 0 #8a5a30; }
:root[data-theme="pixel"] .door-sign-face { box-shadow: 4px 4px 0 #0009; letter-spacing: .08em; }
:root[data-theme="pixel"] .door-knob { border-radius: 0; }
:root[data-theme="pixel"] .door-tip { border: 3px solid #1b1530; box-shadow: 4px 4px 0 #0009; }
:root[data-theme="paper"] .door-scene { --door-wood: #fffefb; --door-line: #1d2433; --door-frame: #1d2433; --door-knob: #b33a26; }
:root[data-theme="paper"] .door-leaf { background: repeating-linear-gradient(135deg, #1d243312 0 2px, transparent 2px 9px), #fffefb; }
:root[data-theme="paper"] .door-tip { background: #ffe45c; border-color: #1d2433; color: #1d2433; }
:root[data-theme="paper"] .door-tip::before { background: #ffe45c; border-color: #1d2433; }
:root[data-theme="night"] .door-scene { --door-wood: #4a3422; --door-line: #1d150d; --door-frame: #17140f; --door-knob: #f5b450; }
:root[data-theme="night"] .door-lamp { box-shadow: 0 16px 80px 40px #f5b45040; }
:root[data-theme="blueprint"] .door-scene { --door-wood: transparent; --door-line: #dbe8ff; --door-frame: #dbe8ff; --door-knob: #7fe3ff; }
:root[data-theme="blueprint"] .door-frame { border-width: 3px; }
:root[data-theme="blueprint"] :is(.door-leaf, .door-panel, .door-window) { border-style: dashed; border-width: 2px; box-shadow: none; }
:root[data-theme="blueprint"] .door-leaf { background: #0b2547; }
:root[data-theme="blueprint"] .door-sign-face { background: #0b2547; border-style: dashed; }
:root[data-theme="blueprint"] .door-sign-face.closed { color: #ff9c88; border-color: #ff9c88; }
:root[data-theme="blueprint"] .door-sign-face.open { color: #80e2a0; border-color: #80e2a0; }
:root[data-theme="iso"] .door-scene { --door-wood: #ff8a65; --door-line: #c9502b; --door-frame: #ffffff; --door-knob: #3a3150; }
:root[data-theme="iso"] .door-frame { border-radius: 22px 22px 0 0; box-shadow: 0 30px 60px -20px #46326440; }
:root[data-theme="iso"] .door-leaf { border-radius: 12px 12px 0 0; }
:root[data-theme="iso"] :is(.door-sign-face, .door-plate) { border-radius: 999px; }
:root[data-theme="glass"] .door-scene { --door-wood: #ffffff14; --door-line: #ffffff40; --door-frame: #ffffff2e; --door-knob: #ffb85c;
  background: radial-gradient(40% 40% at 30% 30%, #ffb85c30, transparent), radial-gradient(40% 40% at 70% 60%, #b597ff33, transparent), #0a1020; }
:root[data-theme="glass"] .door-leaf { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-width: 1px; }
:root[data-theme="glass"] .door-frame { border-width: 8px; border-radius: 18px 18px 0 0; }
:root[data-theme="map"] .door-scene { --door-wood: #5b3b22; --door-line: #2a1a0e; --door-frame: #3d4a4a; --door-knob: #ffcf5c; }
:root[data-theme="map"] :is(.door-frame, .door-leaf, .door-inside) { border-radius: 50% 50% 0 0 / 22% 22% 0 0; }
:root[data-theme="map"] .door-leaf { background: repeating-linear-gradient(90deg, #5b3b22 0 22px, #4c311c 22px 25px); }
:root[data-theme="map"] .door-window { display: none; }
:root[data-theme="ring"] .door-scene { --door-wood: #1d2438; --door-line: #ffcf5c; --door-frame: #ffcf5c; --door-knob: #ffcf5c; }
:root[data-theme="ring"] .door-window { top: 5%; left: 37%; right: 37%; height: auto; aspect-ratio: 1; border-radius: 50%; }
:root[data-theme="ring"] .door-frame { border-width: 6px; }
:root[data-theme="cozy"] .door-scene { --door-wood: #8a5a36; --door-line: #3d2618; --door-frame: #4a372c; --door-knob: #ffb15c; }
:root[data-theme="cozy"] .door-leaf { background: repeating-linear-gradient(90deg, #8a5a36 0 26px, #7a4e2e 26px 29px); }
:root[data-theme="cozy"] .door-tip { font: 400 21px var(--display); }
:root[data-theme="daylight"] .door-scene { --door-wood: #2f5fd0; --door-line: #244aa6; --door-frame: #ffffff; --door-knob: #ffffff; }
:root[data-theme="daylight"] .door-frame { box-shadow: 0 0 0 1px #dcd5c9, 0 30px 60px -20px #23262d33; }
:root[data-theme="daylight"] .door-panel { border-color: #ffffff66; }

/* ---------------------------------------------------------------- the tour
   A spotlight on the real part of the screen, everything else dimmed, and a card beside it. */
.tour { position: fixed; inset: 0; z-index: 94; }
.tour-spot { position: absolute; border-radius: 10px; box-shadow: 0 0 0 9999px var(--backdrop), 0 0 0 3px var(--gold); pointer-events: none;
  transition: left .4s cubic-bezier(.3, 1.2, .4, 1), top .4s cubic-bezier(.3, 1.2, .4, 1), width .4s cubic-bezier(.3, 1.2, .4, 1), height .4s cubic-bezier(.3, 1.2, .4, 1); }
.tour.free { background: var(--backdrop); }
.tour.free .tour-spot { display: none; }
.tour-card { position: absolute; width: min(340px, calc(100vw - 24px)); padding: 16px 16px 12px; background: var(--dialog); color: var(--text);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.tour.free .tour-card { left: 50% !important; top: 50% !important; translate: -50% -50%; }
.tour-card.pop { animation: dlg-in .3s ease-out both; }
.tour-count { font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--gold); margin-bottom: 4px; }
.tour-card h3 { font-size: 17px; margin: 0 0 6px; }
.tour-card p { font-size: 14px; color: var(--muted); margin: 0 0 12px; }
.tour-foot { display: flex; align-items: center; gap: 6px; }
.tour-foot .grow { flex: 1; }
:root[data-theme="pixel"] .tour-card { background: var(--window); border: 3px solid var(--frame); border-radius: 4px; box-shadow: inset 0 0 0 2px var(--frame-in), var(--shadow); }
:root[data-theme="pixel"] .tour-spot { border-radius: 0; }
/* the crew step: each agent as it joins, with its role picker */
.setup-crew { display: grid; gap: 8px; margin-top: 8px; }
.setup-crew-row { margin-top: 0; flex-wrap: wrap; }
.setup-crew-row.joined { border-style: dashed; }
.setup-crew-row.enter { animation: setup-in .4s ease-out both; }
.setup-role-field { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.setup-role-pick { min-height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); color: var(--text); font: 600 13px var(--sans); }
.setup-role-pick:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.setup-roles-more { font-size: 13px; }
@media (max-width: 560px) { .setup-role-field { width: 100%; margin-left: 34px; } .setup-role-pick { flex: 1; } }

/* ---------------------------------------------------------------- get started, full screen
   One step at a time over the whole screen: the stage with your agents at the top, the step under it in big type, and
   a small row of dots at the bottom for where you are. Drawn from the theme's own colours and type. */
.ob { position: fixed; inset: 0; z-index: 93; display: grid; grid-template-rows: auto 1fr auto; color: var(--text); opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, color-mix(in srgb, var(--glow) 14%, transparent), transparent 70%), var(--bg); }
.ob.in { opacity: 1; }
.ob-top { display: flex; align-items: center; gap: 10px; padding: 12px 20px; }
.ob-brand { font: var(--brand-font); font-size: 19px; color: var(--text); }
.ob-top .grow { flex: 1; }
.ob-update { display: contents; }          /* the update button, when there is one */
.ob-brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) { .ob-top:has(.update-btn) .ob-btn-text { display: none; } }          /* on a phone the update button keeps its words; these give theirs up */
.ob-body { overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 4px 20px 28px; }
/* the stage */
.ob-stage { position: relative; flex: none; width: min(980px, 100%); height: 300px; border-radius: 18px; overflow: hidden; border: 2px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--floor-bg) 70%, var(--bg)) 0 58%, var(--floor-bg) 58%); box-shadow: 0 18px 40px -24px var(--shade); }
.ob-floor { position: absolute; left: 0; right: 0; bottom: 0; top: 58%; background: var(--floor-grid); background-size: var(--floor-grid-size); opacity: .9; }
.ob-floor::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: color-mix(in srgb, var(--line) 70%, transparent); }
.ob-cast { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; align-items: flex-end; gap: 22px; padding: 0 18px; }
.ob-agent { position: relative; flex: 0 1 150px; min-width: 80px; display: grid; justify-items: center; gap: 6px; }
.ob-figure { position: relative; width: 80px; height: 120px; display: grid; place-items: end center; }
.ob-sprite { width: 80px; height: 120px; image-rendering: pixelated; transition: opacity .2s; animation: ob-idle 2.8s ease-in-out infinite; }
.ob-figure.forming .ob-sprite { opacity: 0; animation: none; }
.ob-figure > .avatar { width: 64px; height: 64px; font-size: 22px; }
.ob-pixels { position: absolute; left: 50%; bottom: 0; width: 240px; height: 260px; transform: translateX(-50%); image-rendering: pixelated; pointer-events: none; }
.ob-agent.landed .ob-figure::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 84px; height: 16px; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--glow) 80%, transparent), transparent); animation: ob-land .9s ease-out both; pointer-events: none; }
/* the two positions, each with its own look. The coordinator: a pixel crown that drops on and glints, and a gold glow
   at its feet. The Overmind: a pixel eye that opens and looks about, a violet aura with rings sweeping out, and it
   rises and hovers. Reduced motion stills all of it (html[data-motion="off"]). */
.pa { display: block; width: 100%; height: auto; overflow: visible; }
.pa g { transform-box: fill-box; transform-origin: center; }
.ob-crown, .ob-eye { position: absolute; left: 50%; translate: -50% 0; display: none; pointer-events: none; filter: drop-shadow(0 2px 0 var(--shade)); }
.ob-crown { top: 2px; width: 34px; }          /* on its head: the sprite's top rows are empty */
.ob-eye { top: -9px; width: 36px; transform-origin: 50% 60%; }          /* just above its head, clear of its hover */
.ob-agent.overmind .ob-bubble { margin-bottom: 14px; }
.ob-agent.overmind:nth-child(even) .ob-bubble { margin-bottom: 38px; }
.ob-agent.lead .ob-crown, .ob-agent.overmind .ob-eye { display: block; }
.ob-agent.crowned .ob-crown { animation: ob-crown .8s cubic-bezier(.3, 1.7, .5, 1) both; }
.ob-agent.lead .pa-glint { animation: pa-glint 2.6s steps(1) infinite; }
.ob-aura { position: absolute; left: 50%; bottom: -8px; width: 96px; height: 22px; translate: -50% 0; border-radius: 50%; display: none; pointer-events: none; }
.ob-agent.lead .ob-aura { display: block; background: radial-gradient(closest-side, #f6c344cc, transparent); animation: ob-glow 2.8s ease-in-out infinite; }
.ob-agent.overmind .ob-aura { display: block; background: radial-gradient(closest-side, #8b5cf6bb, transparent); }
.ob-agent.overmind .ob-aura::before, .ob-agent.overmind .ob-aura::after { content: ""; position: absolute; inset: 0; border: 2px solid #a78bfa; border-radius: 50%; animation: ob-scan 2.6s ease-out infinite; }
.ob-agent.overmind .ob-aura::after { animation-delay: 1.3s; }
.ob-agent.overmind .ob-sprite { animation: ob-hover 3.2s ease-in-out infinite; filter: drop-shadow(0 0 6px #8b5cf699); }
.ob-agent.overmind .ob-eye .pa { animation: pa-blink 6s infinite; }
.ob-agent.overmind .pa-iris { animation: pa-glance 5s ease-in-out infinite; }
.ob-agent.overmind .pa-rays { animation: pa-rays 1.8s steps(2) infinite; }
.ob-agent.awakened .ob-eye { animation: ob-eye-open 1.2s cubic-bezier(.2, 1.5, .4, 1) both; }
.ob-agent.awakened .ob-sprite { animation: ob-rise 1.2s cubic-bezier(.3, 1.4, .5, 1) both, ob-hover 3.2s 1.2s ease-in-out infinite; }
.ob-agent.overmind .ob-role { color: #fff; background: #7c4dff; padding: 1px 7px; border-radius: 9px; }
.ob-tag { display: grid; justify-items: center; gap: 3px; min-height: 36px; }
.ob-tag strong { font: 600 12.5px var(--mono); color: var(--text); background: color-mix(in srgb, var(--panel) 85%, transparent); padding: 1px 7px; border-radius: 6px; }
.ob-role { font: 700 10.5px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--gold); }
.ob-agent.lead .ob-role { color: var(--on-gold); background: var(--gold); padding: 1px 7px; border-radius: 9px; }
.ob-bubble { position: relative; width: max-content; max-width: 230px; margin-bottom: 4px; padding: 6px 10px; font: 13px/1.35 var(--sans); color: var(--bubble-text); background: var(--bubble-bg);
  border: 2px solid var(--bubble-line); border-radius: var(--bubble-radius, 14px); box-shadow: 0 4px 0 var(--shade); text-align: center; overflow-wrap: anywhere; }
.ob-say { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ob-bubble::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 12px; height: 12px; translate: -50% 0; rotate: 45deg; background: var(--bubble-bg); border-right: 2px solid var(--bubble-line); border-bottom: 2px solid var(--bubble-line); }
.ob-bubble.name { font-weight: 700; font-size: 14px; }
.ob-bubble.role { border-color: var(--gold); }
.ob-bubble.pop { animation: ob-pop .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.ob-agent:not(.landed) .ob-bubble { visibility: hidden; }
.ob-agent:nth-child(even) .ob-bubble { margin-bottom: 30px; }       /* neighbours' bubbles stagger */
.ob-pad .ob-figure { border: 2px dashed color-mix(in srgb, var(--text) 35%, transparent); border-radius: 32px 32px 10px 10px; animation: ob-breathe 2.2s ease-in-out infinite; }
.ob-pad .ob-figure::before { content: ""; position: absolute; left: 50%; bottom: -8px; width: 96px; height: 20px; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--glow) 70%, transparent), transparent); animation: ob-breathe 2.2s ease-in-out infinite; }
.ob-ghost { font: 700 34px/1 var(--display); color: color-mix(in srgb, var(--text) 45%, transparent); align-self: center; }
.ob-pad .ob-bubble { visibility: visible; font-weight: 600; color: color-mix(in srgb, var(--bubble-text) 78%, var(--bubble-bg)); }
.ob-stage.empty .ob-cast { bottom: 18px; }
@keyframes ob-idle { 0%, 100% { transform: none; } 50% { transform: translateY(-3px); } }
@keyframes ob-land { from { opacity: 1; transform: scale(.4); } to { opacity: 0; transform: scale(1.6); } }
@keyframes ob-crown { from { opacity: 0; transform: translateY(-70px) rotate(-30deg); } 60% { opacity: 1; } }
@keyframes ob-pop { from { opacity: 0; transform: translateY(8px) scale(.8); } }
@keyframes ob-breathe { 50% { opacity: .55; transform: scale(.97); } }
@keyframes ob-glow { 50% { opacity: .65; transform: scale(1.12); } }
@keyframes ob-scan { from { opacity: .9; transform: scale(.35); } to { opacity: 0; transform: scale(1.5); } }
@keyframes ob-hover { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(-8px); } }
@keyframes ob-rise { from { transform: none; } to { transform: translateY(-4px); } }
@keyframes ob-eye-open { from { opacity: 0; transform: scaleY(.05); } 40% { opacity: 1; } }
@keyframes ob-flare { from { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1.3); } }
@keyframes pa-glint { 0%, 74% { opacity: 1; } 76% { opacity: .15; } 80% { opacity: 1; } 84% { opacity: .15; } 88%, 100% { opacity: 1; } }
@keyframes pa-glance { 0%, 30% { transform: none; } 40%, 52% { transform: translateX(-2px); } 62%, 76% { transform: translateX(2px); } 86%, 100% { transform: none; } }
@keyframes pa-rays { 50% { opacity: .25; } }
@keyframes pa-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.12); } }
/* a position's emblem on a card, and the two positions side by side in the crew step */
.ob-emblem { position: relative; width: 112px; margin: 0 auto 10px; display: grid; place-items: center; }
.ob-emblem .pa { position: relative; filter: drop-shadow(0 4px 0 var(--shade)); }
.ob-emblem-glow { position: absolute; inset: -20% -12%; border-radius: 50%; }
.ob-emblem-coordinator .ob-emblem-glow { background: radial-gradient(closest-side, #f6c34466, transparent); animation: ob-glow 2.8s ease-in-out infinite; }
.ob-emblem-overmind .ob-emblem-glow { background: radial-gradient(closest-side, #8b5cf666, transparent); animation: ob-glow 3.4s ease-in-out infinite; }
.ob-emblem.vacant { filter: grayscale(1); opacity: .45; }
.ob-emblem.vacant .ob-emblem-glow { display: none; }
.ob-emblem-overmind.vacant { filter: none; opacity: .9; }          /* nobody there: the eye is closed, and breathes */
.ob-emblem-overmind.vacant .pa { animation: ob-breathe 3.2s ease-in-out infinite; }
.ob-emblem-coordinator.held .pa-glint { animation: pa-glint 2.6s steps(1) infinite; }
.ob-emblem-overmind.held .pa { animation: pa-blink 6s infinite; }
.ob-emblem-overmind.held .pa-iris { animation: pa-glance 5s ease-in-out infinite; }
.ob-emblem-overmind.held .pa-rays { animation: pa-rays 1.8s steps(2) infinite; }
.ob-emblem-coordinator.enter .pa { animation: ob-crown .9s cubic-bezier(.3, 1.7, .5, 1) both; }
.ob-emblem-overmind.enter .pa { animation: ob-eye-open 1.2s cubic-bezier(.2, 1.5, .4, 1) both, pa-blink 6s 1.2s infinite; }
.ob-emblem.enter .ob-emblem-glow { animation: ob-flare .9s ease-out both, ob-glow 2.8s .9s ease-in-out infinite; }
.ob-positions { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; margin: 14px 0; }
.ob-pos { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 14px; border: 2px solid var(--line); background: var(--panel); text-align: left; }
.ob-pos .ob-emblem { width: 64px; margin: 0; flex: none; }
.ob-pos-body { flex: 1; min-width: 0; }
.ob-pos-title { margin: 0 !important; font: 700 15px var(--sans); color: var(--text); }
.ob-pos-who { font: 600 13px var(--mono); }
.ob-pos-text { margin: 4px 0 8px !important; font-size: 13px !important; color: var(--muted); }
.ob-pos-coordinator.held { border-color: color-mix(in srgb, #f6c344 70%, var(--line)); }
.ob-pos-overmind.held { border-color: color-mix(in srgb, #8b5cf6 70%, var(--line)); background: color-mix(in srgb, #8b5cf6 7%, var(--panel)); }
.ob-pos-lock { margin: 0 !important; font: 600 12px var(--sans); color: var(--muted); }
.setup-role.overmind { background: #7c4dff; border-color: #7c4dff; color: #fff; }
.elect.overmind.on { border-color: #8b5cf6; background: color-mix(in srgb, #8b5cf6 10%, var(--panel)); box-shadow: inset 0 0 0 1px #8b5cf6; }
.elect.overmind.on .elect-chip { background: #7c4dff; border-color: #7c4dff; color: #fff; }
.crew-role.overmind { border-color: color-mix(in srgb, #8b5cf6 55%, var(--line)); background: color-mix(in srgb, #8b5cf6 6%, var(--panel)); }
/* the step */
.ob .setup-step { display: block; border: 0; background: none; padding: 0; margin: 0; box-shadow: none; }
.ob-panel { width: min(720px, 100%); }
.ob-panel.enter { animation: setup-in .5s cubic-bezier(.2, .9, .3, 1.2) both; }
.ob .ob-panel h3 { font: var(--title-font); font-size: clamp(28px, 4.2vw, 42px); line-height: 1.1; margin: 4px 0 10px; outline: none; }
.ob-lede { font-size: 17.5px !important; line-height: 1.45; color: var(--text) !important; margin: 0 0 8px !important; }
.ob-sub { font-size: 14.5px !important; color: var(--muted) !important; margin: 0 0 12px !important; }
.ob-how { list-style: none; display: grid; gap: 16px; margin: 18px 0 8px; padding: 0; }
.ob-how-step { display: flex; gap: 14px; align-items: flex-start; }
.ob-n { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--gold); color: var(--on-gold); font: 700 15px var(--sans); box-shadow: 0 3px 0 var(--shade); }
.ob-how-title { font-size: 16.5px !important; font-weight: 700; color: var(--text) !important; margin: 4px 0 10px !important; }
.ob-how .setup-name { margin: 0; }
.ob-how.compact { gap: 12px; margin-top: 8px; }
.ob .setup-go { min-height: 50px; padding: 0 22px; font-size: 16px; }
.ob .setup-fork { gap: 14px; margin-top: 18px; }
.ob .setup-choice { justify-items: start; gap: 6px; padding: 18px; border-radius: 14px; transition: transform .15s, border-color .15s, box-shadow .15s; }
.ob .setup-choice:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -14px var(--shade); }
.ob .setup-choice strong { font-size: 17px; }
.ob-choice-art { display: flex; gap: 4px; height: 48px; align-items: flex-end; margin-bottom: 6px; }
.ob-choice-art img { width: 32px; height: 48px; image-rendering: pixelated; }
.ob-told { margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.ob-told p { margin: 0 !important; font-size: 12.5px !important; }
.ob-told.ok p { color: var(--green) !important; font-weight: 600; }
.ob-told .setup-more { margin-top: 2px; font-size: 12px; }
/* a role message waiting for Send: the whole text, never cut short or scrolled */
.ob-tell { margin-top: 10px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--gold) 60%, transparent); border-radius: 12px; background: var(--gold-bg); text-align: left; }
.ob-tell .setup-msg { max-height: none; overflow: visible; margin: 0 0 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ob-tell .actions { margin: 0; align-items: center; gap: 14px; }
.ob-alert { margin: 0; }
.ob-untold { display: grid; gap: 10px; width: min(760px, 100%); }          /* a role message that didn't go, on every step */
.ob-finish { text-align: center; padding-top: 10px; }
.ob-finish .actions { justify-content: center; }
.ob-go { min-height: 54px; padding: 0 26px; font-size: 17px; }
/* the small indicator of where you are */
.ob-dots { display: grid; justify-items: center; gap: 4px; padding: 10px 16px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line-soft); background: color-mix(in srgb, var(--bg) 92%, transparent); }
.ob-dots ol { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.ob-dots li { display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; font: 600 12px var(--sans); color: var(--subtle); transition: background .3s, color .3s; }
.ob-dots li i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font: 700 10.5px/1 var(--sans); font-style: normal; background: var(--line-soft); color: var(--muted); }
.ob-dots li.now { color: var(--text); background: var(--gold-bg); }
.ob-dots li.now i { background: var(--gold); color: var(--on-gold); }
.ob-dots li.done i { background: var(--green); color: #fff; }
.ob-count { margin: 0; font: 11px var(--mono); color: var(--subtle); }
@media (max-width: 600px) {
  .ob-top { padding: 10px 14px; }
  .ob-body { padding: 0 14px 20px; gap: 16px; }
  .ob-stage { height: 250px; border-radius: 14px; }
  .ob-cast { gap: 8px; bottom: 12px; justify-content: safe center; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 0 10px; }
  .ob-cast::-webkit-scrollbar { display: none; }
  .ob-agent { flex: 0 0 auto; width: 76px; }
  .ob-agent { transform: scale(.72); transform-origin: 50% 100%; min-width: 64px; }
  .ob-bubble { max-width: 128px; font-size: 11.5px; }
  .ob-dots li:not(.now) span { display: none; }
  .ob-dots li { padding-right: 4px; } .ob-dots li.now { padding-right: 10px; }
}
:root[data-theme="pixel"] :is(.ob-stage, .ob .setup-choice, .ob-tag strong) { border-radius: 0; }
:root[data-theme="pixel"] .ob-stage { border: 3px solid var(--frame); box-shadow: inset 0 0 0 2px var(--frame-in), 6px 6px 0 #0009; }

/* Get started's plugins step: a switch for each plugin on a 16-bit panel, each wired to a 16-bit computer in the
   middle. The hardware keeps its own colours in every theme. A switch turned on lights up, a charge runs down its wire
   and the computer's socket lights; a paused one blinks amber. Reduced motion stills it all (html[data-motion="off"]). */
.pr { --notch: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  position: relative; flex: none; width: min(1200px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) 288px minmax(0, 1fr); column-gap: 80px; align-items: center;
  padding: 30px 26px; color: #e8ecf4; font-size: 14px; clip-path: var(--notch);
  background: radial-gradient(circle, #252c3c 1px, transparent 1.6px) 0 0 / 8px 8px, #131722; box-shadow: inset 0 0 0 4px #0a0c12, inset 0 0 0 8px #262d3d; }
.pr-wires { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 0; overflow: visible; }
.pr-col { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pr-pc { position: relative; z-index: 1; width: 288px; }
.pr-pc::before { content: ""; position: absolute; left: 10%; right: 10%; top: -6%; height: 70%; background: radial-gradient(closest-side, rgba(110, 255, 160, .5), transparent);
  opacity: calc(var(--glow, 0) * .9); pointer-events: none; transition: opacity .4s steps(4); }
.pr-pc-art { position: relative; display: block; width: 100%; height: auto; }
.pr-sock.lit { fill: var(--wire); }
.pr.live .pr-power { fill: #6dff9a; }
.pr-screen { position: absolute; left: 27.78%; top: 10.34%; width: 44.44%; height: 31.03%; padding: 6px 7px; overflow: hidden;
  font: 9px/12px "Silkscreen", ui-monospace, monospace; text-transform: uppercase; color: #3fa46a; }
.pr.live .pr-screen { color: #9dffbe; text-shadow: 0 0 5px #39ff7a; }
.pr-screen p { margin: 0; overflow: hidden; }
.pr-screen p:not(.pr-msg) { white-space: nowrap; }
.pr-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .3) 0 1px, transparent 1px 3px); }
.pr-cursor { animation: pr-blink 1s steps(2) infinite; }
.pr-pc.blip { animation: pr-shake .3s steps(3); }
.pr-pc.blip .pr-screen { animation: pr-flash .5s steps(3); }
/* a panel: its switch on the outside, its jack (where the wire plugs in) on the side facing the computer */
.pr-unit { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 18px 12px 12px; min-height: 100px;
  background: #1d2230; clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
  box-shadow: inset 4px 4px 0 #2b3244, inset -4px -4px 0 #11141c; transition: background .25s steps(3), box-shadow .25s steps(3); }
.pr-right .pr-unit { grid-template-columns: minmax(0, 1fr) 52px; padding: 12px 12px 12px 18px; }
.pr-right .pr-switch { order: 2; }
.pr-unit.on { background: color-mix(in srgb, var(--wire) 13%, #1d2230); box-shadow: inset 4px 4px 0 color-mix(in srgb, var(--wire) 50%, #2b3244), inset -4px -4px 0 #11141c; }
.pr-unit.zap { animation: pr-zap .5s steps(5); }
.pr-switch { position: relative; width: 52px; height: 80px; padding: 0; border: 0; border-radius: 0; cursor: pointer; background: #2a303e;
  box-shadow: inset 4px 4px 0 #3d465b, inset -4px -4px 0 #151922, 0 0 0 3px #090b10; }
.pr-switch:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.pr-switch:disabled { cursor: not-allowed; }
.pr-switch[aria-disabled="true"] { cursor: progress; }
.pr-led { position: absolute; top: 9px; left: 18px; width: 16px; height: 8px; background: #5a1f27; box-shadow: inset -2px -2px 0 #33121a; }
.pr-slot { position: absolute; left: 20px; top: 24px; width: 12px; height: 48px; background: #06070b; }
.pr-lever { position: absolute; left: -8px; bottom: 2px; width: 28px; height: 18px; background: #c8ced9;
  box-shadow: inset 3px 3px 0 #f4f6fa, inset -3px -3px 0 #7c8495, 0 3px 0 #04050a; transition: bottom .16s steps(3), background .16s steps(2); }
.pr-unit:is(.on, .paused) .pr-lever { bottom: 28px; }
.pr-unit.on .pr-lever { background: var(--wire); box-shadow: inset 3px 3px 0 color-mix(in srgb, #fff 55%, var(--wire)), inset -3px -3px 0 color-mix(in srgb, #000 40%, var(--wire)), 0 0 14px var(--wire); }
.pr-unit.on .pr-led { background: #6dff9a; box-shadow: 0 0 12px 3px rgba(109, 255, 154, .75), inset -2px -2px 0 #2fc45f; }
.pr-unit.paused .pr-led { background: #ffb347; box-shadow: 0 0 10px rgba(255, 179, 71, .7); animation: pr-blink 1.2s steps(2) infinite; }
.pr-unit.on .pr-switch { box-shadow: inset 4px 4px 0 #3d465b, inset -4px -4px 0 #151922, 0 0 0 3px #090b10, 0 0 22px color-mix(in srgb, var(--wire) 55%, transparent); }
/* locked (PRO): a pixel padlock over the slot */
.pr-unit.locked .pr-switch { opacity: .6; }
.pr-unit.locked .pr-slot::before { content: ""; position: absolute; left: -1px; top: 6px; width: 14px; height: 12px; box-sizing: border-box; border: 3px solid #ffcf56; border-bottom: 0; }
.pr-unit.locked .pr-slot::after { content: ""; position: absolute; left: -4px; top: 16px; width: 20px; height: 14px; background: #ffcf56; box-shadow: inset -3px -3px 0 #c99a1e, 0 0 0 2px #090b10; }
.pr-info { min-width: 0; }
.pr-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; font: 11px/1.3 "Silkscreen", ui-monospace, monospace; text-transform: uppercase; color: #fff; }
.pr-name svg.i { flex: none; width: 15px; height: 15px; color: var(--wire); }
.pr-name strong { flex: 1 1 auto; min-width: 0; font-weight: 400; letter-spacing: .02em; }
.pr-tag { flex: none; padding: 1px 4px; font-size: 9px; background: #ffcf56; color: #1a1408; }
.pr-state { flex: none; font-size: 10px; color: #959eb3; }
.pr-unit.on .pr-state { color: var(--wire); text-shadow: 0 0 6px var(--wire); }
.pr-unit.paused .pr-state { color: #ffb347; }
.pr-sum { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: #c6cddb; }
.pr-note { margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: #ffcf56; }
.pr-note:empty { display: none; }
.pr-note .link { color: #ffe08f; }
.pr-more summary { margin-top: 6px; cursor: pointer; font-size: 12px; color: #93a3c4; }
.pr-more p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: #aeb7c9; }
.pr-jack { position: absolute; top: 47px; width: 10px; height: 10px; background: #08090d; box-shadow: inset 0 0 0 2px #3a4152; }
.pr-left .pr-jack { right: 2px; }
.pr-right .pr-jack { left: 2px; }
.pr-unit.on .pr-jack { background: var(--wire); box-shadow: 0 0 8px var(--wire); }
/* the wires: chunky, square-cornered, dark until their switch is on */
.pr-w, .pr-flow, .pr-ch { fill: none; stroke-width: 4; stroke-linecap: square; stroke-linejoin: miter; }
.pr-w { stroke: #323949; }
.pr-flow, .pr-ch { stroke: none; }
.pr-wire.on .pr-w { stroke: var(--wire); filter: drop-shadow(0 0 4px var(--wire)); }
.pr-wire.on .pr-flow { stroke: rgba(255, 255, 255, .7); stroke-linecap: butt; stroke-dasharray: 4 14; animation: pr-flow .7s linear infinite; }
.pr-wire.paused .pr-w { stroke: #ffb347; stroke-dasharray: 8 8; animation: pr-blink 1.2s steps(2) infinite; }
.pr-wire.locked .pr-w { stroke-dasharray: 4 8; opacity: .55; }
.pr-wire.charging .pr-ch { stroke: #fff; stroke-width: 6; stroke-dasharray: 14 100; animation: pr-charge .76s steps(16) forwards; filter: drop-shadow(0 0 6px var(--wire)); }
.pr-foot { width: min(1200px, 100%); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between; }
.pr-sumline { margin: 0; flex: 1 1 260px; }
@keyframes pr-blink { 50% { opacity: .25; } }
@keyframes pr-flow { to { stroke-dashoffset: -18; } }
@keyframes pr-charge { from { stroke-dashoffset: 14; } to { stroke-dashoffset: -100; } }
@keyframes pr-zap { 0% { filter: brightness(2.4); transform: translate(3px, 0); } 20% { transform: translate(-3px, 1px); } 40% { filter: brightness(1.6); transform: translate(2px, -1px); } 60% { transform: translate(-1px, 0); } 100% { filter: none; transform: none; } }
@keyframes pr-shake { 33% { transform: translate(2px, -1px); } 66% { transform: translate(-2px, 1px); } }
@keyframes pr-flash { 0% { background: rgba(157, 255, 190, .6); } 100% { background: transparent; } }
/* no room for two columns: the computer on top, one column under it, the wires in the margins */
.pr.narrow { grid-template-columns: minmax(0, 620px); justify-content: center; row-gap: 14px; padding: 22px 60px 26px; }
.pr.narrow .pr-pc { order: -1; justify-self: center; width: min(216px, 100%); margin-bottom: 8px; }
.pr.narrow .pr-left .pr-jack { left: 2px; right: auto; }
.pr.narrow .pr-right .pr-jack { right: 2px; left: auto; }
.pr.narrow .pr-left .pr-unit { padding: 12px 12px 12px 18px; }
.pr.narrow .pr-right .pr-unit { padding: 12px 18px 12px 12px; }