:root {
  --bg: #0b0d12;
  --panel: #12151d;
  --panel-2: #171b26;
  --line: #232936;
  --text: #e7eaf2;
  --muted: #8b93a7;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 80% -10%, #1b2233 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 110%, #191527 0%, transparent 55%),
    var(--bg);
  color: var(--text);
  font-family:
    'Avenir Next',
    'Segoe UI',
    system-ui,
    -apple-system,
    sans-serif;
  min-height: 100vh;
}

#root {
  min-height: 100vh;
}

/* full-bleed app frame: the screenset owns every pixel; the shelf overlays it */
.workspace {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 14px 18px 18px;
  overflow: hidden;
  /* the <Choreo> region's orphan layer is absolutely positioned against
     this element — a doc crossing's leavers are locked in its space */
  position: relative;
}

.topbar h1 {
  font-size: 17px;
  letter-spacing: 0.02em;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo {
  color: #22d3ee;
  font-size: 24px;
}

.topbar p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12.5px;
}

.count {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
  letter-spacing: 0;
}

/* ---------- Bottom sheet / shelf ---------- */

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sheet);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

/* while a drag is in flight the shelf all but vanishes so every part of the
   screenset underneath stays visible and reachable */
.sheet-ghost {
  background: color-mix(in srgb, var(--panel) 5%, transparent);
  border-color: color-mix(in srgb, var(--line) 25%, transparent);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}

.sheet-ghost .sheet-topline,
.sheet-ghost .tray-cell:not(:has(.card-dragging)),
.sheet-ghost .tray-empty {
  opacity: 0.04;
  pointer-events: none;
}

/* welcoming: a board card is in the air — the tray perks up, fully visible */
.sheet-invite {
  border-color: color-mix(in srgb, #22d3ee 55%, var(--line));
  box-shadow:
    0 -8px 36px rgba(34, 211, 238, 0.08),
    0 -12px 40px rgba(0, 0, 0, 0.45);
}

.sheet-hot {
  border-color: #22d3ee;
  box-shadow:
    0 0 0 3px rgba(34, 211, 238, 0.15),
    0 -12px 48px rgba(34, 211, 238, 0.12);
}

/* floating shelf opener, bottom-left */
.shelf-fab {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: var(--z-fab);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, #22d3ee 45%, var(--line));
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  color: #22d3ee;
  cursor: pointer;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(34, 211, 238, 0.12);
  display: grid;
  place-items: center;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}

.shelf-fab:hover {
  transform: scale(1.07);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.6),
    0 0 34px rgba(34, 211, 238, 0.25);
}

.shelf-fab-icon {
  font-size: 26px;
  line-height: 1;
  font-weight: 700;
}

.fab-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #22d3ee;
  color: #08131a;
  font-size: 11px;
  font-weight: 800;
  display: grid;
  place-items: center;
}

