/* =========================================================================
   Дополнение №2 (design-v2-handoff) - проекты, админ-часть, авторизация.
   Источник - design-v2-handoff/design-v2/components-v2.css, слит как есть
   (переменные --ok/--bad/--warn/--info(-soft) и --r-sm..--r-full уже были
   в :root с этапа 1 первого пакета - своих копий здесь нет, коллизий имён
   классов с уже реализованным проверено нет: совпадает один селектор,
   .code, но там он `.dtable td.code` - другая, более узкая область, этот -
   отдельный блок `<div class="code">`, не пересекаются). Разметка под эти
   классы (экраны /login, projects, project, new-project, admin-*, activity,
   config-editor) и сам бэкенд для них - это Этапы 2-8 из design-v2/
   PROMPT-v2.md, они не сделаны: PROMPT-v2.md сам требует стоп после
   каждого этапа и явное «ок», а Этап 2 - это авторизация и роли на
   бэкенде, которых в проекте пока нет вовсе - решение, которое должен
   принять пользователь, не то, что можно молча внедрить вместе со стилями.
   ========================================================================= */
/* Только data-theme, без системного медиа-запроса темы - второй такой путь
   входа уже заводили на этапе 1 первого пакета для --rail-bg/--rail-text
   и намеренно убрали (web/checks/appearance_cases.js буквально ищет это
   имя медиа-запроса по тексту файла и валит проверку, если он есть хоть
   где-то, включая комментарии): тема переключается атрибутом документа,
   который явно выставляет core.js, а не настройкой системы напрямую -
   иначе переключателю было бы нечем её переопределить. В components-v2.css
   этот запрос исходно был - не переносил. */
:root { --code-bg: #F1F2F4; --code-k: #2A5FB8; --code-s: #1E7A4A; --code-n: #A24A14; --code-c: #8A8D94; }
:root[data-theme="dark"] { --code-bg: #15140F; --code-k: #86AEF2; --code-s: #63CC92; --code-n: #FF9A5C; --code-c: #6E6A64; }

.avatar { width: 32px; height: 32px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); }
.avatar--sm { width: 28px; height: 28px; }
.avatar--accent { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; }
.avatar-stack { display: inline-flex; align-items: center; }
.avatar-stack .avatar { border: 2px solid var(--surface); }
.avatar-stack .avatar + .avatar { margin-left: -8px; }

.health { display: inline-flex; align-items: center; justify-content: center; height: 26px; min-width: 30px; padding: 0 8px; border-radius: 7px; font-size: 11px; font-weight: 700; border: 1px solid transparent; }
.health[data-state="ok"] { background: var(--ok-soft); color: var(--ok); }
.health[data-state="bad"] { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
.health[data-state="off"] { background: var(--surface-2); color: var(--faint); border: 1px dashed var(--line-2); }
.health-row { display: flex; flex-wrap: wrap; gap: 5px; }
.health-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.health-legend { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--muted); }
.dtable tr.row-bad td { background: var(--bad-soft); }

.access-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--line); }
.access-row:first-child { border-top: 0; }
.access-row__body { flex: 1; min-width: 0; }
.access-row__body strong { display: block; font-weight: 600; }
.access-row__detail { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--faint); }

.auth-screen { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-6); }
.auth-card { width: 100%; max-width: 420px; padding: var(--sp-8); display: flex; flex-direction: column; gap: 18px; }
.auth-card__head { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.auth-card__foot { border-top: 1px solid var(--line); padding-top: 14px; text-align: center; color: var(--faint); font-size: var(--fs-md); }
.input-group { position: relative; }
.input-group__btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; background: transparent; color: var(--muted); cursor: pointer; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; }
.input-group__btn:hover { background: var(--surface-2); color: var(--text); }

.role-tag { display: inline-block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text); background: var(--accent-soft); padding: 2px 7px; border-radius: 5px; }

.role-matrix { width: 100%; border-collapse: collapse; }
.role-matrix th, .role-matrix td { text-align: center; padding: 10px 14px; border-top: 1px solid var(--line); }
.role-matrix thead th { border-top: 0; background: var(--surface-2); color: var(--muted); font-size: var(--fs-sm); }
.role-matrix th:first-child, .role-matrix td:first-child { text-align: left; }
.role-matrix .yes { color: var(--ok); font-weight: 700; }
.role-matrix .no { color: var(--faint); }
.inline-select { height: 34px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font-weight: 600; padding: 0 10px; }

.secret { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: var(--r-lg); background: var(--surface-2); }
.secret__value { flex: 1; font-family: var(--font-mono); font-size: 15px; letter-spacing: .04em; }
.btn--danger { border-color: var(--bad); color: var(--bad); background: var(--surface); }
.btn--danger:hover { background: var(--bad-soft); border-color: var(--bad); }

