/* ============================================================
   КАРТКА-ПИТАННЯ — ЄДИНЕ ДЖЕРЕЛО ПРАВДИ
   ------------------------------------------------------------
   Один і той самий вигляд для:
     • #test-container — сторінка проходження тесту (krokTestView)
     • #grid-archive   — вкладка «Архів» у КРОК-хабі (krokHubView)
   Обидві рендерять ОДНАКОВУ розмітку (.test-item > .test-info >
   .question-number, h3, .test-meta, ul > li[data-correct]), тож
   стилі тримаємо тут — інакше вони розходяться.

   Підключати ПІСЛЯ design-b-v2.css (і до test-page.css на тесті).
============================================================ */

@counter-style krok-uk{ system:fixed; symbols:"А" "Б" "В" "Г" "Д" "Е" "Є" "Ж" "З" "И" "І"; suffix:""; }

:root{
  --t-bg:#f4f1fb;
  --t-surface:#ffffff;
  --t-ink:#2b2735;
  --t-ink-2:#5d586b;
  --t-muted:#9a95a8;
  --t-line:#ece9f6;
  --t-fill:#f1eff9;
  --t-fill-2:#e7e4f3;
  --t-accent:#8b80f0; --t-accent-hov:#756af0; --t-accent-soft:#ecebfd;
  --t-good:#43b483; --t-good-soft:#e6f7ef; --t-good-ink:#2f9b6e;
  --t-bad:#ef8e9c;  --t-bad-soft:#fdedf0;  --t-bad-ink:#d05f70;
  --t-r:18px; --t-r-sm:13px; --t-r-xs:11px;
  --t-sh:0 2px 8px rgba(70,60,110,.05);
  --t-sh-md:0 8px 26px -10px rgba(70,60,110,.20), 0 2px 6px rgba(70,60,110,.05);
  --t-sh-lg:0 26px 64px -18px rgba(45,35,85,.30);
  --t-f:'Inter',system-ui,-apple-system,sans-serif;
}
body.design-b.dark-mode{
  --t-bg:#16151c; --t-surface:#201f29; --t-ink:#e9e7f1; --t-ink-2:#aaa6b8; --t-muted:#7c7790;
  --t-line:#322f3e; --t-fill:#2a2836; --t-fill-2:#332f40;
  --t-accent:#9b90f5; --t-accent-hov:#b0a8f8; --t-accent-soft:rgba(155,144,245,.16);
  --t-good:#5aa888; --t-good-soft:rgba(90,168,136,.14); --t-good-ink:#9ccdb4;
  --t-bad:#cf8a96;  --t-bad-soft:rgba(207,138,150,.14); --t-bad-ink:#e0aeb6;
  --t-sh:0 2px 8px rgba(0,0,0,.4);
  --t-sh-md:0 8px 26px -10px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
  --t-sh-lg:0 26px 64px -18px rgba(0,0,0,.6);
}

/* ── САМА КАРТКА ── */
/* Розміри нижче — плавні (clamp), а не фіксовані: текст і відступи
   ростуть разом із шириною екрана від 360px до 1200px, далі
   впираються в максимум. Так немає стрибка на 600px, коли картка
   раптом ставала «десктопною» на вузькому телефоні. */
body.design-b #test-container .test-item,
body.design-b #grid-archive .test-item{
  background:var(--t-surface) !important; border:1px solid var(--t-line) !important;
  border-radius:var(--t-r) !important; box-shadow:var(--t-sh-md) !important;
  /* 13px на 360px → 24/26px на 1200px */
  padding:clamp(13px, calc(8.29px + 1.31vw), 24px)
          clamp(13px, calc(7.43px + 1.548vw), 26px) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  animation:none !important;
}
body.design-b #grid-archive .test-item::before{ display:none !important; content:none !important; }
body.design-b #grid-archive .test-item:hover{ transform:none !important; box-shadow:var(--t-sh-md) !important; }

body.design-b #test-container .question-number,
body.design-b #grid-archive .question-number{
  font-family:var(--t-f) !important; background:transparent !important; color:var(--t-muted) !important;
  font-size:clamp(10px, calc(9.57px + .119vw), 11px) !important;
  font-weight:700 !important; letter-spacing:.12em !important;
  text-transform:uppercase !important; padding:0 !important; border:none !important;
}
body.design-b #test-container .test-item h3,
body.design-b #grid-archive .test-item h3{
  font-family:var(--t-f) !important; color:var(--t-ink) !important; font-weight:700 !important;
  /* 14.5px на телефоні → 16.5px на десктопі */
  font-size:clamp(14.5px, calc(13.64px + .238vw), 16.5px) !important;
  line-height:1.5 !important; letter-spacing:-.01em !important;
  margin:clamp(4px, .5vw, 6px) 0 clamp(10px, calc(7.43px + .714vw), 16px) !important;
}

