/* Colours, fonts, the page background and the base element styles come from theme.css (tokens --colab-*). */
/* Links and link-buttons must click, not start a native drag when the mouse moves a little while pressed. */
a, sl-button::part(base) { -webkit-user-drag: none; }
sl-button::part(base) { user-select: none; }
.status { color: var(--colab-muted); margin: var(--sl-spacing-small) 0; }
.error, .err { color: var(--colab-danger); }
.banner { margin: var(--sl-spacing-small) var(--sl-spacing-large); }

/* D7: главная (design-system §4.6): the card is a link as a whole (a stretched link), «⋯» sits above it. */
.home { box-sizing: border-box; width: min(72rem, 100%); margin: 0 auto; padding: var(--colab-space-6); }
.ws-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--colab-space-4); grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); }
.ws-card {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr; column-gap: var(--colab-space-3); align-items: start;
  box-sizing: border-box; min-height: 8.5rem; padding: var(--colab-space-4); background: var(--colab-surface); border: 1px solid var(--colab-line); border-radius: var(--colab-r-md);
  transition: border-color var(--colab-dur) var(--colab-ease), box-shadow var(--colab-dur) var(--colab-ease);
}
.ws-card:not(.ws-skel):hover { border-color: var(--colab-line-strong); box-shadow: var(--colab-shadow); }
.ws-card:has(.ws-link:focus-visible) { outline: 3px solid var(--colab-focus); outline-offset: 2px; }
.ws-kind { grid-row: 1; grid-column: 1; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--colab-r); background: var(--colab-accent-soft); color: var(--colab-accent-ink); font-size: 1rem; }
.ws-name { grid-row: 1; grid-column: 2; align-self: center; min-width: 0; margin: 0; font-size: var(--colab-h3); line-height: 1.35; font-weight: 650; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: break-word; }
.ws-link { color: var(--colab-text); text-decoration: none; }
.ws-link:hover { color: var(--colab-text); }
.ws-link:focus-visible { outline: none; }
/* The whole card answers the click of its title link. */
.ws-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--colab-r-md); }
.ws-desc { grid-row: 2; grid-column: 1 / -1; margin: var(--colab-space-2) 0 0; color: var(--colab-muted); font-size: var(--colab-text-sm); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: break-word; }
.ws-meta { grid-row: 3; grid-column: 1 / 3; align-self: end; margin: var(--colab-space-3) 0 0; color: var(--colab-faint); font-size: var(--colab-text-sm); font-variant-numeric: tabular-nums; }
.ws-menu { grid-row: 1; grid-column: 3; position: relative; z-index: 2; margin: calc(-1 * var(--colab-space-1)) calc(-1 * var(--colab-space-2)) 0 0; }
.ws-menu-btn { font-size: 1rem; color: var(--colab-muted); }
.ws-go { grid-row: 3; grid-column: 3; align-self: end; margin-bottom: 0.125rem; color: var(--colab-faint); font-size: 1rem; transition: color var(--colab-dur) var(--colab-ease), transform var(--colab-dur) var(--colab-ease); }
.ws-card:hover .ws-go { color: var(--colab-accent); transform: translateX(2px); }
@media (pointer: coarse) { .ws-menu-btn::part(base) { min-width: 2.75rem; min-height: 2.75rem; } }
.ws-skel { display: grid; grid-template-columns: 1fr; gap: var(--colab-space-3); align-content: start; }
.home > .colab-plate { margin-bottom: var(--colab-space-4); }
/* Task 074: «Мои» / «Доступные мне», the role as a badge before the counts. */
.ws-section + .ws-section { margin-top: var(--colab-space-8); }
.ws-start-block { margin-top: var(--colab-space-2); }
.ws-start-title { margin: 0; color: var(--colab-text); font-size: var(--colab-h3); line-height: 1.35; font-weight: 650; }
.ws-steps { box-sizing: border-box; width: min(36rem, 100%); margin: var(--colab-space-4) 0 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: var(--colab-space-4); text-align: left; }
.ws-step { counter-increment: step; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--colab-space-2) var(--colab-space-3); align-items: start; font-size: var(--colab-text-sm); }
.ws-step::before { content: counter(step); display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--colab-soft); color: var(--colab-text); font-weight: 650; }
.ws-step > * { grid-column: 2; }
.ws-step > .ws-step-text { color: var(--colab-muted); }
.ws-step > .ws-step-text strong { color: var(--colab-text); font-size: inherit; }
.ws-step > sl-button { justify-self: start; }
.ws-prompt { display: flex; flex-wrap: wrap; gap: var(--colab-space-2); align-items: center; justify-content: space-between; padding: var(--colab-space-2) var(--colab-space-3); background: var(--colab-soft); border-radius: var(--colab-r); color: var(--colab-text); }
.ws-prompt q { quotes: "«" "»"; min-width: 0; overflow-wrap: anywhere; }
.ws-connect-link { display: flex; align-items: center; gap: var(--colab-space-2); margin: var(--colab-space-6) 0 0; font-size: var(--colab-text-sm); color: var(--colab-muted); }
.ws-section-title { margin: 0 0 var(--colab-space-3); font-size: var(--colab-h3); line-height: 1.35; font-weight: 650; }
.ws-section-empty { margin: 0; color: var(--colab-faint); }
.ws-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--colab-space-1) var(--colab-space-2); }
@media (max-width: 639.98px) { .home { padding: var(--colab-space-4); } }
/* Task 077c: «Приглашения» above «Мои»: a card with the answer buttons, not a link. */
.inv-section { margin-bottom: var(--colab-space-8); }
.inv-section + .ws-section { margin-top: 0; }
.inv-list { grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr)); }
.inv-card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--colab-space-3); row-gap: var(--colab-space-3); align-items: start; box-sizing: border-box; padding: var(--colab-space-4); background: var(--colab-surface); border: 1px solid var(--colab-line); border-left: 3px solid var(--colab-accent); border-radius: var(--colab-r-md); }
.inv-body { min-width: 0; }
.inv-title { margin: 0; font-size: var(--colab-h3); line-height: 1.35; font-weight: 650; overflow-wrap: anywhere; }
.inv-body .ws-meta { margin-top: var(--colab-space-2); }
.inv-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--colab-space-2); }
.inv-problem { margin: var(--colab-space-2) 0 0; color: var(--colab-danger); font-size: var(--colab-text-sm); }
@media (pointer: coarse) { .inv-actions sl-button::part(base) { min-height: 2.75rem; } }

