/* vozmozhnosti3.html «Возможности» — свои куски страницы. Общее — css/i3.css (как на index3: список с плюсиками .i3-faq-list)
   + css/i3-pages.css (внутренние страницы; там же карта девяти групп .i3p-tiles и строка «Ваша привычная среда» .i3p-integ).
   - вступление: текст слева, справа — карта групп (ссылки на группы ниже, тон — по вкладке);
   - вкладки «Продажи / Клиенты / Управление» (js/vozmozhnosti.js, в цвете — data-color): значок пером + номер + подпись, без
     рамок и подложек; у выбранной — подпись цветом вкладки и тонкая линия того же цвета под ней (холст .tab-cv рисует
     vozmozhnosti.js), значок ярче; на широком экране вкладки слева и липкие, на узком — строкой над группами;
   - группы — список с плюсиками на подложке пером в тон вкладки (data-panel), пункты — с зелёными галочками пером. */

/* ---------- вступление ---------- */
.i3p-voz-top h1 .r { display: block; }

/* ---------- вкладки и группы ---------- */
.i3p-caps { padding-top: 72px; }
.i3p-caps .facts { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 40px; align-items: start; }
#tab-sales { --tab: #2C64D8; } #tab-clients { --tab: #15803D; } #tab-management { --tab: #6D5BD0; }
.fact-tabs { display: grid; gap: 6px; position: sticky; top: 100px; }
.fact-tabs button { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 14px;
  padding: 10px 8px 12px 4px; font: 600 21px/1.2 var(--i3-f); color: var(--i3-text); text-align: left; background: none; border: 0; border-radius: 14px;
  cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fact-tabs .ft-ic { grid-row: 1 / 3; width: 48px; height: 48px; opacity: .55; transition: opacity .2s, transform .25s ease-out; }
.fact-tabs .ft-ic canvas { width: 100%; height: 100%; }
.fact-tabs .ft-n { font-size: 13px; letter-spacing: .06em; color: var(--i3-muted); align-self: end; }
.fact-tabs .ft-t { position: relative; justify-self: start; padding-bottom: 6px; }
.fact-tabs canvas.tab-cv { position: absolute; left: -2px; bottom: -4px; width: calc(100% + 4px); height: 10px; pointer-events: none; }
.fact-tabs button:hover { color: var(--i3-navy); }
.fact-tabs button:hover .ft-ic { opacity: 1; transform: translateY(-2px); }
.fact-tabs button[aria-selected="true"] { color: var(--tab); }
.fact-tabs button[aria-selected="true"] .ft-n { color: var(--tab); }
.fact-tabs button[aria-selected="true"] .ft-ic { opacity: 1; }
.fact-tabs button:focus-visible { outline: 3px solid rgba(59, 123, 246, .45); outline-offset: 2px; }
#factList [role="tabpanel"][hidden] { display: none !important; }
#factList [role="tabpanel"] { scroll-margin-top: 100px; }
#factList details { scroll-margin-top: 100px; }
.i3v-list { padding: 6px 28px; }
.i3v-list.t-blue details + details { border-top-color: #DCE6FA; }
.i3v-list.t-green details + details { border-top-color: #CDEBD8; }
.i3v-list.t-lilac details + details { border-top-color: #E2DCFB; }
.i3v-list summary { display: flex; align-items: center; gap: 14px; font-size: 19px; }
.i3v-list summary canvas.fact-ic { width: 34px; height: 34px; flex: none; }
.i3v-list details[open] > summary, .i3v-list details:target > summary { color: var(--i3-navy); }
.i3v-list ul { list-style: none; margin: -4px 0 0; padding: 0 0 22px 48px; display: grid; gap: 8px; }
.i3v-list li { position: relative; padding-left: 32px; font-size: 16.5px; line-height: 1.5; color: var(--i3-text); }
.i3v-list li canvas { position: absolute; left: 0; top: 1px; width: 22px; height: 22px; }
.i3v-list li b { color: var(--i3-navy); font-weight: 600; }

/* ---------- адаптив ---------- */
@media (max-width: 1100px) {
  .i3p-caps .facts { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .fact-tabs { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  /* по ссылке #panel-… вкладки остаются видны над группами (шапка ≈ 120 px + строка вкладок) */
  #factList [role="tabpanel"] { scroll-margin-top: 230px; }
  #factList details { scroll-margin-top: 140px; }
}
@media (max-width: 760px) {
  .i3p-caps { padding-top: 48px; }
  .fact-tabs button { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; justify-items: start; row-gap: 2px; padding: 6px 4px 10px;
    font-size: 17px; }
  .fact-tabs .ft-ic { grid-row: auto; width: 42px; height: 42px; margin-bottom: 4px; }
  .fact-tabs .ft-n { font-size: 12px; }
  .i3v-list { padding: 4px 18px; }
  .i3v-list summary { font-size: 17.5px; gap: 12px; }
  .i3v-list summary canvas.fact-ic { width: 30px; height: 30px; }
  .i3v-list ul { padding-left: 0; }
  .i3v-list li { font-size: 16px; }
}
@media (max-width: 360px) {
  .fact-tabs button { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) { .fact-tabs .ft-ic { transition: none; } .fact-tabs button:hover .ft-ic { transform: none; } }