/*
 * colab theme: the visual language of the landing (ui/landing) for the internal UI, the account page and the widgets.
 * One source (.dev/design/design-system.md §1, §2, §5): the pages link it right after the Shoelace themes, colab-ui.js
 * puts the same text into <style id="colab-ui-style">. No external resources.
 *
 * Selectors are chosen so the order of the stylesheets does not matter: in an agent view colab-ui.js may add the
 * Shoelace themes after this text. `html:root` outranks `:root, .sl-theme-light` of light.css, `html:root.sl-theme-dark`
 * outranks `.sl-theme-dark` of dark.css. Element styles are in :where(), so the CSS of a page always wins over them.
 * The dark theme follows the class .sl-theme-dark only (never prefers-color-scheme), so a page with
 * <meta name="color-scheme" content="light"> stays light.
 */

/* --- 1. Tokens: light (docs/brand/tokens.css, task 092: the petrol accent) ----------------------------------- */
:root {
  --colab-bg: #f8fafc;
  --colab-surface: #ffffff;
  --colab-soft: #f1f5f9;
  --colab-line: #e2e8f0;
  --colab-line-strong: #cbd5e1;
  /* The edge of a field, a checkbox, a radio: >= 3:1 to the surface (WCAG 1.4.11). */
  --colab-line-field: #8291a5;
  --colab-text: #0f172a;
  --colab-muted: #475569;
  --colab-faint: #56657a;
  --colab-header-bg: rgb(255 255 255 / 0.82);
  --colab-overlay: rgb(15 23 42 / 0.45);
  --colab-accent: #026675;
  --colab-accent-hover: #005461;
  --colab-accent-text: #ffffff;
  --colab-accent-soft: #ddf5fb;
  --colab-accent-ink: #004550;
  --colab-info: #026675;
  --colab-info-soft: #ddf5fb;
  --colab-success: #15803d;
  --colab-success-soft: #dcfce7;
  --colab-warning: #684000;
  --colab-warning-soft: #fef3c7;
  --colab-danger: #a91228;
  --colab-danger-soft: #fee2e2;
  --colab-danger-fill: #d52238;
  --colab-agent: #6e36c7;
  --colab-hl-bg: #f2edff;
  --colab-hl-ring: #9167ea;
  /* Only the logo drawn inline (docs/brand §2): never a button, a link, a status or a badge. */
  --colab-brand: #db4f01;
  --colab-brand-robot: #1e293b;

  /* Badge palette (x-colors, D-042, docs/brand §3): one OKLCH recipe for every tone, bg L 95.5%, ink L 44%; -edge is the top edge of a kanban column. */
  --colab-badge-blue-bg: #e7f1ff; --colab-badge-blue-fg: #174f9e; --colab-badge-blue-edge: #4289ef;
  --colab-badge-green-bg: #def8e2; --colab-badge-green-fg: #00642b; --colab-badge-green-edge: #13a64e;
  --colab-badge-amber-bg: #ffeed3; --colab-badge-amber-fg: #6d4c00; --colab-badge-amber-edge: #b48000;
  --colab-badge-red-bg: #ffebe9; --colab-badge-red-fg: #90272d; --colab-badge-red-edge: #df575a;
  --colab-badge-violet-bg: #f2edff; --colab-badge-violet-fg: #603b93; --colab-badge-violet-edge: #9c6ee1;
  --colab-badge-teal-bg: #d3f9f4; --colab-badge-teal-fg: #006058; --colab-badge-teal-edge: #03a093;
  --colab-badge-orange-bg: #ffece2; --colab-badge-orange-fg: #833b00; --colab-badge-orange-edge: #d76501;
  --colab-badge-pink-bg: #ffe9f3; --colab-badge-pink-fg: #87285d; --colab-badge-pink-edge: #d35899;
  --colab-badge-indigo-bg: #ecefff; --colab-badge-indigo-fg: #43459d; --colab-badge-indigo-edge: #757bef;
  --colab-badge-lime-bg: #e8f6d9; --colab-badge-lime-fg: #405e00; --colab-badge-lime-edge: #6d9c00;
  --colab-badge-neutral-bg: #f1f5f9; --colab-badge-neutral-fg: #475569; --colab-badge-neutral-edge: #64748b; --colab-badge-neutral-border: #e2e8f0;

  --colab-shadow-sm: 0 1px 2px rgb(15 23 42 / 0.06);
  --colab-shadow: 0 1px 2px rgb(15 23 42 / 0.05), 0 6px 20px -6px rgb(15 23 42 / 0.12);
  --colab-shadow-lg: 0 2px 4px rgb(15 23 42 / 0.04), 0 24px 48px -16px rgb(15 23 42 / 0.25);

  --colab-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --colab-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --colab-text-xs: 0.75rem;
  --colab-text-sm: 0.8125rem;
  --colab-text-base: 0.875rem;
  --colab-text-md: 1rem;
  --colab-h3: 1rem;
  --colab-h2: 1.25rem;
  --colab-h1: 1.375rem;
  --colab-display: 2rem;

  --colab-space-1: 0.25rem;
  --colab-space-2: 0.5rem;
  --colab-space-3: 0.75rem;
  --colab-space-4: 1rem;
  --colab-space-5: 1.25rem;
  --colab-space-6: 1.5rem;
  --colab-space-8: 2rem;
  --colab-space-12: 3rem;

  --colab-r-sm: 0.375rem;
  --colab-r: 0.5rem;
  --colab-r-md: 0.75rem;
  --colab-r-lg: 1rem;
  --colab-r-pill: 99rem;

  --colab-focus: var(--colab-accent);
  --colab-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --colab-dur: 150ms;
  --colab-dur-slow: 1.5s;
}

