/* The sponsored slots on bestgirlfriend.ai. Started from regie/kit/feuille.mjs,
   then edited by hand: `feuille.mjs --verifier bestgirlfriend <this file>` checks
   the invariants (hidden without JS, gone in print, box reserved per tier, the
   TOC bands held in place from the first paint and never under 1280), never the bytes.

   There is no source to melt this into. The bundle is compiled, so the runtime adds
   a <link> to this file itself, once, on the first page it lands on.

   Served immutable for a year: any change of LOOK here ships as matchbook-v5.css
   along with a recooked matchbook-v5.js, or readers keep the old one.

   v4 (01/10/2026): the rail to the right of "On this page" is gone. Two short bands
   frame the TOC instead, one where it used to start and one at its foot, from 1280
   wide (see the TOC section near the end).

   v3 (28/09/2026, evening): the slot at the very end of the article is only a
   stand-in now. It sat under the related reading, where almost nobody scrolls, and
   it comes back on the pages where no mid-article spot fits, and only there
   (before-related, see the bench further down). The main place: one row before an
   h2 around 40 % of the article, at every width (in v3 also a rail right of the
   TOC from 1840, replaced in v4). The homepage row is gone too: it sat less than one
   screen under the offer buttons of #alternatives.

   v2: the row is centered in its column and picks the tier that fills it best.
   Tracks are the box itself (x1.25 at most), created per visible slot, and
   justify-content spreads what is left on both sides. The tiers come from the
   column declared in regie-site.json (rangee.colonne), cut by the kit, never
   guessed here. */

.date_row, .blind-date { display: none; }

/* Tokens follow the site's own palette, so the theme toggle repaints the poster
   live. Light is the default and has no attribute: [data-theme="dark"] is the
   only switch the site knows (no prefers-color-scheme, nothing remembered). */
:root:not([data-theme="dark"]) .blind-date {
  --mb-fond: var(--bg-surface);
  --mb-texte: var(--text-primary);
  --mb-attenue: var(--text-secondary);
  --mb-filet: var(--text-secondary);
  --mb-rouge: var(--accent-brand);
  --mb-surdalle: var(--text-secondary);
  --mb-dalle: var(--text-primary);
  --mb-dalle-texte: var(--bg-surface);
  --mb-ombre: transparent;
  --mb-filet-dalle: var(--text-secondary);
  --mb-logo-jour: block;
  --mb-logo-nuit: none;
  --mb-nuit-on: initial;
}

html[data-theme="dark"] .blind-date {
  --mb-fond: var(--bg-surface);
  --mb-texte: var(--text-primary);
  --mb-attenue: var(--text-secondary);
  --mb-filet: var(--text-secondary);
  --mb-rouge: var(--accent-brand);
  --mb-surdalle: var(--text-secondary);
  --mb-dalle: var(--text-primary);
  --mb-dalle-texte: var(--bg-surface);
  --mb-ombre: transparent;
  --mb-filet-dalle: var(--text-secondary);
  --mb-logo-jour: none;
  --mb-logo-nuit: block;
  --mb-nuit-on: ;
}

html.bgf-live .blind-date {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: 0;
  padding-top: 18px;
  margin: 0;
  font-size: 9.5px;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  white-space: normal;
}

.blind-date .third-wheel {
  position: absolute;
  inset: 0 0 auto 0;
  margin: 0;
  text-align: center;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--text-secondary);
}

.blind-date .age-heart { letter-spacing: .12em; }

/* White card on the cream page, same hairline as the site's own cards. */
.blind-date .date-card {
  position: relative;
  flex: none;
  box-sizing: content-box;
  inline-size: clamp(var(--mb-w, 300px), 100%, calc(var(--mb-w, 300px) * 1.25));
  aspect-ratio: var(--mb-ar, 300 / 250);
  margin-inline: auto;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--border-subtle, #e8e2d8);
}

@keyframes matchbook-in { from { opacity: 0; } to { opacity: 1; } }

.blind-date .date-frame {
  position: relative;
  overflow: hidden;
  width: var(--mb-w, 300px);
  height: var(--mb-h, 250px);
  transform: scale(var(--mb-k, 1));
  transform-origin: 0 0;
  background: var(--mb-fond);
  animation: matchbook-in 160ms ease-out both;
}

.blind-date .date-frame.met-before { animation: none; }

.blind-date .date-door { display: block; height: 100%; text-decoration: none; color: inherit; }

