/* ═══════════════════════════════════════════════════════════════════
   a11y-home.css · Кръгозор — достъпност на новата начална (WCAG 2.1 AA)
   ───────────────────────────────────────────────────────────────────
   Зарежда се ПОСЛЕДЕН, след home-v3.css:

     <link rel="stylesheet" href="/a11y-home.css">

   Файлът е адитивен: не сменя шрифтове, размери, подредба или палитрата
   на „Изданието“. Пипа само:
     1) контраст на текстове под нормата (4.5:1 за текст, 3:1 за едър);
     2) видим фокус — 2 px злато + 2 px отстъп, без анимация и без
        отрязване в навигацията на телефон;
     3) контраст на границите на контролите (WCAG 1.4.11 — 3:1);
     4) тъч/мишка цели ≥ 24×24 за иконите в лентата (WCAG 2.5.8).

   Защо нов слой, а не поправка в home-v3.css: home-v3.css е „облик“ и се
   пипа при всяка промяна на дизайна; тук числата са договорени с нормата
   и не бива да се местят случайно. Всяко правило носи измереното
   съотношение като коментар, за да се вижда защо тонът е точно този.

   Фонове, срещу които са мерени съотношенията (реални стойности от
   браузъра, 1440×900, начална страница):
     • панели        linear-gradient(#151210 → #100e0c)  → меродавно #151210
     • хедър         rgba(12,10,8,.92) върху #0c0a08     → #0c0a08
     • ленти Днес/Арена  linear-gradient(#161310 → #100e0c) → #161310
     • герой         снимка под воал (rgba(10,9,8,.86–.98)); замерено по
                     пиксели: rgb(25,27,24) … rgb(34,32,29)
     • цитат         снимка sky + воал .6/.75–.96; замерено: rgb(17,21,19)
   ═══════════════════════════════════════════════════════════════════ */

body.hv3{
  /* Тонът за дребния текст. Сменя #7d7361, #8b8070 и #6f6656, които
     даваха 3.30–4.23:1. #9a8d76 дава 5.72:1 на #151210 и 6.07:1 на #0c0a08. */
  --hv-dim-aa:#9a8d76;
  /* Злато за фокуса: 12.4:1 на #151210, 13.1:1 на #0c0a08 (нормата иска 3:1). */
  --hv-focus-aa:#f2cf6b;
  /* Граници на контроли: 3.97:1 срещу панела (нормата иска 3:1). */
  --hv-edge-aa:rgba(242,233,216,.45);
}

/* ═══════════════════════════════════════════════════════════════════
   1) КОНТРАСТ НА ТЕКСТА
   ═══════════════════════════════════════════════════════════════════ */

/* —— хедър ──────────────────────────────────────────────────────── */
/* лозунгът под логото: 8.5 px, беше #7d7361 → 4.23:1 */
body.hv3 header.top .brand .tag{
  color:var(--hv-dim-aa);            /* 6.07:1 на #0c0a08 */
}
/* „онлайн“ етикетът: #8b8070 → 5.10:1 беше на ръба, сега 6.07:1 */
body.hv3 header.top .topright .onlinebadge{
  color:var(--hv-dim-aa);
}
body.hv3 header.top .topright .onlinebadge b{
  color:#ded2b8;                     /* 13.2:1 */
}
/* „ VT“ след броя: #7d7361 → 4.23:1 */
body.hv3 header.top .topright .vt-pill b::after{
  color:var(--hv-dim-aa);            /* 6.07:1 */
}
/* „изход“: #7d7361 → 4.23:1 */
body.hv3 header.top .topright .authbox .logout,
body.hv3 header.top .topright .authbox #logoutBtn{
  color:var(--hv-dim-aa);            /* 6.07:1 */
}
body.hv3 header.top .topright .authbox .logout:hover,
body.hv3 header.top .topright .authbox #logoutBtn:hover{
  color:#f0c9c9;                     /* 9.9:1 */
}

/* —— панели (колело, тема, статистика, ритуал, пътеки) ──────────── */
/* броячът „0 от 1050“: #8b8070 → 4.78:1 */
body.hv3 .panel .panelcount{
  color:var(--hv-dim-aa);            /* 5.7:1 */
}
/* „Без повторения“: #8b8070 → 4.78:1 */
body.hv3 .wheelcontrols .switch{
  color:var(--hv-dim-aa);            /* 5.7:1 */
}
/* метаданните на темата („▤ Кратък текст · ✎ Задача“): #8b8070 → 4.9:1 */
body.hv3 .topiccard .meta{
  color:var(--hv-dim-aa);            /* 5.7:1 */
}
/* подсказката под брояча: #8b8070 → 4.82:1 */
body.hv3 .statpanel .hint{
  color:var(--hv-dim-aa);            /* 5.7:1 */
}
/* „/ 1050 теми“ до голямото число: 9.5 px, беше #7d7361 → 3.99:1 */
body.hv3 .statpanel .bignum small{
  color:var(--hv-dim-aa);            /* 5.7:1 */
}
/* номерата 01/02/03 в дневния ритуал: #6f6656 → 3.30:1 */
body.hv3 .steps li::before{
  color:var(--hv-dim-aa);            /* 5.7:1 */
}
/* подзаглавието на пътеката: #8b8070 → 4.81:1 */
body.hv3 .paths .pb small{
  color:var(--hv-dim-aa);
}