/* --- 1. Tokens: dark -------------------------------------------------------------------------------------- */
:root.sl-theme-dark {
  --colab-bg: #0b1220;
  --colab-surface: #111a2c;
  --colab-soft: #1a2538;
  --colab-line: #23304a;
  --colab-line-strong: #334155;
  /* The edge of a field, a checkbox, a radio: >= 3:1 to the surface (WCAG 1.4.11). */
  --colab-line-field: #5f6f86;
  --colab-text: #e2e8f0;
  --colab-muted: #a3b1c6;
  --colab-faint: #9eacc0;
  --colab-header-bg: rgb(11 18 32 / 0.82);
  --colab-overlay: rgb(0 0 0 / 0.6);
  --colab-accent: #6dc7d9;
  --colab-accent-hover: #9adae8;
  --colab-accent-text: #00242b;
  --colab-accent-soft: #083138;
  --colab-accent-ink: #bde7ef;
  --colab-info: #6dc7d9;
  --colab-info-soft: #083138;
  --colab-success: #86efac;
  --colab-success-soft: #12341f;
  --colab-warning: #f3d761;
  --colab-warning-soft: #3b2a06;
  --colab-danger: #eb8186;
  --colab-danger-soft: #3f1515;
  --colab-danger-fill: #d52238;
  --colab-agent: #cc9fff;
  --colab-hl-bg: #31254d;
  --colab-hl-ring: #9572e7;
  /* Only the logo drawn inline (docs/brand §2): never a button, a link, a status or a badge. */
  --colab-brand: #fdba74;
  --colab-brand-robot: #64748b;

  /* Badge palette (x-colors, D-042, docs/brand §3): one OKLCH recipe for every tone, ink L 84%, bg = 18% of the edge over the surface. */
  --colab-badge-blue-bg: #1a2e4f; --colab-badge-blue-fg: #abcdff; --colab-badge-blue-edge: #5c9eff;
  --colab-badge-green-bg: #113332; --colab-badge-green-fg: #95dfa4; --colab-badge-green-edge: #43b966;
  --colab-badge-amber-bg: #2e2c24; --colab-badge-amber-fg: #f0c374; --colab-badge-amber-edge: #cd9200;
  --colab-badge-red-bg: #362534; --colab-badge-red-fg: #ffb4b1; --colab-badge-red-edge: #f17070;
  --colab-badge-violet-bg: #2a294d; --colab-badge-violet-fg: #d4bdff; --colab-badge-violet-edge: #ae84f2;
  --colab-badge-teal-bg: #0e323f; --colab-badge-teal-fg: #6ae2d4; --colab-badge-teal-edge: #03b7a8;
  --colab-badge-orange-bg: #352824; --colab-badge-orange-fg: #ffb891; --colab-badge-orange-edge: #eb7c33;
  --colab-badge-pink-bg: #342540; --colab-badge-pink-fg: #ffaed4; --colab-badge-pink-edge: #e670ac;
  --colab-badge-indigo-bg: #232b4f; --colab-badge-indigo-fg: #bec6ff; --colab-badge-indigo-edge: #8992ff;
  --colab-badge-lime-bg: #223124; --colab-badge-lime-fg: #b6d98a; --colab-badge-lime-edge: #81b033;
  --colab-badge-neutral-bg: #1a2538; --colab-badge-neutral-fg: #a3b1c6; --colab-badge-neutral-edge: #7c8ba1; --colab-badge-neutral-border: #23304a;

  --colab-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --colab-shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 6px 20px -6px rgb(0 0 0 / 0.5);
  --colab-shadow-lg: 0 2px 4px rgb(0 0 0 / 0.3), 0 24px 48px -16px rgb(0 0 0 / 0.7);
}

/* --- 2. Shoelace: the scales, not single components ------------------------------------------------------- */
html:root {
  /* neutral: slate instead of zinc */
  --sl-color-neutral-0: #ffffff; --sl-color-neutral-50: #f8fafc; --sl-color-neutral-100: #f1f5f9;
  --sl-color-neutral-200: #e2e8f0; --sl-color-neutral-300: #cbd5e1; --sl-color-neutral-400: #94a3b8;
  --sl-color-neutral-500: #64748b; --sl-color-neutral-600: #475569; --sl-color-neutral-700: #334155;
  --sl-color-neutral-800: #1e293b; --sl-color-neutral-900: #0f172a; --sl-color-neutral-950: #020617;
  --sl-color-neutral-1000: #000000;
  /* accent: petrol (hue 212, docs/brand §3); 600 (buttons, links, focus) is --colab-accent, 700 its hover, 800 the ink */
  --sl-color-primary-50: #ecfafd; --sl-color-primary-100: #ddf5fb; --sl-color-primary-200: #b9e8f1;
  --sl-color-primary-300: #8cd5e4; --sl-color-primary-400: #59b4c5; --sl-color-primary-500: #1b899b;
  --sl-color-primary-600: #026675; --sl-color-primary-700: #005461; --sl-color-primary-800: #004550;
  --sl-color-primary-900: #04343c; --sl-color-primary-950: #02242a;
  --sl-font-sans: var(--colab-font); --sl-font-mono: var(--colab-mono);
  --sl-border-radius-small: var(--colab-r-sm); --sl-border-radius-medium: var(--colab-r);
  --sl-border-radius-large: var(--colab-r-md); --sl-border-radius-x-large: var(--colab-r-lg);
  --sl-shadow-x-small: var(--colab-shadow-sm); --sl-shadow-small: var(--colab-shadow-sm);
  --sl-shadow-medium: var(--colab-shadow); --sl-shadow-large: var(--colab-shadow-lg); --sl-shadow-x-large: var(--colab-shadow-lg);
  --sl-focus-ring-color: var(--colab-focus); --sl-focus-ring-offset: 2px;
  --sl-panel-background-color: var(--colab-surface); --sl-panel-border-color: var(--colab-line);
  --sl-input-border-color: var(--colab-line-field); --sl-input-border-color-focus: var(--colab-accent);
  --sl-input-placeholder-color: var(--colab-faint); --sl-input-help-text-color: var(--colab-muted);
  --sl-input-label-color: var(--colab-text);
  --sl-overlay-background-color: var(--colab-overlay);
  --sl-tooltip-background-color: var(--colab-text); --sl-tooltip-color: var(--colab-bg);
  --sl-button-font-size-medium: var(--colab-text-base);
}
/* In the dark theme the Shoelace scale is flipped: 0 is the darkest surface, 1000 is white. */
html:root.sl-theme-dark {
  --sl-color-neutral-0: #111a2c; --sl-color-neutral-50: #141f33; --sl-color-neutral-100: #1a2538;
  --sl-color-neutral-200: #23304a; --sl-color-neutral-300: #334155; --sl-color-neutral-400: #475569;
  --sl-color-neutral-500: #7c8ba1; --sl-color-neutral-600: #a3b1c6; --sl-color-neutral-700: #c3cedc;
  --sl-color-neutral-800: #d5dde8; --sl-color-neutral-900: #e2e8f0; --sl-color-neutral-950: #f1f5f9;
  --sl-color-neutral-1000: #ffffff;
  /* 600 is --colab-accent: the text of a primary button is neutral-0 (dark), 9:1; hover 500 is the lighter --colab-accent-hover */
  --sl-color-primary-50: #00242b; --sl-color-primary-100: #083138; --sl-color-primary-200: #01515d;
  --sl-color-primary-300: #167685; --sl-color-primary-400: #419eaf; --sl-color-primary-500: #9adae8;
  --sl-color-primary-600: #6dc7d9; --sl-color-primary-700: #bde7ef; --sl-color-primary-800: #d5f1f7;
  --sl-color-primary-900: #eaf8fb; --sl-color-primary-950: #ffffff;
}
/* A dangerous button (a confirmation, a page of an agent): one red fill for both themes with white text, 5.1:1 (docs/brand §3);
   Shoelace would paint it with its danger scale and, in the dark theme, dark text. The hover goes darker in both themes. */