.blind-date .date-door img { display: block; width: 100%; height: 100%; object-fit: contain; }

.blind-date .date-fill { container-type: size; width: 100%; height: 100%; overflow: hidden; }

.blind-date .date-frame.is-blushing .date-fill,
.blind-date .date-frame.is-blushing img { filter: blur(18px) saturate(1.2); transform: scale(1.1); }

.blind-date .blushing {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 5, 20, .3);
  transition: opacity .4s ease;
}
.blind-date .date-frame:not(.is-blushing) .blushing { opacity: 0; pointer-events: none; }
.blind-date .peek-in {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .9);
  background: rgba(10, 5, 18, .55);
  color: #fff;
  cursor: pointer;
  font: inherit;
}
.blind-date .peek-in:focus-visible { outline: 2px solid var(--mb-rouge); outline-offset: 3px; }
.blind-date .heart-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2.5px solid #fff;
  background: #cf3b2b;
  font-size: 13px;
}
.blind-date .heart-bar { width: 1px; height: 26px; background: rgba(255, 255, 255, .45); }

/* Never clamped: a legal line that gets cut is worse than a slot that grows.
   Held to the card's width: in a 884 px row with the 728 banner the risk line
   would otherwise run flush left, away from the offer it belongs to. */
.blind-date .tiny-vows {
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: calc(var(--mb-w, 300px) * 1.25);
  margin: 0 auto;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 9.5px;
  line-height: 1.35;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
  text-transform: none;
  letter-spacing: normal;
}

/* ---- Mid-article, before the h2 the runtime picks around 40 % of .prose-content
   (never in the first screen, one full screen away from any /go/ button).
   .prose-content measured 28/09/2026: window minus 36 up to 768, minus 80 from
   769 to 900, then minus 356 (the TOC) capped at 884.
   before-related, the old end-of-article row, lives in the same column and takes
   the same steps: it is only ever the stand-in for mid-date, never next to it. */
@media (max-width: 359px) {
html.bgf-live .date_row[data-date-spot-row="mid-date"],
html.bgf-live .date_row[data-date-spot-row="before-related"] { display: none; }
}

@media (min-width: 360px) and (max-width: 651px) {
html.bgf-live .date_row[data-date-spot-row="mid-date"],
html.bgf-live .date_row[data-date-spot-row="before-related"] {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 400px);
  justify-content: center;
  column-gap: 16px;
  margin-block: 32px;
  margin-inline: auto;
  --mb-fmt: mobile;
  --mb-w: 320px;
  --mb-h: 100px;
  --mb-ar: 320 / 100;
}
html.bgf-live .date_row[data-date-spot-row="mid-date"] > :nth-child(n + 2),
html.bgf-live .date_row[data-date-spot-row="before-related"] > :nth-child(n + 2) { display: none; }
html.bgf-live .date_row[data-date-spot-row="mid-date"] .tiny-vows,
html.bgf-live .date_row[data-date-spot-row="before-related"] .tiny-vows { min-block-size: 26px; }
}

@media (min-width: 652px) and (max-width: 715px) {
html.bgf-live .date_row[data-date-spot-row="mid-date"],
html.bgf-live .date_row[data-date-spot-row="before-related"] {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 375px);
  justify-content: center;
  column-gap: 16px;
  margin-block: 36px;
  margin-inline: auto;
  --mb-fmt: rect;
  --mb-w: 300px;
  --mb-h: 250px;
  --mb-ar: 300 / 250;
}
html.bgf-live .date_row[data-date-spot-row="mid-date"] > :nth-child(n + 3),
html.bgf-live .date_row[data-date-spot-row="before-related"] > :nth-child(n + 3) { display: none; }
html.bgf-live .date_row[data-date-spot-row="mid-date"] .tiny-vows,
html.bgf-live .date_row[data-date-spot-row="before-related"] .tiny-vows { min-block-size: 52px; }
}

@media (min-width: 716px) and (max-width: 768px) {
html.bgf-live .date_row[data-date-spot-row="mid-date"],
html.bgf-live .date_row[data-date-spot-row="before-related"] {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 850px);
  justify-content: center;
  column-gap: 16px;
  margin-block: 36px;
  margin-inline: auto;
  --mb-fmt: lead;
  --mb-w: 680px;
  --mb-h: 88px;
  --mb-ar: 680 / 88;
}
html.bgf-live .date_row[data-date-spot-row="mid-date"] > :nth-child(n + 2),
html.bgf-live .date_row[data-date-spot-row="before-related"] > :nth-child(n + 2) { display: none; }
html.bgf-live .date_row[data-date-spot-row="mid-date"] .tiny-vows,
html.bgf-live .date_row[data-date-spot-row="before-related"] .tiny-vows { min-block-size: 13px; }
}