/* —— класацията в лентата „Арена“ ───────────────────────────────── */
body.hv3 .dc-board .lb-place{
  color:var(--hv-dim-aa);            /* 5.7:1; първият ред остава златен */
}
body.hv3 .dc-board .lb-name small{
  color:var(--hv-dim-aa) !important; /* 5.7:1 */
}
body.hv3 .dc-board .lb-note,
body.hv3 .dc-board > p{
  color:var(--hv-dim-aa);            /* 5.7:1 */
}
body.hv3 .dc-board .lb-tab{
  color:var(--hv-dim-aa) !important; /* 5.7:1 */
}
body.hv3 .dc-card.locked .dc-stat::after{
  color:var(--hv-dim-aa);            /* 5.7:1 */
}

/* —— турнирните карти (лявата колона на Арената) ────────────────── */
body.hv3 .am-tourney p,
body.hv3 .am-tourney small,
body.hv3 .am-tourney .am-note{
  color:var(--hv-dim-aa) !important; /* 5.7:1 */
}
body.hv3 .am-tourney .am-row,
body.hv3 .am-tourney .am-line,
body.hv3 .am-tourney-line{
  color:var(--hv-dim-aa) !important; /* 5.7:1 */
}
body.hv3 .am-tourney-note,
body.hv3 .am-tourney-empty{
  color:var(--hv-dim-aa) !important; /* 5.7:1, италикът вече се чете */
}
body.hv3 .am-tourney-stat span{
  color:var(--hv-dim-aa) !important; /* 8 px главни букви: 5.7:1 */
}
body.hv3 .am-tourney-stat b i{
  color:var(--hv-dim-aa);            /* единицата до числото: 5.7:1 */
}
body.hv3 .am-tourney-done{
  color:var(--hv-dim-aa) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   2) ВИДИМ ФОКУС — 2 px злато, 2 px отстъп
   a11y.css вече дава `*:focus-visible`; тук той се затвърждава за
   началната, за да не зависи от реда на зареждане, и се пази от
   двата проблема, които замерването показа:
     • `.nav .tab` има `transition:.18s` за ВСИЧКИ свойства — пръстенът
       пристигаше свит (1 px) и с прелян цвят, докато трае преходът;
     • на телефон навигацията е `overflow-x:auto` и отрязваше долния
       ръб на пръстена.
   ═══════════════════════════════════════════════════════════════════ */
body.hv3 :focus-visible{
  outline:2px solid var(--hv-focus-aa) !important;
  outline-offset:2px !important;
  /* тънка тъмна линия в отстъпа: пръстенът остава четим и когато
     отстъпът падне върху златен бутон */
  box-shadow:0 0 0 2px rgba(8,11,10,.85);
}

/* Скритите с tabindex="-1" контейнери не рисуват пръстен с мишка. */
body.hv3 [tabindex="-1"]:focus:not(:focus-visible){
  outline:none !important;
  box-shadow:none;
}

/* Пръстенът не се анимира. `transition:.18s` (съкратено = „всички
   свойства“) караше контура да пристига свит (1 px) и с прелян цвят,
   затова преходът се стеснява до цветовете, които наистина се менят.
   Селекторът е `nav.nav`, за да бие еднакво специфичното правило в
   home-v3.css (там `.tab` е под `nav.nav`). */
body.hv3 header.top nav.nav .tab{
  transition:color .18s, border-bottom-color .18s;
}
body.hv3 header.top .topright button,
body.hv3 header.top .topright .ghost,
body.hv3 header.top .topright .findbtn,
body.hv3 header.top .topright .vt-pill{
  transition:color .18s, border-color .18s, background-color .18s;
}
body.hv3 :focus-visible{
  transition-property:none;
}

/* На телефон навигацията е хоризонтален скрол: отстъп от 6 px отстрани
   и отдолу, за да се побере пръстенът (2 px контур + 2 px отстъп)
   вместо да бъде отрязан от overflow на скролера. */
@media (max-width:720px){
  body.hv3 header.top nav.nav{
    padding:8px 6px 6px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   3) ГРАНИЦИ НА КОНТРОЛИТЕ — WCAG 1.4.11 (3:1)
   rgba(242,233,216,.14–.2) върху #100e0c даваше ~1.9:1: границата на
   падащото меню и на „чиповете“ практически липсваше.
   ═══════════════════════════════════════════════════════════════════ */
body.hv3 .panel .mini{
  border-color:var(--hv-edge-aa);            /* 4.1:1 срещу #100e0c */
}
body.hv3 .herocta .bgchip{
  border-color:var(--hv-edge-aa);            /* 4.1:1 срещу воала */
}
body.hv3 .herocta .bgchip:hover{
  border-color:var(--hv-gold);               /* 7.7:1 */
}
body.hv3 .paths .pathmore,
body.hv3 .paths .allpaths{
  border-color:var(--hv-edge-aa);            /* 4.1:1 */
}
body.hv3 .wheelcontrols .spinagain{
  border-color:rgba(201,162,39,.62);         /* 3.4:1 срещу панела */
}
body.hv3 .am-tourney-stat{
  border-color:var(--hv-edge-aa) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   4) ЦЕЛИ ≥ 24×24 (WCAG 2.5.8)
   Иконата за търсене беше 16×16, „Приятели“/„Фокус“ — 10 px високи.
   Отстъпът се връща с отрицателен margin, за да не мърда лентата.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width:721px){
  body.hv3 header.top .topright .ghost#findBtn,
  body.hv3 header.top .topright .findbtn{
    box-sizing:content-box;
    padding:4px !important;
    margin:-4px;
    min-width:24px; min-height:24px;
  }
  body.hv3 header.top .topright #friendsBtn,
  body.hv3 header.top .topright #focusBtn{
    display:inline-flex; align-items:center;
    min-height:24px !important;
    padding:3px 0 !important;
  }
}