sl-button[variant="danger"]:not([outline])::part(base) { background: var(--colab-danger-fill); border-color: var(--colab-danger-fill); color: #ffffff; }
sl-button[variant="danger"]:not([outline])::part(base):hover { background: color-mix(in srgb, var(--colab-danger-fill) 85%, #000000); border-color: color-mix(in srgb, var(--colab-danger-fill) 85%, #000000); color: #ffffff; }
sl-button[variant="danger"][outline]::part(base) { border-color: var(--colab-danger); color: var(--colab-danger); }
/* Shoelace makes the hover of a primary button lighter (primary-500); in the light theme ours is darker, as .btn of the landing. */
:root:not(.sl-theme-dark) sl-button[variant="primary"]::part(base):hover {
  background: var(--colab-accent-hover);
  border-color: var(--colab-accent-hover);
}

/* Radii of §1.7 that the scales do not reach: Shoelace rounds a card and a dialog with --sl-border-radius-medium, the radius of a
   button (0.5rem). A panel is --colab-r-md, a dialog --colab-r-lg. In :where(), so the CSS of a page can change them. */
:where(sl-card) { --border-radius: var(--colab-r-md); }
:where(sl-dialog)::part(panel) { border-radius: var(--colab-r-lg); }

/* --- 4.1 App bar (.app-bar): the main UI, the help, the account and <colab-nav> share this markup ------------- */
/* Classes are prefixed (ab-) and qualified by .app-bar, so the CSS of an agent view neither breaks nor is broken by them. */
.app-bar {
  position: sticky; top: 0; z-index: 30;
  background: var(--colab-header-bg);
  -webkit-backdrop-filter: saturate(1.6) blur(12px); backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--colab-line);
  color: var(--colab-text); font: 400 var(--colab-text-base) / 1.5 var(--colab-font);
}
.app-bar [hidden] { display: none !important; }
.app-bar .ab-row { display: flex; align-items: center; gap: var(--colab-space-3); box-sizing: border-box; height: 3.5rem; padding: 0 var(--colab-space-6); min-width: 0; }
.app-bar .ab-brand { display: inline-flex; flex: none; align-items: center; gap: var(--colab-space-2); color: var(--colab-text); text-decoration: none; font-weight: 800; font-size: 1.125rem; letter-spacing: -0.03em; border-radius: var(--colab-r-sm); -webkit-user-drag: none; }
.app-bar a.ab-brand:hover { color: var(--colab-text); }
/* The logo (client/brand.ts): 26px high as in docs/brand/mockups; a narrow screen keeps only the mark (a square box). */
.app-bar .ab-logo { display: block; width: 4.45rem; height: 1.625rem; }
.colab-logo .lg-h { fill: var(--colab-brand); }
.colab-logo .lg-r { fill: var(--colab-brand-robot); }
/* The word has no token of its own (docs/brand §2): steel on light, the text colour on dark. */
.colab-logo .lg-w { stroke: #1e293b; }
html:root.sl-theme-dark .colab-logo .lg-w { stroke: #e2e8f0; }
.app-bar .ab-sep { flex: none; width: 1px; height: 1.25rem; background: var(--colab-line-strong); }
.app-bar .ab-title { flex: 0 1 auto; min-width: 0; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--colab-h1); line-height: 1.25; font-weight: 750; letter-spacing: -0.02em; }
.app-bar .ab-tip { flex: none; }
.app-bar sl-tooltip.ab-tip:not(:defined) { display: contents; }
.app-bar .ab-mode {
  display: inline-flex; align-items: center; gap: 0.375rem; margin: 0; padding: 0.125rem 0.5rem;
  border: 1px solid var(--colab-badge-neutral-border); border-radius: var(--colab-r-pill);
  background: var(--colab-badge-neutral-bg); color: var(--colab-badge-neutral-fg);
  font: 600 var(--colab-text-xs) / 1.4 var(--colab-font); white-space: nowrap; cursor: help;
}
.app-bar .ab-mode[data-mode^="guest"] { border-color: transparent; background: var(--colab-accent-soft); color: var(--colab-accent-ink); }
.app-bar .ab-actions { display: flex; flex: none; align-items: center; gap: var(--colab-space-1); margin-left: auto; }
.app-bar .ab-btn {
  display: inline-flex; align-items: center; gap: 0.375rem; box-sizing: border-box; height: 2rem; margin: 0; padding: 0 0.625rem;
  border: 1px solid transparent; border-radius: var(--colab-r); background: none; color: var(--colab-muted);
  font: 500 var(--colab-text-base) / 1 var(--colab-font); text-decoration: none; white-space: nowrap; cursor: pointer;
  -webkit-user-drag: none; user-select: none;
  transition: background-color var(--colab-dur) var(--colab-ease), color var(--colab-dur) var(--colab-ease);
}
.app-bar .ab-btn:hover { background: var(--colab-soft); color: var(--colab-text); }
.app-bar .ab-secondary { border-color: var(--colab-line-strong); background: var(--colab-surface); color: var(--colab-text); font-weight: 600; box-shadow: var(--colab-shadow-sm); }
.app-bar .ab-icon-btn { justify-content: center; width: 2rem; padding: 0; }
.app-bar .ab-user-btn { padding: 0 0.375rem 0 0.25rem; color: var(--colab-text); }
.app-bar .ab-user-name { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; }
.app-bar .ab-avatar { display: inline-grid; place-items: center; width: 1.625rem; height: 1.625rem; border-radius: 50%; background: var(--colab-accent-soft); color: var(--colab-accent-ink); font: 700 0.6875rem / 1 var(--colab-font); letter-spacing: 0.02em; }
.app-bar sl-icon { flex: none; font-size: 1rem; }
.app-bar .ab-tabs {
  display: flex; align-items: stretch; gap: var(--colab-space-5); box-sizing: border-box; height: calc(2.75rem - 1px); /* + the 56 px row + the 1 px line = 100 px */ padding: 0 var(--colab-space-6);
}
.app-bar .ab-narrow { display: none; }
.app-bar .ab-journal { position: relative; }
/* Task 101: «Поиск» looks like a field on a wide screen (it opens the search dialog), an icon on a phone. */
.app-bar .ab-search { width: 13rem; margin-right: var(--colab-space-2); border-color: var(--colab-line-strong); background: var(--colab-surface); color: var(--colab-faint); font-weight: 400; }
.app-bar .ab-search:hover { border-color: var(--colab-line-field); background: var(--colab-surface); color: var(--colab-muted); }
.app-bar .ab-kbd { margin-left: auto; padding: 0.0625rem 0.375rem; border: 1px solid var(--colab-line-strong); border-radius: var(--colab-r-sm); background: var(--colab-soft); color: var(--colab-muted); font: 600 0.6875rem / 1.3 var(--colab-mono); }
.app-bar .ab-dot { display: inline-grid; place-items: center; min-width: 1.125rem; height: 1.125rem; padding: 0 0.3125rem; box-sizing: border-box; border-radius: 999px; background: var(--colab-accent); color: var(--colab-accent-text); font: 700 0.6875rem / 1 var(--colab-font); }
@media (max-width: 639.98px) {
  .app-bar .ab-row { gap: var(--colab-space-2); padding: 0 var(--colab-space-4); }
  .app-bar .ab-title { font-size: 1.125rem; }
  .app-bar .ab-tabs { gap: var(--colab-space-4); padding: 0 var(--colab-space-4); }
  .app-bar .ab-wide { display: none; }
  .app-bar .ab-narrow { display: inline-block; }
  .app-bar .ab-logo { width: 1.625rem; }
  .app-bar .ab-mode-text, .app-bar .ab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .app-bar .ab-mode { padding: 0.25rem; }
  .app-bar .ab-journal { width: 2rem; padding: 0; justify-content: center; }
  .app-bar .ab-search { width: 2rem; margin-right: 0; padding: 0; justify-content: center; border-color: transparent; background: none; color: var(--colab-muted); }
  .app-bar .ab-kbd { display: none; }
  .app-bar .ab-dot { position: absolute; top: -0.125rem; right: -0.25rem; min-width: 1rem; height: 1rem; padding: 0 0.25rem; font-size: 0.625rem; box-shadow: 0 0 0 2px var(--colab-bg); }
}
@media (pointer: coarse) { .app-bar .ab-btn, .app-bar .ab-mode { min-width: 2.75rem; min-height: 2.75rem; justify-content: center; } }

/* --- 4.4 Tabs: the views in the bar and the types above the table; underlined, as .tabs of the landing ----- */
.ab-tab {
  display: inline-flex; align-items: center; gap: 0.375rem; margin: 0; padding: 0 0.125rem;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--colab-muted);
  font: 500 var(--colab-text-base) / 1 var(--colab-font); text-decoration: none; white-space: nowrap; cursor: pointer;
  -webkit-user-drag: none; user-select: none;
}
.ab-tab:hover { color: var(--colab-text); }
.ab-tab[aria-current], .ab-tab[aria-selected="true"] { border-bottom-color: var(--colab-accent); color: var(--colab-accent); font-weight: 600; }
.ab-tab sl-icon { flex: none; font-size: 1rem; }
.ab-tab .ab-star { font-size: 0.6875rem; color: var(--colab-faint); }
.ab-count { display: inline-block; min-width: 1.25rem; box-sizing: border-box; padding: 0.0625rem 0.375rem; border: 1px solid var(--colab-badge-neutral-border); border-radius: var(--colab-r-pill); background: var(--colab-badge-neutral-bg); color: var(--colab-badge-neutral-fg); font: 600 0.6875rem / 1.4 var(--colab-font); text-align: center; font-variant-numeric: tabular-nums; }
.ab-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Task 079: a row of tabs that does not fit (.ab-tabrow: the views in the bar, the types above the table) scrolls inside its
   holder (wheel, swipe, focus); an edge with more tabs beyond it fades out and shows a «‹ ›» button (.more-left /
   .more-right, set by createTabScroll of dom.ts). The faded edge is the scroll-padding, so a tab brought into sight never
   stays under a button. */
.ab-tabbar { position: relative; min-width: 0; }
.ab-tabbar[hidden] { display: none; }
.ab-tabrow {
  --ab-l0: 0px; --ab-l1: 0px; --ab-r0: 0px; --ab-r1: 0px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: 3.5rem;
  -webkit-mask-image: linear-gradient(to right, transparent var(--ab-l0), #000 var(--ab-l1), #000 calc(100% - var(--ab-r1)), transparent calc(100% - var(--ab-r0)));
  mask-image: linear-gradient(to right, transparent var(--ab-l0), #000 var(--ab-l1), #000 calc(100% - var(--ab-r1)), transparent calc(100% - var(--ab-r0)));
}
.ab-tabrow::-webkit-scrollbar { display: none; }
.ab-tabbar.more-left > .ab-tabrow { --ab-l0: 2.25rem; --ab-l1: 3.5rem; }
.ab-tabbar.more-right > .ab-tabrow { --ab-r0: 2.25rem; --ab-r1: 3.5rem; }
.ab-scroll {
  position: absolute; top: 50%; display: none; place-items: center; box-sizing: border-box; width: 2rem; height: 2rem; margin: -1rem 0 0; padding: 0;
  border: 0; border-radius: var(--colab-r); background: none; color: var(--colab-muted); cursor: pointer;
  transition: background-color var(--colab-dur) var(--colab-ease), color var(--colab-dur) var(--colab-ease);
}
.ab-scroll:hover { background: var(--colab-soft); color: var(--colab-text); }
.ab-scroll sl-icon { font-size: 1rem; }
.ab-scroll-prev { left: var(--colab-space-1); }
.ab-scroll-next { right: var(--colab-space-1); }
.more-left > .ab-scroll-prev, .more-right > .ab-scroll-next { display: grid; }
/* A finger gets the whole faded edge as its target. */
@media (pointer: coarse) {
  .ab-scroll { top: 0; width: 2.25rem; height: 100%; margin: 0; border-radius: 0; }
  .ab-scroll-prev { left: 0; }
  .ab-scroll-next { right: 0; }
}

/* D3: таблица */
/* --- 4.5 Tables: the main table, colab-table, colab-summary and the tables of colab-doc share these classes ------ */
/* .colab-tbl-host is a size container: a table in a narrow block becomes a list of cards and is never wider than the block.
   .colab-tbl-scroll scrolls the table inside its frame (the page never scrolls sideways); the header sticks to its top. */
/* container-type already makes the host the containing block of fixed boxes (layout containment), but the positioning of Shoelace
   popups (hoist) does not see it and shifts the menu by the host's offset; the explicit «contain: layout» makes it see it. */
.colab-tbl-host { container-type: inline-size; contain: layout; min-width: 0; }
.colab-tbl-scroll {
  --colab-tbl-edge: color-mix(in srgb, var(--colab-text) 16%, transparent);
  position: relative; overflow: auto; max-height: var(--colab-tbl-max-h, none); overscroll-behavior-x: contain;
  border: 1px solid var(--colab-line); border-radius: var(--colab-r-md);
  /* Edge shadows while there is more to scroll: covers that move with the content hide the shadows fixed at the edges. */
  background:
    linear-gradient(to right, var(--colab-surface) 40%, transparent) left / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--colab-surface) 40%, transparent) right / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--colab-tbl-edge), transparent) left / 0.875rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--colab-tbl-edge), transparent) right / 0.875rem 100% no-repeat scroll,
    var(--colab-surface);
}
.colab-tbl { width: 100%; border-collapse: separate; border-spacing: 0; color: var(--colab-text); font: var(--colab-text-base) / 1.5 var(--colab-font); font-variant-numeric: tabular-nums; }
.colab-tbl th, .colab-tbl td { padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--colab-line); text-align: left; vertical-align: top; overflow-wrap: normal; word-break: normal; }
.colab-tbl th {
  position: sticky; top: 0; z-index: 2; vertical-align: bottom; background: var(--colab-surface); border-bottom-color: var(--colab-line-strong);
  color: var(--colab-faint); font-size: var(--colab-text-xs); line-height: 1.4; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
/* Sort by a header (task 109): the title of the column is a button; the arrow shows the order (muted «up-down» when none). */
.colab-sort {
  display: inline-flex; align-items: center; gap: var(--colab-space-1); max-width: 100%; margin: 0; padding: 0; border: 0; border-radius: var(--colab-r-sm);
  background: none; color: inherit; font: inherit; line-height: inherit; vertical-align: bottom; letter-spacing: inherit; text-transform: inherit; text-align: inherit; cursor: pointer;
}
.colab-sort > span { min-width: 0; overflow-wrap: anywhere; }
.colab-sort > sl-icon { flex: none; font-size: 0.875rem; opacity: 0.45; }
.colab-sort:hover { color: var(--colab-text); }
.colab-sort:hover > sl-icon { opacity: 0.8; }
.colab-tbl th.k-num .colab-sort { flex-direction: row-reverse; }
.colab-tbl th[aria-sort] .colab-sort { color: var(--colab-text); }
.colab-tbl th[aria-sort] .colab-sort > sl-icon { color: var(--colab-accent); opacity: 1; }
.colab-sort-select { display: none; min-width: 0; max-width: 100%; }
.colab-sort-prefix { color: var(--colab-muted); font-size: var(--colab-text-sm); }
.colab-tbl-bar:has(> .colab-sort-select:only-child) { display: none; }
.colab-tbl tbody tr:last-child > td { border-bottom: 0; }
.colab-tbl tbody tr:hover > td { background: var(--colab-soft); }
.colab-tbl tr.selected > td { background: var(--colab-accent-soft); }
.colab-tbl tr.selected > td:first-child { box-shadow: inset 3px 0 0 var(--colab-accent); }
.colab-tbl tr:has(+ tr.total) > td { border-bottom: 0; }
.colab-tbl tr.total > td { background: var(--colab-soft); border-top: 1px solid var(--colab-line-strong); font-weight: 600; }
/* Minimal widths by the kind of the column; a word is never broken, a long text is clamped instead. */
.colab-tbl .k-title { min-width: 14rem; }
.colab-tbl .k-text { min-width: 10rem; }
.colab-tbl .k-enum { min-width: 7rem; }
.colab-tbl .k-date { min-width: 7rem; white-space: nowrap; }
.colab-tbl .k-num { min-width: 5rem; text-align: right; }
.colab-tbl .k-rel { min-width: 9rem; }
.colab-tbl .k-json, .colab-tbl .k-bool { min-width: 4rem; }
.colab-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.colab-empty { color: var(--colab-faint); }
.colab-tags, .colab-chips { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; max-width: 100%; vertical-align: top; }
.colab-tag { padding: 0 0.375rem; border-radius: var(--colab-r-sm); background: var(--colab-soft); color: var(--colab-muted); font-size: var(--colab-text-xs); line-height: 1.375rem; white-space: nowrap; }
.colab-chip { max-width: 100%; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; padding: 0 0.5rem; border: 1px solid var(--colab-line); border-radius: var(--colab-r-pill); background: var(--colab-surface); color: var(--colab-text); font-size: var(--colab-text-sm); line-height: 1.375rem; white-space: nowrap; }
.colab-json { color: var(--colab-muted); font-family: var(--colab-mono); font-size: var(--colab-text-sm); cursor: help; }
/* The actions of a row: «⋯» (Изменить, Удалить) in the last column, seen on hover or focus of the row; on touch always. */
.colab-tbl td.row-actions { width: 1%; padding-block: 0.375rem; white-space: nowrap; text-align: right; }
.colab-tbl td.row-actions > * + * { margin-left: var(--colab-space-1); }
.colab-tbl .row-menu > sl-icon-button { font-size: 1rem; color: var(--colab-muted); }
.colab-tbl .row-menu > sl-icon-button:hover { color: var(--colab-text); }
@media (hover: hover) and (pointer: fine) {
  .colab-tbl .row-menu { opacity: 0; transition: opacity var(--colab-dur) var(--colab-ease); }
  .colab-tbl tr:hover .row-menu, .colab-tbl tr:focus-within .row-menu, .colab-tbl .row-menu[open] { opacity: 1; }
}
/* A menu inside a cell inherits its text-align (td.row-actions is right-aligned): the shorter label would shift to the right. */
sl-menu { text-align: start; }
sl-menu-item.colab-menu-danger::part(base) { color: var(--colab-danger); }
sl-menu-item.colab-menu-danger::part(base):hover, sl-menu-item.colab-menu-danger:focus-visible::part(base) { background: var(--colab-danger-soft); color: var(--colab-danger); }
/* A button of `actions`: secondary, the meaning is the colour of its icon (not a green fill). */
.colab-act-success > sl-icon { color: var(--colab-success); }
.colab-act-danger > sl-icon { color: var(--colab-danger); }
.colab-act-warning > sl-icon { color: var(--colab-warning); }
.colab-act-primary > sl-icon { color: var(--colab-accent); }
.colab-tbl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--colab-space-2); margin-bottom: var(--colab-space-3); }
.colab-tbl-empty { padding: var(--colab-space-8) var(--colab-space-4); color: var(--colab-muted); text-align: center; }
.colab-tbl-empty strong { display: block; margin-bottom: var(--colab-space-1); color: var(--colab-text); font-size: var(--colab-text-md); font-weight: 650; }
/* < 640 px of the block: a list of cards. The title is the heading of a card, the other cells are «label: value» rows. */
@container (max-width: 39.99rem) {
  .colab-tbl-bar:has(> .colab-sort-select:only-child) { display: flex; }
  .colab-tbl-bar > .colab-sort-select { display: block; flex: 1 1 16rem; }
  .colab-tbl-scroll:has(> .colab-tbl-cards) { overflow: visible; max-height: none; border: 0; border-radius: 0; background: none; }
  .colab-tbl-cards, .colab-tbl-cards > tbody, .colab-tbl-cards > tbody > tr, .colab-tbl-cards > tbody > tr > td { display: block; }
  .colab-tbl-cards > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .colab-tbl-cards > tbody { display: grid; gap: var(--colab-space-2); }
  .colab-tbl-cards > tbody > tr { position: relative; 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); }
  .colab-tbl-cards > tbody > tr:hover { border-color: var(--colab-line-strong); }
  .colab-tbl-cards > tbody > tr.selected { background: var(--colab-accent-soft); box-shadow: inset 3px 0 0 var(--colab-accent); }
  .colab-tbl.colab-tbl-cards > tbody > tr > td {
    display: grid; grid-template-columns: minmax(5.5rem, 38%) minmax(0, 1fr); gap: var(--colab-space-3); min-width: 0; padding: 0.1875rem 0;
    border: 0; background: none; box-shadow: none; text-align: left; white-space: normal;
  }
  .colab-tbl-cards > tbody > tr > td > :not(.cell-view) { justify-self: start; max-width: 100%; }
  .colab-tbl-cards > tbody > tr > td::before { content: attr(data-label); color: var(--colab-muted); font-size: var(--colab-text-sm); font-weight: 400; }
  .colab-tbl.colab-tbl-cards > tbody > tr > td:first-child { display: block; padding: 0 2.5rem var(--colab-space-1) 0; font-weight: 600; }
  .colab-tbl-cards > tbody > tr > td:first-child::before, .colab-tbl-cards > tbody > tr > td.row-actions::before { content: none; }
  .colab-tbl.colab-tbl-cards > tbody > tr > td.row-actions { display: flex; flex-wrap: wrap; gap: var(--colab-space-2); width: auto; padding: 0; }
  .colab-tbl-cards > tbody > tr > td.row-actions > * + * { margin-left: 0; }
  .colab-tbl.colab-tbl-cards > tbody > tr > td.row-actions:has(> :not(.row-menu):not(:empty)) { padding-top: var(--colab-space-2); }
  .colab-tbl-cards .row-menu { position: absolute; top: 0.25rem; right: 0.25rem; opacity: 1; }
}
@media print {
  .colab-tbl-scroll { overflow: visible; max-height: none; }
  .colab-tbl th { position: static; }
  .colab-tbl .row-actions { display: none; }
}

