/* ── FAQ sidebar: topic accordion ───────────────────────────────────── */
.faq-topics { display:grid; gap:4px }

.faq-topic-hd {
  width:100%; display:flex; align-items:center; gap:7px;
  padding:8px 10px; border-radius:9px; border:none;
  background:none; color:var(--fg); cursor:pointer;
  font-size:12px; font-weight:800; text-align:left;
  transition:background .14s;
}
.faq-topic-hd:hover { background:var(--panel-high) }
.faq-topic.open > .faq-topic-hd,
.faq-topic.has-active > .faq-topic-hd { color:var(--fg) }

.faq-topic-chevron { font-size:9px; color:var(--fg-mute); flex-shrink:0; width:10px }
.faq-topic-name    { flex:1 }
.faq-topic-cnt {
  font-size:9px; font-weight:900; color:var(--fg-mute);
  background:var(--panel-sunken); border:1px solid var(--line);
  border-radius:5px; padding:1px 5px;
}

.faq-topic-articles { padding:2px 0 6px 26px; display:grid; gap:2px }

.faq-art-link {
  width:100%; padding:6px 10px; border-radius:8px;
  background:none; border:1px solid transparent;
  color:var(--fg-dim); font-size:11.5px; font-weight:600;
  text-align:left; cursor:pointer; line-height:1.35;
  transition:background .12s, border-color .12s, color .12s;
}
.faq-art-link:hover {
  background:var(--panel-high); border-color:var(--line); color:var(--fg);
}
.faq-art-link.is-current {
  background:color-mix(in srgb,var(--brand) 10%,transparent);
  border-color:color-mix(in srgb,var(--brand) 28%,transparent);
  color:var(--brand);
}
.faq-art-empty { font-size:11px; color:var(--fg-mute); padding:4px 10px }

.faq-new-btn {
  width:100%; height:34px; border-radius:9px;
  background:color-mix(in srgb,var(--brand) 10%,transparent);
  border:1px dashed color-mix(in srgb,var(--brand) 32%,transparent);
  color:var(--brand); font-size:12px; font-weight:800;
  cursor:pointer; transition:.15s;
}
.faq-new-btn:hover { background:color-mix(in srgb,var(--brand) 16%,transparent) }

/* ── FAQ main area ──────────────────────────────────────────────────── */
.faq-article-wrap { display:grid; gap:10px; padding:16px }

.faq-article-icons { display:flex; gap:4px; margin-left:auto; flex-shrink:0 }

.faq-icon-btn {
  width:28px; height:28px; border-radius:8px; border:1px solid var(--line);
  background:var(--panel-high); color:var(--fg-mute);
  display:grid; place-items:center; cursor:pointer; transition:.14s;
  flex-shrink:0;
}
.faq-icon-btn:hover { color:var(--fg); border-color:var(--line-strong); background:var(--panel-edge,var(--panel-high)) }
.faq-icon-btn.danger:hover { color:var(--down); border-color:var(--down-border,var(--down)); background:var(--down-bg,transparent) }

.faq-article-card {
  background:var(--panel); border:1px solid var(--line);
  border-radius:16px; padding:20px;
  box-shadow:var(--shadow-sm,0 1px 4px rgba(0,0,0,.12));
}

.faq-article-meta-row {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-bottom:12px;
}
.faq-article-date { font-size:11px; color:var(--fg-mute); margin-left:auto }

.faq-article-title-row {
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; margin-bottom:16px;
}
.faq-article-title {
  font-size:20px; font-weight:900; letter-spacing:-.03em;
  line-height:1.2; margin:0; color:var(--fg);
}

.faq-article-body {
  border:1px solid var(--line); background:var(--panel-sunken);
  border-radius:12px; padding:16px;
  color:var(--fg); font-size:13px; line-height:1.65;
}
.faq-article-body p { margin:0 0 10px }
.faq-article-body p:last-child { margin-bottom:0 }

/* ── Edit form ──────────────────────────────────────────────────────── */
.faq-edit-head {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; margin-bottom:16px;
}
.faq-eyebrow {
  font-size:10px; font-weight:900; color:var(--brand);
  letter-spacing:.13em; text-transform:uppercase; margin-bottom:6px;
}
.faq-edit-meta { display:flex; gap:12px; margin-bottom:0 }
.faq-edit-meta .field-group { min-width:140px }
.faq-edit-textarea { min-height:160px; resize:vertical; line-height:1.55 }

.faq-empty-state {
  display:grid; place-items:center; min-height:200px;
  color:var(--fg-mute); font-size:13px; padding:24px;
}

body:not(.is-demo-admin) .faq-admin-only { display:none!important }

@media(max-width:900px) {
  .faq-edit-meta { flex-direction:column }
}