/* ============================================================================
   Демо-страница: только то, что не переиспользуется админкой.
   Общие компоненты — в ui.css, цвета и метрики — в tokens.css.
   ========================================================================= */

.wrap { max-width: 1160px; }

/* ─────────────────────────── интро ─────────────────────────── */

/* Поверх общего gap колонки — чуть больше воздуха под заголовком. */
.hero { margin-bottom: var(--const-spacing-05); }
.hero h1 { margin-bottom: var(--const-spacing-05); }
.hero p {
  color: var(--sys-text-secondary);
  font-size: var(--sys-typography-size-paragraph-p3);
  line-height: var(--sys-typography-lineHeight-paragraph-p3);
  max-width: 68ch;
}

/* ─────────────────────────── форма запроса ─────────────────────────── */

.controls-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--const-spacing-06); margin-top: var(--const-spacing-06);
}
.input-with-btn { display: flex; gap: var(--const-spacing-04); }
.input-with-btn input { flex: 1; min-width: 0; }

/* ─────────────────────────── API-ключ ───────────────────────────
   Раньше поле пряталось четвёртым в ряду контролов и показывалось только при
   REQUIRE_KEY — найти его было практически невозможно. Теперь это отдельный
   видимый блок с подсказкой, что будет с ключом и без него. */

.apikey {
  margin-top: var(--const-spacing-07);
  padding: var(--const-spacing-06);
  background: var(--sys-background-secondary);
  border: 1px solid var(--sys-background-stroke);
  border-radius: var(--const-radius-02);
}
.apikey-head {
  display: flex; align-items: center; gap: var(--const-spacing-05);
  margin-bottom: var(--const-spacing-05);
}
.apikey-head .field-label { margin: 0; }
.apikey .input-with-btn input { background: var(--sys-background-primaryElevated); }
.apikey-hint {
  margin-top: var(--const-spacing-05);
  color: var(--sys-text-secondary);
  font-size: var(--sys-typography-size-caption-c1);
  line-height: var(--sys-typography-lineHeight-paragraph-p4);
  max-width: 82ch;
}
.apikey-hint a { white-space: nowrap; }

/* ─────────────────────────── middleware ─────────────────────────── */

.mw-group + .mw-group { margin-top: var(--const-spacing-08); }
.mw-group-head {
  display: flex; align-items: baseline; gap: var(--const-spacing-05);
  margin-bottom: var(--const-spacing-05);
}
.mw-group-head .count { color: var(--sys-text-tertiary); font-size: var(--sys-typography-size-caption-c1); }

.mw-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: var(--const-spacing-05);
}

/* Карточка — настоящая кнопка с role="switch": Tab и Space работают сами,
   без скрытого чекбокса внутри label, как было раньше. */
.mw-card {
  display: flex; flex-direction: column; gap: 6px;
  text-align: left; cursor: pointer;
  background: var(--sys-background-secondary);
  border: 1.5px solid var(--sys-background-stroke);
  border-radius: var(--const-radius-02);
  padding: var(--const-spacing-06);
  font-family: inherit; color: inherit;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.mw-card:hover { background: var(--sys-background-hover); }
.mw-card[aria-checked=true] {
  border-color: var(--sys-controls-primaryActive);
  box-shadow: var(--const-shadow-01);
}
.mw-head { display: flex; align-items: center; justify-content: space-between; gap: var(--const-spacing-05); }
.mw-name {
  font-weight: 600; font-size: var(--sys-typography-size-paragraph-p4);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.mw-desc {
  color: var(--sys-text-secondary);
  font-size: var(--sys-typography-size-caption-c1);
  line-height: var(--sys-typography-lineHeight-paragraph-p4);
  flex: 1;
}
.mw-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--const-spacing-03); }

.cta-row {
  display: flex; align-items: center; gap: var(--const-spacing-06);
  margin-top: var(--const-spacing-08); flex-wrap: wrap;
}
.session-info { color: var(--sys-text-secondary); font-size: var(--sys-typography-size-caption-c1); }

/* Тумблер рядом с «Отправить» (.toggle-inline) переехал в ui.css: тем же
   тумблером пользуется админка, а demo.css туда не подключён. */

/* ─────────────────────────── cURL ─────────────────────────── */

details.curl-box summary {
  display: flex; align-items: center; gap: var(--const-spacing-05);
  cursor: pointer; list-style: none; font-weight: 500;
}
details.curl-box summary::-webkit-details-marker { display: none; }
details.curl-box summary::before {
  content: "▸"; color: var(--sys-text-secondary); transition: transform .15s;
}
details.curl-box[open] summary::before { transform: rotate(90deg); }
details.curl-box summary:focus-visible { outline-offset: 4px; }

.curl-body { position: relative; margin-top: var(--const-spacing-06); }
pre.curl {
  background: var(--const-palette-greyscale-800);
  color: var(--const-palette-lime-normal);
  border-radius: var(--const-radius-02);
  padding: var(--const-spacing-07);
  padding-right: var(--const-spacing-14);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.65;
  overflow-x: auto; white-space: pre;
}
.curl-body .copy-btn { position: absolute; top: var(--const-spacing-05); right: var(--const-spacing-05); }

/* ─────────────────────────── баннер экономии ─────────────────────────── */

