/* ==========================================================================
   FAQ · ONE CARD, TWO PARTS         /doctor/gads-faq-final-r2/card.css
   --------------------------------------------------------------------------
   Replaces boxes.css, which split the item into two standalone rectangles.
   That was the wrong reading. An opened item is ONE card, with a question
   header at the top and an answer body under it, and the two are told apart
   by a rule inside the card rather than by being two cards.

       ┌─────────────────────────────────────────────┐
       │  Q.1   Will I get instant leads after…    −  │   the header
       ├─────────────────────────────────────────────┤   one internal rule
       │  A     Leads typically start within 3–7…     │   the body
       └─────────────────────────────────────────────┘   one outer box

   Nothing else moves. Not a colour — the card's ground and its border are
   still the ones site/paper.css sets — not the heading and its rule, not the
   type, not the content, not the +/- mark or what it does, not the
   accordion, not the section.

   HOW IT IS BUILT, and why this way. The card's padding moves OFF the card
   and ONTO its two parts. That is the whole trick: with the padding on the
   card, an internal rule could only ever be an inset line floating inside
   it; with the padding on the parts, the rule spans the card edge to edge
   and reads as the seam between a header and a body. The two parts then
   carry one identical padding, so the question and the answer sit on the
   same left edge, the same right edge and the same measure.
   ========================================================================== */

#gfaq{
  --fx-card-r:   6px;    /* low and square-ish, one value for the card   */
  --fx-badge-r:  4px;    /* the two squares                              */
  --fx-part-pad: 12px;   /* header and body, identical                   */
  --fx-mark-in:  12px;   /* == the padding, so three edges read as one   */
  --fx-rail:     44px;   /* padding + the 22px mark + its air            */
  --fx-badge-h:  40px;
  --fx-card-gap: 16px;   /* one item to the next                         */
  /* the seam. One notch lighter than the card's own edge, so the outer
     shape stays the firmer line and the division inside it stays quiet. */
  --fx-seam:     var(--line);
}


/* ── the card ─────────────────────────────────────────────────────────────
   Its ground, its border colour and its lift are untouched — fix-base.css
   and site/paper.css still set them. Only the padding leaves, so the seam
   below can reach both edges, and the radius comes down one step. */
#gfaq .gfaq-item{
  padding: 0;
  border-radius: var(--fx-card-r);
  margin: var(--fx-card-gap) 0;
}
#gfaq .gfaq-item:first-child{ margin-top: 0; }
#gfaq .gfaq-item:last-child { margin-bottom: 0; }


/* ── the two parts, one padding ───────────────────────────────────────────
   Written together so they cannot be given different insets by a later
   edit. Neither is a box: no ground, no border of its own, no radius. */
#gfaq .gfaq-q,
#gfaq .gfaq-ai-in{
  box-sizing: border-box;
  width: 100%;
  background: none;
  border: 0;
  border-radius: 0;
  padding: var(--fx-part-pad) var(--fx-rail) var(--fx-part-pad) var(--fx-part-pad);
}

/* THE SEAM — the one internal division, edge to edge because the card has
   no padding left to hold it off. It exists only while the item is open,
   because .gfaq-ai-in is only ever rendered then. */
#gfaq .gfaq-ai-in{
  border-top: 1px solid var(--fx-seam);
  margin-top: 0;
}


/* ── the two squares, one shape ───────────────────────────────────────────
   gfaq.css stretches the Q square to its row so that it would meet the A
   square below; the seam is what joins the two parts now, and a Q square
   that grows to 55px on a two-line question beside an A square of 40px is
   the geometry the brief keeps calling awkward. Both are the same square,
   at the top of their own part, and each part's first line of text is
   optically centred on it. */
#gfaq .gfaq-q{ align-items: flex-start; }
#gfaq .gfaq-qb{
  height: var(--fx-badge-h);
  min-height: var(--fx-badge-h);
  align-self: flex-start;
}
/* fix-base splits the pair's radius — top corners on the Q, bottom on the A
   — so the two would read as one rail. They no longer touch, so each is a
   whole shape. Written at (1,2,0) to settle fix-base's own open-state rule. */
#gfaq .gfaq-item .gfaq-qb,
#gfaq .gfaq-item .gfaq-ab,
#gfaq .gfaq-item.is-open .gfaq-qb,
#gfaq .gfaq-item.is-open .gfaq-ab{ border-radius: var(--fx-badge-r); }

/* the question's first line, on the Q square's centre */
#gfaq .gfaq-t{ align-self: flex-start; padding: 9px 0; }
/* the answer's first line, on the A square's centre — measured in refine.css */
#gfaq .gfaq-body{ padding-top: 8px; }

/* the mark is inset by the header's own padding */
#gfaq .gfaq-m{ right: var(--fx-mark-in); }


/* ── phones ──────────────────────────────────────────────────────────────
   gfaq.css's own phone values for the squares and the gap are 36px and 9px;
   the parts follow those rather than the desktop set. */
@media (max-width: 640px){
  #gfaq{
    --fx-part-pad: 11px;
    --fx-mark-in:  10px;
    --fx-rail:     40px;
    --fx-badge-h:  36px;
    --fx-card-gap: 13px;
  }
  #gfaq .gfaq-t{ padding: 8px 0; }
  #gfaq .gfaq-body{ padding-top: 6px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   MICRO-POLISH · 2026-09-10
   Two things found by looking at the corners at 4x and by measuring the
   mark at 390px. Neither changes the design, the colours or the type.
   ══════════════════════════════════════════════════════════════════════════ */


/* ── 1 · the frame's two right corners, made the same corner ──────────────
   The bracket's top-right is drawn by the heading's rule and its
   bottom-right by the box, and at 25px they cannot match: the rule is only
   --fx-frame-w tall, so a 25px radius clamps to the rule's own height and
   renders as a 10px quarter-round with a square inside, while the box below
   renders the full 25px outer with a 15px inner curve. Photographed at 4x
   they are plainly two different corners on one frame.

   A radius equal to the frame's own weight is the one value that makes them
   identical: the outer curve is a quarter-round of exactly that radius at
   both ends, and the inner corner is square at both ends, because
   `radius - borderWidth` is zero at both. Written as the token rather than
   as a number, so the phone's 7px frame gets a 7px corner without a second
   rule. It is also the corner the 6px cards inside it belong to. */
#gfaq{ --fx-frame-r: var(--fx-frame-w); }


/* ── 2 · the mark, anchored to the Q square ───────────────────────────────
   gfaq.css centres the mark on the whole header — `top: 50%` — which is
   right only while the question is one line. Measured at 390px, where every
   question wraps:

       Q.1–Q.4   header 77px   the mark sits 10px below the Q square's centre
       Q.5       header 97px   19px below

   so the marker column and the mark column disagree by a different amount
   on almost every row. The mark belongs to the question's first line, which
   is the line the Q square marks, so it is pinned to that square's centre
   instead — the header's own padding plus half the square. It then holds
   still whether the question runs to one line or three. */
#gfaq .gfaq-m{
  top: calc(var(--fx-part-pad) + var(--fx-badge-h) / 2);
}