/* ==========================================================================
   FAQ — THE REPAIRS               /doctor/gads-faq-fix-t4/fix-base.css
   --------------------------------------------------------------------------
   THIS FILE CHANGES NO MARKUP AND NO STRUCTURE.

   The section stays exactly what it is: the heading, the FAQ title plate,
   the bracketed box, the fixed-height inner scroll, one card per question,
   the Q. and A. squares, the +/- mark, the 0fr->1fr open. Every element in
   gads-pkg-faq/gfaq.css is still there, in the same place, in the same
   order, driven by gads-pkg-faq/gfaq.js, which is not touched.

   What is here is the set of faults that are faults in any design — the
   things that are measurably wrong rather than a matter of taste. The five
   looks (v1.css … v5.css) sit on top and only re-declare its --fx-* tokens.

     1 · the tokens the five looks set
     2 · the tap colour — the "strange colour on click"
     3 · the title plate's ground and its notch
     4 · the box — a symmetrical inside, and an honest bottom edge
     5 · the scroll — a bar, a lead, and no chaining
     6 · the card and its states
     7 · the Q. / A. column
     8 · the +/- mark, drawn instead of typed
     9 · the answer's setting
    10 · phones
   ========================================================================== */


/* ── 1 · tokens ───────────────────────────────────────────────────────────
   Declared on #gfaq, not :root — an unprefixed shared token collides
   exactly like a class name, and all five files set the same names. */
#gfaq{
  --fx-frame:        var(--line-b);      /* the bracket's colour      */
  --fx-frame-w:      10px;               /* and its weight            */
  --fx-frame-r:      25px;               /* its rounded corners       */
  --fx-frame-l:      0px;                /* the open side, unless a
                                            look chooses to close it  */
  --fx-box-bg:       transparent;        /* what is inside the bracket */
  --fx-behind:       var(--ground);      /* == what the plate paints, and
                                            what the bottom fade fades to */
  --fx-box-shadow:   none;

  --fx-pad:          20px;               /* the inside gutter         */
  --fx-pad-top:      30px;               /* air under the title plate */
  --fx-scroll-h:     400px;
  --fx-fade:         30px;

  --fx-card-bg:      var(--paper);
  --fx-card-line:    var(--line);
  --fx-card-r:       12px;
  --fx-card-pad:     12px;
  --fx-card-gap:     10px;
  --fx-card-shadow:  none;

  --fx-open-bg:      var(--paper);
  --fx-open-line:    var(--ds-edge);
  --fx-open-shadow:  var(--shadow-s);

  --fx-badge-bg:     #E7ECF3;
  --fx-badge-ink:    var(--navy);
  --fx-badge-line:   transparent;
  --fx-badge-r:      6px;
  --fx-open-badge-bg:  #E7ECF3;
  --fx-open-badge-ink: var(--accent);

  --fx-ease: cubic-bezier(.4,0,.2,1);
}


/* ── 2 · the tap colour ───────────────────────────────────────────────────
   The one the brief calls "an unintended browser/default/system effect",
   and it is exactly that. A <button> with `background:none` still carries
   the UA's tap highlight, its own button chrome, and text selection.
   Nothing in gfaq.css turns any of them off, so on a phone the whole row
   flashes grey under a finger and a double-tap selects the question.
   Four properties — and then the section draws its own press instead. */
#gfaq .gfaq-q{
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
#gfaq .gfaq-q:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}


/* ── 3 · the title plate ──────────────────────────────────────────────────
   gfaq.css gives the plate `background: var(--paper)` and writes down why:
   "Its background must equal the section ground or the notch fills in."
   That was right; the ground moved out from under it. site/shelf.css makes
   #gfaq a shelf at --ground #F4F7FC, so the plate no longer cuts a notch
   out of the bracket — it prints a WHITE RECTANGLE on a grey section, which
   is the "label treatment near the FAQ heading is not integrated" fault,
   and at the bottom of the list it is a white rectangle sitting over a row
   scrolling underneath it. One value: the plate paints whatever is behind
   the bracket, whatever a look decides that is.

   The left inset goes with it. The bracket has no left side, so the plate's
   16px left padding was anchored to nothing — the word floated 16px inside
   the lane while the heading above it and the cards below it start at the
   lane. Flush left, and the three line up. */
#gfaq .gfaq-title{
  background: var(--fx-behind);
  padding-left: 0;
  padding-right: 18px;
}


