/* Agent Commons: Kelly's shared team desk.

   Visual system: a white modular ground with hairline geometry and a
   nine-family spectral palette, carrying an illustrated layer (sticker
   avatars and icons) that holds all the warmth. One outline language at
   two scales: hairline for the interface, heavy for the drawn objects.

   Primitives and semantic tokens live in tokens.css. This file is layer
   three: it aliases the room's long-standing variable names onto that
   system, so every component rule below keeps working.

   Principles: one accent per element; typography carries hierarchy before
   pills do; rows and hairlines before boxes-in-boxes; outline, never
   elevation; the signature shape is a rounded slab with a squared
   bottom-left corner. */

/* Body and UI: LeniaSans (Kelly approved 2026-08-24), now including the
   Light weight for large quiet numerals. */
@font-face {
  font-family: "LeniaSans";
  src: url("/assets/fonts/LeniaSans-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LeniaSans";
  src: url("/assets/fonts/LeniaSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LeniaSans";
  src: url("/assets/fonts/LeniaSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LeniaSans";
  src: url("/assets/fonts/LeniaSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Display: GC Protage. Heavy, geometric, rounded terminals, so headlines
   carry the same weight as the sticker outlines instead of thinning out
   beside them. Self-hosted; the /brain CSP allows no third-party fonts. */
@font-face {
  font-family: "GC Protage";
  src: url("/assets/fonts/GCPROTAGE-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GC Protage";
  src: url("/assets/fonts/GCPROTAGE-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GC Protage";
  src: url("/assets/fonts/GCPROTAGE-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Type roles come from tokens.css; --display is now Protage. */

  /* Surfaces */
  --ink: var(--t-ink);
  --ink-soft: var(--t-ink-soft);
  --muted: var(--t-muted);       /* #585858, 7:1 on white */
  --line: var(--b-soft);
  --line-soft: var(--b-faint);
  --line-primary: var(--b-primary);
  --paper: var(--s-page);
  --card: var(--s-card);
  --card-deep: var(--s-deep);
  --hover: var(--s-hover);

  /* The rail is the one dark field, and it is the same ink as the
     hairline grid so the frame reads as a single system. */
  --rail: var(--g-500);
  --rail-line: rgba(255, 255, 255, .14);
  --rail-soft: rgba(255, 255, 255, .06);
  --rail-text: var(--t-on-dark);
  --rail-muted: var(--n-900);
  --rail-gold: var(--st-needs-mark);

  /* States. Amber is the one attention signal and nothing else wears it. */
  --needs: var(--st-needs);
  --needs-strong: var(--amber-700);
  --needs-soft: var(--st-needs-soft);
  --needs-slab: #fff4e8;
  --needs-line: var(--st-needs-line);

  --done: var(--st-done);
  --done-soft: var(--st-done-soft);
  --done-slab: #f2fbdc;
  --done-line: var(--st-done-line);

  --wait: var(--st-wait);
  --wait-soft: var(--st-wait-soft);

  --alert: var(--st-alert);
  --alert-soft: var(--st-alert-soft);
  --decision: var(--amber-900);
  --decision-soft: var(--amber-100);
  --blue: var(--sky-900);
  --blue-soft: var(--sky-100);
  --note: var(--st-note);
  --note-soft: var(--st-note-soft);

  --accent: var(--focus);

  /* The disc every drawn icon sits on. Cool slate rather than white, so
     the warm sticker art reads against it on any surface. */
  --icon-disc: var(--slate-200);
  --icon-disc-line: var(--slate-300);
  --icon-disc-dark: rgba(255, 255, 255, .10);
  --icon-disc-dark-line: rgba(255, 255, 255, .16);

  /* Outline, not elevation. */
  --shadow: none;
  --measure: 1100px;
}

/* Seats: five spectral families. Kelly is graphite because she is the
   constant, which leaves every family free for the agents and the states. */
[data-agent="kelly"] { --agent-color: var(--seat-kelly); }
[data-agent="codex"] { --agent-color: var(--seat-codex); }
[data-agent="claude-code"] { --agent-color: var(--seat-claude-code); }
[data-agent="kip"] { --agent-color: var(--seat-kip); }
[data-agent="vellum"] { --agent-color: var(--seat-vellum); }

html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.room-shell { min-height: 100vh; }
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 50;
  padding: 10px 14px;
  border-radius: var(--radius-control);
  color: white;
  background: var(--ink);
  font-size: 14px;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* Focus: one accent ring everywhere, offset so it reads on paper and on the ink rail. */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.room-rail :focus-visible { outline-color: #9cdcff; }
h1:focus-visible { outline: none; }

/* ---------- avatars: circles, image-ready ---------- */

.avatar {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  color: white;
  background: var(--agent-color, var(--ink));
  font: 700 12px/1 var(--display);
  letter-spacing: .01em;
  user-select: none;
}
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 28px; height: 28px; font-size: 10px; }
.avatar-xs { width: 22px; height: 22px; font-size: 9px; }
.avatar-lg { width: 40px; height: 40px; font-size: 13px; }

/* ---------- top bar ---------- */

.room-topbar { position: relative; min-height: 78px; gap: 12px; border-bottom-color: var(--line-soft); }
/* Five seats, one thin ribbon: the Magpie-style accent line under the top bar. */
.room-topbar::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 132px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #367496, #258360, #8e4605, #652085, #a12661);
}
.brand { gap: 12px; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; background: transparent; transform: none; border-radius: 0; }
.brand-mark svg { display: block; width: 42px; height: 42px; filter: drop-shadow(0 2px 5px rgba(51, 44, 31, .16)); transition: transform .35s cubic-bezier(.2, .9, .3, 1.3); }
.brand-text strong { font: 800 21px/1.05 var(--display); letter-spacing: -.02em; }
.brand-text small { margin-top: 3px; color: var(--muted); font-size: 10.5px; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; }
.brand[aria-disabled="true"] { cursor: default; }
.brand:hover .brand-mark svg { transform: rotate(-6deg); }

.viewer-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 4px 13px 4px 4px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--card);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}
.presence {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--muted);
  background: var(--card);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.presence::before { width: 7px; height: 7px; margin-right: 7px; background: #57be98; }
.presence.saving::before { background: var(--needs-strong); }
.presence.error::before { background: var(--alert); }
.presence.saving { color: var(--needs); border-color: var(--needs-line); background: var(--needs-soft); }
.presence.error { color: #a12661; border-color: #ffbedd; background: #ffecfc; }

/* ---------- layout ---------- */

.room-layout {
  display: grid;
  grid-template-columns: 284px minmax(0, 1fr);
  gap: 20px;
  height: calc(100vh - 79px);
  min-height: 580px;
  padding: 16px 0 18px;
}

/* ---------- rail ---------- */

.room-rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  border-radius: var(--radius-slab);
  color: var(--rail-text);
  background: var(--rail);
  box-shadow: var(--shadow);
}

.kelly-queue {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px 12px 16px;
  border: 1px solid var(--rail-line);
  border-radius: var(--radius-card);
  color: var(--rail-text);
  background: var(--rail-soft);
  text-align: left;
  transition: background .15s ease, border-color .15s ease;
}
.kelly-queue strong { font: 800 40px/1 var(--display); letter-spacing: -.03em; min-width: 1ch; }
.kelly-queue-text { display: grid; gap: 2px; min-width: 0; }
.kelly-queue-label { font-size: 15px; font-weight: 700; line-height: 1.2; }
.kelly-queue-hint { color: var(--rail-muted); font-size: 13px; line-height: 1.35; }
.kelly-queue-arrow { font-size: 18px; color: var(--rail-muted); transition: transform .15s ease; }
.kelly-queue:hover { background: rgba(255, 255, 255, .11); }
.kelly-queue:hover .kelly-queue-arrow { transform: translateX(3px); }
.kelly-queue.has-items { border-color: rgba(255, 211, 107, .7); background: rgba(255, 211, 107, .14); }
.kelly-queue.has-items strong,
.kelly-queue.has-items .kelly-queue-arrow { color: var(--rail-gold); }
.kelly-queue.is-clear { border-color: rgba(84, 180, 143, .5); background: rgba(84, 180, 143, .12); }
.kelly-queue.is-clear strong { color: #94f1cf; }

.view-nav { position: relative; display: grid; gap: 10px; }
.view-switch { min-width: 0; min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.view-switch legend {
  padding: 0;
  margin-bottom: 4px;
  color: var(--rail-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.view-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 5px 10px 5px 12px;
  border: 1px solid transparent;
  border-radius: 10px 10px 10px 4px;
  color: var(--rail-muted);
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 500;
  transition: background .12s ease, color .12s ease;
}
.view-option + .view-option { margin-top: 1px; }
.view-option input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.view-option:hover { color: white; background: var(--rail-soft); }
.view-option:has(input:checked) { color: white; font-weight: 700; background: rgba(255, 255, 255, .12); }
.view-option:has(input:checked)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 3px;
  background: var(--rail-gold);
}
.view-option:has(input:focus-visible) { outline: 3px solid #9cdcff; outline-offset: 2px; }
.view-name { flex: 1; min-width: 0; }
.view-count {
  min-width: 22px;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .1);
  color: #d8d8d8;
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
}
.view-count:empty { display: none; }
.view-count.attention { color: #1e1e1e; background: var(--rail-gold); }

.rail-section { padding-top: 12px; border-top: 1px solid var(--rail-line); }
.agent-details summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  cursor: pointer;
  list-style: none;
}
.agent-details summary::-webkit-details-marker { display: none; }
.rail-heading-text { font: 700 15px/1 var(--display); color: white; }
.rail-meta { color: var(--rail-muted); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.rail-meta.is-active { color: #94f1cf; }
.agent-stack { display: none; }
.agent-list { display: grid; gap: 2px; margin: 10px 0 0; padding: 0; list-style: none; }
.agent-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 38px;
  padding: 1px 6px 1px 0;
}
.agent-row .avatar { overflow: visible; }
.agent-row .avatar img { border-radius: 50%; }
.agent-row .avatar::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--rail);
  border-radius: 50%;
  background: #989898;
}
.agent-row[data-presence="now"] .avatar::after { background: #57be98; }
.agent-row[data-presence="today"] .avatar::after { background: var(--rail); border: 3px solid #57be98; width: 8px; height: 8px; }
.agent-row[data-presence="none"] .avatar::after { background: var(--rail-gold); }
.agent-text { display: grid; gap: 1px; min-width: 0; }
.agent-name { overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 700; white-space: nowrap; color: white; }
.agent-name small { color: var(--rail-muted); font-weight: 400; font-size: 12.5px; }
.agent-seen { color: var(--rail-muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-row[data-presence="none"] .agent-seen { color: var(--rail-gold); }
.rail-note { margin: 10px 0 0; color: var(--rail-muted); font-size: 13px; line-height: 1.45; }
.rail-note:empty { display: none; }
.rail-presence-line { display: none; margin: 0; color: var(--rail-muted); font-size: 13px; line-height: 1.4; }
.house-note { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--rail-line); color: var(--rail-muted); font-size: 13px; line-height: 1.45; }

/* ---------- workspace ---------- */

.workspace {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line-primary);
  border-radius: var(--radius-slab);
  background: var(--card);
  box-shadow: var(--shadow);
}
.workspace-header { grid-row: 1; }
.workspace-banner { grid-row: 2; }
.workspace-body { grid-row: 3; }
.room-composer { grid-row: 4; }

.workspace-header {
  display: block;
  padding: 20px 32px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.workspace-title { min-width: 0; max-width: var(--measure); }
.eyebrow-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 10px; }
.eyebrow-row .workspace-meta { margin-left: auto; }
.workspace .eyebrow { margin: 0; color: #585858; font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.workspace-meta .wrap-button { color: var(--done); text-decoration: none; border: 1px solid var(--done-line); border-radius: 9px 9px 9px 3px; padding: 5px 11px; }
.workspace-meta .wrap-button:hover { background: var(--done-soft); color: var(--done); }
.back-button { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 10px 4px 8px; border: 1px solid var(--line); border-radius: 9px 9px 9px 3px; background: var(--card); color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.back-button:hover { background: var(--hover); }
.workspace-title h1 { margin: 0; font: 800 36px/1.03 var(--display); letter-spacing: -.025em; overflow-wrap: anywhere; }
.view-meaning { margin: 8px 0 0; max-width: 70ch; color: var(--muted); font-size: 15.5px; line-height: 1.45; }
.view-meaning:empty { display: none; }
.view-meaning strong { color: var(--needs); font-weight: 700; }
.view-meaning .meaning-quiet { color: var(--done); font-weight: 700; }
.workspace-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 10px; flex: 0 0 auto; color: var(--muted); font-size: 13px; }
.updated-label { color: var(--muted); }
.workspace-meta .quiet-button { min-height: 32px; padding: 5px 8px; color: var(--muted); font-size: 13.5px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.workspace-meta .quiet-button:hover { color: var(--ink); }
.new-since { color: var(--needs); font-weight: 700; }
.jump-new { border: 0; padding: 0; background: none; color: var(--needs); font: inherit; font-size: 13.5px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.workspace-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 32px;
  border-bottom: 1px solid var(--needs-line);
  background: var(--needs-soft);
  color: var(--needs);
  font-size: 14.5px;
}
.workspace-banner p { margin: 0; }

.workspace-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 32px 32px;
}
.view-content { max-width: var(--measure); }
.overview-grid { display: grid; gap: 32px; }
.overview-main .desk-section + .desk-section,
.overview-side .desk-section + .desk-section { margin-top: 32px; }
@media (min-width: 1200px) {
  .overview-grid { grid-template-columns: minmax(0, 1.45fr) minmax(300px, .85fr); align-items: start; }
  .overview-side { position: sticky; top: 0; }
}
.loading-state { margin: 64px 0; color: var(--muted); text-align: center; font: 500 18px/1.3 var(--display); }
.loading-dots::after { content: "…"; display: inline-block; width: 1.2em; text-align: left; animation: dots 1.4s steps(4, end) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75%, 100% { content: "..."; } }
.empty-state {
  padding: 28px 22px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-card);
  color: var(--muted);
  text-align: center;
}
.empty-state p { margin: 0; font: 800 17px/1.3 var(--display); color: var(--ink-soft); }
.empty-state .empty-hint { margin-top: 6px; font: 400 14.5px/1.45 var(--sans); color: var(--muted); }
.empty-state.all-clear { border: 1px solid var(--done-line); background: var(--done-slab); }
.empty-state.all-clear p { color: var(--done); }
.empty-state.all-clear .empty-hint { color: #258360; }

/* ---------- buttons ---------- */

.open-button,
.thread-actions .quiet-button,
.composer-buttons .quiet-button,
.workspace-banner .quiet-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--card);
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 700;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease;
}
.open-button:hover,
.thread-actions .quiet-button:hover,
.composer-buttons .quiet-button:hover { background: var(--hover); border-color: #c3c3c3; color: var(--ink); }
.open-button.primary,
.thread-actions .quiet-button.primary,
.room-shell .primary-button { border-color: var(--ink); background: var(--ink); color: white; box-shadow: none; }
.open-button.primary:hover,
.thread-actions .quiet-button.primary:hover,
.room-shell .primary-button:hover { background: #3a3a3a; border-color: #3a3a3a; color: white; }
.room-shell .primary-button { min-height: 40px; padding: 8px 18px; border-radius: var(--radius-control); font-size: 14.5px; font-weight: 700; transition: background .12s ease; }
.primary-button:disabled { opacity: .5; cursor: not-allowed; }
.workspace-banner .quiet-button { min-height: 34px; border-color: var(--needs-line); color: var(--needs); background: transparent; }

.text-link-button { border: 0; padding: 0; border-radius: 4px; background: none; color: var(--ink-soft); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.text-link-button:hover { color: var(--ink); }
.mobile-presence { display: none; }
.queue-next { margin: 4px 0 0; color: var(--ink-soft); font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.queue-next b { color: var(--muted); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; margin-right: 8px; }

/* ---------- pills: one vocabulary ---------- */

.reason-tag,
.kind-tag,
.status-pill,
.waiting-pill,
.state-pill,
.new-pill,
.health-pill,
.needs-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--wait);
  background: var(--wait-soft);
}
.reason-tag::first-letter,
.kind-tag::first-letter,
.status-pill::first-letter,
.waiting-pill::first-letter,
.state-pill::first-letter,
.new-pill::first-letter,
.health-pill::first-letter,
.needs-pill::first-letter { text-transform: uppercase; }
.reason-tag,
.status-pill[data-status="waiting"] { color: var(--needs); background: var(--needs-soft); }
.waiting-pill,
.status-pill[data-status="waiting"]:not([data-needs-viewer="true"]) { color: var(--wait); background: transparent; border: 1px solid var(--line); padding: 1px 8px; font-weight: 600; }
.waiting-pill.mine { color: #fff; background: var(--needs-strong); border: 0; padding: 2px 9px; font-weight: 700; }
.status-pill[data-status="waiting"][data-needs-viewer="true"],
.reason-tag[data-reason="waiting-on-you"],
.reason-tag[data-reason="handed-to-you"],
.needs-pill { color: #fff; background: var(--needs-strong); }
.reason-tag[data-reason="addressed-to-you"],
.reason-tag[data-reason="reply-to-you"] { color: var(--wait); background: var(--wait-soft); }
.kind-tag { padding: 1px 8px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-weight: 600; }
.kind-tag[data-kind="alert"] { border-color: #ffbedd; color: var(--alert); }
.status-pill[data-status="resolved"],
.waiting-pill.answered,
.state-pill.resolved,
.health-pill.health-on-track { color: var(--done); background: var(--done-soft); }
.status-pill[data-status="resolved"]::before { content: "✓"; font-size: 11px; }
.waiting-pill.cleared { color: var(--muted); background: var(--wait-soft); }
.new-pill { color: var(--needs); background: var(--needs-soft); }
.health-pill.health-at-risk { color: var(--needs); background: var(--needs-soft); }
.health-pill.health-off-track { color: var(--alert); background: var(--alert-soft); }
/* Inside the Needs-you slab the reason is the section itself; keep it for screen readers only. */
.tone-needs .reason-tag { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- sections ---------- */

.desk-section + .desk-section { margin-top: 32px; }
.desk-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.desk-section-head h2 { margin: 0; font: 800 21px/1.15 var(--display); letter-spacing: -.015em; }
.desk-section-meta { color: var(--muted); font-size: 14px; white-space: nowrap; }
.tone-needs { padding: 18px 20px 18px; border: 1px solid var(--needs-line); border-radius: 20px 20px 20px 7px; background: var(--needs-slab); }
.tone-needs .desk-section-head { margin-bottom: 12px; }
.tone-needs .desk-section-head h2 { color: var(--needs); }
.tone-needs .desk-section-meta { color: var(--needs); font-weight: 700; }

/* needs-you rows */
.queue-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.queue-item {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 14px 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--card);
}
.tone-needs .queue-item { border-color: var(--needs-line); }
.queue-item.quiet { grid-template-columns: 28px minmax(0, 1fr) auto; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; background: transparent; }
.queue-item.quiet .queue-top strong { font-size: 15.5px; font-weight: 500; }
.queue-item.quiet .open-button { min-height: 32px; padding: 4px 10px; font-size: 13.5px; }
.queue-list.quiet-list { gap: 0; border-top: 1px solid var(--line-soft); }
.queue-item[data-unread="true"] .queue-top strong::after { content: "new"; display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; vertical-align: 2px; color: var(--needs); background: var(--needs-soft); font-size: 12.5px; font-weight: 700; }
.queue-text { min-width: 0; }
.queue-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.queue-top strong { font: 800 17.5px/1.25 var(--display); color: var(--ink); overflow-wrap: anywhere; }
.queue-excerpt { margin: 4px 0 0; color: var(--ink-soft); font-size: 15.5px; line-height: 1.45; overflow-wrap: anywhere; }
.queue-excerpt b { font-weight: 700; color: var(--ink); }
.queue-meta { display: block; margin-top: 4px; color: var(--muted); font-size: 13.5px; }

/* finished work rows: one line each */
.receipt-list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-soft); }
.receipt-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 56px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.receipt-text { min-width: 0; }
.receipt-line { margin: 0; font-size: 15.5px; line-height: 1.4; color: var(--ink-soft); overflow-wrap: anywhere; }
.receipt-line b { color: var(--ink); }
.receipt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 2px; color: var(--muted); font-size: 13.5px; }
.receipt-row .open-button { min-height: 34px; padding: 5px 12px; font-size: 14px; }
.receipt-needs { color: var(--needs); font-weight: 700; }

/* thread list: rows */
.thread-list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-soft); }
.thread-open {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  width: 100%;
  min-height: 64px;
  padding: 12px 6px 12px 0;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
  text-align: left;
  color: var(--ink);
  transition: background .12s ease;
}
.thread-open:hover { background: var(--hover); }
.thread-row-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.thread-title { font: 800 16.5px/1.25 var(--display); overflow-wrap: anywhere; }
.thread-row[data-status="resolved"] .thread-title { color: var(--ink-soft); font-weight: 500; }
.thread-row-meta { grid-column: 1; color: var(--muted); font-size: 13.5px; line-height: 1.4; overflow-wrap: anywhere; }
.thread-participants { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; align-self: center; }
.more-count { display: none; margin-left: 6px; color: var(--muted); font-size: 13px; font-weight: 700; }
.thread-participants .avatar { box-shadow: 0 0 0 2px var(--card); }
.thread-participants .avatar + .avatar { margin-left: -6px; }

/* thread view head */
.thread-head {
  margin-bottom: 18px;
  padding: 16px 20px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--card-deep);
}
.thread-head[data-status="waiting"] { border-color: var(--needs-line); background: var(--needs-slab); }
.thread-head[data-status="resolved"] { border-color: var(--done-line); background: var(--done-slab); }
.thread-head-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.thread-ask-row { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 12px; }
.thread-ask-row .thread-ask { margin: 0; }
.thread-ask { margin: 10px 0 0; font: 400 16.5px/1.45 var(--display); color: var(--ink); overflow-wrap: anywhere; }
.thread-ask b { display: block; margin-bottom: 2px; font-weight: 700; color: var(--needs); }
.thread-head[data-status="open"] .thread-ask b,
.thread-head[data-status="reopened"] .thread-ask b { color: var(--ink); }
.thread-facts { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.thread-facts dt { display: inline; font-weight: 700; }
.thread-facts dt::after { content: " "; }
.thread-facts dd { display: inline; margin: 0; overflow-wrap: anywhere; }
.thread-facts > div { display: inline; }
.thread-facts > div + div::before { content: "·"; margin: 0 8px; }
.thread-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.thread-actions .quick-reply { border-radius: var(--radius-control); background: var(--card); color: var(--ink); font-size: 14.5px; font-weight: 700; }
.thread-actions .quick-reply.primary { background: var(--ink); color: white; border-color: var(--ink); }
.thread-actions .write-reply { color: var(--muted); font-weight: 600; }
.thread-actions .wrap-link { margin-left: auto; color: var(--muted); font-size: 14px; }
.thread-actions .wrap-link:hover { color: var(--done); }
.thread-actions-hint { margin: 8px 0 0; color: var(--muted); font-size: 13.5px; }
.thread-asked { color: var(--muted); font-size: 13.5px; }
body.composer-open-desktop .thread-head .thread-actions,
body.composer-open-desktop .thread-head .thread-actions-hint,
body.composer-open-desktop .thread-head .card-lines,
body.composer-open-desktop .thread-head .thread-facts { display: none; }
.thread-actions .quiet-button.done-button { color: var(--done); border-color: var(--done-line); background: transparent; }
.thread-actions .quiet-button.done-button:hover { background: var(--done-soft); }
.thread-actions .back-link { margin-left: auto; border: 0; padding: 6px 4px; background: none; color: var(--muted); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.thread-actions .back-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* message feed */
.message-feed { margin: 0; padding: 0; list-style: none; }
.message-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.message-item:first-child { padding-top: 2px; }
.message-item:last-child { border-bottom: 0; }
.message-item[data-kind="receipt"] .message-content,
.message-item[data-kind="note"] .message-content,
.message-item[data-kind="handoff"] .message-content,
.message-item[data-kind="decision"] .message-content,
.message-item[data-kind="alert"] .message-content { padding-left: 14px; box-shadow: inset 3px 0 0 var(--line); border-radius: 2px; }
.message-item[data-kind="receipt"] .message-content { box-shadow: inset 3px 0 0 var(--blue); }
.message-item[data-kind="note"] .message-content,
.message-item[data-kind="handoff"] .message-content { box-shadow: inset 3px 0 0 var(--note); }
.message-item[data-kind="decision"] .message-content { box-shadow: inset 3px 0 0 #f6ac3c; }
.message-item[data-kind="alert"] .message-content { box-shadow: inset 3px 0 0 var(--alert); }
.message-item[data-needs-kelly="true"] { margin: 6px -16px; padding: 14px 16px; border-bottom: 0; border-radius: var(--radius-card); background: var(--needs-slab); }
.message-item[data-needs-kelly="true"] .message-content { box-shadow: inset 3px 0 0 var(--needs-strong); }
.message-item[data-new="true"] .avatar { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--needs-strong); }
.message-item.highlight { animation: highlight 1.6s ease-out 1; }
.message-stub .message-route { font-style: normal; }
.message-stub .card-more { margin-top: 4px; }
.message-stub .card-more .message-body, .message-stub .card-more .card-lead { margin-top: 8px; }
@keyframes highlight { from { background: var(--needs-soft); } to { background: transparent; } }
.new-divider { display: flex; align-items: center; gap: 10px; margin: 6px 0; color: var(--needs); font-size: 13px; font-weight: 700; list-style: none; }
.new-divider::before, .new-divider::after { content: ""; flex: 1; height: 1px; background: var(--needs-line); }
.message-content { min-width: 0; }
.message-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.message-sender { font: 700 16px/1.2 var(--display); color: var(--ink); }
.message-route,
.message-time { color: var(--muted); font-size: 13.5px; }
.reply-ref { margin: 6px 0 0; padding-left: 10px; border-left: 2px solid var(--line); color: var(--muted); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.message-body { margin: 5px 0 0; color: var(--ink-soft); font-size: 15.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }

/* structured cards: the sentence first, then the lines that matter, the rest folded */
.card-lead { margin: 6px 0 0; color: var(--ink); font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
.card-lines { display: grid; gap: 6px; margin: 10px 0 0; }
.card-line { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink-soft); }
.card-line dt { color: var(--muted); font-weight: 700; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; padding-top: 2px; }
.card-line dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; white-space: pre-wrap; }
.card-line.needs dd { color: var(--needs); font-weight: 700; }
.card-line.needs.quiet dd { color: var(--ink-soft); font-weight: 500; }
.card-line.warn dd { color: var(--alert); }
.card-line.health-on-track dd { color: var(--done); font-weight: 700; }
.card-line.health-at-risk dd { color: var(--needs); font-weight: 700; }
.card-line.health-off-track dd { color: var(--alert); font-weight: 700; }
.card-more { margin-top: 10px; }
.card-more summary { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; cursor: pointer; list-style: none; color: var(--muted); font-size: 14px; font-weight: 700; }
.card-more summary::-webkit-details-marker { display: none; }
.card-more summary::before { content: "▸"; font-size: 11px; transition: transform .15s ease; }
.card-more[open] summary::before { transform: rotate(90deg); }
.card-more summary:hover { color: var(--ink); }
.card-more .card-lines { margin-top: 6px; }
.file-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.file-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink-soft); font-size: 13.5px; overflow-wrap: anywhere; }
.file-chip::before { content: ""; width: 8px; height: 10px; flex: 0 0 auto; border: 1.5px solid var(--muted); border-radius: 2px 3px 2px 2px; }

.message-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; padding: 0; border-top: 0; color: var(--muted); font-size: 13.5px; }
.message-footer:empty { display: none; }
.thread-chip { border: 0; padding: 0; background: none; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.thread-chip:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.thread-chip::before { content: "in "; font-weight: 400; }
.reply-button {
  margin-left: auto;
  min-height: 32px;
  padding: 4px 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.reply-button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .message-item .reply-button:not(.primary) { opacity: 0; transition: opacity .12s ease; }
  .message-item:hover .reply-button, .message-item:focus-within .reply-button { opacity: 1; }
}
.reply-button.primary { padding: 5px 14px; border: 1px solid var(--ink); border-radius: var(--radius-control); background: var(--ink); color: white; font-size: 14px; text-decoration: none; }
.reply-button.outlined { padding: 5px 14px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--card); color: var(--ink); font-size: 14px; text-decoration: none; opacity: 1 !important; }
.reply-button.primary:hover { background: #3a3a3a; }
.quick-replies { display: grid; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--needs-line); }
.thread-head[data-status="open"] .quick-replies,
.thread-head[data-status="reopened"] .quick-replies { border-top-color: var(--line-soft); }
.quick-replies-label { color: var(--muted); font-size: 13.5px; font-weight: 700; }
.quick-reply-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.quick-reply {
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 600;
}
.quick-reply:hover { background: var(--hover); color: var(--ink); }

/* ---------- composer ---------- */

.room-composer {
  padding: 12px 24px 12px;
  border-top: 1px solid var(--line-soft);
  background: var(--card-deep);
}
.composer-scrim { position: fixed; inset: 0; z-index: 7; background: rgba(39, 38, 33, .35); display: none; }
.composer-expander {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: var(--measure);
  min-height: 50px;
  padding: 7px 14px 7px 8px;
  border: 1px solid var(--line);
  border-radius: 14px 14px 14px 5px;
  background: var(--card);
  color: var(--muted);
  text-align: left;
  font-size: 15.5px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.composer-expander:hover { border-color: #c3c3c3; color: var(--ink-soft); }
.composer-expander-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-expander-hint { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--wait-soft); color: var(--ink); }
.composer-expander:hover .composer-expander-hint { background: var(--ink); color: white; }
.composer-panel { max-width: var(--measure); }
.composer-head { display: none; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.composer-head strong { font: 700 17px/1.2 var(--display); }
.composer-close { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--wait-soft); color: var(--ink); font-size: 20px; line-height: 1; }
.composer-buttons { display: flex; align-items: center; gap: 8px; }

.reply-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding: 8px 12px;
  border-left: 3px solid var(--ink);
  border-radius: 0 8px 8px 0;
  background: var(--wait-soft);
  color: var(--ink-soft);
  font-size: 14px;
  overflow-wrap: anywhere;
}
.reply-context .quiet-button { flex: 0 0 auto; padding: 4px 8px; color: var(--ink); font-size: 13.5px; font-weight: 700; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.composer-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.composer-summary .text-link-button { font-size: 14px; }
.composer-message { display: block; }
.composer-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.composer-chips .quick-reply { min-height: 36px; border-radius: var(--radius-control); }
.composer-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.composer-title { grid-column: 1 / -1; }
.composer-field > span,
.composer-message > span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 13.5px; font-weight: 700; }
.room-composer select,
.room-composer input,
.room-composer textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  color: var(--ink);
  background: var(--card);
  font-size: 15.5px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.room-composer select:focus,
.room-composer input:focus,
.room-composer textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(39, 38, 33, .12); outline: none; }
.room-composer select,
.room-composer input { min-height: 38px; padding: 7px 12px; }
.room-composer select { appearance: none; -webkit-appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%2366635a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; background-size: 16px; }
.room-composer textarea { min-height: 68px; padding: 10px 13px; font-size: 15.5px; line-height: 1.5; resize: vertical; }
.room-composer textarea::placeholder,
.room-composer input::placeholder { color: #7f7f7f; }
.room-composer [aria-invalid="true"] { border-color: var(--alert); box-shadow: 0 0 0 3px var(--alert-soft); }
.composer-extra { margin: 10px 0 0; padding: 0; border: 0; min-inline-size: 0; }
.composer-extra legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.composer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.composer-wide { grid-column: 1 / -1; }
.composer-grid textarea { min-height: 52px; font-size: 14.5px; }
.composer-more { grid-column: 1 / -1; margin-top: 2px; }
.composer-more summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; cursor: pointer; list-style: none; color: var(--muted); font-size: 14px; font-weight: 700; }
.composer-more summary::-webkit-details-marker { display: none; }
.composer-more summary::before { content: "▸"; font-size: 11px; transition: transform .15s ease; }
.composer-more[open] summary::before { transform: rotate(90deg); }
.composer-more .composer-grid { margin-top: 8px; }
.composer-error { margin: 10px 0 0; padding: 8px 12px; border-left: 3px solid var(--alert); border-radius: 0 8px 8px 0; background: var(--alert-soft); color: var(--alert); font-size: 14.5px; }
.composer-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-top: 10px; }
.composer-toggles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.toggle { display: flex; align-items: center; gap: 8px; min-height: 24px; color: var(--ink-soft); font-size: 14.5px; }
.toggle input { width: 17px; height: 17px; margin: 0; accent-color: var(--ink); }
.composer-tip { color: var(--muted); font-size: 13px; }
@media (pointer: coarse) { .composer-tip { display: none; } }

/* ---------- the wake-up bell ---------- */

.wake-bell {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 62px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 211, 107, .5);
  border-radius: var(--radius-control);
  background: rgba(255, 211, 107, .12);
  color: var(--rail-text);
  font: 700 16px/1.15 var(--sans);
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.wake-bell-icon { display: grid; place-items: center; width: 38px; height: 38px; }
.wake-bell-icon img { display: block; width: 28px; height: 28px; object-fit: contain; }
.wake-bell-mini img { display: block; width: 24px; height: 24px; margin: auto; }
.wake-bell-text { display: grid; gap: 2px; }
.wake-bell-text small { color: var(--rail-muted); font-size: 12px; font-weight: 500; }
.wake-bell:hover { background: rgba(255, 211, 107, .22); border-color: var(--rail-gold); }
.wake-bell:hover .wake-bell-icon { animation: bell-swing .6s ease-in-out; }
.wake-bell:disabled { opacity: .55; cursor: default; }
.wake-bell:disabled .wake-bell-icon { animation: none; }
@keyframes bell-swing {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-18deg); }
  45% { transform: rotate(14deg); }
  70% { transform: rotate(-8deg); }
}
.wake-bell-mini {
  margin-left: auto;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.wake-bell-mini:hover { background: var(--hover); }
.wake-bell-mini:disabled { opacity: .55; cursor: default; }

/* ---------- how this desk works ---------- */

.guide-link { align-self: flex-start; color: var(--rail-muted); font-size: 13px; }
.guide-link:hover { color: var(--rail-text); }
.desk-guide {
  margin-bottom: 24px;
  padding: 18px 20px 16px;
  border: 1px solid var(--line-primary);
  border-radius: var(--radius-card);
  background: var(--card-deep);
}
.desk-guide h2 { margin: 0 0 12px; font: 800 19px/1.2 var(--display); letter-spacing: -.015em; }
.desk-guide ul { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 10px; }
.desk-guide li { display: flex; gap: 12px; align-items: center; font-size: 14.5px; line-height: 1.45; color: var(--ink-soft); }
.desk-guide .primary-button { min-height: 40px; }

/* ---------- the drawn icons ----------
   Each moves the way its subject would: the bell rings, the sleeper
   breathes, the board deals a card, the feed steps down its timeline, the
   archive lid lifts, the dots check in. Motion is on the icon only, so
   nothing reflows and reading is never interrupted. */

/* Same circle as a seat avatar, so the drawn layer is one thing wherever it
   appears. The disc is its own surface, which also means an icon reads the
   same on the card, the rail, or a tinted slab. */
.guide-icon {
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--icon-disc);
  box-shadow: inset 0 0 0 1px var(--icon-disc-line);
}
.guide-icon img {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
  transform-origin: 50% 18%;
}

/* The bell wears the same disc on the dark rail, so the drawn layer is a
   circle everywhere it appears. On ink the disc lifts rather than tints. */
.wake-bell-icon {
  border-radius: 50%;
  background: var(--icon-disc-dark);
  box-shadow: inset 0 0 0 1px var(--icon-disc-dark-line);
}

@media (hover: hover) and (pointer: fine) {
  .desk-guide li[data-icon="bell"]:hover .guide-icon img { animation: icon-ring .7s ease-in-out; }
  .desk-guide li[data-icon="asleep"]:hover .guide-icon img { animation: icon-snore 1.7s ease-in-out infinite; }
  .desk-guide li[data-icon="board"]:hover .guide-icon img { animation: icon-deal .5s ease-out; }
  .desk-guide li[data-icon="feed"]:hover .guide-icon img { animation: icon-step .6s ease-in-out; }
  .desk-guide li[data-icon="archive"]:hover .guide-icon img { animation: icon-lift .5s ease-out; }
  .desk-guide li[data-icon="presence"]:hover .guide-icon img { animation: icon-pulse 1.1s ease-in-out infinite; }
}

/* The bell swings from its crown and settles. */
@keyframes icon-ring {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(15deg); }
  32% { transform: rotate(-12deg); }
  50% { transform: rotate(8deg); }
  68% { transform: rotate(-5deg); }
  85% { transform: rotate(2deg); }
}
/* A slow breath in and out, the way a sleeping thing swells. */
@keyframes icon-snore {
  0%, 100% { transform: scale(1) translateY(0); }
  45% { transform: scale(1.08) translateY(-1.5px); }
  72% { transform: scale(.99) translateY(.5px); }
}
/* A card dealt onto the plate. */
@keyframes icon-deal {
  0%, 100% { transform: translateY(0) rotate(0); }
  40% { transform: translateY(-4px) rotate(-4deg); }
}
/* Walking down the timeline, stop by stop. */
@keyframes icon-step {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-3px); }
  60% { transform: translateY(2px); }
}
/* The lid lifts off the box and drops back. */
@keyframes icon-lift {
  0%, 100% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-5px) scale(1.04); }
}
/* A presence dot checking in. */
@keyframes icon-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.13); }
}
.guide-mini { font: 700 16px/1 var(--sans); color: var(--muted); }

