/* BIG Launcher: one disclosure component for every FAQ and expandable list (2026-11-10).
   Look: chevron in a 36 px chip on the inline-end side; on open the chip fills, the chevron turns
   with a light settle and the answer slides open (Chromium: interpolate-size) and fades in
   (every engine with ::details-content). Native <details>: works without JS, find-in-page opens
   answers, footer.php faq_expand analytics unchanged.
   Loaded last by site/layout/head.php (and linked from /apk/ and /fix-call-screen-off/), so the
   (1,1,1) selector list below supersedes the older per-page FAQ rules in help.css (.hp-faq,
   .hp-video-category), mobile-polish.css (home #faq), app-microsite.css (.faq) and pricing.php
   (.pricing-faq) without editing those page templates. Blinker (/blinker/) has its own copy in
   its site.css (source repo acegraphx/blikacka web/src/site.css). */

:root{
  --acc-radius:16px;
  --acc-bg:#fff;
  --acc-line:#e2e8f0;
  --acc-line-hi:#bfdbfe;
  --acc-ink:#0f172a;
  --acc-muted:#475569;
  --acc-chip:#eff6ff;
  --acc-chip-hi:#dbeafe;
  --acc-chip-ink:#2563eb;
  --acc-chip-on:#2563eb;
  --acc-chip-on-ink:#fff;
  --acc-ring:rgba(37,99,235,.42);
  --acc-open-shadow:0 16px 32px -24px rgba(15,23,42,.5);
  --acc-ease:cubic-bezier(.2,.8,.2,1);
  --acc-spring:cubic-bezier(.34,1.32,.64,1);
}

/* Lists: one 12 px rhythm. */
.bl-acc,
.hp-faq,
.page-home #faq .divide-y,
.bl-app-microsite .faq{display:grid;gap:12px}
.space-y-4:has(> details.pricing-faq){display:grid;gap:12px}

/* Item card. */
:is(.bl-acc > details,.page-home #faq details,.hp-faq > details,.hp-video-category details,details.pricing-faq,.bl-app-microsite .faq > details){
  margin:0;padding:0;
  background:var(--acc-bg);
  border:1px solid var(--acc-line);
  border-radius:var(--acc-radius);
  box-shadow:none;
  overflow:visible;
  interpolate-size:allow-keywords;
  transition:border-color .2s ease,box-shadow .26s ease;
}
:is(.bl-acc > details,.page-home #faq details,.hp-faq > details,.hp-video-category details,details.pricing-faq,.bl-app-microsite .faq > details)[open]{
  border-color:var(--acc-line-hi);
  box-shadow:var(--acc-open-shadow);
}

