* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* «Настройки» — оформление (редизайн §8.3): шрифт/размер применяются на весь документ через
   атрибуты на <html>, а не только внутри чата, — то же самое место, где `data-theme` уже решает
   тему. */
html[data-font="grotesk"] body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html[data-font="serif"] body {
  font-family: Georgia, "Times New Roman", serif;
}

html[data-font="mono"] body {
  font-family: var(--font-mono);
}

html[data-text-size="compact"] body {
  font-size: 93%;
}

html[data-text-size="large"] body {
  font-size: 112%;
}

/* «Меньше движения в интерфейсе» — ручной опт-ин поверх системного prefers-reduced-motion (тот
   всегда уважается отдельным правилом ниже), а не замена ему. */
html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
  transition: none !important;
  animation: none !important;
  scroll-behavior: auto !important;
}

.workspace-nav__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

.workspace-nav__tab:hover {
  background: var(--surface-2);
  color: var(--ink);
  text-decoration: none;
}

/* [hidden] на своём коде проигрывает .workspace-nav__tab/.site-sidebar__nav .workspace-nav__tab —
   у обоих display задан классом, и он перекрывает базовый UA-стиль [hidden]{display:none}.
   Раздел «Управление БЗ» скрыт до подтверждения роли (auth.js, data-role-gate="admin") — здесь
   именно тот редкий случай, где [hidden] обязан значить «скрыто» без исключений. */
.workspace-nav__tab[hidden] {
  display: none !important;
}

.workspace-nav__tab.is-active {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.workspace-nav__guard {
  color: inherit;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  opacity: 0.74;
}

main {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 16px 64px;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

a {
  color: var(--accent);
}

textarea,
input,
select,
button {
  font: inherit;
  color: inherit;
}

textarea,
input[type="text"],
input[type="password"],
input[type="number"],
select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}

textarea:focus-visible,
input:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

textarea {
  min-height: 100px;
  width: 100%;
  resize: vertical;
}

button {
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 120ms ease, transform 60ms ease;
}

button:hover {
  background: var(--accent-strong);
}

button:active {
  transform: translateY(1px);
}

button:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
}

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

.console {
  max-width: 1360px;
}

.console .topbar {
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.console .tabs {
  overflow-x: auto;
  border-bottom-color: var(--border);
}

.console-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
}

.console-overview__readiness,
.console-overview__sources {
  grid-column: 1;
}

.console-overview__aside {
  display: grid;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-content: start;
  gap: 16px;
}

.console-overview .card,
.console-debug .card {
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.console-overview__gates {
  display: grid;
  margin-top: 4px;
  border-top: 1px solid var(--border);
}

.console-overview__gate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
}

.console-overview__gate > div {
  display: grid;
  gap: 3px;
}

.console-overview__gate span:not(.pill) {
  color: var(--muted);
  font-size: 0.82rem;
}

.console-overview__gate--clickable {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
}

.console-overview__gate--clickable:hover {
  background: var(--surface-2);
}

.console-overview__ring-wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 4px 0 16px;
}

.readiness-ring {
  flex-shrink: 0;
  transform: rotate(-90deg);
}

.readiness-ring__track {
  fill: none;
  stroke: var(--border);
  stroke-width: 10;
}

.readiness-ring__progress {
  fill: none;
  stroke: var(--warn);
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.3s ease, stroke 0.3s ease;
}

.readiness-ring__progress--ok {
  stroke: var(--ok);
}

.readiness-ring__progress--warn {
  stroke: var(--warn);
}

.readiness-ring__label {
  display: grid;
  gap: 2px;
}

.readiness-ring__label strong {
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
}

.readiness-ring__label span {
  color: var(--muted);
  font-size: 0.82rem;
}

.docs-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 12px;
}

.console-overview__metric {
  display: grid;
  gap: 2px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}

.console-overview__metric:last-child {
  border-bottom: 0;
}

.console-overview__metric strong {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

.console-overview__metric span {
  color: var(--muted);
  font-size: 0.78rem;
}

.console-overview__source-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.console-overview__source-metrics .console-overview__metric {
  min-width: 0;
  padding: 12px;
  border-bottom: 0;
  border-right: 1px solid var(--border);
}

.console-overview__source-metrics .console-overview__metric:last-child {
  border-right: 0;
}

.console-overview__source-next-step {
  margin: 12px 0;
}

.console-overview__source-list summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.85rem;
}

.console-overview__source-list[open] summary {
  margin-bottom: 12px;
}

.console-debug {
  margin-top: 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}

.console-debug > summary {
  padding: 12px 14px;
  cursor: pointer;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 700;
}

.console-debug .card {
  margin: 0 10px 10px;
}

.site-dev-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 18px;
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.82rem;
}

.site-dev-banner strong {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--ink);
  color: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.7rem;
}