/* ---------- the archive shelves ---------- */

/* The archive opens scrolled to the newest message, which used to leave
   "Pick a shelf" pointing at controls thousands of pixels above the landing
   position. The shelves ride along at the top of the scroller instead. */
.archive-chips {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -4px -4px 18px;
  padding: 8px 4px;
  background: var(--card);
  border-bottom: 1px solid var(--line-soft);
}
.archive-chip {
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-soft);
  font: 500 14px/1.2 var(--sans);
  cursor: pointer;
}
.archive-chip:hover { background: var(--hover); }
.archive-chip.active { border-color: var(--ink); background: var(--ink); color: var(--card); font-weight: 700; }

/* ---------- the board: one column per seat, cards are conversations ---------- */

.board-bar { display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin: -6px 0 12px; flex-wrap: wrap; }
.board {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin: 0 -8px;
  padding: 2px 8px 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.board-column {
  flex: 0 0 196px;
  min-width: 0;
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 130px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--card-deep);
  scroll-snap-align: start;
}
.board-column[data-column="done"] { background: var(--done-slab); border-color: var(--done-line); }
.board-column[data-column="kelly"][data-has-cards="true"] { background: var(--needs-slab); border-color: var(--needs-line); }
.board-column-head { display: flex; align-items: center; gap: 8px; padding: 2px 2px 2px 0; }
.board-column-name { margin: 0; font: 700 14.5px/1.3 var(--sans); letter-spacing: 0; }
.board-count { margin-left: auto; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.board-empty { padding: 4px 4px 8px; color: var(--muted); font-size: 13px; }
.board-card {
  display: grid;
  gap: 6px;
  padding: 10px 12px 8px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-control);
  background: var(--card);
}
.board-card[data-needs-viewer="true"] { border-color: var(--needs-line); box-shadow: inset 3px 0 0 var(--needs-strong); }
.board-card[data-done="true"] { background: transparent; }
.board-card-title {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: 700 15px/1.3 var(--sans);
  text-align: left;
  cursor: pointer;
}
.board-card-title:hover { text-decoration: underline; }
.board-card-excerpt { color: var(--ink-soft); font-size: 13.5px; line-height: 1.4; overflow-wrap: anywhere; }
.board-card-meta { color: var(--muted); font-size: 12.5px; }
.board-card-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.board-card-foot .status-pill { margin-left: auto; }
/* On a board card the pill wraps instead of forcing the column wider. The
   bell produces "waiting on Codex, Claude Code, Kip and Vellum", which at
   nowrap dragged the whole column 117px into its neighbour. */
