/* ============================================================
   ALITHOS: FAQ page (search, topic chips, question cards).
   Loads after pages.css / guide.css. js/faq.js unhides the tools;
   without JS the page is a plain readable list of questions.
   ============================================================ */

.article-body [hidden], .fq-hero [hidden]{display:none!important}

/* keep the headline clear of the self-drawing floor plan (motion.css shows it at >=1100px) */
@media (min-width:1100px){ .fq-hero h1{max-width:540px} }

/* key figures: five cards laid out 3 + 2 (2 + 2 + 1 wide on phones) instead of leaving one orphan,
   each with a glowing top rule that draws in as the card reveals */
.article-body .key-figures{grid-template-columns:repeat(2,minmax(0,1fr))}
.article-body .key-figures .kf:last-child:nth-child(odd){grid-column:1 / -1}
@media (min-width:600px){
  .article-body .key-figures{grid-template-columns:repeat(6,minmax(0,1fr))}
  .article-body .key-figures .kf{grid-column:span 2}
  .article-body .key-figures .kf:nth-child(4):nth-last-child(2), .article-body .key-figures .kf:nth-child(5):last-child{grid-column:span 3}
}
.article-body .key-figures .kf{position:relative; overflow:hidden; border-radius:12px}
.article-body .key-figures .kf::before{content:""; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg, var(--teal), var(--teal-hi) 60%, var(--gold)); box-shadow:0 0 10px rgba(46,159,232,.6); transform-origin:left}
html.m-on .article-body .key-figures .kf.m-r::before{transform:scaleX(0); transition:transform 1.1s cubic-bezier(.5,0,.2,1) .3s}
html.m-on .article-body .key-figures .kf.m-in::before{transform:scaleX(1)}

/* ---------- hero search panel ---------- */
.fq-panel{position:relative; margin-top:34px; max-width:540px}
html.m-on .fq-panel{animation:fqRise .9s cubic-bezier(.2,.7,.2,1) .6s both}
@keyframes fqRise{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
.fq-k{display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--teal-hi); margin:0 0 10px}
.fq-field{position:relative; border-radius:14px; background:rgba(16,37,54,.72); box-shadow:inset 0 0 0 1px var(--line-d2), 0 18px 50px -20px rgba(0,0,0,.6); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:box-shadow .35s, background .35s}
.fq-field::after{content:""; position:absolute; left:14px; right:14px; bottom:0; height:2px; border-radius:2px; background:linear-gradient(90deg, transparent, var(--teal-hi), var(--gold), transparent); transform:scaleX(0); transition:transform .55s cubic-bezier(.2,.7,.2,1); pointer-events:none}
.fq-field:hover{box-shadow:inset 0 0 0 1px rgba(92,188,245,.45), 0 18px 50px -20px rgba(0,0,0,.6)}
.fq-field:focus-within{background:rgba(16,37,54,.92); box-shadow:inset 0 0 0 1px var(--teal-hi), 0 0 0 4px rgba(46,159,232,.16), 0 0 44px rgba(46,159,232,.28)}
.fq-field:focus-within::after{transform:scaleX(1)}
.fq-ico{position:absolute; left:17px; top:50%; width:22px; height:22px; margin-top:-11px; fill:none; stroke:var(--mist); stroke-width:2; stroke-linecap:round; pointer-events:none; transition:stroke .3s, transform .3s}
.fq-field:focus-within .fq-ico{stroke:var(--teal-hi); transform:scale(1.08)}
.fq-search input{display:block; width:100%; min-height:58px; margin:0; padding:0 56px 0 52px; border:0; border-radius:14px; background:transparent; color:var(--light); font-family:var(--body); font-size:1rem; line-height:1.3; -webkit-appearance:none; appearance:none}
.fq-search input:focus, .fq-search input:focus-visible{outline:none}
.fq-search input::placeholder{color:rgba(159,180,196,.7)}
.fq-search input::-webkit-search-cancel-button, .fq-search input::-webkit-search-decoration{-webkit-appearance:none; appearance:none}
.fq-kbd{position:absolute; right:16px; top:50%; transform:translateY(-50%); min-width:24px; height:24px; padding:0 6px; border-radius:6px; border:1px solid var(--line-d2); font:600 .72rem/22px var(--mono); color:var(--mist); text-align:center; pointer-events:none; transition:opacity .25s}
.fq-has-q .fq-kbd, .fq-field:focus-within .fq-kbd{opacity:0}
@media (hover:none){ .fq-kbd{display:none} }
.fq-clear{position:absolute; right:7px; top:50%; transform:translateY(-50%); width:44px; height:44px; border:0; border-radius:50%; background:transparent; color:var(--mist); font-size:1.5rem; line-height:1; cursor:pointer; transition:color .2s, background .2s}
.fq-clear:hover{color:var(--light); background:rgba(255,255,255,.07)}
.fq-clear:focus-visible{outline:2px solid var(--teal); outline-offset:-4px}