/* 769 to 776: the gutter jumps to 40 px at 769 and the column (672 to 679 px
   with a scrollbar) is too narrow for the 680 band for eight pixels. Two rects
   fit there, so they take it; no poster squeezed under its box. */
@media (min-width: 769px) and (max-width: 776px) {
html.bgf-live .date_row[data-date-spot-row="mid-date"],
html.bgf-live .date_row[data-date-spot-row="before-related"] {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 375px);
  justify-content: center;
  column-gap: 16px;
  margin-block: 36px;
  margin-inline: auto;
  --mb-fmt: rect;
  --mb-w: 300px;
  --mb-h: 250px;
  --mb-ar: 300 / 250;
}
html.bgf-live .date_row[data-date-spot-row="mid-date"] > :nth-child(n + 3),
html.bgf-live .date_row[data-date-spot-row="before-related"] > :nth-child(n + 3) { display: none; }
html.bgf-live .date_row[data-date-spot-row="mid-date"] .tiny-vows,
html.bgf-live .date_row[data-date-spot-row="before-related"] .tiny-vows { min-block-size: 52px; }
}

@media (min-width: 777px) and (max-width: 824px) {
html.bgf-live .date_row[data-date-spot-row="mid-date"],
html.bgf-live .date_row[data-date-spot-row="before-related"] {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 850px);
  justify-content: center;
  column-gap: 16px;
  margin-block: 36px;
  margin-inline: auto;
  --mb-fmt: lead;
  --mb-w: 680px;
  --mb-h: 88px;
  --mb-ar: 680 / 88;
}
html.bgf-live .date_row[data-date-spot-row="mid-date"] > :nth-child(n + 2),
html.bgf-live .date_row[data-date-spot-row="before-related"] > :nth-child(n + 2) { display: none; }
html.bgf-live .date_row[data-date-spot-row="mid-date"] .tiny-vows,
html.bgf-live .date_row[data-date-spot-row="before-related"] .tiny-vows { min-block-size: 13px; }
}

@media (min-width: 825px) and (max-width: 900px) {
html.bgf-live .date_row[data-date-spot-row="mid-date"],
html.bgf-live .date_row[data-date-spot-row="before-related"] {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 910px);
  justify-content: center;
  column-gap: 16px;
  margin-block: 36px;
  margin-inline: auto;
  --mb-fmt: lead;
  --mb-w: 728px;
  --mb-h: 90px;
  --mb-ar: 728 / 90;
}
html.bgf-live .date_row[data-date-spot-row="mid-date"] > :nth-child(n + 2),
html.bgf-live .date_row[data-date-spot-row="before-related"] > :nth-child(n + 2) { display: none; }
html.bgf-live .date_row[data-date-spot-row="mid-date"] .tiny-vows,
html.bgf-live .date_row[data-date-spot-row="before-related"] .tiny-vows { min-block-size: 13px; }
}

/* The TOC lands at 901 and eats 356 px. 528 to 615 px of column: the phone
   banner at x1.25 (400 px) fills it better than a rect (375), and two rects only
   fit from 616. */
@media (min-width: 901px) and (max-width: 988px) {
html.bgf-live .date_row[data-date-spot-row="mid-date"],
html.bgf-live .date_row[data-date-spot-row="before-related"] {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 400px);
  justify-content: center;
  column-gap: 16px;
  margin-block: 32px;
  margin-inline: auto;
  --mb-fmt: mobile;
  --mb-w: 320px;
  --mb-h: 100px;
  --mb-ar: 320 / 100;
}
html.bgf-live .date_row[data-date-spot-row="mid-date"] > :nth-child(n + 2),
html.bgf-live .date_row[data-date-spot-row="before-related"] > :nth-child(n + 2) { display: none; }
html.bgf-live .date_row[data-date-spot-row="mid-date"] .tiny-vows,
html.bgf-live .date_row[data-date-spot-row="before-related"] .tiny-vows { min-block-size: 26px; }
}