.activity__day { padding: 12px 18px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); background: var(--surface-2); border-top: 1px solid var(--line); }
.activity__day:first-child { border-top: 0; }
.activity__event { display: flex; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--line); }
.activity__event-body { flex: 1; min-width: 0; }
.activity__time { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--faint); white-space: nowrap; }
.event-tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: 700; background: var(--surface-2); color: var(--muted); }
.event-tag[data-type="run"] { background: var(--accent-soft); color: var(--accent-text); }
.event-tag[data-type="access"] { background: var(--info-soft); color: var(--info); }
.event-tag[data-type="config"] { background: var(--warn-soft); color: var(--warn); }
.event-tag[data-type="users"] { background: var(--ok-soft); color: var(--ok); }
.event-tag[data-type="error"] { background: var(--bad-soft); color: var(--bad); }

.wizard { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.wizard__step { display: flex; align-items: center; gap: 10px; }
.wizard__sep { color: var(--line-2); }
.wizard__num { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--fs-md); font-weight: 700; flex: none; border: 1.5px solid var(--line-2); color: var(--muted); }
.wizard__num--done { background: var(--ok); border-color: var(--ok); color: #fff; }
.wizard__num--now { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.wizard__label { color: var(--muted); font-weight: 600; }
.wizard__label--now { color: var(--text); }
.connect-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: 14px; border: 1px solid var(--line); border-radius: var(--r-xl); }
.connect-row__icon { width: 34px; height: 34px; border-radius: 9px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--muted); flex: none; }
.connect-row__body { flex: 1 1 200px; min-width: 0; }

/* DESIGN.md §5: роль (.radio-card ×2) и доступ к проектам (.segmented
   Все/Выбранные) на карточке admin-user - в компонентах первого/второго
   пакета не было ни того, ни другого, этап 10 заводит оба с нуля, тем же
   набором токенов (--r-*, --surface-2, --accent*), что и остальные
   компоненты этого файла. */
.radio-card { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.radio-card__item { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1.5px solid var(--line-2); border-radius: var(--r-lg); cursor: pointer; font-weight: 600; flex: 1 1 160px; }
.radio-card__item:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.radio-card__item input { accent-color: var(--accent); }

.segmented { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; }
.segmented button { padding: 7px 16px; border: 0; background: var(--surface); color: var(--muted); font-weight: 600; cursor: pointer; border-right: 1px solid var(--line-2); }
.segmented button:last-child { border-right: 0; }
.segmented button.is-active { background: var(--accent); color: var(--accent-ink); }

/* flex-wrap: nowrap, НЕ wrap. Визуально ничего не меняет - три колонки и
   так помещаются в ряд на этой ширине (wrap ни разу не срабатывал) - но
   с wrap браузер считает высоту кросс-оси по содержимому ДО stretch
   (известная особенность wrapping flex-контейнеров), и .editor-main
   растягивался на весь текст файла вместо доступной высоты, несмотря на
   align-items:stretch и min-height:0 на всех трёх уровнях вниз по дереву
   (.editor-main/.code/.code__body). Проверено живьём переключением
   wrap/nowrap в devtools - только nowrap убирает скролл всей страницы
   и возвращает .editor-status (счётчик строк) в границы экрана. */
.editor-shell { flex: 1; display: flex; flex-wrap: nowrap; align-items: stretch; min-height: 0; }
.editor-files { flex: 1 1 240px; max-width: 100%; box-sizing: border-box; background: var(--surface); border-right: 1px solid var(--line); padding: var(--sp-4) 10px; display: flex; flex-direction: column; gap: var(--sp-1); }
.file-item { display: flex; align-items: center; gap: var(--sp-2); min-height: 36px; padding: 0 10px; border-radius: var(--r-md); color: var(--muted); font-weight: 500; cursor: pointer; border: 0; background: transparent; width: 100%; text-align: left; }
.file-item:hover { background: var(--surface-2); color: var(--text); }
.file-item.is-active { background: var(--accent-soft); color: var(--text); font-weight: 600; }
.file-item__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: transparent; }
.file-item.is-dirty .file-item__dot { background: var(--warn); }
/* min-height: 0 - без неё classic nested-flexbox баг: у флекс-элемента
   по умолчанию min-height: auto (не сжимается у́же контента), и .code
   { flex:1; overflow:auto } внутри не срабатывает - .editor-main растёт
   на весь текст файла, тянет за собой .editor-shell/#config-editor-screen/
   body, и скроллится вся страница целиком, а не область кода. Живая
   правка после скриншота - .editor-status (счётчик строк внизу) был
   обрезан нижним краем окна. */