/* D6: диалоги и формы (§4.3, §4.9, §4.15) — colab-form, «Новая строка», подтверждение, «Поделиться», тосты.
   Our dialogs carry .colab-dialog (client/widgets/dialogs.ts); a dialog of an agent's own code keeps the look of Shoelace. */
html:root {
  --sl-input-required-content-color: var(--colab-danger);
  --sl-input-focus-ring-color: color-mix(in srgb, var(--colab-accent) 30%, transparent);
}
sl-dialog.colab-dialog { --width: 32rem; --body-spacing: var(--colab-space-1) var(--colab-space-5) var(--colab-space-5); --footer-spacing: var(--colab-space-3) var(--colab-space-5) var(--colab-space-5); }
sl-dialog.colab-confirm { --width: 26rem; }
/* The card of an object (colab-form): wide when it holds long texts or the viewer chose so; the button is in its header (form.ts). */
sl-dialog.colab-form-dialog[data-wide] { --width: min(64rem, 92vw); }
sl-dialog.colab-form-dialog > .colab-width[hidden] { display: none; }
sl-dialog.colab-dialog::part(panel) { box-shadow: var(--colab-shadow-lg); }
sl-dialog.colab-dialog::part(title) { padding: var(--colab-space-5) var(--colab-space-5) var(--colab-space-3); font-size: var(--colab-h2); line-height: 1.3; font-weight: 700; letter-spacing: -0.015em; overflow-wrap: break-word; }
/* The footer: «Отмена» and one main button on the right; fixed under the scrolling body. */
sl-dialog.colab-dialog::part(footer) { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--colab-space-2); }
sl-dialog.colab-dialog > [slot="footer"] { margin: 0; }
/* The confirmation button of a deletion or a revoke is the only filled red (§4.2). */
/* < 640 px a dialog is a sheet at the bottom on the whole width (§4.3, §4.15): never wider than the screen, the body scrolls. */
@media (max-width: 639.98px) {
  sl-dialog.colab-dialog::part(base) { align-items: flex-end; }
  sl-dialog.colab-dialog::part(panel) { width: 100%; max-width: 100%; max-height: 90dvh; border-radius: var(--colab-r-lg) var(--colab-r-lg) 0 0; padding-bottom: env(safe-area-inset-bottom); }
  sl-dialog.colab-dialog::part(title) { padding: var(--colab-space-4) var(--colab-space-4) var(--colab-space-2); font-size: 1.125rem; }
  sl-dialog.colab-dialog { --body-spacing: var(--colab-space-1) var(--colab-space-4) var(--colab-space-4); --footer-spacing: var(--colab-space-3) var(--colab-space-4) var(--colab-space-4); }
  sl-dialog.colab-dialog > sl-button[slot="footer"] { flex: 1 1 0; }
}

