/* /faq: help-centre layout. Theme tokens from app.css. */
.faqx { padding-top: 24px; padding-bottom: 56px; }
.faqx [hidden] { display: none !important; }
.faqx-hero { padding: 36px 32px; border-radius: 6px; background: linear-gradient(135deg, hsl(var(--primary) / .09), hsl(var(--primary) / .02) 60%, transparent); border: 1px solid hsl(var(--primary) / .15); }
.faqx-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.faqx-hero > div { max-width: 680px; }
.faqx-pop { display: grid; gap: 2px; padding: 16px 18px; border-radius: 6px; background: hsl(var(--background) / .85); border: 1px solid var(--gray-200); }
.faqx-pop b { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--muted-foreground)); margin-bottom: 6px; }
.faqx-pop a { padding: 7px 0; color: inherit; text-decoration: none; font-weight: 500; font-size: 14px; border-top: 1px solid var(--gray-200); display: flex; justify-content: space-between; gap: 10px; }
.faqx-pop a::after { content: "→"; color: hsl(var(--primary)); }
.faqx-pop a:hover { color: hsl(var(--primary)); }
.faqx-kicker { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--primary)); }
.faqx-hero .title { margin: 0 0 8px; }
.faqx-hero .lead { margin: 0 0 6px; }
.faqx-search { width: 100%; height: 50px; margin-top: 16px; padding: 0 18px; font-size: 16px; border-radius: 3px; border: 1px solid hsl(var(--field-border, var(--input))); background: hsl(var(--background)); color: inherit; box-shadow: 0 1px 2px rgb(0 0 0 / .04); }
.faqx-search:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 0; border-color: transparent; }

.faqx-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 36px; margin-top: 32px; align-items: start; }
.faqx-nav { position: sticky; top: 88px; display: grid; gap: 2px; }
.faqx-nav > a { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: 3px; color: inherit; text-decoration: none; font-weight: 500; font-size: 14px; }
.faqx-nav > a b { font-weight: 500; font-size: 12px; color: hsl(var(--muted-foreground)); }
.faqx-nav > a:hover { background: var(--gray-50); }
.faqx-nav > a.on { background: hsl(var(--primary) / .1); color: hsl(var(--primary)); }
.faqx-help { margin-top: 18px; padding: 16px; border-radius: 3px; background: var(--gray-50); border: 1px solid var(--gray-200); display: grid; gap: 8px; justify-items: start; }
.faqx-help p { margin: 0; font-size: 13px; color: hsl(var(--muted-foreground)); }
.faqx-dict { font-size: 13px; font-weight: 600; color: hsl(var(--primary)); text-decoration: none; }

.faqx-group { scroll-margin-top: 96px; }
.faqx-group + .faqx-group { margin-top: 28px; }
.faqx-group h2 { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--muted-foreground)); margin: 0 0 10px; }
.faqx-q { scroll-margin-top: 96px; border: 1px solid var(--gray-200); border-radius: 3px; background: hsl(var(--background)); transition: border-color .2s, box-shadow .2s; }
.faqx-q + .faqx-q { margin-top: 8px; }
.faqx-q:hover { border-color: hsl(var(--primary) / .35); }
.faqx-q[open] { border-color: hsl(var(--primary) / .45); box-shadow: 0 6px 20px rgb(0 0 0 / .05); }
.faqx-q.target { box-shadow: 0 0 0 3px hsl(var(--primary) / .2); }
.faqx-q summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; cursor: pointer; font-weight: 600; font-size: 16px; }
.faqx-q summary::-webkit-details-marker { display: none; }
.faqx-q summary i { flex: none; position: relative; width: 26px; height: 26px; border-radius: 50%; background: var(--gray-50); border: 1px solid var(--gray-200); transition: background .2s, transform .25s; }
.faqx-q summary i::before, .faqx-q summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.faqx-q summary i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .25s; }
.faqx-q[open] summary i { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.faqx-q[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.faqx-a { position: relative; padding: 0 18px 16px; color: hsl(var(--foreground) / .85); }
.faqx-a p { margin: 0 0 10px; }
.faqx-a p:last-of-type { margin-bottom: 0; }
.faqx-link { position: absolute; right: 18px; bottom: 14px; font-size: 13px; color: hsl(var(--muted-foreground)); text-decoration: none; opacity: 0; transition: opacity .2s; }
.faqx-q[open]:hover .faqx-link { opacity: 1; }
.faqx-q.hit summary span { background: linear-gradient(transparent 60%, hsl(var(--primary) / .18) 60%); }

@media (max-width: 860px) {
  .faqx-hero { padding: 24px 18px; grid-template-columns: 1fr; }
  .faqx-body { grid-template-columns: 1fr; gap: 16px; }
  .faqx-nav { position: static; display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
  .faqx-nav > a { flex: none; border: 1px solid var(--gray-200); border-radius: 3px; padding: 6px 12px; gap: 8px; }
  .faqx-help { display: none; }
  .faqx-q summary { font-size: 15px; padding: 14px; }
}