/* VitOk Hunter — дизайн-система v3 (docs/design/DESIGN_SYSTEM.md). Токены в :root, тёмная тема по настройке системы.
   Контраст посчитан для WCAG 2.2 AA. Цвет никогда не единственный признак: у меток есть значок и слово. */
:root {
  --bg:#f4f7f6; --surface:#ffffff; --surface-2:#eef3f1; --text:#0f1f1c; --text-2:#4a5d58;
  --brand:#16665a; --brand-hover:#11554b; --on-brand:#ffffff; --brand-soft:#e2f2ed; --gold:#8a6100;
  --link:#0f5c8a; --line:#d5dedb; --control-border:#748883; --focus:#0f5c8a;
  --fact:#17663a; --fact-bg:#e3f4e8; --obs:#1f5fa8; --obs-bg:#e6effa; --hyp:#7a4f00; --hyp-bg:#fff3d6;
  --unk:#55615e; --unk-bg:#eef1f0; --bad:#b42318; --bad-bg:#fdecea;
  --p-high:#17663a; --p-high-bg:#e3f4e8; --p-mid:#1f5fa8; --p-mid-bg:#e6effa; --p-low:#55615e; --p-low-bg:#eef1f0;
  --radius:10px; --radius-s:6px; --shadow:0 1px 2px rgba(15,31,28,.06), 0 2px 8px rgba(15,31,28,.05);
  --tap:44px; --nav-h:60px; --speed:180ms;
  /* старые имена — для служебных страниц */
  --fg:var(--text); --muted:var(--text-2); --accent:var(--link); --warn:var(--hyp); --warnbg:var(--hyp-bg); --err:var(--bad); --infobg:var(--obs-bg);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0b1f1c; --surface:#12302b; --surface-2:#173a34; --text:#eaf6f1; --text-2:#a9c2ba;
    --brand:#4fd4b4; --brand-hover:#6fe0c4; --on-brand:#06201b; --brand-soft:#173f37; --gold:#f0c97a;
    --link:#8db8f0; --line:#2a4a44; --control-border:#6f8e86; --focus:#8db8f0;
    --fact:#7fd99a; --fact-bg:#173a2a; --obs:#8db8f0; --obs-bg:#182c45; --hyp:#f0c97a; --hyp-bg:#3a2f14;
    --unk:#a9b5b2; --unk-bg:#22322f; --bad:#ff8a80; --bad-bg:#3d1c1a;
    --p-high:#7fd99a; --p-high-bg:#173a2a; --p-mid:#8db8f0; --p-mid-bg:#182c45; --p-low:#a9b5b2; --p-low-bg:#22322f;
    --shadow:none;
  }
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:1rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color:var(--text); background:var(--bg);
       overflow-wrap:anywhere; }
a { color:var(--link); text-underline-offset:2px; }
:focus-visible { outline:3px solid var(--focus); outline-offset:2px; border-radius:4px; }
h1 { font-size:1.375rem; line-height:1.25; font-weight:700; margin:4px 0 12px; }
h2 { font-size:1.125rem; font-weight:650; margin:24px 0 8px; }
h3 { font-size:1.0625rem; font-weight:650; margin:16px 0 6px; }
p { margin:8px 0; }
.small { font-size:.875rem; } .muted { color:var(--text-2); } .nowrap { white-space:nowrap; }
.url { word-break:break-all; } .pre { white-space:pre-wrap; }
.mono { font:.8125rem/1.45 Consolas, "SF Mono", monospace; }
.err { color:var(--bad); } .warn-text { color:var(--hyp); }
.num { font-size:1.5rem; font-weight:700; font-variant-numeric:tabular-nums; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- Каркас и навигация ---------- */
header.top { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:24px; padding:0 20px; min-height:56px;
             background:var(--surface); border-bottom:1px solid var(--line); }
.brand { font-weight:750; text-decoration:none; color:var(--text); white-space:nowrap; display:flex; align-items:center; gap:8px; }
.brand-mark { width:26px; height:26px; border-radius:7px; background:var(--brand); color:var(--on-brand); display:grid; place-items:center;
              font-size:.8125rem; font-weight:800; }
.nav { display:flex; gap:4px; }
.nav a { display:flex; align-items:center; gap:6px; min-height:var(--tap); padding:0 12px; border-radius:var(--radius-s);
         text-decoration:none; color:var(--text-2); font-weight:600; }
.nav a:hover { background:var(--surface-2); color:var(--text); }
.nav a[aria-current=page] { color:var(--brand); background:var(--brand-soft); }
.nav svg { width:20px; height:20px; flex:none; }
.nav .count { font-size:.75rem; min-width:20px; padding:0 6px; border-radius:10px; background:var(--brand); color:var(--on-brand); text-align:center; }
main { padding:20px; max-width:1440px; margin:0 auto; }
footer { padding:16px 20px; color:var(--text-2); font-size:.8125rem; border-top:1px solid var(--line); }

/* ---------- Кнопки и поля ---------- */
input, select, textarea, button { font:inherit; color:inherit; }
.btn, button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:var(--tap); padding:0 16px;
               border:1px solid var(--control-border); background:var(--surface); color:var(--text); border-radius:var(--radius-s);
               cursor:pointer; text-decoration:none; font-weight:600; transition:background var(--speed) ease-out; }