.sheet-topline {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px 4px;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

.sheet-search-icon {
  font-size: 20px;
  color: #22d3ee;
  font-weight: 700;
}

.sheet-search {
  flex: 1;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  padding: 8px 12px;
  outline: none;
}

.sheet-search:focus {
  border-color: color-mix(in srgb, #22d3ee 55%, var(--line));
}

.sheet-close {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}

.sheet-close:hover {
  color: var(--text);
  border-color: #4a5670;
}

/* ---- mini shelf: one row, same-height cards, horizontal scroll ---- */

.sheet-mini {
  padding: 10px 14px;
}

.mini-row {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 1280px;
  margin: 0 auto;
}

.mini-expand {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, #22d3ee 45%, var(--line));
  background: transparent;
  color: #22d3ee;
  font-size: 19px;
  font-weight: 700;
  cursor: pointer;
}

.mini-expand:hover {
  background: rgba(34, 211, 238, 0.1);
}

.mini-scroll {
  flex: 1;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px;
  scrollbar-width: thin;
}

/* while dragging, unclip so the card in hand can leave the row */
.sheet-ghost .mini-scroll {
  overflow: visible;
}

.mini-cell {
  width: 180px;
  flex: none;
}

.mini-empty {
  border: none;
  padding: 10px;
  flex: 1;
}

/* the slot that opens under the pointer while shelving: a hint, not the card —
   the card transmutes into place only on release */
.shelf-hint-cell {
  pointer-events: none;
  flex: none;
  overflow: hidden;
  align-self: stretch;
  min-height: 96px;
  border: 1.5px dashed
    color-mix(in srgb, var(--accent, #22d3ee) 70%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent, #22d3ee) 6%, transparent);
  display: grid;
  place-items: center;
}

.shelf-hint-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.hint-arrow {
  font-size: 20px;
  color: color-mix(in srgb, var(--accent, #22d3ee) 85%, #fff);
  animation: hint-bob 1s ease-in-out infinite;
}

@keyframes hint-bob {
  0%,
  100% {
    transform: translateY(-2px);
  }
  50% {
    transform: translateY(3px);
  }
}

.hint-kind {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent, #22d3ee) 80%, #fff);
  opacity: 0.8;
}

.sheet-body {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

.tray-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 6px 24px 20px;
  justify-content: center;
}

.tray-cell {
  width: 216px;
}
.card-tray {
  width: 100%;
}

.tray-empty {
  border: 1.5px dashed var(--line);
  border-radius: 14px;
  padding: 20px 28px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* ---------- Free-form bento canvas ---------- */

.canvas-area {
  flex: 1;
  min-height: 0;
  border-radius: 24px;
  padding: 16px;
  border: 1.5px dashed transparent;
  transition:
    border-color 0.25s,
    background 0.25s;
  overflow: visible;
}

.canvas-armed {
  border-color: #2b3345;
  background: color-mix(in srgb, var(--panel) 40%, transparent);
}

.canvas {
  position: relative;
  width: 100%;
  min-height: 140px;
  transition: height 0.3s ease;
}

/* a "seat" is one packed spot in the bento; Motion springs it around */
.seat {
  position: absolute;
  top: 0;
  left: 0;
}

/* the gap neighbors open up for the incoming card */
.ghost {
  position: absolute;
  top: 0;
  left: 0;
  border: 2px dashed color-mix(in srgb, var(--accent, #22d3ee) 65%, transparent);
  background: color-mix(in srgb, var(--accent, #22d3ee) 7%, transparent);
  border-radius: 16px;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: var(--z-ghost);
}

.ghost span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent, #22d3ee) 80%, #fff);
  opacity: 0.85;
}

/* offered but unavailable: the focus-locked region */
.ghost-locked {
  border-color: color-mix(in srgb, #f87171 55%, transparent);
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, #f87171 7%, transparent) 0 10px,
    transparent 10px 20px
  );
  z-index: var(--z-locked);
}

.ghost-locked span {
  color: #fca5a5;
  background: rgba(20, 8, 8, 0.75);
  padding: 6px 12px;
  border-radius: 999px;
}
.flight {
  position: absolute;
  top: 0;
  left: 0;
}

.flight .card-clone {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

.canvas-hint {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #5a6478;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  pointer-events: none;
}

.canvas-hint-icon {
  font-size: 26px;
  opacity: 0.7;
}

/* ---------- Cards ---------- */

.card {
  position: relative;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  border-top: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  transition:
    box-shadow 0.2s,
    border-color 0.2s,
    opacity 0.2s;
}

/* hover feedback lives in outline weight and glow only — never in size or
   position, so paired/revealed surfaces keep a perfect seam */
.card:hover {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.45),
    0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent),
    0 0 22px color-mix(in srgb, var(--accent) 18%, transparent);
}

.card:active {
  cursor: grabbing;
}

.card-dragging {
  cursor: grabbing;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.6),
    0 0 0 1.5px color-mix(in srgb, var(--accent) 70%, transparent);
}

.card-placed {
  position: absolute;
  inset: 0;
  height: 100%;
}

.card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 16px;
}

.card-grip {
  display: grid;
  grid-template-columns: repeat(2, 3px);
  gap: 2.5px;
  opacity: 0.55;
}

.card-grip i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--muted);
}

.card:hover .card-grip {
  opacity: 1;
}

.card-kind {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pattern-chip {
  margin-left: 14px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #22d3ee;
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.4);
  border-radius: 999px;
  padding: 4px 12px;
  vertical-align: middle;
}

/* ---------- Modal Edit properties panel ---------- */

/* the panel is the hidden half of the edited card: no seam line — a slightly
   lighter background denotes the edit surface. It lives inside the seat
   (left: 100%), so it rides the zoom spring and sits behind the card. */
.props-panel {
  position: absolute;
  top: 0;
  left: 100%;
  width: calc(100% * 3 / 7); /* 30% of viewport when the seat is at 70% */
  height: 100%;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--panel-2) 78%, #2c3448),
    color-mix(in srgb, var(--panel) 82%, #262e40)
  );
  border: none;
  border-radius: 0 16px 16px 0;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  z-index: 0;
}

/* seam styling and stacking are keyed to the panel's actual DOM lifetime
   (:has), not the editing state — so the card stays ON TOP and seam-free for
   the entire exit slide, until AnimatePresence removes the panel */
.seat:has(.props-panel) .card {
  border-radius: 16px 0 0 16px;
  border-right: none;
  box-shadow: 8px 0 24px rgba(0, 0, 0, 0.35);
}

/* placed cards always outrank a sibling panel (z 0) inside their seat */
.card-placed {
  z-index: 1;
}

/* the seat itself stays elevated while its panel is still exiting */
.seat:has(.props-panel) {
  z-index: var(--z-edited) !important;
}

/* one accent bounding box that STRETCHES to encompass card + panel,
   its right edge tracking the emerging panel frame-for-frame */
.edit-outline {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border: 2px solid color-mix(in srgb, var(--accent, #22d3ee) 70%, var(--line));
  border-radius: 16px;
  box-shadow: 0 0 28px
    color-mix(in srgb, var(--accent, #22d3ee) 18%, transparent);
  pointer-events: none;
  z-index: 2;
}

.props-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  min-height: 0;
}

.props-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.props-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.props-kind {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.props-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.props-field > span {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.props-field input {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  padding: 9px 12px;
  outline: none;
}

.props-field input:focus {
  border-color: color-mix(in srgb, var(--accent, #22d3ee) 60%, var(--line));
}

.props-field textarea {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  padding: 9px 12px;
  outline: none;
  resize: vertical;
  min-height: 76px;
}

.props-field textarea:focus {
  border-color: color-mix(in srgb, var(--accent, #22d3ee) 60%, var(--line));
}

.props-content {
  gap: 10px;
}

.slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.slider-row > span {
  width: 34px;
  flex: none;
}

.slider-row input[type='range'] {
  flex: 1;
  accent-color: var(--accent, #22d3ee);
}

.todo-edit-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.todo-edit-row input[type='checkbox'] {
  width: 16px;
  height: 16px;
  flex: none;
  accent-color: var(--accent, #a3e635);
}

.todo-edit-row input[type='text'] {
  flex: 1;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  padding: 6px 10px;
  outline: none;
}

.props-shuffle {
  align-self: flex-start;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent, #8b5cf6);
  background: color-mix(in srgb, var(--accent, #8b5cf6) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #8b5cf6) 40%, transparent);
  border-radius: 9px;
  padding: 7px 12px;
  cursor: pointer;
}

.props-shuffle:hover {
  filter: brightness(1.15);
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.swatch {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    transform 0.12s,
    border-color 0.12s;
}

.swatch:hover {
  transform: scale(1.12);
}

.swatch-active {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
}

.props-meta {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.props-actions {
  margin-top: auto;
  display: flex;
  gap: 10px;
}

.props-reset,
.props-done {
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 10px;
  padding: 9px 16px;
  cursor: pointer;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
}

.props-reset:hover {
  color: var(--text);
  border-color: #4a5670;
}

.props-done {
  flex: 1;
  background: var(--accent, #22d3ee);
  border-color: transparent;
  color: #08131a;
}

.props-done:hover {
  filter: brightness(1.12);
}

/* ---------- Icon buttons: ONE idiom for in-surface chrome ----------
   Every ✎ / ⤢ / ✕ that lives on a card or panel head is a 22px rounded
   square; hover tints with the surface's accent (or neutral for close).
   Circles are reserved for floating LAUNCHERS (fab, mini-expand). */
.icon-btn,
.edit-btn,
.focus-btn {
  margin-left: 4px;
  width: 22px;
  height: 22px;
  flex: none;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 0.15s,
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
  order: 10; /* sits after the label at the far right */
}

.card-placed .focus-btn,
.card-placed .edit-btn {
  opacity: 0.45;
}

/* head-actions = a panel's chrome group: always visible (panels are open
   surfaces, not resting tiles), pushed to the head's far right */
.head-actions {
  margin-left: 10px;
  display: inline-flex;
  gap: 4px;
  flex: none;
}

.head-actions .icon-btn {
  opacity: 1;
}

/* close is deliberately neutral — it never wears the accent */
.close-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: #4a5670;
  color: var(--text);
}

.card:hover .focus-btn,
.card:hover .edit-btn,
.focus-btn[aria-pressed='true'],
.edit-btn[aria-pressed='true'] {
  opacity: 1;
}

.edit-btn:hover,
.focus-btn:hover {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent);
}

.focus-btn[aria-pressed='true'] {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.card-focused {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
  box-shadow:
    0 16px 50px rgba(0, 0, 0, 0.55),
    0 0 0 2.5px color-mix(in srgb, var(--accent) 60%, transparent),
    0 0 44px color-mix(in srgb, var(--accent) 22%, transparent);
}

.focus-badge {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* rail tiles recede a little while something is focused */
.seat-rail {
  opacity: 0.82;
}
.seat-rail:hover {
  opacity: 1;
}

.card-label {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55%;
}

.card-body {
  flex: 1;
  min-height: 0;
  display: flex;
}
.card-body > * {
  flex: 1;
}

/* ---------- Media types ---------- */

.media {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  min-height: 64px;
}

.photo-svg,
.map-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.chip {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
}

.chip-br {
  top: auto;
  left: auto;
  right: 8px;
  bottom: 8px;
}

.video-media {
  background:
    radial-gradient(120% 120% at 20% 0%, #4c0519 0%, #1c0510 60%), #1c0510;
  display: flex;
  align-items: center;
  justify-content: center;
}

.play-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(244, 63, 94, 0.92);
  color: #fff;
  display: grid;
  place-items: center;
  padding-left: 3px;
  box-shadow: 0 6px 20px rgba(244, 63, 94, 0.45);
}

.audio-media {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(139, 92, 246, 0.08);
  border-radius: 10px;
  padding: 10px 12px;
}

.audio-play {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: #8b5cf6;
  color: #fff;
  font-size: 11px;
  display: grid;
  place-items: center;
  padding-left: 2px;
}

.waveform {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2.5px;
  height: 36px;
}

.waveform span {
  flex: 1;
  min-width: 2px;
  border-radius: 2px;
  opacity: 0.85;
}

.audio-time {
  font-size: 11px;
  color: var(--muted);
  flex: none;
}

.chart-media {
  display: flex;
}

.barchart {
  flex: 1;
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 4px 2px 0;
}

.barchart-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
}

.barchart-bar {
  width: 100%;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, #22d3ee, #0e7490);
  min-height: 6px;
}

.barchart-day {
  font-size: 9px;
  color: var(--muted);
}

.metric-media {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}

.metric-value {
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.metric-delta {
  font-size: 12px;
  color: #34d399;
  font-weight: 700;
}

.metric-spark {
  color: #34d399;
  height: 26px;
  margin-top: 6px;
  opacity: 0.8;
}
.sparkline {
  width: 100%;
  height: 100%;
}

.note-media {
  position: relative;
  background: rgba(251, 191, 36, 0.09);
  border-radius: 8px;
  padding: 10px 12px 10px 15px;
}

/* The accent is its own line INSIDE the box, not a left border.
   A border follows `border-radius`, so a 3px left edge on an 8px-rounded box
   bows out at both corners and reads as a bracket rather than a rule. Drawn
   as an inset element it stays straight, and it can be inset from the top and
   bottom edges so it reads as a marker against the text rather than as part
   of the box's frame. */
.note-media::before {
  content: '';
  position: absolute;
  inset-block: 8px;
  inset-inline-start: 6px;
  width: 3px;
  border-radius: 999px;
  background: #fbbf24;
}

.note-media p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: #f3e8c8;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.quote-media {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 4px 6px;
}

.quote-media p {
  margin: 0;
  font-size: 14.5px;
  font-style: italic;
  line-height: 1.45;
  color: #fbcfe8;
}

.quote-media span {
  font-size: 11px;
  color: var(--muted);
}

.link-media {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(96, 165, 250, 0.07);
  border-radius: 10px;
  padding: 10px 12px;
}

.link-favicon {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 9px;
  background: #1d3a63;
  color: #60a5fa;
  font-size: 17px;
  display: grid;
  place-items: center;
}

.link-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.link-text strong {
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.link-text span {
  font-size: 11px;
  color: #60a5fa;
}

.todo-media {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  font-size: 12.5px;
}

.todo-media label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.todo-media .done {
  color: var(--muted);
  text-decoration: line-through;
}

.todo-media .box {
  width: 15px;
  height: 15px;
  flex: none;
  border-radius: 4px;
  border: 1.5px solid #a3e635;
  color: #0b0d12;
  font-size: 10px;
  display: grid;
  place-items: center;
}

.todo-media .done .box {
  background: #a3e635;
}

.map-media {
  min-height: 72px;
}

.map-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -85%);
  font-size: 22px;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  /* Two-up on a narrow shelf — but never WIDER than the desktop cell.
     `calc(50% - 6px)` alone is a percentage of the shelf row, which is nearly
     the whole viewport, so at 880px it resolved to ~430px: twice the 216px
     desktop cell. A narrower viewport produced wider cards, and a card lifted
     out of the tray (`.card-tray` is `width: 100%`, and tray cards carry
     `layout=true`) animated up to that size mid-drag. `min()` keeps the
     two-up intent on genuinely small screens and clamps everywhere else. */
  .tray-cell {
    width: min(216px, calc(50% - 6px));
  }
}

/* ---------- Master–Detail (screenset pattern #3) ---------- */

.pattern-chip-detail {
  color: #34d399;
  background: rgba(52, 211, 153, 0.1);
  border-color: rgba(52, 211, 153, 0.4);
}

/* master list rows */
.stock-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  overflow-y: auto;
}

.stock-row {
  display: grid;
  grid-template-columns: 44px 1fr 64px 72px 76px;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.stock-row {
  transition:
    border-color 0.3s,
    background 0.3s,
    box-shadow 0.3s;
}

.stock-row:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* selection feedback: outline + glow only — never size */
.stock-sel {
  border-color: color-mix(in srgb, var(--accent, #34d399) 65%, transparent);
  background: color-mix(in srgb, var(--accent, #34d399) 10%, transparent);
  box-shadow: 0 0 14px
    color-mix(in srgb, var(--accent, #34d399) 16%, transparent);
}

.stock-sym {
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.04em;
}

.stock-name {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stock-spark {
  height: 22px;
}
.stock-spark .sparkline {
  width: 100%;
  height: 100%;
}

.stock-price {
  font-size: 12.5px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.stock-delta {
  font-size: 11px;
  font-weight: 800;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.stock-delta.up {
  color: #34d399;
}
.stock-delta.down {
  color: #f43f5e;
}

/* small tray tiles: hide the noisy middle columns */
.card-tray .stock-row {
  grid-template-columns: 44px 1fr 76px;
}
.card-tray .stock-name,
.card-tray .stock-price {
  display: none;
}

/* the detail panel: same reveal-from-under physics as the props panel, but a
   SEPARATE data identity — the ticker's own stock card. So unlike edit (one
   stretched outline, shared identity), it wears its OWN colored box in the
   stock card's accent, side by side with the master's outline.
   The master seat holds 45% of the stage; the detail takes the other 55%. */
.detail-panel {
  position: absolute;
  top: 0;
  /* a real gap: master and detail are two separate boxes, not one surface */
  left: calc(100% + 16px);
  width: calc(100% * 55 / 45 - 16px);
  height: 100%;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--panel-2) 78%, #2c3448),
    color-mix(in srgb, var(--panel) 82%, #262e40)
  );
  border: 2px solid color-mix(in srgb, var(--accent, #34d399) 70%, var(--line));
  border-radius: 16px;
  box-shadow: 0 0 28px
    color-mix(in srgb, var(--accent, #34d399) 18%, transparent);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  z-index: 0;
}

/* ── the sheet's grab handle ──────────────────────────────────────────────
   Sticky rather than static: the panel scrolls, and a handle that scrolls
   away with the content stops being an affordance the moment you use the
   panel. It stays at the top edge, always the thing you reach for. */
.detail-grab {
  position: sticky;
  top: -8px;
  z-index: 2;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  min-height: 22px;
  margin: -12px 0 -4px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  cursor: grab;
  /* the drag is vertical, so the browser must not claim the gesture first */
  touch-action: none;
}
.detail-grab:active {
  cursor: grabbing;
}
.detail-grab-bar {
  display: block;
  width: 44px;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #34d399) 55%, var(--line));
  transition: background 140ms ease, width 140ms ease;
}
.detail-grab:hover .detail-grab-bar,
.detail-grab:focus-visible .detail-grab-bar {
  width: 56px;
  background: var(--accent, #34d399);
}
.detail-grab:focus-visible {
  outline: 2px solid var(--accent, #34d399);
  outline-offset: 3px;
  border-radius: 999px;
}
@media (prefers-reduced-motion: reduce) {
  .detail-grab-bar {
    transition: none;
  }
}

/* the seat stays elevated for the panel's whole DOM lifetime (incl. exit) */
.seat:has(.detail-panel) {
  z-index: var(--z-edited) !important;
}

/* …and the master keeps ITS own box: accent emphasis, never a size change.
   Keyed to the panel's DOM lifetime so it holds through the exit slide. */
.seat:has(.detail-panel) .card,
.card-master {
  border-color: color-mix(in srgb, var(--accent, #34d399) 70%, var(--line));
  box-shadow:
    8px 0 24px rgba(0, 0, 0, 0.35),
    0 0 22px color-mix(in srgb, var(--accent, #34d399) 16%, transparent);
}

/* individual stock card tile */
.stock-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
}

.stock-tile-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.stock-tile-sym {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.stock-tile-price {
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.stock-tile-spark {
  flex: 1;
  min-height: 22px;
}

.stock-tile-spark .sparkline {
  width: 100%;
  height: 100%;
}

.detail-kindchip {
  margin-left: auto;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.stock-missing {
  cursor: default;
  opacity: 0.5;
  grid-template-columns: 44px 1fr;
}

/* in-place stock editor inside the detail (same identity, same form) */
.detail-editwrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
/* flipping stage: perspective container; each stock's sheet is rigid */
.detail-flip {
  position: relative;
  flex: 1;
  min-height: 0;
  perspective: 1100px;
}

.detail-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  backface-visibility: hidden;
}

.detail-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.detail-sym {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.detail-name {
  font-size: 13px;
  color: var(--muted);
}

.detail-price-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.detail-price {
  font-size: 40px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.detail-delta {
  font-size: 14px;
}

.detail-chart {
  flex: 1;
  min-height: 90px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.16);
}

.detail-chart .sparkline {
  width: 100%;
  height: 100%;
  filter: drop-shadow(
    0 3px 8px color-mix(in srgb, var(--tone, #34d399) 35%, transparent)
  );
}

.detail-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 18px;
}

.detail-stats > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.detail-stats span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.detail-stats strong {
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

.detail-hintline {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  opacity: 0.75;
}

/* per-stock content editor rows (edit mode) */
.stock-edit-row {
  display: grid;
  grid-template-columns: 48px 1fr 1fr;
  gap: 8px;
  align-items: center;
}

.stock-edit-row .stock-edit-sym {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.stock-edit-row input {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  padding: 5px 8px;
  min-width: 0;
}

/* ---------- Watchlist ticker editor: drag the grip to reorder ---------- */

.ticker-reorder {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ticker-row {
  grid-template-columns: 22px 1fr;
  position: relative;
  border-radius: 8px;
  background: transparent;
}

.drag-handle {
  display: grid;
  place-items: center;
  width: 22px;
  height: 26px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 13px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.drag-handle:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

.ticker-row:active .drag-handle,
.drag-handle:active {
  cursor: grabbing;
}

/* lucide/morphicon SVGs center like the old glyphs did */
.sheet-close,
.mini-expand,
.sheet-search-icon {
  display: grid;
  place-items: center;
}

/* ---------- Screenset History: YouTube-style scrub bar in the shelf ---------- */

.pattern-chip-history {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.4);
}

.sheet-timeline {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  padding: 4px 20px 10px;
  cursor: pointer;
  user-select: none;
  touch-action: none;
}

.tl-icon {
  color: var(--muted);
  font-size: 13px;
  flex: none;
}

.tl-track {
  position: relative;
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  transition: height 0.15s;
}

/* the bar fattens under the pointer, player-style */
.sheet-timeline:hover .tl-track {
  height: 7px;
}

.tl-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: color-mix(in srgb, #22d3ee 75%, transparent);
}

.tl-tick {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4a5670;
}

.tl-tick.tl-past {
  background: color-mix(in srgb, #22d3ee 60%, #fff);
}

.tl-playhead {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #22d3ee;
  box-shadow:
    0 0 10px rgba(34, 211, 238, 0.6),
    0 2px 6px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.tl-count {
  flex: none;
  font-size: 10.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* scrubbing = time-traveling: the shelf's chrome steps aside so the board
   underneath is fully visible; only the bar stays */
.sheet-topline,
.sheet-body,
.mini-row {
  transition: opacity 0.18s;
}

.sheet-scrubbing {
  background: color-mix(in srgb, var(--panel) 30%, transparent);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.sheet-scrubbing .sheet-topline,
.sheet-scrubbing .sheet-body,
.sheet-scrubbing .mini-row {
  opacity: 0;
  pointer-events: none;
}

/* the sheet surface itself also fully clears — while scrubbing, only the
   bar exists between you and the board */
.sheet-scrubbing {
  background: transparent;
  border-top-color: transparent;
  box-shadow: none;
}

/* ---------- Left nav: Slack-like rail of morphing icon tiles ---------- */

.leftnav {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 0 16px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  border-right: 1px solid var(--line);
  z-index: var(--z-fab);
}

/* the tile: rounded square at rest, rounder + lit on hover — Slack-style */
.nav-btn {
  position: relative;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 12px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition:
    border-radius 0.18s,
    background 0.18s,
    color 0.18s,
    border-color 0.18s,
    box-shadow 0.18s;
}

.nav-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  border-radius: 15px;
}

.nav-active,
.nav-active:hover:not(:disabled) {
  background: rgba(34, 211, 238, 0.14);
  color: #22d3ee;
  border-color: rgba(34, 211, 238, 0.45);
  box-shadow: 0 0 16px rgba(34, 211, 238, 0.15);
}

.nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.nav-spacer {
  flex: 1;
}

.nav-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #f43f5e;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: grid;
  place-items: center;
}

.nav-badge-count {
  background: #22d3ee;
  color: #08131a;
}

/* the app shifts right of the rail; sheets and strips start past it too */
.workspace {
  padding-left: 78px;
}
.sheet {
  left: 60px;
}

.timeline-strip {
  position: fixed;
  left: 60px;
  right: 0;
  bottom: 0;
  z-index: var(--z-sheet);
  background: color-mix(in srgb, var(--panel) 85%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding-top: 6px;
}

/* ---------- Messages: chatrooms with agents & teams ---------- */

.messages-area {
  display: flex;
  border-color: transparent !important;
  background: none !important;
}

.messages-wrap {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 14px;
}

.rooms {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow-y: auto;
}

.rooms-head {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 4px 8px 8px;
}

.room-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.room-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.room-active {
  background: color-mix(in srgb, var(--accent, #22d3ee) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent, #22d3ee) 45%, transparent);
}

.room-avatar {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 16px;
}

.room-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.room-name {
  font-size: 13px;
  font-weight: 700;
}

.room-last {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.room-unread {
  flex: none;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #f43f5e;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: grid;
  place-items: center;
}

.chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.chat-title {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.chat-title strong {
  font-size: 14px;
}
.chat-title span {
  font-size: 11px;
  color: var(--muted);
}

.chat-kind {
  margin-left: auto;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.chat-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bubble-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  max-width: 72%;
}

.bubble-row.mine {
  align-self: flex-end;
  align-items: flex-end;
}

.bubble-who {
  font-size: 10.5px;
  font-weight: 700;
  color: color-mix(in srgb, var(--accent, #22d3ee) 80%, #fff);
  padding-left: 4px;
}

.bubble {
  padding: 9px 13px;
  border-radius: 14px 14px 14px 4px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.45;
}

.bubble-row.mine .bubble {
  border-radius: 14px 14px 4px 14px;
  background: color-mix(in srgb, var(--accent, #22d3ee) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent, #22d3ee) 40%, transparent);
}

.chat-compose {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
}

.chat-compose input {
  flex: 1;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  padding: 10px 14px;
  outline: none;
}

.chat-compose input:focus {
  border-color: color-mix(in srgb, var(--accent, #22d3ee) 55%, var(--line));
}

.chat-send {
  width: 42px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--accent, #22d3ee) 45%, var(--line));
  background: color-mix(in srgb, var(--accent, #22d3ee) 14%, transparent);
  color: var(--accent, #22d3ee);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.chat-send:disabled {
  opacity: 0.35;
  cursor: default;
}

/* headerless frame: pattern chips float over the canvas's top-right corner */
.chip-tray {
  position: fixed;
  top: 12px;
  right: 18px;
  display: flex;
  gap: 8px;
  z-index: var(--z-fab);
  pointer-events: none;
}

.chip-tray .pattern-chip {
  margin-left: 0;
  background: color-mix(in srgb, var(--panel) 85%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* reclaim the header's space */
.workspace {
  padding-top: 12px;
}

/* ---------- Messages as a bento: three tiles — channels · thread · bench ---------- */

.messages-wrap {
  grid-template-columns: 280px 1fr 320px;
}

/* every column is a bento tile: same chrome as a card */
.msg-col {
  border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
}

.col-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 8px 10px;
}

.rooms .col-head {
  padding: 4px 8px 8px;
}

.col-kind {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.col-sub {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* the workbench: live card tiles for what this session is touching */
.workbench {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 12px;
}

.work-tiles {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.work-tile {
  position: relative;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  border-radius: 16px;
  transition: box-shadow 0.15s;
}

.work-tile:hover {
  box-shadow:
    0 0 0 1.5px color-mix(in srgb, var(--accent, #22d3ee) 60%, transparent),
    0 0 22px color-mix(in srgb, var(--accent, #22d3ee) 16%, transparent);
}

/* the clone inside is a resting tile — quiet until hovered */
.work-tile .card-clone {
  width: 100%;
  height: auto;
  min-height: 120px;
}

.work-empty {
  border: 1.5px dashed var(--line);
  border-radius: 14px;
  padding: 18px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

/* ---- Messages IS a master–detail: the channel list is the master (its own
   quiet box); the thread is the detail — a separate identity wearing the
   active room's accent. Selecting another channel pushes the thread in the
   direction of travel, exactly like stepping the stock detail. ---- */

.messages-wrap {
  gap: 16px;
}

.msg-detail {
  border: 2px solid color-mix(in srgb, var(--accent, #22d3ee) 70%, var(--line));
  box-shadow: 0 0 28px
    color-mix(in srgb, var(--accent, #22d3ee) 14%, transparent);
}

.chat-flip {
  position: relative;
  flex: 1;
  min-height: 0;
}

.chat-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* the bench is NOT a card — just cards stacked in a column */
.workbench {
  border: none;
  background: none;
  padding: 0 2px;
}

.workbench .col-head {
  padding: 6px 8px 12px;
}

/* ---------- Shared Whiteboard: agents + you on one bento ---------- */

.wb-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wb-toolbar {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 2px 6px;
}

.wb-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c084fc;
}

.wb-cast {
  font-size: 12px;
  color: var(--text);
}
.wb-sub {
  font-size: 11.5px;
  color: var(--muted);
  flex: 1;
}

.sim-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #c084fc 55%, var(--line));
  background: color-mix(in srgb, #c084fc 14%, transparent);
  color: #c084fc;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition:
    box-shadow 0.15s,
    background 0.15s;
}

.sim-btn:hover:not(:disabled) {
  background: color-mix(in srgb, #c084fc 22%, transparent);
  box-shadow: 0 0 18px rgba(192, 132, 252, 0.25);
}

.sim-btn:disabled {
  cursor: default;
  opacity: 0.8;
}

.wb-canvas {
  position: relative;
  flex: 1;
  min-height: 0;
}

.wb-seat {
  position: absolute;
  top: 0;
  left: 0;
}

.wb-tile {
  position: relative;
  height: 100%;
  border-radius: 16px;
  transition: box-shadow 0.3s;
}

/* presence ring: the tile someone is on glows in THEIR color */
.wb-live {
  box-shadow:
    0 0 0 2px var(--p, #22d3ee),
    0 0 26px color-mix(in srgb, var(--p, #22d3ee) 30%, transparent);
}

/* figma-style presence pill: floats over the tile's top edge */
.presence-pill {
  position: absolute;
  top: -12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--p, #22d3ee) 24%, #0b0d12);
  border: 1.5px solid var(--p, #22d3ee);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 4;
}

.presence-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--p, #22d3ee);
  box-shadow: 0 0 8px var(--p, #22d3ee);
}

.presence-ellipsis i {
  font-style: normal;
  animation: presence-blink 1.2s infinite;
}
.presence-ellipsis i:nth-child(2) {
  animation-delay: 0.2s;
}
.presence-ellipsis i:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes presence-blink {
  0%,
  60%,
  100% {
    opacity: 0.25;
  }
  30% {
    opacity: 1;
  }
}

/* comment affordance in the tile's bottom-right corner */
.wb-comment-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  opacity: 1;
  background: rgba(0, 0, 0, 0.35);
  border-color: var(--line);
  z-index: 4;
}

.wb-cbadge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #c084fc;
  color: #1c1030;
  font-size: 9.5px;
  font-weight: 800;
  display: grid;
  place-items: center;
}

/* comment popover: anchored over the tile */
.comment-pop {
  position: absolute;
  right: 8px;
  bottom: 46px;
  width: 260px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid color-mix(in srgb, #c084fc 45%, var(--line));
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 6;
}

.comment-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.comment-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 150px;
  overflow-y: auto;
}

.comment-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 9px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 12px;
  line-height: 1.4;
}

.comment-item strong {
  font-size: 10.5px;
  color: #c084fc;
}

.comment-empty {
  font-size: 11.5px;
  color: var(--muted);
  padding: 4px 2px;
}

.comment-compose {
  display: flex;
  gap: 6px;
}

.comment-compose input {
  flex: 1;
  min-width: 0;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  padding: 6px 9px;
  outline: none;
}

.comment-compose input:focus {
  border-color: color-mix(in srgb, #c084fc 55%, var(--line));
}

.comment-compose button {
  border: 1px solid color-mix(in srgb, #c084fc 50%, var(--line));
  background: color-mix(in srgb, #c084fc 14%, transparent);
  color: #c084fc;
  border-radius: 9px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 0 12px;
  cursor: pointer;
}

.comment-compose button:disabled {
  opacity: 0.35;
  cursor: default;
}

/* presence pill: intent line under the name — "what am I doing here" */
.presence-pill {
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 5px 13px;
}
.presence-main {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.presence-detail {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.85;
  padding-left: 14px;
  font-style: italic;
}

/* human add-tile picker */
.wb-add-wrap {
  position: relative;
}

.wb-add-btn {
  border-color: color-mix(in srgb, #22d3ee 55%, var(--line));
  background: color-mix(in srgb, #22d3ee 12%, transparent);
  color: #22d3ee;
}

.wb-add-btn:hover:not(:disabled) {
  background: color-mix(in srgb, #22d3ee 20%, transparent);
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.22);
}

.wb-add-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 240px;
  max-height: 320px;
  overflow-y: auto;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid color-mix(in srgb, #22d3ee 40%, var(--line));
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 30;
}

.wb-add-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.wb-add-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--line);
}

.wb-add-kind {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex: none;
}

.wb-add-label {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* human-draggable whiteboard tiles */
.wb-tile {
  cursor: grab;
  touch-action: none;
}
.wb-dragging {
  cursor: grabbing;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.6),
    0 0 0 2px color-mix(in srgb, #c084fc 60%, transparent);
}

/* ---------- AskUserQuestion tile ---------- */

.ask-media {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
}

.ask-q {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
}

.ask-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ask-opt {
  border: 1px solid color-mix(in srgb, var(--accent, #fbbf24) 45%, var(--line));
  background: color-mix(in srgb, var(--accent, #fbbf24) 8%, transparent);
  color: var(--text);
  border-radius: 9px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 10px;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.ask-opt:hover {
  background: color-mix(in srgb, var(--accent, #fbbf24) 18%, transparent);
  border-color: var(--accent, #fbbf24);
}

.ask-answered {
  border: 1px solid color-mix(in srgb, #34d399 50%, var(--line));
  background: color-mix(in srgb, #34d399 10%, transparent);
  color: #34d399;
  border-radius: 9px;
  font-size: 12.5px;
  padding: 8px 10px;
}

.ask-by {
  margin-top: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- fresh-comment toast: tooltip with quick react/reply ---------- */

.comment-toast {
  position: absolute;
  right: 8px;
  bottom: 46px;
  width: 232px;
  background: color-mix(in srgb, #0b0d12 88%, #c084fc);
  border: 1px solid color-mix(in srgb, #c084fc 50%, var(--line));
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
  padding: 9px 11px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 7;
  font-size: 12px;
}

/* tooltip caret aiming at the comment button */
.comment-toast::after {
  content: '';
  position: absolute;
  right: 16px;
  bottom: -6px;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  background: inherit;
  border-right: 1px solid color-mix(in srgb, #c084fc 50%, var(--line));
  border-bottom: 1px solid color-mix(in srgb, #c084fc 50%, var(--line));
}

.toast-head {
  font-size: 10.5px;
  color: var(--muted);
}

.toast-head strong {
  color: #c084fc;
}

.toast-text {
  line-height: 1.4;
}

.toast-actions {
  display: flex;
  align-items: center;
  gap: 3px;
}

.toast-emoji {
  border: none;
  background: transparent;
  font-size: 13px;
  line-height: 1;
  padding: 3px;
  border-radius: 6px;
  cursor: pointer;
  transition:
    background 0.12s,
    transform 0.12s;
}

.toast-emoji:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.2);
}

.toast-reply {
  flex: 1;
  min-width: 0;
  margin-left: 4px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 11.5px;
  padding: 4px 8px;
  outline: none;
}

.toast-reply:focus {
  border-color: color-mix(in srgb, #c084fc 55%, var(--line));
}

.reaction-chips {
  display: inline-flex;
  gap: 4px;
}

.reaction-chip {
  font-size: 10.5px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line);
}

.comment-item-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.comment-react-row {
  display: inline-flex;
  gap: 1px;
  opacity: 0.55;
}
.comment-item:hover .comment-react-row {
  opacity: 1;
}

/* ======================= Newsfeed ======================= */
.feed-area {
  display: flex;
  flex-direction: column;
  padding: 8px 16px 0;
  border-color: transparent !important;
  background: none !important;
}

.feed-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feed-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 2px 6px;
}

.feed-filters {
  display: flex;
  gap: 6px;
}

.feed-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.feed-chip:hover {
  color: var(--text);
}
.feed-chip-on {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  border-color: #3a4357;
}
.feed-chip-attn {
  border-color: color-mix(in srgb, #fbbf24 45%, var(--line));
  color: #fbbf24;
}
.feed-chip-attn.feed-chip-on {
  background: color-mix(in srgb, #fbbf24 18%, transparent);
  border-color: #fbbf24;
  color: #fde68a;
  box-shadow: 0 0 18px rgba(251, 191, 36, 0.22);
}
.feed-chip-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #fbbf24;
  color: #1a1203;
  font-size: 10.5px;
  font-weight: 800;
  display: grid;
  place-items: center;
}

.nav-badge-attn {
  background: #fbbf24;
  color: #1a1203;
}

.feed-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.feed-col {
  width: min(600px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 4px 0 40px;
}

.feed-post {
  position: relative;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* needs you: an amber seam the eye can't miss, without shouting */
.feed-needs-you {
  border-color: color-mix(in srgb, #fbbf24 55%, var(--line));
  box-shadow:
    inset 4px 0 0 #fbbf24,
    0 0 0 1px color-mix(in srgb, #fbbf24 18%, transparent);
}

.feed-post-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.feed-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 16px;
  color: #0b0d12;
  flex: none;
}

.feed-who {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.feed-who strong {
  font-size: 13px;
}
.feed-meta {
  font-size: 11.5px;
  color: var(--muted);
  display: flex;
  gap: 6px;
}
.feed-dot {
  opacity: 0.6;
  margin: 0 4px;
}

.feed-attn-pill,
.feed-done-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 5px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}
.feed-attn-pill {
  background: color-mix(in srgb, #fbbf24 18%, transparent);
  border: 1px solid color-mix(in srgb, #fbbf24 55%, transparent);
  color: #fde68a;
}
.feed-attn-pill em {
  font-style: normal;
  font-weight: 500;
  color: #fbbf24;
  opacity: 0.85;
  font-size: 10.5px;
}
.feed-done-pill {
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.4);
  color: #86efac;
}

/* the collage: a compact, read-only bento */
.feed-collage {
  position: relative;
  width: 100%;
  aspect-ratio: 560 / 360;
  border-radius: 14px;
  overflow: hidden;
  /* read-only: cards don't edit here */
  pointer-events: none;
  user-select: none;
}
.feed-collage-single {
  aspect-ratio: 560 / 300;
}
.feed-cell {
  position: absolute;
}
.feed-cell .card {
  border-radius: 14px;
}
.feed-cell .card-grip {
  display: none;
}
/* the question card stays answerable — answering IS the response */
.feed-cell .ask-options {
  pointer-events: auto;
}

.feed-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}

.feed-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.feed-react {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition:
    background 0.12s,
    transform 0.12s;
}
.feed-react:hover {
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-1px);
}
.feed-react-on {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
}
.feed-react span {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.feed-since {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
}

/* comments: inline and primary */
.feed-comments {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.feed-comment {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: baseline;
  font-size: 12.5px;
  line-height: 1.45;
}
.feed-comment strong {
  font-size: 11.5px;
  color: var(--accent);
}
.feed-comment-me strong {
  color: #c084fc;
}
.feed-comment time {
  font-size: 10.5px;
  color: var(--muted);
}

.feed-compose {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}
.feed-compose input {
  flex: 1;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  outline: none;
}
.feed-compose input:focus {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
}
.feed-needs-you .feed-compose input {
  border-color: color-mix(in srgb, #fbbf24 45%, var(--line));
}
.feed-send {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 14px;
}

.feed-empty {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding: 30px 0;
}
.feed-sentinel {
  text-align: center;
  color: var(--muted);
  font-size: 11px;
  padding: 12px 0;
}

/* narrow-width discipline: metadata wraps under the pill, never beneath it */
.feed-meta {
  flex-wrap: wrap;
  row-gap: 0;
}
.feed-head .wb-sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.feed-chip {
  white-space: nowrap;
}
.feed-attn-pill,
.feed-done-pill {
  flex: none;
  white-space: nowrap;
}
.feed-cell .card-head {
  overflow: hidden;
}
.feed-cell .card-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ======================= Newsfeed v2: digest + tray ======================= */
.feed-needs-you {
  border-color: var(--line);
  box-shadow: none;
} /* no amber in the body */

.feed-tray {
  position: sticky;
  top: 0;
  z-index: 3;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, #fbbf24 55%, var(--line));
  background: color-mix(in srgb, #fbbf24 7%, var(--panel));
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.35),
    0 0 0 1px color-mix(in srgb, #fbbf24 15%, transparent);
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.feed-tray-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.feed-tray-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fde68a;
}
.feed-tray-sub {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feed-tray-toggle {
  font-size: 11px;
  font-weight: 700;
  color: #fbbf24;
}

.feed-tray-rows {
  display: flex;
  flex-direction: column;
  border-top: 1px solid color-mix(in srgb, #fbbf24 25%, var(--line));
}
.feed-tray-row {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  overflow: hidden;
}
.feed-tray-row + .feed-tray-row {
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.feed-avatar-sm {
  width: 26px;
  height: 26px;
  font-size: 13px;
  margin-top: 1px;
}
.feed-tray-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.feed-tray-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11.5px;
  color: var(--muted);
  flex-wrap: wrap;
}
.feed-tray-line strong {
  font-size: 12.5px;
  color: var(--text);
}
.feed-tray-kind {
  color: #fbbf24;
  font-weight: 600;
}
.feed-tray-text {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
}
.feed-tray-opts {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.feed-tray-opt {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #fbbf24 50%, var(--line));
  background: color-mix(in srgb, #fbbf24 10%, transparent);
  color: #fde68a;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.feed-tray-opt:hover {
  background: color-mix(in srgb, #fbbf24 22%, transparent);
}
.feed-tray-compose {
  margin-top: 0;
}
.feed-tray-compose input {
  border-color: color-mix(in srgb, #fbbf24 35%, var(--line));
  padding: 6px 11px;
}

.feed-issue {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.feed-issue + .feed-issue {
  margin-top: 10px;
}
.feed-issue-head {
  padding: 6px 6px 0;
}
.feed-issue-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.feed-issue-head p {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}

.feed-quiet-pill {
  font-size: 11px;
  color: #fbbf24;
  opacity: 0.8;
  white-space: nowrap;
}

/* quiet chrome: reactions + composer only when you lean in */
.feed-chrome {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.feed-actions,
.feed-compose {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition:
    opacity 0.18s,
    max-height 0.25s;
}
.feed-comments {
  padding-top: 0;
  border-top: 0;
}
.feed-comments-empty {
  gap: 0;
}
.feed-post:hover .feed-actions,
.feed-post:focus-within .feed-actions,
.feed-post:hover .feed-compose,
.feed-post:focus-within .feed-compose {
  opacity: 1;
  max-height: 60px;
  overflow: visible;
}
.feed-post:hover .feed-comments,
.feed-post:focus-within .feed-comments,
.feed-comments:not(.feed-comments-empty) {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

/* compact rows: what older issues collapse to */
.feed-post-compact {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  background: transparent;
}
.feed-post-compact:hover {
  background: rgba(255, 255, 255, 0.03);
}
.feed-compact-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.feed-compact-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.feed-compact-line strong {
  font-size: 12.5px;
}
.feed-compact-text {
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feed-compact-done {
  color: #86efac;
}
.feed-thumb {
  width: 96px;
  flex: none;
  border-radius: 10px;
  overflow: hidden;
}
.feed-thumb .feed-collage {
  border-radius: 10px;
}
.feed-thumb .card-head {
  display: none;
}
.feed-thumb .card {
  border-radius: 6px;
}
.feed-thumb .card-body {
  padding: 4px;
  transform: scale(0.6);
  transform-origin: top left;
  width: 166%;
  height: 166%;
}
.feed-tray-compose {
  opacity: 1 !important;
  max-height: none !important;
  overflow: visible !important;
}

/* ======================= Newsfeed v3: left rail + briefing ======================= */
.feed-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.feed-rail {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 100%;
  overflow-y: auto;
  padding: 4px 0 12px;
}
.feed-scroll {
  height: 100%;
}
.feed-col {
  margin: 0;
  width: min(600px, 100%);
}
.feed-tray {
  position: static;
  box-shadow: 0 0 0 1px color-mix(in srgb, #fbbf24 15%, transparent);
  backdrop-filter: none;
}
.feed-tray-row {
  padding: 10px 12px;
}
.feed-tray-text {
  font-size: 12.5px;
}

.feed-status {
  border-radius: 18px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.feed-status h3 {
  margin: 0;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.feed-status-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 10px;
  border-left: 2px solid var(--accent);
}
.feed-status-room {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent);
}
.feed-status-text {
  font-size: 12px;
  color: var(--text);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feed-status-meta {
  font-size: 10.5px;
  color: var(--muted);
}

.feed-brief {
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, #c084fc 35%, var(--line));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #c084fc 9%, var(--panel-2)),
    var(--panel)
  );
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.feed-brief-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.feed-brief-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
}
.feed-brief-when {
  font-size: 11.5px;
  color: #c084fc;
}
.feed-brief-lede {
  margin: 0;
  font-size: 13px;
  color: var(--text);
}
.feed-brief-list {
  margin: 4px 0 0;
  padding: 0 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
}
.feed-brief-list strong {
  color: var(--text);
  font-weight: 700;
}
.feed-brief-more {
  list-style: none;
  margin-left: -16px;
  font-size: 11.5px;
  color: #c084fc;
}

/* a new post since your last visit: a small dot on the avatar */
.feed-post-new .feed-avatar {
  box-shadow:
    0 0 0 2px var(--panel),
    0 0 0 4px #c084fc;
}
.feed-rail > * {
  flex: none;
}

/* ======================= Newsfeed v4: summary | feed | post-its ======================= */
.feed-body {
  grid-template-columns: 280px minmax(0, 1fr) 232px;
}
.feed-col {
  margin: 0 auto;
}

/* citations: every summary line is a jump into the feed */
.feed-cite {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 3px 6px;
  margin: 0 -6px;
  border-radius: 8px;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.feed-cite:hover {
  background: rgba(255, 255, 255, 0.06);
}
.feed-cite-on {
  background: color-mix(in srgb, #c084fc 18%, transparent) !important;
}
.feed-cite-mark {
  font-size: 10px;
  color: #c084fc;
  opacity: 0;
  margin-left: 4px;
  transition: opacity 0.15s;
}
.feed-cite:hover .feed-cite-mark {
  opacity: 1;
}
.feed-brief-list {
  padding-left: 0;
  list-style: none;
}
.feed-brief-list li {
  display: flex;
}
.feed-brief-list .feed-cite {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
}
.feed-brief-more {
  padding-left: 6px;
}
.feed-status-row.feed-cite {
  padding: 3px 6px 3px 10px;
  margin: 0;
  border-left: 2px solid var(--accent);
  border-radius: 0 8px 8px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* the jumped-to post flashes — that's the citation landing */
.feed-post-cited {
  box-shadow:
    0 0 0 2px #c084fc,
    0 0 30px rgba(192, 132, 252, 0.35);
}

/* the stack of post-its */
.feed-stack {
  gap: 8px;
}
.feed-stack-title {
  margin: 4px 4px 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fde68a;
}
.feed-stack-empty,
.feed-stack-hint {
  font-size: 12px;
  color: var(--muted);
  margin: 4px;
  line-height: 1.45;
}
.feed-link {
  background: none;
  border: 0;
  padding: 0;
  color: #fbbf24;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.feed-postits {
  display: flex;
  flex-direction: column;
  gap: -2px;
  padding: 6px 4px;
}
.feed-postits > * + * {
  margin-top: -8px;
}

.feed-postit {
  position: relative;
  width: 100%;
  padding: 10px 12px 10px;
  background: linear-gradient(180deg, #fde68a, #fbbf24);
  color: #1a1203;
  border-radius: 3px;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.35) inset;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transform-origin: 50% 0;
}
/* the tape */
.feed-postit::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  width: 52px;
  height: 14px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(255, 255, 255, 0.45);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.feed-postit-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.feed-postit-kind {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #92400e;
}
.feed-postit-since {
  font-size: 10.5px;
  color: #78350f;
  opacity: 0.85;
}
.feed-postit-by {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
}
.feed-avatar-xs {
  width: 18px;
  height: 18px;
  font-size: 10px;
}
.feed-postit-text {
  font-size: 12.5px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feed-postit-cta {
  font-size: 10.5px;
  color: #92400e;
  text-align: right;
  opacity: 0;
  transition: opacity 0.15s;
}
.feed-postit:hover {
  z-index: 2;
}
.feed-postit:hover .feed-postit-cta {
  opacity: 1;
}
.feed-postit .feed-tray-opt {
  border-color: #92400e;
  background: rgba(255, 255, 255, 0.45);
  color: #1a1203;
}
.feed-postit .feed-tray-opt:hover {
  background: rgba(255, 255, 255, 0.7);
}
.feed-postit .feed-compose input {
  background: rgba(255, 255, 255, 0.55);
  color: #1a1203;
  border-color: #b45309;
}
.feed-postit .feed-compose input::placeholder {
  color: #78350f;
}
.feed-postit .feed-send {
  background: rgba(255, 255, 255, 0.55);
  color: #1a1203;
  border-color: #b45309;
}
.feed-postit-text {
  -webkit-line-clamp: 6;
}

/* stuck to its post: hangs off the post's right edge and scrolls with it */
.feed-post-stuck {
  overflow: visible;
}
.feed-postit-stuck {
  position: absolute;
  top: 14px;
  right: -212px;
  width: 200px;
  z-index: 4;
}
/* give the stuck note room: the center column leaves a gutter on the right */
.feed-scroll {
  padding-right: 220px;
}
/* …actually stuck ON the post, top-right corner, like a real note */
.feed-scroll {
  padding-right: 0;
}
.feed-postit-stuck {
  top: -10px;
  right: 14px;
  width: 210px;
}
.feed-post-stuck .feed-post-head {
  padding-right: 200px;
}

/* ======================= Newsfeed v5: situation | feed + flags ======================= */
.feed-body {
  grid-template-columns: 300px minmax(0, 1fr);
}
/* the gutter flags stick out into, inside the scroll box */
.feed-scroll {
  padding-right: 150px;
}
.feed-col {
  margin: 0 auto;
}

.feed-sit {
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #c084fc 6%, var(--panel-2)),
    var(--panel)
  );
  padding: 14px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.feed-sit-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.feed-sit-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
}
.feed-sit-since {
  font-size: 11px;
  color: var(--muted);
}
.feed-sit-totals {
  display: flex;
  gap: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.feed-sit-total {
  flex: 1;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 11px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
}
.feed-sit-total b {
  font-size: 16px;
  color: var(--text);
}
.feed-sit-total-new b {
  color: #c084fc;
}
.feed-sit-total-attn {
  background: color-mix(in srgb, #fbbf24 12%, transparent);
}
.feed-sit-total-attn b {
  color: #fbbf24;
}

.feed-sit-room {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 0 6px 10px;
  border-left: 2px solid var(--accent);
}
.feed-sit-room-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.feed-sit-room-name {
  font-size: 12px;
  font-weight: 800;
  color: var(--accent);
  flex: 1;
}
.feed-sit-when {
  font-size: 10.5px;
  color: var(--muted);
}
.feed-sit-pill {
  font-size: 10px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 999px;
}
.feed-sit-pill-new {
  background: color-mix(in srgb, #c084fc 22%, transparent);
  color: #d8b4fe;
}
.feed-sit-pill-attn {
  background: #fbbf24;
  color: #1a1203;
}
.feed-sit-state {
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.4;
}
.feed-sit-new {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.feed-sit-block {
  font-size: 12px;
  color: #fde68a;
  line-height: 1.4;
  display: flex !important;
  align-items: center;
  gap: 6px;
}
.feed-sit-flagdot {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 8px solid #fbbf24;
  flex: none;
}
.feed-sit-active {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 3px;
}
.feed-sit-who {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: var(--muted);
}

/* flags: "sign here" arrow tabs sticking out of the post's right edge */
.feed-post-flagged {
  overflow: visible;
}
.feed-flag {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 7px 12px 7px 22px;
  background: linear-gradient(180deg, #fde68a, #fbbf24);
  color: #1a1203;
  border: 0;
  font: inherit;
  cursor: pointer;
  clip-path: polygon(0 50%, 14px 0, 100% 0, 100% 100%, 14px 100%);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
  white-space: nowrap;
}
.feed-flag:hover {
  background: linear-gradient(180deg, #fef3c7, #fcd34d);
}
.feed-flag-open {
  background: linear-gradient(180deg, #fef3c7, #fcd34d);
}
.feed-flag-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.feed-flag-since {
  font-size: 10px;
  color: #92400e;
}
.feed-flag-sheet {
  margin-left: 10px;
  width: 230px;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, #fde68a, #fbbf24);
  color: #1a1203;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 8px;
  white-space: normal;
}
.feed-flag-q {
  font-size: 12px;
}
.feed-flag-sheet .feed-tray-opt {
  border-color: #92400e;
  background: rgba(255, 255, 255, 0.45);
  color: #1a1203;
}
.feed-flag-sheet .feed-tray-opt:hover {
  background: rgba(255, 255, 255, 0.7);
}
.feed-flag-sheet .feed-compose input {
  background: rgba(255, 255, 255, 0.55);
  color: #1a1203;
  border-color: #b45309;
}
.feed-flag-sheet .feed-compose input::placeholder {
  color: #78350f;
}
.feed-flag-sheet .feed-send {
  background: rgba(255, 255, 255, 0.55);
  color: #1a1203;
  border-color: #b45309;
}
.feed-post-stuck .feed-post-head {
  padding-right: 0;
}
.feed-sit-block {
  display: block !important;
}
.feed-sit-flagdot {
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}

/* ======================= Newsfeed v6: the flag IS the annotation ======================= */
.feed-scroll {
  padding-right: 270px;
}
.feed-flag {
  position: absolute;
  top: 16px;
  left: 100%;
  margin-left: -8px;
  z-index: 4;
  width: 268px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 10px 12px 12px 26px;
  background: linear-gradient(180deg, #fde68a, #fbbf24);
  color: #1a1203;
  border: 0;
  clip-path: polygon(0 22px, 16px 0, 100% 0, 100% 100%, 16px 100%);
  box-shadow: none;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
  white-space: normal;
  cursor: default;
}
.feed-flag:hover {
  background: linear-gradient(180deg, #fef3c7, #fcd34d);
}
.feed-flag-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.feed-flag-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #92400e;
}
.feed-flag-since {
  font-size: 10.5px;
  color: #78350f;
  white-space: nowrap;
}
.feed-flag-by {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.feed-flag-by strong {
  font-weight: 800;
}
.feed-flag-text {
  font-size: 12.5px;
  line-height: 1.45;
}
.feed-flag-choices {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  margin-top: 2px;
  border-top: 1px dashed rgba(120, 53, 15, 0.35);
}
.feed-flag-choose {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #92400e;
}
.feed-flag-row {
  display: flex;
  gap: 6px;
}
.feed-flag-opt {
  padding: 7px 12px;
  border-radius: 9px;
  border: 1px solid #92400e;
  background: rgba(255, 255, 255, 0.5);
  color: #1a1203;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  flex: 1;
}
.feed-flag-opt:hover {
  background: rgba(255, 255, 255, 0.8);
}
.feed-flag-yes {
  background: #1a1203;
  color: #fde68a;
  border-color: #1a1203;
}
.feed-flag-yes:hover {
  background: #2a1d05;
}
.feed-flag .feed-compose input {
  background: rgba(255, 255, 255, 0.55);
  color: #1a1203;
  border-color: #b45309;
}
.feed-flag .feed-compose input::placeholder {
  color: #78350f;
}
.feed-flag .feed-send {
  background: rgba(255, 255, 255, 0.55);
  color: #1a1203;
  border-color: #b45309;
}

/* ======================= Newsfeed v7: design pass ======================= */
/* quieter frame */
.feed-area {
  padding-top: 4px;
}
.feed-head {
  padding: 4px 6px 2px;
}
.feed-body {
  grid-template-columns: 292px minmax(0, 1fr);
  gap: 22px;
}
.feed-scroll {
  padding-right: 286px;
  scrollbar-width: thin;
  scrollbar-color: #2a3140 transparent;
}
.feed-col {
  gap: 22px;
}
.feed-rail {
  padding-top: 2px;
}

/* situation: one calm sheet */
.feed-sit {
  background: var(--panel);
  border-color: #1f2531;
  padding: 16px 16px 12px;
  gap: 14px;
  border-radius: 20px;
}
.feed-sit-head h2 {
  font-size: 16px;
  letter-spacing: -0.01em;
}
.feed-sit-since {
  font-size: 11px;
  color: var(--muted);
}
.feed-sit-totals {
  gap: 8px;
  border-bottom: 0;
  padding-bottom: 0;
}
.feed-sit-total {
  background: #161a24;
  border-radius: 12px;
  padding: 8px 10px;
}
.feed-sit-total b {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.feed-sit-total-attn {
  background: color-mix(in srgb, #fbbf24 10%, #161a24);
}
.feed-sit-room {
  padding: 2px 0 2px 12px;
  gap: 5px;
  border-left-width: 2px;
}
.feed-sit-room + .feed-sit-room {
  margin-top: 4px;
}
.feed-sit-room-head {
  gap: 6px;
  margin-bottom: 0;
}
.feed-sit-room-name {
  font-size: 12.5px;
  letter-spacing: 0.01em;
}
.feed-sit-faces {
  display: inline-flex;
  margin-right: auto;
}
.feed-sit-faces .feed-avatar-xs {
  width: 16px;
  height: 16px;
  font-size: 9px;
  margin-left: -4px;
  box-shadow: 0 0 0 1.5px var(--panel);
}
.feed-sit-pill {
  padding: 2px 7px;
}
.feed-sit-pill-new {
  background: #1f2333;
  color: #c4b5fd;
}
.feed-sit-state {
  font-size: 12.5px;
  color: #d5d9e4;
}
.feed-sit-state strong {
  color: var(--text);
}
.feed-sit-block {
  font-size: 12px;
  color: #fcd34d;
}
.feed-sit-block strong {
  color: #fde68a;
}
.feed-cite {
  padding: 4px 8px;
  margin: 0 -8px;
  border-radius: 9px;
}
.feed-sit-room .feed-cite {
  margin: 0 -6px 0 -6px;
  padding: 4px 6px;
}
.feed-sit-quiet {
  font-size: 11.5px;
  color: var(--muted);
  padding: 6px 2px 0;
  border-top: 1px solid #1f2531;
  margin-top: 2px;
}
.feed-sit-quiet-room {
  background: none;
  border: 0;
  padding: 0;
  color: var(--muted);
  font: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: pointer;
}
.feed-sit-quiet-room:hover {
  color: var(--text);
}

/* issues */
.feed-issue-head {
  padding: 2px 4px 0;
}
.feed-issue-head h2 {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}
.feed-issue-head p {
  font-size: 12px;
}
.feed-issue {
  gap: 14px;
}

/* posts: flat, hairline, calm */
.feed-post {
  background: var(--panel);
  border-color: #1f2531;
  border-radius: 20px;
  padding: 14px 16px 14px;
  gap: 12px;
}
.feed-post-cited {
  border-color: #c084fc;
  box-shadow:
    0 0 0 1px #c084fc,
    0 0 36px rgba(192, 132, 252, 0.25);
}
.feed-post-new .feed-avatar {
  box-shadow: none;
}
.feed-post-new .feed-post-head::before,
.feed-post-new.feed-post-compact::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 22px;
  width: 3px;
  height: 22px;
  border-radius: 0 3px 3px 0;
  background: #c084fc;
}
.feed-post-compact.feed-post-new::before {
  top: 50%;
  transform: translateY(-50%);
}
.feed-post-head {
  position: static;
}
.feed-avatar {
  width: 32px;
  height: 32px;
  font-size: 15px;
}
.feed-who strong {
  font-size: 13.5px;
}
.feed-meta {
  font-size: 11px;
}
.feed-collage {
  border-radius: 14px;
}
.feed-text {
  font-size: 14px;
  line-height: 1.5;
  color: #e3e6ee;
}
.feed-done-pill {
  background: transparent;
  border-color: transparent;
  color: #6ee7a0;
  font-weight: 600;
  padding: 0;
}
.feed-actions {
  gap: 4px;
}
.feed-react {
  padding: 3px 8px;
  font-size: 12.5px;
  border-color: transparent;
  background: rgba(255, 255, 255, 0.04);
}
.feed-chrome {
  gap: 8px;
}
.feed-post:hover .feed-actions,
.feed-post:focus-within .feed-actions,
.feed-post:hover .feed-compose,
.feed-post:focus-within .feed-compose {
  max-height: 44px;
}
.feed-comments:not(.feed-comments-empty) {
  border-top-color: #1f2531;
}
.feed-comment strong {
  font-size: 11px;
}
.feed-compose input {
  background: #0f1219;
  border-color: #1f2531;
}
.feed-post-compact {
  border-color: transparent;
  background: transparent;
  padding: 8px 10px;
}
.feed-post-compact:hover {
  background: #12151d;
}
.feed-thumb {
  width: 88px;
  border-radius: 8px;
}
.feed-sentinel {
  height: 24px;
  padding: 0;
}

/* the flag: confident, one surface, fewer labels */
.feed-flag {
  width: 276px;
  margin-left: -6px;
  top: 14px;
  padding: 12px 14px 14px 28px;
  gap: 7px;
  background: #fcd34d;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.5));
}
.feed-flag:hover {
  background: #fcd34d;
}
.feed-flag-head {
  align-items: center;
}
.feed-flag-label {
  font-size: 10px;
  color: #7c2d12;
}
.feed-flag-since {
  font-size: 10.5px;
  color: #92400e;
}
.feed-flag-by {
  font-size: 12px;
  color: #3b2607;
}
.feed-flag-by .feed-avatar-xs {
  width: 16px;
  height: 16px;
  font-size: 9px;
}
.feed-flag-text {
  font-size: 13px;
  line-height: 1.45;
  color: #1a1203;
  font-weight: 500;
}
.feed-flag-choices {
  border-top-color: rgba(124, 45, 18, 0.25);
  gap: 6px;
  padding-top: 9px;
}
.feed-flag-choose {
  color: #7c2d12;
}
.feed-flag-opt {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(124, 45, 18, 0.35);
  padding: 8px 12px;
  border-radius: 10px;
}
.feed-flag-opt:hover {
  background: #fff;
}
.feed-flag-yes {
  background: #1a1203;
  color: #fde68a;
  border-color: #1a1203;
}
.feed-flag .feed-compose {
  margin-top: 0;
}
.feed-flag .feed-compose input {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(124, 45, 18, 0.35);
  color: #1a1203;
}
.feed-flag .feed-send {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(124, 45, 18, 0.35);
}

/* ======================= Newsfeed v8: the flag as an RTS order card ======================= */
.feed-flag {
  width: 292px;
  margin-left: -6px;
  top: 12px;
  padding: 0 0 12px 0;
  gap: 0;
  background: #141106;
  color: #fde68a;
  clip-path: polygon(0 24px, 18px 0, 100% 0, 100% 100%, 18px 100%);
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  outline: none;
  font-feature-settings: 'tnum';
}
.feed-flag:hover {
  background: #141106;
}
.feed-flag::after {
  /* amber plate edge */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: polygon(0 24px, 18px 0, 100% 0, 100% 100%, 18px 100%);
  box-shadow: inset 0 0 0 1.5px #f59e0b;
}
.feed-flag:focus-visible::after {
  box-shadow: inset 0 0 0 2px #fde68a;
}

.feed-flag-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px 9px 30px;
  background: repeating-linear-gradient(
    -45deg,
    #f59e0b 0 8px,
    #b45309 8px 16px
  );
  color: #1a1203;
}
.feed-flag-beacon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1a1203;
  box-shadow: 0 0 0 2px rgba(26, 18, 3, 0.25);
  animation: feed-beacon 1.2s ease-in-out infinite;
}
@keyframes feed-beacon {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}
.feed-flag-label {
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1a1203;
  flex: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.feed-flag-clock {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  font-weight: 700;
  color: #1a1203;
  background: rgba(255, 255, 255, 0.55);
  padding: 2px 7px;
  border-radius: 4px;
}
.feed-flag-clock-k {
  font-size: 9px;
  letter-spacing: 0.12em;
  opacity: 0.7;
  margin-right: 2px;
}

.feed-flag-unit {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px 0 30px;
}
.feed-flag-unit-face {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 15px;
  background: var(--accent);
  color: #0b0d12;
  box-shadow:
    0 0 0 1.5px #0b0d12,
    0 0 0 3px color-mix(in srgb, var(--accent) 60%, transparent);
}
.feed-flag-unit-name {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  font-weight: 800;
  color: #fef3c7;
  line-height: 1.2;
}
.feed-flag-unit-name small {
  font-size: 10.5px;
  font-weight: 600;
  color: #d97706;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.feed-flag-text {
  padding: 9px 14px 0 30px;
  font-size: 13px;
  line-height: 1.45;
  color: #fef3c7;
  font-weight: 500;
}

.feed-flag-orders {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px 0 30px;
  margin-top: 10px;
  border-top: 1px solid rgba(245, 158, 11, 0.35);
}
.feed-flag-orders-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f59e0b;
  margin-bottom: 2px;
}
.feed-flag-hint {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #a16207;
}

.feed-order {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 9px 7px 7px;
  border-radius: 6px;
  border: 1px solid rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.08);
  color: #fde68a;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.12s,
    transform 0.08s;
}
.feed-order:hover {
  background: rgba(245, 158, 11, 0.2);
}
.feed-order:active {
  transform: translateY(1px);
}
.feed-order kbd {
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 800;
  background: #f59e0b;
  color: #1a1203;
  box-shadow: 0 1.5px 0 #92400e;
}
.feed-order-primary {
  background: #f59e0b;
  color: #1a1203;
  border-color: #fbbf24;
}
.feed-order-primary:hover {
  background: #fbbf24;
}
.feed-order-primary kbd {
  background: #1a1203;
  color: #fde68a;
  box-shadow: none;
}
.feed-order-input {
  cursor: text;
  padding: 4px 4px 4px 7px;
  background: rgba(0, 0, 0, 0.35);
}
.feed-order-input kbd {
  background: transparent;
  color: #a16207;
  box-shadow: none;
  border: 1px solid rgba(245, 158, 11, 0.4);
}
.feed-order-input input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  color: #fef3c7;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
}
.feed-order-input input::placeholder {
  color: #a16207;
}
.feed-order-send {
  padding: 4px 9px;
  border-radius: 4px;
  border: 0;
  background: #f59e0b;
  color: #1a1203;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.feed-order-send:disabled {
  opacity: 0.35;
  cursor: default;
}

/* waiting a long time: the strip goes hot */
.feed-flag-stale .feed-flag-strip {
  background: repeating-linear-gradient(
    -45deg,
    #f43f5e 0 8px,
    #9f1239 8px 16px
  );
  color: #fff;
}
.feed-flag-stale .feed-flag-label,
.feed-flag-stale .feed-flag-clock {
  color: #fff;
}
.feed-flag-stale .feed-flag-clock {
  background: rgba(0, 0, 0, 0.35);
}
.feed-flag-stale .feed-flag-beacon {
  background: #fff;
}

/* the situation's blocked lines speak the same language */
.feed-sit-block {
  font-family: inherit;
}
.feed-sit-flagdot {
  border-right-color: #f59e0b;
}

/* no hazard stripes — a solid amber status strip, and a deep red one when stale */
.feed-flag-strip {
  background: #f59e0b;
}
.feed-flag-stale .feed-flag-strip {
  background: #e11d48;
}

/* ======================= Newsfeed v9: arrivals stack behind you ======================= */
.feed-scroll {
  overflow-anchor: auto;
}
.feed-col {
  position: relative;
}
.feed-post {
  z-index: 1;
}
.feed-stack3d {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 62px;
  margin-bottom: -40px; /* the next card rides over its lower half */
  cursor: pointer;
  perspective: 800px;
}
.feed-stack3d-card {
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 16px;
  background: #181c27;
  border: 1px solid #2a3140;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  transform-origin: 50% 0;
  color: var(--text);
}
.feed-stack3d-line {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feed-stack3d-line strong {
  color: var(--accent);
}
.feed-stack3d-count {
  font-size: 10.5px;
  font-weight: 800;
  color: #c084fc;
  white-space: nowrap;
}
/* the stack lives UNDER the scroll layer, out of the flow — nothing moves */
.feed-center {
  position: relative;
  min-height: 0;
  height: 100%;
}
.feed-scroll {
  position: relative;
  z-index: 1;
}
.feed-stack3d {
  position: absolute;
  top: 6px;
  left: 0;
  right: 286px;
  width: min(600px, 100%);
  margin: 0 auto;
  height: 62px;
  z-index: 0;
}
.feed-text {
  margin-top: -2px;
}
/* fan the stack out to the right so its tab peeks past the post you're reading */
.feed-stack3d {
  right: 176px;
  top: 2px;
}
.feed-stack3d-count {
  margin-left: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #c084fc;
  color: #1a0b2e;
}

/* ======================= Newsfeed v9b: zero-flow stack ======================= */
.feed-scroll {
  overflow-anchor: none;
  position: static;
}
.feed-center {
  position: static;
}
.feed-stack3d {
  position: sticky;
  top: 0;
  height: 0; /* contributes nothing to the flow… */
  margin: 0 0 -22px; /* …and cancels the column gap it would add */
  overflow: visible;
  left: auto;
  right: auto;
  width: auto;
  z-index: 0;
}
.feed-stack3d-card {
  top: 4px;
  left: 0;
  right: -120px;
}
/* everything in the column is opaque, so the stack only peeks through the gaps */
.feed-post-compact {
  background: var(--bg);
}
.feed-post-compact:hover {
  background: #12151d;
}
.feed-issue-head {
  background: var(--bg);
  position: relative;
  z-index: 1;
}
.feed-issue {
  position: relative;
}

/* ======================= Newsfeed v10: motion pass ======================= */
.feed-stack3d {
  display: none;
}
.feed-deck {
  position: sticky;
  top: 0;
  height: 0;
  margin: 0 0 -22px;
  overflow: visible;
  z-index: 0;
  cursor: pointer;
}
.feed-deck-cards {
  position: absolute;
  top: 8px;
  left: 16px;
  right: -16px;
  height: 0;
}
.feed-deck-card {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 14px;
  background: #1a1e2a;
  border: 1px solid #2a3140;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  transform-origin: 50% 0;
  color: var(--text);
}
.feed-deck-line {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feed-deck-line strong {
  color: var(--accent);
}
/* the tab sits in the gutter, always visible, over everything */
.feed-deck-tab {
  position: absolute;
  top: 10px;
  left: calc(100% + 14px);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 8px;
  border-radius: 999px;
  background: #c084fc;
  color: #1a0b2e;
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.45),
    0 0 0 3px color-mix(in srgb, #c084fc 25%, transparent);
}
.feed-deck-faces {
  display: inline-flex;
}
.feed-deck-faces .feed-avatar-xs {
  width: 18px;
  height: 18px;
  font-size: 10px;
  margin-left: -5px;
  box-shadow: 0 0 0 1.5px #c084fc;
}
.feed-deck-faces .feed-avatar-xs:first-child {
  margin-left: 0;
}
.feed-deck-count {
  display: inline-block;
}
.feed-deck-cta {
  font-size: 13px;
}
.feed-deck:hover .feed-deck-tab {
  background: #d8b4fe;
}

/* the resolve seal */
.feed-seal {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 5;
  padding: 6px 12px;
  border-radius: 8px;
  border: 2px solid #4ade80;
  color: #4ade80;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: color-mix(in srgb, #4ade80 12%, var(--panel));
  pointer-events: none;
}

/* resolved: a small green flag sticking out of the post's right edge */
.feed-seal {
  display: none;
}
.feed-flag-done {
  position: absolute;
  top: 16px;
  left: 100%;
  margin-left: -6px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 18px;
  background: #22c55e;
  color: #052e16;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  clip-path: polygon(0 50%, 10px 0, 100% 0, 100% 100%, 10px 100%);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45));
}
.feed-flag-done small {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  opacity: 0.8;
}

/* ======================= Document mode ======================= */
.open-btn {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 0.15s,
    background 0.15s,
    color 0.15s;
}
.card:hover .open-btn,
.card-focused .open-btn {
  opacity: 1;
}
.open-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.doc-area {
  display: flex;
  padding: 0 8px 0 0;
  border-color: transparent !important;
  background: none !important;
}
.doc {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: opacity 0.15s;
}
.doc-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 10px 4px;
  border-bottom: 1px solid #1f2531;
}
.doc-back {
  width: 32px;
  height: 32px;
}
.doc-kind {
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.doc-title {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 5px 8px;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  outline: none;
}
.doc-title:hover {
  border-color: #1f2531;
}
.doc-title:focus {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: #0f1219;
}
.doc-tools {
  display: flex;
  align-items: center;
  gap: 2px;
}
.doc-tools .icon-btn {
  width: 30px;
  height: 30px;
  opacity: 1;
}
.doc-tools .icon-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.doc-tools .icon-on {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--text);
}
.doc-sep {
  width: 1px;
  height: 18px;
  background: #1f2531;
  margin: 0 6px;
}
.doc-export-wrap {
  position: relative;
}
.doc-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  min-width: 200px;
  padding: 6px;
  border-radius: 12px;
  background: var(--panel-2);
  border: 1px solid #2a3140;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
}
.doc-menu button {
  text-align: left;
  background: none;
  border: 0;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.doc-menu button:hover {
  background: rgba(255, 255, 255, 0.06);
}
.doc-share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 0;
  background: var(--accent);
  color: #0b0d12;
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}
.doc-shared {
  background: #4ade80;
}

.doc-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
}
.doc-scroll {
  overflow-y: auto;
  min-height: 0;
  padding: 28px 24px 60px;
  scrollbar-width: thin;
  scrollbar-color: #2a3140 transparent;
}

/* the page */
.doc-page {
  width: min(860px, 100%);
  min-height: 70vh;
  margin: 0 auto;
  background: #fbfaf7;
  color: #1b1d24;
  border-radius: 8px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  padding: 56px 64px 72px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  transition: opacity 0.2s;
}
.doc-page-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 18px;
}
.doc-page-head h1 {
  margin: 0;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.doc-page-meta {
  font-size: 12px;
  color: #6b7082;
  letter-spacing: 0.02em;
}
.doc-page-body.card {
  position: relative;
  min-height: 360px;
  border-radius: 14px;
  background: #0f1219;
  border: 1px solid #1f2531;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  padding: 0;
}
.doc-page-body .card-body {
  padding: 22px;
  height: 100%;
  font-size: 15px;
}
.doc-bold .doc-page-body {
  font-weight: 800;
}
.doc-italic .doc-page-body {
  font-style: italic;
}

/* sidebars */
.doc-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid #1f2531;
}
.doc-tabs {
  display: flex;
  gap: 2px;
  padding: 10px 10px 0;
  border-bottom: 1px solid #1f2531;
}
.doc-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 10px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.doc-tab:hover {
  color: var(--text);
}
.doc-tab-on {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.doc-tab em {
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
  background: #1f2333;
  color: #c4b5fd;
}
.doc-side-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px;
  scrollbar-width: thin;
  scrollbar-color: #2a3140 transparent;
}
.doc-props {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.doc-props .props-head,
.doc-props .props-done {
  display: none;
}

.doc-versions {
  display: flex;
  flex-direction: column;
}
.doc-version {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 8px;
  background: none;
  border: 0;
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
}
.doc-version::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #1f2531;
}
.doc-version:first-child::before {
  top: 50%;
}
.doc-version:last-child::before {
  bottom: 50%;
}
.doc-version:hover {
  background: rgba(255, 255, 255, 0.04);
}
.doc-version-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--panel);
  flex: none;
  z-index: 1;
}
.doc-version-cur .doc-version-dot {
  background: var(--accent);
}
.doc-version-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.doc-version-main strong {
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-version-main small {
  font-size: 10.5px;
  color: var(--muted);
}
.doc-version-restore {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--accent);
  opacity: 0;
}
.doc-version:hover .doc-version-restore {
  opacity: 1;
}
.doc-empty {
  font-size: 12.5px;
  color: var(--muted);
  margin: 4px;
}

.doc-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 10px;
}
.doc-chat-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.doc-chat-hello {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
  padding: 6px 2px;
}
.doc-chat-hello p {
  margin: 0;
}
.doc-chat-hello strong {
  color: var(--text);
}
.doc-msg {
  max-width: 92%;
  padding: 8px 11px;
  border-radius: 14px;
  font-size: 12.5px;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.doc-msg-me {
  align-self: flex-end;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-bottom-right-radius: 4px;
}
.doc-msg-ai {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.06);
  border-bottom-left-radius: 4px;
}
.doc-msg-applied {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  color: #4ade80;
}
.doc-chat-compose {
  display: flex;
  gap: 6px;
}
.doc-chat-compose input {
  flex: 1;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #0f1219;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  outline: none;
}
.doc-chat-compose input:focus {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
}
.doc-chat-send {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: var(--accent);
  color: #0b0d12;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.doc-chat-send:disabled {
  opacity: 0.35;
  cursor: default;
}
/* print: the page only */
@media print {
  body {
    background: #fff !important;
  }
  .leftnav,
  .doc-toolbar,
  .doc-side,
  .shelf,
  .timeline-strip {
    display: none !important;
  }
  .workspace {
    padding: 0 !important;
  }
  .doc-body {
    display: block;
  }
  .doc-scroll {
    overflow: visible;
    padding: 0;
  }
  .doc-page {
    box-shadow: none;
    border-radius: 0;
    width: 100%;
  }
}

/* documents index */
.doc-index {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-color: transparent !important;
  background: none !important;
  overflow-y: auto;
}
.doc-covers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
  padding: 6px 6px 40px;
}
.doc-cover {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  font: inherit;
}
.doc-cover-art {
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  border: 1px solid #1f2531;
  transition:
    transform 0.18s,
    box-shadow 0.18s;
  pointer-events: none;
}
.doc-cover:hover .doc-cover-art {
  transform: translateY(-3px);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.5),
    0 0 0 1.5px color-mix(in srgb, var(--accent) 60%, transparent);
}
.doc-cover-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 4px;
}
.doc-cover-meta strong {
  font-size: 13px;
}
.doc-cover-meta span {
  font-size: 11.5px;
  color: var(--muted);
}

/* ======================= AI sidebar ======================= */
.workspace {
  display: flex;
}
.ai {
  position: fixed;
  top: 12px;
  right: 12px;
  bottom: 12px;
  width: 340px;
  z-index: 55;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(14px);
  border: 1px solid #2a3140;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.ai-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 10px 16px;
  border-bottom: 1px solid #1f2531;
}
.ai-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
}
.ai-session {
  flex: 1;
  font-size: 11px;
  color: var(--muted);
}
.ai-head .icon-btn {
  opacity: 1;
}
.ai-subject {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-bottom: 1px solid #1f2531;
}
.ai-subject-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
  flex: none;
}
.ai-subject-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ai-subject-main strong {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-subject-main small {
  font-size: 10.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ai-subject-none {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.ai-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: thin;
  scrollbar-color: #2a3140 transparent;
}
.ai-hello {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
}
.ai-msg {
  max-width: 92%;
  padding: 8px 11px;
  border-radius: 14px;
  font-size: 12.5px;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ai-msg-me {
  align-self: flex-end;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-bottom-right-radius: 4px;
}
.ai-msg-ai {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.06);
  border-bottom-left-radius: 4px;
}
.ai-msg-card {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--accent);
}
.ai-msg-card i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.ai-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 14px 10px;
}
.ai-chip {
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
}
.ai-chip:hover {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
}
.ai-compose {
  display: flex;
  gap: 6px;
  padding: 0 12px 12px;
}
.ai-compose input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #0f1219;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  outline: none;
}
.ai-compose input:focus {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
}
.ai-send {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: var(--accent);
  color: #0b0d12;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.ai-send:disabled {
  opacity: 0.35;
  cursor: default;
}
@media print {
  .ai {
    display: none !important;
  }
}

/* ======================= AI as a docked panel ======================= */
.workspace {
  transition: padding-right 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ai-resizing .workspace {
  transition: none;
}
.ai-resizing {
  cursor: col-resize;
  user-select: none;
}
.ai {
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 0;
  border: 0;
  border-left: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  box-shadow: none;
  backdrop-filter: none;
}
.ai-grip {
  position: absolute;
  left: -5px;
  top: 0;
  bottom: 0;
  width: 10px;
  cursor: col-resize;
  z-index: 2;
}
.ai-grip::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  width: 3px;
  height: 36px;
  margin-top: -18px;
  border-radius: 3px;
  background: #2a3140;
  transition: background 0.15s;
}
.ai-grip:hover::after,
.ai-resizing .ai-grip::after {
  background: var(--accent);
}

/* ======================= Quick Look ======================= */
.ql-backdrop {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(5, 7, 12, 0.62);
  backdrop-filter: blur(6px);
}
.ql {
  position: fixed;
  z-index: 151;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid #2a3140;
  box-shadow:
    0 40px 100px rgba(0, 0, 0, 0.65),
    0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
.ql-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 16px;
  border-bottom: 1px solid #1f2531;
}
.ql-kind {
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ql-title {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ql-hint {
  font-size: 11px;
  color: var(--muted);
  margin-right: 6px;
}
.ql-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid #2a3140;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.ql-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}
.ql-btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #0b0d12;
}
.ql-bar .icon-btn {
  opacity: 1;
}
.ql-body {
  flex: 1;
  min-height: 0;
  padding: 14px;
}
.ql-body .card {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  font-size: 15px;
}
.ql-body .card-grip {
  display: none;
}

/* ======================= Document templates (no paper) ======================= */
.doc-scroll {
  padding: 18px 22px 60px;
}
.doc-stage {
  width: min(980px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--text);
  transition: opacity 0.2s;
}
.doc-stage-meta {
  font-size: 11px;
  color: var(--muted);
  padding: 4px 6px;
}
.doc-mode {
  display: inline-flex;
  padding: 2px;
  border-radius: 999px;
  background: #0f1219;
  border: 1px solid #1f2531;
}
.doc-mode button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.doc-mode-on {
  background: var(--accent) !important;
  color: #0b0d12 !important;
}
.doc-edit-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 0;
  background: var(--accent);
  color: #0b0d12;
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  margin: 4px;
}

.tpl {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tpl h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.tpl-foot {
  font-size: 11.5px;
  color: var(--muted);
}
.tpl-chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
}
.tpl-hint {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  padding: 4px 9px;
  border-radius: 999px;
  pointer-events: none;
}
.tpl-editable {
  cursor: crosshair;
  outline: 1.5px dashed color-mix(in srgb, var(--accent) 60%, transparent);
  outline-offset: 4px;
}
.inline-edit {
  outline: 0;
  border-radius: 4px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
  padding: 0 4px;
  margin: 0 -4px;
  cursor: text;
}
.inline-edit:focus {
  box-shadow: 0 0 0 2px var(--accent);
  background: rgba(255, 255, 255, 0.04);
}
.inline-edit:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
}
.tpl-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid #2a3140;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
.tpl-action:hover {
  background: rgba(255, 255, 255, 0.09);
}
.tpl-add {
  display: flex;
  gap: 8px;
}
.tpl-add input {
  flex: 1;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid #1f2531;
  background: #0f1219;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  outline: none;
}
.tpl-add input:focus {
  border-color: var(--accent);
}
.tpl-add button {
  padding: 8px 14px;
  border-radius: 10px;
  border: 0;
  background: var(--accent);
  color: #0b0d12;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.tpl-add button:disabled {
  opacity: 0.35;
}
.tpl-visually-hidden {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* photo: hero */
.tpl-photo-hero {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
}
.tpl-photo-hero .media {
  position: absolute;
  inset: 0;
  border-radius: 0;
}
.tpl-photo-hero .photo-svg {
  width: 100%;
  height: 100%;
}
.tpl-photo-hero .chip {
  font-size: 12px;
  padding: 5px 10px;
  left: 16px;
  top: 16px;
}
.tpl-photo-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 0 4px;
}
.tpl-photo-title {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tpl-photo-meta {
  font-size: 12px;
  color: var(--muted);
}
.tpl-exif {
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.tpl-exif b {
  color: var(--text);
  margin-right: 2px;
}

/* video: theater */
.tpl-theater {
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  position: relative;
}
.tpl-theater .media {
  position: absolute;
  inset: 0;
  border-radius: 0;
}
.tpl-theater .play-btn {
  width: 84px;
  height: 84px;
}
.tpl-theater .play-btn svg {
  width: 34px;
  height: 34px;
}
.tpl-theater .chip-br {
  font-size: 13px;
  padding: 5px 10px;
  right: 16px;
  bottom: 16px;
}
.tpl-scrub {
  position: relative;
  height: 34px;
  margin: 4px 4px 10px;
  border-radius: 6px;
  background: #161a24;
}
.tpl-scrub-in {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 40%, #161a24);
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.08) 0 2px,
    transparent 2px 16px
  );
}
.tpl-scrub-handle {
  position: absolute;
  top: -6px;
  bottom: -6px;
  width: 10px;
  margin-left: -5px;
  border-radius: 4px;
  background: var(--accent);
  box-shadow: 0 0 0 2px #0b0d12;
  cursor: ew-resize;
}
.tpl-scrub-t {
  position: absolute;
  top: 100%;
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.tpl-scrub-out {
  transform: translateX(-50%);
  color: var(--text);
  font-weight: 700;
}
.tpl-scrub-end {
  right: 0;
}
.tpl-video-foot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 4px 0;
}
.tpl-video-meta {
  font-size: 12px;
  color: var(--muted);
}
.tpl-video-meta em {
  font-style: normal;
  color: var(--accent);
}

/* audio: lounge */
.tpl-audio {
  flex-direction: row;
  gap: 24px;
  align-items: stretch;
  padding: 8px 4px;
}
.tpl-audio-art {
  width: 220px;
  flex: none;
  aspect-ratio: 1;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 72px;
  color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.tpl-audio-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}
.tpl-audio-meta {
  font-size: 12px;
  color: var(--muted);
}
.tpl-wave {
  position: relative;
  height: 120px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 2px;
  cursor: pointer;
}
.tpl-wave > span:not(.tpl-wave-head) {
  flex: 1;
  border-radius: 3px;
  min-height: 4px;
  transition: background 0.1s;
}
.tpl-wave-head {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #fff;
  box-shadow: 0 0 8px #fff;
}
.tpl-transport {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tpl-transport button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #2a3140;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.tpl-transport .tpl-play {
  width: 48px;
  height: 48px;
  border: 0;
  color: #0b0d12;
  font-size: 16px;
}
.tpl-transport .tpl-action {
  width: auto;
  height: auto;
  border-radius: 999px;
}
.tpl-transport-t {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin: 0 8px;
}

/* chart: dashboard */
.tpl-chart-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 0 4px;
  flex-wrap: wrap;
}
.tpl-stats {
  display: flex;
  gap: 10px;
}
.tpl-stats span {
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
  border-radius: 12px;
  background: #161a24;
  min-width: 86px;
}
.tpl-stats small {
  font-size: 10.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tpl-stats b {
  font-size: 16px;
}
.tpl-bars {
  position: relative;
  height: 360px;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 30px 12px 30px 44px;
  border-radius: 18px;
  background: #0f1219;
  border: 1px solid #1f2531;
}
.tpl-grid {
  position: absolute;
  left: 44px;
  right: 12px;
  height: 1px;
  background: #1f2531;
}
.tpl-grid i {
  position: absolute;
  left: -34px;
  top: -7px;
  font-style: normal;
  font-size: 10.5px;
  color: var(--muted);
}
.tpl-bar-col {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  position: relative;
}
.tpl-editable .tpl-bar-col {
  cursor: ns-resize;
}
.tpl-bar {
  width: 100%;
  border-radius: 8px 8px 3px 3px;
  transition: height 0.12s;
}
.tpl-bar-val {
  font-size: 12px;
}
.tpl-bar-day {
  position: absolute;
  top: 100%;
  margin-top: 8px;
  font-size: 11px;
  color: var(--muted);
}

/* stock: terminal */
.tpl-stock-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 0 4px;
}
.tpl-sym {
  font-size: 40px;
}
.tpl-stock-name {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--muted);
}
.tpl-stock-price {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}
.tpl-stock-cur {
  font-size: 22px;
  opacity: 0.7;
}
.tpl-stock-price small {
  font-size: 14px;
  margin-left: 8px;
  font-weight: 700;
}
.tpl-num {
  width: 150px;
  font: inherit;
  font-size: 34px;
  font-weight: 800;
  background: #0f1219;
  border: 1px solid #2a3140;
  border-radius: 8px;
  color: inherit;
  padding: 2px 8px;
}
.tpl-num-sm {
  width: 84px;
  font-size: 14px;
}
.tpl-stock-chart {
  height: 240px;
  border-radius: 18px;
  background: #0f1219;
  border: 1px solid #1f2531;
  padding: 10px;
}
.tpl-stock-chart svg {
  width: 100%;
  height: 100%;
}
.tpl-stock-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.tpl-stock-grid span {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  border-radius: 12px;
  background: #161a24;
}
.tpl-stock-grid small {
  font-size: 10.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tpl-stock-grid b {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* watchlist: table */
.tpl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.tpl-table th {
  text-align: left;
  font-size: 10.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 10px;
  border-bottom: 1px solid #1f2531;
}
.tpl-table td {
  padding: 12px 10px;
  border-bottom: 1px solid #151923;
}
.tpl-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tpl-td-sym {
  font-weight: 800;
}
.tpl-missing {
  color: var(--muted);
}
.tpl-row-tools {
  white-space: nowrap;
  text-align: right;
}
.tpl-row-tools button {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid #2a3140;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  margin-left: 4px;
}
.tpl-row-tools button:disabled {
  opacity: 0.25;
}

/* note / quote */
.tpl-note {
  max-width: 760px;
  padding: 12px 4px;
  gap: 18px;
}
.tpl-note-body {
  margin: 0;
  font-size: 19px;
  line-height: 1.65;
  white-space: pre-wrap;
}
.tpl-quote {
  align-items: center;
  text-align: center;
  padding: 40px 20px 20px;
  gap: 10px;
}
.tpl-quote-mark {
  font-size: 110px;
  line-height: 0.6;
  font-family: Georgia, serif;
}
.tpl-quote-text {
  margin: 0;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  max-width: 800px;
}
.tpl-quote-by {
  font-size: 15px;
  color: var(--muted);
}

/* tasks */
.tpl-tasks-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 4px;
}
.tpl-progress {
  height: 6px;
  border-radius: 3px;
  background: #161a24;
  overflow: hidden;
}
.tpl-progress i {
  display: block;
  height: 100%;
  border-radius: 3px;
  transition: width 0.25s;
}
.tpl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.tpl-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 6px;
  border-bottom: 1px solid #151923;
  font-size: 16px;
}
.tpl-list li.done .tpl-task {
  text-decoration: line-through;
  color: var(--muted);
}
.tpl-check {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 2px solid;
  color: #0b0d12;
  font-weight: 900;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex: none;
  background: transparent;
}
.tpl-task {
  flex: 1;
}
.tpl-x {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

/* link */
.tpl-link-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px;
  border-radius: 18px;
  border: 1.5px solid;
  background: #0f1219;
}
.tpl-link-fav {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #0b0d12;
  font-size: 22px;
}
.tpl-link-url {
  margin: 0;
  color: var(--muted);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
}
.tpl-link .tpl-action {
  align-self: flex-start;
  margin-top: 6px;
}

/* map */
.tpl-map-canvas {
  position: relative;
  height: 460px;
  border-radius: 18px;
  overflow: hidden;
}
.tpl-map-canvas .media {
  position: absolute;
  inset: 0;
  border-radius: 0;
}
.tpl-map-canvas .map-svg {
  width: 100%;
  height: 100%;
}
.tpl-map-canvas .map-pin {
  font-size: 34px;
}
.tpl-map-foot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 4px;
}

/* generic */
.tpl-generic-body.card {
  min-height: 360px;
  border-radius: 18px;
  background: #0f1219;
  border: 1px solid #1f2531;
}
.tpl-generic-body .card-body {
  padding: 22px;
  height: 100%;
}
.doc-bold .tpl {
  font-weight: 800;
}
.doc-italic .tpl {
  font-style: italic;
}

/* ======================= nav flyouts ======================= */
.nav-flyout {
  position: fixed;
  left: 68px;
  z-index: 120;
  width: 300px;
  padding: 8px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel-2) 96%, transparent);
  border: 1px solid #2a3140;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-flyout::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 0;
  bottom: 0;
  width: 16px;
} /* hover bridge */
.nav-flyout-title {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 10px 6px;
}
.nav-flyout-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.nav-flyout-row:hover {
  background: rgba(255, 255, 255, 0.06);
}
.nav-flyout-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.nav-flyout-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.nav-flyout-main strong {
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-flyout-main small {
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-flyout-row em {
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
}

/* quick look: newsfeed */
.feed-collage {
  pointer-events: auto;
} /* cells are selectable… */
.feed-cell > .card {
  pointer-events: none;
} /* …the cards inside stay read-only */
.feed-cell .ask-options {
  pointer-events: auto;
}
.feed-cell {
  cursor: default;
}
.ql-post-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}
.ql-post-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}
.ql-post-collage {
  flex: 1;
  min-height: 0;
}
.ql-post-collage .feed-collage {
  height: 100%;
  aspect-ratio: auto;
}
.ql-post-collage .feed-cell {
  cursor: default;
}
.ql-post-comments {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  padding-top: 10px;
  border-top: 1px solid #1f2531;
}
.ql-post-comments strong {
  color: var(--accent);
  margin-right: 6px;
}

/* ======================= selection ring (OS-level highlight) ======================= */
.sel-ring {
  position: fixed;
  z-index: var(
    --z-selection
  ); /* with the stage, under every occluding surface */
  pointer-events: none;
  border-radius: 18px;
  box-shadow:
    0 0 0 2px var(--accent),
    0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent),
    0 0 28px color-mix(in srgb, var(--accent) 30%, transparent);
}
.sel-ring-post {
  border-radius: 22px;
}
.sel-ring-tag {
  position: absolute;
  left: 10px;
  top: -13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent);
  color: #0b0d12;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.sel-ring-tag kbd {
  font: inherit;
  padding: 0 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.25);
  margin-left: 4px;
}

/* selection ring, lighter: a thin outline with the label as a blob that
   grows out of the top edge — fully outside the box */
.sel-ring {
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 85%, transparent);
  border-radius: 18px;
}
.sel-ring-tag {
  top: auto;
  bottom: 100%;
  left: 14px;
  margin-bottom: -1px;
  padding: 4px 11px 5px;
  border-radius: 10px 10px 0 0;
  background: color-mix(in srgb, var(--accent) 85%, transparent);
  color: #0b0d12;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: none;
}
/* the blob's feet: concave curves that flow into the outline */
.sel-ring-tag::before,
.sel-ring-tag::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 8px;
  height: 8px;
  background: radial-gradient(
    circle at var(--cx) 0,
    transparent 8px,
    color-mix(in srgb, var(--accent) 85%, transparent) 8.5px
  );
}
.sel-ring-tag::before {
  right: 100%;
  --cx: 0;
}
.sel-ring-tag::after {
  left: 100%;
  --cx: 100%;
}

/* ======================= posts as documents ======================= */
.post-media {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 2px;
  font-size: 13px;
  line-height: 1.45;
}
.post-media p {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-media-tiles {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.post-media-tiles i {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}
.doc-section {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 8px 0;
}

.tpl-post {
  max-width: 760px;
  gap: 16px;
  padding: 6px 4px;
}
.tpl-post-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tpl-post-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #0b0d12;
  font-size: 16px;
}
.tpl-post-who {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.tpl-post-who strong {
  font-size: 15px;
}
.tpl-post-who small {
  font-size: 12px;
  color: var(--muted);
}
.tpl-post-flag {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f59e0b;
  color: #1a1203;
}
.tpl-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
.tpl-post-text {
  margin: 0;
  font-size: 20px;
  line-height: 1.5;
}
.tpl-post-collage {
  position: relative;
  aspect-ratio: 560 / 360;
  border-radius: 16px;
  overflow: hidden;
  background: #0f1219;
  border: 1px solid #1f2531;
}
.tpl-post-cell {
  position: absolute;
}
.tpl-post-cell .card {
  border-radius: 14px;
  pointer-events: none;
}
.tpl-post-cell-x {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  cursor: pointer;
}
.tpl-post-collage .doc-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.tpl-post-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.tpl-post-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 6px 5px 12px;
  border-radius: 999px;
  border: 1px solid #2a3140;
  font-size: 12px;
  font-weight: 700;
}
.tpl-post-chip button {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  cursor: pointer;
}
.tpl-post-chip button:disabled {
  opacity: 0.25;
}
.tpl-post-add {
  position: relative;
}
.tpl-post-picker {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 5;
  min-width: 240px;
  padding: 6px;
  border-radius: 12px;
  background: var(--panel-2);
  border: 1px solid #2a3140;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
}
.tpl-post-picker button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.tpl-post-picker button:hover {
  background: rgba(255, 255, 255, 0.06);
}
.tpl-post-picker button i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.tpl-post-picker button small {
  margin-left: auto;
  color: var(--muted);
}
.tpl-post-comments {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #1f2531;
  font-size: 13.5px;
}
.tpl-post-comments strong {
  color: var(--accent);
  margin-right: 6px;
}
.post-props {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.props-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}
.post-props select {
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #0f1219;
  color: var(--text);
  font: inherit;
}
.post-props-tiles {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.post-props-tiles label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  padding: 4px 6px;
  border-radius: 8px;
}
.post-props-tiles label.on {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* ======================= selection mark (a child of its host) ======================= */
.sel-ring {
  display: none;
}
.sel-mark {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  z-index: 5;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 85%, transparent);
}
.sel-mark-tag {
  position: absolute;
  left: 14px;
  bottom: 100%;
  margin-bottom: -1px;
  padding: 4px 11px 5px;
  border-radius: 10px 10px 0 0;
  background: color-mix(in srgb, var(--accent) 85%, transparent);
  color: #0b0d12;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.sel-mark-tag::before,
.sel-mark-tag::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 8px;
  height: 8px;
  background: radial-gradient(
    circle at var(--cx) 0,
    transparent 8px,
    color-mix(in srgb, var(--accent) 85%, transparent) 8.5px
  );
}
.sel-mark-tag::before {
  right: 100%;
  --cx: 0;
}
.sel-mark-tag::after {
  left: 100%;
  --cx: 100%;
}
/* hosts: the tab needs room above the box */
.card:has(> .sel-mark),
.wb-tile:has(> .sel-mark),
.feed-cell:has(> .sel-mark),
.doc-cover:has(> .sel-mark) {
  overflow: visible;
}
.doc-cover {
  position: relative;
}
.feed-cell {
  overflow: visible;
}
/* the tab rides inside the box for cells packed into a collage */
.feed-cell > .sel-mark .sel-mark-tag,
.feed-collage-single > .feed-cell > .sel-mark .sel-mark-tag {
  bottom: auto;
  top: 0;
  border-radius: 0 0 10px 10px;
  margin: 0;
  left: 14px;
}
.feed-cell > .sel-mark .sel-mark-tag::before,
.feed-cell > .sel-mark .sel-mark-tag::after {
  display: none;
}

/* ======================= the rail opens to name the lenses ======================= */
.leftnav {
  transition: width 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.leftnav-wide {
  width: 196px;
  align-items: stretch;
  padding-left: 10px;
  padding-right: 10px;
}
.nav-label {
  display: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.leftnav-wide .nav-btn {
  width: auto;
  justify-content: flex-start;
  gap: 12px;
  padding: 0 12px;
}
.leftnav-wide .nav-label {
  display: inline;
}
.leftnav-wide .nav-btn:disabled .nav-label {
  opacity: 0.4;
}
.leftnav-wide .nav-badge {
  position: static;
  margin-left: auto;
}
.workspace {
  transition:
    padding-left 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
    padding-right 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav-is-wide {
  padding-left: 214px;
}
.nav-is-wide .nav-flyout {
  left: 204px;
}
.leftnav-wide .nav-btn {
  display: flex;
  align-items: center;
  height: 42px;
}

/* the wide rail is a drawer: it overlays, the workspace never moves */
.workspace {
  transition: padding-right 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav-is-wide {
  padding-left: 78px;
}
.nav-is-wide .nav-flyout {
  left: 204px;
}
.leftnav {
  transition: width 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: width;
}
.leftnav-wide {
  box-shadow: 24px 0 60px rgba(0, 0, 0, 0.45);
  background: color-mix(in srgb, var(--panel) 97%, transparent);
}
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-fab) - 1);
  background: rgba(5, 7, 12, 0.28);
  backdrop-filter: blur(1.5px);
}
.nav-label {
  opacity: 0;
  transform: translateX(-6px);
  transition:
    opacity 0.18s 0.06s,
    transform 0.2s 0.06s;
}
.leftnav-wide .nav-label {
  opacity: 1;
  transform: none;
}

/* collage cells: the mark takes the card's shape, stays inside the clip, and
   the tag docks at the bottom-left corner instead of covering the head */
.feed-cell > .sel-mark {
  border-radius: 14px;
  box-shadow: inset 0 0 0 1.5px
    color-mix(in srgb, var(--accent) 85%, transparent);
}
.feed-cell > .sel-mark .sel-mark-tag,
.feed-collage-single > .feed-cell > .sel-mark .sel-mark-tag {
  top: auto;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 4px 11px 5px;
  border-radius: 0 10px 0 14px;
}
.feed-cell {
  overflow: hidden;
  border-radius: 14px;
}
.doc-stage {
  will-change: transform, opacity;
}
/* ======================= flags when the gutter is tight ======================= */
.feed-flag-tab {
  position: absolute;
  top: 16px;
  left: 100%;
  margin-left: -6px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px 6px 18px;
  background: #f59e0b;
  color: #1a1203;
  border: 0;
  font: inherit;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  clip-path: polygon(0 50%, 12px 0, 100% 0, 100% 100%, 12px 100%);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45));
}
.feed-flag-tab b {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0;
  background: rgba(255, 255, 255, 0.5);
  padding: 1px 5px;
  border-radius: 3px;
}
.feed-flag-tab .feed-flag-beacon {
  width: 6px;
  height: 6px;
}
.feed-flag-tab.feed-flag-stale {
  background: #e11d48;
  color: #fff;
}
.feed-flag-tab.feed-flag-stale b {
  background: rgba(0, 0, 0, 0.3);
}
.feed-flag-collapse {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 0;
  background: rgba(0, 0, 0, 0.18);
  color: #1a1203;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  margin-right: 2px;
}
/* the lifted post: above its neighbours, with air under it */
.feed-post-lifted {
  z-index: 6;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px #2a3140;
}

/* ======================= selection × presence: corner ownership ======================= */
/* When a tile is both selected (yours) and claimed (an agent's), the two
   annotations take opposite corners of the top edge — selection tab stays
   top-left as the tile's identity, the presence pill moves to the top-right —
   and the rings nest: agent's presence ring outside, your selection inside. */
.wb-tile:has(> .sel-mark) .presence-pill {
  left: auto;
  right: 12px;
}
.wb-tile:has(> .sel-mark).wb-live > .sel-mark {
  box-shadow: inset 0 0 0 1.5px
    color-mix(in srgb, var(--accent) 85%, transparent);
  border-radius: 14px;
}
.wb-tile:has(> .sel-mark).wb-live > .sel-mark .sel-mark-tag {
  margin-bottom: 1px;
}
/* narrow tiles: not enough top edge for both → presence pill tucks inside the top-right */
@container wbtile (max-width: 260px) {
  .wb-tile:has(> .sel-mark) .presence-pill {
    top: 10px;
    right: 10px;
  }
}
.wb-tile {
  container: wbtile / inline-size;
}

/* ======================= Design mode ======================= */
.design-area {
  display: flex;
  padding: 0;
  border-color: transparent !important;
  background: none !important;
  overflow: hidden;
}
.dz {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.dz-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 10px 6px;
  border-bottom: 1px solid #1f2531;
}
.dz-toolbar .wb-sub {
  flex: 0 1 auto;
}
.dz-spacer {
  flex: 1;
}
.dz-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid #2a3140;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.dz-tool:hover {
  background: rgba(255, 255, 255, 0.06);
}
.dz-tool-on {
  background: color-mix(in srgb, #f472b6 22%, transparent);
  border-color: #f472b6;
}
.dz-tool-group {
  display: inline-flex;
  border-radius: 999px;
  border: 1px solid #2a3140;
  overflow: hidden;
}
.dz-tool-group .dz-tool {
  border: 0;
  border-radius: 0;
}
.dz-tool-group .dz-tool + .dz-tool {
  border-left: 1px solid #2a3140;
}
.dz-zoom {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.dz-zoom b {
  min-width: 44px;
  text-align: center;
  font-size: 12px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.dz-zoom .icon-btn {
  opacity: 1;
  width: 28px;
  height: 28px;
}
.dz-pal-wrap {
  position: relative;
}
.dz-palette {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  min-width: 240px;
  max-height: 360px;
  overflow-y: auto;
  padding: 6px;
  border-radius: 12px;
  background: var(--panel-2);
  border: 1px solid #2a3140;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
}
.dz-palette-head {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 10px;
}
.dz-palette button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.dz-palette button:hover {
  background: rgba(255, 255, 255, 0.06);
}
.dz-palette button i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.dz-palette button small {
  margin-left: auto;
  color: var(--muted);
}

.dz-viewport {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  cursor: grab;
  background:
    radial-gradient(circle at 0 0, #1b2030 1px, transparent 1.5px) 0 0 / 28px
      28px,
    var(--bg);
}
.dz-viewport:active {
  cursor: grabbing;
}
.dz-world {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  will-change: transform;
}
.dz-hint {
  position: absolute;
  left: 14px;
  bottom: 12px;
  font-size: 11px;
  color: var(--muted);
  pointer-events: none;
}

/* sections: artboards */
.dz-section {
  position: absolute;
  border-radius: 22px;
  background: #10131b;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.5),
    0 0 0 1px #1b2030;
}
.dz-section.dz-active {
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.5),
    0 0 0 1.5px color-mix(in srgb, #f472b6 55%, #1b2030);
}
.dz-section-head {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  margin-bottom: 8px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  cursor: move;
  padding: 4px 2px;
}
.dz-section-name {
  font-size: 14px;
  font-weight: 800;
  outline: 0;
  border-radius: 6px;
  padding: 0 4px;
  margin: 0 -4px;
}
.dz-section-name:focus {
  box-shadow: 0 0 0 2px #f472b6;
}
.dz-section-dims {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.dz-section-body {
  position: absolute;
  inset: 0;
  border-radius: 22px;
}
.dz-resize {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: #f472b6;
  opacity: 0;
  cursor: nwse-resize;
  transition: opacity 0.15s;
}
.dz-section:hover .dz-resize,
.dz-reveal .dz-resize {
  opacity: 1;
}
.dz-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--muted);
  pointer-events: none;
}

/* leaves (card instances) */
.dz-leaf {
  position: absolute;
  border-radius: 16px;
  transition:
    left 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    top 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    width 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    height 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  cursor: grab;
}
.dz-leaf .card {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  pointer-events: none;
}
.dz-leaf .card-grip {
  display: none;
}
.dz-lifted {
  opacity: 0.25;
}
.dz-leaf.dz-selected {
  outline: 1.5px solid #c084fc;
  outline-offset: 2px;
}
.dz-x {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.dz-reveal .dz-x,
.dz-leaf:hover .dz-x,
.dz-group-head:hover .dz-x,
.dz-sign:hover .dz-x {
  opacity: 1;
}

/* groups: nested bentos — invisible until revealed */
.dz-group {
  position: absolute;
  border-radius: 18px;
  transition:
    left 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    top 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    width 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    height 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.2s,
    background 0.2s;
  cursor: grab;
}
.dz-group-head {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 0;
  height: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dz-group-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  outline: 0;
  border-radius: 4px;
  padding: 0 3px;
  margin: 0 -3px;
}
.dz-group-label:focus {
  box-shadow: 0 0 0 2px #f472b6;
  color: var(--text);
}
.dz-group-kind {
  font-size: 10px;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.2s;
}
.dz-group-head .dz-x {
  position: static;
  margin-left: auto;
}
.dz-group-body {
  position: absolute;
}
.dz-group.dz-revealed {
  background: rgba(244, 114, 182, 0.05);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #f472b6 55%, transparent);
}
.dz-group.dz-revealed .dz-group-kind {
  opacity: 1;
}
.dz-group.dz-revealed.dz-active {
  box-shadow: inset 0 0 0 2px #f472b6;
}
.dz-group-options.dz-revealed {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #60a5fa 55%, transparent);
  background: rgba(96, 165, 250, 0.05);
}
.dz-group-pages.dz-revealed {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #34d399 55%, transparent);
  background: rgba(52, 211, 153, 0.05);
}
/* the reveal: every leaf shows its seat */
.dz-leaf.dz-revealed {
  box-shadow: 0 0 0 1px color-mix(in srgb, #f472b6 45%, transparent);
}
.dz-reveal .dz-section-body {
  background: repeating-linear-gradient(
    -45deg,
    rgba(244, 114, 182, 0.035) 0 6px,
    transparent 6px 14px
  );
}
.dz-ghost {
  position: absolute;
  border-radius: 16px;
  border: 1.5px dashed color-mix(in srgb, #f472b6 70%, transparent);
  background: rgba(244, 114, 182, 0.08);
}

/* seams: width / height control, shown on reveal */
.dz-seam {
  position: absolute;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.15s;
}
.dz-reveal .dz-seam {
  opacity: 1;
}
.dz-seam-h {
  cursor: col-resize;
}
.dz-seam-v {
  cursor: row-resize;
}
.dz-seam::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 3px;
  background: #f472b6;
}
.dz-seam-h::after {
  width: 4px;
  height: 34px;
}
.dz-seam-v::after {
  width: 34px;
  height: 4px;
}
.dz-seam:hover::after {
  background: #fff;
}

/* the lifted leaf */
.dz-lift {
  position: absolute;
  z-index: 50;
  pointer-events: none;
  border-radius: 16px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
  transform: rotate(-1.5deg) scale(1.02);
}
.dz-lift .card {
  width: 100%;
  height: 100%;
  border-radius: 16px;
}
.dz-lift .dz-group {
  position: relative;
  width: 100%;
  height: 100%;
  background: #10131b;
}
.dz-clone-badge {
  position: absolute;
  top: -12px;
  left: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #f472b6;
  color: #1a0b12;
  font-size: 10.5px;
  font-weight: 800;
}

/* signposts: around the bentos */
.dz-sign {
  position: absolute;
  cursor: move;
}
.dz-sign-text {
  outline: 0;
  display: block;
}
.dz-sign-text:focus {
  box-shadow: 0 0 0 2px #f472b6;
  border-radius: 6px;
}
.dz-sign-label .dz-sign-text {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  white-space: nowrap;
}
.dz-sign-note {
  padding: 12px 14px;
  background: #fbbf24;
  color: #1a1203;
  border-radius: 4px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  transform: rotate(-1deg);
}
.dz-sign-note .dz-sign-text {
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
}
.dz-sign-bracket {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dz-bracket {
  display: block;
  height: 10px;
  border: 1.5px solid #c084fc;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}
.dz-sign-bracket .dz-sign-text {
  font-size: 12.5px;
  color: #d8b4fe;
  line-height: 1.4;
}
.dz-sign .dz-x {
  top: -10px;
  right: -10px;
}

/* ======================= Design mode v2: the page is a bento ======================= */
.dz-viewport {
  background: var(--bg);
}
.dz-page {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 28px;
  background: #0e1117;
  box-shadow:
    0 60px 160px rgba(0, 0, 0, 0.6),
    0 0 0 1px #171c27;
}
.dz-page-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin: 0 0 56px;
}
.dz-page-title {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.03em;
  outline: 0;
}
.dz-page-title:focus,
.dz-page-sub:focus {
  box-shadow: 0 0 0 2px #f472b6;
  border-radius: 8px;
}
.dz-page-sub {
  font-size: 18px;
  color: var(--muted);
  outline: 0;
  flex: 1;
  min-width: 0;
}
.dz-page-sub:empty::before,
.dz-section-note:empty::before {
  content: attr(data-placeholder);
  opacity: 0.5;
}
.dz-page-meta {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dz-page-body {
  position: relative;
  border-radius: 20px;
}
.dz-reveal .dz-page-body {
  background: repeating-linear-gradient(
    -45deg,
    rgba(244, 114, 182, 0.03) 0 8px,
    transparent 8px 18px
  );
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #f472b6 35%, transparent);
}

/* sections: no chrome at rest — the head band is the signpost */
.dz-section {
  position: absolute;
  border-radius: 20px;
  background: transparent;
  box-shadow: none;
  transition:
    left 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    top 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    height 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.2s;
}
.dz-section.dz-active {
  box-shadow: none;
}
.dz-reveal .dz-section {
  box-shadow: 0 0 0 1.5px color-mix(in srgb, #f472b6 50%, transparent);
}
.dz-reveal .dz-section.dz-active {
  box-shadow: 0 0 0 2px #f472b6;
}
.dz-section-head {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 64px;
  bottom: auto;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 6px 4px 0;
  cursor: grab;
}
.dz-section-index {
  font-size: 13px;
  font-weight: 800;
  color: #f472b6;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}
.dz-section-name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.dz-section-note {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.4;
  outline: 0;
  border-radius: 6px;
  padding: 0 4px;
  margin: 0 -4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dz-section-note:focus {
  white-space: normal;
  box-shadow: 0 0 0 2px #f472b6;
  background: #0e1117;
  position: relative;
  z-index: 3;
}
.dz-section-dims {
  font-size: 11px;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.2s;
}
.dz-reveal .dz-section-dims,
.dz-section:hover .dz-section-dims {
  opacity: 1;
}
.dz-section-head .dz-x {
  position: static;
}
.dz-section-body {
  position: absolute;
  left: 0;
  border-radius: 20px;
}
.dz-resize {
  display: none;
}
.dz-ghost-section {
  border-radius: 20px;
  border-width: 2px;
}

/* leaves & groups: a touch more radius for the roomier spacing */
.dz-leaf,
.dz-leaf .card {
  border-radius: 18px;
}
.dz-group {
  border-radius: 20px;
}
.dz-group-head {
  height: 26px;
}
.dz-group-label {
  color: var(--muted);
}
.dz-lift-ghost {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #161a24;
  border: 1.5px solid #f472b6;
  font-weight: 800;
}

/* seams: wide gaps get a longer handle */
.dz-seam-h::after {
  height: 44px;
}
.dz-seam-v::after {
  width: 44px;
}
.dz-page-body > .dz-seam-h::after {
  height: 72px;
  width: 6px;
}
.dz-page-body > .dz-seam-v::after {
  width: 72px;
  height: 6px;
}

/* ======================= Design Canvas (frames at x/y) ======================= */
.cv-viewport {
  background:
    radial-gradient(circle at 0 0, #1b2030 1px, transparent 1.5px) 0 0 / 32px
      32px,
    #0b0e14;
}
.cv-title {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 600px;
}
.cv-title-main {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -0.03em;
  outline: 0;
  border-radius: 8px;
}
.cv-title-sub {
  font-size: 18px;
  color: var(--muted);
  outline: 0;
  border-radius: 6px;
}
.cv-title-main:focus,
.cv-title-sub:focus,
.cv-frame-name:focus {
  box-shadow: 0 0 0 2px #f472b6;
}
.cv-title-sub:empty::before,
.cv-sign-text:empty::before {
  content: attr(data-placeholder);
  opacity: 0.5;
}

/* frames: artboards */
.cv-frame {
  position: absolute;
  border-radius: 24px;
  background: #10131b;
  box-shadow:
    0 40px 120px rgba(0, 0, 0, 0.55),
    0 0 0 1px #1b2030;
  cursor: grab;
  transition:
    width 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
    height 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.15s;
}
.cv-frame.cv-selected {
  box-shadow:
    0 40px 120px rgba(0, 0, 0, 0.55),
    0 0 0 2px #f472b6;
}
.cv-frame.cv-target {
  box-shadow:
    0 40px 120px rgba(0, 0, 0, 0.55),
    0 0 0 2px #f472b6,
    0 0 0 10px rgba(244, 114, 182, 0.12);
}
.cv-frame-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 4px;
  cursor: grab;
}
.cv-frame-name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  outline: 0;
  border-radius: 6px;
  padding: 0 4px;
  margin: 0 -4px;
  color: var(--muted);
}
.cv-frame.cv-selected .cv-frame-name {
  color: #f472b6;
}
.cv-frame-dims,
.cv-frame-count {
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 0.2s;
}
.cv-frame:hover .cv-frame-dims,
.cv-frame.cv-selected .cv-frame-dims,
.cv-reveal .cv-frame-dims,
.cv-frame:hover .cv-frame-count,
.cv-frame.cv-selected .cv-frame-count,
.cv-reveal .cv-frame-count {
  opacity: 1;
}
.cv-frame-body {
  position: absolute;
  border-radius: 16px;
}
.cv-reveal .cv-frame-body {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #f472b6 30%, transparent);
}
.cv-resize {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: #f472b6;
  box-shadow: 0 0 0 3px #10131b;
  opacity: 0;
  cursor: nwse-resize;
  transition: opacity 0.15s;
  z-index: 5;
}
.cv-frame:hover .cv-resize,
.cv-frame.cv-selected .cv-resize {
  opacity: 1;
}
.cv-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: var(--muted);
  pointer-events: none;
}

/* slots & tiles: the slot is the bento cell; the tile is what's left after notes take their space */
.cv-slot {
  position: absolute;
  transition:
    left 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    top 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    width 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    height 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cv-slot-outline {
  position: absolute;
  inset: -6px;
  border-radius: 22px;
  border: 1px dashed color-mix(in srgb, #f472b6 35%, transparent);
  pointer-events: none;
}
.cv-tile {
  position: absolute;
  border-radius: 18px;
  cursor: grab;
  transition:
    left 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    top 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    width 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    height 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cv-tile .card {
  width: 100%;
  height: 100%;
  border-radius: 18px;
  pointer-events: none;
}
.cv-tile .card-grip {
  display: none;
}
.cv-tile.cv-lifted {
  opacity: 0.25;
}
.cv-tile.cv-selected {
  box-shadow: 0 0 0 2px #c084fc;
}
.cv-tile.cv-revealed {
  box-shadow: 0 0 0 1px color-mix(in srgb, #f472b6 45%, transparent);
}
.cv-tile.cv-revealed.cv-selected {
  box-shadow: 0 0 0 2px #c084fc;
}
.cv-x {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.cv-reveal .cv-x,
.cv-tile:hover .cv-x {
  opacity: 1;
}
.cv-x-frame {
  top: -30px;
  right: 0;
}
.cv-ghost {
  position: absolute;
  border-radius: 18px;
  border: 1.5px dashed color-mix(in srgb, #f472b6 70%, transparent);
  background: rgba(244, 114, 182, 0.08);
  transition:
    left 0.2s,
    top 0.2s,
    width 0.2s,
    height 0.2s;
}

/* seams */
.cv-seam {
  position: absolute;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.15s;
}
.cv-reveal .cv-seam {
  opacity: 1;
}
.cv-seam-h {
  cursor: col-resize;
}
.cv-seam-v {
  cursor: row-resize;
}
.cv-seam::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 3px;
  background: #f472b6;
}
.cv-seam-h::after {
  width: 4px;
  height: 44px;
}
.cv-seam-v::after {
  width: 44px;
  height: 4px;
}
.cv-seam:hover::after {
  background: #fff;
}

/* signposts: attached notes that OCCUPY space — a tick ties them to their host */
.cv-sign {
  position: absolute;
  display: flex;
  z-index: 2;
  cursor: default;
  --accent: #f472b6;
}
.cv-sign-top {
  flex-direction: column-reverse;
  align-items: stretch;
  justify-content: flex-start;
}
.cv-sign-bottom {
  flex-direction: column;
}
.cv-sign-left {
  flex-direction: row-reverse;
  align-items: flex-start;
}
.cv-sign-right {
  flex-direction: row;
  align-items: flex-start;
}
.cv-sign-tick {
  flex: none;
  background: color-mix(in srgb, var(--accent) 70%, transparent);
  border-radius: 2px;
}
.cv-sign-top .cv-sign-tick,
.cv-sign-bottom .cv-sign-tick {
  width: 2px;
  height: 14px;
  margin: 0 0 0 22px;
}
.cv-sign-left .cv-sign-tick,
.cv-sign-right .cv-sign-tick {
  width: 14px;
  height: 2px;
  margin: 22px 0 0 0;
}
.cv-sign-body {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  background: #161a24;
  border: 1px solid #232938;
  border-left: 3px solid var(--accent);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.cv-sign-top .cv-sign-body,
.cv-sign-bottom .cv-sign-body {
  align-self: flex-start;
  max-width: 100%;
}
.cv-sign-left .cv-sign-body,
.cv-sign-right .cv-sign-body {
  width: 100%;
}
.cv-sign-top .cv-sign-body,
.cv-sign-bottom .cv-sign-body {
  border-left: 1px solid #232938;
  border-top: 3px solid var(--accent);
}
.cv-sign-top .cv-sign-body {
  border-top: 1px solid #232938;
  border-bottom: 3px solid var(--accent);
}
.cv-sign-text {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
  outline: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.cv-sign-top .cv-sign-text,
.cv-sign-bottom .cv-sign-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cv-sign-top .cv-sign-text:focus,
.cv-sign-bottom .cv-sign-text:focus {
  white-space: pre-wrap;
  overflow: visible;
}
.cv-sign-tools {
  display: none;
  gap: 2px;
  flex: none;
}
.cv-sign:hover .cv-sign-tools,
.cv-sign:focus-within .cv-sign-tools {
  display: inline-flex;
}
.cv-sign-tools button {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 0;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
}
.cv-sign-tools button:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
}
.cv-mode {
  display: inline-flex;
  border-radius: 999px;
  border: 1px solid #2a3140;
  overflow: hidden;
  margin-right: 6px;
}
.cv-mode button {
  border: 0;
  border-radius: 0;
  padding: 6px 12px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.cv-mode button + button {
  border-left: 1px solid #2a3140;
}
.cv-mode button[aria-pressed='true'] {
  background: color-mix(in srgb, #f472b6 22%, transparent);
  color: var(--text);
}
/* XY canvas: tiles live in the world, not inside frames; resize handle on tiles */
.cv-slot {
  z-index: 2;
}
.cv-tile .cv-resize {
  right: -6px;
  bottom: -6px;
  width: 14px;
  height: 14px;
  background: #c084fc;
  box-shadow: 0 0 0 3px #0b0e14;
  opacity: 1;
}
.cv-frame {
  overflow: visible;
}

/* XY canvas v2: compositor positioning, zoom-independent chrome, no transitions mid-gesture */
.cv-frame,
.cv-slot,
.cv-ghost,
.cv-lift {
  left: 0;
  top: 0;
  will-change: transform;
}
.cv-frame {
  transition:
    transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    width 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    height 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.15s;
}
.cv-slot {
  transition:
    transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    width 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    height 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cv-lift {
  transition: none;
  transform-origin: center;
}
.cv-ghost {
  transition:
    transform 0.2s,
    width 0.2s,
    height 0.2s;
}
.cv-moving .cv-frame,
.cv-moving .cv-slot,
.cv-moving .cv-tile {
  transition: none;
}
/* frame labels stay the same size on screen at any zoom (Figma) */
.cv-frame-label {
  transform: scale(calc(1 / var(--k, 1)));
  transform-origin: left bottom;
  height: 28px;
}
.cv-frame-name {
  font-size: 13px;
}
.cv-frame-dims,
.cv-frame-count {
  font-size: 11px;
}
.cv-x-frame {
  transform: scale(calc(1 / var(--k, 1)));
  transform-origin: right bottom;
  top: auto;
  bottom: calc(100% + 4px);
}
/* notes: type grows as you zoom out so they stay legible, capped so they still fit their reserved space */
.cv-sign-text {
  font-size: calc(15px / clamp(0.45, var(--k, 1), 1));
  line-height: 1.35;
}
.cv-sign-body {
  padding: calc(12px / clamp(0.6, var(--k, 1), 1))
    calc(14px / clamp(0.6, var(--k, 1), 1));
}
.cv-sign-tools button {
  transform: scale(calc(1 / clamp(0.5, var(--k, 1), 1)));
}
.cv-empty {
  font-size: calc(13px / clamp(0.4, var(--k, 1), 1));
}
.cv-title {
  transform: scale(calc(1 / clamp(0.35, var(--k, 1), 1)));
  transform-origin: left bottom;
}
.cv-resize {
  transform: scale(calc(1 / clamp(0.3, var(--k, 1), 1)));
  transform-origin: center;
}
/* free (non-solver) placement is direct manipulation: no easing, crisp edges */
.cv-ghost-free {
  transition: none;
}
.cv-moving .cv-sign,
.cv-moving .cv-ghost {
  transition: none;
}

/* ======================= Build mode ======================= */
.build-area {
  display: flex;
  padding: 0;
  border-color: transparent !important;
  background: none !important;
  overflow: hidden;
}
.bd {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) 250px;
  gap: 0;
  color: var(--text);
}
.bd aside {
  overflow-y: auto;
}
.bd-tree {
  border-right: 1px solid #1f2531;
  padding: 10px 8px;
}
.bd-tree-head,
.bd-rail-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 10px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.bd-tree-count {
  margin-left: auto;
  font-weight: 700;
}
.bd-node {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.bd-node:hover {
  background: rgba(255, 255, 255, 0.05);
}
.bd-node-on {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.bd-node-chain .bd-node-name {
  color: color-mix(in srgb, var(--accent) 70%, white);
}
.bd-node-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.bd-node-abstract .bd-node-dot {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.bd-node-abstract .bd-node-name {
  font-style: italic;
  color: var(--muted);
}
.bd-node-on.bd-node-abstract .bd-node-name {
  color: var(--text);
}
.bd-node-name {
  font-weight: 700;
}
.bd-node-v {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.bd-node-n {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}
.bd-tree-foot {
  padding: 14px 10px;
  font-size: 10.5px;
  color: var(--muted);
}

.bd-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bd-head {
  padding: 18px 28px 0;
  border-bottom: 1px solid #1f2531;
}
.bd-crumbs {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--muted);
}
.bd-crumb-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.bd-crumb {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
}
.bd-crumb:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}
.bd-crumb-on {
  color: var(--accent);
}
.bd-title-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.bd-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}
.bd-title small {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.bd-pkgname {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: var(--muted);
}
.bd-semver {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: color-mix(in srgb, var(--accent) 80%, white);
  font-size: 11.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.bd-unreleased {
  font-size: 11px;
  color: #fbbf24;
  font-weight: 700;
}
.bd-summary {
  margin: 8px 0 14px;
  font-size: 13.5px;
  color: var(--muted);
  max-width: 72ch;
}
.bd-tabs {
  display: flex;
  gap: 2px;
}
.bd-tabs button {
  position: relative;
  padding: 8px 14px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.bd-tabs button small {
  margin-left: 6px;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}
.bd-tabs .bd-tab-on {
  color: var(--text);
}
.bd-tabs .bd-tab-on::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}
.bd-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 28px 40px;
}
.bd-sec h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.bd-sec h3 span {
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.8;
}
.bd-h-gap {
  margin-top: 22px !important;
}
.bd-sec + .bd-sec,
.bd-cols {
  margin-top: 26px;
}
.bd-cols {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 26px;
}
.bd-muted {
  font-size: 12.5px;
  color: var(--muted);
}

.bd-schema table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.bd-schema td {
  padding: 7px 10px 7px 0;
  border-top: 1px solid #1a1f2a;
  vertical-align: top;
}
.bd-schema tr:first-child td {
  border-top: 0;
}
.bd-f-name {
  font-weight: 700;
  white-space: nowrap;
  width: 1%;
}
.bd-f-name i {
  color: var(--accent);
  font-style: normal;
  margin-left: 2px;
}
.bd-f-type {
  width: 1%;
  white-space: nowrap;
}
.bd-f-type code,
.bd-md code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  padding: 1px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
}
.bd-f-doc {
  color: var(--muted);
}
.bd-f-doc em {
  font-style: normal;
  margin-left: 8px;
  opacity: 0.8;
}
.bd-f-from {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  font-size: 11px;
}
.bd-f-from button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.bd-f-from button:hover {
  color: var(--text);
}
.bd-own {
  color: var(--accent);
  font-weight: 800;
}
.bd-inh td {
  opacity: 0.72;
}

.bd-files,
.bd-templates,
.bd-releases,
.bd-steps,
.bd-rail-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bd-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  cursor: pointer;
}
.bd-file:hover {
  background: rgba(255, 255, 255, 0.05);
}
.bd-file-path {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
}
.bd-file-kind {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
}
.bd-file-template .bd-file-kind {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.bd-file-note {
  color: var(--muted);
  font-size: 11.5px;
}
.bd-file-lines {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.bd-templates li {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12.5px;
}
.bd-tpl-slot {
  font-weight: 700;
}
.bd-tpl-name {
  color: var(--muted);
}
.bd-tpl-own .bd-tpl-name {
  color: var(--text);
  font-weight: 600;
}
.bd-tpl-from {
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
}
.bd-tpl-own .bd-tpl-from {
  color: var(--accent);
}
.bd-tpl-none {
  opacity: 0.45;
}
.bd-kids {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bd-kids button {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.bd-kids button small {
  color: var(--muted);
  font-weight: 600;
  margin-left: 4px;
}
.bd-instances {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.bd-instance {
  position: relative;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
}
.bd-instance > * {
  height: 100%;
}

.bd-md h1 {
  font-size: 20px;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.bd-md h2 {
  font-size: 13px;
  margin: 16px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.bd-md p,
.bd-md li {
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0 0 8px;
  max-width: 70ch;
}
.bd-md li {
  list-style: disc;
  margin-left: 18px;
}
.bd-examples {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.bd-example {
  border: 1px solid #1f2531;
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel-2);
}
.bd-example-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-bottom: 1px solid #1f2531;
  font-size: 12.5px;
}
.bd-instantiate {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 0;
  background: var(--accent);
  color: #0b0e14;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.bd-example pre,
.bd-source {
  margin: 0;
  padding: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.5;
  color: #c9d1dd;
  overflow-x: auto;
}

.bd-releases li {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 14px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 12.5px;
}
.bd-rel-latest {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.bd-rel-v {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--accent) 80%, white);
}
.bd-rel-step,
.bd-rel-at,
.bd-step-at,
.bd-rel-note {
  color: var(--muted);
}
.bd-rel-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.bd-step {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  border-left: 2px solid #1f2531;
  margin-left: 6px;
  font-size: 12.5px;
}
.bd-step-cp {
  border-left-color: #fbbf24;
}
.bd-step-rel {
  border-left-color: var(--accent);
}
.bd-step-n {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--muted);
}
.bd-step-by {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
}
.bd-step-by[data-by='Claude'] {
  color: #c084fc;
}
.bd-step-by[data-by='Grok'] {
  color: #22d3ee;
}
.bd-cp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, #fbbf24 18%, transparent);
  color: #fbbf24;
  font-size: 10.5px;
  font-weight: 800;
}
.bd-rel-pill {
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: color-mix(in srgb, var(--accent) 80%, white);
  font-size: 10.5px;
  font-weight: 800;
}
.bd-steps + .bd-muted {
  margin-top: 12px;
}

.bd-code {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
  border: 1px solid #1f2531;
  border-radius: 12px;
  overflow: hidden;
  min-height: 360px;
}
.bd-code-files {
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-right: 1px solid #1f2531;
  background: var(--panel-2);
}
.bd-code-files button {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  text-align: left;
  cursor: pointer;
}
.bd-code-files .bd-cf-on {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}
.bd-source {
  background: #0b0e14;
}

.bd-rail {
  border-left: 1px solid #1f2531;
  padding: 10px 8px;
}
.bd-rail-now {
  padding: 6px 10px 14px;
}
.bd-rail-now b {
  display: block;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.bd-rail-now span {
  font-size: 11.5px;
  color: var(--muted);
}
.bd-rail-steps {
  position: relative;
  margin-left: 14px;
  border-left: 1px solid #232a38;
}
.bd-rail-steps li {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  padding: 6px 10px 6px 16px;
  font-size: 11.5px;
  cursor: pointer;
  border-radius: 0 8px 8px 0;
}
.bd-rail-steps li:hover {
  background: rgba(255, 255, 255, 0.04);
}
.bd-rail-steps li i {
  position: absolute;
  left: -4.5px;
  top: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2c3444;
}
.bd-rs-cp i {
  background: #fbbf24;
  box-shadow: 0 0 0 3px color-mix(in srgb, #fbbf24 25%, transparent);
}
.bd-rs-rel i {
  background: var(--accent, #c084fc);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--accent, #c084fc) 25%, transparent);
}
.bd-rs-n {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  color: var(--muted);
}
.bd-rs-msg {
  color: var(--text);
}
.bd-rs-cp-name {
  grid-column: 2;
  font-size: 10.5px;
  font-weight: 800;
  color: #fbbf24;
}
.bd-rs-rel-v {
  grid-column: 2;
  font-size: 10.5px;
  font-weight: 800;
  color: color-mix(in srgb, var(--accent, #c084fc) 80%, white);
}
.bd-rs-older {
  opacity: 0.6;
}

/* Build v2: sidebar switch, file tree, module graph, package rail */
.bd {
  grid-template-columns: 240px minmax(0, 1fr) 270px;
}
.bd-side {
  border-right: 1px solid #1f2531;
  padding: 10px 8px;
  overflow-y: auto;
}
.bd-side-switch {
  display: flex;
  gap: 2px;
  margin: 0 2px 10px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #232a38;
}
.bd-side-switch button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}
.bd-side-switch .bd-ss-on {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}
.bd-tree {
  border: 0;
  padding: 0;
}
.bd-dir {
  margin-bottom: 2px;
}
.bd-dir-row {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.bd-dir-row:hover {
  background: rgba(255, 255, 255, 0.05);
}
.bd-dir-on .bd-dir-row {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.bd-dir-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
}
.bd-dir-n {
  margin-left: auto;
  font-size: 10.5px;
}
.bd-dir-files {
  display: flex;
  flex-direction: column;
  padding: 2px 0 4px 14px;
  border-left: 1px solid #232a38;
  margin-left: 16px;
}
.bd-fx {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  text-align: left;
  cursor: pointer;
}
.bd-fx:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}
.bd-fx-on {
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
}
.bd-fx-template {
  color: color-mix(in srgb, var(--accent) 75%, var(--muted));
}
.bd-fx-schema {
  color: var(--text);
}

.bd-trail {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--muted);
}
.bd-trail-label {
  margin-left: 8px;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
}
.bd-title-row .bd-tabs {
  margin-left: auto;
}
.bd-head {
  padding-bottom: 4px;
}

.bd-graph {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.bd-g-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.bd-g-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.bd-g-none {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.7;
}
.bd-g-peers {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.bd-g-mid {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(360px, 1.6fr) minmax(
      200px,
      1fr
    );
  gap: 18px;
  align-items: start;
}
.bd-g-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bd-g-edge {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bd-g-edge-field {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--accent);
}
.bd-g-edge-in {
  align-items: flex-end;
  text-align: right;
}
.bd-g-up .bd-g-peers .bd-mod,
.bd-g-down .bd-g-peers .bd-mod {
  min-width: 220px;
}

.bd-mod {
  border: 1px solid color-mix(in srgb, var(--accent) 35%, #1f2531);
  border-radius: 14px;
  background: var(--panel-2);
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.bd-mod-peer {
  cursor: pointer;
  width: 100%;
  transition:
    border-color 0.15s,
    transform 0.15s;
}
.bd-mod-peer:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.bd-mod-hero {
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.45),
    0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
}
.bd-mod-abstract .bd-mod-name {
  font-style: italic;
}
.bd-mod-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid #1f2531;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  font-size: 12px;
  flex-wrap: wrap;
}
.bd-mod-hero .bd-mod-head {
  font-size: 14px;
  padding: 14px 18px;
}
.bd-mod-kw {
  color: #c084fc;
}
.bd-mod-name {
  color: var(--text);
  font-weight: 800;
}
.bd-mod-v {
  margin-left: auto;
  color: var(--muted);
  font-size: 10.5px;
}
.bd-mod-ref {
  border: 0;
  padding: 0 5px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: color-mix(in srgb, var(--accent) 85%, white);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.bd-mod-ref:hover {
  background: color-mix(in srgb, var(--accent) 32%, transparent);
}
.bd-mod-sum {
  padding: 10px 18px 0;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--muted);
  font-family: system-ui, sans-serif;
}
.bd-mod-body {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11.5px;
}
.bd-mod-hero .bd-mod-body {
  padding: 12px 18px 14px;
  font-size: 12.5px;
  gap: 6px;
}
.bd-mod-field {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.bd-mod-fname {
  color: var(--text);
}
.bd-mod-colon {
  color: var(--muted);
}
.bd-mod-type {
  color: #22d3ee;
}
.bd-mod-def {
  color: #fbbf24;
}
.bd-mod-doc {
  color: var(--muted);
  opacity: 0.8;
  font-family: system-ui, sans-serif;
  font-size: 11.5px;
}
.bd-mod-more {
  color: var(--muted);
  font-size: 11px;
}
.bd-mod-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px 14px;
  border-top: 1px solid #1f2531;
  font-size: 11.5px;
  flex-wrap: wrap;
}
.bd-mod-tpl {
  border: 1px solid #2a3140;
  border-radius: 999px;
  padding: 2px 9px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.bd-mod-tpl:hover {
  border-color: var(--accent);
}
.bd-inst-sec {
  margin-top: 10px;
}

.bd-code {
  display: block;
  border: 1px solid #1f2531;
  border-radius: 12px;
  overflow: hidden;
}
.bd-code-path {
  padding: 8px 12px;
  border-bottom: 1px solid #1f2531;
  background: var(--panel-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--muted);
}

.bd-rail-pkg {
  padding: 4px 10px 12px;
}
.bd-rail-pkg > code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--muted);
}
.bd-rail-now {
  padding: 6px 0 10px;
}
.bd-rail-now b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bd-rail-now em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: #fbbf24;
  font-weight: 700;
  margin-top: 2px;
}
.bd-rail-actions {
  display: flex;
  gap: 6px;
}
.bd-rail-actions button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid #2a3140;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.bd-rail-actions button:hover {
  border-color: var(--accent);
}
.bd-rail-sub {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 10px 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.bd-rail-sub small {
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.bd-rail .bd-releases li {
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  padding: 7px 10px;
  font-size: 11.5px;
}
.bd-rail .bd-rel-at {
  grid-column: 1 / -1;
  font-size: 10.5px;
}
.bd-deps {
  list-style: none;
  margin: 0;
  padding: 0 4px;
}
.bd-deps button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  text-align: left;
  cursor: pointer;
}
.bd-deps button:hover {
  background: rgba(255, 255, 255, 0.05);
}
.bd-deps button i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.bd-deps button small {
  margin-left: auto;
  color: var(--muted);
}

/* Build v3: ERD map, three-pane sidebar, no right rail */
.bd {
  grid-template-columns: 250px minmax(0, 1fr);
}
.bd-manage {
  padding: 0 2px;
}
.bd-erd {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(380px, 1.5fr) minmax(
      220px,
      1fr
    );
  gap: 28px;
  align-items: start;
}
.bd-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}
.bd-wire {
  fill: none;
  stroke: #2c3444;
  stroke-width: 1.5;
}
.bd-wire-holds {
  stroke-dasharray: 4 4;
}
.bd-wire-hot {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: none;
}
.bd-lane {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bd-lane-right {
  align-items: stretch;
}
.bd-lane-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: opacity 0.15s;
}
.bd-lane-far {
  opacity: 0.55;
}
.bd-lane-dim {
  opacity: 0.32;
}
.bd-lane-dim:hover {
  opacity: 1;
}
.bd-edge-tag {
  font-size: 10.5px;
  color: var(--muted);
}
.bd-edge-tag b {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--accent);
  font-weight: 700;
}
.bd-lane-left .bd-edge-tag {
  text-align: right;
}
.bd-mod-field-btn {
  border: 0;
  border-radius: 6px;
  padding: 3px 6px;
  margin: 0 -6px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  width: calc(100% + 12px);
}
.bd-mod-field-btn:hover {
  background: rgba(255, 255, 255, 0.05);
}
.bd-mod-field-on {
  background: color-mix(in srgb, var(--accent) 18%, transparent) !important;
  box-shadow: inset 2px 0 0 var(--accent);
}
.bd-mod-field-inh {
  opacity: 0.62;
}
.bd-mod-field-on.bd-mod-field-inh {
  opacity: 1;
}
.bd-mod-reftype {
  color: color-mix(in srgb, var(--accent) 85%, white);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.bd-mod-from {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--muted);
  font-family: system-ui, sans-serif;
}
.bd-mod-arrow {
  color: var(--accent);
  margin-left: 4px;
}
.bd-typedef {
  border: 1px solid #2a3140;
  border-radius: 12px;
  background: var(--panel-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  overflow: hidden;
}
.bd-typedef-head {
  padding: 9px 12px;
  border-bottom: 1px solid #1f2531;
  background: rgba(255, 255, 255, 0.03);
}
.bd-typedef-head b {
  color: #22d3ee;
}
.bd-typedef-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.bd-typedef-doc {
  font-family: system-ui, sans-serif;
  color: var(--muted);
}
.bd-inst-sec {
  grid-column: 1 / -1;
}
.bd-mod-hero .bd-mod-body {
  gap: 2px;
}

/* Build: recentering transmutes — nodes travel along the chain, wires wait for them */
.bd-wires {
  transition: opacity 0.12s;
}
.bd-settling .bd-wires {
  opacity: 0;
}
.bd-mod {
  will-change: transform;
}
.bd-mod-hero .bd-mod-sum,
.bd-mod-hero .bd-mod-foot,
.bd-mod-from,
.bd-mod-doc {
  transition: opacity 0.2s;
}
/* Build: the centre module is IN FOCUS; the lanes sit back */
.bd-lane-mid {
  position: relative;
}
.bd-lane-mid::before {
  content: '';
  position: absolute;
  inset: -60px -80px;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--accent) 16%, transparent),
    transparent 72%
  );
  pointer-events: none;
  z-index: -1;
}
.bd-mod-hero {
  background: #161b26;
  border-color: color-mix(in srgb, var(--accent) 70%, #1f2531);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent),
    0 30px 80px rgba(0, 0, 0, 0.6),
    0 0 60px color-mix(in srgb, var(--accent) 18%, transparent);
  transform: translateZ(0);
}
.bd-mod-hero .bd-mod-head {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  font-size: 15px;
}
.bd-mod-hero .bd-mod-name {
  font-size: 17px;
  color: #fff;
}
.bd-mod-hero .bd-mod-body {
  font-size: 13px;
}
.bd-mod-hero .bd-mod-fname {
  color: #fff;
}
.bd-mod-hero .bd-mod-type {
  color: #67e8f9;
}
.bd-lane-left,
.bd-lane-right {
  filter: saturate(0.75);
}
.bd-lane-left .bd-mod-peer,
.bd-lane-right .bd-mod-peer {
  background: #0f1219;
  border-color: #232a38;
  color: var(--muted);
}
.bd-lane-left .bd-mod-peer .bd-mod-head,
.bd-lane-right .bd-mod-peer .bd-mod-head {
  background: rgba(255, 255, 255, 0.025);
}
.bd-lane-left .bd-mod-peer .bd-mod-name,
.bd-lane-right .bd-mod-peer .bd-mod-name {
  color: #cbd3df;
}
.bd-lane-left .bd-mod-peer .bd-mod-fname,
.bd-lane-right .bd-mod-peer .bd-mod-fname {
  color: #9aa4b5;
}
.bd-lane-left .bd-mod-peer .bd-mod-type,
.bd-lane-right .bd-mod-peer .bd-mod-type {
  color: #5fb6c6;
}
.bd-lane-left .bd-mod-peer:hover,
.bd-lane-right .bd-mod-peer:hover {
  filter: saturate(1);
  background: #12161f;
}
.bd-lane-right .bd-def .bd-mod-peer {
  border-color: color-mix(in srgb, var(--accent) 55%, #232a38);
}

/* Build v3.1: one grid, one element per module — lanes are grid columns, recentering is a layout move */
.bd-erd {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(380px, 1.5fr) minmax(
      220px,
      1fr
    );
  grid-auto-rows: min-content;
  gap: 0 28px;
  align-items: start;
}
.bd-slot {
  padding-bottom: 14px;
}
.bd-inst-sec {
  margin-top: 24px;
}
.bd-lane-head {
  margin-bottom: -4px;
}
.bd-slot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.bd-slot-left .bd-edge-tag {
  text-align: right;
}
.bd-slot-mid {
  z-index: 2;
}
.bd-slot-mid::before {
  content: '';
  position: absolute;
  inset: -60px -80px;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--accent) 16%, transparent),
    transparent 72%
  );
  pointer-events: none;
  z-index: -1;
}
.bd-edge-tag-item + .bd-edge-tag-item::before {
  content: ' · ';
  color: var(--muted);
}
.bd-slot-left .bd-mod-peer,
.bd-slot-right .bd-mod-peer {
  background: #0f1219;
  border-color: #232a38;
}
.bd-slot-left .bd-mod-peer .bd-mod-head,
.bd-slot-right .bd-mod-peer .bd-mod-head {
  background: rgba(255, 255, 255, 0.025);
}
.bd-slot-left .bd-mod-peer .bd-mod-name,
.bd-slot-right .bd-mod-peer .bd-mod-name {
  color: #cbd3df;
}
.bd-slot-left .bd-mod-peer .bd-mod-fname,
.bd-slot-right .bd-mod-peer .bd-mod-fname {
  color: #9aa4b5;
}
.bd-slot-left .bd-mod-peer:hover,
.bd-slot-right .bd-mod-peer:hover {
  background: #12161f;
}
.bd-def .bd-mod-peer {
  border-color: color-mix(in srgb, var(--accent) 55%, #232a38);
}
.bd-lane-mid::before {
  display: none;
}

/* ======================= Build v4: friendly diagram, magic move, package tab, highlighted code ======================= */
.bd-node2 {
  border: 1px solid #232a38;
  border-radius: 16px;
  background: #0f1219;
  padding: 12px 14px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    transform 0.15s,
    background 0.15s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bd-node2:hover {
  border-color: var(--accent);
  background: #12161f;
  transform: translateY(-1px);
}
.bd-node2-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
}
.bd-node2-head b {
  font-weight: 800;
}
.bd-node2-head small,
.bd-hero2-head small {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.bd-node2-abstract .bd-node2-head b,
.bd-hero2-head b.abstract {
  font-style: italic;
}
.bd-node2-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.bd-node2-abstract .bd-node2-dot {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--accent);
}
.bd-node2-v {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.bd-node2-sum {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bd-node2-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.bd-mini {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 10.5px;
  color: #b8c0cc;
}
.bd-mini-ref {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: color-mix(in srgb, var(--accent) 85%, white);
}
.bd-mini-more {
  color: var(--muted);
}

.bd-hero2 {
  border-radius: 20px;
  background: #151a25;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, #1f2531);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent),
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 0 60px color-mix(in srgb, var(--accent) 14%, transparent);
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bd-hero2-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
}
.bd-hero2-head b {
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
}
.bd-hero2-ext {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}
.bd-hero2-ext:hover {
  background: color-mix(in srgb, var(--accent) 24%, transparent);
}
.bd-hero2-sum {
  margin: -4px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #c9d1dd;
}
.bd-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.bd-group-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 5px;
}
.bd-group-label button {
  border: 0;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: color-mix(in srgb, var(--accent) 85%, white);
  font: inherit;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.bd-group-own .bd-group-label {
  color: color-mix(in srgb, var(--accent) 85%, white);
}
.bd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bd-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 10px;
  border-radius: 999px;
  border: 1px solid #2a3140;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition:
    border-color 0.12s,
    background 0.12s;
}
.bd-chip:hover {
  border-color: color-mix(in srgb, var(--accent) 60%, #2a3140);
  background: rgba(255, 255, 255, 0.07);
}
.bd-chip-name {
  font-weight: 700;
}
.bd-chip-req .bd-chip-name::after {
  content: '*';
  color: var(--accent);
  margin-left: 1px;
}
.bd-chip-type {
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: #9fb3c8;
  font-size: 10.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.bd-chip-target {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: color-mix(in srgb, var(--accent) 85%, white);
  font-family: inherit;
  font-weight: 800;
}
.bd-chip-target:hover {
  background: color-mix(in srgb, var(--accent) 40%, transparent);
}
.bd-chip-on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.bd-chip-tpl {
  border-style: dashed;
}
.bd-hero2-foot {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 12px;
  border-top: 1px solid #222a38;
}
.bd-group-own .bd-chip {
  border-color: color-mix(in srgb, var(--accent) 35%, #2a3140);
}

.bd-typedef2 {
  border: 1px solid color-mix(in srgb, var(--accent) 55%, #232a38);
  border-radius: 16px;
  background: #0f1219;
  padding: 12px 14px;
  font-size: 12.5px;
}
.bd-typedef2-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 13.5px;
}
.bd-typedef2-head span {
  color: var(--muted);
}
.bd-typedef2-head code,
.bd-typedef2 li code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  padding: 1px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  color: #9fb3c8;
}
.bd-typedef2 ul {
  margin: 0;
  padding-left: 18px;
  color: #c9d1dd;
  line-height: 1.5;
}
.bd-typedef2 li {
  margin: 2px 0;
}

.bd-trail .bd-crumb-wrap {
  display: inline-flex;
}

.bd-pkg-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--accent) 8%, var(--panel-2));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, #1f2531);
  margin-bottom: 24px;
}
.bd-pkg-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--muted);
}
.bd-pkg-v {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 4px 0 2px;
}
.bd-pkg-note {
  font-size: 13px;
  color: var(--muted);
}
.bd-pkg-hero .bd-rail-actions {
  flex: none;
}
.bd-pkg-hero .bd-rail-actions button {
  padding: 8px 14px;
  font-size: 12px;
}
.bd-pkg-cols {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 28px;
}

.bd-code2 {
  display: grid;
  grid-template-columns: 210px 1fr;
  border: 1px solid #1f2531;
  border-radius: 14px;
  overflow: hidden;
  min-height: 420px;
  background: #0b0e14;
}
.bd-guide {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  border-right: 1px solid #1f2531;
  background: var(--panel-2);
}
.bd-guide-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--muted);
}
.bd-guide-item {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 6px;
  align-items: baseline;
  padding: 5px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.bd-guide-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.bd-guide-line {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  color: var(--muted);
  text-align: right;
}
.bd-guide-class .bd-guide-label {
  font-weight: 800;
  color: #fbbf24;
}
.bd-guide-section .bd-guide-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.bd-guide-method .bd-guide-label,
.bd-guide-function .bd-guide-label {
  color: #67e8f9;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
}
.bd-guide-files {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #1f2531;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bd-guide-file {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}
.bd-guide-file-on {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}
.bd-source2 {
  margin: 0;
  padding: 12px 0;
  overflow: auto;
  max-height: 70vh;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.6;
  color: #c9d1dd;
}
.bd-line {
  display: block;
  padding: 0 16px 0 0;
  transition: background 0.3s;
}
.bd-line-hot {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.bd-ln {
  display: inline-block;
  width: 44px;
  padding-right: 14px;
  text-align: right;
  color: #3c4656;
  user-select: none;
}
.tk-k {
  color: #c084fc;
}
.tk-t {
  color: #fbbf24;
}
.tk-s {
  color: #86efac;
}
.tk-n {
  color: #f9a8d4;
}
.tk-c {
  color: #5b6676;
  font-style: italic;
}
.tk-d {
  color: #22d3ee;
}
.tk-i {
  color: #c9d1dd;
}
.bd-example pre .tk-s {
  color: #86efac;
}

/* Build: Preview — a storyboard of the kind in every format it ships */
.bd-sb {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.bd-sb-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
}
.bd-sb-frame {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 240px;
}
.bd-sb-frame-wide {
  flex: 1 1 420px;
  max-width: 600px;
}
.bd-sb-frame-doc {
  flex: 1 1 380px;
  min-width: 380px;
  max-width: 560px;
}
.bd-sb-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
}
.bd-sb-head b {
  font-weight: 800;
}
.bd-sb-note {
  color: var(--muted);
}
.bd-sb-tpl {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: color-mix(in srgb, var(--accent) 85%, white);
  font-size: 10.5px;
  font-weight: 800;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.bd-sb-stage {
  position: relative;
  padding: 18px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 0 0, #1b2030 1px, transparent 1.5px) 0 0 / 16px
      16px,
    #0c0f15;
  border: 1px solid #1f2531;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.bd-sb-tile {
  position: relative;
}
.bd-sb-tile > .card,
.bd-sb-cell .card,
.bd-sb-variant > .card {
  width: 100%;
  height: 100%;
}
.bd-sb-ql {
  position: relative;
  z-index: auto;
  width: 100%;
  max-width: 560px;
  height: 300px;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.5),
    0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
  font-size: 12px;
}
.bd-sb-ql .ql-btn {
  font-size: 11px;
  padding: 5px 10px;
  pointer-events: none;
}
.bd-sb-ql .ql-bar {
  padding: 8px 10px 8px 14px;
}
.bd-sb-doc {
  width: 100%;
  height: 320px;
  overflow: hidden;
  border-radius: 12px;
  position: relative;
}
.bd-sb-doc-inner {
  width: 960px;
  transform: scale(0.44);
  transform-origin: 0 0;
  pointer-events: none;
}
.bd-sb-doc-inner .doc-stage {
  width: 960px;
}
.bd-sb-doc::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 60px;
  background: linear-gradient(transparent, #0c0f15);
  pointer-events: none;
}
.bd-sb-variants {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.bd-sb-variant {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
}
.bd-sb-empty {
  padding: 20px 0;
}
.bd-sb-stage .card-grip {
  display: none;
}

/* Build: Spec as SKILL.md */
.bd-skill {
  max-width: 860px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.bd-skill-path {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: var(--muted);
}
.bd-skill-path span {
  font-family: system-ui, sans-serif;
}
.bd-skill-fm {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #0b0e14;
  border: 1px solid #1f2531;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.6;
  color: #5b6676;
  white-space: pre-wrap;
}
.bd-skill-h1 {
  margin: 4px 0 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.bd-skill-lede {
  margin: -10px 0 0;
  font-size: 14.5px;
  color: #c9d1dd;
  line-height: 1.5;
}
.bd-skill-sec h2 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.bd-skill-sub {
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.8;
}
.bd-skill-sec p,
.bd-skill-sec li {
  font-size: 13.5px;
  line-height: 1.6;
  color: #c9d1dd;
}
.bd-skill-sec > ul {
  margin: 0;
  padding-left: 20px;
}
.bd-skill-sec > ul > li {
  margin: 3px 0;
}
.bd-skill-sec code,
.bd-skill-prompt {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  padding: 1px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  color: #9fb3c8;
}
.bd-skill-sec kbd {
  font: inherit;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 5px;
  border: 1px solid #2a3140;
  background: #0f1219;
}
.bd-skill-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  padding: 0 2px;
  background: transparent;
  color: color-mix(in srgb, var(--accent) 85%, white);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.bd-skill-link:hover {
  text-decoration-style: solid;
}
.bd-skill-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bd-skill-links .bd-skill-link {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 600;
}
.bd-skill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.bd-skill-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.bd-skill-actions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bd-skill-actions li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid #1f2531;
}
.bd-skill-prompt {
  color: #86efac;
}
.bd-skill-action-label {
  font-size: 12.5px;
  color: var(--muted);
}
.bd-skill-run {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 0;
  background: var(--accent);
  color: #0b0e14;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.bd-skill-run:disabled {
  opacity: 0.4;
  cursor: default;
}
.ql-bar .ql-btn {
  white-space: nowrap;
}

/* Build: full-text spec search */
.bd-search {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 2px 10px;
  padding: 7px 10px;
  border-radius: 10px;
  background: #0b0e14;
  border: 1px solid #232a38;
  color: var(--muted);
}
.bd-search:focus-within {
  border-color: var(--accent);
}
.bd-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  outline: 0;
}
.bd-search-x {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
}
.bd-hits {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bd-hits .bd-tree-head {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: none;
  letter-spacing: 0;
  word-break: break-all;
}
.bd-hit {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid #1f2531;
  border-radius: 12px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.bd-hit:hover {
  border-color: color-mix(in srgb, var(--accent) 60%, #1f2531);
}
.bd-hit-on {
  border-color: var(--accent);
}
.bd-hit-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
}
.bd-hit-head b {
  font-weight: 800;
}
.bd-hit-head small {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.bd-hit-sum {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
}
.bd-hit-why {
  font-size: 10.5px;
  color: #9fb3c8;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bd-hit-how {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.bd-how {
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
}
.bd-how-use {
  background: color-mix(in srgb, #34d399 18%, transparent);
  color: #34d399;
}
.bd-how-remix {
  background: color-mix(in srgb, #fbbf24 18%, transparent);
  color: #fbbf24;
}
.bd-how-compose {
  background: color-mix(in srgb, #22d3ee 18%, transparent);
  color: #22d3ee;
}
.bd-how-inherit {
  background: color-mix(in srgb, #c084fc 18%, transparent);
  color: #c084fc;
}
.bd-skill-curl {
  color: #c9d1dd;
}

/* Build: Preview as figures — the artefact, a caption, nothing around it */
.bd-fig {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 200px;
}
.bd-fig-art {
  position: relative;
  display: flex;
  align-items: flex-start;
}
.bd-fig figcaption {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.bd-fig figcaption b {
  color: var(--text);
  font-weight: 800;
}
.bd-fig figcaption em {
  font-style: normal;
  margin-left: auto;
  color: color-mix(in srgb, var(--accent) 80%, white);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}
.bd-sb-row {
  gap: 28px;
}
.bd-sb-cell {
  position: relative;
}
.bd-sb-cell > .card {
  width: 100%;
  height: 100%;
  border-radius: 14px;
}
.bd-fig .bd-sb-ql {
  height: 320px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}
.bd-fig .bd-sb-doc {
  height: 320px;
}
.bd-fig .bd-sb-doc::after {
  background: linear-gradient(transparent, var(--bg));
}
.bd-sb-frame-wide,
.bd-sb-frame-doc {
  flex: 1 1 420px;
  max-width: 560px;
}

/* Build: less chrome on the map — one accent edge on the focused node, peers flat */
.bd-hero2 {
  box-shadow: none;
  border-color: color-mix(in srgb, var(--accent) 55%, #1f2531);
  background: #141924;
}
.bd-slot-mid::before {
  display: none;
}
.bd-node2 {
  background: transparent;
}
.bd-node2:hover {
  transform: none;
}
.bd-node2-dot {
  box-shadow: none;
}
.bd-chip-on {
  box-shadow: none;
}
.bd-fig .card-grip {
  display: none;
}

/* ======================= Run mode ======================= */
.run-area {
  display: flex;
  padding: 0;
  border-color: transparent !important;
  background: none !important;
  overflow: hidden;
}
.rn {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  color: var(--text);
}
.rn-head {
  padding: 16px 24px 12px;
  border-bottom: 1px solid #1f2531;
}
.rn-title-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.rn-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.rn-clock {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.rn-counts {
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 5px;
}
.rn-counts b {
  color: var(--text);
}
.rn-failed {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
  padding: 2px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, #f59e0b 18%, transparent);
  color: #fbbf24;
  font-weight: 800;
}
.rn-spacer {
  flex: 1;
}
.rn-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid #2a3140;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.rn-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}
.rn-btn-on {
  background: #fbbf24;
  border-color: #fbbf24;
  color: #0b0e14;
}
.rn-paused .rn-main {
  opacity: 0.7;
}
.rn-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
}
.rn-main {
  overflow-y: auto;
  padding: 18px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.rn-sec h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.rn-sec h3 span {
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.8;
}
.rn-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}
.rn-muted {
  font-size: 12.5px;
  color: var(--muted);
}
.rn-actor {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: color-mix(in srgb, var(--accent) 85%, white);
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
}
.rn-target {
  border: 0;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.rn-target:hover {
  background: rgba(255, 255, 255, 0.1);
}

.rn-procs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rn-proc {
  padding: 10px 14px 10px;
  border-radius: 14px;
  background: var(--panel-2);
  border: 1px solid #1f2531;
  border-left: 3px solid var(--accent);
}
.rn-proc-paused {
  border-left-style: dashed;
  opacity: 0.75;
}
.rn-proc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.rn-proc-task {
  font-weight: 700;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rn-proc-since {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.rn-proc-actions {
  display: inline-flex;
  gap: 2px;
}
.rn-proc-actions .icon-btn {
  opacity: 1;
  width: 26px;
  height: 26px;
}
.rn-progress {
  height: 4px;
  margin: 8px 0 8px;
  border-radius: 2px;
  background: #1b2030;
  overflow: hidden;
}
.rn-progress i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.9s linear;
}
.rn-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 14px;
  font-size: 11.5px;
  color: var(--muted);
}
.rn-steps li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.rn-steps li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2c3444;
}
.rn-step-done {
  color: #8b95a5;
}
.rn-step-done::before {
  background: var(--accent) !important;
  opacity: 0.6;
}
.rn-step-now {
  color: var(--text);
  font-weight: 700;
}
.rn-step-now::before {
  background: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.rn-recent {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rn-recent li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--muted);
}
.rn-recent-done > svg {
  color: #34d399;
}
.rn-recent-failed > svg {
  color: #f87171;
}
.rn-recent-task {
  color: var(--text);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rn-recent-when {
  font-size: 11.5px;
  white-space: nowrap;
}
.rn-mini {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #2a3140;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.rn-mini:hover:not(:disabled) {
  border-color: var(--accent, #34d399);
}
.rn-mini:disabled {
  opacity: 0.4;
  cursor: default;
}

.rn-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rn-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--panel-2);
  border: 1px solid #1f2531;
}
.rn-item-off {
  opacity: 0.55;
}
.rn-item-main {
  min-width: 0;
}
.rn-item-name {
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rn-item-sub {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}
.rn-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
}
.rn-next b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.rn-result-pass {
  color: #34d399;
}
.rn-result-fail {
  color: #f87171;
  font-weight: 700;
}
.rn-kw {
  color: #c084fc;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}
.rn-source {
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 10.5px;
}
.rn-switch {
  position: relative;
  width: 30px;
  height: 18px;
  border-radius: 999px;
  border: 0;
  background: #2c3444;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s;
}
.rn-switch i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #8b95a5;
  transition:
    transform 0.15s,
    background 0.15s;
}
.rn-switch-on {
  background: #34d399;
}
.rn-switch-on i {
  transform: translateX(12px);
  background: #0b0e14;
}

.rn-syncs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.rn-sync {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 11px 13px;
  border-radius: 12px;
  background: var(--panel-2);
  border: 1px solid #1f2531;
  font-size: 12px;
}
.rn-sync-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
}
.rn-sync-head b {
  font-weight: 800;
}
.rn-sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
}
.rn-sync-syncing .rn-sync-dot {
  background: #22d3ee;
  animation: rn-pulse 1s infinite;
}
.rn-sync-error .rn-sync-dot {
  background: #f87171;
}
.rn-sync-off .rn-sync-dot {
  background: #3c4656;
}
@keyframes rn-pulse {
  50% {
    opacity: 0.3;
  }
}
.rn-sync-dir {
  color: var(--muted);
}
.rn-sync-state {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
}
.rn-sync-error .rn-sync-state {
  color: #f87171;
  font-weight: 700;
}
.rn-sync-items {
  color: var(--muted);
}
.rn-sync-note {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #fbbf24;
  font-weight: 700;
}
.rn-sync-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
}
.rn-sync-off {
  opacity: 0.6;
}

.rn-log {
  border-left: 1px solid #1f2531;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #0b0e14;
}
.rn-log-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 14px 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.rn-log-head .rn-muted {
  margin-left: auto;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.rn-log-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 10px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1.5;
}
.rn-line {
  display: grid;
  grid-template-columns: 58px 56px 1fr;
  gap: 8px;
  padding: 3px 4px;
  border-radius: 5px;
  color: #b8c0cc;
}
.rn-line-t {
  color: #4b5567;
  font-variant-numeric: tabular-nums;
}
.rn-line-k {
  color: #6b7687;
}
.rn-line-proc .rn-line-k {
  color: #c084fc;
}
.rn-line-schedule .rn-line-k {
  color: #34d399;
}
.rn-line-trigger .rn-line-k {
  color: #fbbf24;
}
.rn-line-sync .rn-line-k {
  color: #22d3ee;
}
.rn-line-you .rn-line-k {
  color: #f472b6;
}
.rn-line-error .rn-line-x {
  color: #f87171;
}
.rn-line-warn .rn-line-x {
  color: #fbbf24;
}
.rn-log-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-top: 1px solid #1f2531;
  font-size: 10.5px;
  color: var(--muted);
}
.nav-badge-warn {
  background: #fbbf24;
  color: #0b0e14;
}

/* ======================= Runbook: a task as a chain ======================= */
.rn-proc-task,
.rn-recent-task {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  padding: 0;
}
.rn-proc-task:hover,
.rn-recent-task:hover {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.rn-recent-task {
  color: var(--text);
}
.rn-main-book {
  padding: 0;
  display: flex;
  flex-direction: column;
}
.rb {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.rb-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid #1f2531;
}
.rb-bar .icon-btn {
  opacity: 1;
}
.rb-trail {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  font-size: 13px;
}
.rb-crumb-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
}
.rb-crumb {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.rb-crumb:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}
.rb-crumb-on {
  color: var(--text);
}
.rb-state {
  font-size: 11.5px;
  color: var(--muted);
  padding: 2px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.rb-stage {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 40px 28px;
  display: flex;
  align-items: flex-start;
}
.rb-chain {
  display: flex;
  align-items: flex-start;
  gap: 0;
  min-width: max-content;
  margin: auto 0;
}
.rb-link {
  display: flex;
  align-items: flex-start;
}
.rb-arrow {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 10px;
  color: var(--accent);
}
.rb-arrow-dim {
  color: #2c3444;
}
.rb-slot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 220px;
}
.rb-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--panel-2);
  border: 1px solid #232a38;
  min-height: 64px;
  box-sizing: border-box;
}
.rb-drillable {
  cursor: pointer;
}
.rb-drillable:hover {
  border-color: var(--accent);
}
.rb-done {
  border-color: color-mix(in srgb, #34d399 45%, #232a38);
}
.rb-running {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.rb-failed {
  border-color: #f87171;
}
.rb-pending {
  opacity: 0.6;
}
.rb-end {
  width: 220px;
  background: transparent;
  border-style: dashed;
}
.rb-end.rb-done,
.rb-end.rb-failed,
.rb-end.rb-pending {
  opacity: 1;
}
.rb-tile-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.rb-label {
  font-weight: 800;
  flex: 1;
  min-width: 0;
}
.rb-glyph {
  display: inline-flex;
  color: var(--muted);
}
.rb-glyph-done {
  color: #34d399;
}
.rb-glyph-running {
  color: var(--accent);
  animation: rb-spin 1.2s linear infinite;
}
.rb-glyph-failed {
  color: #f87171;
}
@keyframes rb-spin {
  to {
    transform: rotate(360deg);
  }
}
.rb-took {
  font-size: 10.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.rb-sub-count {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10.5px;
  color: var(--muted);
}
.rb-progress {
  height: 3px;
  border-radius: 2px;
  background: #1b2030;
  overflow: hidden;
}
.rb-progress i {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 0.9s linear;
}
.rb-card {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid #2a3140;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}
.rb-card i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.rb-card:hover {
  border-color: var(--accent);
}
.rb-error {
  font-size: 11.5px;
  color: #f87171;
  font-weight: 700;
}
.rb-note {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted);
  padding: 0 4px;
}
.rb-note > svg {
  flex: none;
  margin-top: 3px;
}
.rb-note-fail {
  color: #fca5a5;
}
.rb-hint {
  padding: 10px 18px;
  border-top: 1px solid #1f2531;
  font-size: 11px;
  color: var(--muted);
}

/* Runbook: what a step touches, beneath it */
.rb-slot {
  width: 240px;
}
.rb-end {
  width: 240px;
}
.rb-assets {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid #1f2531;
  margin-top: 2px;
}
.rb-assets-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rb-role {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.rb-role-writes {
  color: color-mix(in srgb, var(--accent) 85%, white);
}
.rb-asset-card {
  position: relative;
  height: 84px;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  font-size: 10px;
}
.rb-asset-card > .card {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.rb-asset-card .card-grip {
  display: none;
}
.rb-asset-card:hover {
  outline: 1.5px solid var(--accent);
  outline-offset: 1px;
}
.rb-asset-file {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: #b8c0cc;
}
.rb-asset-file i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: #5b6676;
  flex: none;
}
.rb-asset-file em {
  margin-left: auto;
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  color: #f87171;
}
.rb-asset-partial em {
  color: #fbbf24;
}
.rb-asset-missing {
  opacity: 0.6;
}
.rb-tile {
  gap: 10px;
}

/* ---------- Top bar: mode · path · notifications / share / AI ---------- */
.tbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  flex: 0 0 40px;
  margin: 0 0 8px;
  padding: 0 4px 0 2px;
  z-index: 40;
}
.tb-mode {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px 0 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  color: color-mix(in srgb, var(--accent) 80%, var(--text));
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
}
.tb-mode:hover {
  background: color-mix(in srgb, var(--accent) 20%, var(--panel));
}
.tb-trail {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.tb-crumb-wrap {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}
.tb-sep {
  color: var(--muted);
  opacity: 0.6;
  font-size: 14px;
  padding: 0 3px;
}
.tb-crumb {
  height: 28px;
  padding: 0 9px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tb-crumb::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.7;
}
.tb-crumb:hover:not(:disabled) {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text);
}
.tb-crumb-tip {
  color: var(--text);
  font-weight: 800;
  cursor: default;
}
.tb-crumb-tip::before {
  opacity: 1;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.tb-toast {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  padding: 0 6px;
}
.tb-right {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.tb-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 85%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  position: relative;
}
.tb-btn:hover,
.tb-on {
  background: color-mix(in srgb, var(--text) 10%, var(--panel));
  border-color: color-mix(in srgb, var(--text) 25%, var(--line));
}
.tb-icon {
  width: 32px;
  padding: 0;
  justify-content: center;
}
.tb-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #fbbf24;
  color: #1a1203;
  font-size: 10px;
  font-weight: 800;
  display: grid;
  place-items: center;
  line-height: 1;
}
.tb-ai.tb-on {
  border-color: #c084fc;
  color: #e9d5ff;
}
.tb-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-left: 2px;
  transition: background 0.25s;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--panel) 70%, transparent);
}
.tb-scrim {
  position: fixed;
  inset: 0;
  z-index: 41;
}
.tb-menu {
  position: absolute;
  right: 0;
  top: 38px;
  z-index: 42;
  min-width: 280px;
  max-width: 360px;
  max-height: 60vh;
  overflow: auto;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  box-shadow:
    0 18px 50px -18px rgba(0, 0, 0, 0.7),
    0 2px 10px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(14px);
  transform-origin: top right;
}
.tb-menu-notif {
  right: 176px;
}
.tb-menu-share {
  right: 72px;
}
.tb-empty {
  padding: 10px 10px 12px;
  font-size: 12.5px;
  color: var(--muted);
}
.tb-menu-foot {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}

/* ---------- AI open: the panel slides in under the top bar; the same button dismisses it (Keynote inspector) ---------- */
.ai-is-open .tbar {
  margin-right: calc(-1 * var(--ai-w));
}
.ai {
  top: 60px;
}
/* mode-level TOCs/sidebars give way while the AI is open — it doesn't need those affordances and the content keeps its width */
.ai-is-open .bd-side,
.ai-is-open .doc-side {
  display: none;
}
.ai-is-open .bd {
  grid-template-columns: minmax(0, 1fr);
}
.ai-is-open .doc-body {
  grid-template-columns: minmax(0, 1fr);
}

/* ---------- Time Machine: the Versions tab turns the page into a 3D stack — newest at the front/bottom, older versions recede upward ---------- */
.doc-scroll-tm {
  position: relative;
  overflow: hidden;
  perspective: 1400px;
  perspective-origin: 50% 18%;
  padding-top: 150px;
}
.tm {
  position: relative;
  width: min(980px, 100%);
  margin: 0 auto;
  height: calc(100% - 40px);
  transform-style: preserve-3d;
}
.tm-card {
  position: absolute;
  inset: 0 0 auto 0;
  transform-style: preserve-3d;
  border-radius: 18px;
  border: 1px solid #262d3c;
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  box-shadow:
    0 30px 60px -30px rgba(0, 0, 0, 0.9),
    0 1px 0 rgba(255, 255, 255, 0.04) inset;
  cursor: pointer;
  overflow: hidden;
  will-change: transform, opacity, filter;
}
.tm-card:not(.tm-front) .tm-body {
  pointer-events: none;
}
.tm-front {
  border-color: color-mix(in srgb, var(--accent) 55%, #262d3c);
  cursor: default;
}
.tm-restoring {
  box-shadow:
    0 0 0 2px var(--accent),
    0 40px 80px -30px color-mix(in srgb, var(--accent) 50%, transparent);
}
.tm-cap {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 14px;
  border-bottom: 1px solid #1f2531;
  background: rgba(255, 255, 255, 0.025);
  font-size: 12px;
}
.tm-cap strong {
  font-weight: 800;
}
.tm-cap small {
  color: var(--muted);
}
.tm-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--panel);
}
.tm-front .tm-dot {
  background: var(--accent);
}
.tm-restore {
  margin-left: auto;
  height: 24px;
  padding: 0 12px;
  border-radius: 999px;
  border: 0;
  background: var(--accent);
  color: #0b0d12;
  font: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}
.tm-restore:disabled {
  opacity: 0.7;
  cursor: default;
}
.tm-body {
  padding: 18px 22px 26px;
}
.tm-body .doc-stage-meta {
  display: none;
}
.doc-version-peek {
  background: rgba(255, 255, 255, 0.05);
}
.doc-version-peek .doc-version-restore {
  opacity: 1;
}
.doc-scroll-tm {
  overflow-y: auto;
}
.tm {
  height: auto;
  min-height: calc(100% - 40px);
}
.tm-front.tm-pinned {
  border-color: var(--accent);
}
.tm-pinned .tm-cap::after {
  content: 'selected';
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.tm-restore {
  order: 9;
}
.doc-version-pinned .doc-version-dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
/* the content making room and the sheet arriving share one curve */
.workspace {
  transition: padding-right 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tbar {
  transition: margin-right 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tm-restoring {
  box-shadow:
    0 0 0 2px var(--accent),
    0 60px 90px -30px rgba(0, 0, 0, 0.95),
    0 30px 60px -20px color-mix(in srgb, var(--accent) 45%, transparent);
}
/* deck ⇄ page: the room above the page opens and closes with the deck */
.doc-scroll {
  transition: padding-top 0.36s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.doc-scroll-tm-closing {
  padding-top: 18px;
}
.doc-scroll-tm-closing .tm-card:not(.tm-front) {
  pointer-events: none;
}
/* room under the page for the newer versions peeking out */
.tm {
  margin-bottom: 120px;
}
.tm-ahead {
  cursor: pointer;
}
/* the dock: newer versions stacked at the bottom edge, caps only */
.tm {
  margin-bottom: 24px;
}
.tm-dock {
  position: sticky;
  bottom: 0;
  width: min(980px, 100%);
  margin: 0 auto;
  z-index: 150;
  overflow: hidden;
  pointer-events: none;
}
.tm-docked {
  position: absolute;
  left: 0;
  right: 0;
  height: 140px;
  cursor: pointer;
  pointer-events: auto;
  transform-origin: 50% 0%;
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -14px 30px -18px rgba(0, 0, 0, 0.9);
}
.tm-docked:hover {
  filter: brightness(1.15);
}
/* the dock hugs the bottom edge of the screen even when the page is short */
.doc-scroll-tm {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}
.doc-scroll-tm .tm {
  flex: 1 0 auto;
}
.tm-dock {
  margin-top: auto;
  flex: none;
}
.tm-docked-far .tm-cap > * {
  visibility: hidden;
} /* deep in the pile: just an edge */
/* Port adjustments: glimmer-motion's Reorder renders <ul>/<li> where the
   React reference used divs (Reorder's `as` is not ported). */
.ticker-reorder {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ticker-reorder > li {
  list-style: none;
}

/* ---- the flag, wired: the Wires-demo grammar for "act on this" ----
   The order card used to be a hazard-striped plate jutting straight out
   of the post's edge — over the media rail, under the wrong neighbours,
   and visually glued to nothing. It is a margin NOTE now: it stands
   clear of the rail, a drawn thread ties it to its post (c.Tether via
   newsfeed's FlagWire), and it rides above the rail while it asks. */
.feed-flag {
  margin-left: 84px; /* past the media chips — the wire crosses the gap */
  z-index: 7;
}
.feed-flag-tab {
  margin-left: 84px;
}
.feed-flag-done {
  margin-left: 84px;
  z-index: 6;
}
.feed-flag {
  clip-path: none;
  background: color-mix(in srgb, #f59e0b 7%, #14110a);
  border: 1px solid color-mix(in srgb, #f59e0b 55%, transparent);
  border-radius: 12px;
  overflow: hidden;
  filter: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}
.feed-flag::after {
  content: none;
}
.feed-flag-strip {
  background: none;
  color: #fbbf24;
  padding: 8px 12px 6px;
  border-bottom: 1px solid color-mix(in srgb, #f59e0b 28%, transparent);
  letter-spacing: 0.06em;
}
.feed-flag-beacon {
  background: #fbbf24;
  box-shadow: 0 0 0 2px color-mix(in srgb, #fbbf24 30%, transparent);
}
.feed-flag-stale .feed-flag-strip {
  background: none;
  color: #f87171;
  border-bottom-color: color-mix(in srgb, #ef4444 32%, transparent);
}
.feed-flag-stale {
  border-color: color-mix(in srgb, #ef4444 55%, transparent);
  background: color-mix(in srgb, #ef4444 7%, #140b0b);
}
.feed-flag-stale .feed-flag-beacon {
  background: #f87171;
  box-shadow: 0 0 0 2px color-mix(in srgb, #f87171 30%, transparent);
}
.feed-flag-done {
  clip-path: none;
  background: color-mix(in srgb, #22c55e 10%, #0b140d);
  color: #86efac;
  border: 1px solid color-mix(in srgb, #22c55e 45%, transparent);
  border-radius: 999px;
  padding: 5px 12px;
  filter: none;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}
.feed-flag-done small {
  color: color-mix(in srgb, #86efac 70%, transparent);
}
.feed-flag-tab {
  z-index: 7;
}

/* the threads themselves: region-level SVG, above the rail, never
   catching the pointer */
[data-choreo-tethers] {
  z-index: 6;
  overflow: visible;
}
[data-choreo-tether][data-thread^='flag-'] {
  fill: none;
  stroke: color-mix(in srgb, #f59e0b 70%, transparent);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: none;
}