/* ── 4 · the box ──────────────────────────────────────────────────────────
   THE INSIDE IS NOT SYMMETRICAL. Measured on the live page at 1440:
   `padding: 20px 20px 20px 0` with `border-left: 0` puts the cards' left
   edge at x=160 — the box's own outer edge — while their right edge stops
   30px short of it. The cards lean against the open side of the bracket and
   stand 30px off the closed one. The fix is a left gutter: every card is
   now --fx-pad from the frame's inner surface on all three closed sides and
   --fx-pad from the box edge on the open one, so the block of cards sits
   centred in the bracket's opening. */
#gfaq .gfaq-box{
  background: var(--fx-box-bg);
  border-style: solid;
  border-color: var(--fx-frame);
  border-width: var(--fx-frame-w);
  border-left-width: var(--fx-frame-l);
  border-top-right-radius: var(--fx-frame-r);
  border-bottom-right-radius: var(--fx-frame-r);
  padding: var(--fx-pad-top) var(--fx-pad) var(--fx-pad) var(--fx-pad);
  box-shadow: var(--fx-box-shadow);
}

/* THE BOTTOM EDGE. 28 questions are 2,184px of content in a 400px window,
   so the list always continues past the bottom — and it currently ends in a
   hard cut through the middle of a card, which is the loudest "broken" cue
   in the section. A fade says "there is more" without moving anything and
   without a row ever being sliced. It is drawn on the box rather than as a
   mask on the scroller, so a visible scrollbar is not faded out with it. */
#gfaq .gfaq-box::after{
  content: "";
  position: absolute;
  left: var(--fx-pad);
  right: var(--fx-pad);
  bottom: var(--fx-pad);
  height: var(--fx-fade);
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--fx-behind));
}


/* ── 5 · the scroll ───────────────────────────────────────────────────────
   The window stays — it is what the section is. It gets the three things a
   400px window over 2,184px of content has to have and does not. */
#gfaq .gfaq-scroll{
  height: var(--fx-scroll-h);
  /* a wheel over the list stops at the end of the list instead of carrying
     on down the page — the thing that makes a nested scroller feel broken */
  overscroll-behavior: contain;
  /* fix.js brings an opened card to the top of the window; this is the lead
     it leaves above it */
  scroll-padding-block: 10px;
  scroll-behavior: smooth;
  /* THE BAR. gfaq.css hides it — `scrollbar-width:none` and a
     ::-webkit-scrollbar{display:none} — so nothing on screen says the list
     moves at all. site/uifinish.css already carries the site's own bar (a
     cool neutral thumb, never brand blue, 3:1 on all three legal grounds);
     these two rules simply stop hiding it. A look that would rather not
     show one sets --fx-bar: none. */
  scrollbar-width: var(--fx-bar, thin);
}
#gfaq .gfaq-scroll::-webkit-scrollbar{
  display: var(--fx-bar-wk, block);
  width: var(--sb-size, 10px);
  background: transparent;
}


/* ── 6 · the card ─────────────────────────────────────────────────────────
   Same box, same radius, same rhythm. What it gains is a ground that can be
   seen and the two states it never had: nothing in gfaq.css responds to a
   pointer at all, and the only sign a card was open was the blue A square
   in part 7.

   THE GROUND. --mist #F6F8FC cards on the section's --ground #F4F7FC are
   two steps apart on a 255 scale, which is why the cards read as smudges
   rather than as objects. #pricing, the section directly above this one,
   puts white cards on that same ground; so does every card on the page. */
#gfaq .gfaq-item{
  margin: var(--fx-card-gap) 0;
  padding: var(--fx-card-pad);
  background: var(--fx-card-bg);
  border-color: var(--fx-card-line);
  border-radius: var(--fx-card-r);
  box-shadow: var(--fx-card-shadow);
  transition: background .2s var(--fx-ease), border-color .2s var(--fx-ease),
              box-shadow .2s var(--fx-ease);
}
#gfaq .gfaq-item:hover{ border-color: var(--ds-edge); }
#gfaq .gfaq-t{ transition: color .18s var(--fx-ease); }
#gfaq .gfaq-q:hover .gfaq-t{ color: var(--accent); }
#gfaq .gfaq-q:active .gfaq-t{ opacity: .7; }

#gfaq .gfaq-item.is-open{
  background: var(--fx-open-bg);
  border-color: var(--fx-open-line);
  box-shadow: var(--fx-open-shadow);
}
#gfaq .gfaq-item.is-open .gfaq-t{ color: var(--accent); }


/* ── 7 · the Q. / A. column ───────────────────────────────────────────────
   The pair is the section's own idea and a good one: the Q square stretches
   to the row so it always meets the A square below it, and together they
   make one unbroken column down the left of an open card. It fails on one
   thing — the A square is filled --accent-soft and ringed
   rgba(26,115,232,.28), so opening a card produces a blue block that
   appears nowhere else in the section and reads as a browser's own selected
   state. The blue leaves the block and goes into the letter: same square,
   same size, same column, the accent still marks the answer. */