/* Fields of a form: the label above (0.8125rem/600), «*» of the required in danger, the error under the field with a sign. */
.colab-dialog :is(sl-input, sl-select, sl-textarea)::part(form-control-label) { margin-bottom: var(--colab-space-1); font-size: var(--colab-text-sm); font-weight: 600; color: var(--colab-text); }
:is(sl-input, sl-select, sl-textarea, sl-checkbox, sl-switch)[data-colab-invalid]::part(form-control-help-text) { color: var(--colab-danger); }
:is(sl-input, sl-select, sl-textarea, sl-checkbox, sl-switch)[data-colab-invalid]::part(form-control-help-text)::before {
  content: "!"; display: inline-grid; place-items: center; width: 1.1em; height: 1.1em; margin-inline-end: 0.35em;
  border: 1.5px solid currentColor; border-radius: 50%; font-size: 0.8em; font-weight: 700; line-height: 1; vertical-align: 0.05em;
}
:is(sl-input, sl-textarea)[data-colab-invalid]::part(base), sl-select[data-colab-invalid]::part(combobox) { border-color: var(--colab-danger); }
.colab-dialog sl-details.colab-more::part(base), .colab-dialog sl-details.add-more::part(base) { border-color: var(--colab-line); border-radius: var(--colab-r); }
.colab-dialog sl-details::part(summary) { font-weight: 600; font-size: var(--colab-text-sm); }
/* A date as ДД.ММ.ГГГГ: the browser's calendar opens from the button; its own input is invisible under the button. */
.colab-date-pick { position: relative; display: inline-flex; align-items: center; }
.colab-date-native { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }

