/* 30-components.css — накладной слой светлого языка team-on.io для элементов
   управления, полей ввода, карточек, ленты сообщений и пустых состояний
   капсулы TeamON One. Подключается ПОСЛЕ app.css и перебивает её тёмную модель.
   Существует отдельным файлом, потому что вся тёмная модель app.css построена
   на «полупрозрачном белом оверлее поверх тёмного» (rgba(255,255,255,.02–.05)
   как фон карточки и rgba(255,255,255,.07–.12) как линия). На молочном фоне
   такой оверлей физически перестаёт быть видимым, поэтому его нельзя починить
   переопределением одних токенов — нужно назвать конкретные компоненты.
   Разметка, имена классов и JS не меняются; правка обратима отключением <link>. */

/* ─────────────────────────────────────────────────────────────────────────
   1. ЛОКАЛЬНЫЕ АЛИАСЫ КОМПОНЕНТОВ
   Это НЕ токены дизайн-системы: ни одна переменная из redesign/00-tokens.css
   здесь не переобъявляется. Префикс --rc- ("redesign components") означает
   значения, которыми пользуется только этот файл; каждое из них выводится из
   токенов через var(<токен>, <запасное значение>), чтобы файл оставался
   читаемым, если слой токенов подключат позже или переименуют шкалу радиусов.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* поверхности */
  --rc-paper: var(--paper, #ffffff);
  --rc-milk: var(--milk, #f5f8ef);
  --rc-sunken: #eff3ea;            /* «утопленный» блок внутри бумаги: код, device-код */
  --rc-hairline: var(--line, #dfe5dc);
  --rc-hairline-strong: var(--line-strong, #cfd7cd); /* рамка интерактивного элемента: должна читаться на бумаге */

  /* текст */
  --rc-ink: var(--ink, #101713);
  --rc-ink-soft: var(--ink-soft, #4d5751);
  --rc-ink-muted: var(--muted-2, #6f7973);

  /* акценты */
  --rc-green: var(--green, #16d34f);
  --rc-green-hover: var(--lime, #d9ff55);
  --rc-green-deep: var(--green-dark, #0d6547); /* текст поверх мятной подложки */
  --rc-mint: #e2f6e7;
  --rc-violet: var(--violet, #7657e8);
  --rc-violet-ink: #4a35a3;        /* текст поверх лиловой подложки */
  --rc-lilac: #eee9fc;
  --rc-mist: #e4f0eb;
  --rc-cream: #eef2cd;

  /* Статусы. Выведены из палитры, как и остальные 23 алиаса этого блока:
     записанные литералами, они разъезжались с ней молча — в интерфейсе
     одновременно жили два янтарных (#8a5a12 здесь и #8a5300 в 50-a11y.css)
     и два красных, и любая правка бренда развела бы их дальше. */
  --rc-danger: var(--danger, #b3261e);
  --rc-danger-soft: #fcecea;
  --rc-danger-line: #f0c8c4;
  --rc-warn: var(--warning, #8a5300);
  --rc-warn-soft: #f7edd6;

  /* геометрия и тень */
  --rc-r-lg: var(--r-lg, 28px);
  --rc-r-md: var(--r-md, 18px);
  --rc-r-sm: var(--r-sm, 10px);
  --rc-r-xs: var(--r-xs, 8px);
  --rc-shadow: var(--card-shadow, 0 18px 60px rgba(16, 23, 19, .06));
  --rc-shadow-tight: 0 6px 18px rgba(16, 23, 19, .05);

  /* кольцо фокуса: системный фиолетовый, единственная роль violet по бренд-системе */
  --rc-focus-ring: 0 0 0 3px rgba(118, 87, 232, .26);
}

/* ─────────────────────────────────────────────────────────────────────────
   2. ОСНОВНАЯ КНОПКА — .primary (перебивает app.css:137–144)
   Зелёная заливка, текст Ink. По бренд-системе смысловой текст поверх ON Green
   набирается Ink, а не белым: белый на #16d34f даёт контраст около 1.9:1.
   ───────────────────────────────────────────────────────────────────────── */
.primary {
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--rc-green);
  border-radius: var(--rc-r-sm);
  background: var(--rc-green);
  color: var(--rc-ink);
  font-weight: 620;
  letter-spacing: -.02em;
  box-shadow: 0 10px 28px rgba(13, 101, 71, .13);
  transition: background-color .15s ease, border-color .15s ease,
              transform .15s ease, box-shadow .15s ease;
}
/* :not(:disabled) поднимает специфичность выше .primary:hover из app.css:142
   и позволяет погасить его filter: brightness(), который на lime выжигает цвет */
.primary:hover:not(:disabled) {
  border-color: var(--rc-green-hover);
  background: var(--rc-green-hover);
  filter: none;
  transform: translateY(-1px);
}
.primary:active:not(:disabled) {
  transform: scale(.985);
  box-shadow: 0 4px 12px rgba(13, 101, 71, .12);
}
.primary:disabled {
  border-color: var(--rc-hairline);
  background: var(--rc-milk);
  color: var(--rc-ink-muted);
  opacity: 1;                      /* вместо opacity:.55 из app.css:143 — на бумаге она даёт грязь */
  box-shadow: none;
  cursor: default;
}

/* .primary как модификатор внутри других компонентов: у этих селекторов
   специфичность выше базовой, поэтому их приходится называть отдельно */
.space-item-action.primary {                       /* app.css:1252 */
  border-color: var(--rc-green);
  background: var(--rc-green);
  color: var(--rc-ink);
  box-shadow: none;
}
.space-item-action.primary:hover {
  border-color: var(--rc-green-hover);
  background: var(--rc-green-hover);
}
.academy-family-actions button.primary,
.academy-family-item button.primary {              /* app.css:863–864 */
  border-color: var(--rc-green);
  background: var(--rc-green);
  color: var(--rc-ink);
}

/* ─────────────────────────────────────────────────────────────────────────
   3. ВТОРИЧНАЯ КНОПКА НА БУМАГЕ
   .secondary в app.css не описана вообще (есть только .browser-control
   .secondary, app.css:1644) — сейчас это системная кнопка браузера.
   ───────────────────────────────────────────────────────────────────────── */
.secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--rc-hairline-strong);
  border-radius: var(--rc-r-sm);
  background: var(--rc-paper);
  color: var(--rc-ink);
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.secondary:hover:not(:disabled) { border-color: var(--rc-ink); background: var(--rc-paper); }
.secondary:active:not(:disabled) { transform: scale(.985); }
.secondary:disabled { border-color: var(--rc-hairline); color: var(--rc-ink-muted); cursor: default; }

/* Стеклянные кнопки шапки и рабочих поверхностей: стекло снимается,
   остаётся бумага и читаемая рамка (app.css:273–281) */
.glass-button,
.round-button {
  border: 1px solid var(--rc-hairline-strong);
  background: var(--rc-paper);
  color: var(--rc-ink);
  backdrop-filter: none;
}
.round-button:hover,
.glass-button:hover {                              /* app.css:1405 */
  border-color: var(--rc-ink);
  background: var(--rc-paper);
}
.glass-button:disabled { border-color: var(--rc-hairline); color: var(--rc-ink-muted); opacity: 1; }

/* Мелкие кнопки-действия карточек (app.css:1248–1253, 1672–1676, 1545) */
.space-item-action,
.browser-request-actions button,
.browser-request-actions a,
.knowledge-add,
.work-expand,
.academy-family-actions button,
.academy-family-item button {
  border: 1px solid var(--rc-hairline-strong);
  border-radius: var(--rc-r-xs);
  background: var(--rc-paper);
  color: var(--rc-ink);
}
.space-item-action:hover,
.browser-request-actions button:hover,
.browser-request-actions a:hover,
.knowledge-add:hover,
.work-expand:hover { border-color: var(--rc-ink); }
.space-item-action.danger {                        /* app.css:1253 */
  border-color: var(--rc-danger-line);
  color: var(--rc-danger);
}
.chatgpt-button {                                  /* app.css:1747 */
  border-color: var(--rc-hairline-strong);
  background: var(--rc-paper);
  color: var(--rc-ink);
}
.academy-family-icon-button {                      /* app.css:845 */
  border-color: var(--rc-hairline-strong);
  background: var(--rc-paper);
  color: var(--rc-ink-soft);
}

/* ─────────────────────────────────────────────────────────────────────────
   4. ТЕКСТОВАЯ КНОПКА И ОПАСНЫЕ ДЕЙСТВИЯ (app.css:405–406, 1782)
   Кегль не меняется — типографика чужая зона; меняются только цвет,
   подчёркивание при наведении и отключённое состояние.
   ───────────────────────────────────────────────────────────────────────── */
.text-button {
  color: var(--rc-ink-soft);
  border-radius: var(--rc-r-xs);
}
.text-button:hover:not(:disabled) {
  color: var(--rc-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.text-button:disabled { color: var(--rc-ink-muted); text-decoration: none; cursor: default; }
.danger-text,
.text-button.danger-text { color: var(--rc-danger); }
.danger-button {
  border: 1px solid var(--rc-danger-line);
  border-radius: var(--rc-r-sm);
  background: var(--rc-danger-soft);
  color: var(--rc-danger);
}
.danger-button:hover:not(:disabled) { border-color: var(--rc-danger); }
.session-logout { color: var(--rc-danger); }

/* ─────────────────────────────────────────────────────────────────────────
   5. КРУГЛЫЕ КНОПКИ И ОТПРАВКА (app.css:1404–1435)
   Кнопка отправки — главное действие ленты, поэтому она зелёная, а не серая.
   ───────────────────────────────────────────────────────────────────────── */
.composer .round-button {
  border-color: transparent;
  background: transparent;
  color: var(--rc-ink-soft);
}
.composer .round-button:hover {
  border-color: var(--rc-hairline-strong);
  background: var(--rc-milk);
  color: var(--rc-ink);
}
.round-button.stop { color: var(--rc-danger); }
#voice.recording {                                 /* app.css:1426 */
  border-color: var(--rc-danger-line);
  background: var(--rc-danger-soft);
  color: var(--rc-danger);
}
.send-button {
  background: var(--rc-green);
  color: var(--rc-ink);
  box-shadow: 0 8px 20px rgba(13, 101, 71, .16);
}
.send-button:hover:not(:disabled) {
  background: var(--rc-green-hover);
  filter: none;
  box-shadow: 0 12px 26px rgba(13, 101, 71, .18);
}
.send-button:disabled {
  background: var(--rc-milk);
  color: var(--rc-ink-muted);
  opacity: 1;
  box-shadow: none;
}
.icon-button {
  display: inline-grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--rc-r-xs);
  background: transparent;
  color: var(--rc-ink-soft);
  cursor: pointer;
}
.icon-button:hover { background: var(--rc-milk); color: var(--rc-ink); }

/* ─────────────────────────────────────────────────────────────────────────
   6. ТАБЫ, СЕГМЕНТЫ, ПЕРЕКЛЮЧАТЕЛИ
   Все они опирались на var(--surface-soft) = rgba(255,255,255,.05)
   (app.css:10) — на бумаге это невидимо, поэтому активное состояние
   переводится на мятную подложку.
   ───────────────────────────────────────────────────────────────────────── */
.task-tabs {                                       /* app.css:306 */
  border-color: var(--rc-hairline);
  background: var(--rc-milk);
}
.task-tab { color: var(--rc-ink-soft); }
.task-tab.active { background: var(--rc-paper); color: var(--rc-ink); box-shadow: var(--rc-shadow-tight); }
.segmented { background: var(--rc-milk); }         /* app.css:1776 */
.segmented button { color: var(--rc-ink-soft); }
.segmented button.active { background: var(--rc-paper); color: var(--rc-ink); box-shadow: var(--rc-shadow-tight); }
.conversation-lanes {                              /* app.css:411–416 */
  border-color: var(--rc-hairline);
  background: var(--rc-milk);
  box-shadow: none;
  backdrop-filter: none;
}
.conversation-lane { color: var(--rc-ink-soft); }
.conversation-lane:hover:not(:disabled) { background: var(--rc-paper); color: var(--rc-ink); }
.conversation-lane.active {
  background: var(--rc-paper);
  color: var(--rc-ink);
  box-shadow: var(--rc-shadow-tight);
}
.nav-item { color: var(--rc-ink-soft); border-radius: var(--rc-r-xs); }
.nav-item:hover { background: var(--rc-milk); color: var(--rc-ink); }
.nav-item.active { background: var(--rc-mint); color: var(--rc-ink); }
.nav-item span { background: var(--rc-green); color: var(--rc-ink); }
.space-surface-tabs { border-bottom-color: var(--rc-hairline); }
.space-surface-tab { color: var(--rc-ink-muted); }
.space-surface-tab:hover { color: var(--rc-ink); }
.space-surface-tab.active,
.space-surface-tab[aria-selected="true"] { color: var(--rc-ink); }
.space-surface-tab.active::after,
.space-surface-tab[aria-selected="true"]::after { background: var(--rc-green); }
.drawer-tabs { border-bottom-color: var(--rc-hairline); }
.journal-filters button {                          /* app.css:1557–1572 */
  border-color: var(--rc-hairline-strong);
  background: var(--rc-paper);
  color: var(--rc-ink-soft);
}
.journal-filters button:hover { border-color: var(--rc-ink); color: var(--rc-ink); }
.journal-filters button[aria-pressed="true"] {
  border-color: transparent;
  background: var(--rc-mint);
  color: var(--rc-green-deep);
}
.journal-filters button span { background: var(--rc-milk); color: var(--rc-ink-muted); }
.journal-filters button[aria-pressed="true"] span { background: var(--rc-paper); color: var(--rc-green-deep); }

/* ─────────────────────────────────────────────────────────────────────────
   7. ПИЛЮЛИ, БЕЙДЖИ, ЧИПЫ (app.css:282–289, 429–434, 1241, 1466, 1597–1603)
   Нейтральная пилюля — мист на бумаге; цвет включается только состоянием.
   ───────────────────────────────────────────────────────────────────────── */
.soft-pill {
  border-color: transparent;
  background: var(--rc-mist);
  color: var(--rc-ink-soft);
}
.soft-pill[data-state="ready"] { border-color: transparent; background: var(--rc-mint); color: var(--rc-green-deep); }
.soft-pill[data-state="draft"] { border-color: transparent; background: var(--rc-cream); color: var(--rc-warn); }
.soft-pill[data-state="blocked"],
.soft-pill[data-state="error"] { border-color: transparent; background: var(--rc-danger-soft); color: var(--rc-danger); }
.button-count,
.conversation-lane-badge,
.team-project-unread { background: var(--rc-green); color: var(--rc-ink); }
.space-winner-badge {
  border-color: transparent;
  background: var(--rc-mint);
  color: var(--rc-green-deep);
}
.journal-state {
  border-color: transparent;
  background: var(--rc-mist);
  color: var(--rc-ink-soft);
}
.journal-state-pending { border-color: transparent; background: var(--rc-lilac); color: var(--rc-violet-ink); }
.journal-state-accepted { border-color: transparent; background: var(--rc-mint); color: var(--rc-green-deep); }
.capability-list li {
  border-color: transparent;
  background: var(--rc-mist);
  color: var(--rc-ink-soft);
}
.attachment-chip {                                 /* держался на var(--surface-soft) */
  background: var(--rc-mist);
  color: var(--rc-ink-soft);
}
.attachment-chip button { color: var(--rc-ink-muted); }
.studio-selection-chip {
  border-color: transparent;
  background: var(--rc-lilac);
  color: var(--rc-violet-ink);
}
.studio-selection-chip small { color: var(--rc-violet-ink); }
.studio-selection-chip button { color: var(--rc-ink-muted); }
.context-source-receipt { background: var(--rc-lilac); color: var(--rc-violet-ink); }
.voice-draft-chip { background: var(--rc-mist); color: var(--rc-ink-soft); }

/* ─────────────────────────────────────────────────────────────────────────
   8. ПОЛЯ ВВОДА И TEXTAREA
   Перебивает app.css:132–136, 312–317, 900–905, 1261–1263, 1511–1520,
   1617–1622, 1698–1701, 1718–1722. В app.css у нескольких полей стоит
   color-scheme: dark — его надо снять явно, иначе календарь, выпадающий
   список и автозаполнение остаются тёмными.
   Кегль 16px обязателен: при меньшем размере iOS Safari зумит всю страницу
   при фокусе на поле, и капсула «прыгает».
   ───────────────────────────────────────────────────────────────────────── */
.login-card input,
.task-form input,
.task-form select,
.task-form textarea,
.identity-form input,
.identity-form textarea,
.learning-editor input,
.learning-editor select,
.learning-editor textarea,
.provider-form select,
.credential-field input,
.connector-setup-panel .provider-form input,
.space-judgment-form textarea,
.academy-family-dialog input,
.academy-family-dialog select,
.academy-family-dialog textarea {
  border: 1px solid var(--rc-hairline-strong);
  border-radius: var(--rc-r-sm);
  background: var(--rc-paper);
  color: var(--rc-ink);
  color-scheme: light;
  font-size: 16px;
  line-height: 1.5;
}
/* однострочные поля: высота под кегль 16px */
.login-card input,
.task-form input,
.task-form select,
.identity-form input,
.learning-editor input,
.learning-editor select,
.provider-form select,
.credential-field input,
.connector-setup-panel .provider-form input,
.academy-family-dialog input,
.academy-family-dialog select {
  min-height: 44px;
  padding: 0 12px;
}
/* многострочные поля */
.task-form textarea,
.identity-form textarea,
.learning-editor textarea,
.space-judgment-form textarea,
.academy-family-dialog textarea,
.composer textarea {
  padding-block: 10px;
}
.space-judgment-form textarea,
.learning-editor textarea { padding-inline: 12px; }

.login-card input:hover,
.task-form input:hover,
.task-form select:hover,
.task-form textarea:hover,
.identity-form input:hover,
.identity-form textarea:hover,
.credential-field input:hover,
.provider-form select:hover { border-color: var(--rc-ink-muted); }

.login-card input:focus,
.task-form input:focus,
.task-form select:focus,
.task-form textarea:focus,
.identity-form input:focus,
.identity-form textarea:focus,
.learning-editor input:focus,
.learning-editor select:focus,
.learning-editor textarea:focus,
.provider-form select:focus,
.credential-field input:focus,
.space-judgment-form textarea:focus,
.academy-family-dialog input:focus,
.academy-family-dialog select:focus,
.academy-family-dialog textarea:focus {
  border-color: var(--rc-green);
  box-shadow: 0 0 0 3px rgba(22, 211, 79, .16);
}
/* :not(...) выводит из-под правила range, checkbox и radio: у них фон рисует
   не подложку поля, а сам виджет, и заливка молоком их ломает */
input:disabled:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
select:disabled,
textarea:disabled {
  background: var(--rc-milk);
  color: var(--rc-ink-muted);
  cursor: default;
}
::placeholder { color: var(--rc-ink-muted); opacity: 1; }
.composer textarea::placeholder { color: var(--rc-ink-muted); }
.composer textarea { color: var(--rc-ink); }
input[type="range"],
.range-setting input,
.continuity-form input[type="range"] { accent-color: var(--rc-green); }
.space-winner-choice input,
input[type="checkbox"],
input[type="radio"] { accent-color: var(--rc-green); }

/* ─────────────────────────────────────────────────────────────────────────
   9. КАРТОЧКИ И ПАНЕЛИ — бумага, одна мягкая тень, без стекла
   Перебивает белые оверлеи app.css:329–334, 583–586, 1231–1234, 1272,
   1308–1318, 1483–1493, 1506, 1535–1538, 1611–1613, 1633–1636, 1646–1649,
   1661–1664, 1677–1680, 1702, 1707, 1725, 1740.
   ───────────────────────────────────────────────────────────────────────── */
.panel,
.space-item,
.skill-card,
.canvas-result,
.tool-card,
.artifact-card,
.activity-sheet,
.knowledge-sheet,
.native-module-card,
.browser-route,
.browser-request,
.connection-list,
.provider-access,
.chatgpt-auth,
.skill-review details,
.learning-editor,
.mission-card,
.timeline-card,
.notebook-card,
.academy-family-item,
.welcome-card,
.login-card {
  border: 1px solid var(--rc-hairline);
  background: var(--rc-paper);
  color: var(--rc-ink);
  backdrop-filter: none;
}
/* крупные самостоятельные поверхности — большая шкала скругления и мягкая тень */
.panel,
.canvas-result,
.skill-card,
.activity-sheet,
.knowledge-sheet,
.connection-list,
.mission-card,
.login-card {
  border-radius: var(--rc-r-lg);
  box-shadow: var(--rc-shadow);
}
/* вложенные объекты — средняя шкала, без собственной тени: одна поверхность
   не должна отбрасывать тень внутри другой */
.space-item,
.tool-card,
.artifact-card,
.native-module-card,
.browser-route,
.browser-request,
.provider-access,
.chatgpt-auth,
.skill-review details,
.learning-editor,
.timeline-card,
.notebook-card,
.academy-family-item,
.onboarding-card {
  border-radius: var(--rc-r-md);
  box-shadow: none;
}
.login-card { backdrop-filter: none; }             /* app.css:126 — снимаем стекло */
.mission-card { background: var(--rc-lilac); border-color: transparent; }
.mission-card p,
.mission-card-heading strong { color: var(--rc-ink); }
.mission-card small,
.mission-card-heading span { color: var(--rc-violet-ink); }
.timeline-card { border-top-color: var(--rc-hairline); }
.list-row { border-top-color: var(--rc-hairline); }
.connection-row + .connection-row,
.knowledge-block + .knowledge-block,
.activity-entry,
.activity-sheet-heading { border-color: var(--rc-hairline); }
.journal-entry + .journal-entry { border-top-color: var(--rc-hairline); }
/* точка на линии журнала: её обводка имитировала цвет тёмного фона (app.css:1588) */
.journal-entry::before { border-color: var(--rc-milk); background: var(--rc-ink-muted); }
.journal-entry-pending { background: var(--rc-lilac); }
.journal-entry-pending::before { background: var(--rc-violet); }
.journal-entry-accepted::before { background: var(--rc-green); }
.journal-entry-focused { outline-color: var(--rc-violet); }
.memory-card { background: transparent; }
.memory-card p { color: var(--rc-ink); }
.memory-card small,
.memory-evidence,
.memory-evidence ul { color: var(--rc-ink-muted); }
.memory-evidence summary { color: var(--rc-violet-ink); }

/* Онбординг: карточка-приглашение. Радиальный градиент и точечная сетка
   из app.css:1285–1298 — типовой тёмный приём, на бумаге заменяются
   спокойной мятной поверхностью. */
.onboarding-canvas {
  border-color: transparent;
  border-radius: var(--rc-r-lg);
  background: var(--rc-mint);
  box-shadow: none;
}
.onboarding-canvas::before { content: none; }
.onboarding-copy { color: var(--rc-ink-soft); }
.onboarding-progress {
  border-color: transparent;
  background: var(--rc-paper);
  color: var(--rc-green-deep);
}
.onboarding-card {
  border-color: var(--rc-hairline);
  background: var(--rc-paper);
  color: var(--rc-ink);
}
.onboarding-card:hover { border-color: var(--rc-ink-muted); background: var(--rc-paper); }
.onboarding-card.complete { border-color: var(--rc-green); }
.onboarding-card-copy { color: var(--rc-ink-soft); }
.onboarding-card-arrow { color: var(--rc-green-deep); }
.onboarding-card-header small { color: var(--rc-ink-muted); }
.onboarding-card.complete .onboarding-card-header small { color: var(--rc-green-deep); }
.onboarding-complete {
  border-color: var(--rc-green);
  border-radius: var(--rc-r-sm);
  background: var(--rc-green);
  color: var(--rc-ink);
}
.onboarding-complete:hover { background: var(--rc-green-hover); border-color: var(--rc-green-hover); }

/* Стартовые подсказки под приветствием (app.css:514–521) */
.starter-prompt {
  border-color: var(--rc-hairline-strong);
  background: var(--rc-paper);
  color: var(--rc-ink-soft);
  backdrop-filter: none;
}
.starter-prompt:hover { border-color: var(--rc-ink); color: var(--rc-ink); }
.starter-prompt.onboarding-action {
  border-color: transparent;
  background: var(--rc-mint);
  color: var(--rc-green-deep);
}

/* Текст внутри карточек, зашитый светлыми литералами под тёмный фон */
.space-item strong,
.knowledge-block-heading strong,
.browser-route strong,
.browser-request strong,
.connection-row strong,
.native-module-card strong,
.canvas-result header strong,
.work-event-copy strong { color: var(--rc-ink); }
.space-item small,
.space-item p,
.space-item-meta,
.browser-route small,
.browser-request small,
.connection-row small,
.native-module-card p,
.canvas-result header span,
.knowledge-help,
.provider-note,
.credential-field small,
.chatgpt-auth-status,
.skill-review summary,
.skill-review small,
.timeline-meta time,
.work-event-copy small { color: var(--rc-ink-muted); }
.canvas-body,
.canvas-artifact,
.skill-card p,
.timeline-card p,
.section-intro p,
.welcome-card > p:not(.eyebrow),
.panel pre,
.identity-form label,
.task-form label,
.provider-form label,
.credential-field,
.learning-editor label,
.settings-list legend,
.continuity-form label,
.connection-section-heading h4,
.connection-section-heading p,
.academy-family-dialog label { color: var(--rc-ink-soft); }
.canvas-artifact { border-color: var(--rc-hairline); }
.bubble a,
.artifact-card a,
.canvas-body a,
.canvas-artifact a,
.chatgpt-device a,
.browser-pairing a,
.shared-message-files a { color: var(--rc-violet-ink); }
.product-version { color: var(--rc-ink-muted); }

/* ─────────────────────────────────────────────────────────────────────────
   10. УТОПЛЕННЫЕ БЛОКИ ВНУТРИ КАРТОЧЕК: код, device-код, превью
   В app.css это почти чёрные плашки (#08080c, #09090d, #0c0b11) —
   на бумаге они читаются как дыра.
   ───────────────────────────────────────────────────────────────────────── */
.bubble pre,
.canvas-body pre,
.skill-review pre,
.chatgpt-device {
  border: 1px solid var(--rc-hairline);
  border-radius: var(--rc-r-sm);
  background: var(--rc-sunken);
  color: var(--rc-ink);
}
.bubble code { background: var(--rc-sunken); color: var(--rc-ink); }
.bubble pre code { background: none; }
.chatgpt-device span { color: var(--rc-ink-muted); }
.chatgpt-device code { color: var(--rc-ink); }
.browser-pairing {
  border-color: transparent;
  border-radius: var(--rc-r-sm);
  background: var(--rc-lilac);
}
.browser-pairing code { color: var(--rc-violet-ink); }
.browser-pairing span { color: var(--rc-ink-soft); }
.builder-site-loading,
.builder-site {
  border-color: var(--rc-hairline);
  border-radius: var(--rc-r-md);
  background: var(--rc-milk);
  color: var(--rc-ink-muted);
}

/* ─────────────────────────────────────────────────────────────────────────
   11. КОМПОЗЕР (app.css:1364–1376)
   Снимается стекло и тёмная подложка; фокус подсвечивается зелёным —
   это единственное место, где пользователь действительно действует.
   ───────────────────────────────────────────────────────────────────────── */
.composer-frame {
  border-color: var(--rc-hairline-strong);
  background: var(--rc-paper);
  box-shadow: var(--rc-shadow);
  backdrop-filter: none;
}
.composer-frame:focus-within {
  border-color: var(--rc-green);
  box-shadow: var(--rc-shadow), 0 0 0 3px rgba(22, 211, 79, .14);
}
.composer-status { color: var(--rc-ink-muted); }
.composer-status::before { background: var(--rc-green); box-shadow: none; }
.ask-teamon {
  border-color: var(--rc-hairline-strong);
  background: var(--rc-paper);
  color: var(--rc-ink-soft);
}
.ask-teamon:hover { border-color: var(--rc-ink); color: var(--rc-ink); }
.ask-teamon.active {
  border-color: transparent;
  background: var(--rc-mint);
  color: var(--rc-green-deep);
  box-shadow: none;
}
.shared-reply {                                    /* app.css:1445–1449 */
  border-left-color: var(--rc-green);
  background: var(--rc-mint);
}
.shared-reply strong { color: var(--rc-ink); }
.shared-reply small,
.shared-reply button { color: var(--rc-ink-muted); }

/* ─────────────────────────────────────────────────────────────────────────
   12. ЛЕНТА СООБЩЕНИЙ (app.css:522–548, 441–503)
   Два разных пузыря без обводок: реплика человека — мятная заливка,
   ответ агента — бумага. Оба различимы на молочном фоне страницы за счёт
   заливки, а не рамки.
   ───────────────────────────────────────────────────────────────────────── */
.message { color: var(--rc-ink); }
/* :not(...) исключает служебные сообщения: квитанции и микростатусы
   не должны превращаться в полноразмерную карточку */
.message.assistant:not(.micro-status):not(.action-receipt):not(.memory-update-receipt) .bubble {
  padding: 14px 18px;
  border-radius: var(--rc-r-md);
  background: var(--rc-paper);
  color: var(--rc-ink);
}
.message.user .bubble {
  border: 0;
  border-radius: var(--rc-r-md);
  background: var(--rc-mint);
  color: var(--rc-ink);
  box-shadow: none;
}
.message.user .muted { color: var(--rc-ink-muted); }
.message.micro-status .bubble { color: var(--rc-ink-muted); }
.message.assistant:not(.micro-status) .bubble.streaming::after { background: var(--rc-green); opacity: 1; }

.shared-message-avatar {
  border-color: transparent;
  border-radius: var(--rc-r-xs);
  background: var(--rc-mist);
  color: var(--rc-ink-soft);
}
.shared-message.agent .shared-message-avatar {
  border-color: transparent;
  background: var(--rc-mint);
  color: var(--rc-green-deep);
}
.shared-message-bubble {
  border: 0;
  background: var(--rc-mint);
  color: var(--rc-ink);
}
.shared-message.own .shared-message-bubble { background: var(--rc-mint); }
.shared-message.agent .shared-message-bubble {
  padding: 12px 14px;
  border: 0;
  border-radius: var(--rc-r-md);
  background: var(--rc-paper);
  color: var(--rc-ink);
}
.shared-message.referenced .shared-message-bubble { box-shadow: 0 0 0 2px var(--rc-green); }
.shared-message-bubble.running { color: var(--rc-ink-muted); }
.shared-message-bubble.running::after { background: var(--rc-green); }
.shared-message-bubble.failed,
.shared-message-bubble.cancelled { color: var(--rc-danger); }
.shared-message-meta strong { color: var(--rc-ink); }
.shared-message-meta time,
.shared-message-reply { color: var(--rc-ink-muted); }
.shared-message-reply:hover { color: var(--rc-ink); }
.shared-message-quote {
  border-left-color: var(--rc-green);
  background: var(--rc-paper);
  color: var(--rc-ink-soft);
}
.shared-message.agent .shared-message-quote { background: var(--rc-milk); }
.shared-message-files a {
  border-color: var(--rc-hairline);
  border-radius: var(--rc-r-sm);
  background: var(--rc-paper);
  color: var(--rc-ink);
}
.shared-message-files a:hover { border-color: var(--rc-ink); background: var(--rc-paper); }
.shared-message-files small { color: var(--rc-ink-muted); }

/* Квитанции в ленте: подтверждение действия и обновление памяти */
.message.action-receipt .bubble {
  border-color: transparent;
  border-radius: var(--rc-r-sm);
  background: var(--rc-mint);
  color: var(--rc-green-deep);
}
.memory-receipt-mark {
  border-color: transparent;
  background: var(--rc-paper);
  color: var(--rc-green-deep);
}
.memory-receipt-copy strong { color: var(--rc-ink); }
.memory-receipt-copy small,
.memory-receipt-status { color: var(--rc-ink-soft); }
.memory-receipt-status:not(:empty) { color: var(--rc-danger); }
.space-event-receipt {
  border-color: transparent;
  border-radius: var(--rc-r-md);
  background: var(--rc-lilac);
  color: var(--rc-ink);
}
.space-event-receipt-mark { background: var(--rc-paper); color: var(--rc-violet-ink); }
.space-event-receipt-copy small,
.space-event-receipt-copy span { color: var(--rc-violet-ink); }
.turn-status-pulse { color: var(--rc-green); }
.turn-status-label { color: var(--rc-ink-soft); }
.turn-status-elapsed { color: var(--rc-ink-muted); }
.artifact-proof { color: var(--rc-ink-muted); }

/* ─────────────────────────────────────────────────────────────────────────
   13. ВЫДВИЖНАЯ ПАНЕЛЬ (app.css:1470–1479)
   Подложка перестаёт быть чёрной и стеклянной: на светлой теме затемнение
   делается чернильным цветом с низкой прозрачностью.
   ───────────────────────────────────────────────────────────────────────── */
.drawer-backdrop {
  background: rgba(16, 23, 19, .24);
  backdrop-filter: none;
}
.drawer {
  border-left-color: var(--rc-hairline);
  background: var(--rc-paper);
  box-shadow: var(--rc-shadow);
}
.drawer-header h2 { color: var(--rc-ink); }
.academy-family-dialog header > button {
  border: 1px solid var(--rc-hairline-strong);
  background: var(--rc-paper);
  color: var(--rc-ink-soft);
}

/* ─────────────────────────────────────────────────────────────────────────
   14. ПУСТЫЕ СОСТОЯНИЯ
   Они были рассчитаны на тёмный фон: светлый заголовок и серо-синий текст.
   Рамка не добавляется — в новом языке разделителей почти нет.
   ───────────────────────────────────────────────────────────────────────── */
.work-empty { color: var(--rc-ink-muted); }
.work-empty strong { color: var(--rc-ink); }
.work-empty span { color: var(--rc-ink-muted); }
.work-empty .space-item-action {
  border-color: var(--rc-green);
  background: var(--rc-green);
  color: var(--rc-ink);
}
.work-empty .space-item-action:hover {
  border-color: var(--rc-green-hover);
  background: var(--rc-green-hover);
}
.shared-chat-empty { color: var(--rc-ink-muted); }
.shared-chat-empty strong { color: var(--rc-ink); }
.shared-chat-empty span { color: var(--rc-ink-muted); }
.timeline-empty,
.space-surface-status,
.knowledge-journal-summary,
.journal-state-note,
.world-invite-result { color: var(--rc-ink-muted); }
.work-surface-note { border-top-color: var(--rc-hairline); color: var(--rc-ink-muted); }

/* ─────────────────────────────────────────────────────────────────────────
   15. ОБЩИЕ СОСТОЯНИЯ: фокус, отключено, «в процессе»
   app.css:30 глобально гасит outline и заменяет его тенью (app.css:32–34)
   на цвете --accent-rgb. Механику не меняем, меняем только цвет и плотность
   кольца, чтобы оно читалось на бумаге.

   ВАЖНО ПРО ЭТИ ТРИ ПРАВИЛА. Кольцо фокуса перешло к 50-a11y.css: он
   подключается позже и с тем же весом (0,1,1) возвращает настоящий outline
   плюс молочную прокладку той же ширины, что зазор. Правила ниже с простыми
   селекторами он перекрывает целиком — они остаются только страховкой
   на случай, если слой доступности отключат.

   А вот .primary записан весом (0,2,0) и слою доступности НЕ проигрывал:
   замер на живом стенде показал у него сразу два кольца — чернильный outline
   с отступом 2px и фиолетовую тень 0 0 0 3px rgba(118,87,232,.26). Фиолетовый
   ореол садился ровно в тот двухпиксельный зазор, где по замыслу должна быть
   молочная прокладка, и двухтоновое кольцо Ink/Milk превращалось в мутное.
   Поэтому здесь у .primary остаётся только собственная тень покоя,
   а прокладку он берёт ту же, что и все остальные элементы.
   ───────────────────────────────────────────────────────────────────────── */
button:focus-visible,
a:focus-visible,
summary:focus-visible,
[role="tab"]:focus-visible { box-shadow: var(--rc-focus-ring); }
input:focus-visible,
select:focus-visible,
textarea:focus-visible { box-shadow: var(--rc-focus-ring); }
.primary:focus-visible {
  box-shadow:
    0 10px 28px rgba(13, 101, 71, .13),
    0 0 0 var(--a11y-ring-gap, 2px) var(--a11y-ring-inset, #f5f8ef);
}

/* «В процессе»: единственный признак, который реально ставит JS помимо
   disabled, — это aria-busy на контейнере или на самой кнопке */
button[aria-busy="true"],
.chatgpt-button:disabled {
  opacity: .7;
  cursor: progress;
}
[aria-busy="true"] .primary,
[aria-busy="true"] .secondary { cursor: progress; }

@media (prefers-reduced-motion: reduce) {
  .primary,
  .secondary,
  .primary:hover:not(:disabled),
  .primary:active:not(:disabled),
  .secondary:active:not(:disabled) { transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   ЧЕГО Я СОЗНАТЕЛЬНО НЕ ТРОГАЛ И ПОЧЕМУ

   • Токены :root в app.css:1–19 и teamon-workspace-shell.css:3–16, а также
     --accent-rgb, --surface-soft, --line, --line-strong — это зона
     redesign/00-tokens.css. Я только опираюсь на них через var().
   • Кегли, начертания и межстрочные интервалы — зона типографики. Исключение
     одно и оно оговорено в задании: font-size: 16px в полях ввода, иначе iOS
     зумит страницу при фокусе. Ещё одно точечное отступление — font-weight
     кнопки .primary (620 вместо 800 из app.css:139): это часть спецификации
     кнопки на лендинге, а не общее типографическое правило.
   • Медиазапросы и мобильные ширины (app.css:2215–2249 и безусловные правила
     с app.css:2292) — чужая зона. Единственный мой @media — это
     prefers-reduced-motion, он не про ширину.
   • Геометрия оболочки: body { overflow: hidden } (app.css:24), .app-shell
     (app.css:146–147), .workbench, .chat-stage, .work-surface, ширины и
     grid-template — это зона макета.
   • Декоративные слои: .boot-cosmos i (84–92), .login-orbit (114–122),
     .ambient-grid (157–162), виньетка .app-shell::after (163–168) и
     #particle-canvas (index.html:79). Их судьбу решает слой фона: они
     осмысленны только на тёмном, но выключать их из слоя компонентов
     неправильно — это не элементы управления.
   • .team-rail и всё внутри него, включая .world-empty-cta (app.css:2058–2068)
     — это навигационная рейка. Пустое состояние там завязано на фон рейки,
     который задаёт слой оболочки; перекрасить его отдельно значит рискнуть
     светлым текстом на светлом фоне, если рейка останется тёмной.
   • Семейства .academy-*, .studio-*, .journey-*, .builder-* покрыты только в
     части общих примитивов (кнопки, поля, карточка .academy-family-item,
     диалог). У них есть собственные локальные переменные
     (например --academy-card-rgb, app.css:1020) и своя сетка состояний —
     это отдельная работа, а не косметика поверх.
   • Скроллбары (scrollbar-color в app.css:507, 1389) оставлены: они
     настроены под тёмную тему, но это свойство поверхности, а не контрола.
   • !important не использован ни разу.
   ───────────────────────────────────────────────────────────────────────── */