.btn:hover, button:hover { background:var(--surface-2); }
.btn-primary, button.primary { background:var(--brand); border-color:var(--brand); color:var(--on-brand); }
.btn-primary:hover, button.primary:hover { background:var(--brand-hover); }
.btn-quiet { border-color:transparent; background:transparent; color:var(--link); padding:0 8px; }
.btn-danger { color:var(--bad); }
button:disabled { opacity:.5; cursor:not-allowed; }
button.small, .btn.small { min-height:36px; padding:0 10px; font-size:.875rem; }
label { display:block; font-weight:600; font-size:.9375rem; }
label .hint, .hint { display:block; font-weight:400; color:var(--text-2); font-size:.875rem; }
label.inline, label.check { display:inline-flex; align-items:center; gap:8px; min-height:var(--tap); margin-right:16px; font-weight:400; }
input[type=text], input[type=search], input:not([type]), input[type=number], input[type=date], input[type=file], select, textarea {
  width:100%; min-height:var(--tap); padding:8px 12px; margin-top:4px; border:1px solid var(--control-border); border-radius:var(--radius-s);
  background:var(--surface); font-size:1rem; }
textarea { min-height:88px; }
input[type=checkbox], input[type=radio] { width:20px; height:20px; accent-color:var(--brand); margin:0; }
textarea.code { font-family:Consolas, monospace; font-size:.8125rem; }
form.grid { display:grid; gap:14px; max-width:720px; }
form.inline { display:inline; }
fieldset { border:1px solid var(--line); border-radius:var(--radius-s); padding:8px 12px 12px; margin:0; }
legend { font-weight:600; padding:0 4px; }
.searchbar { display:flex; gap:8px; align-items:flex-end; }
.searchbar input { margin-top:0; }
.searchbar .grow { flex:1; min-width:0; }
.row { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.row > * { flex:1 1 180px; min-width:0; }
.actions { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }

/* ---------- Поверхности ---------- */
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); }
.panel + .panel { margin-top:12px; }
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:8px; margin:12px 0; }
.stat { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px; }
.stat b { display:block; font-size:1.375rem; font-variant-numeric:tabular-nums; }
.stat span { color:var(--text-2); font-size:.8125rem; }
.cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:12px; text-decoration:none; color:var(--text); }
.card b { display:block; font-size:1.375rem; } .card span { color:var(--text-2); font-size:.8125rem; }

/* ---------- Метки ---------- */
.badge { display:inline-flex; align-items:center; gap:4px; font-size:.8125rem; font-weight:600; line-height:1.3; padding:2px 8px;
         border-radius:999px; background:var(--unk-bg); color:var(--unk); white-space:nowrap; }