/* ── «Запитання N» = кнопка копіювання ──────────────────────
   Клік копіює умову з варіантами (assets/common/test-copy.js).
   Значок ⧉ підказує, що напис клікабельний; після копіювання
   він на мить стає ✓. Правила скоуповані так само, як решта
   картки, тож діють і в хабі, і на предметних тестах.
   ───────────────────────────────────────────────────────── */
body.design-b #test-container .question-number,
body.design-b #grid-archive .question-number{
  cursor:pointer; user-select:none; -webkit-user-select:none;
  display:inline-flex; align-items:center; gap:6px;
  transition:background-color .12s, color .12s;
}
body.design-b #test-container .question-number::after,
body.design-b #grid-archive .question-number::after{
  content:'\29C9'; font-size:12px; opacity:.5; line-height:1;
}
body.design-b #test-container .question-number:hover,
body.design-b #grid-archive .question-number:hover{
  background:var(--t-accent-soft) !important; color:var(--t-accent-hov) !important;
  border-radius:7px; padding:2px 7px !important; margin:-2px -7px !important;
}
body.design-b #test-container .question-number:hover::after,
body.design-b #grid-archive .question-number:hover::after{ opacity:.95; }
body.design-b #test-container .question-number.copied,
body.design-b #grid-archive .question-number.copied{
  background:var(--t-good-soft) !important; color:var(--t-good-ink) !important;
  border-radius:7px; padding:2px 7px !important; margin:-2px -7px !important;
}
body.design-b #test-container .question-number.copied::after,
body.design-b #grid-archive .question-number.copied::after{ content:'\2713'; opacity:1; }

/* ── ВАРІАНТИ + БУКВИ-БЕЙДЖІ ── */
body.design-b #test-container .test-item ul,
body.design-b #grid-archive .test-item ul{ counter-reset:topt; margin:8px 0 0 !important; padding:0 !important; list-style:none !important; }
body.design-b #test-container .test-item ul li,
body.design-b #grid-archive .test-item ul li{
  counter-increment:topt; position:relative;
  background:var(--t-fill) !important; border:1.5px solid transparent !important; border-radius:var(--t-r-sm) !important;
  box-shadow:none !important; color:var(--t-ink) !important; font-family:var(--t-f) !important;
  font-size:clamp(13px, calc(12.14px + .238vw), 15px) !important;
  line-height:1.45 !important;
  /* Лівий відступ навмисно більший за бейдж-букву: між нею і текстом
     має лишатись повітря (≈14px на телефоні, ≈21px на десктопі),
     інакше текст читається як продовження літери. */
  padding:clamp(9px, calc(6.86px + .595vw), 14px)
          clamp(11px, calc(8px + .833vw), 18px)
          clamp(9px, calc(6.86px + .595vw), 14px)
          clamp(46px, calc(39.14px + 1.905vw), 62px) !important;
  margin:clamp(6px, calc(4.29px + .476vw), 10px) 0 !important;
  transition:background-color .13s, border-color .13s, color .13s !important;
}
body.design-b #test-container .test-item ul li::before,
body.design-b #grid-archive .test-item ul li::before{
  content:counter(topt, krok-uk); position:absolute;
  left:clamp(8px, calc(6.71px + .357vw), 11px); top:50%; transform:translateY(-50%);
  width:clamp(22px, calc(19.43px + .714vw), 28px);
  height:clamp(22px, calc(19.43px + .714vw), 28px);
  border-radius:clamp(7px, calc(6.14px + .238vw), 9px);
  display:flex; align-items:center; justify-content:center;
  background:var(--t-surface); color:var(--t-accent); font-family:var(--t-f); font-weight:800;
  font-size:clamp(12px, calc(11.57px + .119vw), 13px);
  box-shadow:0 1px 3px rgba(70,60,110,.14);
}
body.design-b.dark-mode #test-container .test-item ul li::before,
body.design-b.dark-mode #grid-archive .test-item ul li::before{ background:var(--t-fill-2); }
body.design-b #test-container .test-item ul li:hover,
body.design-b #grid-archive .test-item ul li:hover{ background:var(--t-fill-2) !important; transform:none !important; }
body.design-b #test-container .test-item ul li.selected,
body.design-b #grid-archive .test-item ul li.selected{ border-color:var(--t-accent) !important; background:var(--t-accent-soft) !important; }

