/* 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; }
@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; }
.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: 90; 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); }
@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; }

/* 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 .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; } }

/* 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; }
  .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, .ag.walking .ag-sprite { 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; }
.ag-sprite { position: absolute; left: -16px; top: -38px; width: 32px; height: 48px; image-rendering: pixelated; }
.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: -30px; width: 26px; height: 39px; }
.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"] .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; }

/* 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; }
@media (max-width: 560px) { .cn-gov { flex-wrap: wrap; } .cn-gov .btn { width: 100%; } }