.b-fact { background:var(--fact-bg); color:var(--fact); } .b-obs { background:var(--obs-bg); color:var(--obs); }
.b-hyp { background:var(--hyp-bg); color:var(--hyp); } .b-unk { background:var(--unk-bg); color:var(--unk); }
.b-bad, .badge.warn { background:var(--bad-bg); color:var(--bad); }
.prio { display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:.8125rem; padding:2px 10px; border-radius:999px; white-space:nowrap; }
.prio::before { content:""; width:8px; height:8px; border-radius:50%; background:currentColor; }
.prio-high { background:var(--p-high-bg); color:var(--p-high); } .prio-medium { background:var(--p-mid-bg); color:var(--p-mid); }
.prio-low { background:var(--p-low-bg); color:var(--p-low); }
.prio-insufficient { background:var(--unk-bg); color:var(--unk); }
.prio-insufficient::before { background:transparent; border:2px solid currentColor; width:6px; height:6px; }
.fit { font-size:.8125rem; font-weight:600; }
.fit-match { color:var(--fact); } .fit-likely { color:var(--obs); } .fit-check { color:var(--hyp); } .fit-insufficient { color:var(--unk); } .fit-no { color:var(--bad); }
.tier { display:inline-block; min-width:22px; text-align:center; border-radius:4px; font-weight:700; color:#fff; padding:0 4px; }
.tier-A { background:#17663a; } .tier-B { background:#1f5fa8; } .tier-C { background:#7a4f00; } .tier-D { background:#55615e; }

/* ---------- Сообщения и состояния ---------- */
.note, .alert { padding:12px 14px; border-radius:var(--radius-s); margin:10px 0; border-left:4px solid var(--obs); background:var(--obs-bg); }
.note.warn, .alert.warn { border-color:var(--hyp); background:var(--hyp-bg); }
.alert.bad { border-color:var(--bad); background:var(--bad-bg); }
.note.info { border-color:var(--obs); }
.empty { text-align:center; padding:32px 16px; color:var(--text-2); border:1px dashed var(--control-border); border-radius:var(--radius); }
.empty b { display:block; color:var(--text); font-size:1.0625rem; margin-bottom:4px; }
.progress { height:8px; border-radius:4px; background:var(--surface-2); overflow:hidden; }
.progress > i { display:block; height:100%; background:var(--brand); transition:width var(--speed) ease-out; }
.st-running { color:var(--link); } .st-failed { color:var(--bad); } .st-done { color:var(--fact); }

/* ---------- Список организаций ---------- */
.orgs { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.org { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; }
.org[aria-current=true] { border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-soft); }
.org-head { display:flex; gap:8px; align-items:baseline; justify-content:space-between; }
.org-name { font-weight:650; font-size:1.0625rem; color:var(--text); text-decoration:none; }
.org-name::after { content:""; position:absolute; inset:0; }   /* вся карточка нажимается */
.org-meta { color:var(--text-2); font-size:.875rem; margin-top:2px; }
.org-why { margin-top:6px; font-size:.9375rem; }
.org-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.org-tags form, .org-tags a, .org .above { position:relative; z-index:1; }
.idno { font:.8125rem Consolas, "SF Mono", monospace; color:var(--text-2); white-space:nowrap; }

/* ---------- Список + подробности (компьютер) ---------- */
.split { display:grid; gap:16px; }
@media (min-width: 1024px) {
  .split.has-detail { grid-template-columns:minmax(360px, 5fr) 7fr; align-items:start; }
  .split.has-detail .detail { order:2; position:sticky; top:72px; max-height:calc(100vh - 88px); overflow:auto; }
}
.detail, .list { min-width:0; }
.flush { margin-top:0; } .center { align-self:center; }
.org-foot { list-style:none; display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:-4px 0 4px; padding:0 4px; }
.detail-close { float:right; }

/* ---------- Карточка организации ---------- */
.org-card h1 { margin-bottom:4px; }
.summary { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:10px 16px; margin:12px 0; }
.summary dt { font-size:.8125rem; color:var(--text-2); font-weight:600; }
.summary dd { margin:2px 0 0; }
.lead { font-size:1.0625rem; }
details.more, .org { scroll-margin-top:72px; }
details.more { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); margin:8px 0; }
details.more > summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:52px;
                         padding:8px 16px; cursor:pointer; font-weight:650; color:var(--text); }
details.more > summary::-webkit-details-marker { display:none; }
details.more > summary::after { content:"▾"; color:var(--text-2); transition:transform var(--speed) ease-out; }
details.more[open] > summary::after { transform:rotate(180deg); }
details.more > summary .sum-note { font-weight:400; color:var(--text-2); font-size:.875rem; margin-left:auto; text-align:right; }
details.more > .body { padding:0 16px 14px; animation:reveal var(--speed) ease-out; }
@keyframes reveal { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
details { margin:8px 0; } details:not(.more) > summary { cursor:pointer; color:var(--link); min-height:var(--tap); display:flex; align-items:center; }
.item { padding:10px 0; border-top:1px solid var(--line); }
.item:first-child { border-top:0; }
.kvl { display:grid; grid-template-columns:max-content 1fr; gap:4px 12px; margin:6px 0; }
.kvl dt { color:var(--text-2); font-size:.875rem; } .kvl dd { margin:0; }
.outcomes { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; margin:8px 0; }
.outcomes label { display:flex; align-items:center; gap:8px; min-height:var(--tap); padding:6px 10px; border:1px solid var(--control-border);
                  border-radius:var(--radius-s); font-weight:500; cursor:pointer; }
.outcomes input:checked + span { font-weight:700; }
.outcomes label:has(input:checked) { border-color:var(--brand); background:var(--brand-soft); }
.copy { position:relative; padding:12px; border-radius:var(--radius-s); background:var(--surface-2); white-space:pre-wrap; }

/* ---------- Звонки команды ---------- */
.calls-box { background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--brand); border-radius:var(--radius);
             padding:12px 16px; margin:12px 0; }
