/* ==========================================================================
   GOOGLE ADS FAQ · FINISH  (#gfaq only)            applied 2026-10-07
   --------------------------------------------------------------------------
   The owner's pick from the FAQ design lab (round 3, Option 6, "A clean
   bottom edge"). A thin layer ON TOP of the FAQ's own sheets — faq.css,
   heading.css, refinements.css and qa.css are unchanged and still load.
   The structure stays exactly as before: the grey frame open on the left,
   the bold FAQ word with the line after it, the card and box sizes and
   places, the phone layout and the window height.
   What it fixes:
     · the scrolling list starts just below the FAQ word, so nothing slides
       under it (11.8px desktop, 6.7px phones)
     · the open card has no drop shadow; its outline is closed all round
     · the +/− box sits as far in as the Q box (question text keeps its width)
     · long e-mail addresses wrap instead of being cut off on small phones
     · a phone swipe at the end of the list carries on down the page
     · soft edges: the bottom border never slices letters (last 3px solid,
       then a short fade); a short fade under the top line while scrolled
   Runtime: assets/shared/faq/finish.js (data-at, --sbw, the e-mail <wbr>).
   To undo: delete the finish.css <link> and the finish.js <script> in
   google-ads.html. Backup: /Users/vaibhav/d-backups/2026-10-07-gads-faq-option6/
   ========================================================================== */


/* ══ 1 · THE FIXES ══════════════════════════════════════════════════════════ */
html body #gfaq#gfaq{
  --ground: var(--sh-shelf, #F4F7FC);
  --m-lift: 0 0 #0000;          /* the open card's drop shadow — the heaviest part of the open state */
  --band: 0px;                  /* a clear strip inside the frame, top and bottom */
  /* how far the FAQ word reaches below the top line, into the window (11.8px desktop, 6.7px phones):
     nothing scrolls or fades under the word — the window's top edge never starts above this */
  --lab-hang: calc((var(--fx-h-box) - var(--fx-frame-w)) / 2);
  --band-top: max(var(--band), var(--lab-hang));
  --band-bot: var(--band);
  --open-ring: var(--m-ring-2);
  --sbw: 0px;                   /* finish.js writes the real scrollbar gutter */
}
/* the + / − box stands as far in from the card's right edge as the Q box does from its left */
html body #gfaq#gfaq .qa-q{ padding-right: var(--qa-pad); }
/* ...and the question text keeps live's width, so every question wraps exactly as it does today */
@media (min-width: 641px){ html body #gfaq#gfaq .qa-t{ margin-right: 2px; } }
/* long e-mail addresses wrap instead of being cut off at the card edge (phones break after "@") */
html body #gfaq#gfaq .qa-tx{ overflow-wrap: anywhere; }
@media (min-width: 420px){ html body #gfaq#gfaq .qa-tx wbr{ display: none; } }
/* a finger at the end of the list carries on down the page (a wheel still stops at the list end) */
@media (hover: none) and (pointer: coarse){ html body #gfaq#gfaq .gfaq-scroll{ overscroll-behavior-y: auto; } }

/* the window starts just below the FAQ word (and a clear strip, if --band is set): the frame stays
   the same size and the window keeps the same outer height */
html body #gfaq#gfaq .gfaq-box{ padding-top: var(--band-top); padding-bottom: var(--band-bot); }
html body #gfaq#gfaq .gfaq-scroll{
  height: calc(var(--fx-scroll-h) + var(--fx-pad-top) + var(--fx-pad) - var(--band-top) - var(--band-bot));
  padding-top: calc(var(--fx-pad-top) - var(--band-top));
  padding-bottom: max(0px, calc(var(--fx-pad) - var(--band-bot)));
}

/* the scroll cue: drawn only where the list continues (finish.js writes data-at) */
html body #gfaq#gfaq .gfaq-box::before, html body #gfaq#gfaq .gfaq-box::after{
  content: ""; display: block; position: absolute; z-index: 2; pointer-events: none;
  left: 0; right: var(--sbw); opacity: 0; transition: opacity .18s linear;
  width: auto; border-radius: 0;
}
html body #gfaq#gfaq .gfaq-box::before{ top: var(--band-top); bottom: auto; height: var(--cue-top-h, 24px); background: var(--cue-top); }
html body #gfaq#gfaq .gfaq-box::after{ bottom: var(--band-bot); top: auto; height: var(--cue-bot-h, 44px); background: var(--cue-bot); }
html body #gfaq#gfaq .gfaq-box:is([data-at="mid"], [data-at="end"])::before{ opacity: 1; }
html body #gfaq#gfaq .gfaq-box:is([data-at="top"], [data-at="mid"])::after{ opacity: 1; }
/* quiet cues: a short top fade that ends before a card parked at the top, and a short, partial
   bottom fade that softens the cut edge but keeps the next question's top visible (live's own "more") */
html body #gfaq#gfaq{
  --cue-top-h: 12px; --cue-bot-h: 16px;
  --cue-top: linear-gradient(to bottom, var(--ground) 5px, color-mix(in srgb, var(--ground) 0%, transparent));
  --cue-bot: linear-gradient(to top, color-mix(in srgb, var(--ground) 75%, transparent), color-mix(in srgb, var(--ground) 0%, transparent));
}
/* the open card: no drop shadow, so its outline is closed along the bottom too (no size change) */
html body #gfaq#gfaq .qa-item.is-open{ box-shadow: inset 0 0 0 1px var(--open-ring); }
html body #gfaq#gfaq .is-open > .qa-a{ box-shadow: inset 0 -1px 0 var(--open-ring); }
@media (prefers-reduced-motion: reduce){ html body #gfaq#gfaq .gfaq-box::before, html body #gfaq#gfaq .gfaq-box::after{ transition: none; } }


/* ══ 2 · A CLEAN BOTTOM EDGE ════════════════════════════════════════════════
   The cut at the bottom: the last few pixels above the bottom
   border are solid page colour, then a short fade, so the border never slices
   through letters — rows end in a soft edge while the next question's top
   still shows. The same clean edge under the top line.                      */
html body #gfaq#gfaq{
  --cue-bot-h: 10px; --cue-top-h: 12px;
  --cue-bot: linear-gradient(to top, var(--ground) 3px, color-mix(in srgb, var(--ground) 0%, transparent));
  --cue-top: linear-gradient(to bottom, var(--ground) 3px, color-mix(in srgb, var(--ground) 0%, transparent));
}
html body #gfaq#gfaq .gfaq-box::after{ opacity: 1; }
@media (max-width: 640px){ html body #gfaq#gfaq{ --cue-bot-h: 8px; --cue-bot: linear-gradient(to top, var(--ground) 2px, color-mix(in srgb, var(--ground) 0%, transparent)); } }