/* Otklik · цвета продукта и оформление результата (воронка ночи + окна собеседований + карточка кандидата). */
:root {
  --brand: #c43d52; --brand-2: #b5364a; --brand-ink: #8f2638; --brand-soft: #fcecee; --brand-line: #f3c9d0;
  --accent: #3a86ff; --accent-soft: #e7f0ff; --accent-ink: #1d5bc2;
  --ok-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.6 14.7A8.7 8.7 0 0 1 9.3 3.4a8.7 8.7 0 1 0 11.3 11.3z'/%3E%3C/svg%3E");
  --ok-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4.6'/%3E%3Cg id='r'%3E%3Crect x='11' y='1' width='2' height='4.2' rx='1'/%3E%3Crect x='11' y='18.8' width='2' height='4.2' rx='1'/%3E%3Crect x='1' y='11' width='4.2' height='2' rx='1'/%3E%3Crect x='18.8' y='11' width='4.2' height='2' rx='1'/%3E%3C/g%3E%3Cuse href='%23r' transform='rotate(45 12 12)'/%3E%3C/svg%3E");
}
.w-mark svg .o { stroke: #fff; }
/* четыре шага и часы в одну строку на 1440 */
.w-right .w-steps { gap: 5px; }
.w-right .w-st { gap: 5px; padding: 5px 10px 5px 5px; }

/* часы ночи вместо секундомера: луна, к 08:00 солнце */
.w-timer.ok-ck::before { content: ""; flex: none; width: 13px; height: 13px; background: currentColor;
  -webkit-mask: var(--ok-moon) center / contain no-repeat; mask: var(--ok-moon) center / contain no-repeat; }
.w-timer.fin.ok-ck::before { width: 15px; height: 15px; -webkit-mask-image: var(--ok-sun); mask-image: var(--ok-sun); }

.ok-body { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.ok-sh { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2px 10px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--brand-ink); }
.ok-sh span:last-child { color: var(--muted); }

/* воронка: каждая точка один отклик, ступени сужаются */
.ok-fun { container: okf / inline-size; display: flex; flex-direction: column; border: 1px solid var(--brand-line); border-radius: 14px; padding: 11px 14px 13px; }
.ok-rows { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 5px; margin-top: 12px;
  --p: clamp(8px, calc((100cqw - 104px) / var(--c1)), 18px); }
.ok-rows > * { flex: none; }
.ok-row { display: grid; grid-template-columns: 84px auto auto; justify-content: start; align-items: center; gap: 12px; min-height: 46px; }
.ok-to { font-size: 13px; font-weight: 650; color: var(--brand-ink); white-space: nowrap; }
.ok-n { display: flex; flex-direction: column; line-height: 1; }
.ok-n b { font-size: 29px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ok-n span { margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.ok-row.r4 .ok-n b { color: var(--brand); }
.ok-dots { display: grid; grid-template-columns: repeat(var(--c), var(--p)); grid-auto-rows: var(--p); padding: 4px; border-radius: 10px;
  background: color-mix(in srgb, var(--brand) 7%, transparent); }
.ok-d { display: block; margin: 2px; border-radius: 50%; background: var(--dc); }
.ok-row.r1 { --dc: color-mix(in srgb, var(--brand) 32%, #fff); }
.ok-row.r2 { --dc: color-mix(in srgb, var(--brand) 54%, #fff); }
.ok-row.r3 { --dc: color-mix(in srgb, var(--brand) 77%, #fff); }
.ok-row.r4 { --dc: var(--brand); }
.ok-d.h { position: relative; background: var(--accent); box-shadow: 0 0 0 1.5px #fff, 0 0 0 3.5px color-mix(in srgb, var(--accent) 55%, transparent); }
.ok-d.w-h { transform: translateY(-12px); transition: opacity .3s var(--ease), transform .35s var(--ease); }
.ok-row.r1 .ok-d.w-h { transform: translateY(-26px); }
.ok-row .ok-d.w-h.in { transform: none; }
.ok-br { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; margin-left: 96px; padding-left: 19px;
  font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.ok-br::before { content: ""; position: absolute; left: 3px; top: 2px; width: 9px; height: 8px; border-left: 1.6px solid #a3ada8;
  border-bottom: 1.6px solid #a3ada8; border-bottom-left-radius: 4px; }
.ok-br b { font-weight: 750; color: var(--ink); }
.ok-br em { font-style: normal; color: var(--muted); }

/* окна собеседований: 8 слотов по 15 минут у каждого рекрутёра */
.ok-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ok-cal { container: okc / inline-size; border: 1px solid var(--line); border-radius: 14px; padding: 11px 14px 14px; background: #fff; }
.ok-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 11px var(--cg); margin-top: 12px;
  --nm: 123px; --cg: 14px; --g: 5px; --q: clamp(20px, calc((100cqw - var(--nm) - var(--cg) - 7 * var(--g)) / 8), 32px); }
.ok-rec { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ok-rec b { font-size: 14px; font-weight: 650; white-space: nowrap; }
.ok-rec span { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ok-cells { display: flex; gap: var(--g); }
.ok-c { position: relative; flex: none; width: var(--q); height: var(--q); border-radius: 9px; border: 1.5px dashed #d2dad6; }
.ok-c b { position: absolute; inset: -1.5px; display: grid; place-items: center; border-radius: 9px; background: var(--brand); color: #fff;
  font-size: clamp(12.5px, calc(var(--q) * .46), 13px); font-weight: 750; letter-spacing: .01em; }
.ok-c b.h { z-index: 1; background: var(--accent); box-shadow: 0 0 0 2px #fff, 0 0 0 4px color-mix(in srgb, var(--accent) 60%, transparent); }
.ok-fly { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; background: var(--brand);
  box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--brand) 65%, transparent); }
.ok-fly.h { background: var(--accent); box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--accent) 65%, transparent); }

/* раскрытый кандидат */
.ok-me { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 12px 16px; border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-radius: 14px; background: #fff; box-shadow: inset 3px 0 0 var(--accent), 0 8px 20px -14px color-mix(in srgb, var(--accent) 70%, transparent); }
.ok-me-h { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 13.5px; color: var(--muted); }
.ok-me-n b { color: var(--ink); font-size: 15px; font-weight: 650; }
.ok-ava { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center;
  font-size: 11px; font-weight: 750; }
.ok-fast { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; font-weight: 650; white-space: nowrap; }
.ok-fast .w-ic { width: 14px; height: 14px; }
.ok-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ok-chips-l { font-size: 13px; color: var(--muted); margin-right: 1px; }
.ok-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 8px; background: var(--brand-soft); color: var(--brand-ink);
  border: 1px solid var(--brand-line); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.ok-chip.yes { background: var(--good-soft); color: var(--good-ink); border-color: color-mix(in srgb, var(--good) 30%, transparent); }
.ok-chip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.ok-me-f { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; min-height: 50px; }
.ok-by { display: flex; flex-direction: column; font-size: 13px; color: var(--muted); line-height: 1.3; }
.ok-by b { font-size: 15px; font-weight: 650; color: var(--ink); }
.ok-stamp { --rot: -5deg; margin: 0 6px 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 15px;
  border: 3px solid #15803d; border-radius: 10px; color: #15803d; background: rgba(255, 255, 255, .92); text-transform: uppercase; white-space: nowrap;
  box-shadow: inset 0 0 0 2px rgba(21, 128, 61, .2); }
.ok-stamp b { font-size: 16px; letter-spacing: .08em; font-weight: 850; }
.ok-stamp span { font-size: 12.5px; font-weight: 700; letter-spacing: .03em; }

/* ноутбуки до 1419 px: шаги и часы остаются в одну строку, иначе нижняя ступень воронки уходит за край */
@media (min-width: 881px) and (max-width: 1419px) {
  .w-right .w-steps { gap: 4px; }
  .w-right .w-st { gap: 4px; padding: 5px 9px 5px 4px; font-size: 12.5px; }
  .w-timer.ok-ck::before { display: none; }
}
/* 1280–1419: окна теснее друг к другу, чтобы слот был от 28 px и инициалы 13 px */
@media (min-width: 1181px) and (max-width: 1419px) {
  .w-art .ok-grid { --nm: 116px; --cg: 10px; --g: 3px; }
}
/* 1280–1365: переписка уже (340 → 400 px), справа воронка и окна поровну (окна в две колонки), шаги мельче;
   ступени не растягиваются под высоту правой колонки */
@media (min-width: 1181px) and (max-width: 1365px) {
  .w-stage { grid-template-columns: clamp(340px, calc(340px + (100vw - 1280px) * .7), 400px) minmax(0, 1fr); }
  .w-left .w-ph { gap: 8px; padding-left: 14px; padding-right: 14px; }
  .w-left .w-src { gap: 6px; padding: 4px 9px; }
  .w-right .w-st { padding: 5px 8px 5px 4px; font-size: 12px; }
  .w-art .ok-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .w-art .ok-rows { justify-content: flex-start; }
}

/* миниатюры сетки: сверху место под значок карточки, результат на всю высоту листа (окна растут вместе с воронкой) */
.w-th-in > .ok { margin-top: 58px; }
.w-th-in > .ok .ok-body { min-height: 430px; }
.w-th-in > .ok .ok-cal { flex: 1; display: flex; flex-direction: column; }
.w-th-in > .ok .ok-grid { flex: 1; align-content: space-evenly; }

/* превью ссылки 1200×630: плашка «готово» не помещается целиком, без неё экран агента виден полностью */
.w-og .w-result { display: none; }

/* снимки проверки и итог: без переходов */
.ok-qa .w-h, .ok-qa .w-d, .ok-qa .w-stamp, .ok-qa .w-result, .ok-qa .w-msg, .ok-qa .w-note, .ok-qa .w-st, .ok-qa .w-st i,
.ok-qa .w-pill, .ok-qa .w-card, .w-final .ok-d { transition: none !important; animation: none !important; }

@container (max-width: 700px) {
  .ok-body { grid-template-columns: minmax(0, 1fr); }
}
@container okf (max-width: 380px) {
  .ok-rows { --p: clamp(7px, calc((100cqw - 86px) / var(--c1)), 18px); }
  .ok-row { grid-template-columns: 68px auto auto; gap: 10px; }
  .ok-n b { font-size: 25px; }
  .ok-br { margin-left: 78px; }
}
@container okc (max-width: 360px) {
  .ok-grid { grid-template-columns: minmax(0, 1fr); gap: 5px; --q: clamp(20px, calc(100cqw / 8 - 5px), 34px); }
  .ok-rec { flex-direction: row; align-items: baseline; gap: 8px; }
  .ok-cells + .ok-rec { margin-top: 8px; }
}