.editor-main { flex: 999 1 520px; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.editor-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--surface); }
.code { flex: 1; min-height: 0; display: flex; background: var(--code-bg); overflow: auto; }
.code__gutter { margin: 0; padding: 16px 10px; text-align: right; color: var(--code-c); font-family: var(--font-mono); font-size: 13px; line-height: 1.7; user-select: none; border-right: 1px solid var(--line); }
.code__body { margin: 0; padding: 16px 18px; font-family: var(--font-mono); font-size: 13px; line-height: 1.7; color: var(--text); white-space: pre; flex: 1; min-height: 0; }
.code__body textarea { width: 100%; height: 100%; border: 0; background: transparent; color: inherit; font: inherit; resize: none; outline: none;
  /* white-space: pre (не pre-wrap по умолчанию у textarea) - длинные строки
     (особенно инлайн-комментарии в конфигах этого репозитория, за 80
     символов) иначе переносятся мягко на несколько визуальных строк, и
     гаттер с номерами (считает по \n, не по видимым рядам) расходится
     с реальной позицией курсора - ровно так и завёлся живой баг в
     tool-config-editor.js:edShowHintForCursor(), найденный при проверке
     в браузере. overflow-x - горизонтальный скролл вместо переноса,
     как у любого редактора кода с номерами строк. */
  white-space: pre; overflow-x: auto; }
.yk { color: var(--code-k); }
.ys { color: var(--code-s); }
.yn { color: var(--code-n); }
.yc { color: var(--code-c); }
.editor-status { padding: 12px 20px; border-top: 1px solid var(--line); background: var(--surface); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.editor-help { flex: 1 1 260px; min-width: 0; box-sizing: border-box; border-left: 1px solid var(--line); background: var(--surface); padding: 18px; display: flex; flex-direction: column; gap: var(--sp-3); }

.origin { position: relative; border-bottom: 1px dashed var(--line-2); cursor: help; background: none; border-top: 0; border-left: 0; border-right: 0; color: inherit; font: inherit; padding: 0 0 2px; }
/* Пакет дизайна не описывал показ/скрытие - .origin__pop без правила ниже
   был бы виден всегда, перекрывая соседние плитки. Тот же приём и те же
   свойства, что у .hint-dot::after (components-shared.css): opacity+
   visibility, а не display, ради transition; pointer-events:none, чтобы
   невидимый поповер не перехватывал клик мимо кнопки. */
.origin__pop { position: absolute; left: 0; top: calc(100% + 8px); width: 240px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--text); color: var(--surface); box-shadow: 0 10px 30px rgba(0,0,0,.25); font-family: var(--font-sans); font-size: 12.5px; line-height: 1.5; text-align: left; z-index: 5; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s ease; }
.origin:hover .origin__pop, .origin:focus-visible .origin__pop { opacity: 1; visibility: visible; }
.origin__pop .k { color: var(--faint); }
.freshness { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-full); font-size: var(--fs-sm); font-weight: 600; }
.freshness[data-state="fresh"] { background: var(--ok-soft); color: var(--ok); }
.freshness[data-state="cached"] { background: var(--warn-soft); color: var(--warn); }

.state-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--sp-4); }
.state-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); padding: 22px var(--sp-4); border: 1.5px dashed var(--line-2); border-radius: var(--r-xl); }
.state-card[data-kind="access"] { border-color: var(--warn); }
.state-card[data-kind="error"] { border-color: var(--bad); }
.state-card__icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

.ai-answer__group { border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; }
.ai-answer__group h3 { margin: 0; font-size: 14px; padding: 12px 14px 4px; }
.ai-answer__group-body { padding: 0 14px 12px; display: flex; flex-direction: column; gap: 10px; }
.anchor { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 7px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); font-weight: 600; font-size: var(--fs-md); cursor: pointer; }
.anchor:hover { border-color: var(--accent); color: var(--accent-text); }
.anchor.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.dtable tr.is-flagged td { background: var(--accent-soft); }

/* Экран «Профиль» (setevie-design/profile-handoff/profile/profile.css) -
   личный аккаунт + настройки интерфейса, один экран на оба. .btn/.input/
   .card/.segmented/.switch/.role-tag/.field - уже выше в этом файле или
   в components.css, здесь только то, чего не было. */
.profile__head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.profile__avatar {
  width: 48px; height: 48px; border-radius: 50%; background: var(--accent-soft);
  color: var(--accent-text); display: flex; align-items: center; justify-content: center;
  font-weight: 700; flex: none;
}
.profile__id { flex: 1 1 220px; min-width: 0; }
.profile__section { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.profile__section h2 { margin: 0; font-size: 16px; }
.setting { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.setting + .setting { border-top: 1px solid var(--line); padding-top: 16px; }
.setting__label strong { display: block; }
.setting__hint { font-size: 12px; color: var(--faint); }
/* бейдж «когда появятся» у ещё не работающих настроек (уведомления - флаг
   хранится, рассылки нет, PROFILE.md "Поведение") */
.soon-tag {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--faint); background: var(--surface-2); padding: 2px 7px; border-radius: 5px;
}
.input[readonly] { background: var(--surface-2); color: var(--muted); }