/*
 * «Как это используют» (Фаза 4) — SITE_IMPROVEMENT_PLAN.md §8 / Р3 / Р5 / Р17.
 *
 * Табы-сценарии из рабочего дня лаборатории. Вместо mp4 со старым UI —
 * фейк-экраны на языке компонентов приложения (токены tokens.css), как живой
 * стенд (Р14) и граф (Р15). Экраны всегда тёмные (как рабочий шелл и hero),
 * не зависят от темы сайта; заголовок, табы и копия — по токенам темы.
 * Грузится только на лендинге (через head_extra/scripts), не в общий site.css.
 */

.ql-usage { background: var(--bg); padding: 80px 0; }
.ql-usage-head { max-width: 640px; margin: 0 auto 2.25rem; }

/* ── Табы ── */
.ql-usage-tabs {
  display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap;
  margin-bottom: 1.75rem;
}
.ql-usage-tab {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--glass-bg); border: 1px solid var(--border);
  color: var(--body); border-radius: var(--radius-full);
  padding: .6rem 1.15rem; font-size: var(--text-sm); font-weight: var(--weight-semibold);
  cursor: pointer; min-height: 44px; white-space: nowrap;
  transition: background var(--motion-base) var(--motion-ease),
              color var(--motion-base) var(--motion-ease),
              border-color var(--motion-base) var(--motion-ease),
              box-shadow var(--motion-slow) var(--motion-ease);
}
.ql-usage-tab i { font-size: 1rem; color: var(--accent); transition: color var(--motion-base); }
.ql-usage-tab:hover { border-color: rgba(13,148,136,.4); color: var(--ink); }
.ql-usage-tab.is-active {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 4px 18px var(--accent-glow);
}
.ql-usage-tab.is-active i { color: #fff; }
[data-theme="dark"] .ql-usage-tab { background: var(--glass-bg-card); }

/* ── Панели сценариев ── */
.ql-usage-panels { position: relative; }
.ql-usage-panel { display: none; }
.ql-usage-panel.is-active {
  display: grid; grid-template-columns: 1fr 1.12fr; gap: 2.5rem; align-items: center;
  animation: fadeIn 320ms var(--motion-ease) both;
}

/* ── Левая колонка: текст сценария ── */
.ql-usage-eyebrow {
  display: inline-block; font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--accent); text-transform: uppercase; letter-spacing: .07em; margin-bottom: .6rem;
}
.ql-usage-copy h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem); font-weight: var(--weight-bold);
  color: var(--ink); line-height: 1.22; letter-spacing: -.3px; margin: 0 0 1.1rem;
}
.ql-usage-points { list-style: none; padding: 0; margin: 0 0 1.6rem; display: flex; flex-direction: column; gap: .7rem; }
.ql-usage-points li {
  position: relative; padding-left: 1.5rem; font-size: var(--text-sm);
  color: var(--body); line-height: 1.55;
}
/* Маркер-узел (связь между модулями, Р3): акцентное кольцо, нарисовано CSS —
   не зависит от кодпоинта глифа в шрифте иконок. */
.ql-usage-points li::before {
  content: ''; position: absolute; left: .1rem; top: .4rem;
  width: 8px; height: 8px; border-radius: 50%;
  border: 2px solid var(--accent); background: var(--accent-subtle);
}
.ql-usage-cta {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--accent); font-weight: var(--weight-semibold); font-size: var(--text-sm);
  text-decoration: none; min-height: 44px;
  transition: gap var(--motion-base) var(--motion-ease), color var(--motion-base);
}
.ql-usage-cta i { transition: transform var(--motion-base) var(--motion-ease); }
.ql-usage-cta:hover { color: var(--accent2); }
.ql-usage-cta:hover i { transform: translateX(3px); }

/* ════════════════════════════════════════════════
 *  Фейк-экран (всегда тёмный — как рабочий шелл)
 * ════════════════════════════════════════════════ */