/* The confirmation: the question is the title, the consequences under it (§4.15); a question alone has no body. */
.colab-confirm-details { display: grid; gap: var(--colab-space-2); margin: 0; padding-left: 1.1rem; color: var(--colab-muted); font-size: var(--colab-text-base); }
sl-dialog.colab-confirm.is-blocked .colab-confirm-details { color: var(--colab-danger); }
.colab-confirm-body { display: grid; gap: var(--colab-space-4); }
.colab-confirm-option { font-size: var(--colab-text-base); }
.colab-confirm-option::part(label) { color: var(--colab-text); line-height: 1.4; }
sl-dialog.colab-confirm-bare::part(body) { display: none; }

/* Task 113: «Конфликт правок» (client/widgets/conflict-dialog.ts): per field the own value and the value now, read-only. */
.colab-conflict-body { display: grid; gap: var(--colab-space-4); }
.colab-conflict-intro { margin: 0; color: var(--colab-muted); font-size: var(--colab-text-base); }
.colab-conflict-object { display: grid; gap: var(--colab-space-3); }
.colab-conflict-title { margin: 0; font-size: var(--colab-text-base); font-weight: 600; overflow-wrap: anywhere; }
.colab-conflict-note { margin: 0; font-size: var(--colab-text-base); overflow-wrap: anywhere; }
.colab-conflict-field { display: grid; gap: var(--colab-space-1); }
.colab-conflict-name { font-weight: 600; font-size: var(--colab-text-base); overflow-wrap: anywhere; }
.colab-conflict-values { display: grid; grid-template-columns: minmax(7rem, max-content) 1fr; gap: var(--colab-space-1) var(--colab-space-3); margin: 0; padding: var(--colab-space-2) var(--colab-space-3); border: 1px solid var(--colab-line); border-radius: var(--colab-r-md); }
.colab-conflict-label { color: var(--colab-muted); font-size: var(--colab-text-sm); line-height: 1.5; }
.colab-conflict-value { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; max-height: 8rem; overflow: auto; }
@media (max-width: 639px) {
  .colab-conflict-values { grid-template-columns: 1fr; }
  .colab-conflict-value + .colab-conflict-label { margin-top: var(--colab-space-1); }
}