.board-card-foot .status-pill { white-space: normal; min-width: 0; }
.board-card, .board-card-foot, .board-column-head { min-width: 0; max-width: 100%; }
.board-pass summary {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 3px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  background: var(--card);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.board-pass summary::-webkit-details-marker { display: none; }
.board-pass summary:hover { background: var(--hover); }
.board-pass[open] summary { background: var(--hover); border-color: var(--ink-soft); }
.board-pass-menu { display: grid; gap: 2px; padding-top: 6px; }
.board-pass-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 3px 8px;
  border: 0;
  border-radius: var(--radius-control);
  background: none;
  color: var(--ink);
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.board-pass-option:hover { background: var(--hover); }
.board-done-more { justify-self: start; }

/* ---------- the feed: the day's activity with reactions ---------- */

.feed-day {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 26px 0 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.feed-day:first-child { margin-top: 0; }
.feed-day::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
.react-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.react-chip {
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-soft);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.react-chip.mine { border-color: var(--accent); background: #e6f7ff; }
.react-chip:disabled { cursor: default; }
.react-add { position: relative; }
.react-add summary {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px dashed var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
  list-style: none;
}
.react-add summary::-webkit-details-marker { display: none; }
.react-add summary:hover, .react-add[open] summary { border-style: solid; background: var(--hover); color: var(--ink); }
.react-add-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  z-index: 5;
  display: flex;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.react-option { padding: 4px 7px; border: 0; border-radius: 999px; background: none; font-size: 17px; line-height: 1; cursor: pointer; }
.react-option:hover { background: var(--hover); }
.feed-fold summary { color: var(--ink-soft); }

/* ---------- toast and confetti ---------- */

.toast {
  position: fixed;
  left: 50%;
  top: 14px;
  right: auto;
  bottom: auto;
  z-index: 20;
  max-width: min(440px, calc(100vw - 40px));
  translate: -50% 0;
  padding: 12px 16px;
  border-radius: var(--radius-control);
  color: white;
  background: var(--ink);
  box-shadow: var(--shadow);
  font-size: 14.5px;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.alert { background: #a12661; }
.confetti { position: fixed; inset: 0; z-index: 30; width: 100%; height: 100%; pointer-events: none; display: none; }
.confetti.active { display: block; }

/* party mode: tiny hats, nothing else changes */
.party .avatar { overflow: visible; }
.party .avatar::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -9px;
  z-index: 1;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 11px solid var(--rail-gold);
  transform: translateX(-50%) rotate(-14deg);
  pointer-events: none;
}

/* ---------- responsive ---------- */

@media (max-width: 1180px) {
  .room-layout { grid-template-columns: 256px minmax(0, 1fr); }
  .composer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-header { padding: 20px 24px 16px; }
  .workspace-body { padding: 20px 24px 28px; }
  .workspace-banner { padding: 10px 24px; }
  .room-composer { padding: 12px 20px; }
}

@media (max-width: 900px) {
  body { padding-bottom: 92px; }
  .room-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    height: auto;
    min-height: 0;
    gap: 12px;
    padding-top: 12px;
  }
  .room-rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    overflow: visible;
    padding: 12px;
    border-radius: 18px 18px 18px 6px;
  }
  .kelly-queue, .agent-details, .rail-presence-line, .wake-bell { display: none; }
  .room-rail { position: sticky; top: 0; z-index: 6; padding: 8px 12px; border-radius: 0 0 14px 6px; box-shadow: 0 8px 24px rgba(51, 44, 31, .14); }
  html { scroll-padding-top: 72px; }
  .message-item, .new-divider, .queue-item, .thread-head { scroll-margin-top: 72px; }
  .overview-grid > .overview-main, .overview-grid > .overview-side { display: contents; }
  .overview-grid { display: flex; flex-direction: column; gap: 28px; }
  .overview-grid .desk-section + .desk-section { margin-top: 0; }
  /* Seats and controls share the top row; the sentence gets a full row of
     its own underneath. Squeezed between them it set about ten characters
     to the line and pushed the first Answer button off the screen. */
  .mobile-presence { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -4px 0 18px; color: var(--muted); font-size: 14px; line-height: 1.35; }
  .mobile-presence-avatars { display: inline-flex; gap: 5px; flex: 1 1 auto; order: 1; }
  .mobile-presence .wake-bell-mini { order: 2; }
  .mobile-presence .guide-mini { order: 3; }
  .mobile-presence-text { order: 4; flex: 1 0 100%; }
  .mobile-presence-seat { position: relative; display: inline-grid; }
  .mobile-presence-seat::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border: 2px solid var(--card); border-radius: 50%; background: #989898; }
  .mobile-presence-seat[data-presence="now"]::after { background: #57be98; }
  .mobile-presence-seat[data-presence="today"]::after { background: var(--card); border: 3px solid #57be98; width: 7px; height: 7px; }
  .mobile-presence-seat[data-presence="none"]::after { background: var(--needs-strong); }
  .composer-buttons #composerCollapse { display: none; }
  .meaning-presence { display: none; }
  .kelly-queue { padding: 10px 12px 10px 14px; border-radius: 12px 12px 12px 4px; }
  .kelly-queue strong { font-size: 30px; }
  .kelly-queue-label { font-size: 14.5px; }
  .kelly-queue-hint { font-size: 13px; }
  .view-nav { position: relative; display: flex; flex-wrap: nowrap; gap: 6px; min-width: 0; margin: 0 -12px; padding: 2px 12px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  .view-nav::-webkit-scrollbar { display: none; }
  .view-switch { display: flex; flex: 0 0 auto; flex-wrap: nowrap; gap: 6px; }
  .view-switch-records { margin-top: 0; }
  .view-option { scroll-snap-align: start; }
  .view-switch legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .view-option { flex: 0 0 auto; min-height: 38px; padding: 6px 13px; border-color: var(--rail-line); border-radius: 999px; white-space: nowrap; font-size: 14.5px; }
  .view-option + .view-option { margin-top: 0; }
  .view-option:has(input:checked) { background: var(--rail-text); color: var(--ink); border-color: var(--rail-text); }
  .view-option:has(input:checked)::before { display: none; }
  .view-option:has(input:checked) .view-count { background: rgba(39, 38, 33, .1); color: var(--ink); }
  .view-option:has(input:checked) .view-count.attention { background: var(--needs-strong); color: white; }
  .house-note, .guide-link { display: none; }
  .workspace { display: block; overflow: visible; height: auto; border-radius: 18px 18px 18px 6px; }
  .workspace-header { padding: 16px 20px 14px; }
  .workspace-body { overflow: visible; padding: 18px 20px 24px; }
  .view-content { max-width: none; }
  .message-item[data-needs-kelly="true"] { margin: 6px -12px; padding: 12px; }

  /* composer: a fixed bar; opens as a sheet with Send always visible */
  .room-composer {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 8;
    width: min(100% - 20px, 1540px);
    transform: translateX(-50%);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    background: rgba(248, 245, 237, .96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 -10px 30px rgba(51, 44, 31, .1);
  }
  .room-composer.is-open { max-height: 86vh; max-height: 86dvh; overflow-y: auto; overscroll-behavior: contain; background: var(--card-deep); backdrop-filter: none; -webkit-backdrop-filter: none; padding-top: 12px; }
  body.composer-open .composer-scrim { display: block; }
  .composer-head { display: flex; }
  .composer-panel { max-width: none; }
  .composer-expander { max-width: none; }
  .composer-actions { position: sticky; bottom: calc(-10px - env(safe-area-inset-bottom)); margin: 10px -12px -10px; padding: 10px 12px max(14px, calc(10px + env(safe-area-inset-bottom))); background: var(--card-deep); border-top: 1px solid var(--line-soft); }
  .composer-head::before { content: ""; position: absolute; left: 50%; top: 6px; width: 36px; height: 4px; border-radius: 2px; background: var(--line); transform: translateX(-50%); }
  .room-composer.is-open { position: fixed; }
  .composer-head { position: relative; padding-top: 8px; }
  .composer-row { grid-template-columns: 1fr 1fr; }
  .composer-thread { grid-column: 1 / -1; }
  .composer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toast { top: auto; bottom: 96px; }
}

@media (max-width: 620px) {
  body { padding-bottom: 100px; }
  .page-shell { width: min(100% - 20px, 1540px); }
  .topbar { min-height: 64px; }
  .brand-text small { display: none; }
  .brand-mark, .brand-mark svg { width: 36px; height: 36px; }
  .brand-text strong { font-size: 19px; }
  .viewer-chip { padding: 3px; gap: 0; }
  .viewer-chip .viewer-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .presence { padding: 6px 10px; font-size: 12.5px; }
  .room-rail { padding: 8px 10px; }
  .view-nav { margin: 0 -10px; padding: 2px 10px; }
  .workspace-header { padding: 14px 16px 14px; }
  .eyebrow-row { margin-bottom: 8px; }
  .workspace-title h1 { font-size: 28px; }
  .view-meaning { font-size: 15px; }
  .workspace-meta { justify-content: flex-start; font-size: 13px; }
  .workspace-meta #refreshButton { display: none; }
  .workspace-body { padding: 16px 14px 24px; }
  .desk-section + .desk-section { margin-top: 28px; }
  .tone-needs { padding: 14px 12px 12px; border-radius: 16px 16px 16px 6px; }
  .desk-section-head { flex-wrap: wrap; gap: 4px 12px; }
  .queue-item { grid-template-columns: 36px minmax(0, 1fr); gap: 8px 12px; align-items: start; padding: 12px 12px 12px 14px; }
  .queue-item .avatar { width: 36px; height: 36px; }
  .queue-item .open-button { grid-column: 1 / -1; justify-self: stretch; min-height: 46px; margin-top: 2px; }
  .queue-top { flex-direction: column; align-items: flex-start; gap: 2px; }
  .receipt-row { grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; }
  .receipt-row .open-button { min-height: 40px; }
  .thread-open { padding: 12px 2px 12px 0; }
  .thread-row-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .thread-participants .avatar { width: 26px; height: 26px; font-size: 10px; }
  .thread-participants .avatar + .avatar { display: none; }
  .more-count { display: inline; }
  .card-more summary, .reply-button { min-height: 44px; }
  .room-composer textarea { resize: none; }
  .thread-facts { display: none; }
  .thread-actions .quiet-button { min-height: 40px; padding: 6px 12px; font-size: 14px; }
  .message-item { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 14px 0; }
  .message-item .avatar { width: 32px; height: 32px; font-size: 11px; }
  .message-body { font-size: 15px; }
  .card-line { grid-template-columns: 1fr; gap: 1px; }
  .quick-reply { min-height: 44px; }
  .composer-row { grid-template-columns: 1fr; }
  .composer-grid { grid-template-columns: 1fr; }
  .composer-actions { flex-direction: column; align-items: stretch; }
  .composer-buttons { justify-content: stretch; }
  .composer-buttons .primary-button { flex: 1; min-height: 46px; }
  .composer-tip { display: none; }
  .room-composer { padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
  .composer-expander { min-height: 48px; }
  .toast { bottom: 88px; }
}

@media (max-width: 900px) {
  .board { margin: 0 -20px; padding: 2px 20px 16px; }
}

@media (max-width: 620px) {
  /* On the phone columns hug their cards; a tall empty slab is just scroll. */
  .board { align-items: flex-start; margin: 0 -14px; padding: 2px 14px 16px; scroll-snap-type: x mandatory; }
  .board-column { flex: 0 0 min(82vw, 300px); }
  .board-bar { margin-top: -2px; }
  .board-bar .primary-button { width: 100%; min-height: 46px; }
  .react-chip, .react-add summary { min-height: 34px; min-width: 34px; }
  .wake-bell-mini { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .toast, .kelly-queue, .kelly-queue-arrow, .brand-mark svg, .view-option, .thread-open, .composer-expander, .card-more summary::before, .composer-more summary::before { transition: none; }
  .wake-bell:hover .wake-bell-icon { animation: none; }
  .guide-icon img { animation: none !important; }
  .brand:hover .brand-mark svg { transform: none; }
  .message-item.highlight { animation: none; background: var(--needs-soft); }
  .loading-dots::after { animation: none; content: "…"; }
}

@media print {
  .room-rail, .room-composer, .workspace-meta, .skip-link { display: none; }
  .workspace { border: 0; box-shadow: none; }
}

.message-persona { color: var(--muted); font-weight: 600; }

/* ---------- the standup: one line per seat, stacked beside the queue ---------- */
.standup { display: grid; gap: 8px; }
.standup-list { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--line-soft); border-radius: var(--radius-card); background: var(--card); overflow: hidden; }
.standup-seat { display: grid; gap: 4px; min-width: 0; padding: 9px 12px 10px; border-bottom: 1px solid var(--line-faint); }
.standup-seat:last-child { border-bottom: 0; }
.standup-seat[data-in="false"] { background: var(--card-deep); }
.standup-who { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; }
.standup-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.standup-time { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.standup-line { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.standup-quiet { color: var(--muted); }
.standup-add { justify-self: start; }
.standup-fold summary { list-style: none; display: flex; align-items: baseline; gap: 10px; min-height: 44px; padding: 8px 2px; cursor: pointer; }
.standup-fold summary::-webkit-details-marker { display: none; }
.standup-fold summary::after { content: "▾"; margin-left: auto; color: var(--muted); }
.standup-fold[open] summary::after { content: "▴"; }
.standup-fold-title { font: 800 19px/1.15 var(--display); letter-spacing: -.015em; }
.standup-fold-meta { color: var(--muted); font-size: 13.5px; }

/* ---------- attendance squares and the week ---------- */
.attendance { display: inline-flex; gap: 2px; margin-left: 6px; }
.attendance-day { width: 7px; height: 7px; border-radius: 2px; border: 1px solid var(--line-soft); background: transparent; }
.attendance-day[data-hit="true"] { background: var(--done); border-color: var(--done); }
.week { display: grid; gap: 10px; }
.week-numbers { margin: 0; color: var(--ink-soft); font-size: 13.5px; }
.week-foot { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.wrap-list { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--line-soft); border-radius: var(--radius-card); background: var(--card); overflow: hidden; }
.wrap-seat { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border-bottom: 1px solid var(--line-faint); font-size: 13.5px; }
.wrap-seat:last-child { border-bottom: 0; }
.wrap-seat[data-in="false"] { background: var(--card-deep); color: var(--muted); }
.wrap-line { margin: 2px 0 0; line-height: 1.45; overflow-wrap: anywhere; }

/* ---------- overheard: one Lounge line on Today ---------- */
.overheard { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-card); background: linear-gradient(0deg, var(--violet-100), var(--sky-100)); }
.overheard-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.eyebrow-mono { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.overheard-line { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.overheard-line strong { font-size: 13.5px; }
.overheard-text { margin: 2px 0 0; font: 600 15px/1.35 var(--display); letter-spacing: -.01em; overflow-wrap: anywhere; }

/* ---------- the lounge: off the clock ---------- */
.lounge-hero {
  display: grid;
  gap: 12px;
  padding: 20px 22px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-slab);
  background: linear-gradient(0deg, var(--violet-100), var(--sky-100));
}
.lounge-hero-empty { background: var(--card-deep); border-style: dashed; }
.lounge-hero-who { display: flex; align-items: center; gap: 12px; font-size: 14.5px; }
.lounge-hero-meta { color: var(--muted); font-size: 13.5px; }
.lounge-hero-body { margin: 0; font: 700 clamp(19px, 2.2vw, 24px)/1.3 var(--display); letter-spacing: -.015em; overflow-wrap: anywhere; }
.lounge-hero-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lounge-pile { min-height: 40px; }
.lounge-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 16px 0 6px; }
.vibe { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--muted); font-size: 13px; }
.vibe-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.vibe-track { width: 120px; height: 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); overflow: hidden; }
.vibe-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--sky-500), var(--violet-500)); transition: width 300ms ease; }
.crown-chip { display: inline-flex; align-items: center; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 13px; font-weight: 700; }
.budget-chip { margin-left: auto; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.crowned { position: relative; display: inline-flex; }
.crown { position: absolute; top: -11px; right: -6px; font-size: 14px; transform: rotate(18deg); filter: drop-shadow(0 1px 0 rgba(0,0,0,.15)); }
.hot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hot-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line-soft); border-radius: var(--radius-control); background: var(--card); }
.hot-text { padding: 0; border: 0; background: none; color: var(--ink); font: 600 14.5px/1.35 var(--sans); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.hot-text:hover { text-decoration: underline; }
.hot-score { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.lounge-topics { display: grid; gap: 18px; }
.lounge-topic-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.lounge-chip { font-weight: 700; }
.lounge-list { padding-left: 0; }
.view-option-lounge .view-name::after { content: " ✦"; color: var(--muted); font-size: 11px; }
@media (max-width: 620px) {
  .lounge-hero { padding: 16px 16px 14px; }
  .lounge-bar .board-backlog-button { width: 100%; }
  .vibe-track { width: 80px; }
}

/* ---------- the scrum lanes: the same cards, dealt by what happens next ---------- */

.lane-switch { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
.lane-option {
  min-height: 30px;
  padding: 3px 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.lane-option[aria-pressed="true"] { background: var(--ink); color: var(--card); }
.lane-option:hover:not([aria-pressed="true"]) { background: var(--hover); }
.board-bar-spacer { flex: 1; }
.board-backlog-button {
  min-height: 38px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.board-backlog-button:hover { background: var(--hover); }

.scrum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.scrum-lane {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
  min-height: 260px;
  padding: 12px 10px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--card-deep);
}
.scrum-lane[data-lane="doing"] { background: var(--field-cool); border-color: #bcdccf; }
.scrum-lane[data-lane="waiting-on-kelly"] { background: var(--needs-slab); border-color: var(--needs-line); }
.scrum-lane[data-lane="done"] { background: var(--done-slab); border-color: var(--done-line); }
.scrum-lane-head { display: flex; align-items: center; gap: 8px; padding: 0 2px; }
.scrum-lane-name { margin: 0; font: 800 15.5px/1.2 var(--display); letter-spacing: -.01em; }
.scrum-lane[data-lane="waiting-on-kelly"] .scrum-lane-name { color: var(--needs); }
.scrum-lane[data-lane="done"] .scrum-lane-name { color: var(--done); }
.scrum-lane-meaning { margin: -4px 0 4px; padding: 0 2px; color: var(--muted); font-size: 12.5px; line-height: 1.35; }

.scrum-card {
  display: grid;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  padding: 10px 12px 9px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-control);
  background: var(--card);
}
.scrum-card[data-needs-viewer="true"] { border-color: var(--needs-line); box-shadow: inset 3px 0 0 var(--needs-strong); }
.scrum-card[data-ready="true"] { border-color: var(--done-line); box-shadow: inset 3px 0 0 var(--done); }
.scrum-card[data-hold] { border-style: dashed; background: transparent; }
.scrum-card[data-lane="done"] { background: transparent; }
.scrum-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.scrum-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.scrum-seat { display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: var(--muted); font-size: 12px; }
.scrum-seat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scrum-card-title {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: 700 15px/1.3 var(--sans);
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.scrum-card-title:hover { text-decoration: underline; }
.scrum-card-excerpt { margin: 0; color: var(--ink-soft); font-size: 13.5px; line-height: 1.4; overflow-wrap: anywhere; }
.scrum-line { display: grid; grid-template-columns: auto 1fr; gap: 7px; margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.scrum-key { padding-top: 2px; color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.scrum-blocker .scrum-key { color: var(--alert); }
.scrum-card-meta { margin: 0; color: var(--muted); font-size: 12.5px; }
.scrum-card-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding-top: 2px; }
.scrum-card-foot .new-pill, .scrum-card-foot .state-pill { font-size: 12px; }
.hold-pill, .due-pill, .scrum-with {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  padding: 1px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: normal;
}
.hold-pill::first-letter, .due-pill::first-letter { text-transform: uppercase; }
.due-pill[data-overdue="true"] { color: var(--alert); border-color: #ffbedd; background: var(--alert-soft); font-weight: 700; }
.quiet-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border: 1px dashed var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
}
.scrum-card[data-quiet="true"] .scrum-card-meta { color: var(--muted); font-style: italic; }
.scrum-quiet-note { margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.board-copy-button { font-size: 13px; }
.find-field { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.find-input {
  min-width: 160px;
  max-width: 240px;
  min-height: 34px;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
}
.find-input::placeholder { color: var(--muted); }
.find-input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.find-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.find-clear { border: 0; padding: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.find-clear:hover { color: var(--ink); }
.find-line { margin: 0 0 10px; color: var(--ink-soft); font-size: 13.5px; }
.find-line[data-matches="0"] { color: var(--muted); }
.feed-bar { display: flex; align-items: center; margin: -6px 0 12px; }
.feed-bar .find-input { max-width: 320px; }
.scrum-answer, .scrum-done {
  min-height: 30px;
  padding: 3px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.scrum-answer:hover { background: var(--hover); }
.scrum-done { color: var(--done); border-color: var(--done-line); }
.scrum-done::before { content: "✓"; margin-right: 5px; font-size: 11px; }
.scrum-done:hover { background: var(--done-soft); }
.scrum-done:disabled, .scrum-answer:disabled { opacity: .6; cursor: default; }

@media (max-width: 1100px) {
  .scrum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .scrum {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 -14px;
    padding: 2px 14px 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .scrum-lane { flex: 0 0 min(82vw, 300px); min-height: 0; scroll-snap-align: start; }
  .lane-switch { width: 100%; }
  .find-field, .find-input, .feed-bar .find-input { width: 100%; max-width: none; }
  .lane-option { flex: 1; min-height: 40px; }
  .board-bar-spacer { display: none; }
  .board-backlog-button { width: 100%; min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .lane-option, .scrum-card { transition: none; }
}