/* Task 084: the journal is a drawer opened from the bar, never a column: the data take the whole width. */
.layout { padding: var(--colab-space-6); }
@media (max-width: 639.98px) { .layout { padding: var(--colab-space-4); } }
.layout > * { min-width: 0; }
.type-tabs { display: flex; gap: var(--colab-space-5); height: 2.5rem; margin-bottom: var(--colab-space-3); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--colab-line); }
.type-tabs::-webkit-scrollbar { display: none; }
.type-tabs .ab-tab { margin-bottom: -1px; }
/* D3: таблица — the frame, the header, cells and the list of cards on a phone are in theme.css (.colab-tbl*), shared with the widgets. */
/* The table scrolls inside its frame, so its header stays in sight on a long table (the bar and the type tabs are above). */
.table-wrap { --colab-tbl-max-h: max(20rem, calc(100dvh - 15rem)); }
.table-wrap.is-empty .colab-tbl-scroll { display: none; }
.table-wrap.is-empty .colab-tbl-empty { border: 1px solid var(--colab-line); border-radius: var(--colab-r-md); background: var(--colab-surface); }
/* D7: until the workspace is loaded the table is a skeleton of five rows (§4.17); a failed load is an empty state with «Повторить». */
.table-skel { display: grid; border: 1px solid var(--colab-line); border-radius: var(--colab-r-md); background: var(--colab-surface); }
.skel-row { display: grid; grid-template-columns: 3fr 1fr 2fr; gap: var(--colab-space-6); padding: 0.875rem 0.75rem; border-top: 1px solid var(--colab-line); }
.skel-row:first-child { border-top: 0; border-bottom: 1px solid var(--colab-line-strong); }
.skel-row:first-child .colab-skel { height: 0.625rem; }
.j-skel { display: grid; gap: var(--colab-space-2); }
/* A cell is a button that opens its editor: the hover is a quiet frame inside the cell, the focus is the ring of the theme. */
.cell-view { display: block; min-height: 1.5em; margin: -0.125rem -0.375rem; padding: 0.125rem 0.375rem; border-radius: var(--colab-r-sm); cursor: text; }
.cell-view.readonly { cursor: default; }
.cell-view:not(.readonly):hover { box-shadow: inset 0 0 0 1px var(--colab-line-strong); background: var(--colab-surface); }
.cell-view:focus-visible { outline: 3px solid var(--colab-focus); outline-offset: 0; }
.k-num .cell-view, .k-num .cell-editor::part(input) { text-align: right; }
@container (max-width: 39.99rem) { .k-num .cell-view { text-align: left; } }
td.invalid .cell-view { box-shadow: inset 0 0 0 1px var(--colab-danger); }
/* The editor takes the width of the cell (fixed when it opens), not its own: the column does not jump. */
td.editing { padding-block: 0.375rem; }
td .cell-editor { display: block; width: 100%; min-width: 0; }
/* A long JSON in a cell grows with its text only up to a share of the window, the rest scrolls inside. */
td sl-textarea.cell-editor::part(textarea) { max-height: 60vh; overflow-y: auto; }
.cell-hint { margin-top: 0.25rem; color: var(--colab-faint); font-size: var(--colab-text-xs); line-height: 1.3; white-space: normal; }
td > .err { display: flex; gap: 0.25rem; align-items: flex-start; margin-top: 0.25rem; color: var(--colab-danger); font-size: var(--colab-text-sm); line-height: 1.35; white-space: normal; }
td > .err sl-icon { flex: none; margin-top: 0.1rem; }
/* A message of the row (a conflict, an error without a field): a warning strip under «⋯», with «Повторить». */
.row-msg:empty { display: none; }
.row-msg { display: flex; flex-wrap: wrap; gap: var(--colab-space-2); align-items: center; min-width: 14rem; max-width: 22rem; margin-top: var(--colab-space-1); padding: var(--colab-space-2) var(--colab-space-3); border-left: 3px solid var(--colab-warning); border-radius: var(--colab-r-sm); background: var(--colab-warning-soft); color: var(--colab-text); font-size: var(--colab-text-sm); white-space: normal; text-align: left; }
.more { margin: var(--colab-space-3) 0; }
/* D6: «Новая строка» — the dialog, the labels and the errors of the fields are in theme.css (.colab-dialog), shared with colab-form. */
.add-form { display: grid; gap: var(--colab-space-4); }
.add-form .field { min-width: 0; }
.add-form sl-details .field + .field { margin-top: var(--colab-space-4); }
.add-form .form-msg { display: flex; gap: var(--colab-space-2); align-items: flex-start; padding: var(--colab-space-2) var(--colab-space-3); border-left: 3px solid var(--colab-danger); border-radius: var(--colab-r-sm); background: var(--colab-danger-soft); color: var(--colab-text); font-size: var(--colab-text-sm); }
.add-form .form-msg sl-icon { flex: none; margin-top: 0.15rem; color: var(--colab-danger); }

