:root {
  --sans: var(--seed-font-family);
  --mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, "D2Coding", monospace;

  --bg: var(--seed-color-bg-layer-default);
  --bg-soft: var(--seed-color-bg-layer-basement);
  --bg-float: var(--seed-color-bg-layer-floating);
  --bg-hover: var(--seed-color-bg-transparent-pressed);
  --bg-selected: var(--seed-color-bg-transparent-selected);
  --fg: var(--seed-color-fg-neutral);
  --fg-muted: var(--seed-color-fg-neutral-muted);
  --fg-faint: color-mix(in srgb, var(--seed-color-fg-neutral-muted) 55%, var(--seed-color-fg-neutral-subtle));
  --border: var(--seed-color-stroke-neutral-weak);
  --divider: var(--seed-color-stroke-neutral-muted);
  --field: var(--seed-color-stroke-neutral-weak);
  --field-focus: var(--seed-color-stroke-neutral-contrast);
  --accent: var(--seed-color-palette-blue-800);
  --accent-solid: var(--seed-color-bg-informative-solid);
  --accent-fg: var(--seed-color-fg-on-informative-solid);
  --accent-soft: var(--seed-color-bg-informative-weak);
  --mention-bg: var(--seed-color-bg-warning-weak);
  --mention-fg: var(--seed-color-fg-warning-contrast);
  --danger: var(--seed-color-palette-red-800);
  --warn-bg: var(--seed-color-bg-warning-weak);
  --warn-fg: var(--seed-color-fg-warning-contrast);
  --ok: var(--seed-color-palette-green-800);
  --stale: var(--seed-color-palette-yellow-800);
  --chip-bg: var(--seed-color-bg-neutral-weak);
  --code-bg: var(--seed-color-bg-neutral-muted);
  --code-fg: var(--seed-color-palette-red-800);
  --focus: var(--seed-color-stroke-focus-ring);
  --overlay: var(--seed-color-bg-overlay);
  --shadow: var(--seed-shadow-s3);
  --shadow-low: var(--seed-shadow-s2);

  --side-bg: var(--seed-color-palette-gray-100);
  --side-fg: var(--seed-color-fg-neutral-muted);
  --side-muted: var(--fg-faint);
  --side-active-fg: var(--seed-color-fg-neutral);
  --online: var(--seed-color-palette-green-500);
}

* { box-sizing: border-box; }
html, body, #app { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--seed-font-size-t4);
  line-height: var(--seed-line-height-t4);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
code, pre, .mono { font-family: var(--mono); }
a { color: var(--accent); }
:where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.btn-danger { color: var(--danger); }
.link-btn { border: 0; background: none; color: var(--accent); padding: 0; font-weight: var(--seed-font-weight-bold); }
.icon-btn {
  display: inline-grid; place-items: center; min-width: 32px; height: 32px; border: 0; background: none; padding: 0 6px;
  border-radius: var(--seed-radius-r2); color: var(--fg-muted); line-height: 1;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--fg); }

input[type=text], input[type=password], input:not([type]), select, textarea {
  width: 100%; min-height: 40px; border: 0; border-radius: var(--seed-radius-r2); background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--field); padding: 8px 12px; outline: none; font-weight: var(--seed-font-weight-regular);
  font-size: var(--seed-font-size-t4); line-height: var(--seed-line-height-t4);
}
select { padding-right: 8px; }
input::placeholder, textarea::placeholder { color: var(--seed-color-fg-placeholder); }
input:focus, select:focus, textarea:focus { box-shadow: inset 0 0 0 2px var(--field-focus); }
input:disabled, input[readonly], select:disabled, textarea:disabled { background: var(--seed-color-bg-disabled); color: var(--seed-color-fg-disabled); }
label.field { display: grid; gap: 6px; font-size: var(--seed-font-size-t3); line-height: var(--seed-line-height-t3); font-weight: var(--seed-font-weight-bold); color: var(--fg); }
.muted { color: var(--fg-muted); }
.faint { color: var(--fg-faint); }
.notice { min-height: 0; padding: var(--seed-dimension-x2_5) var(--seed-dimension-x3_5); white-space: pre-wrap; overflow-wrap: anywhere; }

/* join */
.join { min-height: 100%; display: grid; grid-template-columns: min(400px, 100%); place-content: center; justify-items: center; gap: var(--seed-dimension-x5); padding: 16px; background: var(--bg-soft); overflow: auto; }
.join-icon { display: block; border-radius: var(--seed-radius-r4); box-shadow: var(--shadow-low); }
.join form {
  width: min(400px, 100%); background: var(--bg-float); border-radius: var(--seed-radius-r5);
  padding: var(--seed-dimension-x8) var(--seed-dimension-x6); display: grid; gap: var(--seed-dimension-x4); box-shadow: var(--shadow-low);
}
.join h1 { margin: 0; font-size: var(--seed-font-size-t9); line-height: var(--seed-line-height-t9); }
.join p { margin: 0 0 var(--seed-dimension-x2); color: var(--fg-muted); }
.join .seed-action-button { width: 100%; margin-top: var(--seed-dimension-x2); }

