/* AGEON: картка «спершу відповідь», статус фактів, відповідь моделі.
   Лише токени сторінки (--ok, --amber, --cy2...), тому світла і темна теми
   працюють без окремих правил. Цілі для пальця не менші за 44px. */

.acard .lead{font-size:16px;line-height:1.5;color:var(--ink);}
.acard .badges{margin:10px 0 0;}
.acard .chip{min-height:44px;}
.acard .copybtn,.acard .deny{min-height:44px;}

/* статус факту: маленька мітка, колір плюс слово, щоб читалось і без кольору */
.vb{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;
  border-radius:999px;padding:3px 9px;border:1px solid currentColor;line-height:1.3;
  white-space:nowrap;background:transparent;}
.vb::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto;}
.vb-verified{color:var(--ok);}
.vb-pending{color:var(--amber);}
.vb-harvested{color:var(--cy2);}

.srcbtn{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;
  background:none;border:0;color:var(--cy2);font-size:12.5px;font-weight:600;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.srcbtn:disabled{opacity:.55;}
.srcinfo{font-size:12px;color:var(--muted);line-height:1.4;}

/* рядок факту: назва, походження, статус; на телефоні статус переходить
   на новий рядок замість того, щоб розпирати ширину */
.acard .plist .row{flex-wrap:wrap;}
.acard .plist .row > span:first-child{min-width:0;overflow-wrap:anywhere;}
.acard .plist .row .fm{display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  flex:1 1 100%;padding-left:14px;margin-top:-6px;}
@media (min-width:640px){
  .acard .plist .row .fm{flex:0 0 auto;padding-left:0;margin-top:0;}
}
.acard .plist .row .src{white-space:normal;}

/* «Почему так»: усе обґрунтування в одному згорнутому місці */
details.whybox{margin-top:12px;border-top:1px dashed var(--line);}
details.whybox > summary{list-style:none;display:flex;align-items:center;gap:8px;
  min-height:44px;color:var(--cy2);font-size:14px;font-weight:700;cursor:pointer;}
details.whybox > summary::-webkit-details-marker{display:none;}
details.whybox > summary::before{content:"›";display:inline-block;transition:transform .15s;font-size:17px;}
details.whybox[open] > summary::before{transform:rotate(90deg);}
.whybody{padding-bottom:4px;min-width:0;}
.whysec{margin-top:12px;}
.whysec .wh{font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:2px;}

/* відповідь моделі: інша рамка і мітка, щоб її не сплутати з відповіддю бази */
.mcard{border-style:dashed;border-color:var(--amber);}
.mcard.quiet{border-color:var(--line);}
.badge.mb{color:var(--amber);background:transparent;border:1px solid currentColor;
  text-transform:none;letter-spacing:0;font-size:12px;}
.mcard .mtext{color:var(--ink);font-size:15.5px;line-height:1.5;white-space:pre-wrap;}
.mcard .mwait{color:var(--muted);}
.mcard .mhint{margin-top:8px;}
.mcard .chip{min-height:44px;}
/* Доказ простими словами: перший розділ «Почему так» (answer.js proofBlock) */
.proof .proofsteps{margin:4px 0 2px;padding-left:20px;font-size:14px;line-height:1.45;}
.proof .proofsteps li{margin:2px 0;}
.proof .proofsteps .vb{margin-left:4px;vertical-align:1px;}
.proof .proofc{font-size:14px;font-weight:600;margin:4px 0 6px;}
.proof .prooftext{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12.5px;margin:6px 0 0;
  padding:8px;border-radius:10px;border:1px solid var(--line);}

/* ---------------------------------------------------------- редизайн 26.09
   Людське речення великим, під ним дрібний сірий рядок доказу, дії одним
   рядом іконок. Назви понять у рядку доказу це кнопки у картку поняття. */
.acard .lead{font-size:19px;line-height:1.4;font-weight:700;letter-spacing:-.01em;}
.acard .asub{margin-top:6px;font-size:15px;line-height:1.5;color:var(--ink2);}
.acard .lead.long{font-size:16px;font-weight:500;line-height:1.55;letter-spacing:0;}
.acard .abul{margin:6px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:3px;}
.acard .abul li{font-size:15px;line-height:1.45;}
.proofline .pl-src{color:var(--muted);}
.acard .unk-note{display:block;margin-top:6px;font-size:13px;color:var(--muted);}
.proofline{display:flex;flex-wrap:wrap;align-items:center;column-gap:6px;row-gap:0;
  margin-top:6px;font-size:13px;color:var(--muted);line-height:1.35;}
.proofline .pl-path{display:inline-flex;flex-wrap:wrap;align-items:center;column-gap:4px;}
.proofline .pl-arr,.proofline .pl-dot{color:var(--faint);}
.proofline .srcbtn,.proofline a.srclink{min-height:32px;padding:0 2px;font-size:13px;}
.proofline .srcnote{display:none;}
/* назва поняття: виглядає як текст із пунктиром, торкається як кнопка */
.cl{display:inline;background:none;border:0;padding:6px 0;margin:0;font:inherit;color:inherit;
  cursor:pointer;text-decoration:underline dotted;text-decoration-color:var(--faint);
  text-underline-offset:3px;border-radius:4px;}
.cl:active{color:var(--cy2);}
.proofline .cl{color:var(--ink2);}
.asub .cl{padding:1px 0;vertical-align:baseline;}
/* ряд дій */
.actrow{display:flex;align-items:center;flex-wrap:wrap;gap:2px;margin:8px -8px -6px;position:relative;}
.ibtn{flex:0 0 auto;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:12px;color:var(--muted);background:none;border:0;cursor:pointer;position:relative;}
.ibtn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;}
.ibtn:active{background:var(--chip-bg);color:var(--cy2);}
@media (hover:hover){.ibtn:hover{background:var(--chip-bg);color:var(--ink);}}
.ibtn.on{color:var(--cy2);}
.ilabel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.actrow .voicectl{margin-left:6px;}
/* меню «⋯» відкривається над рядом дій від його початку: так воно не
   виходить за правий край навіть на найвужчому телефоні */
