/* ─── Card shell ──────────────────────────────────────────────────── */
.fq-wrap{
  font-family:var(--fb,'DM Sans',system-ui,sans-serif);
  border-radius:var(--r2,20px);
  background:var(--card,#fff);
  border:1.5px solid var(--card-bd,#D4DDE9);
  box-shadow:0 4px 28px rgba(15,25,35,.09);
  overflow:hidden;
  transition:box-shadow .3s var(--ease,cubic-bezier(.22,1,.36,1)),
             border-color .3s var(--ease,cubic-bezier(.22,1,.36,1));
}
.fq-wrap:hover{
  box-shadow:0 10px 44px rgba(15,25,35,.14);
  border-color:var(--accent,#00C8FF);
}

/* ─── Header ──────────────────────────────────────────────────────── */
.fq-hdr{
  display:flex; align-items:center; justify-content:space-between;
  gap:.7rem; padding:1.15rem 1.5rem 1rem;
  background:var(--card-tint,#F4F7FB);
  border-bottom:1.5px solid var(--card-bd,#D4DDE9);
  position:relative; overflow:hidden;
}
/* shimmering top line */
.fq-hdr::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--accent,#00C8FF),var(--gold,#FFE17A),var(--accent,#00C8FF));
  background-size:200% 100%;
  animation:barShimmer 4s linear infinite;
}
.fq-hdr-left{display:flex;align-items:center;gap:.85rem;flex:1;min-width:0;}

/* role glyph square */
.fq-glyph{
  width:46px; height:46px; flex-shrink:0;
  border-radius:var(--r1,14px);
  background:linear-gradient(145deg,var(--head,#0A2E5E),var(--tag,#0055BB));
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; line-height:1;
  box-shadow:0 3px 14px rgba(0,0,0,.18);
  transition:transform .25s var(--ease,cubic-bezier(.22,1,.36,1));
}
.fq-wrap:hover .fq-glyph{transform:scale(1.06);}

.fq-hdr-text{flex:1;min-width:0;}
.fq-hdr-title{
  font-family:var(--fh,'Syne',Georgia,serif);
  font-weight:900; font-size:1rem; color:var(--head,#0A2E5E);
  margin:0 0 .18rem; line-height:1.15;
}
.fq-hdr-sub{
  font-size:.7rem; font-weight:600; color:var(--muted,#6B7E92); margin:0;
  display:flex; align-items:center; gap:.35rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fq-hdr-dot{
  width:4px; height:4px; border-radius:50%;
  background:var(--accent,#00C8FF); flex-shrink:0;
}

/* count badge */
.fq-badge{
  flex-shrink:0;
  background:linear-gradient(135deg,var(--head,#0A2E5E),var(--tag,#0055BB));
  border-radius:12px; padding:.32rem .8rem;
  display:flex; flex-direction:column; align-items:center; line-height:1;
  box-shadow:0 3px 10px rgba(0,0,0,.14);
}
.fq-badge-n{font-family:var(--fh,serif);font-weight:900;font-size:.92rem;color:var(--gold,#FFE17A);}
.fq-badge-l{font-size:.5rem;font-weight:900;text-transform:uppercase;letter-spacing:.07em;color:rgba(255,255,255,.4);margin-top:.1rem;}

/* ─── Filter pills ────────────────────────────────────────────────── */
.fq-filters{
  display:flex; flex-wrap:wrap; gap:.35rem;
  padding:.72rem 1.5rem;
  border-bottom:1px solid var(--border,rgba(15,25,35,.07));
  background:var(--card,#fff);
}
.fq-pill{
  background:transparent; border:1.5px solid var(--card-bd,#D4DDE9);
  border-radius:20px; padding:.2rem .7rem;
  font-family:var(--fb,'DM Sans',system-ui,sans-serif);
  font-size:.66rem; font-weight:800; color:var(--ink3,#3D5468);
  cursor:pointer;
  transition:all .18s var(--ease,cubic-bezier(.22,1,.36,1));
  -webkit-tap-highlight-color:transparent; white-space:nowrap;
}
.fq-pill:hover{border-color:var(--accent,#00C8FF);color:var(--head,#0A2E5E);}
.fq-pill.on{
  background:linear-gradient(135deg,var(--head,#0A2E5E),var(--tag,#0055BB));
  color:var(--gold,#FFE17A); border-color:transparent;
  box-shadow:0 2px 8px rgba(0,0,0,.14);
}

/* ─── Accordion list ──────────────────────────────────────────────── */
.fq-list{background:var(--card,#fff);}

.fq-item{
  border-bottom:1px solid var(--border,rgba(15,25,35,.07));
  position:relative;
}
.fq-item:last-child{border-bottom:none;}

/* left accent line slides in when open */
.fq-item::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(to bottom,var(--accent,#00C8FF),transparent);
  opacity:0; transition:opacity .25s; border-radius:0 2px 2px 0;
  pointer-events:none;
}
.fq-item.open::before{opacity:1;}

/* ─── Trigger ─────────────────────────────────────────────────────── */
.fq-trig{
  width:100%; background:transparent; border:none; cursor:pointer;
  padding:.95rem 1.25rem .95rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between;
  gap:.6rem; text-align:left;
  transition:background .15s;
  -webkit-tap-highlight-color:transparent;
}
.fq-trig:hover,.fq-item.open .fq-trig{background:var(--card-tint,#F4F7FB);}
.fq-trig:focus-visible{outline:2.5px solid var(--accent,#00C8FF);outline-offset:-2px;}

.fq-trig-l{display:flex;align-items:center;gap:.65rem;flex:1;min-width:0;}

/* icon box */
.fq-ic{
  flex-shrink:0; width:28px; height:28px;
  border-radius:var(--rx,6px);
  background:var(--card-tint,#F4F7FB);
  border:1.5px solid var(--card-bd,#D4DDE9);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink3,#3D5468); margin-top:.05rem;
  transition:background .2s, border-color .2s, color .2s;
}
.fq-item.open .fq-ic,
.fq-trig:hover .fq-ic{
  background:linear-gradient(135deg,var(--head,#0A2E5E),var(--tag,#0055BB));
  border-color:transparent; color:var(--gold,#FFE17A);
}

/* question text */
.fq-q{
  font-family:var(--fh,'Syne',Georgia,serif);
  font-weight:700; font-size:.9rem;
  color:var(--ink,#0F1923); line-height:1.42;
  word-break:break-word; overflow-wrap:anywhere;
  transition:color .18s;
}
.fq-item.open .fq-q,.fq-trig:hover .fq-q{color:var(--head,#0A2E5E);}

.fq-trig-r{display:flex;align-items:center;gap:.42rem;flex-shrink:0;}

/* category chip */
.fq-cat{
  padding:.13rem .52rem; border-radius:20px;
  background:var(--card-tint,#F4F7FB); border:1px solid var(--card-bd,#D4DDE9);
  font-size:.6rem; font-weight:900; text-transform:uppercase;
  letter-spacing:.06em; color:var(--tag,#0055BB); white-space:nowrap;
  transition:background .18s, color .18s, border-color .18s;
}
.fq-item.open .fq-cat,.fq-trig:hover .fq-cat{
  background:var(--head,#0A2E5E); color:var(--gold,#FFE17A); border-color:transparent;
}

/* chevron */
.fq-chev{
  display:flex; color:var(--muted,#6B7E92);
  transition:transform .32s var(--ease,cubic-bezier(.22,1,.36,1)), color .18s;
}
.fq-item.open .fq-chev{transform:rotate(180deg);color:var(--head,#0A2E5E);}
.fq-trig:hover .fq-chev{color:var(--head,#0A2E5E);}

/* ─── Panel — CSS grid height (no JS measurement needed) ─────────── */
.fq-panel{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .34s var(--ease,cubic-bezier(.22,1,.36,1));
}
.fq-item.open .fq-panel{grid-template-rows:1fr;}
.fq-panel-in{overflow:hidden;}

.fq-ans{
  padding:.12rem 1.5rem 1.2rem calc(1.5rem + 28px + .65rem);
  background:var(--card-tint,#F4F7FB);
  border-top:1px solid rgba(0,0,0,.05);
}
.fq-ans p{
  margin:0; font-size:.85rem; font-weight:500;
  color:var(--ink2,#253545); line-height:1.78;
}

/* ─── Footer strip ────────────────────────────────────────────────── */
.fq-foot{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:.5rem;
  padding:.8rem 1.5rem;
  background:var(--card-tint,#F4F7FB);
  border-top:1.5px solid var(--card-bd,#D4DDE9);
}
.fq-foot-l{display:flex;align-items:center;gap:.42rem;flex:1;min-width:0;flex-wrap:wrap;}
.fq-live-dot{
  width:7px; height:7px; border-radius:50%; flex-shrink:0;
  background:var(--ok,#10B981); box-shadow:0 0 6px var(--ok,#10B981);
  animation:blink 2s ease-in-out infinite;
}
.fq-foot-txt{font-size:.68rem;color:var(--muted,#6B7E92);line-height:1.5;}
.fq-foot-txt strong{color:var(--ink2,#253545);}
.fq-ft-sep{opacity:.35;margin:0 .15rem;}

.fq-role-chip{
  flex-shrink:0; display:inline-flex; align-items:center; gap:.3rem;
  padding:.22rem .65rem; border-radius:var(--rx,6px);
  border:1px solid var(--card-bd,#D4DDE9); background:var(--card,#fff);
  font-size:.67rem; font-weight:800; color:var(--tag,#0055BB); white-space:nowrap;
}

/* ─── Responsive ──────────────────────────────────────────────────── */
@media(max-width:479px){
  .fq-hdr       {padding:.85rem 1.1rem;}
  .fq-badge     {display:none;}
  .fq-hdr-sub   {display:none;}
  .fq-glyph     {width:38px;height:38px;font-size:1.1rem;}
  .fq-hdr-title {font-size:.88rem;}
  .fq-filters   {padding:.55rem 1.1rem;}
  .fq-pill      {font-size:.62rem;padding:.18rem .58rem;}
  .fq-trig      {padding:.78rem 1rem;}
  .fq-ic        {width:24px;height:24px;}
  .fq-q         {font-size:.8rem;}
  .fq-cat       {display:none;}
  .fq-ans       {padding:.1rem 1rem .95rem 1rem;}
  .fq-ans p     {font-size:.78rem;}
  .fq-foot      {padding:.62rem 1rem;}
  .fq-role-chip {display:none;}
}
@media(max-width:767px){.fq-badge{display:none;}}
@media(min-width:768px){
  .fq-hdr       {padding:1.3rem 1.75rem 1.05rem;}
  .fq-glyph     {width:50px;height:50px;font-size:1.55rem;}
  .fq-hdr-title {font-size:1.05rem;}
  .fq-filters   {padding:.8rem 1.75rem;}
  .fq-trig      {padding:1rem 1.4rem 1rem 1.75rem;}
  .fq-ic        {width:30px;height:30px;}
  .fq-q         {font-size:.92rem;}
  .fq-ans       {padding:.12rem 1.75rem 1.3rem calc(1.75rem + 30px + .65rem);}
  .fq-foot      {padding:.85rem 1.75rem;}
}
@media(prefers-reduced-motion:reduce){
  .fq-panel,.fq-chev,.fq-wrap{transition:none;}
  .fq-live-dot{animation:none;}
  .fq-hdr::before{animation:none;}
}