/* Whole row is the control. */
:is(.bl-acc > details,.page-home #faq details,.hp-faq > details,.hp-video-category details,details.pricing-faq,.bl-app-microsite .faq > details) > summary{
  position:relative;display:block;list-style:none;cursor:pointer;
  min-height:64px;margin:0;
  padding-block:19px;padding-inline:20px 72px;
  border:0;border-radius:calc(var(--acc-radius) - 1px);
  background:transparent;
  color:var(--acc-ink);
  font-size:18px;font-weight:700;line-height:1.4;letter-spacing:normal;text-align:start;
  overflow-wrap:break-word;
  -webkit-tap-highlight-color:transparent;
}
:is(.bl-acc > details,.page-home #faq details,.hp-faq > details,.hp-video-category details,details.pricing-faq,.bl-app-microsite .faq > details) > summary::-webkit-details-marker{display:none}

/* Older indicators replaced by the chip. */
.page-home #faq summary > span.text-primary,
:is(.hp-faq > details,.hp-video-category details) > summary svg,
details.pricing-faq > summary > .pricing-faq-icon{display:none !important}

/* Chip (::before) and chevron (::after). */
:is(.bl-acc > details,.page-home #faq details,.hp-faq > details,.hp-video-category details,details.pricing-faq,.bl-app-microsite .faq > details) > summary::before,
:is(.bl-acc > details,.page-home #faq details,.hp-faq > details,.hp-video-category details,details.pricing-faq,.bl-app-microsite .faq > details) > summary::after{
  content:"";position:absolute;top:50%;inset-inline-start:auto;inset-inline-end:16px;
  box-sizing:border-box;width:36px;height:36px;margin:-18px 0 0;padding:0;
  border:0;border-radius:50%;transform:none;
}
:is(.bl-acc > details,.page-home #faq details,.hp-faq > details,.hp-video-category details,details.pricing-faq,.bl-app-microsite .faq > details) > summary::before{
  background:var(--acc-chip);
  transition:background-color .2s ease,scale .14s ease;
}
:is(.bl-acc > details,.page-home #faq details,.hp-faq > details,.hp-video-category details,details.pricing-faq,.bl-app-microsite .faq > details) > summary::after{
  background:var(--acc-chip-ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/18px 18px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/18px 18px no-repeat;
  transition:rotate .42s var(--acc-spring),background-color .2s ease;
}
:is(.bl-acc > details,.page-home #faq details,.hp-faq > details,.hp-video-category details,details.pricing-faq,.bl-app-microsite .faq > details)[open] > summary::before{background:var(--acc-chip-on)}
:is(.bl-acc > details,.page-home #faq details,.hp-faq > details,.hp-video-category details,details.pricing-faq,.bl-app-microsite .faq > details)[open] > summary::after{background:var(--acc-chip-on-ink);rotate:180deg}

@media (hover:hover){
  :is(.bl-acc > details,.page-home #faq details,.hp-faq > details,.hp-video-category details,details.pricing-faq,.bl-app-microsite .faq > details):not([open]):hover{border-color:var(--acc-line-hi);box-shadow:none}
  :is(.bl-acc > details,.page-home #faq details,.hp-faq > details,.hp-video-category details,details.pricing-faq,.bl-app-microsite .faq > details):not([open]) > summary:hover::before{background:var(--acc-chip-hi)}
}
:is(.bl-acc > details,.page-home #faq details,.hp-faq > details,.hp-video-category details,details.pricing-faq,.bl-app-microsite .faq > details) > summary:active::before{scale:.9}

/* Keyboard focus: ring around the whole card where :has() exists, inset ring otherwise. */
:is(.bl-acc > details,.page-home #faq details,.hp-faq > details,.hp-video-category details,details.pricing-faq,.bl-app-microsite .faq > details) > summary:focus-visible{outline:3px solid var(--acc-ring);outline-offset:-3px}
@supports selector(:has(*)){
  :is(.bl-acc > details,.page-home #faq details,.hp-faq > details,.hp-video-category details,details.pricing-faq,.bl-app-microsite .faq > details):has(> summary:focus-visible){outline:3px solid var(--acc-ring);outline-offset:2px}
  :is(.bl-acc > details,.page-home #faq details,.hp-faq > details,.hp-video-category details,details.pricing-faq,.bl-app-microsite .faq > details) > summary:focus-visible{outline:none}
}

/* Answer: slides open and fades in; on close it fades and folds back. */
:is(.bl-acc > details,.page-home #faq details,.hp-faq > details,.hp-video-category details,details.pricing-faq,.bl-app-microsite .faq > details)::details-content{
  block-size:0;overflow-y:clip;opacity:0;translate:0 -6px;
  transition:block-size .32s var(--acc-ease),opacity .22s ease,translate .32s var(--acc-ease),content-visibility .32s allow-discrete;
}
:is(.bl-acc > details,.page-home #faq details,.hp-faq > details,.hp-video-category details,details.pricing-faq,.bl-app-microsite .faq > details)[open]::details-content{block-size:auto;opacity:1;translate:0 0}
:is(.bl-acc > details,.page-home #faq details,.hp-faq > details,.hp-video-category details,details.pricing-faq,.bl-app-microsite .faq > details) > :not(summary){
  margin:0;padding:0 20px 20px;
  border:0;background:transparent;
  color:var(--acc-muted);line-height:1.65;max-width:none;
}

/* Help video categories: title + count pill, list rows keep their own padding. */
:is(.bl-acc > details,.page-home #faq details,.hp-faq > details,.hp-video-category details,details.pricing-faq,.bl-app-microsite .faq > details) > summary:has(> h2){display:flex;align-items:center;gap:12px}
.hp-video-category details > summary > h2{flex:1 1 auto;min-width:0;margin:0;color:inherit;font-size:18px;font-weight:700;line-height:1.4}
.hp-video-category details > summary > .hp-category-count{flex:none;margin-inline-start:auto;padding:3px 10px;border-radius:999px;background:#f1f5f9;color:#475569;font-size:14px;font-weight:600;line-height:1.4}
:is(.bl-acc > details,.page-home #faq details,.hp-faq > details,.hp-video-category details,details.pricing-faq,.bl-app-microsite .faq > details) > .hp-category-body{padding:0 12px 12px;color:inherit}

/* Pricing: keep the plan-limit boxes inside the first answer. */
:is(.bl-acc > details,.page-home #faq details,.hp-faq > details,.hp-video-category details,details.pricing-faq,.bl-app-microsite .faq > details) > .pricing-faq-answer p:first-child{margin-top:0}

/* App microsites (BIG Remote Help): same component in the microsite palette. */
.bl-app-microsite .faq{
  --acc-line:var(--line,#e6dfd3);--acc-line-hi:#c9d9ee;--acc-ink:var(--ink,#14171c);--acc-muted:var(--muted,#4b5260);
  --acc-chip:var(--tint,#eef4fb);--acc-chip-hi:#dde9f7;--acc-chip-ink:var(--blue,#1565c0);--acc-chip-on:var(--blue,#1565c0);
  --acc-ring:rgba(21,101,192,.42);
}

/* Dropdown disclosures: same chevron motion; the manual language list folds open like an answer. */
.hp-manual-langs,.bl-mf-langs{interpolate-size:allow-keywords}
.hp-manual-langs > summary svg:last-child,.bl-mf-langs > summary svg:last-child{transition:transform .42s var(--acc-spring)}
.hp-manual-langs::details-content,.bl-mf-langs::details-content{
  block-size:0;overflow-y:clip;opacity:0;
  transition:block-size .32s var(--acc-ease),opacity .22s ease,content-visibility .32s allow-discrete;
}
.hp-manual-langs[open]::details-content,.bl-mf-langs[open]::details-content{block-size:auto;opacity:1}
html .pc-country-chevron{transition:transform .42s var(--acc-spring)}
html .pc-country-menu{transition:opacity .18s ease,translate .22s var(--acc-ease)}
@starting-style{html .pc-country-menu{opacity:0;translate:0 -6px}}

@media (max-width:520px){
  :is(.bl-acc > details,.page-home #faq details,.hp-faq > details,.hp-video-category details,details.pricing-faq,.bl-app-microsite .faq > details) > summary{min-height:60px;padding-block:16px;padding-inline:16px 58px}
  :is(.bl-acc > details,.page-home #faq details,.hp-faq > details,.hp-video-category details,details.pricing-faq,.bl-app-microsite .faq > details) > summary::before,
  :is(.bl-acc > details,.page-home #faq details,.hp-faq > details,.hp-video-category details,details.pricing-faq,.bl-app-microsite .faq > details) > summary::after{inset-inline-end:12px;width:34px;height:34px;margin-top:-17px}
  :is(.bl-acc > details,.page-home #faq details,.hp-faq > details,.hp-video-category details,details.pricing-faq,.bl-app-microsite .faq > details) > :not(summary){padding:0 16px 18px}
  :is(.bl-acc > details,.page-home #faq details,.hp-faq > details,.hp-video-category details,details.pricing-faq,.bl-app-microsite .faq > details) > .hp-category-body{padding:0 8px 8px}
}

@media (prefers-reduced-motion:reduce){
  :is(.bl-acc > details,.page-home #faq details,.hp-faq > details,.hp-video-category details,details.pricing-faq,.bl-app-microsite .faq > details),
  :is(.bl-acc > details,.page-home #faq details,.hp-faq > details,.hp-video-category details,details.pricing-faq,.bl-app-microsite .faq > details) > summary::before,
  :is(.bl-acc > details,.page-home #faq details,.hp-faq > details,.hp-video-category details,details.pricing-faq,.bl-app-microsite .faq > details) > summary::after,
  :is(.bl-acc > details,.page-home #faq details,.hp-faq > details,.hp-video-category details,details.pricing-faq,.bl-app-microsite .faq > details)::details-content,
  .hp-manual-langs::details-content,.bl-mf-langs::details-content,
  .hp-manual-langs > summary svg,.bl-mf-langs > summary svg,html .pc-country-chevron,html .pc-country-menu{transition:none !important}
}

@media (forced-colors:active){
  :is(.bl-acc > details,.page-home #faq details,.hp-faq > details,.hp-video-category details,details.pricing-faq,.bl-app-microsite .faq > details) > summary::before{forced-color-adjust:none;background:Canvas;border:1px solid CanvasText}
  :is(.bl-acc > details,.page-home #faq details,.hp-faq > details,.hp-video-category details,details.pricing-faq,.bl-app-microsite .faq > details) > summary::after{forced-color-adjust:none;background:CanvasText}
}