/* Notices in a dialog and toasts (§4.9): a soft plaque with a stripe on the left, not a card with a coloured top edge. */
:is(.colab-dialog, .sl-toast-stack) sl-alert::part(base) { border: 1px solid var(--colab-line); border-left: 3px solid var(--colab-info); background: var(--colab-info-soft); color: var(--colab-text); font-size: var(--colab-text-base); }
:is(.colab-dialog, .sl-toast-stack) sl-alert::part(message) { padding: var(--colab-space-3) var(--colab-space-4); }
:is(.colab-dialog, .sl-toast-stack) sl-alert[variant="success"]::part(base) { border-left-color: var(--colab-success); background: var(--colab-success-soft); }
:is(.colab-dialog, .sl-toast-stack) sl-alert[variant="warning"]::part(base) { border-left-color: var(--colab-warning); background: var(--colab-warning-soft); }
:is(.colab-dialog, .sl-toast-stack) sl-alert[variant="danger"]::part(base) { border-left-color: var(--colab-danger); background: var(--colab-danger-soft); }
:is(.colab-dialog, .sl-toast-stack) sl-alert[variant="success"]::part(icon) { color: var(--colab-success); }
:is(.colab-dialog, .sl-toast-stack) sl-alert[variant="warning"]::part(icon) { color: var(--colab-warning); }
:is(.colab-dialog, .sl-toast-stack) sl-alert[variant="danger"]::part(icon) { color: var(--colab-danger); }
/* Toasts at the bottom right, on a phone at the bottom on the whole width. */
html .sl-toast-stack { top: auto; bottom: 0; }
@media (max-width: 639.98px) { html .sl-toast-stack { width: 100%; } }

/* «Поделиться» (ui/table/share.ts; in the main UI and in <colab-nav>). */
.share-link { display: grid; gap: var(--colab-space-4); font-size: var(--colab-text-base); }
.share-link p { margin: 0; }
.share-hint, .share-note { color: var(--colab-muted); font-size: var(--colab-text-sm); }
.share-state { display: flex; gap: var(--colab-space-2); align-items: center; font-weight: 600; }
.share-state sl-icon { flex: none; color: var(--colab-faint); }
.share-state.is-active sl-icon { color: var(--colab-success); }
.share-fresh { display: grid; gap: var(--colab-space-2); padding: var(--colab-space-3) var(--colab-space-4); border-left: 3px solid var(--colab-success); border-radius: var(--colab-r); background: var(--colab-success-soft); }
.share-fresh-title { font-weight: 650; }
.share-fresh-note { font-size: var(--colab-text-sm); }
.share-copy-row { display: flex; flex-wrap: wrap; gap: var(--colab-space-2); align-items: center; }
.share-copy-row .share-url { flex: 1 1 12rem; min-width: 0; }
.share-access { display: grid; gap: var(--colab-space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.share-access legend { margin-bottom: var(--colab-space-2); padding: 0; font-size: var(--colab-text-sm); font-weight: 600; }
.share-level { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--colab-space-3); align-items: start; padding: var(--colab-space-3) var(--colab-space-4); border: 1px solid var(--colab-line-strong); border-radius: var(--colab-r-md); background: var(--colab-surface); cursor: pointer; transition: background-color var(--colab-dur) var(--colab-ease), border-color var(--colab-dur) var(--colab-ease); }
.share-level:hover { background: var(--colab-soft); }
.share-level:has(input:checked) { border-color: var(--colab-accent); background: var(--colab-accent-soft); box-shadow: inset 0 0 0 1px var(--colab-accent); }
.share-level input { width: 1rem; height: 1rem; margin: 0.15rem 0 0; accent-color: var(--colab-accent); }
.share-level-title { display: block; font-weight: 600; color: var(--colab-text); }
.share-level-desc { display: block; color: var(--colab-muted); font-size: var(--colab-text-sm); }
.share-access[disabled] .share-level { opacity: 0.6; cursor: default; }
.share-actions { display: flex; flex-wrap: wrap; gap: var(--colab-space-2); align-items: center; justify-content: space-between; }
/* A dangerous action outside a confirmation is a text button, red only in its text (§4.2). */
sl-button.colab-text-danger::part(base) { color: var(--colab-danger); }
sl-button.colab-text-danger::part(base):hover { background: var(--colab-danger-soft); color: var(--colab-danger); }
/* M4 (task 070): «Поделиться» — tabs «Люди» / «Ссылка», members, invites and «Пригласить по email». */
.share-tabs { display: flex; gap: var(--colab-space-5); height: 2.5rem; margin-bottom: var(--colab-space-4); border-bottom: 1px solid var(--colab-line); }
.share-tabs .ab-tab { margin-bottom: -1px; }
.share-people { display: grid; gap: var(--colab-space-3); font-size: var(--colab-text-base); }
.share-people p { margin: 0; }
.share-people[hidden], .share-link[hidden] { display: none; }
.share-field {
  box-sizing: border-box; height: 2.5rem; min-width: 0; 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-text);
  font: var(--colab-text-base) / 1.5 var(--colab-font);
  transition: border-color var(--colab-dur) var(--colab-ease), box-shadow var(--colab-dur) var(--colab-ease);
}
.share-field:focus { outline: none; border-color: var(--colab-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--colab-accent) 30%, transparent); }
.share-field[aria-invalid] { border-color: var(--colab-danger); }
.share-field:disabled { opacity: 0.6; }
.members-invite { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--colab-space-2); align-items: end; }
.members-invite label { display: grid; gap: var(--colab-space-1); min-width: 0; font-size: var(--colab-text-sm); font-weight: 600; color: var(--colab-text); }
.members-invite .share-field { width: 100%; }
.members-note { color: var(--colab-muted); font-size: var(--colab-text-sm); }
.members-field-error { color: var(--colab-danger); font-size: var(--colab-text-sm); }
.share-people .members-title { margin-top: var(--colab-space-2); color: var(--colab-muted); font-size: var(--colab-text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.members-list { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--colab-line); border-radius: var(--colab-r-md); background: var(--colab-surface); }
.member-row, .invite-row { display: flex; gap: var(--colab-space-3); align-items: center; min-width: 0; padding: var(--colab-space-2) var(--colab-space-3); }
.members-list > li + li { border-top: 1px solid var(--colab-line); }
.member-avatar { display: inline-grid; flex: none; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--colab-accent-soft); color: var(--colab-accent-ink); font: 700 0.75rem / 1 var(--colab-font); }
.member-avatar.is-pending { background: var(--colab-soft); color: var(--colab-faint); }
.member-who { display: grid; flex: 1 1 auto; min-width: 0; }
.member-name, .member-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-name { font-weight: 600; }
.member-you { color: var(--colab-muted); font-weight: 400; }
.member-email { color: var(--colab-muted); font-size: var(--colab-text-sm); }
.invite-row .invite-state { white-space: normal; }
.invite-row.is-expired .invite-state { color: var(--colab-warning); }
.member-role { flex: none; height: 2rem; padding: 0 var(--colab-space-2); }
@media (max-width: 639.98px) {
  .members-invite { grid-template-columns: minmax(0, 1fr); }
  .members-invite sl-button { width: 100%; }
  .member-row { flex-wrap: wrap; }
  .member-row .member-who { flex-basis: calc(100% - 2.75rem); }
  .member-row .member-role { margin-left: 2.75rem; }
}
@media (pointer: coarse) { .share-field, .member-role { min-height: 2.75rem; } }