/* The journal (design-system §4.8): entries are small cards, the agent is a «Claude» chip; only entries new since the page opened are lit. */
.journal { background: var(--colab-surface); border: 1px solid var(--colab-line); border-radius: var(--colab-r-md); padding: var(--colab-space-4); }
.journal h2 { font-size: var(--colab-h3); line-height: 1.35; font-weight: 650; margin: 0 0 var(--colab-space-3); }
.journal .status { margin: 0; color: var(--colab-faint); }
.journal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--colab-space-2); max-height: calc(100vh - 12rem); overflow-y: auto; }
.j-entry { padding: var(--colab-space-2) var(--colab-space-3); background: var(--colab-surface); border: 1px solid var(--colab-line); border-radius: var(--colab-r); font-size: var(--colab-text-sm); transition: background-color var(--colab-dur-slow) ease-out, border-color var(--colab-dur-slow) ease-out; }
.j-entry.j-new { background: var(--colab-hl-bg); border-color: var(--colab-hl-ring); }
.j-head { display: flex; gap: var(--colab-space-2); justify-content: space-between; align-items: baseline; }
.j-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.j-claude { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0 0.4rem; border-radius: var(--colab-r-pill); background: color-mix(in srgb, var(--colab-hl-bg) 50%, transparent); color: var(--colab-agent); font-weight: 600; }
.j-head time { flex: none; color: var(--colab-muted); font-size: var(--colab-text-xs); }
.j-comment { margin-top: 0.125rem; font-size: var(--colab-text-base); overflow-wrap: break-word; }
.j-overrides summary { cursor: pointer; }
.j-overrides ul { margin: 0.25rem 0 0; padding-left: 1.125rem; }
.j-overrides { margin-top: 0.125rem; color: var(--colab-badge-amber-fg, var(--colab-faint)); font-size: var(--colab-text-xs); }
.j-count { margin-top: 0.125rem; color: var(--colab-faint); font-size: var(--colab-text-xs); }
/* Task 095: «Откатить» on the line of the count, at its right; small so the cards stay compact. */
.j-foot { display: flex; gap: var(--colab-space-2); justify-content: space-between; align-items: center; min-height: 1.5rem; }
.j-foot .j-count { margin-top: 0; }
.j-revert { flex: none; margin-right: calc(-1 * var(--colab-space-2)); }
.j-revert::part(base) { font-size: var(--colab-text-xs); }
.journal-alert { margin-bottom: var(--colab-space-3); }
tr.row-opened > td, .colab-tbl-cards > tbody > tr.row-opened { background: var(--colab-accent-soft); transition: background-color var(--colab-dur-slow) ease-out; }
.journal-alert-text { overflow-wrap: break-word; }
.journal-alert-actions { display: flex; flex-wrap: wrap; gap: var(--colab-space-2); margin-top: var(--colab-space-2); }
.journal-drawer { --size: min(24rem, 100vw); }
.journal-drawer[placement="bottom"] { --size: 75dvh; }
.journal-drawer .journal { border: 0; padding: 0; }
.journal-drawer .journal > h2 { display: none; }
.journal-drawer .journal-list { max-height: none; }

