/* faq-info.css — Frequently Asked Questions (/Faq), the reader's view.
   Only what this page introduces; .gp-split-*, .gp-card-*, .info-notice and .error-panel are global. */

.faq-info-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

/* Left panel rows. THE FONT IS STATED TWICE ON PURPOSE: a <button> inherits neither the page's
   family nor its size, so `font: inherit` fixes the typeface and the explicit size stops it
   resolving to body's 1rem, a quarter larger than every other panel in the portal (UI/Layout.md).
   No transparent left border — .gp-split-left-row draws its accent with an inset box-shadow, which
   takes no layout space. */
/* .faq-info-row { */
/* [2026-10-02] The Search results row shares the topic rows' metrics — it is a row of the same list,
   but not a topic, so it cannot carry .faq-info-row (faq-info.js collects that class). */
.faq-info-row,
.faq-info-search-row {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    font-size: 0.781rem;
    padding: 0.438rem 0.875rem 0.438rem 1.625rem;
    border: none;
    border-bottom: 1px solid var(--line-soft);
    background: none;
    color: inherit;
    cursor: pointer;
}

.faq-info-row:last-child {
    border-bottom: none;
}

/* The display: block above outranks the UA [hidden] rule, so the row needs its own — the trap the
   panel rule below describes. */
.faq-info-search-row[hidden] {
    display: none;
}

/* THE PANEL NEEDS ITS OWN [hidden] RULE. The attribute hides through the USER-AGENT stylesheet's
   [hidden] { display: none }, and any AUTHOR display declaration outranks it. This is the fourth
   time that trap has been hit in this project (.nav-notif-badge, .gp-notice-dismissible, the Team
   Info tabs) — the panel is display: block today and would still be safe, but stating the rule is
   what stops a later `display:` on this class silently un-hiding every topic at once. */
.faq-info-panel[hidden] {
    display: none;
}

/* One question-and-answer block. Separated by a rule rather than a card each — a topic is read
   top to bottom, and a card per question would break it into unrelated boxes. */
.faq-info-pair + .faq-info-pair {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line-soft);
}

/* The question is tinted blue to separate it from its answer at a glance.
   var(--info) (#7aaeff) is the palette's LIGHT blue — the one the portal already uses for blue text
   (.gp-kv-label's label colour, .signups-col-pending). NOT var(--accent) (#2b5fc4): that is the
   saturated accent meant for borders, fills and glows, and as text on a dark card it is too dark to
   read. Referenced as the token rather than the hex, which .gp-kv-label hardcodes. */
.faq-info-question {
    font-size: 0.938rem;
    font-weight: 600;
    color: var(--info);
    margin: 0 0 0.5rem;
}

/* The answer's own formatting comes from rich-text.css, which styles the ql- classes
   DeltaRenderer emits. Nothing here restates it. */
/* NO font-size here — .gp-richtext owns it now (rich-text.css, the type standard). This carried
   0.813rem, which is why the FAQ answer read smaller than the same content on a blog post or a team
   document. Colour is still the page's to set. */
.faq-info-answer {
    color: var(--ink-2);
}

/* ---- Search (2026-10-02), top of the FAQ card, above its heading --------------------------------
   The values of .loot-item-search (loot-distribution.css), the other search box at the top of a
   left column. Pinned like the header below it: never squashed when the column shrinks. */
.faq-info-search {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}

/* The documented search box (.gc-search-group, site.css) is inline-flex and sized to its input; in
   this narrow column it spans the column instead — UI/Controls.md's caller-side stretch, copied from
   loot-distribution.css. */
.faq-info-search .gc-search-group { display: flex; width: 100%; }
.faq-info-search .gc-search-group input[type="text"] { flex: 1; min-width: 0; }

/* THE OPENED QUESTION'S HIGHLIGHT (2026-10-02). A search result scrolls its question into view and
   marks it with a tint that fades out on its own, in the question's own blue (var(--info), #7aaeff,
   as the rgba the palette uses for tints). faq-info.js adds the class and removes it on animationend.
   NO SHARED FORM EXISTS for "scroll to a target and mark it" — the only fades in the portal are the
   Saved flash (a word, not a block) and .data-row-attention (a permanent status tint, not for
   selection) — so this is page-local as the first occurrence (Pages/FaqInfo/Decisions.md D12).
   The negative inline margin plus matching padding lets the tint reach past the text without moving
   it (the recruitment.css hover-reach shape). */
.faq-info-pair.is-search-target {
    margin-inline: -0.5rem;
    padding-inline: 0.5rem;
    border-radius: var(--r-sm);
    animation: faq-info-search-target 2s ease-out forwards;
}

@keyframes faq-info-search-target {
    0%   { background: rgba(122, 174, 255, 0.16); }
    60%  { background: rgba(122, 174, 255, 0.10); }
    100% { background: transparent; }
}

/* Without motion the mark is a still tint, removed by the script's timeout — the animation never
   runs, so animationend never fires. */
@media (prefers-reduced-motion: reduce) {
    .faq-info-pair.is-search-target {
        animation: none;
        background: rgba(122, 174, 255, 0.12);
    }
}