main.site-shell[data-dev-mode="true"] .site-retrieved__item {
  border-color: var(--border);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

html[data-theme="dark"] .site-dev-banner strong {
  background: var(--accent);
  color: var(--accent-ink);
}

@media (max-width: 980px) {
  .console-overview {
    grid-template-columns: minmax(0, 1fr);
  }

  .console-overview__readiness,
  .console-overview__sources,
  .console-overview__aside {
    grid-column: 1;
    grid-row: auto;
  }

  .console-overview__source-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .console-overview__source-metrics .console-overview__metric:nth-child(2) {
    border-right: 0;
  }

  .console-overview__source-metrics .console-overview__metric:nth-child(-n + 2) {
    border-bottom: 1px solid var(--border);
  }

  .console-overview__aside {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .console-overview__aside {
    grid-template-columns: minmax(0, 1fr);
  }

  .console-overview__gate {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .site-dev-banner {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .workspace-nav__tab { white-space: nowrap; }
  .workspace-nav__guard { display: none; }
}

/* ── Knowledge Ops: единое рабочее место управления БЗ ───────────────────── */
.site-stage > .console {
  width: min(100%, 1320px);
  padding-top: 28px;
}

.console {
  display: grid;
  width: 100%;
  max-width: 1320px;
  gap: 18px;
}

.console-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: start;
  padding: 24px 26px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    linear-gradient(112deg, color-mix(in srgb, var(--accent-soft) 72%, var(--surface)) 0%, var(--surface) 58%),
    var(--surface);
  box-shadow: var(--shadow);
}

.console-hero__identity {
  display: flex;
  min-width: 0;
  gap: 14px;
  align-items: center;
}

.console-hero__mark {
  display: grid;
  width: 48px;
  height: 48px;
  flex: none;
  place-items: center;
  border-radius: 14px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 0.87rem;
  font-weight: 800;
  line-height: 1;
}

.console-hero__mark span {
  margin-top: -6px;
  font-size: 0.48rem;
  letter-spacing: 0.08em;
}

.console-hero__eyebrow {
  margin: 0 0 3px;
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.console-hero h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.35rem, 2vw, 1.78rem);
  letter-spacing: -0.025em;
}

.console-hero__identity > div > p:last-child {
  max-width: 60ch;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.console-hero__controls {
  display: grid;
  justify-items: end;
  gap: 10px;
}

.console-access,
.console-health-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.console-access {
  justify-content: flex-end;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
}

.console-access__copy {
  display: grid;
  gap: 1px;
  min-width: 126px;
}

.console-access__copy strong {
  font-size: 0.78rem;
}

.console-access__copy span {
  color: var(--muted);
  font-size: 0.7rem;
}

.console-access__form {
  display: flex;
  gap: 6px;
}

.console-access input {
  width: 184px;
  min-height: 32px;
  padding: 6px 8px;
}

.console-health-actions {
  justify-content: flex-end;
}

.console-health-actions .health-status {
  flex-basis: 100%;
  text-align: right;
}

.console-tabs {
  gap: 4px;
  margin: 0;
  padding: 5px;
  border: 1px solid var(--border) !important;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
  scrollbar-width: thin;
}

.console-tabs .tab {
  top: 0;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  letter-spacing: 0;
  text-transform: none;
}

.console-tabs .tab:hover {
  background: var(--surface-2);
}

.console-tabs .tab.is-active {
  border-color: var(--accent-border);
  border-bottom-width: 1px;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.console .panel {
  gap: 16px;
  padding-top: 0;
}

.console .card {
  padding: 20px 22px;
  border-radius: 16px;
  box-shadow: none;
}

.console .card__head {
  gap: 16px;
}

.console .card h2 {
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-transform: none;
}

.console .card__head .hint {
  max-width: 72ch;
}

.console .row {
  gap: 10px;
}

.console .row > input:not([type="checkbox"]),
.console .row > select,
.console textarea {
  border-radius: 10px;
}

.console .btn--ghost {
  border-color: var(--border);
  background: var(--surface);
}

.console .table-wrap {
  border: 1px solid var(--border);
  border-radius: 12px;
}

.console .table-wrap thead {
  background: var(--surface-2);
}

.console-overview {
  gap: 16px;
}

.console-overview__aside .card {
  background: color-mix(in srgb, var(--surface) 88%, var(--surface-2));
}

.console-overview__metric strong {
  font-size: 1.4rem;
}

.console-debug {
  margin-top: 0;
  border-radius: 16px;
}

.console-debug > summary {
  padding: 14px 16px;
}

@media (max-width: 1180px) {
  .console-hero {
    grid-template-columns: 1fr;
  }

  .console-hero__controls {
    justify-items: start;
  }

  .console-access,
  .console-health-actions {
    justify-content: flex-start;
  }

  .console-health-actions .health-status {
    text-align: left;
  }
}

@media (max-width: 640px) {
  .site-stage > .console {
    padding-top: 0;
  }

  .console-hero {
    gap: 18px;
    padding: 20px;
    border-radius: 14px;
  }

  .console-hero__identity {
    align-items: flex-start;
  }

  .console-access {
    width: 100%;
    align-items: stretch;
  }

  .console-access__form {
    width: 100%;
  }

  .console-access input {
    width: 100%;
  }

  .console-health-actions > button {
    flex: 1 1 auto;
  }

  .console .card {
    padding: 16px;
    border-radius: 14px;
  }
}

/* --- plain chat page (/) + legacy admin_upload form --- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.drawer-open {
  overflow: hidden;
}

main.site-shell {
  max-width: 1440px;
  padding: 20px 20px 40px;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.site-sidebar,
.site-topbar,
.site-panel,
.site-hero-card,
.site-composer,
.site-user-bubble,
.site-answer-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.site-sidebar {
  position: sticky;
  top: 20px;
  align-self: start;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.site-brand {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.site-brand__mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), #78d0e2);
  color: var(--accent-ink);
  font-weight: 800;
  font-family: var(--font-mono);
}

.site-brand h1 {
  margin: 0;
  font-size: 1.18rem;
}

.site-brand p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.site-primary-action {
  width: 100%;
  justify-content: center;
  border-radius: 16px;
  padding: 12px 16px;
}

.site-sidebar__section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* The anonymous chat deliberately has no notification inbox. This section is a flex container,
   so the browser's generic `[hidden]` rule loses in the cascade without this explicit state. */
.site-sidebar__section[hidden] {
  display: none;
}

.site-sidebar__title,
.site-panel__head h3,
.site-composer__label,
.site-drawer__label,
.site-kicker {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.site-sidebar__title--with-badge {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Screenshots from the manual, shown under the answer that tells the reader what to click. Sized
   by the column, not by the file: these are full-width application captures and one of them is
   1.5 MB of pixels. */
.site-figure-area {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.site-figure-area:empty {
  display: none;
}

.site-figure-area__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.site-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.site-figure {
  margin: 0;
  display: grid;
  gap: 4px;
}

.site-figure img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  object-position: top;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  cursor: zoom-in;
}

.site-figure figcaption {
  font-size: 0.78rem;
  color: var(--muted);
}

.answer__figure-link {
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@keyframes site-figure-highlight {
  from {
    box-shadow: 0 0 0 3px var(--accent-border);
  }
  to {
    box-shadow: 0 0 0 3px transparent;
  }
}

.site-figure--highlight img {
  animation: site-figure-highlight 1.6s ease-out;
  border-radius: 8px;
}

/* `hidden` без класса — это `display: none` из браузерного стиля, и любой класс с собственным
   `display` его перебивает. Без этой строки счётчик показывал «0» ровно тогда, когда непрочитанных
   уведомлений нет: JS выставлял `hidden`, а каскад его не пускал. Замерено в браузере. */
.site-notifications-badge[hidden] {
  display: none;
}

.site-notifications-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.68rem;
  line-height: 1;
}

.site-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-list__item,
.site-chip,
.site-source-list__item,
.site-source-chip,
.site-toggle {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink);
}

.site-list__item {
  width: 100%;
  text-align: left;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.site-list__item strong {
  font-size: 0.9rem;
}

.site-list__item span {
  color: var(--muted);
  font-size: 0.78rem;
}

.site-list__item:hover,
.site-chip:hover,
.site-source-list__item:hover,
.site-source-chip:hover,
.site-toggle:hover {
  background: var(--interactive-hover);
}

.site-list__item--unread {
  border-left: 3px solid var(--accent);
}

.site-list__item--unread strong {
  color: var(--accent-strong);
}

.site-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.site-drawer__link {
  display: inline-block;
  color: var(--accent);
  text-decoration: underline;
}

.site-drawer__link:hover {
  color: var(--accent-strong);
}

.site-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.site-chip {
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 0.84rem;
  font-weight: 500;
}

.site-stage {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.site-topbar {
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.site-topbar h2 {
  margin: 6px 0 6px;
  font-size: clamp(1.3rem, 1.9vw, 1.72rem);
  line-height: 1.18;
}

.site-topbar p {
  margin: 0;
  color: var(--muted);
  max-width: 66ch;
  line-height: 1.5;
}

.site-topbar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.site-toggle {
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 600;
}

.site-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 296px;
  gap: 16px;
  align-items: start;
}

.site-chat-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.site-hero-card,
.site-composer,
.site-panel {
  padding: 16px;
}

.site-hero-card__head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.site-hero-card h3 {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.22;
}

.site-hero-card p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.site-hero-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.site-chip-list--hero {
  margin-top: 16px;
}

.site-thread {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 120px;
}

.site-exchange {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.site-exchange__query {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.site-exchange__label {
  display: inline-block;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.72rem;
  color: var(--accent);
}

.site-exchange__query-text {
  margin: 0;
  font-weight: 600;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.site-user-bubble {
  align-self: flex-end;
  width: min(100%, 620px);
  padding: 16px 18px;
  border-color: var(--accent-border);
  background: var(--accent-soft);
}

.site-bubble__label {
  display: inline-block;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.72rem;
  color: var(--accent);
}

.site-bubble__text {
  margin: 8px 0 0;
  font-weight: 600;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.site-bubble__attachment {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--accent-strong);
}

.site-answer-card {
  padding: 16px 18px;
  margin-top: 0;
}

.site-answer {
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--surface-2);
  border: 1px solid transparent;
}

.site-answer--abstain {
  border-color: var(--warn-border);
  background: var(--warn-bg);
}

.site-answer__text {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.98rem;
  line-height: 1.6;
}

.site-answer-card__head,
.site-answer-card__meta,
.site-panel__head,
.site-composer__footer,
.site-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.site-answer-card__meta {
  margin-top: 12px;
}

.site-exchange__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.site-source-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.site-source-chip {
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.83rem;
  color: var(--accent-strong);
}

.site-composer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-composer textarea {
  min-height: 104px;
  border-radius: 16px;
  padding: 14px 16px;
}

.site-composer__attachment {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.site-image-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
}

/* `.site-image-preview { display: flex }` and the UA `[hidden] { display: none }` rule have equal
   specificity, so author CSS wins the cascade tie and the "hidden" preview would render anyway
   without this — the attached image looked "stuck" in the composer after every send. */
.site-image-preview[hidden] {
  display: none;
}

.site-image-preview__thumb {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 50%;
}

.site-image-preview__open {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.site-chat-image {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  cursor: zoom-in;
}

.site-chat-image__thumb {
  display: block;
  max-width: min(260px, 70vw);
  max-height: 220px;
  object-fit: contain;
  border-radius: 7px;
}

.site-image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgb(0 0 0 / 78%);
}

.site-image-lightbox img {
  max-width: min(94vw, 1200px);
  max-height: 90vh;
  object-fit: contain;
}

.site-image-lightbox__close {
  position: absolute;
  top: 16px;
  right: 20px;
  color: white;
  border: 0;
  background: transparent;
  font-size: 2rem;
  cursor: pointer;
}

.site-image-preview__name {
  font-size: 0.8rem;
  color: var(--muted);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-composer__meta,
.site-composer__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.site-composer__meta {
  color: var(--muted);
  font-size: 0.82rem;
}

.site-inspector {
  position: sticky;
  top: 20px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.site-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.site-stat {
  background: var(--surface-2);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.site-stat span {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.7rem;
  color: var(--muted);
}

.site-stat strong {
  font-size: 0.96rem;
  overflow-wrap: anywhere;
}

.site-source-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.site-source-list__item {
  width: 100%;
  border-radius: 14px;
  text-align: left;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.site-source-list__item strong {
  font-size: 0.92rem;
}

.site-source-list__item span {
  color: var(--muted);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.site-source-card {
  width: 100%;
  border-radius: 16px;
  text-align: left;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.site-source-card__title {
  font-size: 0.92rem;
}

.site-source-card__meta {
  color: var(--muted);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.site-source-list__preview {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.site-retrieved__list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
}

.site-retrieved__item {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
}

.site-retrieved__title {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.site-retrieved__meta {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.82rem;
}

.site-retrieved__preview {
  margin: 8px 0 0;
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.site-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 22, 27, 0.36);
  z-index: 39;
}

.site-drawer-backdrop[hidden],
.site-drawer[hidden] {
  display: none !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.site-drawer {
  position: fixed;
  top: 20px;
  right: 24px;
  bottom: 24px;
  width: min(400px, calc(100vw - 32px));
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 24px 56px rgba(15, 23, 30, 0.22);
  z-index: 40;
  padding: 18px;
  display: flex;
  flex-direction: column;
}

.site-drawer__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: auto;
  padding-top: 8px;
}

.site-drawer__preview,
.site-drawer__context {
  background: var(--surface-2);
  border-radius: 16px;
  padding: 16px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.site-drawer__context {
  padding: 14px 16px;
}

.answer {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-top: 16px;
  box-shadow: var(--shadow);
}

.answer--abstain {
  border-color: var(--warn-border);
  background: var(--warn-bg);
}

.answer--vision {
  border-color: var(--accent-border);
  background: var(--accent-soft);
}

.answer__text {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.98rem;
  line-height: 1.55;
}

.citations {
  margin-top: 12px;
  font-size: 0.88rem;
}

.citations summary {
  cursor: pointer;
  color: var(--muted);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.74rem;
}

.citations__list {
  margin: 8px 0 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.citations__item {
  padding: 7px 10px;
  background: var(--surface-2);
  border-radius: 6px;
}

.citations__doc {
  font-weight: 600;
}

/* ---------------- console ---------------- */
main.console {
  max-width: 1080px;
}

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  padding: 14px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
}

.topbar__mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.8rem;
}

.topbar h1 {
  margin: 0;
  font-size: 1.05rem;
}

.topbar__sub {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.topbar__group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.topbar__link {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.85rem;
  white-space: nowrap;
}

.topbar__link:hover {
  color: var(--accent);
}

.health-status:empty {
  display: none;
}

.readiness-summary {
  max-width: min(520px, 100%);
}

.readiness-summary summary {
  cursor: pointer;
  list-style: none;
}

.readiness-summary summary::-webkit-details-marker {
  display: none;
}

.readiness-summary__list {
  margin: 8px 0 0;
  padding: 10px 12px 10px 28px;
  border: 1px solid var(--warn-border);
  border-radius: 8px;
  background: var(--warn-bg);
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1.4;
}

.readiness-summary__list li + li {
  margin-top: 8px;
}

.eval-source-context {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.eval-source-context summary {
  cursor: pointer;
  color: var(--accent);
}

.eval-source-context p {
  margin: 6px 0 0;
  max-width: 76ch;
}

.tabs {
  display: flex;
  gap: 4px;
  margin-top: 20px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.tab {
  background: transparent;
  color: var(--muted);
  border: none;
  border-radius: 0;
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-weight: 600;
  position: relative;
  top: 1px;
  white-space: nowrap;
}

.tab:hover {
  color: var(--ink);
  background: transparent;
}

.tab.is-active {
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
}

.panel {
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* `.panel { display: flex }` and the UA `[hidden] { display: none }` rule have equal specificity,
   so author CSS wins the cascade tie and the "hidden" panel would render anyway without this. */
.panel[hidden] {
  display: none;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
  min-width: 0;
}

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.card h2 {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0 0 12px;
  font-weight: 700;
}

.card__head h2 {
  margin: 0;
}

/* the chat card is the hero panel: a terminal-style title bar sets it apart from the
   plain-header utility cards instead of a generic accent rail on every card. */
.card--accent {
  position: relative;
}

.card--accent .card__head {
  background: var(--accent);
  color: var(--accent-ink);
  margin: -18px -20px 16px;
  padding: 14px 20px;
  border-radius: var(--radius) var(--radius) 0 0;
}

.card--accent .card__head h2 {
  color: var(--accent-ink);
}

.card--accent .card__head .hint {
  color: var(--accent-ink);
  opacity: 0.85;
  margin: 0;
}

.hint {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 4px 0 0;
  line-height: 1.5;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  min-width: 0;
}

.row--tight {
  margin-top: 0;
}

.row > input:not([type="checkbox"]),
.row > select {
  flex: 1 1 200px;
  min-width: 0;
  max-width: 100%;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-family: var(--font-mono);
  border: 1px solid var(--border);
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--muted);
}

.pill--ok {
  background: var(--ok-bg);
  border-color: var(--ok-border);
  color: var(--ok);
}

.pill--warn {
  background: var(--warn-bg);
  border-color: var(--warn-border);
  color: var(--warn);
}

.pill--danger {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger);
}

.pill--info {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent-strong);
}

/* Пилюля, которая несёт не статус, а несколько фактов сразу («вопросов · порог · время»), в одну
   строку на телефоне не помещается: при общем для `.pill` `nowrap` она уезжала за правый край и
   обрезалась на середине последнего числа — автор на 390px читал «порог сдачи: 7». Короткие
   статусные чипы остаются `nowrap`: переносить «Черновик» по слогам незачем. */
.pill--wrap {
  white-space: normal;
  text-align: left;
}

.stage-checklist {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.stage-arrow {
  color: var(--muted);
  font-size: 0.8rem;
}

.image-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin: 8px 0 16px;
}

.image-preview {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-2);
}

.image-preview img {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: contain;
  background: #fff;
}

.image-preview figcaption {
  padding: 6px 8px;
  font-size: 0.85rem;
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border);
}

.btn--ghost:hover {
  background: var(--surface-2);
}

.btn--sm {
  padding: 5px 10px;
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: 6px;
}

.btn--danger-outline {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger-border);
}

.btn--danger-outline:hover {
  background: var(--danger-bg);
}

.btn--sm:disabled {
  opacity: 0.5;
  cursor: default;
}

/* chat thread */
.chat-thread {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 2px;
}

.chat-thread:empty::before {
  content: "Задайте вопрос — здесь появится ответ с цитатами.";
  color: var(--muted);
  font-size: 0.9rem;
}

.exchange {
  border-top: 1px dashed var(--border);
  padding-top: 14px;
}

.exchange:first-child {
  border-top: none;
  padding-top: 0;
}

.exchange__query {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  min-width: 0;
}

.exchange__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  flex-shrink: 0;
}

.exchange__query-text {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.exchange__meta {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.composer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.composer .row {
  align-items: center;
}

.composer__hint {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.78rem;
  font-family: var(--font-mono);
}

.log-wrap {
  margin-top: 10px;
  font-size: 0.82rem;
}

.retrieved {
  margin-top: 10px;
  font-size: 0.82rem;
}

.retrieved summary {
  cursor: pointer;
  color: var(--muted);
  font-family: var(--font-mono);
}

.retrieved__list {
  margin: 8px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
}

.retrieved__item {
  padding: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.retrieved__title {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.retrieved__meta {
  color: var(--muted);
  margin-top: 2px;
}

.retrieved__preview {
  margin: 6px 0 0;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.log-wrap summary {
  cursor: pointer;
  color: var(--muted);
  font-family: var(--font-mono);
}

.log-wrap[open] summary {
  margin-bottom: 6px;
}

.result {
  margin-top: 0;
  padding: 12px;
  background: var(--surface-2);
  border-radius: 8px;
  font-size: 0.8rem;
  font-family: var(--font-mono);
  overflow-x: auto;
  white-space: pre-wrap;
  max-height: 240px;
  overflow-y: auto;
}

.error {
  color: var(--danger);
  margin: 8px 0 0;
  font-size: 0.88rem;
}

.table-wrap {
  overflow-x: auto;
  margin-top: 4px;
  max-width: 100%;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.87rem;
}

th,
td {
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

th {
  color: var(--muted);
  font-weight: 600;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

tbody tr:hover {
  background: var(--surface-2);
}

td code {
  font-size: 0.78rem;
  color: var(--muted);
  font-family: var(--font-mono);
  white-space: nowrap;
  cursor: help;
}

.doc-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.document-card__summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}

.document-card__metric {
  display: grid;
  gap: 2px;
  padding: 12px;
  border-right: 1px solid var(--border);
}

.document-card__metric:last-child {
  border-right: 0;
}

.document-card__metric strong {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

.document-card__metric span {
  color: var(--muted);
  font-size: 0.78rem;
}

.document-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}

.document-card__meta .hint {
  font-size: 0.82rem;
}

.quality-summary {
  margin: 4px 0 14px;
}

/* Whole passages, wrapped as written: the operator is judging where the splits fell, and a
   single-line ellipsis would hide the ragged edge they came to look for. */
.chunk-text {
  margin: 0;
  max-width: 62ch;
  max-height: 240px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  /* The body face, not the mono one: the card asks the operator to read a passage the way a reader
     will read it, and a screen of Russian prose set in a monospace face is not that reading. */
  font: inherit;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--ink);
}

.chunk-editor {
  display: block;
  width: min(62ch, 100%);
  min-height: 9rem;
  resize: vertical;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--ink);
}

.chunk-editor__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

#sources table strong {
  color: var(--ink);
}

.kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.kpi__cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
}

.kpi__label {
  font-size: 0.72rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.kpi__value {
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Метрики — суточные бакеты (redesign §8.4c) */
.metrics-window-toggle {
  display: flex;
  gap: 4px;
}

.metrics-window-toggle .btn--ghost.is-active {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent-strong);
}

.metrics-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 4px 0 16px;
}

.metrics-summary__cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: 8px;
}

.metrics-summary__value {
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.metrics-summary__label {
  font-size: 0.78rem;
  color: var(--muted);
}

.metrics-chart {
  display: flex;
  gap: 6px;
  height: 170px;
  overflow-x: auto;
}

.metrics-chart__col {
  flex: 1 0 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 26px;
}

.metrics-chart__value {
  min-height: 14px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.metrics-chart__track {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
}

.metrics-chart__bar {
  width: 100%;
  min-height: 3px;
  background: var(--accent);
  border: 0;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
}

.metrics-chart__bar:hover {
  background: var(--accent-strong);
}

.metrics-chart__label {
  font-size: 0.7rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.metrics-day-detail {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.metrics-day-detail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.metrics-day-detail__head h3 {
  margin: 0;
  font-size: 1rem;
}

@media (max-width: 640px) {
  main.site-shell {
    grid-template-columns: 1fr;
    padding: 16px 12px 32px;
  }

  .site-sidebar {
    position: static;
    order: 2;
  }

  .site-stage {
    order: 1;
  }

  .site-layout {
    grid-template-columns: 1fr;
  }

  .site-topbar,
  .site-hero-card,
  .site-composer,
  .site-panel,
  .site-user-bubble,
  .site-answer-card {
    border-radius: 18px;
  }

  .site-topbar,
  .site-hero-card__head,
  .site-composer__footer,
  .site-panel__head,
  .site-drawer__head {
    flex-direction: column;
    align-items: stretch;
  }

  .site-topbar__actions,
  .site-composer__actions {
    justify-content: stretch;
  }

  .site-composer__actions > button,
  .site-topbar__actions > button,
  .site-topbar__actions > a {
    width: 100%;
    text-align: center;
  }

  .site-user-bubble {
    width: 100%;
  }

  .site-stats {
    grid-template-columns: 1fr;
  }

  .site-drawer {
    top: auto;
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
    border-radius: 20px;
  }

  .topbar {
    flex-direction: column;
    align-items: stretch;
  }

  .topbar__brand {
    margin-right: 0;
  }
}

/* Единая оболочка сервиса: обучение, профиль и консоль не становятся отдельными мини-сайтами.
   .workspace-frame/.workspace-stage used to be a second, edge-to-edge shell for these pages; every
   workspace surface now renders the one main.site-shell from base.html instead (see its rail-collapse,
   mobile-drawer and reduced-motion rules further down this file), so that duplicate rule family is
   gone. Only the page-content width/centering it used to provide for courses/profile/console — not
   the shell shape itself — survives here, rescoped to .site-stage. */
.site-stage > .courses-shell,
.site-stage > .profile-shell,
.site-stage > .console {
  margin-right: auto;
  margin-left: auto;
}

.workspace-mobile-menu,
.workspace-drawer-scrim {
  display: none;
}

.site-account {
  border: 0;
  background: transparent;
  text-align: left;
}

.site-auth-dialog {
  width: min(440px, calc(100% - 32px));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 22px 60px rgba(15, 23, 30, 0.24);
}

.site-auth-dialog::backdrop {
  background: rgba(15, 23, 30, 0.48);
  backdrop-filter: blur(3px);
}

.site-auth-dialog__head,
.site-auth-form,
.site-auth-dialog > .courses-signin__switch,
.site-auth-dialog > .courses-signin__error {
  margin: 0 24px;
}

.site-auth-dialog__head {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  padding: 24px 0 18px;
}

.site-auth-dialog__head h2 {
  margin: 3px 0 6px;
  font-size: 1.35rem;
}

.site-auth-dialog__head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.site-auth-dialog__close {
  display: grid;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1;
}

.site-auth-form {
  display: grid;
  gap: 14px;
  padding-bottom: 4px;
}

.site-auth-form[hidden] {
  display: none;
}

.site-auth-form__checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.85rem;
  cursor: pointer;
}

.privacy-consent-field {
  align-items: flex-start;
}

.privacy-consent-copy {
  display: grid;
  gap: 5px;
}

.privacy-consent-note {
  padding: 8px 10px;
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1.45;
}

.site-auth-dialog > .courses-signin__switch {
  padding: 12px 0 24px;
}

.site-auth-dialog > .courses-signin__error {
  margin-top: 14px;
}

@media (max-width: 860px) {
  /* Clears the fixed .workspace-mobile-menu button below so it doesn't sit over the first row of
     page content — main.site-shell's own mobile rules further down handle the sidebar-as-drawer
     behavior for every surface now, chat included. */
  .site-stage {
    padding: 66px 16px 36px;
  }

  .workspace-drawer-scrim {
    position: fixed;
    z-index: 50;
    inset: 0;
    display: block;
    background: rgba(15, 23, 30, 0.42);
  }

  .workspace-drawer-scrim[hidden] {
    display: none;
  }

  .workspace-mobile-menu {
    position: fixed;
    z-index: 40;
    top: 12px;
    left: 14px;
    display: grid;
    width: 40px;
    height: 40px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow);
  }

  .site-stage > .courses-shell,
  .site-stage > .profile-shell,
  .site-stage > .console {
    width: min(100%, 760px);
  }
}

/* Product chat: a quiet work surface rather than a grid of identical cards. */
main.site-shell {
  max-width: 1360px;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 28px;
}

.site-sidebar {
  padding: 6px 4px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.site-brand {
  padding: 8px 6px 12px;
}

.site-primary-action {
  border-radius: 10px;
}

.site-topbar {
  padding: 2px 2px 16px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.site-topbar h2 {
  font-size: clamp(1.5rem, 2.15vw, 2rem);
  letter-spacing: -0.025em;
}

.site-layout {
  grid-template-columns: minmax(0, 1fr) 272px;
  gap: 24px;
}

.site-hero-card {
  padding: 20px 0 20px 20px;
  border: 0;
  border-left: 3px solid var(--accent);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.site-hero-card__badges {
  justify-content: flex-end;
}

.site-composer {
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(15, 23, 30, 0.07);
}

.site-panel {
  padding: 14px;
  border-radius: 12px;
  box-shadow: none;
}

.site-user-bubble,
.site-answer-card {
  border-radius: 12px;
}

.site-user-bubble {
  box-shadow: none;
}

.site-answer-card {
  border-color: transparent;
  box-shadow: none;
}

.site-inspector {
  gap: 16px;
}

@media (max-width: 980px) {
  main.site-shell {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 20px;
  }

  .site-layout {
    grid-template-columns: minmax(0, 1fr) 232px;
    gap: 16px;
  }

  .site-hero-card__head {
    flex-direction: column;
  }

  .site-hero-card__badges {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  main.site-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .site-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-topbar {
    padding-bottom: 14px;
  }

  .site-hero-card {
    padding: 4px 0 20px 16px;
  }

  .site-sidebar {
    padding: 20px 0 0;
    border-top: 1px solid var(--border);
  }

  .site-sidebar__section {
    padding: 4px 6px;
  }

  .site-composer {
    box-shadow: none;
  }
}

/* Product chat stays focused on the answer; diagnostics live in /console. */
main.site-shell {
  max-width: 1160px;
  grid-template-columns: 210px minmax(0, 1fr);
}

.site-layout {
  display: block;
}

.site-chat-column {
  max-width: 820px;
}

.site-sidebar {
  gap: 20px;
}

.site-sidebar__section {
  gap: 8px;
}

.site-topbar {
  padding-bottom: 12px;
}

.site-topbar p {
  max-width: 58ch;
}

.site-hero-card {
  padding-top: 8px;
  padding-bottom: 16px;
}

.site-hero-card h3 {
  font-size: 0.95rem;
}

.site-hero-card p {
  margin-top: 4px;
  font-size: 0.9rem;
}

.site-answer-card__meta {
  display: none;
}

.answer__text {
  white-space: normal;
}

.answer__paragraph {
  margin: 0.7rem 0 0;
}

.answer__paragraph:first-child,
.answer__heading:first-child {
  margin-top: 0;
}

.answer__heading {
  margin: 1.15rem 0 0.45rem;
  font-size: 1rem;
  line-height: 1.35;
}

.answer__list {
  margin: 0.65rem 0 0;
  padding-left: 1.35rem;
  display: grid;
  gap: 0.35rem;
}

.answer__text code {
  padding: 0.12em 0.35em;
  border-radius: 4px;
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 0.88em;
}

.site-source-chip-row {
  align-items: center;
  gap: 8px 12px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.site-source-chip-row__label {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.site-source-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  font-size: 0.86rem;
  text-align: left;
}

.site-source-chip:hover {
  background: transparent;
  color: var(--accent-strong);
  text-decoration: underline;
}

.site-source-chip span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 400;
}

.site-source-chip--pending {
  color: var(--muted);
  cursor: default;
  animation: site-source-chip-pending-pulse 1.6s ease-in-out infinite;
}

@keyframes site-source-chip-pending-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .site-source-chip--pending {
    animation: none;
  }
}

.site-answer-action-area {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.site-refusal-actions {
  display: grid;
  gap: 10px;
}

.site-refusal-actions__similar {
  display: grid;
  gap: 6px;
}

.site-refusal-actions__list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 4px;
}

.site-answer-actions,
.site-feedback,
.site-related-questions,
.site-practice-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.site-action,
.site-feedback__button,
.site-practice-option {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 7px 10px;
}

.site-action:hover,
.site-feedback__button:hover,
.site-practice-option:hover {
  background: var(--interactive-hover);
}

.site-feedback {
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.site-feedback__button.is-selected,
.site-practice-option.is-correct {
  color: var(--ok);
  border-color: var(--ok-border);
  background: var(--ok-bg);
}

.site-practice-option.is-wrong {
  color: var(--danger);
  border-color: var(--danger-border);
  background: var(--danger-bg);
}

.site-related-questions {
  margin-top: 12px;
}

.site-related-questions .site-chip {
  font-size: 0.78rem;
}

.site-practice-area:empty,
.site-related-questions:empty {
  display: none;
}

.site-practice-card {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--accent-border);
  border-radius: 14px;
  background: var(--accent-soft);
}

.site-practice-card h4,
.site-practice-card p {
  margin: 6px 0;
}

.site-practice-card--draft {
  border-style: dashed;
}

.site-practice-card--draft + .site-practice-card--draft {
  margin-top: 10px;
}

/* «Поделиться диалогом» (редизайн §8.2, Д8/Л2). */

.site-share-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
}

.site-share-toggle__icon {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Sharing an empty dialogue makes no sense — the button only appears once there is one to share. */
main.site-shell[data-conversation="empty"] #site-share-toggle {
  display: none;
}

.site-share-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 10px;
  padding: 16px 18px;
  border: 1px solid var(--accent-border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.site-share-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.site-share-panel__head strong {
  font-size: 0.95rem;
}

.site-share-panel__head p {
  margin: 3px 0 0;
}

.site-share-panel__close {
  flex: none;
  padding: 5px 9px;
  border: 0;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
  font-weight: 700;
  cursor: pointer;
}

.site-share-panel__close:hover {
  background: var(--interactive-hover);
}

.site-share-panel__link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}

.site-share-panel__url {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.82rem;
  color: var(--accent-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-share-panel__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.site-share-panel__ttl {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.79rem;
}

.site-share-error {
  color: var(--danger);
}

/* «Скачать PDF» (Д8): the browser's own print render over the live chat page, no server-side
   generation. Only the conversation itself is meaningful on paper — chrome, composer and the
   sharing panel are not. */
@media print {
  /* Экран чата живёт внутри рамки высотой в окно (`overflow: hidden` на body и своя прокрутка
     внутри). На печати рамку надо снять, иначе на бумагу попадает ровно один видимый экран. */
  body:has(main.site-shell[data-conversation]) {
    display: block;
    height: auto;
    overflow: visible;
    background: none;
  }

  main.site-shell[data-conversation] {
    width: auto;
    min-height: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    grid-template-rows: auto;
    overflow: visible;
  }

  main.site-shell .site-stage,
  .site-scroll {
    min-height: 0;
    overflow: visible;
  }

  .site-sidebar,
  .site-topbar,
  .site-share-panel,
  .site-composer,
  .site-inspector,
  .site-dev-banner,
  #workspace-nav-toggle,
  #workspace-rail-expand {
    display: none !important;
  }

  main.site-shell {
    display: block;
    max-width: none;
    padding: 0;
  }

  .site-chat-column {
    max-width: none;
  }

#site-share-page-actions {
    display: none !important;
}
}

#site-share-page-actions {
  display: none !important;
}

#site-share-page-actions:not([hidden]) {
  display: flex !important;
}

.site-share-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 20px 80px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.site-share-page__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-share-page__head h1 {
  margin: 0;
  font-size: 1.6rem;
}

.site-share-page__state {
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

@media (max-width: 640px) {
  main.site-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-chat-column {
    max-width: none;
  }

  .site-source-chip {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
}

/* `/dev` keeps the full trace workbench; chat can reveal the same evidence on demand. */
main.site-shell[data-dev-mode="true"],
main.site-shell[data-trace-open="true"] {
  max-width: 1360px;
  grid-template-columns: 232px minmax(0, 1fr);
}

main.site-shell[data-dev-mode="true"] .site-layout,
main.site-shell[data-trace-open="true"] .site-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 272px;
  gap: 24px;
}

main.site-shell[data-dev-mode="true"] .site-chat-column,
main.site-shell[data-trace-open="true"] .site-chat-column {
  max-width: none;
}

main.site-shell[data-dev-mode="true"] .site-answer-card__meta,
main.site-shell[data-trace-open="true"] .site-answer-card__meta {
  display: flex;
}

/* Product-facing orientation: role and scenario add context without making a second UI. */
.site-profile-section {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.site-role-options {
  display: grid;
  gap: 4px;
  margin-top: 9px;
}

.site-role-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: left;
}

.site-role-option:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.site-role-option.is-selected {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.site-role-option__mark {
  width: 18px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-align: center;
}

.settings-group {
  margin-bottom: 18px;
}

.settings-group:last-child {
  margin-bottom: 0;
}

.settings-group__label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.settings-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.settings-choice-grid--four {
  grid-template-columns: repeat(4, 1fr);
}

.settings-choice-grid--three {
  grid-template-columns: repeat(3, 1fr);
}

.settings-choice {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  text-align: center;
  cursor: pointer;
}

.settings-choice:hover {
  background: var(--interactive-hover);
}

.settings-choice.is-selected {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 600;
}

.settings-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.settings-switch-row:last-child {
  border-bottom: 0;
}

.settings-switch-row__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-switch-row__text strong {
  font-size: 0.87rem;
}

.settings-switch {
  position: relative;
  flex: none;
  width: 38px;
  height: 22px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--border);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.settings-switch::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}

.settings-switch:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.settings-switch:checked::before {
  transform: translateX(16px);
}

.settings-switch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.profile-access-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.site-profile-summary {
  display: grid;
  gap: 2px;
  min-width: 108px;
  padding: 8px 11px;
  border: 1px solid var(--accent-border);
  border-radius: 10px;
  background: var(--accent-soft);
}

.site-profile-summary span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-profile-summary strong {
  color: var(--accent-strong);
  font-size: 0.84rem;
}

.site-hero-card {
  position: relative;
  overflow: hidden;
  border-color: var(--accent-border);
  background-color: var(--surface);
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 7%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--accent) 7%, transparent) 1px, transparent 1px);
  background-size: 28px 28px;
}

.site-hero-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent);
}

.site-scenario-picker {
  margin: 18px 0 16px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 90%, var(--accent-soft));
}

.site-scenario-options {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
}

.site-scenario-option {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.site-scenario-option:hover,
.site-scenario-option.is-selected {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.site-scenario-picker .site-note {
  margin: 9px 0 0;
}

.site-recommendations-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 9px;
}

.site-recommendations-role {
  color: var(--muted);
  font-size: 0.75rem;
}

.site-media-dropzone {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--muted);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.site-media-dropzone:hover,
.site-media-dropzone:focus-visible,
.site-media-dropzone.is-dragging,
.site-media-dropzone.is-attached {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
  outline: 0;
}

.site-media-dropzone__mark {
  display: grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 8px;
  background: var(--surface);
  color: var(--accent);
  font-size: 1rem;
}

.site-media-dropzone > span:nth-child(2) {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.site-media-dropzone strong {
  color: var(--ink);
  font-size: 0.82rem;
}

.site-media-dropzone small {
  font-size: 0.74rem;
}

.site-media-dropzone .btn--sm {
  margin-left: auto;
  white-space: nowrap;
}

.site-composer__media-note {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 0.74rem;
}

.site-composer__media-note.is-error { color: var(--danger); }
.site-composer__media-note.is-success { color: var(--ok); }

.answer--grounded {
  border-color: var(--accent-border);
}

/* design-pass-v1: a calm editorial work surface, shared by chat, console and diagnostics.
   Palette/radii/shadows migrated to the redesign-v2 prototype; token names kept stable so
   every consuming rule below is unaffected. --radius/--font-sans/--font-mono relocated here
   from the removed legacy :root block (they had no design-pass-v1 override, so this is where
   the cascade already resolved them). --radius-md/--radius-xl/--shadow-shell are net-new,
   reserved for the small-control scale and the single outer .app shell (Stage 7). */
:root {
  color-scheme: light;
  --bg: #f4f6fb;
  --surface: rgba(255, 255, 255, 0.84);
  /* Same paper as --surface, but opaque: for panels that float over page content instead of
     over the shell's own backdrop-filtered ground, where 0.84 alpha lets figures and text
     show through the panel (live check 2026-08-18, source drawer). */
  --surface-solid: #ffffff;
  --surface-2: #eef0f5;
  --ink: #172033;
  --muted: #7b8497;
  --border: #e7eaf1;
  --border-strong: #d7dce6;
  --accent: #5269df;
  --accent-strong: #3f52c6;
  --accent-soft: #eef0ff;
  --accent-border: rgba(82, 105, 223, 0.25);
  --accent-ink: #ffffff;
  --interactive-hover: #eef0ff;
  --ok: #26a269;
  --ok-bg: #e9f8f0;
  --ok-border: #ccebd9;
  --warn: #de9b38;
  --warn-bg: #fff5e5;
  --warn-border: #f5dfb3;
  --danger: #a3241c;
  --danger-bg: #fbe9e7;
  --danger-border: #ecb6af;
  --radius: 20px;
  --radius-md: 14px;
  --radius-xl: 28px;
  --shadow: 0 8px 24px rgba(35, 48, 86, 0.08);
  --shadow-shell: 0 24px 70px rgba(35, 48, 86, 0.11);
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas,
    monospace;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101521;
  --surface: rgba(24, 31, 47, 0.88);
  --surface-solid: #181f2f;
  --surface-2: #1a2233;
  --ink: #eef1fb;
  --muted: #9da6bc;
  --border: #2c354a;
  --border-strong: #3a4560;
  --accent: #5269df;
  --accent-strong: #3f52c6;
  --accent-soft: #242b57;
  --accent-border: rgba(122, 140, 255, 0.35);
  --accent-ink: #ffffff;
  --interactive-hover: #242b57;
  --ok: #26a269;
  --ok-bg: #173a2c;
  --ok-border: #1f4a34;
  --warn: #de9b38;
  --warn-bg: #3d301c;
  --warn-border: #4a3a20;
  --danger: #f09087;
  --danger-bg: #3a1b1b;
  --danger-border: #6a302d;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  --shadow-shell: 0 24px 70px rgba(0, 0, 0, 0.28);
}

body {
  min-height: 100vh;
  transition: background-color 160ms ease, color 160ms ease;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.workspace-nav__tab {
  font-size: 0.85rem;
}

/* The single floating "app card" shape, matching the redesign-v2 prototype's .app: a centered
   surface with visible page background around it, not a full-bleed frame. Retired .workspace-frame
   drew every non-chat page edge-to-edge instead — that rule family is gone now that every workspace
   surface shares this one shell (see base.html). */
main.site-shell {
  max-width: 1480px;
  /* .workspace-frame used to guarantee a full page height with min-height:100dvh; short-content
     pages (an empty course catalog, a bare sign-in prompt) shrank to fit their content instead
     without an equivalent here, leaving a stub card over bare page background. Chat/dev override
     this with flex:1 (they already fill their own viewport-locked body). */
  min-height: calc(100dvh - 32px);
  margin: 16px auto;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 36px;
  padding-top: 24px;
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-shell);
  backdrop-filter: blur(20px);
}

.site-sidebar {
  top: 78px;
}

.site-chat-column {
  max-width: 840px;
}

.site-topbar {
  padding: 2px 2px 18px;
}

.site-topbar h2 {
  max-width: 23ch;
}

.site-profile-summary {
  min-width: 158px;
  background: var(--surface-2);
  border-color: var(--border-strong);
}

.site-profile-summary strong {
  color: var(--accent-strong);
}

.site-hero-card {
  overflow: visible;
  padding: 4px 0 8px 20px;
  border: 0;
  border-left: 3px solid var(--accent);
  border-radius: 0;
  background: transparent;
  background-image: none;
}

.site-hero-card::before {
  display: none;
}

.site-scenario-picker {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.site-recommendations-head {
  margin-top: 22px;
}

.site-chip-list--hero {
  margin-top: 10px;
}

.site-chip,
.site-scenario-option,
.site-action,
.site-feedback__button {
  border-color: var(--border-strong);
  background: var(--surface);
}

.site-scenario-option.is-selected {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

.site-user-bubble {
  border-color: var(--border);
  background: var(--surface-2);
}

.site-answer-card {
  padding: 6px 0 0;
  background: transparent;
}

.site-answer-card__head {
  justify-content: flex-start;
}

.site-source-chip-row {
  display: grid;
  gap: 6px;
}

.site-source-chip-row__label {
  margin-bottom: 2px;
}

.site-source-chip.site-source-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--accent-strong);
  text-align: left;
}

.site-source-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-source-card span {
  color: var(--muted);
  font-size: 0.76rem;
}

.site-provenance-area {
  margin-top: 12px;
}

.site-provenance {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}

.site-provenance > summary {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 9px 13px;
  color: var(--ink);
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 700;
}

.site-provenance > summary::marker {
  color: var(--accent);
}

.site-provenance__body {
  display: grid;
  gap: 12px;
  padding: 0 14px 14px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.site-provenance__body > p {
  margin: 0;
}

.site-provenance__state {
  justify-self: start;
  margin-top: 13px;
  padding: 3px 9px;
  border: 1px solid var(--ok-border);
  border-radius: 999px;
  background: var(--ok-bg);
  color: var(--ok);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
}

.site-provenance__state--warn {
  border-color: var(--warn-border);
  background: var(--warn-bg);
  color: var(--warn);
}

.site-provenance__steps {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 20px;
}

.site-provenance__sources {
  display: grid;
  gap: 6px;
}

.site-provenance__source {
  display: grid;
  gap: 2px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
}

.site-provenance__source span {
  color: var(--muted);
  font-size: 0.77rem;
}

.site-answer-action-area {
  margin-top: 14px;
}

@media (max-width: 980px) {
  main.site-shell {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .workspace-nav__guard {
    display: none;
  }

  main.site-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 18px 14px 36px;
  }

  .site-sidebar {
    order: 2;
    padding-top: 20px;
    border-top: 1px solid var(--border);
  }

  .site-stage {
    order: 1;
  }

  .site-topbar {
    align-items: stretch;
  }

  .site-profile-summary {
    display: grid;
  }

  .site-source-chip.site-source-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }

  .site-source-card strong {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

@media (max-width: 640px) {
  main.site-shell[data-dev-mode="true"],
  main.site-shell[data-trace-open="true"] {
    grid-template-columns: minmax(0, 1fr);
  }

  main.site-shell[data-dev-mode="true"] .site-layout,
  main.site-shell[data-trace-open="true"] .site-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-profile-summary { display: none; }
  .site-recommendations-head { align-items: flex-start; flex-direction: column; gap: 3px; }
  .site-media-dropzone { align-items: flex-start; }
  .site-media-dropzone .btn--sm { margin-left: 0; }
}

.site-inspector[hidden] {
  display: none;
}

/* Final compact pass: keep the chat answer-first and let the composer grow only when needed. */
.site-topbar {
  padding-bottom: 8px;
}

.site-topbar h2 {
  margin-top: 3px;
  margin-bottom: 4px;
  font-size: clamp(1.32rem, 1.8vw, 1.72rem);
}

.site-topbar p {
  line-height: 1.4;
}

.site-hero-card {
  padding-top: 0;
  padding-bottom: 4px;
}

.site-scenario-picker {
  margin-top: 11px;
  margin-bottom: 10px;
}

.site-recommendations-head {
  margin-top: 13px;
}

.site-answer-card {
  min-width: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}

.site-answer-card.answer--grounded,
.site-answer-card.answer--abstain,
.site-answer-card.answer--vision {
  border: 0;
  box-shadow: none;
  background: transparent;
}

.site-user-bubble {
  width: min(100%, 520px);
  padding: 12px 16px;
  border: 0;
  box-shadow: none;
}

.answer__text {
  min-width: 0;
  padding: 0 16px 5px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.answer__paragraph,
.answer__heading,
.answer__list {
  max-width: 100%;
}

.answer__list {
  padding-right: 16px;
}

.site-provenance__body {
  min-width: 0;
  overflow-wrap: anywhere;
}

.site-composer {
  position: relative;
  gap: 8px;
  padding: 10px 12px 9px;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.site-composer.is-dragging {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

.site-composer textarea {
  min-height: 56px;
  max-height: 320px;
  height: 56px;
  padding: 12px 13px;
  border-radius: 12px;
  resize: none;
  overflow-y: auto;
  line-height: 1.45;
}

.site-composer__footer {
  align-items: center;
  gap: 10px;
}

.site-composer__meta {
  min-width: 0;
  gap: 7px;
}

.site-attach-button {
  display: inline-grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 1.2rem;
  line-height: 1;
}

.site-attach-button:hover {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.site-image-preview {
  min-width: 0;
  max-width: 220px;
  padding: 2px 5px 2px 2px;
}

.site-image-remove {
  display: inline-grid;
  width: 22px;
  height: 22px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
}

.site-image-remove:hover {
  background: var(--interactive-hover);
  color: var(--danger);
}

.site-composer__media-note {
  margin: 0 0 0 38px;
}

.site-list__item {
  position: relative;
  padding: 0;
  overflow: hidden;
}

.site-list__item-main {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 4px;
  padding: 11px 40px 11px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font-weight: 500;
}

.site-list__item-main:hover {
  background: var(--interactive-hover);
}

.site-list__item-delete {
  position: absolute;
  top: 50%;
  right: 6px;
  display: grid;
  width: 28px;
  min-height: 28px;
  height: 28px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1;
  transform: translateY(-50%);
}

.site-list__item-delete:hover {
  background: var(--danger-bg);
  color: var(--danger);
}

.site-list > button.site-list__item {
  position: static;
  display: flex;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
  overflow: visible;
}

.site-list > .site-list__item > .site-list__item-main {
  border-radius: 14px;
}

.kpi__hint {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.console-advanced {
  padding: 0;
}

.console-advanced > summary {
  padding: 15px 16px;
  cursor: pointer;
  color: var(--ink);
  font-weight: 700;
}

.console-advanced[open] > summary {
  border-bottom: 1px solid var(--border);
}

.console-advanced > .card__head,
.console-advanced > form,
.console-advanced > .result {
  margin-right: 16px;
  margin-left: 16px;
}

.console-advanced > .card__head {
  padding-top: 12px;
}

.document-upload-card {
  border-color: var(--accent-border);
}

/* Материалы (Stage C reskin): a single document and a batch upload are two doors to the same
   action — paired side by side like .console-overview pairs readiness+sources, instead of two
   full-width cards to scroll past in sequence. */
.console-documents__uploads {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

@media (max-width: 980px) {
  .console-documents__uploads {
    grid-template-columns: minmax(0, 1fr);
  }
}

.topbar__demo-note {
  margin-left: auto;
}

@media (max-width: 640px) {
  .site-composer__footer {
    align-items: flex-end;
  }

  .site-composer__meta {
    flex-wrap: wrap;
  }

  .site-composer__actions {
    flex: 0 0 auto;
  }

  .site-composer__actions > button {
    width: auto;
  }
}

/* ── Экран обучения (домен VIII §14) ───────────────────────────────────────── */

.courses-shell {
  width: min(1100px, calc(100% - 40px));
  margin: 0 auto;
  padding: 32px 0 64px;
}

.courses-signin {
  display: flex;
  justify-content: center;
  padding-top: 40px;
}

/* `hidden` из браузерного стиля — это `display: none` без класса, и любой класс с собственным
   `display` его перебивает. Без этой строки форма входа оставалась висеть поверх списка курсов
   после успешного входа: JS отрабатывал верно, проигрывал каскад. Поймано в браузере — ни
   разметка, ни тесты этого не видят. */
.courses-signin[hidden] {
  display: none;
}

.courses-signin__card {
  width: min(420px, 100%);
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.courses-signin__card h1 {
  margin: 0 0 8px;
  font-size: 1.35rem;
}

.courses-signin__hint {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.courses-signin__card form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.courses-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--muted);
}

.courses-field input,
.courses-field select,
.courses-field textarea {
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
}

.courses-field textarea {
  resize: vertical;
  min-height: 60px;
}

.courses-field input:focus-visible,
.courses-field select:focus-visible,
.courses-field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* `display: flex` на форме выигрывает у `[hidden]` по специфичности, и без этой строки вход и
   регистрация видны одновременно — обе формы, два поля «Пароль», один экран. Тот же самый случай,
   что и со скрытыми панелями консоли. */
.courses-signin__card form[hidden] {
  display: none;
}

.courses-field__hint {
  color: var(--muted);
  font-size: 0.78rem;
}

.courses-signin__switch {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.courses-linkbutton {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.courses-linkbutton:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.courses-signin__error {
  margin: 16px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--danger-border);
  border-radius: 8px;
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 0.87rem;
}

/* Успешно поданная заявка на регистрацию показывается в том же элементе, что и ошибки входа, но
   красной рамкой сообщать «всё получилось» нельзя: цвет читается раньше текста, и человек уходит
   регистрироваться заново. Токены готовые — обе темы покрыты без второго правила. */
.courses-signin__error.auth-dialog__notice {
  border-color: var(--ok-border);
  background: var(--ok-bg);
  color: var(--ok);
}

.courses-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.courses-topbar h1 {
  margin: 4px 0 6px;
  font-size: 1.5rem;
}

.courses-topbar__text {
  max-width: 62ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.courses-topbar__actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: 8px;
}

.courses-create-link {
  display: inline-flex;
  align-items: center;
  padding: 9px 15px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.87rem;
  font-weight: 700;
  text-decoration: none;
}

.courses-create-link[hidden] {
  display: none;
}

.courses-signout {
  flex: none;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.87rem;
  cursor: pointer;
}

.courses-signout:hover {
  background: var(--interactive-hover);
}

.courses-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.courses-search {
  display: flex;
  min-width: 240px;
  max-width: 360px;
  flex: 1 1 240px;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}

.courses-search svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--muted);
}

.courses-search input {
  min-width: 0;
  flex: 1;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.86rem;
}

.courses-search__clear {
  display: grid;
  width: 20px;
  height: 20px;
  flex: none;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted);
  cursor: pointer;
}

.courses-search__clear[hidden] {
  display: none;
}

.courses-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.courses-filter {
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.courses-filter.is-active {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.courses-empty {
  margin: 0;
  padding: 28px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  text-align: center;
}

/* Sits above #courses-view in the DOM (courses.html) — this state needs its own bottom margin,
   unlike other .courses-empty uses, where nothing else follows in the same container. */
#assigned-tests-view .courses-empty {
  margin-bottom: 24px;
}

/* Reuses the console's own table language (.console .table-wrap, above) rather than inventing a
   second one: bordered, rounded wrap with overflow-x so a phone scrolls the table, not the page. */
.courses-assigned-tests {
  margin-bottom: 24px;
}

.courses-assigned-tests h2 {
  margin: 0 0 12px;
  font-size: 1.05rem;
}

.courses-assigned-tests__desktop {
  border: 1px solid var(--border);
  border-radius: 12px;
}

.courses-assigned-tests__desktop thead {
  background: var(--surface-2);
}

.courses-assigned-tests__cards {
  display: none;
}

.courses-assigned-test-card {
  display: grid;
  gap: 8px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface-2);
}

.courses-assigned-test-card__title {
  font-size: 0.89rem;
  line-height: 1.4;
}

.courses-assigned-test-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.81rem;
}

.courses-assigned-test-card__action {
  justify-self: start;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.courses-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.courses-summary + .courses-grid,
.courses-grid + .courses-drafts-pending {
  margin-top: 16px;
}

.courses-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.courses-card[hidden] {
  display: none;
}

.courses-card__cover {
  position: relative;
  display: flex;
  min-height: 92px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  overflow: hidden;
  padding: 12px 14px;
  border: 0;
  background: linear-gradient(125deg, var(--brand-deep), #1f6ba8 58%, var(--brand-light));
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.courses-card--complete .courses-card__cover {
  background: linear-gradient(125deg, #16563f, #1f8a63 60%, #4cc38a);
}

.courses-card__cover::after {
  position: absolute;
  right: -30px;
  bottom: -70px;
  width: 170px;
  height: 170px;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 50%;
  content: "";
}

.courses-card__badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  padding: 3px 9px;
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 999px;
  background: rgb(255 255 255 / 14%);
  font-size: 0.68rem;
  font-weight: 700;
}

.courses-card__title {
  position: relative;
  z-index: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.98rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.courses-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
}

.courses-card__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.courses-card__text--empty {
  font-style: italic;
}

.courses-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

/* `--warn` в тёмной теме — янтарный статусный цвет (#de9b38), рассчитанный прежде всего на
   границы и акценты. Для текста на плашках используется отдельный контрастный `--warn-ink`. */
.courses-card__flag {
  color: var(--ink);
  font-weight: 600;
}

.courses-card__action {
  width: 100%;
  margin-top: 2px;
  padding: 9px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
}

.courses-card__edit {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.courses-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 4px;
}

.courses-progress__bar {
  flex: 1;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-2);
}

.courses-progress__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

.courses-progress__value {
  min-width: 3.2em;
  color: var(--muted);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Вкладка «Курсы» в консоли — карточки контент-админа только на просмотр (Stage D). Отдельные
   классы от .courses-card выше: та семантика — прогресс сотрудника в каталоге /courses, эта —
   статус курса для администрирования; клик уводит на /courses?edit=<id>. */
.courses-console-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  margin: 14px 0 0;
  padding: 0;
}

.courses-console-card {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.courses-console-card:hover {
  background: var(--surface-2);
}

.courses-console-card h3 {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.3;
}

.courses-console-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

.eval-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.eval-progress__bar {
  flex: 1;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-2);
}

.eval-progress__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

.eval-progress__value {
  min-width: 9em;
  color: var(--muted);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

@media (max-width: 640px) {
  .courses-topbar {
    flex-direction: column;
  }
}

@media (max-width: 700px) {
  .courses-assigned-tests__desktop {
    display: none;
  }

  .courses-assigned-tests__cards {
    display: grid;
    gap: 10px;
  }
}

.courses-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.courses-summary__headline {
  font-size: 0.98rem;
}

.courses-summary__detail {
  color: var(--muted);
  font-size: 0.86rem;
}

.courses-drafts-pending {
  margin: 0;
  padding: 14px 18px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.86rem;
}

.course-detail {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.course-back {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 0.87rem;
  cursor: pointer;
}

.course-back:hover {
  text-decoration: underline;
}

.course-detail__title {
  margin: 0;
  font-size: 1.3rem;
}

.course-chat {
  display: grid;
  gap: 16px;
  max-width: 760px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.course-chat__open,
.course-chat form button,
.course-chat__threads button {
  align-self: flex-start;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.course-chat h2,
.course-chat h3,
.course-chat p {
  margin: 0;
}

.course-chat__messages,
.course-chat__threads {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.course-chat__messages li,
.course-chat__threads li {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.course-chat form {
  display: grid;
  gap: 8px;
}

.course-chat textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.course-chat__open:focus-visible,
.course-chat button:focus-visible,
.course-chat textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 2px;
}

.course-resume {
  align-self: flex-start;
  padding: 9px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: 0.87rem;
  font-weight: 600;
  cursor: pointer;
}

.course-resume:hover {
  filter: brightness(0.95);
}

.course-module {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.course-module__title {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.course-articles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.course-articles__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 8px;
}

.course-articles__item:hover {
  background: var(--surface-2);
}

.course-articles__link {
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.course-articles__link:hover {
  color: var(--accent);
}

.course-articles__marks {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
}

.course-articles__optional {
  color: var(--muted);
  font-size: 0.8rem;
}

.course-page {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.course-page:last-of-type {
  border-bottom: 0;
}

.course-page__text {
  max-width: 68ch;
  margin: 0;
  line-height: 1.65;
}

.course-page__note {
  max-width: 68ch;
  margin: 0;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.88rem;
}

.course-page__image {
  display: block;
  max-width: min(68ch, 100%);
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.course-page__media {
  max-width: min(68ch, 100%);
  margin: 0;
}

.course-page__media-label {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.course-page__media-caption {
  max-width: min(68ch, 100%);
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.course-video {
  max-width: min(68ch, 100%);
}

.course-video__player {
  display: block;
  width: 100%;
  max-width: min(68ch, 100%);
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #000;
}

.course-video__note {
  max-width: 68ch;
  margin: 0;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.88rem;
}

.course-articles__media,
.course-reader__media {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2;
}

.course-detail__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
}

.course-detail__foot > * {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.course-testcard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: 68ch;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}

.course-testcard__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1rem;
}

.course-testcard__meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.course-test__counter {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.course-test__clock {
  color: var(--ink);
}

.course-test__form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 68ch;
}

.course-test__fieldset {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

.course-test__question {
  padding: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.5;
}

.course-test__option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  line-height: 1.5;
}

.course-test__option:hover {
  border-color: var(--accent);
}

.course-test__option:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.course-test__option input {
  margin-top: 3px;
}

.course-test__hint {
  max-width: 68ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.course-test__score {
  margin: 0;
  font-size: 1.1rem;
}

.course-test-feedback__verdict {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.course-test-feedback__verdict.is-correct {
  color: var(--ok);
}

.course-test-feedback__verdict.is-wrong {
  color: var(--danger);
}

.course-test-feedback__answers {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 4px 12px;
  margin: 0;
}

.course-test-feedback__answers dt {
  color: var(--muted);
  font-size: 0.85rem;
}

.course-test-feedback__answers dd {
  margin: 0;
}

/* На телефоне подпись и ответ в две колонки оставляют ответу треть ширины: варианты в этих
   тестах — целые фразы, и такой ответ читается по два слова в строке. */
@media (max-width: 560px) {
  .course-test-feedback__answers {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .course-test-feedback__answers dd + dt {
    margin-top: 10px;
  }
}

.course-test-feedback__explanation {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface-2);
  line-height: 1.5;
}

/* ── Чат как приложение, а не как длинная страница ──────────────────────────
   The chat used to scroll as one document: on a phone the message box sat below
   the entire conversation and another screen of sidebar sat below that, so
   asking a follow-up meant scrolling past everything you had just read. Here the
   conversation scrolls inside its own pane and the box that answers it stays
   where the thumb already is.

   Scoped to main.site-shell[data-conversation] — chat and dev only, now that every workspace
   surface shares the .site-shell markup. Courses/profile/team/console keep the normal, page-
   scrolling document flow: their .site-stage never gets this attribute. */

/* The chat page becomes a frame: the workspace nav keeps its own height and the shell fills
   exactly what is left. Written on the body rather than as a magic number, because the nav's
   height is a consequence of its content and would drift the moment a label changes. */
body:has(main.site-shell[data-conversation]) {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Component classes set their own display modes, so the UA [hidden] rule is
   otherwise lost in the cascade (notably share/stats/continue panels). */
main.site-shell [hidden] {
  display: none !important;
}

main.site-shell[data-conversation] {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  /* align-items:start from the earlier layer lets the stage grow past its row, which is exactly
     what put the message box below the fold. The stage has to fill its row, not size to content.
     Matched on the element too, because that is the specificity the earlier rule uses. */
  align-items: stretch;
  /* align-items settles the item inside its row; the row itself was still the default auto, so it
     grew to the conversation — a 1380px row inside a 656px frame. The overflow:hidden above then
     clipped the message box and the end of the last answer out of the window, and no amount of
     scrolling the pane inside could bring them back, because they were outside it. Stated as an
     explicit row so the frame's height, not its content, decides. */
  grid-template-rows: minmax(0, 1fr);
  padding-bottom: 0;
}

main.site-shell[data-conversation] .site-stage,
main.site-shell[data-conversation] .site-layout,
main.site-shell[data-conversation] .site-chat-column {
  min-height: 0;
}

main.site-shell[data-conversation] .site-stage {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

/* /dev inserts .site-dev-banner between the topbar and the layout — the two-row assumption above
   squeezed it into the fr track and made it overlap the hero card underneath. */
main.site-shell[data-conversation] .site-stage:has(.site-dev-banner) {
  grid-template-rows: auto auto minmax(0, 1fr);
}

/* An earlier layer resets .site-layout to display:block, which drops the height the rows below
   need. Restated here rather than edited there: that rule still describes the other surfaces. */
main.site-shell .site-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

main.site-shell[data-dev-mode="true"] .site-layout {
  grid-template-columns: minmax(0, 1fr) 296px;
}

main.site-shell .site-chat-column {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.site-scroll {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  overflow-y: auto;
  /* Room for the shadow the pinned composer casts, so the last answer does not
     end flush against it. */
  padding-bottom: 8px;
  overscroll-behavior: contain;
}

main.site-shell .site-inspector {
  min-height: 0;
  overflow-y: auto;
}

/* The opening explanation belongs to an empty conversation. Left standing it charged 157px of
   every screen — a fifth of a laptop window — to repeat, above the conversation, what the starter
   card says inside it. Keyed to whether anything has been asked, not to screen width: a narrow
   window with no messages still deserves the explanation, and a wide one with a conversation in it
   does not. */
main.site-shell[data-conversation="active"] .site-topbar__intro {
  display: none;
}

/* The label repeats the placeholder word for word. Clipped rather than display:none, which would
   take the field's accessible name with it. */
.site-composer__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* One box, the way a message field reads everywhere else. Two were drawn one inside the other —
   same white, same border — so the field showed a seam down its edge, and its two controls held a
   row of their own underneath, spending 40px of conversation on two small buttons and the air
   between them. Now the composer is the box, the text sits in it, and the controls rest on its
   floor. The strip they rest in is the composer's own bottom padding, not padding inside the
   field: the field's padding is what autosize measures, and reserving the room there made an
   empty one-line field 106px tall. */
.site-composer {
  padding: 12px 14px 46px;
}

.site-composer textarea {
  min-height: 44px;
  height: 44px;
  padding: 2px 6px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.site-composer textarea:focus,
.site-composer textarea:focus-visible {
  outline: none;
  box-shadow: none;
}

/* The frame answers for the field it now contains, so focus stays as visible as it was. */
.site-composer:focus-within {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

/* The container ignores the pointer so the empty stretch between the two controls still belongs to
   the field — clicking it puts the cursor in the text rather than nowhere. */
.site-composer__footer {
  position: absolute;
  right: 14px;
  bottom: 10px;
  left: 14px;
  pointer-events: none;
}

.site-composer__footer > * {
  pointer-events: auto;
}

.site-nav-toggle {
  display: none;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.site-topbar__compact-title {
  display: none;
  font-weight: 600;
}

.site-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgb(0 0 0 / 45%);
}

@media (max-width: 860px) {
  /* The sidebar becomes a drawer rather than a second screen of page. It is
     still the same markup — only its position changes — so every control in it
     keeps working without a mobile-only copy that could drift. */
  main.site-shell {
    grid-template-columns: minmax(0, 1fr);
    min-height: 100dvh;
    /* The floating "app card" only makes sense with visible page background around it. On a
       narrow viewport, matching the prototype, the shell fills the screen instead. */
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }

  main.site-shell .site-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    width: min(86vw, 320px);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    /* Transparent is right for a column sitting in the page and wrong for a panel floating over
       it: the conversation showed straight through the drawer. */
    padding: 16px 14px 24px;
    border-right: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow);
  }

  main.site-shell[data-nav="open"] .site-sidebar {
    transform: translateX(0);
  }

  .site-nav-toggle,
  .site-topbar__compact-title {
    display: block;
  }

  /* The greeting is a first-visit explanation, not a header. On a phone it cost
     the whole first screen on every single visit. */
  .site-topbar__intro {
    display: none;
  }

  .site-topbar {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 14px;
  }

  .site-topbar .site-profile-summary,
  .site-topbar__actions {
    margin-left: auto;
  }

  /* Tighter at the sides than on a desktop, but the strip the controls rest in stays: dropped, the
     placeholder ran straight under the send button. */
  .site-composer {
    padding: 10px 12px 44px;
  }

  /* Attachment on the left, send on the right, one line — the arrangement a thumb expects. Stacked
     it cost another 60px of the screen the conversation is trying to use. */
  .site-composer__footer {
    right: 12px;
    bottom: 9px;
    left: 12px;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .site-composer__actions {
    margin-left: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  main.site-shell .site-sidebar {
    transition: none;
  }
}

/* The row that stays under an answer. Everything else in that group is a disclosure. */
main.site-shell .site-answer-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.site-answer-actions__row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.site-icon-action {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1;
}

.site-icon-action svg {
  width: 17px;
  height: 17px;
  fill: currentcolor;
}

.site-icon-action:hover:not(:disabled) {
  background: var(--interactive-hover);
  color: var(--ink);
}

.site-icon-action[aria-expanded="true"] {
  background: var(--interactive-hover);
  color: var(--ink);
}

.site-icon-action.is-selected {
  background: var(--ok-bg);
  color: var(--ok);
}

.site-icon-action:disabled {
  opacity: 0.55;
}

.site-feedback__thanks {
  color: var(--muted);
  font-size: 0.78rem;
}

.site-answer-actions__more,
.site-answer-actions__reasons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.site-answer-actions__more[hidden],
.site-answer-actions__reasons[hidden] {
  display: none;
}

/* Материалы урока — файлы, которые урок отдаёт читателю. */
.course-materials {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 68ch;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.course-materials__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.course-materials__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.course-materials__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.course-materials__link {
  font-weight: 600;
}

.course-materials__meta,
.course-materials__empty,
.course-materials__note {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.course-materials__note {
  flex-basis: 100%;
}

.course-materials__upload {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: 10px;
}

.course-materials__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--muted);
}

.course-materials__field input[type="text"] {
  min-width: 22ch;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
}

/* Читалка курса: оглавление рядом с уроком, а не вместо него. */
.course-reader {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.course-reader__rail {
  display: flex;
  position: sticky;
  top: 16px;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.course-reader__course {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.course-reader__progress {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.course-reader__bar {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}

.course-reader__bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

.course-reader__module {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.course-reader__module-title {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.course-reader__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.course-reader__link {
  display: grid;
  width: 100%;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  padding: 7px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 0.86rem;
  text-align: left;
}

.course-reader__link:hover {
  background: var(--interactive-hover);
}

.course-reader__link.is-current {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.course-reader__mark {
  color: var(--ok);
  font-size: 0.8rem;
}

.course-reader__learning-status {
  display: flex;
  flex-wrap: wrap;
  grid-column: 2;
  gap: 4px 8px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.course-articles__item > .course-reader__learning-status {
  flex: 0 0 100%;
  margin-left: 2px;
}

.course-reader__learning-item.is-started {
  color: var(--accent);
}

.course-reader__learning-item.is-complete {
  color: var(--ok);
  font-weight: 600;
}

.course-reader__video-status {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  white-space: nowrap;
}

.course-reader__video-status.is-started {
  background: var(--accent-soft);
  color: var(--accent);
}

.course-reader__video-status.is-complete {
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  color: var(--ok);
  font-weight: 600;
}

.course-reader__gate {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-2);
  font-size: 0.78rem;
  line-height: 1.45;
}

.course-practical-summary {
  display: grid;
  gap: 8px;
  max-width: 68ch;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: 12px;
  background: var(--surface-2);
}

.course-practical-summary__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.course-practical-summary__head h3 {
  margin: 0;
  font-size: 0.95rem;
}

.course-practical-summary > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.course-practical-summary__link {
  justify-self: start;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: left;
}

.course-reader__gate p {
  margin: 0;
  color: var(--muted);
}

.course-reader__gate-details summary {
  color: var(--accent);
  cursor: pointer;
}

.course-reader__gate-link {
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.course-reader__gate-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.course-reader__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

@media (max-width: 860px) {
  .course-reader {
    grid-template-columns: minmax(0, 1fr);
  }

  .course-reader__rail {
    position: static;
  }
}

/* `.site-primary-action` растянута на всю ширину ради кнопки «Новый диалог» в боковой панели чата.
   В читалке курса от этого каждое действие превращается в плиту во всю колонку — «Пройти тест»,
   «Приложить», «Прочитано, дальше» подряд. Здесь кнопка по размеру своего текста. */
.course-reader .site-primary-action,
.course-reader .site-action {
  width: auto;
}

/* ── Боковая панель чата ───────────────────────────────────────────────────
   Верхняя полоса разделов над экраном с собственной панелью — это два ряда навигации один над
   другим, и первый отъедал высоту у самого разговора. Разделы переехали в панель, а сама панель
   собрана как в привычных чат-интерфейсах: строки одной высоты со значком и подписью, список
   диалогов — простые строки, учётная запись внизу.

   Панель — колонка внутри рамки фиксированной высоты, а не длинная страница.
   `align-self: stretch` здесь не украшение: более ранний слой ставит ей `align-self: start`, и она
   продолжала считать высоту по содержимому (1318px в окне 711px), а прокручивать при такой высоте
   уже нечего. Замерено в браузере: из разметки этого не видно. */
main.site-shell .site-sidebar {
  align-self: stretch;
  min-height: 0;
  gap: 10px;
  overflow-y: auto;
  padding-bottom: 4px;
}

.site-sidebar__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 2px;
}

.site-sidebar__logo {
  display: grid;
  width: 28px;
  height: 28px;
  flex: none;
  place-items: center;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--accent), #78d0e2);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 800;
}

.site-sidebar__product {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
}

.site-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Строка раздела: значок фиксированной ширины, подпись, одна высота на все. Внутри панели у неё
   ничего общего с таблеткой из верхней полосы, поэтому переписаны и отступы, и скругление. */
.site-sidebar__nav .workspace-nav__tab {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 500;
  text-align: left;
}

.site-sidebar__nav .workspace-nav__tab:hover {
  background: var(--interactive-hover);
}

.site-sidebar__nav .workspace-nav__tab.is-active {
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 600;
}

/* Строка «Чат» держит рядом «+» — начать новый диалог. Раздел и действие над ним стоят в одной
   строке, но подсветка выбранного раздела остаётся на самом разделе: «+» никуда не ведёт, и
   закрашивать его как текущее место было бы неправдой. */
.site-sidebar__nav .workspace-nav__row {
  display: flex;
  align-items: center;
  gap: 2px;
}

.site-sidebar__nav .workspace-nav__row .workspace-nav__tab {
  min-width: 0;
  flex: 1;
}

.workspace-nav__add {
  display: grid;
  width: 30px;
  height: 30px;
  flex: none;
  place-items: center;
  border-radius: 8px;
  color: var(--muted);
  text-decoration: none;
}

.workspace-nav__add:hover {
  background: var(--interactive-hover);
  color: var(--ink);
  text-decoration: none;
}

/* Значки нарисованы обводкой, а не заливкой: залитые в строке подписи читаются как кнопки. */
.workspace-nav__icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
}

.workspace-nav__tab.is-active .workspace-nav__icon {
  opacity: 1;
}

.site-sidebar__nav .workspace-nav__guard {
  margin-left: auto;
}

/* Заголовок группы — обычное слово вполголоса, а не разрядка капслоком: капслок в панели читается
   как ещё один уровень навигации. */
main.site-shell .site-sidebar .site-sidebar__title {
  padding: 0 10px;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

main.site-shell .site-sidebar .site-sidebar__section {
  gap: 2px;
}

main.site-shell .site-sidebar .site-list {
  gap: 1px;
}

/* Диалог в списке — одна строка текста. Карточка с датой и числом вопросов занимала три строки на
   запись, и пять диалогов вытесняли из панели всё остальное; сама запись при этом не отвечала ни
   на один вопрос, кроме «как он называется». Дата и число вопросов остались в подсказке. */
main.site-shell .site-sidebar .site-list__item {
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 0;
  /* Более ранний слой прячет всё, что вылезает за строку; кольцо фокуса на кнопке удаления стоит
     со сдвигом наружу и обрезалось справа. Строка теперь ничего не переполняет — обрезать нечего. */
  overflow: visible;
}

main.site-shell .site-sidebar .site-list__item-main {
  display: block;
  padding: 7px 34px 7px 10px;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

main.site-shell .site-sidebar > .site-sidebar__section .site-list__item-delete {
  opacity: 0;
}

/* Кнопка удаления появляется на наведении и на фокусе с клавиатуры — иначе до неё нельзя
   добраться табом, а строка списка без видимого фокуса выглядит нерабочей. */
main.site-shell .site-sidebar .site-list__item:hover .site-list__item-delete,
main.site-shell .site-sidebar .site-list__item-delete:focus-visible {
  opacity: 1;
}

main.site-shell .site-sidebar > .site-sidebar__section > .site-list > button.site-list__item {
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 0.86rem;
}

main.site-shell .site-sidebar .site-list__item--unread {
  border-left: 2px solid var(--accent);
}

main.site-shell .site-sidebar .site-note {
  padding: 0 10px;
  font-size: 0.78rem;
}

/* Учётная запись внизу панели, отделённая линией: там её ищут по привычке. */
/* Две строки, а не одна. В строку они не помещаются: у кнопки темы задана ширина 32 px, но
   `min-width` у элемента флекса по умолчанию `auto`, поэтому вперёд неё проходит ширина
   содержимого — видимое слово «Тёмная» растягивало кнопку до 63 px и отбирало место у соседа.
   Имени оставалось 96 px при нужных 124, и «Вход не выполнен» показывалось как «Вход не вып…»;
   имя настоящего сотрудника обрезалось бы тем более. Прятать слово нельзя — переключатель темы
   должен читаться без догадки по значку луны. */
.site-sidebar__foot {
  display: grid;
  gap: 2px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.site-sidebar__account-row {
  position: relative;
  display: block;
  min-width: 0;
}

.site-sidebar__account-menu {
  position: relative;
}

.site-sidebar__account-menu > summary {
  list-style: none;
  cursor: pointer;
}

.site-sidebar__account-menu > summary::-webkit-details-marker {
  display: none;
}

.site-sidebar__account-actions {
  position: absolute;
  z-index: 30;
  right: 0;
  bottom: calc(100% + 4px);
  left: 0;
  display: grid;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgb(0 0 0 / 14%);
}

.site-sidebar__account-actions[hidden] {
  display: none;
}

.site-sidebar__account-action {
  display: flex;
  min-height: 40px;
  align-items: center;
  padding: 6px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.76rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.site-sidebar__account-action:hover {
  background: var(--interactive-hover);
  color: var(--ink);
}

.site-sidebar__account-action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.site-account {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
}

.site-account:hover {
  background: var(--interactive-hover);
}

.site-account__mark {
  display: grid;
  width: 28px;
  height: 28px;
  flex: none;
  place-items: center;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
}

.site-account__text {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.site-account__text strong,
.site-account__text span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.site-account__text strong {
  font-size: 0.84rem;
  font-weight: 600;
}

.site-account__text span {
  color: var(--muted);
  font-size: 0.74rem;
}

.site-account__theme {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 0.74rem;
  text-align: left;
}

/* Значок занимает ту же ширину, что и кружок с инициалами над ним, — тогда слово «Тёмная»
   встаёт ровно под именем, и две строки подвала читаются как одна колонка, а не как случайная пара. */
.site-account__theme > [aria-hidden] {
  display: grid;
  width: 28px;
  flex: none;
  place-items: center;
  font-size: 0.95rem;
}

.site-account__theme:hover {
  background: var(--interactive-hover);
  color: var(--ink);
}

/* Вопрос о профиле рекомендаций — один раз, при первом входе. Дальше он живёт в профиле. */
.site-role-setup {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--accent-border);
  border-radius: 14px;
  background: var(--accent-soft);
}

.site-role-setup[hidden] {
  display: none;
}

.site-role-setup .site-role-options {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

.site-role-setup .site-role-option {
  background: var(--surface);
}

/* ── Экран профиля ─────────────────────────────────────────────────────────
   Только показывает: должность, отдел, руководитель и специализация ведутся администратором.
   Настраивается здесь одно — профиль рекомендаций, и он браузерный, а не серверный. */
.profile-shell {
  width: min(1100px, calc(100% - 40px));
  margin: 0 auto;
  padding: 32px 0 64px;
}

.profile-signin {
  display: flex;
  justify-content: center;
  padding-top: 40px;
}

/* Тот же каскадный подвох, что и на экране обучения: `hidden` без класса — это `display: none`,
   и любой класс с собственным `display` его перебивает. */
.profile-signin[hidden],
.profile-workspace[hidden] {
  display: none;
}

.profile-workspace {
  display: grid;
  gap: 20px;
}

.profile-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.profile-topbar h1 {
  margin: 4px 0 6px;
  font-size: 1.5rem;
}

.profile-topbar__text {
  max-width: 62ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.profile-card {
  display: grid;
  gap: 20px;
}

.profile-card__head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.profile-card__avatar {
  display: grid;
  width: 56px;
  height: 56px;
  flex: none;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--accent), #78d0e2);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 800;
}

.profile-card__head h2 {
  margin: 0;
  font-size: 1.3rem;
}

.profile-card__head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.profile-card__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.profile-panel {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.profile-panel h2,
.profile-panel h3 {
  margin: 0;
  font-size: 1rem;
}

.profile-facts {
  display: grid;
  gap: 10px;
  margin: 0;
}

/* Метка над значением, а не в колонке слева: значения здесь разной длины — от «Работает» до
   полного имени руководителя, — и в две колонки строки расходятся по высоте. */
.profile-facts__row {
  display: grid;
  gap: 2px;
}

.profile-facts dt {
  color: var(--muted);
  font-size: 0.78rem;
}

.profile-facts dd {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.profile-specialization {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.profile-specialization--empty {
  color: var(--muted);
  font-weight: 600;
}

/* Пять коротких подписей в столбик растягивались на всю ширину карточки — строка в 1000px ради
   слова «Полевик». Сеткой они встают в ряд и переносятся сами, когда места мало. */
.profile-panel .site-role-options {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

/* Иначе карточку имел только выбранный вариант, а остальные выглядели голым текстом — то же
   поле выбора, что и «Тема»/«Шрифт» рядом, но собранное иначе. */
.profile-panel .site-role-option {
  border-color: var(--border);
  background: var(--surface);
}

#profile-learning-analytics {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#team-analytics {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

.profile-role-caption {
  margin: 0;
}

@media (max-width: 860px) {
  .profile-topbar {
    flex-direction: column;
    gap: 12px;
  }
}

/* ── Панель стоит у края экрана, и её можно убрать ──────────────────────────
   Панель занимала колонку внутри страницы шириной 1360px, посаженной по центру: слева от неё
   оставалась полоса пустого фона, и на широком мониторе разговор оказывался не в середине, а
   заметно правее. Теперь панель начинается от самого края окна, а разговор считает середину сам.

   Убирается панель целиком, а не в узкую полосу со значками: полоса значков без подписей — это
   ребус, а не навигация, и место она всё равно занимает. Решение запоминается — см. site.js.

   Всё это про широкий экран. На телефоне панель и так выдвигается от левого края поверх разговора
   (правило выше по файлу), и трогать её незачем — поэтому вся эта часть за min-width. */

.site-rail-button {
  display: none;
  padding: 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.site-rail-button:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.site-rail-icon {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 861px) {
  main.site-shell .site-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  main.site-shell .site-topbar__intro {
    max-width: 540px;
  }

  main.site-shell .site-topbar h2 {
    max-width: 540px;
  }

  main.site-shell .site-topbar__actions {
    grid-column: 2;
  }

  main.site-shell {
    max-width: none;
    padding: 0;
    gap: 0;
    grid-template-columns: 260px minmax(0, 1fr);
  }

  main.site-shell[data-rail="collapsed"] {
    grid-template-columns: minmax(0, 1fr);
  }

  main.site-shell[data-rail="collapsed"] .site-sidebar {
    display: none;
  }

  /* Своя заливка и граница — иначе панель, дошедшая до края окна, читается как поле страницы, а не
     как отдельная поверхность. `position: static` вместо прежнего `sticky`: липкость имела смысл,
     пока страница прокручивалась целиком, а теперь панель — колонка рамки во всю её высоту. */
  main.site-shell .site-sidebar {
    position: static;
    height: 100%;
    padding: 12px 10px 4px;
    border-right: 1px solid var(--border);
    border-radius: 0;
    background: var(--surface-2);
  }

  /* Отступы от краёв ушли с оболочки, и теперь их держит сцена — иначе разговор упирался бы в
     границу панели слева и в край окна справа. */
  main.site-shell .site-stage {
    min-width: 0;
    padding: 14px 24px 0;
  }

  /* Разговор шире не стал — он просто встал посередине того места, что ему осталось. */
  main.site-shell .site-chat-column {
    margin-inline: auto;
  }

  .site-rail-button {
    display: inline-flex;
  }

  main.site-shell:not([data-rail="collapsed"]) #workspace-rail-expand {
    display: none;
  }
}

/* Прижата к правому краю шапки панели — там, где такие кнопки и стоят. */
.site-sidebar__head .site-rail-button {
  margin-left: auto;
}

/* ── Единая сцена чата и профиля ───────────────────────────────────────────
   The last layer owns geometry for these two user surfaces.  Earlier product passes intentionally
   remain in the stylesheet for their other screens, so the fixes live here rather than relying on
   which one happened to win by specificity. */

/* A text label makes the same control understandable in the sidebar and the top navigation. */
.site-account__theme {
  width: auto;
  gap: 6px;
  padding: 6px 8px;
  font-size: 0.78rem;
}

.profile-card__grid {
  align-items: start;
}

main.site-shell .site-kicker,
main.site-shell .site-source-chip-row__label,
main.site-shell .site-recommendations-head .site-source-chip-row__label,
.profile-workspace .site-kicker {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* The composer is a normal two-row control.  Its actions used to be absolutely positioned inside
   the textarea's floor, which let a wrapped placeholder collide with the send button on a phone. */
main.site-shell .site-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 12px;
}

main.site-shell .site-composer__footer {
  position: static;
  right: auto;
  bottom: auto;
  left: auto;
  min-height: 30px;
  pointer-events: auto;
}

@media (min-width: 861px) {
  main.site-shell .site-topbar,
  main.site-shell .site-chat-column {
    width: min(100%, 744px);
    max-width: 744px;
    margin-inline: auto;
  }

  main.site-shell[data-conversation="empty"] .site-scroll {
    /* Preserve the centered empty state when it fits, but fall back to start alignment when the
       starter card is taller than the scrollport. Plain center puts the card's top above the
       scroll origin on short laptop windows, making the role selector unreachable. */
    justify-content: safe center;
  }

  main.site-shell[data-conversation="empty"] .site-thread {
    display: none;
  }

  /* После закрытия панели колонка остаётся на общей оси экрана, а не сохраняет прежнее смещение
     от края старой сетки. */
  main.site-shell[data-rail="collapsed"] .site-topbar,
  main.site-shell[data-rail="collapsed"] .site-chat-column {
    margin-inline: auto;
  }

  /* Кнопка возврата панели не должна занимать третью колонку в шапке и сужать заголовок. */
  main.site-shell[data-rail="collapsed"] #workspace-rail-expand {
    position: fixed;
    z-index: 20;
    top: 12px;
    left: 12px;
  }

  main.site-shell .site-hero-card {
    padding-left: 0;
    border-left: 0;
  }
}

main.site-shell .site-sidebar .site-list__item-main {
  display: -webkit-box;
  min-height: 2.8em;
  padding-right: 34px;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (max-width: 860px) {
  main.site-shell .site-composer {
    padding: 10px 12px;
  }

  main.site-shell .site-composer__footer {
    align-items: center;
  }
}

/* Верхняя навигация должна быть полной, а не оставлять половину вкладки за краем телефона.
   Диагностика остаётся доступна по прямому адресу, но на рабочем мобильном экране уступает место
   четырём пользовательским разделам. */
@media (max-width: 640px) {
  .workspace-nav__tab {
    padding: 6px;
    font-size: 0.76rem;
  }
}

/* Отказ вместо содержимого. Раньше на его месте оставалось прежнее или «Загружаем…», и человек
   не мог отличить «сервер отказал» от «долго думает». Цветом здесь не кричим: это сообщение о
   состоянии, а не тревога — красная плита во всю ширину пугает сильнее, чем помогает. */
.courses-failure {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.courses-failure__text {
  margin: 0;
  color: var(--ink);
  font-size: 0.92rem;
}

/* Same shape as .course-materials__error: a failed POST is reported next to the button that
   triggered it, not by replacing the surrounding content. */
.courses-post-failure {
  margin: 6px 0 0;
  color: var(--danger);
  font-size: 0.82rem;
}

/* Отказ по конкретному файлу стоит под самой ссылкой, а не наверху списка: наверху непонятно,
   какой из материалов не открылся. */
.course-materials__error {
  margin: 4px 0 0;
  color: var(--danger);
  font-size: 0.82rem;
}

/* --- /login, /join/{token}: dedicated split-screen entry (redesign §8.1, «Ход 2») ---
   Full-bleed — deliberately outside the workspace shell (login.html never sets workspace_surface,
   so base.html skips it), no sidebar: a person landing here from an invite link is not yet inside
   the app. */
.auth-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(440px, 100%);
  min-height: 100vh;
  background: var(--bg);
}

.auth-page__aside {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 40px;
  background: #132a4d;
  color: #fff;
  overflow: hidden;
}

.auth-page__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.auth-page__mark {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 10px;
  background: #fff;
  color: #132a4d;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.auth-page__manifesto {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 30ch;
}

.auth-page__manifesto h1 {
  margin: 0;
  font-size: 1.9rem;
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.auth-page__manifesto p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.65;
  opacity: 0.82;
}

.auth-page__foot {
  font-size: 0.82rem;
  opacity: 0.6;
}

.auth-page__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 36px 40px;
  background: var(--surface);
  overflow-y: auto;
}

.auth-page__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-page__form[hidden] {
  display: none;
}

.auth-page__form-head {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.auth-page__form-head h2 {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: -0.025em;
}

.auth-page__form-head .hint {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.auth-page__form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.courses-field__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.gap-manual-add {
  margin: 14px 0;
}

.gap-manual-add > summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
}

.gap-manual-add__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.gap-manual-add__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.gap-show-closed {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 0.85rem;
}

.gap-action-card {
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-muted, var(--surface));
}

.gap-action-card__section {
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px dashed var(--border);
}

.gap-action-card__section:first-of-type {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

.gap-action-card__section h4 {
  margin: 0 0 8px;
  font-size: 0.85rem;
  color: var(--muted);
}

.auth-invite-banner {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid var(--accent-border);
  border-radius: 11px;
  background: var(--accent-soft);
}

.auth-invite-banner[hidden] {
  display: none;
}

.auth-invite-banner__check {
  display: grid;
  width: 30px;
  height: 30px;
  flex: none;
  place-items: center;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ok);
  font-weight: 700;
}

.auth-invite-banner strong {
  display: block;
  font-size: 0.87rem;
  color: var(--accent-strong);
}

.auth-invite-banner .hint {
  color: var(--muted);
  font-size: 0.79rem;
}

.auth-strength {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: -8px;
}

.auth-strength__bars {
  flex: 1;
  display: flex;
  gap: 4px;
}

.auth-strength__bars span {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--surface-2);
}

.auth-strength__bars span.is-filled {
  background: var(--ok);
}

.auth-strength__label {
  color: var(--ok);
  font-size: 0.78rem;
  font-weight: 600;
  min-width: 5ch;
}

@media (max-width: 860px) {
  .auth-page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .auth-page__aside {
    padding: 26px 22px 22px;
  }

  .auth-page__manifesto h1 {
    font-size: 1.22rem;
    max-width: 22ch;
  }

  .auth-page__manifesto p {
    display: none;
  }
}

/* Stage 8 — chat home-screen widgets (hero stat tiles + right column: focus / continue-course /
   activity). Scoped with :has() to the presence of the widget column itself, rather than a new
   shell-level data attribute, so dev mode (which never renders it) is unaffected automatically. */
main.site-shell .site-layout:has(.site-focus-column:not([hidden])) {
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
}

.site-hero-stats {
  display: flex;
  gap: 14px;
  margin-top: 14px;
}

.site-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--accent-soft);
}

.site-hero-stat strong {
  color: var(--accent-strong);
  font-size: 1.2rem;
  line-height: 1.1;
}

.site-hero-stat span {
  color: var(--muted);
  font-size: 0.76rem;
}

.site-focus-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  overflow-y: auto;
}

/* Cover-image treatment matching the redesign-v2 prototype's .course-card: the panel's own
   padding (.site-panel, 14px) is cancelled on the top/sides so the gradient cover bleeds to the
   card's edges, then .site-continue-card__body restores padding for the text below it. */
#site-continue-panel.site-panel {
  padding: 0;
  overflow: hidden;
  /* .site-focus-column lets flex items shrink by default; without this the cover-image's fixed
     96px height gets compressed and its bottom-aligned title clips under overflow:hidden above. */
  flex-shrink: 0;
}

.site-continue-card {
  display: flex;
  flex-direction: column;
}

.site-continue-card__cover {
  position: relative;
  height: 96px;
  padding: 13px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(125deg, #1d365e, #4c72d2 58%, #9e79ef);
}

.site-continue-card__cover::after {
  position: absolute;
  right: -25px;
  bottom: -64px;
  width: 170px;
  height: 170px;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

.site-continue-card__badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-continue-card__cover-title {
  position: absolute;
  z-index: 1;
  left: 13px;
  bottom: 12px;
  max-width: calc(100% - 26px);
  font-size: 0.95rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.site-continue-card__body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 13px 14px 14px;
}

.site-continue-card__progress {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}

.site-continue-card__progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

.site-continue-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.8rem;
}

.site-continue-card__meta-icon {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-continue-card__cta {
  display: block;
  padding: 10px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: background-color 120ms ease;
}

.site-continue-card__cta:hover {
  background: var(--accent-strong);
}

/* Slightly softer pill than the composer's earlier 12px, matching the redesign-v2 prototype's
   floating-composer radius. The single-box/absolute-footer layout underneath is untouched — that
   shape was already fixed against a real mobile collision bug (see the comment above
   main.site-shell .site-composer further down) and this only nudges its corner radius. */
main.site-shell .site-composer {
  border-radius: 16px;
}

/* Round icon button replacing the old text label, matching .site-attach-button's circular
   language instead of the default rectangular <button>. */
.site-send-button {
  display: inline-grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  transition: background-color 120ms ease, transform 120ms ease;
}

.site-send-button:hover {
  background: var(--accent-strong);
  transform: translateY(-1px);
}

.site-send-button__icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 1080px) {
main.site-shell .site-layout:has(.site-focus-column:not([hidden])) {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-focus-column {
    flex-direction: row;
    flex-wrap: wrap;
    overflow: visible;
  }

  .site-focus-column > .site-panel {
    flex: 1 1 260px;
  }
}

@media (max-width: 640px) {
  .site-hero-stats {
    flex-wrap: wrap;
  }
}

/* ── Prototype parity pass ─────────────────────────────────────────────────
   The chat surface keeps its product markup and state machine, but its final
   geometry follows the standalone reference: inset app card, 244px rail,
   gradient home hero, and a two-column desktop workspace. */
body:has(main.site-shell[data-conversation]) {
  background:
    radial-gradient(circle at 76% -10%, rgb(139 108 242 / 16%), transparent 32rem),
    radial-gradient(circle at -8% 74%, rgb(82 105 223 / 11%), transparent 30rem),
    var(--bg);
}

@media (min-width: 861px) {
  main.site-shell[data-conversation] {
    width: min(1480px, calc(100% - 32px));
    min-height: calc(100dvh - 32px);
    margin: 16px auto;
    grid-template-columns: 244px minmax(0, 1fr);
    border: 1px solid rgb(255 255 255 / 80%);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow-shell);
    /* No backdrop-filter here: a filter on this box makes it the containing block for the
       sidebar's position:fixed, detaching the rail from the viewport and anchoring it to this
       card instead — offset by however far the card sits from the window edge. app-fixes.css
       resets backdrop-filter to none on the plain main.site-shell selector for exactly this
       reason; this [data-conversation] variant has higher specificity and was overriding that
       reset on chat/dev only, which is why the sidebar sat in a different place there. */
  }

  main.site-shell[data-conversation] .site-sidebar {
    padding: 28px 18px 20px;
    border-right: 1px solid var(--border);
    background: rgb(255 255 255 / 40%);
  }

  main.site-shell[data-conversation] .site-stage {
    padding: 25px 32px 30px;
  }

  main.site-shell[data-conversation] .site-topbar--home {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 25px;
    min-height: 190px;
    margin-bottom: 27px;
    padding: 28px 30px;
    overflow: hidden;
    border-radius: 23px;
    color: #fff;
    background: linear-gradient(112deg, #495fd2 0%, #6875e7 48%, #9a74eb 100%);
    box-shadow: 0 16px 30px rgb(82 105 223 / 22%);
  }

  main.site-shell[data-conversation] .site-topbar--home::before,
  main.site-shell[data-conversation] .site-topbar--home::after {
    position: absolute;
    content: "";
    border: 1px solid rgb(255 255 255 / 17%);
    border-radius: 50%;
    pointer-events: none;
  }

  main.site-shell[data-conversation] .site-topbar--home::before {
    width: 380px;
    height: 380px;
    right: -130px;
    top: -190px;
  }

  main.site-shell[data-conversation] .site-topbar--home::after {
    width: 270px;
    height: 270px;
    right: -35px;
    bottom: -205px;
  }

  main.site-shell[data-conversation] .site-topbar--home .site-topbar__intro {
    position: relative;
    z-index: 1;
    max-width: 590px;
  }

  main.site-shell[data-conversation] .site-topbar--home .site-kicker {
    color: rgb(255 255 255 / 75%);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
  }

  main.site-shell[data-conversation] .site-topbar--home h2 {
    max-width: 550px;
    margin: 13px 0 0;
    color: #fff;
    font-size: clamp(25px, 3vw, 37px);
    line-height: 1.03;
    letter-spacing: -.055em;
  }

  main.site-shell[data-conversation] .site-topbar--home p {
    max-width: 520px;
    margin: 14px 0 0;
    color: rgb(255 255 255 / 76%);
    font-size: 13px;
    line-height: 1.55;
  }

  main.site-shell[data-conversation] .site-topbar--home .site-topbar__actions {
    position: relative;
    z-index: 1;
    align-self: start;
  }

  main.site-shell[data-conversation] .site-layout:has(.site-focus-column:not([hidden])) {
    grid-template-columns: minmax(0, 1.45fr) minmax(270px, .7fr);
    gap: 17px;
  }

  main.site-shell[data-conversation] .site-chat-column {
    max-width: none;
  }

  main.site-shell[data-conversation] .site-hero-card {
    padding: 19px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
  }

  main.site-shell[data-conversation] .site-panel {
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
  }
}

@media (max-width: 700px) {
  body:has(main.site-shell[data-conversation]) {
    overflow-x: hidden;
  }

  main.site-shell[data-conversation] {
    width: 100%;
    min-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  main.site-shell[data-conversation] .site-stage {
    padding: 20px 15px 93px;
  }

  main.site-shell[data-conversation] .site-topbar--home {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    min-height: auto;
    margin-bottom: 18px;
    padding: 24px 21px;
    overflow: hidden;
    border-radius: 23px;
    color: #fff;
    background: linear-gradient(112deg, #495fd2 0%, #6875e7 48%, #9a74eb 100%);
    box-shadow: 0 16px 30px rgb(82 105 223 / 22%);
  }

  main.site-shell[data-conversation] .site-topbar--home .site-topbar__intro {
    display: block;
  }

  main.site-shell[data-conversation] .site-topbar--home .site-kicker {
    color: rgb(255 255 255 / 75%);
  }

  main.site-shell[data-conversation] .site-topbar--home h2 {
    color: #fff;
  }

  main.site-shell[data-conversation] .site-topbar--home p {
    color: rgb(255 255 255 / 76%);
  }

  main.site-shell[data-conversation] .site-topbar--home .site-topbar__compact-title {
    display: none;
  }

  main.site-shell[data-conversation] .site-topbar--home h2 {
    font-size: 28px;
  }

  main.site-shell[data-conversation] .site-topbar--home .site-topbar__actions {
    display: none;
  }

  main.site-shell[data-conversation] .site-layout:has(.site-focus-column:not([hidden])) {
    grid-template-columns: minmax(0, 1fr);
  }

  main.site-shell[data-conversation] .site-sidebar {
    right: 12px;
    bottom: 12px;
    left: 12px;
    top: auto;
    width: auto;
    height: 62px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 19px;
    background: var(--surface);
    box-shadow: var(--shadow);
    transform: none;
  }

  main.site-shell[data-conversation] .site-sidebar__head,
  main.site-shell[data-conversation] .site-sidebar__section,
  main.site-shell[data-conversation] .site-sidebar__foot {
    display: none;
  }

  main.site-shell[data-conversation] .site-sidebar__nav {
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    width: 100%;
  }

  main.site-shell[data-conversation] .site-sidebar__nav .workspace-nav__row,
  main.site-shell[data-conversation] .site-sidebar__nav .workspace-nav__tab {
    width: 44px;
    height: 44px;
    justify-content: center;
    padding: 0;
  }

  main.site-shell[data-conversation] .site-sidebar__nav .workspace-nav__tab span,
  main.site-shell[data-conversation] .site-sidebar__nav .workspace-nav__guard,
  main.site-shell[data-conversation] .workspace-nav__add {
    display: none;
  }

  main.site-shell[data-conversation] .site-sidebar__nav .workspace-nav__tab[data-workspace-tab="dev"] {
    display: none;
  }

  main.site-shell[data-conversation] .site-sidebar__nav .workspace-nav__row {
    flex: 0 0 44px;
  }

  main.site-shell[data-conversation] .site-sidebar__nav .workspace-nav__icon {
    display: block;
    width: 19px;
    height: 19px;
  }

  main.site-shell[data-conversation] .workspace-mobile-menu,
  main.site-shell[data-conversation] .site-rail-button {
    display: none;
  }
}

/* Тестовое задание после курса: карточка на странице курса у сотрудника и форма заявки в консоли
   у куратора. Одна колонка на любой ширине — внутри только текст, срок и одно поле за раз. */
.practical-task {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 68ch;
  margin: 16px 0 4px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.practical-task__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  color: var(--ink);
}

.practical-task__state {
  margin: 0;
}

.practical-task__note {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
}

.practical-task__error {
  margin: 0;
  font-size: 0.88rem;
  color: var(--danger, #b3261e);
}

.practical-task__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
}

.practical-task__fact dt {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.practical-task__fact dd {
  margin: 2px 0 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
}

.practical-task__instructions h4 {
  margin: 0 0 4px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--muted);
}

.practical-task__instructions p {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--ink);
  white-space: pre-wrap;
}

.practical-task__meeting {
  margin: 0;
  font-size: 0.93rem;
}

.practical-task__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
}

.practical-task__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--muted);
}

.practical-task__field input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg, var(--surface));
  color: var(--ink);
  font: inherit;
}

.practical-task__form .site-primary-action {
  align-self: flex-start;
}

.practical-task__field textarea,
.practical-task__field input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg, var(--surface));
  color: var(--ink);
  font: inherit;
}

.practical-task__block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.practical-task__block h4,
.practical-task__form h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--ink);
}

.practical-task__files,
.practical-task__submissions,
.practical-task__events {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  font-size: 0.9rem;
}

.practical-task__files {
  padding-left: 0;
  list-style: none;
}

.practical-task__submission {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.practical-task__submission-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.practical-task__review {
  margin: 0;
  padding: 8px 11px;
  border-left: 3px solid var(--border);
  background: var(--surface-2);
  border-radius: 0 8px 8px 0;
}

.practical-task__action {
  margin: 0;
}

.practical-task__history {
  font-size: 0.9rem;
}

.practical-task__history summary {
  cursor: pointer;
  color: var(--muted);
}

.practical-task__events li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.practical-task__event-when {
  color: var(--muted);
  font-size: 0.8rem;
}

.practical-task__event-comment {
  color: var(--ink);
}

/* --- очередь куратора ------------------------------------------------------------------- */

.practical-tasks-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.practical-tasks-workspace {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.practical-tasks-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.practical-tasks-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.practical-tasks-filter select,
.practical-tasks-filter input {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.practical-task-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.practical-task-card h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 650;
}

.practical-task-card h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 650;
}

.practical-task-card__editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 68ch;
}

.practical-task-card__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--muted);
}

.practical-task-card__field input,
.practical-task-card__field select,
.practical-task-card__field textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg, var(--surface));
  color: var(--ink);
  font: inherit;
}

/* Кнопки переносятся, а не уезжают за край: на узком экране «Сохранить» обязано остаться
   достижимым, иначе куратор дошёл до конца формы и не может её отправить. */
.practical-task-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.practical-task-card__files,
.practical-task-card__submissions,
.practical-task-card__events {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  font-size: 0.9rem;
}

.practical-task-card__files {
  padding-left: 0;
  list-style: none;
}

.practical-task-card__events li {
  color: var(--ink);
}

#practical-task-status.is-error {
  color: var(--danger, #c0392b);
}