#gfaq .gfaq-qb,
#gfaq .gfaq-ab{
  background: var(--fx-badge-bg);
  color: var(--fx-badge-ink);
  box-shadow: inset 0 0 0 1px var(--fx-badge-line);
  transition: background .2s var(--fx-ease), color .2s var(--fx-ease),
              box-shadow .2s var(--fx-ease);
}
#gfaq .gfaq-item.is-open .gfaq-qb{
  background: var(--fx-open-badge-bg);
  color: var(--fx-open-badge-ink);
}
#gfaq .gfaq-ab{
  background: var(--fx-open-badge-bg);
  color: var(--fx-open-badge-ink);
  box-shadow: inset 0 0 0 1px var(--fx-badge-line);
  font-size: 12px;
  font-weight: 700;
}
/* the pair reads as one column — the Q square rounds its top corners, the A
   square rounds its bottom ones, and the join between them stays square. A
   closed card has no A square under it, so its Q square is a whole shape. */
#gfaq .gfaq-item.is-open .gfaq-qb{ border-radius: var(--fx-badge-r) var(--fx-badge-r) 0 0; }
#gfaq .gfaq-item.is-open .gfaq-ab{ border-radius: 0 0 var(--fx-badge-r) var(--fx-badge-r); }
#gfaq .gfaq-item:not(.is-open) .gfaq-qb{ border-radius: var(--fx-badge-r); }


/* ── 8 · the mark ─────────────────────────────────────────────────────────
   gfaq.css types the mark: content "+", then content "\2212" when open. The
   two glyphs do not share an optical centre in the system font — the minus
   sits about 2px high and a little narrow against the plus — so the mark
   moves every time a card is opened or shut, in a column of 28 of them.
   Drawn as two bars it has one centre, and only the upright leaves. Same
   size, same place, same behaviour. */
#gfaq .gfaq-m{
  width: 22px;
  height: 22px;
  right: 7px;
  font-size: 0;
  color: var(--pk-muted);
  transition: color .2s var(--fx-ease);
}
#gfaq .gfaq-m::before,
#gfaq .gfaq-item.is-open .gfaq-m::before,
#gfaq .gfaq-m::after{
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 13px; height: 1.8px;
  margin: -.9px 0 0 -6.5px;
  border-radius: 2px;
  background: currentColor;
}
#gfaq .gfaq-m::after{
  transform: rotate(90deg);
  transition: transform .28s cubic-bezier(.22,1,.36,1);
}
#gfaq .gfaq-item.is-open .gfaq-m::after{ transform: rotate(90deg) scaleX(0); }
#gfaq .gfaq-q:hover .gfaq-m{ color: var(--ink-2); }
#gfaq .gfaq-item.is-open .gfaq-m{ color: var(--accent); }


/* ── 9 · the answer ───────────────────────────────────────────────────────
   13px is a step below the smallest body size on the site and it is
   carrying the longest prose in the section — Q.17 runs to three paragraphs
   and two lists. 14px at 1.65 is the setting the rest of the page reads at. */
#gfaq .gfaq-body{
  font-size: 14px;
  line-height: 1.65;
  padding-top: 6px;
}
#gfaq .gfaq-body p{ margin: 0 0 8px; }
#gfaq .gfaq-body li{ margin-bottom: 6px; }
#gfaq .gfaq-body ul{ padding-left: 20px; }


/* ── 10 · phones ──────────────────────────────────────────────────────────
   The same repairs at 640px, where gfaq.css restates its own values. Its
   phone rule is `padding-right: 6px; border-left: 0`, so the cards run out
   of the frame on the left and stop 13px short on the right; and the window
   is still 400px, in which a phone sees Q.1's answer, two questions and
   half of a third. The window grows with the screen instead. */
@media (max-width: 640px){
  #gfaq{
    --fx-frame-w: 7px;
    --fx-pad: 12px;
    --fx-pad-top: 24px;
    --fx-card-pad: 11px;
    --fx-card-gap: 9px;
    --fx-scroll-h: clamp(380px, 62vh, 560px);
    --fx-fade: 26px;
  }
  #gfaq .gfaq-title{ padding-left: 0; padding-right: 14px; }
  #gfaq .gfaq-box{
    padding: var(--fx-pad-top) var(--fx-pad) var(--fx-pad) var(--fx-pad);
  }
  #gfaq .gfaq-body{ font-size: 14px; }
  #gfaq .gfaq-m{ right: 5px; }
}