@media (min-width: 989px) and (max-width: 1052px) {
html.bgf-live .date_row[data-date-spot-row="mid-date"],
html.bgf-live .date_row[data-date-spot-row="before-related"] {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 375px);
  justify-content: center;
  column-gap: 16px;
  margin-block: 36px;
  margin-inline: auto;
  --mb-fmt: rect;
  --mb-w: 300px;
  --mb-h: 250px;
  --mb-ar: 300 / 250;
}
html.bgf-live .date_row[data-date-spot-row="mid-date"] > :nth-child(n + 3),
html.bgf-live .date_row[data-date-spot-row="before-related"] > :nth-child(n + 3) { display: none; }
html.bgf-live .date_row[data-date-spot-row="mid-date"] .tiny-vows,
html.bgf-live .date_row[data-date-spot-row="before-related"] .tiny-vows { min-block-size: 52px; }
}

@media (min-width: 1053px) and (max-width: 1100px) {
html.bgf-live .date_row[data-date-spot-row="mid-date"],
html.bgf-live .date_row[data-date-spot-row="before-related"] {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 850px);
  justify-content: center;
  column-gap: 16px;
  margin-block: 36px;
  margin-inline: auto;
  --mb-fmt: lead;
  --mb-w: 680px;
  --mb-h: 88px;
  --mb-ar: 680 / 88;
}
html.bgf-live .date_row[data-date-spot-row="mid-date"] > :nth-child(n + 2),
html.bgf-live .date_row[data-date-spot-row="before-related"] > :nth-child(n + 2) { display: none; }
html.bgf-live .date_row[data-date-spot-row="mid-date"] .tiny-vows,
html.bgf-live .date_row[data-date-spot-row="before-related"] .tiny-vows { min-block-size: 13px; }
}

@media (min-width: 1101px) {
html.bgf-live .date_row[data-date-spot-row="mid-date"],
html.bgf-live .date_row[data-date-spot-row="before-related"] {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 910px);
  justify-content: center;
  column-gap: 16px;
  margin-block: 36px;
  margin-inline: auto;
  --mb-fmt: lead;
  --mb-w: 728px;
  --mb-h: 90px;
  --mb-ar: 728 / 90;
}
html.bgf-live .date_row[data-date-spot-row="mid-date"] > :nth-child(n + 2),
html.bgf-live .date_row[data-date-spot-row="before-related"] > :nth-child(n + 2) { display: none; }
html.bgf-live .date_row[data-date-spot-row="mid-date"] .tiny-vows,
html.bgf-live .date_row[data-date-spot-row="before-related"] .tiny-vows { min-block-size: 13px; }
}

/* ---- The bench. The runtime posts before-related marked "mid" when it managed to
   place mid-date on the page, "solo" when no h2 was fit for it. Marked "mid", it
   stays hidden wherever mid-date can show (360 and up) and only comes out, below
   the fold, if the guard folds mid-date at that width. Any mark keeps it hidden
   from 1280, where the TOC bands are the reading slot. One attribute more than
   the steps above, so these win wherever they sit. */
@media (min-width: 360px) {
html.bgf-live .date_row[data-date-spot-row="before-related"][data-date-spot-bench="mid"] { display: none; }
}

@media (min-width: 1280px) {
html.bgf-live .date_row[data-date-spot-row="before-related"][data-date-spot-bench] { display: none; }
}

/* ---- Two short bands around the TOC, from 1280 wide and 760 tall (v4, 01/10/2026).
   The 300x600 used to sit to the right of "On this page" from 1840 only, in a
   margin most screens never have. Now the TOC column carries the ads itself: one
   band where the TOC used to start, the TOC pushed down by exactly that much, and
   a second band at its foot. Both ride along with the sticky TOC.

   Why 319 and not 300: the poster's low band is drawn for 318x98, and at 300 wide
   no low height holds in all seventeen languages (sonde-bandes.py, 01/10: thirty
   posters cut at 100 px, still five at 140). The TOC has a 1 px rule and 22 px of
   inner padding on the left, so 319 gives the band its 318 and leaves the links
   about 296. The article goes from 884 to 785 at most.

   No jump on load. The space is held from the first paint, in the TOC's own
   padding, on the same page types the runtime fills (the html.bgf-live flag is
   set by a sync script in the head). The bands are posted into that hole later,
   out of the flow. The TOC sticks at 136 instead of 92: at 92 its top 28 px slid
   under the 120 px header, which was fine for a heading and is not for an ad.

   If the column grows taller than the window, the link list scrolls inside the
   TOC rather than pushing the bottom band off screen: 136 on top, 2 x 164 for the
   bands, 60 for the "On this page" heading and its margin (59 measured), and 90
   kept free at the bottom. That last one is aside.thumb-cta, the fixed "Our pick"
   bar (68 px, 14 px off the bottom, 560 centered): it overlaps the column by 19 px
   at every width, and at 16 px of air it hid the start of the bottom band legal
   line. Under 760 tall fewer than five TOC links would be left between the two
   bands, so nothing changes there.

   Where the bands run, the runtime folds the mid-article row away (one ad per
   screen), and the end-of-article stand-in stays on the bench. */