.savings {
  display: none; align-items: center; gap: var(--const-spacing-09);
  flex-wrap: wrap;
  background: var(--sys-background-positiveSoft);
  border: 1px solid var(--sys-accent-positive);
  border-radius: var(--const-radius-03);
  padding: var(--const-spacing-07) var(--const-spacing-09);
}
.savings.show { display: flex; }
.savings .headline { display: flex; flex-direction: column; gap: 2px; }
.savings .headline .label {
  font-size: var(--sys-typography-size-caption-c1); font-weight: 500;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--sys-text-positiveStrong);
}
.savings .big {
  font-family: var(--const-typography-family-wide); font-weight: 700;
  font-size: var(--sys-typography-size-header-h2);
  line-height: var(--sys-typography-lineHeight-header-h2);
  font-variant-numeric: tabular-nums;
  color: var(--sys-text-positiveStrong);
}
.savings .kv {
  display: flex; flex-direction: column; gap: 2px;
  font-size: var(--sys-typography-size-caption-c1);
  color: var(--sys-text-secondary);
}
.savings .kv b {
  color: var(--sys-text-primary);
  font-size: var(--sys-typography-size-paragraph-p4);
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────── результаты ─────────────────────────── */

.results { display: grid; grid-template-columns: 1fr 1fr; gap: var(--const-spacing-07); }
/* Без baseline вторая колонка пустует — отдаём всю ширину ответу сервиса.
   [hidden] нужен явно: .results > .card ниже ставит display:flex. */
.results.solo { grid-template-columns: 1fr; }
.results > .card[hidden] { display: none; }
/* Грид тянет обе карточки до высоты большей. Без этого короткий ответ оставлял
   пустую полосу между своим блоком и нижним краем карточки — растягиваем сам
   блок ответа, чтобы пустота оказалась внутри него и читалась как задуманная. */
.results > .card { display: flex; flex-direction: column; }
.res-body { flex: 1; display: flex; flex-direction: column; }
.res-body > .answer,
.res-body > .placeholder,
.res-body > .loading-state { flex: 1; }
.res-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--const-spacing-05); margin-bottom: var(--const-spacing-06);
}
.res-title { font-weight: 600; }
.answer {
  background: var(--sys-background-secondary);
  border-radius: var(--const-radius-02);
  padding: var(--const-spacing-06);
  font-size: 13.5px; line-height: 1.6; white-space: pre-wrap;
  max-height: 320px; overflow-y: auto;
}
.err {
  color: var(--sys-text-negative); font-size: 13px; white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.placeholder {
  color: var(--sys-text-tertiary);
  display: flex; flex-direction: column; align-items: center; gap: var(--const-spacing-05);
  padding: var(--const-spacing-11) var(--const-spacing-06); text-align: center;
}
.placeholder .icon { font-size: 28px; opacity: .5; }

/* Сравнение метрик: одна таблица вместо двух, с явной дельтой. */
.cmp { width: 100%; border-collapse: collapse; }
.cmp th, .cmp td {
  padding: var(--const-spacing-05) var(--const-spacing-06);
  border-bottom: 1px solid var(--sys-background-stroke);
  font-variant-numeric: tabular-nums;
}
.cmp th { text-align: right; }
.cmp th:first-child, .cmp td:first-child { text-align: left; color: var(--sys-text-secondary); }
.cmp td { text-align: right; }
.cmp tr:last-child td { border-bottom: 0; }
.cmp .win { color: var(--sys-text-positive); font-weight: 600; }
.cmp .lose { color: var(--sys-text-negative); }
.cmp .delta { font-weight: 600; }

/* ─────────────────────────── преобразованный промпт ─────────────────────────── */

.diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--const-spacing-06); }
.diff-col { display: flex; flex-direction: column; gap: var(--const-spacing-04); min-width: 0; }
.diff-col .eyebrow { display: flex; align-items: center; gap: var(--const-spacing-04); }
.transformed {
  background: var(--sys-background-secondary);
  border: 1px solid var(--sys-background-stroke);
  border-radius: var(--const-radius-02);
  padding: var(--const-spacing-06);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.65; white-space: pre-wrap;
  word-break: break-word;
  max-height: 340px; overflow-y: auto; flex: 1;
}
.transformed.is-before { color: var(--sys-text-secondary); }

.notes {
  margin-top: var(--const-spacing-07);
  display: flex; flex-direction: column; gap: var(--const-spacing-04);
}
.note-line {
  display: flex; gap: var(--const-spacing-05); align-items: baseline;
  color: var(--sys-text-secondary);
  font-size: var(--sys-typography-size-caption-c1);
  line-height: var(--sys-typography-lineHeight-paragraph-p4);
}
.note-line::before {
  content: "→"; color: var(--sys-accent-positive); flex-shrink: 0; font-weight: 700;
}

/* ─────────────────────────── адаптив ─────────────────────────── */

@media (max-width: 900px) {
  .results, .diff-grid { grid-template-columns: 1fr; }
  .savings { gap: var(--const-spacing-07); padding: var(--const-spacing-07); }
}

@media (max-width: 640px) {
  .mw-grid { grid-template-columns: 1fr; }
  .apikey .input-with-btn { flex-wrap: wrap; }
  .apikey .input-with-btn input { flex: 1 1 100%; }
  .apikey .input-with-btn .btn-ghost { flex: 1; }
  .controls-row { grid-template-columns: 1fr; }
  .cta-row > .btn-primary { width: 100%; }
  .savings .big { font-size: var(--sys-typography-size-header-h3); }
}