.ql-usage-screen {
  border-radius: 12px 12px 8px 8px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(160deg, #0b1830 0%, #0a1424 58%, #0b1526 100%);
  box-shadow: 0 28px 64px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04),
              inset 0 1px 0 rgba(255,255,255,.08);
}
.qu-chrome {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  background: rgba(10,18,34,.96); border-bottom: 1px solid rgba(255,255,255,.07);
}
.qu-dots { display: flex; gap: 5px; flex-shrink: 0; }
.qu-dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.qu-dots i:nth-child(1) { background: #ff5f57; }
.qu-dots i:nth-child(2) { background: #ffbd2e; }
.qu-dots i:nth-child(3) { background: #28c840; }
.qu-url {
  flex: 1; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08);
  border-radius: 5px; padding: 3px 10px; font-size: 11px; color: rgba(255,255,255,.42);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qu-url i { font-size: .6rem; opacity: .6; margin-right: .3rem; }
.qu-body { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 11px; }

/* ── Карточка объекта (шапка реактива/колонки) ── */
.qu-obj {
  background: rgba(13,148,136,.1); border: 1px solid rgba(13,148,136,.34);
  border-radius: var(--radius-md); padding: .6rem .7rem;
}
.qu-obj-head { display: flex; align-items: center; gap: .55rem; }
.qu-obj-ic {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; font-size: .9rem;
  background: rgba(13,148,136,.18); color: var(--accent-light);
}
.qu-obj-head > span:nth-child(2) { flex: 1; min-width: 0; }
.qu-obj-name { display: block; font-size: var(--text-sm); font-weight: var(--weight-bold); color: #fff; line-height: 1.2; }
.qu-obj-sub { display: block; font-size: .66rem; color: rgba(255,255,255,.5); margin-top: .1rem; }
.qu-tag {
  flex-shrink: 0; font-size: .6rem; font-weight: var(--weight-semibold); letter-spacing: .02em;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.7); border-radius: var(--radius-full); padding: .18em .6em;
  font-variant-numeric: tabular-nums;
}
.qu-pill {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: .3rem;
  font-size: .6rem; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: .05em;
  padding: .2em .6em; border-radius: var(--radius-full);
}
.qu-pill-act { background: rgba(245,158,11,.2); color: #fcd34d; }
.qu-pdot { width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; animation: pulse-dot 1.6s ease-in-out infinite; }

/* ── Поля формы (списание) ── */
.qu-form { display: flex; flex-direction: column; gap: .1rem; }
.qu-field {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .4rem 0; border-bottom: 1px solid rgba(255,255,255,.06);
}
.qu-form .qu-field:last-child { border-bottom: none; }
.qu-flabel { font-size: .62rem; color: rgba(255,255,255,.42); text-transform: uppercase; letter-spacing: .04em; }
.qu-fval { font-size: var(--text-sm); color: #fff; font-weight: var(--weight-medium); text-align: right; font-variant-numeric: tabular-nums; }
.qu-fval b { color: var(--accent-light); font-weight: var(--weight-bold); }
.qu-was { color: rgba(255,255,255,.4); text-decoration: line-through; }
.qu-arr { font-size: .7rem; color: rgba(255,255,255,.4); margin: 0 .1rem; }
.qu-link { color: var(--accent-light); font-weight: var(--weight-medium); font-size: .72rem; }

/* ── Последствие: тост аудита ── */
.qu-conseq { display: flex; flex-direction: column; gap: .4rem; }
.qu-toast {
  display: flex; align-items: center; gap: .5rem;
  border-radius: var(--radius-md); padding: .5rem .7rem;
  font-size: .68rem; line-height: 1.4; font-variant-numeric: tabular-nums;
}
.qu-toast i { flex-shrink: 0; font-size: .85rem; }
.qu-toast-audit {
  background: rgba(13,148,136,.1); border: 1px solid rgba(13,148,136,.28); color: rgba(255,255,255,.78);
}
.qu-toast-audit i { color: var(--accent-light); }

/* ── Счётчик вколов колонки ── */
.qu-counter {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius-md); padding: .6rem .7rem;
}
.qu-counter-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.qu-counter-top > span:first-child { font-size: .62rem; color: rgba(255,255,255,.42); text-transform: uppercase; letter-spacing: .04em; }
.qu-bar { height: 6px; border-radius: var(--radius-full); background: rgba(255,255,255,.08); overflow: hidden; margin: .5rem 0 .4rem; }
.qu-bar span { display: block; height: 100%; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--accent), var(--accent-light)); }
.qu-counter-note { font-size: .66rem; color: var(--accent-light); font-weight: var(--weight-medium); }

/* ── Строка журнала анализов ── */
.qu-logrow {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-md); padding: .5rem .7rem;
}
.qu-logrow-name { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: #fff; display: inline-flex; align-items: center; gap: .4rem; }
.qu-logrow-name i { color: var(--accent-light); font-size: .8rem; }
.qu-logrow-meta { font-size: .66rem; color: rgba(255,255,255,.55); font-variant-numeric: tabular-nums; text-align: right; }

/* ── Отчёт с провенансом ── */
.qu-rep-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; padding-bottom: .5rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.qu-rep-title { font-size: var(--text-sm); font-weight: var(--weight-bold); color: #fff; }
.qu-rep-meta { display: inline-flex; gap: .35rem; flex-wrap: wrap; }
.qu-tag-v { background: rgba(13,148,136,.16); border-color: rgba(13,148,136,.3); color: var(--accent-light); }
.qu-rrows { display: flex; flex-direction: column; }
.qu-rrow {
  display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; align-items: baseline;
  padding: .45rem 0; border-bottom: 1px solid rgba(255,255,255,.05);
}
.qu-rrow:last-child { border-bottom: none; }
.qu-rlabel { grid-row: span 2; font-size: .62rem; color: rgba(255,255,255,.42); text-transform: uppercase; letter-spacing: .03em; align-self: center; }
.qu-rval { font-size: var(--text-sm); color: #fff; font-weight: var(--weight-medium); }
.qu-prov {
  justify-self: start; display: inline-flex; align-items: center; gap: .25rem;
  background: rgba(13,148,136,.14); border: 1px solid rgba(13,148,136,.3); color: #5eead4;
  border-radius: var(--radius-full); font-size: .6rem; font-weight: var(--weight-medium); padding: .12em .55em; margin-top: .15rem;
}
.qu-prov i { font-size: .62rem; opacity: .85; }
.qu-rep-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-top: .2rem; }
.qu-saved { display: inline-flex; align-items: center; gap: .35rem; font-size: .66rem; color: rgba(255,255,255,.5); }
.qu-saved i { color: var(--accent-light); }
.qu-pull {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .66rem; font-weight: var(--weight-semibold);
  background: rgba(13,148,136,.16); border: 1px solid rgba(13,148,136,.34); color: var(--accent-light);
  border-radius: var(--radius-full); padding: .25em .7em;
}

/* ── Чат ── */
.qu-chat { gap: 9px; }
.qu-msg { display: flex; gap: .55rem; align-items: flex-end; }
.qu-msg-me { flex-direction: row-reverse; }
.qu-ava {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .62rem; font-weight: var(--weight-bold); color: #fff;
  background: linear-gradient(135deg, #0d9488, #0f766e);
}
.qu-bubble {
  max-width: 84%; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px; padding: .5rem .65rem;
}
.qu-msg-me .qu-bubble { background: rgba(13,148,136,.14); border-color: rgba(13,148,136,.3); }
.qu-msg-head { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .15rem; }
.qu-msg-name { font-size: .68rem; font-weight: var(--weight-bold); color: #fff; }
.qu-msg-time { font-size: .58rem; color: rgba(255,255,255,.35); font-variant-numeric: tabular-nums; }
.qu-msg-txt { font-size: var(--text-sm); color: rgba(255,255,255,.82); line-height: 1.4; }
.qu-mention { color: var(--accent-light); font-weight: var(--weight-semibold); }
.qu-embed {
  display: flex; align-items: center; gap: .5rem; margin-top: .45rem;
  background: rgba(10,18,34,.6); border: 1px solid rgba(13,148,136,.3);
  border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: .4rem .55rem;
}
.qu-embed-ic { width: 24px; height: 24px; flex-shrink: 0; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: .75rem; background: rgba(13,148,136,.18); color: var(--accent-light); }
.qu-embed-tx { flex: 1; min-width: 0; }
.qu-embed-name { display: block; font-size: .72rem; font-weight: var(--weight-semibold); color: #fff; line-height: 1.2; }
.qu-embed-sub { display: block; font-size: .6rem; color: rgba(255,255,255,.5); margin-top: .1rem; font-variant-numeric: tabular-nums; }
.qu-embed-tag { flex-shrink: 0; font-size: .54rem; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: .04em; color: var(--accent-light); opacity: .8; }
.qu-msg-foot { display: flex; align-items: center; gap: .6rem; margin-top: .35rem; }
.qu-react {
  display: inline-flex; align-items: center; gap: .25rem; font-size: .6rem; color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-full); padding: .1em .45em;
}
.qu-react i { color: #fcd34d; font-size: .62rem; }
.qu-read { display: inline-flex; align-items: center; gap: .25rem; font-size: .58rem; color: rgba(94,234,212,.7); }
.qu-read i { font-size: .72rem; }

/* ── Честная подпись (Р2) ── */
.qu-cap { font-size: .6rem; color: rgba(255,255,255,.35); text-align: center; margin-top: .25rem; letter-spacing: .02em; }

/* ════════════════════════════════════════════════
 *  Адаптив
 * ════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .ql-usage-panel.is-active { grid-template-columns: 1fr; gap: 1.5rem; }
  .ql-usage-copy { order: 1; }
  .ql-usage-screen { order: 2; }
}
@media (max-width: 575px) {
  .ql-usage { padding: 60px 0; }
  .ql-usage-tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: .35rem; -webkit-overflow-scrolling: touch; }
  .ql-usage-tab { flex-shrink: 0; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .ql-usage-panel.is-active { animation: none !important; }
  .qu-pdot { animation: none !important; }
  .ql-usage-cta:hover i { transform: none !important; }
}