body.design-b #test-container .test-item ul li.correct,
body.design-b #grid-archive .test-item ul li.correct{
  background:var(--t-good-soft) !important; color:var(--t-good-ink) !important;
  border-color:var(--t-good) !important; font-weight:600 !important; text-decoration:none !important; animation:none !important;
}
body.design-b #test-container .test-item ul li.correct::before,
body.design-b #grid-archive .test-item ul li.correct::before{ color:var(--t-good) !important; }
body.design-b #test-container .test-item ul li.correct::after,
body.design-b #grid-archive .test-item ul li.correct::after{
  content:'✓' !important; color:var(--t-good) !important; background:none !important; box-shadow:none !important;
  width:auto !important; height:auto !important; right:16px !important; font-size:15px !important; font-weight:800 !important; animation:none !important;
}
body.design-b #test-container .test-item ul li.incorrect,
body.design-b #grid-archive .test-item ul li.incorrect{
  background:var(--t-bad-soft) !important; color:var(--t-bad-ink) !important;
  border-color:var(--t-bad) !important; text-decoration:none !important; animation:none !important;
}
body.design-b #test-container .test-item ul li.incorrect::before,
body.design-b #grid-archive .test-item ul li.incorrect::before{ color:var(--t-bad) !important; }
body.design-b #test-container .test-item ul li.incorrect::after,
body.design-b #grid-archive .test-item ul li.incorrect::after{
  content:'✕' !important; color:var(--t-bad) !important; background:none !important; box-shadow:none !important;
  width:auto !important; height:auto !important; right:16px !important; font-size:14px !important; font-weight:800 !important; animation:none !important;
}

/* ── МЕТА-ЧІПИ ── */
body.design-b #test-container .test-meta .chip,
body.design-b #grid-archive .test-meta .chip{
  background:var(--t-fill) !important; color:var(--t-ink-2) !important; border:none !important; border-radius:8px !important;
}

/* ── ІКОНКИ-ДІЇ (пояснення / схожі / архів / обговорення) ── */
body.design-b .explain-btn, body.design-b .similar-btn,
body.design-b .divforarchive, body.design-b .discussion-btn{
  background:transparent !important; color:var(--t-ink-2) !important; border:none !important; border-radius:10px !important;
}
body.design-b .explain-btn:hover, body.design-b .similar-btn:hover,
body.design-b .divforarchive:hover, body.design-b .discussion-btn:hover{
  background:var(--t-accent-soft) !important; color:var(--t-accent-hov) !important;
}

/* ── ТЕЛЕФОН ──────────────────────────────────────────────
   Розміри тексту, відступів і бейджів сюди БІЛЬШЕ НЕ ПИШЕМО —
   їх веде clamp() вище, плавно від 360px до 1200px. Тут лишилось
   тільки те, що clamp не покриває: заокруглення, службові
   позиції та розмір кнопок-іконок.

   Якщо додати сюди font-size чи padding, воно перебʼє clamp
   (те саме !important, але правило йде пізніше) — і плавність
   зникне зі стрибком на 600px.
   ───────────────────────────────────────────────────────── */
@media (max-width:600px){
  body.design-b #test-container .test-item,
  body.design-b #grid-archive .test-item{ border-radius:14px !important; }

  body.design-b #test-container .question-number,
  body.design-b #grid-archive .question-number{ letter-spacing:.1em !important; }

  body.design-b #test-container .test-item ul,
  body.design-b #grid-archive .test-item ul{ margin:6px 0 0 !important; }
  body.design-b #test-container .test-item ul li,
  body.design-b #grid-archive .test-item ul li{
    border-radius:11px !important; border-width:1.5px !important;
  }
  /* галочка/хрестик — ближче до краю, щоб не тиснули текст */
  body.design-b #test-container .test-item ul li.correct::after,
  body.design-b #grid-archive .test-item ul li.correct::after,
  body.design-b #test-container .test-item ul li.incorrect::after,
  body.design-b #grid-archive .test-item ul li.incorrect::after{
    right:10px !important; font-size:13px !important;
  }

  /* ряд іконок у шапці картки */
  body.design-b .test-info{ margin-bottom:6px !important; }
  body.design-b #test-container .explain-btn, body.design-b #test-container .similar-btn,
  body.design-b #test-container .divforarchive, body.design-b #test-container .discussion-btn,
  body.design-b #test-container .report-btn{
    width:30px !important; height:30px !important;
  }
  body.design-b #test-container .explain-btn img, body.design-b #test-container .similar-btn img,
  body.design-b #test-container .divforarchive img, body.design-b #test-container .discussion-btn img,
  body.design-b #test-container .report-btn img{
    width:18px !important; height:18px !important;
  }
}