/* D7: системные состояния (§4.9, §4.16, §4.17), shared by the main UI and the widgets (colab-ui.js embeds this file). */
/* An empty state or a failed load: an icon in a circle, a heading, one line, one action. */
.colab-blank { display: flex; flex-direction: column; align-items: center; gap: var(--colab-space-1); box-sizing: border-box; padding: var(--colab-space-8) var(--colab-space-4); background: var(--colab-surface); border: 1px solid var(--colab-line); border-radius: var(--colab-r-md); color: var(--colab-muted); text-align: center; }
.colab-blank-icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-bottom: var(--colab-space-2); border-radius: 50%; background: var(--colab-soft); color: var(--colab-faint); font-size: 2rem; }
.colab-blank strong { color: var(--colab-text); font-size: var(--colab-h3); line-height: 1.35; font-weight: 650; }
.colab-blank p { max-width: 32rem; margin: 0; font-size: var(--colab-text-sm); text-wrap: pretty; }
.colab-blank-action { margin-top: var(--colab-space-3); }
/* A plate above the content (sl-alert.colab-plate): a soft background with a stripe on the left, as in the dialogs. */
sl-alert.colab-plate { display: block; }
sl-alert.colab-plate::part(base) { border: 1px solid var(--colab-line); border-left: 3px solid var(--colab-info); background: var(--colab-info-soft); color: var(--colab-text); font-size: var(--colab-text-base); }
sl-alert.colab-plate::part(message) { padding: var(--colab-space-3) var(--colab-space-4); }
sl-alert.colab-plate[variant="danger"]::part(base) { border-left-color: var(--colab-danger); background: var(--colab-danger-soft); }
sl-alert.colab-plate[variant="danger"]::part(icon) { color: var(--colab-danger); }
sl-alert.colab-plate[variant="warning"]::part(base) { border-left-color: var(--colab-warning); background: var(--colab-warning-soft); }
sl-alert.colab-plate[variant="warning"]::part(icon) { color: var(--colab-warning); }
sl-alert.colab-plate[variant="success"]::part(base) { border-left-color: var(--colab-success); background: var(--colab-success-soft); }
sl-alert.colab-plate[variant="success"]::part(icon) { color: var(--colab-success); }
/* A skeleton until the server answers: soft bars with a quiet pulse, in the shape of what comes. */
.colab-skel { display: block; height: 0.75rem; max-width: 100%; border-radius: var(--colab-r-sm); background: var(--colab-line); animation: colab-pulse 1.4s var(--colab-ease) infinite alternate; }
.colab-skel.colab-skel-title { height: 1.125rem; }
.colab-skel.colab-skel-meta { height: 0.625rem; margin-top: var(--colab-space-2); }
@keyframes colab-pulse { from { opacity: 1; } to { opacity: 0.45; } }
/* On a phone a toast would cover the footer of an open sheet (a dialog at the bottom): while one is open, toasts go on top. */
@media (max-width: 639.98px) { html:has(sl-dialog.colab-dialog[open]) .sl-toast-stack { top: 0; bottom: auto; } }

/* --- 5. Base styles ---------------------------------------------------------------------------------------- */
:where(html) { -webkit-text-size-adjust: 100%; color-scheme: light; }
:where(:root.sl-theme-dark) { color-scheme: dark; }
:where(body) {
  margin: 0;
  font: var(--colab-text-base) / 1.5 var(--colab-font);
  color: var(--colab-text);
  background: var(--colab-bg);
  -webkit-font-smoothing: antialiased;
}
:where(a) { color: var(--colab-accent); text-underline-offset: 0.18em; }
:where(a:hover) { color: var(--colab-accent-hover); }
:where(:focus-visible) { outline: 3px solid var(--colab-focus); outline-offset: 2px; border-radius: 0.25rem; }
:where(h1, h2, h3) { margin: 0; text-wrap: balance; }
:where(code, kbd, pre) { font-family: var(--colab-mono); font-size: 0.9em; }
:where(.skip) { position: absolute; left: 1rem; top: -4rem; z-index: 20; background: var(--colab-accent); color: var(--colab-accent-text); padding: 0.5rem 1rem; border-radius: var(--colab-r); }
:where(.skip:focus) { top: 0.75rem; }

/* Before Shoelace is loaded (or when /lib/shoelace is unreachable) the page stays readable: no stray dialog text,
   buttons look like buttons, cards like panels. An open alert is a message for the human, so it stays as a plain note. */
:where(sl-dialog, sl-drawer, sl-tooltip, sl-menu, sl-popup, sl-option, sl-alert:not([open])):not(:defined) { display: none; }
:where(sl-alert[open]):not(:defined) { display: block; margin: var(--colab-space-2) 0; padding: var(--colab-space-3) var(--colab-space-4); border-radius: var(--colab-r); background: var(--colab-info-soft); color: var(--colab-accent-ink); }
:where(sl-alert[open][variant="danger"]):not(:defined) { background: var(--colab-danger-soft); color: var(--colab-danger); }
:where(sl-alert[open][variant="warning"]):not(:defined) { background: var(--colab-warning-soft); color: var(--colab-warning); }
:where(sl-alert[open][variant="success"]):not(:defined) { background: var(--colab-success-soft); color: var(--colab-success); }
:where(sl-button):not(:defined) {
  display: inline-flex; align-items: center; gap: var(--colab-space-1); min-height: 2rem; padding: 0 0.75rem;
  border: 1px solid var(--colab-line-strong); border-radius: var(--colab-r); background: var(--colab-surface); color: var(--colab-text);
  font-weight: 600; white-space: nowrap; cursor: pointer;
}
:where(sl-button[variant="primary"]):not(:defined) { background: var(--colab-accent); border-color: var(--colab-accent); color: var(--colab-accent-text); }
:where(sl-button[variant="danger"]):not(:defined) { background: var(--colab-danger-fill); border-color: var(--colab-danger-fill); color: #ffffff; }
:where(sl-button[variant="text"]):not(:defined) { background: none; border-color: transparent; color: var(--colab-accent); }
:where(sl-card):not(:defined) { display: block; box-sizing: border-box; padding: var(--colab-space-4); background: var(--colab-surface); border: 1px solid var(--colab-line); border-radius: var(--colab-r-md); }
:where(sl-badge, sl-tag):not(:defined) { display: inline-block; padding: 0.125rem 0.5rem; border-radius: var(--colab-r-pill); background: var(--colab-badge-neutral-bg); color: var(--colab-badge-neutral-fg); font-size: var(--colab-text-xs); font-weight: 600; }
:where(sl-tab):not(:defined) { display: inline-block; padding: var(--colab-space-2) var(--colab-space-3); color: var(--colab-muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}