/* shell */
.shell { display: grid; grid-template-columns: 260px minmax(0, 1fr) auto; height: 100%; }
.sidebar {
  background: var(--side-bg); color: var(--side-fg); display: flex; flex-direction: column; min-height: 0;
  box-shadow: inset -1px 0 0 0 var(--divider);
}
.ws { padding: 0 var(--seed-dimension-x4); height: 56px; flex: none; display: flex; align-items: center; gap: 8px; }
.ws-icon { flex: none; border-radius: var(--seed-radius-r2); }
.ws h1 {
  display: grid; flex: 1; min-width: 0; margin: 0; color: var(--side-active-fg);
  font-size: var(--seed-font-size-t5); line-height: var(--seed-line-height-t5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ws-sub { font-size: var(--seed-font-size-t2); line-height: var(--seed-line-height-t2); font-weight: var(--seed-font-weight-medium); color: var(--side-muted); }
.conn { font-size: var(--seed-font-size-t2); font-weight: var(--seed-font-weight-bold); color: var(--danger); }
.nav { flex: 1; overflow-y: auto; padding: 4px 0 16px; scrollbar-width: thin; }
.nav-section { margin-top: var(--seed-dimension-x4); }
.nav-section:first-child { margin-top: 0; }
.nav-title { padding: 6px var(--seed-dimension-x4) 4px; font-size: var(--seed-font-size-t3); line-height: var(--seed-line-height-t3); color: var(--side-muted); font-weight: var(--seed-font-weight-bold); }
.nav-item {
  display: flex; align-items: center; gap: 8px; margin: 1px 8px; padding: 0 10px; min-height: 36px; border-radius: var(--seed-radius-r2_5);
  color: var(--side-fg); text-decoration: none; font-weight: var(--seed-font-weight-medium);
  border: 0; background: none; width: calc(100% - 16px); text-align: left;
}
.nav-item:hover { background: var(--bg-hover); }
.nav-item.active { background: var(--bg-selected); color: var(--side-active-fg); font-weight: var(--seed-font-weight-bold); }
.nav-item.unread { color: var(--side-active-fg); font-weight: var(--seed-font-weight-bold); }
.nav-item .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item .hash { color: var(--side-muted); width: 16px; text-align: center; }
.nav-item.muted-item { color: var(--side-muted); }
div.nav-item:hover { background: none; }
.dot { width: 10px; height: 10px; border-radius: var(--seed-radius-full); box-shadow: inset 0 0 0 1.5px var(--side-muted); flex: none; }
.dot.on { background: var(--online); box-shadow: none; }
.me-bar { box-shadow: inset 0 1px 0 0 var(--divider); padding: 10px 12px; display: flex; align-items: center; gap: 8px; }
.me-bar .name { flex: 1; min-width: 0; font-weight: var(--seed-font-weight-bold); color: var(--side-active-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-bar .me-settings { color: var(--side-fg); font-size: var(--seed-font-size-t6); }

.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.view-header {
  display: flex; align-items: center; gap: 10px; padding: 0 var(--seed-dimension-x4) 0 var(--seed-dimension-x5); height: 56px;
  box-shadow: inset 0 -1px 0 0 var(--divider); flex: none;
}
.view-header h2 { font-size: var(--seed-font-size-t6); line-height: var(--seed-line-height-t6); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.view-header .sub { display: flex; gap: 6px; align-items: center; min-width: 0; color: var(--fg-muted); font-size: var(--seed-font-size-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.view-header .spacer { flex: 1; }
.view-header select { width: auto; min-height: 36px; max-width: 45%; }
.menu-btn { display: none; }

.seed-avatar__root { flex: none; }
.avatar-letter { color: var(--seed-color-palette-static-white); font-weight: var(--seed-font-weight-bold); font-size: var(--seed-font-size-t5); user-select: none; }
.seed-avatar__root--size_24 .avatar-letter { font-size: var(--seed-font-size-t2); }

/* messages */
.messages { flex: 1; overflow-y: auto; padding: 8px 0 12px; overscroll-behavior: contain; }
.channel-start { padding: var(--seed-dimension-x6) var(--seed-dimension-x5) 8px; color: var(--fg-muted); }
.channel-start strong { display: block; color: var(--fg); font-size: var(--seed-font-size-t8); line-height: var(--seed-line-height-t8); margin-bottom: 2px; }
.older { text-align: center; padding: 8px; color: var(--fg-faint); font-size: var(--seed-font-size-t3); }
.day { display: flex; align-items: center; gap: 12px; margin: 16px 20px 6px; color: var(--fg-muted); font-size: var(--seed-font-size-t3); font-weight: var(--seed-font-weight-bold); }
.day::before, .day::after { content: ""; flex: 1; border-top: 1px solid var(--divider); }
.new-divider { display: flex; align-items: center; gap: 8px; margin: 6px 20px; color: var(--danger); font-size: var(--seed-font-size-t2); font-weight: var(--seed-font-weight-bold); }
.new-divider::before { content: ""; flex: 1; border-top: 1px solid var(--seed-color-stroke-critical-solid); }

.msg { position: relative; display: flex; gap: 12px; padding: 8px 20px 4px; }
.msg.grouped { padding-top: 2px; }
.msg:hover { background: var(--bg-hover); }
.msg .gutter { width: 36px; flex: none; display: flex; justify-content: center; }
.msg .hover-time { visibility: hidden; color: var(--fg-faint); font-size: var(--seed-font-size-t1); padding-top: 4px; white-space: nowrap; }
.msg:hover .hover-time { visibility: visible; }
.msg .body { min-width: 0; flex: 1; }
.msg .text { font-size: var(--seed-font-size-t5); line-height: var(--seed-line-height-t5); }
.meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.author { font-weight: var(--seed-font-weight-bold); }
.meta time { color: var(--fg-faint); font-size: var(--seed-font-size-t2); }
.text { overflow-wrap: anywhere; }
.text pre {
  background: var(--code-bg); box-shadow: inset 0 0 0 1px var(--divider); border-radius: var(--seed-radius-r2); padding: 10px 12px; margin: 6px 0;
  overflow-x: auto; font-size: var(--seed-font-size-t3); line-height: var(--seed-line-height-t3); white-space: pre;
}
.text code { background: var(--chip-bg); border-radius: var(--seed-radius-r1); padding: 1px 5px; font-size: .85em; color: var(--code-fg); }
.text pre code { padding: 0; color: inherit; background: none; font-size: inherit; }
.edited { color: var(--fg-faint); font-size: var(--seed-font-size-t2); margin-left: 4px; }
.mention { background: var(--accent-soft); color: var(--seed-color-fg-informative-contrast); border-radius: var(--seed-radius-r1); padding: 0 3px; font-weight: var(--seed-font-weight-bold); }
.mention.me { background: var(--mention-bg); color: var(--mention-fg); }
.msg.mentions-me { background: color-mix(in srgb, var(--mention-bg) 60%, transparent); box-shadow: inset 3px 0 0 var(--seed-color-stroke-warning-solid); }

.msg.system { padding-top: 3px; padding-bottom: 3px; font-size: var(--seed-font-size-t3); line-height: var(--seed-line-height-t3); color: var(--fg-muted); }
.msg.system .text { font-size: inherit; line-height: inherit; }
.msg.system .gutter { color: var(--fg-faint); font-size: var(--seed-font-size-t2); padding-top: 2px; }
.msg.system time { color: var(--fg-faint); font-size: var(--seed-font-size-t1); margin-left: 6px; }

.seed-reaction-button[aria-pressed=true] { color: var(--seed-color-palette-carrot-800); --seed-count-color: var(--seed-color-palette-carrot-800); }
.reactions { display: flex; flex-wrap: wrap; gap: var(--seed-dimension-x1_5); margin-top: var(--seed-dimension-x1_5); }
.replies {
  margin: 4px 0 0 -8px; border: 0; background: none; border-radius: var(--seed-radius-r2); padding: 4px 8px; display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; gap: 0 8px; text-align: left;
  color: var(--accent); font-weight: var(--seed-font-weight-bold); font-size: var(--seed-font-size-t3);
}
.replies:hover { background: var(--bg-hover); }
.replies span { color: var(--fg-faint); font-weight: var(--seed-font-weight-regular); }
.actions {
  position: absolute; right: 16px; top: -16px; display: none; gap: 2px; padding: 3px;
  background: var(--bg-float); border-radius: var(--seed-radius-r2_5); box-shadow: var(--shadow-low), inset 0 0 0 1px var(--divider); z-index: 2;
}
.msg:hover .actions, .msg:focus-within .actions { display: flex; }
.actions button { border: 0; background: none; border-radius: var(--seed-radius-r2); min-width: 32px; height: 30px; padding: 0 6px; font-size: var(--seed-font-size-t4); color: var(--fg-muted); }
.actions button:hover { background: var(--bg-hover); color: var(--fg); }
.edit-box { display: grid; gap: 8px; margin-top: 2px; }
.edit-box .row { display: flex; gap: 6px; justify-content: flex-end; }

.task-chip {
  display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: var(--seed-radius-r1_5);
  padding: 1px 6px; font-size: var(--seed-font-size-t3); line-height: var(--seed-line-height-t3); font-weight: var(--seed-font-weight-bold);
  background: var(--chip-bg); vertical-align: 1px; color: var(--fg);
}
button.task-chip:hover { background: var(--seed-color-bg-neutral-weak-pressed); }
.task-chip .st { font-weight: var(--seed-font-weight-medium); color: var(--fg-muted); }
.task-chip.claimed .st { color: var(--accent); }
.task-chip.stale .st, .task-chip.review .st { color: var(--stale); }
.task-chip.done .st { color: var(--ok); }
.task-chip.draft .st { color: var(--fg-faint); }
.task-chip.gone { opacity: .6; }

/* composer */
.composer { padding: 0 var(--seed-dimension-x4) var(--seed-dimension-x4); flex: none; position: relative; }
.composer-box { border-radius: var(--seed-radius-r3); background: var(--bg); box-shadow: inset 0 0 0 1px var(--field); }
.composer-box:focus-within { box-shadow: inset 0 0 0 2px var(--field-focus); }
.composer textarea {
  box-shadow: none !important; resize: none; max-height: 40vh; min-height: 44px; padding: 12px 14px 6px; display: block; background: transparent;
  font-size: var(--seed-font-size-t5); line-height: var(--seed-line-height-t5);
}
.composer .hint { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 2px 8px 8px 14px; font-size: var(--seed-font-size-t2); color: var(--fg-faint); }
.hint-items { min-width: 0; }
.hint-item { white-space: nowrap; }
.autocomplete {
  position: absolute; left: 16px; bottom: calc(100% - 8px); min-width: 220px; background: var(--bg-float);
  border-radius: var(--seed-radius-r3); box-shadow: var(--shadow), inset 0 0 0 1px var(--divider); padding: 6px; z-index: 5;
}
.autocomplete button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; border: 0; background: none; padding: 4px 8px; border-radius: var(--seed-radius-r2); text-align: left; }
.autocomplete button.sel { background: var(--bg-selected); font-weight: var(--seed-font-weight-bold); }

/* right panel */
.panel { width: var(--panel-w, 400px); position: relative; box-shadow: inset 1px 0 0 0 var(--divider); display: flex; flex-direction: column; min-height: 0; background: var(--bg); }
.panel-resizer { position: absolute; inset: 0 auto 0 -4px; width: 8px; z-index: 6; cursor: col-resize; touch-action: none; }
.panel-resizer::after { content: ''; position: absolute; inset: 0 3px; transition: background-color var(--seed-duration-d2) var(--seed-timing-function-easing); }
.panel-resizer:hover::after, .panel-resizer:focus-visible::after, .shell.resizing .panel-resizer::after { background: var(--focus); }
.panel-resizer:focus-visible { outline: none; }
.shell.resizing { cursor: col-resize; user-select: none; }
.panel[hidden] { display: none; }
.panel .view-header h2 { font-size: var(--seed-font-size-t5); line-height: var(--seed-line-height-t5); }
.thread-sep { display: flex; align-items: center; gap: 10px; margin: 8px 20px; color: var(--fg-muted); font-size: var(--seed-font-size-t3); font-weight: var(--seed-font-weight-bold); }
.thread-sep::after { content: ""; flex: 1; border-top: 1px solid var(--divider); }
.task-detail { flex: 1; min-height: 0; padding: var(--seed-dimension-x5); overflow-y: auto; display: grid; gap: var(--seed-dimension-x4); align-content: start; }
.task-detail h3 { margin: 0; font-size: var(--seed-font-size-t7); line-height: var(--seed-line-height-t7); }
.task-detail h4 { margin: 4px 0 8px; font-size: var(--seed-font-size-t3); color: var(--fg-muted); }
.task-detail .form { max-width: none; box-shadow: inset 0 0 0 1px var(--border); border-radius: var(--seed-radius-r3); padding: var(--seed-dimension-x4); }
.kv { display: grid; grid-template-columns: 80px 1fr; gap: 8px 12px; margin: 0; }
.kv dt { color: var(--fg-faint); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.task-thread { box-shadow: inset 0 0 0 1px var(--border); border-radius: var(--seed-radius-r3); padding: 4px 0; margin: 0 -4px; }
.task-thread .msg { padding-left: 10px; padding-right: 10px; }
.links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.links li { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; overflow-wrap: anywhere; }

/* board */
.board { flex: 1; overflow-y: auto; padding: var(--seed-dimension-x5) var(--seed-dimension-x5) var(--seed-dimension-x10); }
.board-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--seed-dimension-x6); align-items: start; }
.board section h3 { margin: 0 0 12px; font-size: var(--seed-font-size-t5); line-height: var(--seed-line-height-t5); display: flex; gap: 8px; align-items: center; }
.board section h3 .count { color: var(--fg-faint); font-weight: var(--seed-font-weight-medium); }
.board .block { margin-top: var(--seed-dimension-x8); }
.board .drafts { margin-bottom: var(--seed-dimension-x6); }
.board .drafts p { margin: -6px 0 12px; font-size: var(--seed-font-size-t3); }
.person { margin-bottom: 16px; }
.person-head { display: flex; align-items: center; gap: 8px; font-weight: var(--seed-font-weight-bold); margin-bottom: 8px; }
.person-head .dot { box-shadow: inset 0 0 0 1.5px var(--fg-faint); }
.person-head .dot.on { box-shadow: none; }
.cards { display: grid; gap: 10px; }
.card {
  border-radius: var(--seed-radius-r3); padding: 12px 14px; background: var(--bg); display: grid; gap: 8px;
  box-shadow: inset 0 0 0 1px var(--border);
}
.card.stale { box-shadow: none; border: 1px dashed var(--seed-color-stroke-warning-solid); background: color-mix(in srgb, var(--warn-bg) 55%, var(--bg)); }
.card.draft { box-shadow: none; border: 1px dashed var(--border); }
.card-top { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.card-top .title { font-weight: var(--seed-font-weight-bold); font-size: var(--seed-font-size-t5); line-height: var(--seed-line-height-t5); flex: 1; min-width: 0; overflow-wrap: anywhere; }
.task-id { border: 0; background: none; padding: 2px 4px; margin: -2px -4px; border-radius: var(--seed-radius-r1); color: var(--accent); font-weight: var(--seed-font-weight-bold); font-family: var(--mono); font-size: var(--seed-font-size-t3); }
.task-id:hover { background: var(--accent-soft); }
.card-tags, .chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.areas { display: flex; flex-wrap: wrap; gap: 4px; }
.area {
  font-family: var(--mono); font-size: var(--seed-font-size-t2); line-height: var(--seed-line-height-t2); color: var(--fg-muted);
  background: var(--chip-bg); border-radius: var(--seed-radius-r1); padding: 2px 6px; overflow-wrap: anywhere;
}
.area.none { color: var(--fg-faint); font-family: var(--sans); background: none; padding: 0; }
.note { font-size: var(--seed-font-size-t3); color: var(--fg-muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.card-meta { display: flex; gap: 8px; align-items: center; font-size: var(--seed-font-size-t2); color: var(--fg-faint); flex-wrap: wrap; }
.card-meta .spacer { flex: 1; }
.empty { color: var(--fg-faint); padding: 6px 0; }
.locks { width: 100%; border-collapse: collapse; font-size: var(--seed-font-size-t3); }
.locks td { padding: 8px 6px; border-bottom: 1px solid var(--divider); vertical-align: middle; }
.locks td:not(.area-cell) { white-space: nowrap; }
.locks td.area-cell { font-family: var(--mono); font-size: var(--seed-font-size-t2); overflow-wrap: anywhere; }
.locks tr.stale td { color: var(--stale); }
.board section h4 { margin: 0 0 4px; font-size: var(--seed-font-size-t4); display: flex; gap: 6px; align-items: center; }
.board section h4 .count { color: var(--fg-faint); font-weight: var(--seed-font-weight-medium); }
.board section .locks + h4, .board section .empty + h4 { margin-top: 16px; }
.area.locked { color: var(--fg); }
details.done summary { cursor: pointer; font-weight: var(--seed-font-weight-bold); font-size: var(--seed-font-size-t5); border-radius: var(--seed-radius-r1); }
details.done .cards { margin-top: 12px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--seed-dimension-x5); }
.filters select { width: auto; max-width: 100%; min-height: 36px; }
.form { display: grid; gap: var(--seed-dimension-x3); max-width: 560px; }
.form .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.form .field.grow, .row .grow { flex: 1; min-width: 140px; }
.area-inputs { display: grid; gap: 6px; }
.area-inputs input { font-family: var(--mono); font-size: var(--seed-font-size-t3); }
.draft-actions { display: flex; gap: 6px; margin-top: 6px; }
.projects-list { box-shadow: inset 0 0 0 1px var(--border); border-radius: var(--seed-radius-r3); max-width: 900px; }
.list-row { gap: var(--seed-dimension-x3); align-items: center; flex-wrap: wrap; }
.list-row + .list-row { box-shadow: inset 0 1px 0 0 var(--divider); }
.list-row .seed-list-item__content { min-width: 0; flex-basis: 160px; overflow-wrap: anywhere; }
.list-row .seed-list-item__suffix { gap: var(--seed-dimension-x1_5); }

/* dialog */
dialog {
  border: 0; border-radius: var(--seed-radius-r5); padding: 0; width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px);
  background: var(--bg-float); color: var(--fg); box-shadow: var(--shadow);
}
dialog::backdrop { background: var(--overlay); }
.dlg { padding: var(--seed-dimension-x6); display: grid; gap: var(--seed-dimension-x4); }
.dlg h2 { margin: 0; font-size: var(--seed-font-size-t8); line-height: var(--seed-line-height-t8); }
.dlg .foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: var(--seed-dimension-x2); }
.dlg .foot .spacer { flex: 1; }
.cmd { display: flex; gap: 8px; align-items: center; }
.cmd pre {
  flex: 1; min-width: 0; margin: 0; background: var(--code-bg); box-shadow: inset 0 0 0 1px var(--divider); border-radius: var(--seed-radius-r2);
  padding: 10px 12px; font-size: var(--seed-font-size-t2); line-height: var(--seed-line-height-t2); white-space: pre-wrap; word-break: break-all;
}
.steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.field-title { font-weight: var(--seed-font-weight-bold); font-size: var(--seed-font-size-t4); margin-bottom: 8px; }
.webhook { display: grid; gap: 10px; box-shadow: inset 0 1px 0 0 var(--divider); padding-top: 14px; }
.token-list { box-shadow: inset 0 0 0 1px var(--border); border-radius: var(--seed-radius-r3); }
.digest-out {
  margin: 8px 0 0; background: var(--code-bg); box-shadow: inset 0 0 0 1px var(--divider); border-radius: var(--seed-radius-r2);
  padding: 10px 12px; font-size: var(--seed-font-size-t2); white-space: pre-wrap; max-height: 40vh; overflow: auto;
}

/* docs: tree */
.tree-group { margin-top: 2px; }
.tree-group-head {
  display: flex; align-items: center; gap: 4px; margin: 6px 8px 0; padding: 2px 4px 2px 10px; min-height: 28px;
  font-size: var(--seed-font-size-t2); font-weight: var(--seed-font-weight-bold); color: var(--side-muted);
}
.tree-group-head .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-row { display: flex; align-items: center; gap: 2px; margin: 1px 8px; min-height: 34px; padding: 0 4px 0 calc(4px + var(--depth, 0) * 14px); border-radius: var(--seed-radius-r2_5); }
.tree-row:hover { background: var(--bg-hover); }
.tree-row.active { background: var(--bg-selected); }
.tree-row.active .tree-link { color: var(--side-active-fg); font-weight: var(--seed-font-weight-bold); }
.tree-row.dragging { opacity: .45; }
.tree-link {
  flex: 1; min-width: 0; display: flex; gap: 6px; align-items: center; color: var(--side-fg); text-decoration: none;
  font-weight: var(--seed-font-weight-medium); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 4px 0; border-radius: var(--seed-radius-r1);
}
.tree-link .ti { flex: none; width: 18px; text-align: center; }
.tw, .tree-add {
  flex: none; display: grid; place-items: center; border: 0; background: none; color: var(--side-muted);
  width: 24px; height: 24px; padding: 0; border-radius: var(--seed-radius-r1_5); line-height: 1; font-size: var(--seed-font-size-t2);
}
.tree-add { font-size: var(--seed-font-size-t6); }
:where(.tree-row, .tree-group-head):hover .tree-add, .tree-add:focus-visible { color: var(--side-fg); }
.tw:hover, .tree-add:hover { background: var(--bg-hover); color: var(--side-active-fg); }
.drop-inside { outline: 2px solid var(--accent); outline-offset: -2px; }
.tree-row.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.tree-row.drop-after { box-shadow: inset 0 -2px 0 var(--accent); }
.is-dragging, .is-dragging * { user-select: none; cursor: grabbing; }

/* docs: page */
.view-header h2 a { color: inherit; text-decoration: none; }
.view-header h2 a:hover { text-decoration: underline; }
.crumb-group { color: var(--fg-muted); font-weight: var(--seed-font-weight-medium); }
.doc { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.doc-inner {
  max-width: 780px; margin: 0 auto; padding: var(--seed-dimension-x8) 40px 40px 56px; display: grid; gap: 4px;
  font-size: var(--seed-font-size-t5); line-height: var(--seed-line-height-t5);
}
.doc-head { position: relative; display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.doc-icon { flex: none; border: 0; background: none; font-size: 36px; line-height: 1; padding: 6px; border-radius: var(--seed-radius-r3); }
.doc-icon:hover { background: var(--bg-hover); }
input.doc-title {
  box-shadow: none; padding: 4px 0; min-height: 0; background: transparent; min-width: 0;
  font-size: var(--seed-font-size-t12); line-height: var(--seed-line-height-t12); font-weight: var(--seed-font-weight-bold);
}
input.doc-title:focus { box-shadow: none; }
input.doc-title[readonly] { background: transparent; color: inherit; }
.doc-meta { color: var(--fg-faint); font-size: var(--seed-font-size-t3); margin-bottom: 16px; }
.icon-menu {
  position: absolute; top: 100%; left: 0; z-index: 10; display: grid; grid-template-columns: repeat(6, 40px); gap: 2px; padding: 6px;
  background: var(--bg-float); border-radius: var(--seed-radius-r3); box-shadow: var(--shadow), inset 0 0 0 1px var(--divider);
}
.icon-menu button { border: 0; background: none; font-size: 20px; height: 40px; border-radius: var(--seed-radius-r2); }
.icon-menu button:hover { background: var(--bg-hover); }
.icon-menu .none { grid-column: span 6; font-size: var(--seed-font-size-t3); color: var(--fg-muted); }
.doc-tail { min-height: 120px; cursor: text; }
.doc-children { display: grid; justify-items: start; margin-top: var(--seed-dimension-x3); }
.doc-children-head {
  justify-self: stretch; padding-top: var(--seed-dimension-x3); margin-bottom: var(--seed-dimension-x1); box-shadow: inset 0 1px 0 var(--divider);
  font-size: var(--seed-font-size-t3); line-height: var(--seed-line-height-t3); font-weight: var(--seed-font-weight-bold); color: var(--fg-muted);
}
.doc-child { padding: 6px 8px; margin-inline: -8px; width: calc(100% + 16px); --list-item-border-radius: var(--seed-radius-r2); }
.doc-child .seed-list-item__prefix { --seed-box-padding-right: var(--seed-dimension-x2); width: 26px; justify-content: center; }
.doc-child .seed-list-item__content { min-width: 0; text-decoration: none; }
.doc-child .seed-list-item__title { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-child-add { --seed-box-color: var(--fg-muted); margin-left: -8px; }

.blk { position: relative; display: flex; align-items: flex-start; margin-left: -30px; border-radius: var(--seed-radius-r1); }
.blk.dragging { opacity: .45; }
.blk.drop-before { box-shadow: 0 -2px 0 var(--accent); }
.blk.drop-after { box-shadow: 0 2px 0 var(--accent); }
.blk-gutter { flex: none; align-self: stretch; width: 30px; display: flex; justify-content: center; padding-top: 3px; cursor: grab; touch-action: none; }
.handle {
  border: 0; background: none; color: var(--fg-faint); padding: 2px 3px; border-radius: var(--seed-radius-r1); font-size: var(--seed-font-size-t2); letter-spacing: -2px;
  line-height: 1.2; cursor: grab; opacity: 0; touch-action: none;
}
.blk:hover .handle, .blk:focus-within .handle { opacity: 1; }
.handle:hover { background: var(--bg-hover); }
.blk-body { flex: 1; min-width: 0; position: relative; }
.blk-row { display: flex; align-items: baseline; gap: 8px; border-radius: var(--seed-radius-r1); }
.blk-row[tabindex]:focus { outline: none; background: var(--accent-soft); }
.ce { flex: 1; min-width: 0; outline: none; padding: 3px 2px; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 1.4em; }
.ce:empty::before { content: attr(data-ph); color: var(--seed-color-fg-placeholder); pointer-events: none; }
.blk-p .ce:empty:not(:focus)::before { content: ""; }
.blk-h1 .ce { font-size: var(--seed-font-size-t10); line-height: var(--seed-line-height-t10); font-weight: var(--seed-font-weight-bold); padding-top: 16px; }
.blk-h2 .ce { font-size: var(--seed-font-size-t8); line-height: var(--seed-line-height-t8); font-weight: var(--seed-font-weight-bold); padding-top: 12px; }
.blk-h3 .ce { font-size: var(--seed-font-size-t6); line-height: var(--seed-line-height-t6); font-weight: var(--seed-font-weight-bold); padding-top: 6px; }
.blk-h1 .blk-gutter { padding-top: 22px; }
.blk-h2 .blk-gutter { padding-top: 16px; }
.blk-h3 .blk-gutter { padding-top: 8px; }
.blk-bullet .blk-row::before, .blk-number .blk-row::before { flex: none; min-width: 18px; text-align: right; color: var(--fg-muted); }
.blk-bullet .blk-row::before { content: "•"; font-size: 18px; line-height: 1; }
.blk-number .blk-row::before { content: attr(data-n) "."; }
.blk-check { flex: none; width: 18px; height: 18px; margin: 0 2px; transform: translateY(3px); cursor: pointer; accent-color: var(--seed-color-bg-neutral-solid); }
.blk-check:disabled { cursor: default; }
.blk-check:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.blk-todo.checked .ce { text-decoration: line-through; color: var(--fg-faint); }
.blk-quote .blk-row { border-radius: 0; box-shadow: inset 3px 0 0 var(--seed-color-stroke-neutral-solid); padding-left: 14px; }
.blk-callout .blk-row { background: var(--chip-bg); border-radius: var(--seed-radius-r2_5); padding: 12px 14px; margin: 4px 0; }
.blk-callout .blk-row::before { content: "💡"; flex: none; }
.blk-code .blk-row { background: var(--code-bg); box-shadow: inset 0 0 0 1px var(--divider); border-radius: var(--seed-radius-r2); padding: 10px 14px; margin: 4px 0; }
.blk-code .ce { font-family: var(--mono); font-size: var(--seed-font-size-t3); line-height: var(--seed-line-height-t3); tab-size: 4; }
.blk-divider .blk-row { padding: 10px 0; }
.blk-divider hr { flex: 1; border: 0; border-top: 1px solid var(--border); margin: 0; }
.blk-task .blk-row { padding: 3px 2px; }
.blk-task { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.blk-task-title { overflow-wrap: anywhere; }
.blk-editing {
  position: absolute; right: 0; top: -10px; z-index: 3; pointer-events: none; font-size: var(--seed-font-size-t1); font-weight: var(--seed-font-weight-bold); line-height: 18px;
  color: var(--accent-fg); background: var(--accent-solid); border-radius: var(--seed-radius-r1); padding: 0 6px; white-space: nowrap;
}
.blk:has(.blk-editing:not([hidden])) .blk-row { box-shadow: inset 2px 0 0 var(--accent); }
.blk-editing[hidden] { display: none; }
.blk-conflict {
  background: var(--warn-bg); color: var(--warn-fg); border-radius: var(--seed-radius-r2_5); padding: 12px 14px; margin: 4px 0;
  display: grid; gap: 8px; font-size: var(--seed-font-size-t3); line-height: var(--seed-line-height-t3);
}
.blk-conflict[hidden] { display: none; }
.cf-head { font-weight: var(--seed-font-weight-bold); }
.cf-latest { color: var(--fg); background: var(--bg); border-radius: var(--seed-radius-r2); padding: 6px 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cf-note { font-size: var(--seed-font-size-t2); }
.cf-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.slash-menu {
  position: absolute; left: 0; top: 100%; z-index: 10; width: min(300px, 100%); max-height: 320px; overflow-y: auto;
  background: var(--bg-float); border-radius: var(--seed-radius-r3); box-shadow: var(--shadow), inset 0 0 0 1px var(--divider); padding: 6px;
  font-size: var(--seed-font-size-t4); line-height: var(--seed-line-height-t4);
}
.slash-menu button {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 36px; border: 0; background: none;
  padding: 4px 10px; border-radius: var(--seed-radius-r2); text-align: left;
}
.slash-menu button .hint { color: var(--fg-faint); font-size: var(--seed-font-size-t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slash-menu button.sel { background: var(--bg-selected); font-weight: var(--seed-font-weight-bold); }
.page-chip {
  display: inline-flex; align-items: center; gap: 4px; border-radius: var(--seed-radius-r1_5); padding: 0 6px;
  background: var(--chip-bg); color: var(--fg); text-decoration: none; font-weight: var(--seed-font-weight-bold);
}
.page-chip:hover { background: var(--seed-color-bg-neutral-weak-pressed); }
.toast { position: fixed; inset: auto 0 var(--seed-dimension-x5); margin: 0 auto; z-index: 50; width: calc(100vw - 32px); box-shadow: var(--shadow); overflow-wrap: anywhere; }
.toast[hidden] { display: none; }

/* builds */
.dropzone {
  display: grid; gap: var(--seed-dimension-x3); max-width: 720px; border: 2px dashed var(--border); border-radius: var(--seed-radius-r4);
  padding: var(--seed-dimension-x5); margin-bottom: var(--seed-dimension-x6);
}
.dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.drop-label { cursor: pointer; font-weight: var(--seed-font-weight-bold); font-size: var(--seed-font-size-t5); }
.drop-label u { color: var(--accent); }
.drop-label .faint { display: block; margin-top: 2px; font-weight: var(--seed-font-weight-regular); font-size: var(--seed-font-size-t3); }
.drop-file { font-size: var(--seed-font-size-t3); overflow-wrap: anywhere; }
.dropzone progress { flex: 1; min-width: 120px; height: 8px; accent-color: var(--seed-color-bg-neutral-solid); }
.upload-note { font-size: var(--seed-font-size-t3); color: var(--fg-muted); }
.build-list { display: grid; gap: 10px; max-width: 900px; }
.build-row { box-shadow: inset 0 0 0 1px var(--border); border-radius: var(--seed-radius-r3); padding: 14px 16px; display: grid; gap: 8px; min-width: 0; }
.build-row.expired, .build-row.failed { opacity: .7; }
.build-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: var(--seed-font-size-t5); }
.build-name { font-weight: var(--seed-font-weight-medium); overflow-wrap: anywhere; min-width: 0; }
.build-meta { display: flex; gap: 6px 12px; align-items: center; flex-wrap: wrap; font-size: var(--seed-font-size-t3); color: var(--fg-faint); overflow-wrap: anywhere; }
.build-meta a { color: var(--accent); }

.scrim { display: none; }

@media (max-width: 700px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); z-index: 20;
    transform: translateX(-100%); transition: transform var(--seed-duration-d4) var(--seed-timing-function-easing);
  }
  .shell.nav-open .sidebar { transform: none; box-shadow: var(--shadow); }
  .shell.nav-open .scrim { display: block; position: fixed; inset: 0; background: var(--overlay); z-index: 15; }
  .menu-btn { display: inline-grid; }
  .panel .menu-btn { display: none; }
  .panel .view-header { padding-left: var(--seed-dimension-x4); }
  .panel { position: fixed; inset: 0; width: auto; z-index: 25; box-shadow: none; }
  .panel-resizer { display: none; }
  .view-header { padding: 0 8px 0 4px; gap: 6px; }
  .msg { padding-left: 12px; padding-right: 12px; }
  .actions { right: 8px; }
  .composer { padding: 0 10px 10px; }
  .board { padding: 16px 16px 32px; }
  .board-grid { grid-template-columns: minmax(0, 1fr); }
  .dropzone { padding: 14px; }
  .view-header .sub { display: none; }
  .doc-inner { padding: 20px 16px 32px 34px; }
  .blk { margin-left: -26px; }
  .blk-gutter { width: 26px; }
  .handle { opacity: .5; }
  input.doc-title { font-size: var(--seed-font-size-t9); line-height: var(--seed-line-height-t9); }
  .doc-icon { font-size: 28px; }
}

/* emoji, reactions, nudges */
img.emoji { display: inline-block; height: 1.375em; width: auto; max-width: 2.75em; object-fit: contain; vertical-align: -0.3em; }
.seed-reaction-button img.emoji { height: 16px; max-width: 32px; vertical-align: 0; }
.actions img.emoji { height: 18px; vertical-align: -3px; }
.emoji-gone { font-family: var(--mono); font-size: .85em; color: var(--fg-muted); }
.reactions { align-items: center; }
.ico { display: block; }
.seed-reaction-button.react-add { color: var(--fg-muted); padding-inline: var(--seed-dimension-x2); }
.seed-reaction-button.react-add:hover { color: var(--fg); }
.msg .reactions .react-add { opacity: 0; }
.msg:hover .reactions .react-add, .msg:focus-within .reactions .react-add { opacity: 1; }
@media not all and (hover: hover) { .msg .reactions .react-add { opacity: 1; } }
.reaction-more { border: 0; background: none; color: var(--fg-muted); font-size: var(--seed-font-size-t2); font-weight: var(--seed-font-weight-bold); padding: 0 4px; border-radius: var(--seed-radius-r1); }
.reaction-more:hover { background: var(--bg-hover); color: var(--fg); }
.card-social { display: flex; flex-wrap: wrap; gap: var(--seed-dimension-x1_5); align-items: center; }
.card-social .spacer { flex: 1; }
.card-comments {
  border: 0; background: none; border-radius: var(--seed-radius-full); height: var(--seed-dimension-x8); padding: 0 var(--seed-dimension-x2);
  color: var(--fg-muted); font-size: var(--seed-font-size-t3); font-weight: var(--seed-font-weight-bold);
}
.card-comments:hover { background: var(--bg-hover); color: var(--fg); }
.nudge-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: var(--seed-font-size-t3); }

.emoji-picker {
  position: fixed; z-index: 30; width: min(352px, calc(100vw - 16px)); height: min(420px, calc(100dvh - 16px));
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 6px; padding: 10px;
  background: var(--bg-float); border-radius: var(--seed-radius-r4); box-shadow: var(--shadow), inset 0 0 0 1px var(--divider);
}
.emoji-picker .emoji-search { min-height: 36px; }
.emoji-tabs { display: flex; gap: 2px; }
.emoji-tabs button {
  border: 0; background: none; border-radius: var(--seed-radius-r2); padding: 4px 10px; min-height: 30px;
  font-size: var(--seed-font-size-t3); font-weight: var(--seed-font-weight-bold); color: var(--fg-muted);
}
.emoji-tabs button:hover { background: var(--bg-hover); color: var(--fg); }
.emoji-body { overflow-y: auto; overscroll-behavior: contain; position: relative; }
.emoji-sec + .emoji-sec { margin-top: 8px; }
.emoji-sec-title {
  position: sticky; top: 0; z-index: 1; background: var(--bg-float); padding: 4px 2px;
  font-size: var(--seed-font-size-t2); font-weight: var(--seed-font-weight-bold); color: var(--fg-muted);
}
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 2px; }
.emoji-grid button { border: 0; background: none; height: 38px; border-radius: var(--seed-radius-r2); font-size: 22px; line-height: 1; padding: 0; display: grid; place-items: center; }
.emoji-grid button:hover, .emoji-grid button:focus-visible { background: var(--bg-hover); }
.emoji-grid img.emoji { height: 26px; max-width: 34px; vertical-align: 0; }
.emoji-none { color: var(--fg-faint); font-size: var(--seed-font-size-t3); padding: 6px 2px; }
.emoji-foot { display: flex; justify-content: flex-end; padding-top: 4px; box-shadow: inset 0 1px 0 var(--divider); }

.emoji-drop {
  display: grid; gap: 4px; cursor: pointer; border: 2px dashed var(--border); border-radius: var(--seed-radius-r4); padding: var(--seed-dimension-x5);
  font-weight: var(--seed-font-weight-bold);
}
.emoji-drop u { color: var(--accent); }
.emoji-drop .faint { font-weight: var(--seed-font-weight-regular); font-size: var(--seed-font-size-t3); }
.emoji-drop.over { border-color: var(--accent); background: var(--accent-soft); }
.emoji-preview { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.emoji-preview[hidden] { display: none; }
.emoji-sample { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; font-size: var(--seed-font-size-t2); }
.emoji-sample img { object-fit: contain; }
.emoji-sample.big img {
  background: repeating-conic-gradient(var(--chip-bg) 0 25%, transparent 0 50%) 0 0 / 12px 12px; border-radius: var(--seed-radius-r2);
}
.emoji-how { font-size: var(--seed-font-size-t3); flex-basis: 100%; }
.team-emoji .seed-list-item__prefix img.emoji { height: 28px; max-width: 40px; }