@media (min-width: 1280px) and (min-height: 760px) {
html.bgf-live head:not(:has(link[rel="canonical"][href*="/safety/"])) ~ body:not(:has(link[rel="canonical"][href*="/safety/"])) article.page:not(:has(nav.breadcrumb a[href*="/safety"])):is([data-schema-type="review"], [data-schema-type="versus"], [data-schema-type="promo_code"], [data-schema-type="promo_code_hub"], [data-schema-type="pillar"], [data-schema-type="pillar_listicle"], [data-schema-type="itemlist"], [data-schema-type="listicle"], [data-schema-type="article"], [data-schema-type="faq"], [data-schema-type="guide"], [data-schema-type="hub_silo"], [data-schema-type="modifier_landing"]) .layout-with-toc { grid-template-columns: minmax(0, 1fr) 319px; }
html.bgf-live head:not(:has(link[rel="canonical"][href*="/safety/"])) ~ body:not(:has(link[rel="canonical"][href*="/safety/"])) article.page:not(:has(nav.breadcrumb a[href*="/safety"])):is([data-schema-type="review"], [data-schema-type="versus"], [data-schema-type="promo_code"], [data-schema-type="promo_code_hub"], [data-schema-type="pillar"], [data-schema-type="pillar_listicle"], [data-schema-type="itemlist"], [data-schema-type="listicle"], [data-schema-type="article"], [data-schema-type="faq"], [data-schema-type="guide"], [data-schema-type="hub_silo"], [data-schema-type="modifier_landing"]) .toc {
  top: 136px;
  padding-block-start: 164px;
  padding-block-end: 164px;
}
html.bgf-live head:not(:has(link[rel="canonical"][href*="/safety/"])) ~ body:not(:has(link[rel="canonical"][href*="/safety/"])) article.page:not(:has(nav.breadcrumb a[href*="/safety"])):is([data-schema-type="review"], [data-schema-type="versus"], [data-schema-type="promo_code"], [data-schema-type="promo_code_hub"], [data-schema-type="pillar"], [data-schema-type="pillar_listicle"], [data-schema-type="itemlist"], [data-schema-type="listicle"], [data-schema-type="article"], [data-schema-type="faq"], [data-schema-type="guide"], [data-schema-type="hub_silo"], [data-schema-type="modifier_landing"]) .toc ul {
  max-block-size: calc(100vh - 614px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
html.bgf-live .date_row[data-date-spot-row="icebreaker"] {
  display: block;
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: 318px;
  margin: 0;
  --mb-fmt: mobile;
  --mb-w: 318px;
  --mb-h: 98px;
  --mb-ar: 318 / 98;
}
html.bgf-live .date_row[data-date-spot-row="nightcap"] {
  display: block;
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  inline-size: 318px;
  margin: 0;
  --mb-fmt: mobile;
  --mb-w: 318px;
  --mb-h: 98px;
  --mb-ar: 318 / 98;
}
html.bgf-live .date_row[data-date-spot-row="icebreaker"] > :nth-child(n + 2),
html.bgf-live .date_row[data-date-spot-row="nightcap"] > :nth-child(n + 2) { display: none; }
html.bgf-live .date_row[data-date-spot-row="icebreaker"] .date-card,
html.bgf-live .date_row[data-date-spot-row="nightcap"] .date-card { inline-size: var(--mb-w); }
html.bgf-live .date_row[data-date-spot-row="icebreaker"] .tiny-vows,
html.bgf-live .date_row[data-date-spot-row="nightcap"] .tiny-vows { min-block-size: 26px; }
}

@media print {
  .date_row, .blind-date { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .blind-date .date-frame { animation: none; }
  .blind-date .blushing, .blind-date .peek-in { transition: none; }
}