.agent-hl { background: var(--colab-hl-bg); box-shadow: 0 0 0 2px var(--colab-hl-ring); }
tr, .kb-card { transition: background-color var(--colab-dur-slow) ease-out, box-shadow var(--colab-dur-slow) ease-out; }
.hl-tip { margin-right: var(--sl-spacing-x-small); color: var(--colab-agent); }

/* D4: канбан. Колонки листаются и прилипают к краю (scroll-snap), тень у края говорит, что колонки есть дальше.
   Карточка пропускает свайп и масштабирование (touch-action: manipulation): палец берёт её за ручку или после долгого нажатия (kanban.ts). */
.kb-frame { position: relative; }
.kb-frame::before, .kb-frame::after { content: ""; position: absolute; top: 0; bottom: 0; width: var(--colab-space-6); z-index: 1; pointer-events: none; opacity: 0; transition: opacity var(--colab-dur) var(--colab-ease); }
.kb-frame::before { left: 0; background: linear-gradient(to right, color-mix(in srgb, var(--colab-text) 14%, transparent), transparent); }
.kb-frame::after { right: 0; background: linear-gradient(to left, color-mix(in srgb, var(--colab-text) 14%, transparent), transparent); }
.kb-frame.more-left::before, .kb-frame.more-right::after { opacity: 1; }
.kb-board { display: flex; gap: var(--colab-space-4); overflow-x: auto; align-items: flex-start; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-bottom: var(--colab-space-2); }
.kb-board.is-dragging { scroll-snap-type: none; }
.kb-col { flex: 0 0 min(85vw, 18rem); box-sizing: border-box; scroll-snap-align: start; padding: var(--colab-space-3); border-radius: var(--colab-r-md); background: var(--colab-soft); transition: box-shadow var(--colab-dur) var(--colab-ease); }
/* The colour of the column (x-colors) is a band on top, clipped by the rounded corners: no «bracket» of a border. */
.kb-col[class*="hc-"] { background: linear-gradient(var(--kb-edge) 0 0) top / 100% 3px no-repeat, var(--colab-soft); }
.kb-col.kb-drop { box-shadow: inset 0 0 0 2px var(--colab-accent); }
.kb-col-head { display: flex; gap: var(--colab-space-2); align-items: center; margin-bottom: var(--colab-space-3); min-width: 0; }
.kb-col h3 { margin: 0; min-width: 0; font-size: var(--colab-h3); line-height: 1.35; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-cards { display: grid; gap: var(--colab-space-2); }
.kb-empty { display: grid; place-items: center; min-height: 4.5rem; padding: var(--colab-space-3); border: 1.5px dashed var(--colab-line-strong); border-radius: var(--colab-r); color: var(--colab-faint); font-size: var(--colab-text-sm); text-align: center; }
.kb-col.kb-drop .kb-empty { border-color: var(--colab-accent); color: var(--colab-accent); }
.kb-card { display: grid; gap: var(--colab-space-2); min-width: 0; padding: var(--colab-space-3); background: var(--colab-surface); border: 1px solid var(--colab-line); border-radius: var(--colab-r-md); box-shadow: var(--colab-shadow-sm); cursor: grab; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.kb-card:hover { border-color: var(--colab-line-strong); box-shadow: var(--colab-shadow); }
.kb-card.readonly { cursor: pointer; user-select: text; -webkit-user-select: text; }
.kb-card:focus-visible { outline: 3px solid var(--colab-focus); outline-offset: 2px; }
.kb-card.dragging { position: relative; z-index: 3; cursor: grabbing; opacity: .92; box-shadow: var(--colab-shadow-lg); pointer-events: none; transition: none; }
.kb-card-head { display: flex; align-items: flex-start; gap: var(--colab-space-1); min-width: 0; }
.kb-title { flex: 1; min-width: 0; font-size: var(--colab-text-base); line-height: 1.4; font-weight: 650; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kb-grip { display: none; flex: none; margin: 0 0 0 calc(-1 * var(--colab-space-2)); padding: 0 var(--colab-space-1); color: var(--colab-faint); font-size: 1rem; cursor: grab; touch-action: none; }
.kb-move { flex: none; margin: calc(-1 * var(--colab-space-1)) calc(-1 * var(--colab-space-2)) 0 0; }
.kb-move-btn { color: var(--colab-muted); font-size: 1rem; }
.kb-badges { display: flex; flex-wrap: wrap; gap: var(--colab-space-1); }
.kb-fields { display: grid; grid-template-columns: fit-content(40%) minmax(0, 1fr); gap: var(--colab-space-1) var(--colab-space-3); margin: 0; font-size: var(--colab-text-sm); line-height: 1.45; }
.kb-fields dt { color: var(--colab-muted); }
.kb-fields dd { margin: 0; color: var(--colab-text); overflow-wrap: anywhere; }
/* A long text (or a long label) takes the whole width of the card: the label above, the value below, at most 4 lines. */
.kb-fields dt.wide { grid-column: 1 / -1; margin-top: var(--colab-space-1); }
.kb-fields dd.wide { grid-column: 1 / -1; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.card-msg { display: flex; flex-wrap: wrap; align-items: center; gap: var(--colab-space-2); padding: var(--colab-space-2) var(--colab-space-3); border-left: 3px solid var(--colab-danger); border-radius: var(--colab-r-sm); background: var(--colab-danger-soft); color: var(--colab-text); font-size: var(--colab-text-sm); user-select: text; -webkit-user-select: text; }
.kb-error { display: block; max-width: 44rem; }
.kb-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* A finger needs the grip (a swipe over the card scrolls the board) and 44 px targets. */
@media (pointer: coarse) {
  .kb-grip { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; margin: calc(-1 * var(--colab-space-3)) 0 calc(-1 * var(--colab-space-3)) calc(-1 * var(--colab-space-3)); padding: 0; }
  .kb-move { margin: calc(-1 * var(--colab-space-3)) calc(-1 * var(--colab-space-3)) calc(-1 * var(--colab-space-3)) 0; }
  .kb-move-btn::part(base) { min-width: 2.75rem; min-height: 2.75rem; }
}
/* On a phone the board runs to the screen edges, so the next column shows beside the current one. */
@media (max-width: 639.98px) {
  .kb-frame { margin-inline: calc(-1 * var(--colab-space-4)); }
  .kb-board { padding-inline: var(--colab-space-4); scroll-padding-inline: var(--colab-space-4); gap: var(--colab-space-3); }
}

/* D7: справка — a text column of 44rem (design-system §1.6), the contents above it; on a wide screen a sticky column on the left. */
.help { box-sizing: border-box; width: min(44rem, 100%); margin: 0 auto; padding: var(--colab-space-6) var(--colab-space-6) var(--colab-space-12); color: var(--colab-text); font-size: var(--colab-text-md); line-height: 1.6; }
.help-toc { margin-bottom: var(--colab-space-6); padding: var(--colab-space-3) var(--colab-space-4); background: var(--colab-surface); border: 1px solid var(--colab-line); border-radius: var(--colab-r-md); }
.help-kicker { margin: 0 0 var(--colab-space-1); color: var(--colab-faint); font-size: var(--colab-text-xs); line-height: 1.4; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.help-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.125rem; }
.help-toc a { display: block; padding: 0.25rem 0.5rem; margin-inline: -0.5rem; border-radius: var(--colab-r-sm); color: var(--colab-muted); font-size: var(--colab-text-base); line-height: 1.4; text-decoration: none; }
.help-toc a:hover { color: var(--colab-text); background: var(--colab-soft); }
@media (min-width: 1100px) {
  .help { width: min(62rem, 100%); display: grid; grid-template-columns: 13rem minmax(0, 44rem); gap: var(--colab-space-8); justify-content: center; }
  .help-toc { position: sticky; top: calc(3.5rem + var(--colab-space-6)); align-self: start; margin: 0; padding: 0; background: none; border: 0; }
}
@media (max-width: 639.98px) { .help { padding: var(--colab-space-4) var(--colab-space-4) var(--colab-space-8); } }
.help-text { min-width: 0; }
.help-text section { scroll-margin-top: calc(3.5rem + var(--colab-space-4)); }
.help-text section + section { margin-top: var(--colab-space-8); }
.help-text h2 { margin: 0 0 var(--colab-space-3); font-size: var(--colab-h2); line-height: 1.3; font-weight: 700; letter-spacing: -0.015em; }
.help-text p { margin: 0 0 var(--colab-space-3); }
.help-text ul { display: grid; gap: var(--colab-space-2); margin: 0 0 var(--colab-space-3); padding-left: 1.25rem; }
.help-table { width: 100%; margin-bottom: var(--colab-space-4); border-collapse: separate; border-spacing: 0; border: 1px solid var(--colab-line); border-radius: var(--colab-r-md); background: var(--colab-surface); font-size: var(--colab-text-base); line-height: 1.5; }
.help-table th { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--colab-line-strong); color: var(--colab-faint); font-size: var(--colab-text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; text-align: left; }
.help-table td { padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--colab-line); vertical-align: top; overflow-wrap: break-word; }
.help-table tr:last-child td { border-bottom: 0; }
.help-table td:first-child { width: 45%; font-weight: 600; }

[hidden] { display: none !important; }

/* Colours chosen in the schema (x-colors, D-042): the top edge of a kanban column and a badge in the table.
   A badge without a colour (variant="neutral", also counters) is the neutral pair; the colour comes only from the schema. */
sl-badge[variant="neutral"]::part(base) { background: var(--colab-badge-neutral-bg); color: var(--colab-badge-neutral-fg); border-color: var(--colab-badge-neutral-border); }
.kb-col.hc-blue { --kb-edge: var(--colab-badge-blue-edge); }
sl-badge.hc-blue::part(base) { background: var(--colab-badge-blue-bg); color: var(--colab-badge-blue-fg); border-color: transparent; }
.kb-col.hc-green { --kb-edge: var(--colab-badge-green-edge); }
sl-badge.hc-green::part(base) { background: var(--colab-badge-green-bg); color: var(--colab-badge-green-fg); border-color: transparent; }
.kb-col.hc-amber { --kb-edge: var(--colab-badge-amber-edge); }
sl-badge.hc-amber::part(base) { background: var(--colab-badge-amber-bg); color: var(--colab-badge-amber-fg); border-color: transparent; }
.kb-col.hc-red { --kb-edge: var(--colab-badge-red-edge); }
sl-badge.hc-red::part(base) { background: var(--colab-badge-red-bg); color: var(--colab-badge-red-fg); border-color: transparent; }
.kb-col.hc-violet { --kb-edge: var(--colab-badge-violet-edge); }
sl-badge.hc-violet::part(base) { background: var(--colab-badge-violet-bg); color: var(--colab-badge-violet-fg); border-color: transparent; }
.kb-col.hc-teal { --kb-edge: var(--colab-badge-teal-edge); }
sl-badge.hc-teal::part(base) { background: var(--colab-badge-teal-bg); color: var(--colab-badge-teal-fg); border-color: transparent; }
.kb-col.hc-orange { --kb-edge: var(--colab-badge-orange-edge); }
sl-badge.hc-orange::part(base) { background: var(--colab-badge-orange-bg); color: var(--colab-badge-orange-fg); border-color: transparent; }
.kb-col.hc-pink { --kb-edge: var(--colab-badge-pink-edge); }
sl-badge.hc-pink::part(base) { background: var(--colab-badge-pink-bg); color: var(--colab-badge-pink-fg); border-color: transparent; }
.kb-col.hc-indigo { --kb-edge: var(--colab-badge-indigo-edge); }
sl-badge.hc-indigo::part(base) { background: var(--colab-badge-indigo-bg); color: var(--colab-badge-indigo-fg); border-color: transparent; }
.kb-col.hc-lime { --kb-edge: var(--colab-badge-lime-edge); }
sl-badge.hc-lime::part(base) { background: var(--colab-badge-lime-bg); color: var(--colab-badge-lime-fg); border-color: transparent; }
.kb-col.hc-neutral { --kb-edge: var(--colab-badge-neutral-edge); }
sl-badge.hc-neutral::part(base) { background: var(--colab-badge-neutral-bg); color: var(--colab-badge-neutral-fg); border-color: var(--colab-badge-neutral-border); }

/* D5: страница. A page view (archetype "page") is laid out by .colab-stack / .colab-row of colab-ui.js (client/widgets/core.ts),
   the same rules an agent view gets; here only the text of its paragraphs. */
.page p, .page ul { margin: 0 0 var(--colab-space-2); }
/* Task 073: a custom view runs in a sandboxed iframe under the bar and takes the whole place (as its own page did before). */
.layout.frame-mode { padding: 0; }
.view-frame { display: block; width: 100%; height: calc(100dvh - 3.5rem - 2.75rem); border: 0; background: var(--colab-bg); }
.view-frame-wait { min-height: 50vh; }
.frame-wrap > .colab-blank { margin: var(--colab-space-6); }

/* Task 101: the search dialog — a field, the status, the found records (a listbox; the focus stays in the field). Near the
   top on a wide screen (the list grows downwards), the whole screen on a phone (the keyboard covers the bottom). */
sl-dialog.search-dialog { --width: 38rem; }
sl-dialog.search-dialog::part(base) { align-items: flex-start; }
sl-dialog.search-dialog::part(panel) { margin-top: 10vh; max-height: 80vh; }
.search-field { display: flex; align-items: center; gap: var(--colab-space-2); box-sizing: border-box; height: 2.5rem; padding: 0 var(--colab-space-3); border: 1px solid var(--colab-line-field); border-radius: var(--colab-r); background: var(--colab-surface); color: var(--colab-muted); cursor: text; }
.search-field:focus-within { border-color: var(--colab-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--colab-accent) 25%, transparent); }
.search-field sl-icon { flex: none; font-size: 1rem; }
.search-input { flex: 1 1 auto; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; outline: none; background: none; color: var(--colab-text); font: 400 var(--colab-text-md) / 1.4 var(--colab-font); }
.search-input::placeholder { color: var(--colab-faint); opacity: 1; }
.search-input::-webkit-search-cancel-button { cursor: pointer; }
.search-status { margin: var(--colab-space-2) 0 0; color: var(--colab-muted); font-size: var(--colab-text-sm); }
.search-status:empty { display: none; }
.search-list { list-style: none; margin: var(--colab-space-2) 0 0; padding: 0; max-height: min(55vh, 28rem); overflow-y: auto; }
.search-list:empty { display: none; }
.search-list[aria-busy="true"] { opacity: 0.6; }
.search-item { display: grid; gap: 0.125rem; padding: var(--colab-space-2) var(--colab-space-3); border-left: 3px solid transparent; border-radius: var(--colab-r-sm); cursor: pointer; }
.search-item + .search-item { margin-top: 1px; }
.search-item:hover { background: var(--colab-soft); }
.search-item[aria-selected="true"] { border-left-color: var(--colab-accent); background: var(--colab-soft); }
.search-item-head { display: flex; gap: var(--colab-space-2); align-items: baseline; min-width: 0; }
.search-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--colab-text); font-weight: 600; font-size: var(--colab-text-base); }
.search-type { flex: none; margin-left: auto; color: var(--colab-faint); font-size: var(--colab-text-xs); }
.search-frag { color: var(--colab-muted); font-size: var(--colab-text-sm); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.search-item mark { padding: 0 1px; border-radius: 2px; background: var(--colab-accent-soft); color: var(--colab-accent-ink); font-weight: 600; }
.search-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; margin: var(--colab-space-3) 0 0; color: var(--colab-faint); font-size: var(--colab-text-xs); }
.search-keys kbd { padding: 0 0.3125rem; border: 1px solid var(--colab-line-strong); border-radius: var(--colab-r-sm); background: var(--colab-soft); color: var(--colab-muted); font-size: 0.6875rem; line-height: 1.4; }
@media (max-width: 639.98px) {
  sl-dialog.search-dialog::part(panel) { margin-top: 0; width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; padding-bottom: 0; }
  .search-list { max-height: none; overflow: visible; }
}
@media (max-width: 639.98px), (pointer: coarse) { .search-keys { display: none; } }