/* topic chips with a gliding active pill */
/* chips are built by faq.js; reserve their rows (two on wide screens, one swipeable row on phones) so nothing shifts */
.fq-chips{position:relative; display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0; padding:2px; min-height:100px; align-content:flex-start}
.fq-glide{position:absolute; left:0; top:0; z-index:0; border-radius:999px; pointer-events:none; background:linear-gradient(135deg,#1A55A8 0%, #2E9FE8 78%, #4FB4F2 100%); box-shadow:0 8px 24px rgba(27,95,180,.45), inset 0 1px 0 rgba(255,255,255,.28)}
.fq-glide.fq-ready{transition:transform .5s cubic-bezier(.2,.8,.2,1), width .5s cubic-bezier(.2,.8,.2,1), height .5s}
.fq-chip{position:relative; z-index:1; display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 16px; border:0; border-radius:999px; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px var(--line-d2); color:var(--mist); font:600 .86rem/1 var(--body); white-space:nowrap; cursor:pointer; transition:color .3s, background .3s, box-shadow .3s, transform .2s}
.fq-chip:hover{color:var(--light); box-shadow:inset 0 0 0 1px rgba(92,188,245,.6)}
.fq-chip:active{transform:scale(.97)}
.fq-chip[aria-pressed="true"]{color:#fff; background:transparent; box-shadow:none}
.fq-chip-c{font:600 .66rem/1 var(--mono); letter-spacing:.06em; padding:4px 6px; border-radius:6px; background:rgba(255,255,255,.07); color:inherit; opacity:.85}
.fq-chip[aria-pressed="true"] .fq-chip-c{background:rgba(6,18,29,.22)}
html.m-on .fq-chip{animation:fqRise .6s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--ci,0) * 45ms + .85s)}
.fq-status{margin:14px 0 0; min-height:1.4em; font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mist)}
@media (max-width:640px){
  .fq-panel{margin-top:28px}
  /* one swipeable row on phones; the row scrolls, never the page */
  .fq-chips{min-height:48px; flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; margin-left:-2px; margin-right:-2px; -webkit-mask-image:linear-gradient(90deg, #000 88%, transparent); mask-image:linear-gradient(90deg, #000 88%, transparent)}
  .fq-chips::-webkit-scrollbar{display:none}
  .fq-chip{flex:0 0 auto}
}

/* ---------- results bar ---------- */
.fq-bar{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 16px; margin:0 0 6px; padding:8px 8px 8px 18px; border-radius:14px; background:rgba(255,255,255,.88); box-shadow:inset 0 0 0 1px var(--line-l), 0 10px 30px -18px rgba(14,34,51,.35); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px)}
@media (min-width:720px){ .fq-bar{position:sticky; top:78px; z-index:15} }
.fq-bar-count{margin:0!important; font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--slate)!important}
.fq-bar-count b{display:inline-block; min-width:2ch; text-align:right; font-size:1rem; color:var(--teal-deep); font-variant-numeric:tabular-nums; transition:color .3s}
.fq-bar.fq-filtered .fq-bar-count b{color:var(--teal)}
.fq-bar-actions{display:flex; gap:8px; flex-wrap:wrap}
.fq-btn{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px; border:0; border-radius:999px; background:#fff; box-shadow:inset 0 0 0 1px rgba(14,34,51,.2); color:var(--ink); font:600 .86rem/1 var(--body); cursor:pointer; transition:box-shadow .25s, color .25s, background .25s, transform .2s}
.fq-btn:hover{box-shadow:inset 0 0 0 1px var(--teal), 0 8px 22px rgba(27,95,180,.16); color:var(--teal-deep)}
.fq-btn:active{transform:scale(.97)}
.fq-btn:disabled{opacity:.45; cursor:default; box-shadow:inset 0 0 0 1px rgba(14,34,51,.2); color:var(--ink)}
.fq-btn:focus-visible{outline:2px solid var(--teal); outline-offset:3px}
.fq-toggle-all::before{content:""; width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.fq-toggle-all.fq-open::before{transform:translateY(2px) rotate(-135deg)}
.fq-reset{color:var(--teal-deep)}

/* ---------- question cards ---------- */
.article-body .faq-inline{display:grid; gap:10px; margin:20px 0 8px}
.article-body .faq-inline details{position:relative; border:0; border-radius:14px; padding:0 20px; background:#fff; box-shadow:inset 0 0 0 1px var(--line-l); scroll-margin-top:150px; transition:box-shadow .35s, background .35s}
.article-body .faq-inline details::before{content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:0 3px 3px 0; background:linear-gradient(180deg, var(--teal-hi), var(--teal) 60%, var(--gold)); box-shadow:0 0 14px rgba(46,159,232,.75); transform:scaleY(0); transform-origin:top; transition:transform .5s cubic-bezier(.2,.7,.2,1); z-index:1}
.article-body .faq-inline details::after{content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(46,159,232,.09), transparent 60%); opacity:0; transition:opacity .3s; pointer-events:none}
.article-body .faq-inline details:hover{box-shadow:inset 0 0 0 1px rgba(46,159,232,.42), 0 12px 28px -18px rgba(27,95,180,.4)}
.article-body .faq-inline details:hover::after{opacity:1}
.article-body .faq-inline details[open]{background:linear-gradient(180deg, rgba(46,159,232,.06), #fff 70%); box-shadow:inset 0 0 0 1px rgba(46,159,232,.55), 0 0 0 4px rgba(46,159,232,.08), 0 22px 44px -20px rgba(27,95,180,.38)}
.article-body .faq-inline details[open]::before{transform:scaleY(1)}
.article-body .faq-inline details.fq-current{box-shadow:inset 0 0 0 1px rgba(46,159,232,.75), 0 0 0 4px rgba(46,159,232,.12), 0 0 34px rgba(46,159,232,.18), 0 22px 44px -20px rgba(27,95,180,.42)}
.article-body .faq-inline summary{position:relative; z-index:2; padding:18px 46px 18px 42px; min-height:44px; line-height:1.45; transition:color .25s}
.article-body .faq-inline summary[data-n]::before{content:attr(data-n); position:absolute; left:0; top:21px; font:600 .7rem/1.4 var(--mono); letter-spacing:.08em; color:var(--slate); transition:color .3s}
.article-body .faq-inline summary:not([data-n]){padding-left:0}
.article-body .faq-inline summary:hover, .article-body .faq-inline details[open] > summary{color:var(--teal-deep)}
.article-body .faq-inline details[open] > summary::before{color:var(--teal)}
.article-body .faq-inline summary::after, .article-body .faq-inline details[open] summary::after{
  content:""; position:absolute; right:0; top:50%; width:30px; height:30px; margin-top:-15px; border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--line-l); color:var(--teal-deep);
  background:linear-gradient(currentColor, currentColor) center/12px 2px no-repeat, linear-gradient(currentColor, currentColor) center/2px 12px no-repeat;
  transition:transform .45s cubic-bezier(.2,.7,.2,1), background-color .3s, box-shadow .3s, color .3s}
.article-body .faq-inline details[open] summary::after{transform:rotate(135deg); color:#fff; background-color:var(--teal); box-shadow:0 0 0 4px rgba(46,159,232,.15), 0 0 16px rgba(46,159,232,.5)}
.article-body .faq-inline summary:focus-visible{outline:2px solid var(--teal); outline-offset:2px; border-radius:8px}
.article-body .faq-inline details > p{position:relative; z-index:2; margin:0; padding:0 4px 20px 42px}
html.m-on .article-body .faq-inline details[open] > p{animation:fqAns .55s cubic-bezier(.2,.7,.2,1) both .08s}
@keyframes fqAns{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
@media (max-width:520px){
  .article-body .faq-inline details{padding:0 14px}
  .article-body .faq-inline summary{padding:16px 40px 16px 32px; font-size:1rem}
  .article-body .faq-inline summary[data-n]::before{top:19px; font-size:.64rem}
  .article-body .faq-inline details > p{padding:0 0 18px; font-size:1rem}
}

/* deep-link arrival pulse */
.article-body .faq-inline details.fq-flash{animation:fqFlash 2s ease-out}
@keyframes fqFlash{0%{box-shadow:inset 0 0 0 2px var(--teal-hi), 0 0 0 0 rgba(46,159,232,.45)} 40%{box-shadow:inset 0 0 0 2px var(--teal-hi), 0 0 0 14px rgba(46,159,232,0)} 100%{box-shadow:inset 0 0 0 1px rgba(46,159,232,.75), 0 0 0 4px rgba(46,159,232,.12)}}

/* search highlights + "match in answer" tag */
mark.fq-hl{color:inherit; padding:0 1px; border-radius:3px; background:linear-gradient(rgba(212,167,44,.42), rgba(212,167,44,.42)) left bottom / 100% 55% no-repeat}
html.m-on mark.fq-hl{animation:fqMark .5s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--hi,0) * 30ms)}
@keyframes fqMark{from{background-size:0% 55%} to{background-size:100% 55%}}
.fq-tag{display:inline-block; vertical-align:2px; margin-left:10px; padding:3px 8px; border-radius:999px; background:rgba(212,167,44,.14); color:#8A6A12; font:600 .6rem/1.3 var(--mono); letter-spacing:.12em; text-transform:uppercase; white-space:nowrap}

/* ---------- no results ---------- */
.fq-empty{margin:18px 0 30px; padding:40px 24px 34px; border-radius:18px; text-align:center; background:radial-gradient(ellipse at 50% 0%, rgba(46,159,232,.1), transparent 70%), #fff; box-shadow:inset 0 0 0 1px rgba(46,159,232,.35)}
.fq-empty-art{width:120px; height:80px; fill:none; stroke:var(--teal); stroke-width:1.6; stroke-linecap:round; filter:drop-shadow(0 0 6px rgba(46,159,232,.35))}
html.m-on .fq-empty.fq-draw .fq-empty-art path, html.m-on .fq-empty.fq-draw .fq-empty-art circle{stroke-dasharray:400; stroke-dashoffset:400; animation:fqDraw 1.4s cubic-bezier(.5,0,.2,1) forwards}
html.m-on .fq-empty.fq-draw .fq-empty-art :nth-child(2){animation-delay:.2s}
html.m-on .fq-empty.fq-draw .fq-empty-art :nth-child(3){animation-delay:.45s; stroke:var(--gold)}
html.m-on .fq-empty.fq-draw .fq-empty-art :nth-child(4){animation-delay:.6s; stroke:var(--gold)}
@keyframes fqDraw{to{stroke-dashoffset:0}}
.fq-empty-h{margin:14px 0 6px!important; font-size:1.3rem; font-weight:700; line-height:1.35; color:var(--ink)!important; overflow-wrap:anywhere}
.fq-empty p{margin-left:auto; margin-right:auto; max-width:46ch}
.fq-empty-ctas{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:18px}
.fq-empty .btn{color:#fff; text-decoration:none}
.fq-empty .btn.ghost{color:var(--ink); box-shadow:inset 0 0 0 1px rgba(14,34,51,.28); background:rgba(14,34,51,.03); -webkit-backdrop-filter:none; backdrop-filter:none}
.fq-empty .btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--teal), 0 12px 30px rgba(27,95,180,.18); background:rgba(46,159,232,.07)}
@media (max-width:520px){ .fq-empty-ctas .btn{width:100%} }

/* ---------- reduced motion: everything visible, nothing moves ---------- */
@media (prefers-reduced-motion: reduce){
  .fq-panel, .fq-chip, mark.fq-hl, .article-body .faq-inline details > p, .article-body .faq-inline details.fq-flash,
  .fq-empty-art path, .fq-empty-art circle{animation:none!important; opacity:1!important; transform:none!important; stroke-dashoffset:0!important}
  mark.fq-hl{background-size:100% 55%}
  html.m-on .article-body .key-figures .kf.m-r::before{transform:none; transition:none}
  .fq-glide, .fq-field, .fq-field::after, .fq-chip, .fq-btn, .article-body .faq-inline details, .article-body .faq-inline details::before,
  .article-body .faq-inline summary::after, .fq-toggle-all::before{transition:none!important}
}