.calls-box.state-none, .calls-box.state-unverified { border-left-color:var(--unk); }
.calls-box.state-others, .calls-box.state-both { border-left-color:var(--hyp); }
.call-line { padding:6px 0; }
.org-calls { margin-top:6px; }
.usermenu { margin-left:auto; display:flex; align-items:center; gap:8px; font-size:.875rem; color:var(--text-2); }
.usermenu form { margin:0; }
.login { max-width:380px; margin:10vh auto; }

/* ---------- Таблицы ---------- */
table { border-collapse:collapse; width:100%; margin:8px 0; }
th, td { border-bottom:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top; }
th { background:var(--surface-2); font-weight:600; font-size:.8125rem; color:var(--text-2); }
.scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
.kv th { width:200px; background:transparent; }
.res-fail td:nth-child(3) { color:var(--bad); font-weight:600; } .res-pass td:nth-child(3) { color:var(--fact); }
.offer { border:1px solid var(--line); border-radius:var(--radius); padding:12px; margin:8px 0; background:var(--surface); }
section { margin-bottom:24px; }
.filters { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; margin-bottom:8px; }
.filters input, .filters select { width:auto; min-width:120px; }
.bulk { margin:8px 0; display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .bulk select { width:auto; }
.timeline { list-style:none; padding:0; margin:0; }
.timeline li { display:grid; grid-template-columns:120px 1fr; gap:12px; padding:10px 0; border-top:1px solid var(--line); }
.timeline time { color:var(--text-2); font-size:.875rem; font-variant-numeric:tabular-nums; }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.chips a { display:inline-flex; align-items:center; min-height:36px; padding:0 12px; border-radius:999px; border:1px solid var(--line);
           text-decoration:none; color:var(--text); background:var(--surface); font-size:.875rem; }
.chips a[aria-current=true] { background:var(--brand); color:var(--on-brand); border-color:var(--brand); }
.linklist { list-style:none; padding:0; margin:0; display:grid; gap:8px; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); }
.linklist a { display:block; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); text-decoration:none; color:var(--text); }
.linklist a b { display:block; } .linklist a span { color:var(--text-2); font-size:.875rem; }

/* ---------- Телефон ---------- */
@media (max-width: 720px) {
  body { padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom)); }
  header.top { padding:0 16px; min-height:52px; }
  .nav { position:fixed; left:0; right:0; bottom:0; z-index:30; justify-content:space-around; gap:0; padding:0 4px env(safe-area-inset-bottom);
         background:var(--surface); border-top:1px solid var(--line); }
  .nav a { flex:1; flex-direction:column; justify-content:center; gap:2px; min-height:var(--nav-h); padding:4px 2px; font-size:.6875rem;
           border-radius:0; }
  .nav a[aria-current=page] { background:transparent; }
  .nav .count { position:absolute; margin:-26px 0 0 26px; font-size:.6875rem; }
  .nav a { position:relative; }
  main { padding:12px 16px 24px; }
  .usermenu .uname { display:none; }
  button.small, .btn.small { min-height:var(--tap); }
  h1 { font-size:1.25rem; }
  .searchbar { flex-wrap:wrap; } .searchbar .grow { flex-basis:100%; }
  .searchbar button { flex:1; }
  .kv th { width:auto; display:block; border-bottom:0; padding-bottom:0; }
  .kv td { display:block; padding-top:2px; }
  /* Таблица данных превращается в карточки */
  table.data thead { display:none; }
  table.data, table.data tbody, table.data tr, table.data td { display:block; width:100%; }
  table.data tr { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:8px 12px; margin-bottom:8px; }
  table.data td { border:0; padding:4px 0; display:flex; gap:12px; justify-content:space-between; }
  table.data td[data-label]::before { content:attr(data-label); color:var(--text-2); font-size:.8125rem; flex:none; }
  .timeline li { grid-template-columns:1fr; gap:2px; }
  .kvl { grid-template-columns:1fr; } .kvl dd { margin-bottom:6px; }
  .filters input, .filters select { width:100%; }
  footer { padding-bottom:16px; }
}

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