/* Сводка обзвона — «журнал эфира».
   Golos Text (заголовки/текст) + JetBrains Mono (номера, время, метки). */
:root{
  --field:#edeff1;          /* холодное поле страницы */
  --card:#ffffff;
  --ink:#1c2128;
  --muted:#6a7280;
  --line:#dfe3e8;
  --accent:#0e6e69;         /* глубокий телеком-бирюзовый */

  --lead:#157a43;    --lead-bg:#dff3e7;
  --cb:#9a6607;      --cb-bg:#fcefd3;
  --ref:#b03a33;     --ref-bg:#f9e5e3;
  --na:#5f6874;      --na-bg:#e7eaee;
  --off:#5a4f75;     --off-bg:#eae6f3;
}
*{ box-sizing:border-box; }
body{
  margin:0; background:var(--field); color:var(--ink);
  font:15px/1.6 "Golos Text", system-ui, -apple-system, sans-serif;
  padding:34px 20px 70px;
}
.wrap{ max-width:860px; margin:0 auto; }
.num{ font-family:"JetBrains Mono", ui-monospace, Menlo, monospace;
  font-variant-numeric:tabular-nums; }

/* ---------- шапка ---------- */
.head{ margin-bottom:20px; }
.eyebrow{
  display:inline-block; font:700 11px/1 "JetBrains Mono", monospace;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
  border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius:99px; padding:6px 12px; margin-bottom:14px;
}
h1{ font-size:clamp(24px, 4.5vw, 34px); font-weight:800; letter-spacing:-.015em;
  margin:0 0 6px; text-wrap:balance; }
.sub{ color:var(--muted); margin:0; font-size:14.5px; }

/* ---------- лента эфира (фирменный элемент) ---------- */
.air{ background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:18px 18px 12px; margin:22px 0 14px; }
.air__rail{ position:relative; height:44px;
  background:
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 10%),
    linear-gradient(var(--field), var(--field));
  border-radius:6px; }
.air__tick{
  position:absolute; top:6px; bottom:6px; width:6px; transform:translateX(-3px);
  border:none; border-radius:3px; cursor:pointer; padding:0;
}
.air__tick:hover{ top:2px; bottom:2px; }
.air__tick:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.air__scale{ display:flex; justify-content:space-between; gap:10px; margin-top:9px;
  font:400 11.5px/1.4 "JetBrains Mono", monospace; color:var(--muted); }
.air__scale span:nth-child(2){ font-family:"Golos Text", sans-serif; text-align:center; }

/* цвета статусов: метки, точки, кромки, чипы */
.t-lead{ --c:var(--lead); --c-bg:var(--lead-bg); }
.t-callback{ --c:var(--cb); --c-bg:var(--cb-bg); }
.t-refusal{ --c:var(--ref); --c-bg:var(--ref-bg); }
.t-noanswer{ --c:var(--na); --c-bg:var(--na-bg); }
.t-offtarget{ --c:var(--off); --c-bg:var(--off-bg); }
.air__tick{ background:var(--c); }
.dot{ width:9px; height:9px; border-radius:50%; background:var(--c); display:inline-block; }

/* ---------- плитки-фильтры ---------- */
.tiles{ display:grid; grid-template-columns:repeat(auto-fit, minmax(130px,1fr));
  gap:10px; margin-bottom:22px; }
.tile{ background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:12px 14px 11px; text-align:left; cursor:pointer; color:var(--ink);
  font:inherit; display:flex; flex-direction:column; gap:2px;
  transition:border-color .15s; }
.tile:hover{ border-color:#c4cad2; }
.tile.on{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.tile:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.tile__n{ font-size:26px; font-weight:700; line-height:1.1; }
.tile__row{ display:flex; align-items:center; gap:7px; font-weight:600; font-size:13.5px; }
.tile__hint{ font-size:12px; color:var(--muted); }

/* ---------- к действию ---------- */
.todo{ background:var(--card); border:1px solid var(--line);
  border-left:3px solid var(--accent); border-radius:12px;
  padding:16px 20px; margin-bottom:26px; }
.todo h2{ margin:0 0 10px; font-size:16px; font-weight:800; letter-spacing:-.01em; }
.todo ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.todo li{ font-size:14px; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.todo__phone{ color:var(--ink); font-weight:700; font-size:13.5px; text-decoration:none;
  border-bottom:1px solid var(--line); }
.todo__phone:hover{ border-color:var(--ink); }
.todo__what{ color:var(--muted); }

/* ---------- карточки звонков ---------- */
.calls{ display:flex; flex-direction:column; gap:13px; }
.call{ background:var(--card); border:1px solid var(--line); border-radius:12px;
  border-left:3px solid var(--c, var(--line)); padding:14px 18px 15px; }
.call.flash{ animation:flash 1.6s ease-out; }
@keyframes flash{ 0%{ box-shadow:0 0 0 3px var(--accent);} 100%{ box-shadow:0 0 0 0 transparent;} }
@media (prefers-reduced-motion: reduce){ .call.flash{ animation:none; box-shadow:0 0 0 2px var(--accent);} }
.call__head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:9px; }
.call__phone{ font-weight:700; font-size:15.5px; letter-spacing:.01em; text-decoration:none; color:var(--ink); }
.call__meta{ color:var(--muted); font-size:12.5px; }
.chip{ margin-left:auto; font:600 12px/1 "Golos Text", sans-serif;
  color:var(--c); background:var(--c-bg); border-radius:99px; padding:5px 11px; }
.todo .chip{ margin-left:0; }
audio{ width:100%; height:34px; margin-bottom:9px; accent-color:var(--accent); }
.call__text{ margin:0 0 11px; color:var(--muted); font-size:14px; max-width:72ch; }
.call__text--empty{ font-style:italic; }
.verdict{ font-size:14px; background:var(--field); border-radius:8px; padding:10px 13px; }
.verdict::before{ content:"Заключение ИИ"; display:block;
  font:700 10.5px/1 "JetBrains Mono", monospace; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); margin-bottom:5px; }

footer{ color:var(--muted); font-size:12.5px; margin-top:28px; max-width:70ch; }

@media (max-width:560px){
  body{ padding:22px 12px 50px; }
  .tiles{ grid-template-columns:repeat(2, 1fr); }
  .chip{ margin-left:0; }
}