.morewrap{display:inline-flex;}
.moremenu{position:absolute;left:4px;bottom:48px;z-index:6;min-width:230px;max-width:calc(100% - 8px);
  display:flex;flex-direction:column;padding:6px;border-radius:14px;
  background:var(--raise);border:1px solid var(--line);box-shadow:var(--shadow);}
.moremenu[hidden]{display:none;}
.moremenu .chip,.moremenu .mitem{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;
  border:0;border-radius:10px;background:none;color:var(--ink);font-size:15px;text-align:left;
  padding:0 12px;white-space:nowrap;cursor:pointer;max-width:none;}
.moremenu .chip:active,.moremenu .mitem:active{background:var(--chip-bg);}
@media (hover:hover){.moremenu .chip:hover,.moremenu .mitem:hover{background:var(--chip-bg);}}
.moremenu .mitem svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;color:var(--muted);flex:0 0 auto;}
.acard .foot{display:none;}
/* «Почему так» тихіше: це доказ, а не друга відповідь */
details.whybox{margin-top:10px;}
details.whybox > summary{font-size:13.5px;min-height:40px;}

/* види поняття під довідкою: до трьох кнопок мовою відповіді */
.acard .akinds{margin:10px 0 2px;}
.acard .chip.k{color:var(--cy2);border-color:rgba(63,214,240,.28);}
/* кроки доказу і джерела у «Чому так» */
.acard .whybody ul.proofsteps{margin:4px 0 0;padding-left:18px;font-size:13.5px;line-height:1.5;color:var(--ink2);}
.acard .whybody ul.proofsteps li{margin:2px 0;overflow-wrap:anywhere;}