/*!
 * Quote Prompter front-end styles.
 * Ported from quote-prompter-nogood.html (THEME TOKENS block and everything
 * below it, minus the PROTOTYPE PAGE ONLY block). Component selectors are
 * prefixed with ".bfq " so they outrank generic theme rules (Divi styles
 * bare blockquote, p, button and input elements).
 */
/* =====================================================================
   THEME TOKENS: change the look of the whole tool here.
   Every visual value used below is declared as a custom property in
   this block. Tokens are scoped to .bfq (never :root / html / body) so
   the plugin cannot leak styles into the theme; the Appearance picker
   overrides them inline on the #bfq-root element. Nothing past this point should contain a
   hard-coded colour, font, radius, shadow, spacing or timing value.
   Variant: "nogood" — mimics nogood.studio (near-black ground, flat
   lime/cream panels, hairline dividers, mono micro-labels).
   ===================================================================== */
.bfq {
  /* -- colour: ground / panels / ink -- */
  --bfq-color-ground: #1C1C1C;
  --bfq-color-panel-lime: #D8FF7C;
  --bfq-color-panel-cream: #FBFAF3;
  --bfq-color-ink: #1C1C1C;
  --bfq-color-muted-slate: #515A63;      /* secondary text on light panels, checked 4.5:1+ on cream */
  --bfq-color-muted-on-dark: rgba(251, 250, 243, 0.55);
  --bfq-color-border-warm: #E9E5DB;
  --bfq-color-accent-red: #E94736;
  --bfq-color-on-ground: #FBFAF3;        /* bright text sitting directly on the page ground */

  --bfq-hairline-on-light: rgba(28, 28, 28, 0.9);
  --bfq-hairline-on-dark: rgba(251, 250, 243, 0.18);

  /* -- controls (pills sit on the light panels) -- */
  --bfq-color-chip-text: var(--bfq-color-ink);
  --bfq-color-chip-border: rgba(28, 28, 28, 0.55);
  --bfq-color-chip-border-hover: rgba(28, 28, 28, 1);
  --bfq-color-chip-selected-bg: var(--bfq-color-ink);
  --bfq-color-chip-selected-text: var(--bfq-color-panel-lime);

  --bfq-color-btn-primary-bg: var(--bfq-color-panel-lime);
  --bfq-color-btn-primary-text: var(--bfq-color-ink);
  --bfq-color-btn-primary-bg-hover: var(--bfq-color-ink);
  --bfq-color-btn-primary-text-hover: var(--bfq-color-panel-lime);

  --bfq-focus-ring-on-dark: var(--bfq-color-panel-lime);
  --bfq-focus-ring-on-light: var(--bfq-color-ink);

  /* -- type -- */
  --bfq-font-family-grotesque: "Inter", Arial, Helvetica, sans-serif;
  --bfq-font-family-mono: "DM Mono", "Courier New", monospace;
  --bfq-font-family: var(--bfq-font-family-grotesque);
  --bfq-font-family-display: var(--bfq-font-family-grotesque);
  --bfq-font-family-reading: var(--bfq-font-family-grotesque);

  --bfq-font-weight-display: 400;
  --bfq-font-weight-reading: 400;
  --bfq-font-weight-medium: 500;

  /* fit-routine sizing seam: names below are read by the JS fit routine
     via getComputedStyle — do not rename these six. */
  --bfq-font-size-max-display-desktop: 64px;
  --bfq-font-size-max-display-tablet: 50px;
  --bfq-font-size-max-display-mobile: 36px;
  --bfq-font-size-max-medium-desktop: 52px; /* 9 to 20 words */
  --bfq-font-size-max-medium-tablet: 42px;
  --bfq-font-size-max-medium-mobile: 30px;
  --bfq-font-size-max-reading-desktop: 40px;
  --bfq-font-size-max-reading-tablet: 32px;
  --bfq-font-size-max-reading-mobile: 24px;
  --bfq-font-size-min: 18px;
  --bfq-quote-height-budget: 0.56; /* fraction of viewport height the quote + attribution aim to fit in */
  --bfq-line-height-display: 1.12;
  --bfq-line-height-reading: 1.38;
  --bfq-line-height-reading-tight: 1.3;
  --bfq-line-height-reading-tight-above: 26px;

  --bfq-font-size-ui: 15px;
  --bfq-font-size-translation: 20px;
  --bfq-font-size-small: 12px;
  --bfq-font-size-chip: 12px;
  --bfq-font-size-micro: 11px;
  --bfq-letter-spacing-micro: 0.08em;
  --bfq-letter-spacing-control: 0.03em;
  --bfq-letter-spacing-display-quote: -0.03em;
  --bfq-letter-spacing-reading-quote: -0.01em;

  --bfq-reading-measure: 46ch;

  /* -- shape -- */
  --bfq-radius-panel: 2px;
  --bfq-radius-pill: 999px;
  --bfq-border-width: 1px;

  /* -- spacing -- */
  --bfq-space-2xs: 4px;
  --bfq-space-xs: 8px;
  --bfq-space-sm: 12px;
  --bfq-space-md: 20px;
  --bfq-space-lg: 32px;
  --bfq-space-xl: 48px;

  --bfq-page-gutter: 24px;
  --bfq-max-width: 1200px;
  --bfq-touch-target: 44px;
  --bfq-btn-height: 48px;
  --bfq-btn-padding-inline: 28px;
  --bfq-chip-height: 38px;
  --bfq-topstrip-height: 32px;
  --bfq-footstrip-height: 40px;

  --bfq-card-padding-desktop: 48px 40px;
  --bfq-card-padding-mobile: 28px 22px;
  --bfq-refine-padding-desktop: 32px 28px;
  --bfq-refine-padding-mobile: 24px 20px;

  --bfq-transition-duration: 160ms;
  --bfq-transition-easing: ease;
}
/* ===================================================================== */

.bfq {
  display: block;
  box-sizing: border-box;
  max-width: var(--bfq-max-width);
  margin: 0 auto;
  padding: 0 var(--bfq-page-gutter) var(--bfq-space-xl);
  /* The plugin paints its own ground so the on-dark text (Appearance picker)
     stays legible on any theme background. Set the Divi section background to
     the same colour for a seamless look. */
  background-color: var(--bfq-color-ground);
  font-family: var(--bfq-font-family);
  /* Explicit base size and line height: never inherit them from the theme. */
  font-size: 16px;
  line-height: 1.4;
  font-weight: 400;
  text-align: left;
  color: var(--bfq-color-ink);
  -webkit-text-size-adjust: 100%;
}

/* ---------- reset inside .bfq (theme-proofing for Divi) ----------
   Low specificity (0,1,1) so every .bfq .bfq-* component rule (0,2,0) wins. */
.bfq blockquote,
.bfq p,
.bfq fieldset,
.bfq legend,
.bfq details,
.bfq summary,
.bfq section {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  quotes: none;
  font-style: normal;
  text-transform: none;
  text-indent: 0;
  text-shadow: none;
  box-shadow: none;
}
.bfq blockquote::before,
.bfq blockquote::after {
  content: none;
}
.bfq button,
.bfq input {
  margin: 0;
  font-family: inherit;
  line-height: 1.2;
  text-shadow: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  width: auto;
  height: auto;
  max-width: none;
}
.bfq input[type="number"] {
  -moz-appearance: textfield;
}
.bfq svg {
  display: inline-block;
  vertical-align: middle;
}

.bfq *,
.bfq *::before,
.bfq *::after {
  box-sizing: border-box;
}

.bfq .bfq-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- top strip ---------- */

.bfq .bfq-topstrip {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: var(--bfq-space-md);
  row-gap: var(--bfq-space-2xs); /* when the two labels wrap on a phone, keep them close */
  min-height: var(--bfq-topstrip-height);
  padding: var(--bfq-space-xs) var(--bfq-space-md);
  background: var(--bfq-color-panel-lime);
  border-bottom: var(--bfq-border-width) solid var(--bfq-hairline-on-light);
  font-family: var(--bfq-font-family-mono);
  font-size: var(--bfq-font-size-micro);
  letter-spacing: var(--bfq-letter-spacing-micro);
  text-transform: uppercase;
  color: var(--bfq-color-ink);
  flex-wrap: wrap;
}

.bfq .bfq-topstrip-label {
  font-weight: var(--bfq-font-weight-medium);
  white-space: nowrap;
}

.bfq .bfq-topstrip-count {
  white-space: nowrap;
}

.bfq .bfq-topstrip-meta {
  display: flex;
  align-items: center;
  gap: var(--bfq-space-sm);
  margin-left: auto;
}

.bfq .bfq-tag {
  display: inline-flex;
  align-items: center;
  border: var(--bfq-border-width) solid var(--bfq-hairline-on-light);
  border-radius: var(--bfq-radius-panel);
  padding: 2px 6px;
  white-space: nowrap;
  font-family: var(--bfq-font-family-mono);
  font-size: var(--bfq-font-size-micro);
  letter-spacing: var(--bfq-letter-spacing-micro);
  text-transform: uppercase;
  color: var(--bfq-color-ink);
}
.bfq .bfq-tag[hidden] { display: none; }
/* Quote / Pangram tag: just above the quote, left-aligned. */
.bfq .bfq-kind {
  display: flex;
  justify-content: flex-start;
  margin: 0 0 var(--bfq-space-md) 0;
  min-height: 22px;
}

/* Panel headings ("Quote Info", "Refine Results"): mono, larger and heavier than
   the micro-labels so they read as headers. */
.bfq .bfq-panel-heading {
  font-family: var(--bfq-font-family-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bfq-color-ink);
  margin: 0 0 var(--bfq-space-sm) 0;
}

/* Quote length stats: one row per figure, the number right after its label. */
.bfq .bfq-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 var(--bfq-space-lg) 0;
  padding: 0 0 var(--bfq-space-lg) 0;
  border-bottom: var(--bfq-border-width) solid var(--bfq-hairline-on-light);
}
.bfq .bfq-stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--bfq-font-family-mono);
  font-size: var(--bfq-font-size-micro);
  letter-spacing: var(--bfq-letter-spacing-micro);
  text-transform: uppercase;
}
.bfq .bfq-stat dt {
  margin: 0;
  color: var(--bfq-color-muted-slate);
}
.bfq .bfq-stat dd {
  margin: 0;
  font-weight: var(--bfq-font-weight-medium);
  color: var(--bfq-color-ink);
  font-variant-numeric: tabular-nums;
}

/* Card display toggles: author / source / source details. */
.bfq .bfq-info-toggles {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 var(--bfq-space-lg) 0;
  padding: 0 0 var(--bfq-space-lg) 0;
  border-bottom: var(--bfq-border-width) solid var(--bfq-hairline-on-light);
}
.bfq .bfq-toggle {
  transition: opacity var(--bfq-transition-duration) var(--bfq-transition-easing);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--bfq-font-family-mono);
  font-size: var(--bfq-font-size-micro);
  letter-spacing: var(--bfq-letter-spacing-micro);
  text-transform: uppercase;
  color: var(--bfq-color-muted-slate);
  user-select: none;
}
.bfq .bfq-toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.bfq .bfq-toggle-track {
  position: relative;
  flex: none;
  width: 28px;
  height: 16px;
  border-radius: var(--bfq-radius-pill);
  border: var(--bfq-border-width) solid var(--bfq-color-chip-border);
  background: transparent;
  transition: background var(--bfq-transition-duration) var(--bfq-transition-easing),
              border-color var(--bfq-transition-duration) var(--bfq-transition-easing);
}
.bfq .bfq-toggle-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bfq-color-chip-border);
  transition: transform var(--bfq-transition-duration) var(--bfq-transition-easing),
              background var(--bfq-transition-duration) var(--bfq-transition-easing);
}
.bfq .bfq-toggle input:checked + .bfq-toggle-track {
  background: var(--bfq-color-chip-selected-bg);
  border-color: var(--bfq-color-chip-selected-bg);
}
.bfq .bfq-toggle input:checked + .bfq-toggle-track::after {
  transform: translateX(12px);
  background: var(--bfq-color-chip-selected-text);
}
.bfq .bfq-toggle input:focus-visible + .bfq-toggle-track {
  outline: 2px solid var(--bfq-color-chip-selected-bg);
  outline-offset: 2px;
}
.bfq .bfq-stats + .bfq-info-toggles { margin-top: 0; }
.bfq .bfq-stats:has(+ .bfq-toggles-heading) { border-bottom: 0; margin-bottom: 0; padding-bottom: var(--bfq-space-md); }
.bfq .bfq-toggles-heading { margin-bottom: var(--bfq-space-sm); }

@media (max-width: 600px) {
  .bfq .bfq-topstrip {
    justify-content: flex-start;
    padding-top: var(--bfq-space-sm);
    padding-bottom: var(--bfq-space-sm);
  }
  .bfq .bfq-topstrip-meta {
    margin-left: auto;
  }
}

/* ---------- main grid ---------- */

.bfq .bfq-main {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

@media (max-width: 900px) {
  .bfq .bfq-main {
    grid-template-columns: 1fr;
  }
  .bfq:not([data-bfq-glow]) .bfq-refine-panel {
    border-left: 0;
    border-top: var(--bfq-border-width) solid var(--bfq-hairline-on-light);
  }
}

/* ---------- quote panel ---------- */

.bfq .bfq-card {
  background-color: var(--bfq-color-panel-cream);
  border-radius: 0;
  padding: var(--bfq-card-padding-desktop);
  display: flex;
  flex-direction: column;
}

.bfq .bfq-quote-area {
  /* Never clip: no max-height and no overflow:hidden here. The fit routine sizes the
     text against a height BUDGET (--bfq-quote-height-budget); if the text still does not
     fit at the minimum font size, the card simply grows. Do not reintroduce clipping. */
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bfq .bfq-quote-area--anim {
  transition: opacity var(--bfq-transition-duration) var(--bfq-transition-easing),
              transform var(--bfq-transition-duration) var(--bfq-transition-easing);
}

.bfq .bfq-quote-area--out {
  opacity: 0;
  transform: translateY(6px);
}

@media (prefers-reduced-motion: reduce) {
  .bfq .bfq-quote-area--anim {
    transition: none;
  }
  .bfq .bfq-quote-area--out {
    transform: none;
  }
}

.bfq .bfq-quote-text {
  margin: 0 0 var(--bfq-space-md) 0;
  padding: 0;
  white-space: pre-line; /* keep the line breaks stored with a quote (dialogue, verse) */
  font-size: var(--bfq-font-size-min);
  color: var(--bfq-color-ink);
  quotes: none;
  overflow-wrap: break-word;
  text-align: left;
}

.bfq .bfq-quote-text--display {
  font-family: var(--bfq-font-family-display);
  font-weight: var(--bfq-font-weight-display);
  letter-spacing: var(--bfq-letter-spacing-display-quote);
  line-height: var(--bfq-line-height-display);
}

.bfq .bfq-quote-text--reading {
  font-family: var(--bfq-font-family-reading);
  font-weight: var(--bfq-font-weight-reading);
  letter-spacing: var(--bfq-letter-spacing-reading-quote);
  max-width: var(--bfq-reading-measure);
  line-height: var(--bfq-line-height-reading);
}

/* Dialogue: each exchange on its own line, the speaker set small and muted
   before the words so the eye lands on what is said. */
.bfq .bfq-quote-text--dialogue { white-space: normal; }
.bfq .bfq-quote-text--dialogue .bfq-line { display: block; }
.bfq .bfq-quote-text--dialogue .bfq-line + .bfq-line { margin-top: 0.55em; }
.bfq .bfq-speaker {
  display: block;
  font-family: var(--bfq-font-family-mono);
  font-size: 0.34em;
  font-weight: var(--bfq-font-weight-medium, 500);
  letter-spacing: var(--bfq-letter-spacing-micro);
  text-transform: uppercase;
  color: var(--bfq-color-muted-slate);
  line-height: 1.3;
  margin-bottom: 0.15em;
}
.bfq[data-bfq-glow] .bfq-speaker { color: var(--bfq-glow-2); text-shadow: 0 0 8px var(--bfq-glow-2-faint); }

/* Translation, shown only for quotes that have one: a hairline, then
   "Translation:" as a mono micro-label and the English in the reading face. */
.bfq .bfq-translation {
  margin: 0 0 var(--bfq-space-md) 0;
  padding-top: var(--bfq-space-sm);
  border-top: var(--bfq-border-width) solid var(--bfq-hairline-on-light);
}
.bfq .bfq-translation[hidden] {
  display: none;
}
.bfq .bfq-translation-label {
  display: block;
  margin-bottom: 4px;
  font-family: var(--bfq-font-family-mono);
  font-size: var(--bfq-font-size-micro);
  letter-spacing: var(--bfq-letter-spacing-micro);
  text-transform: uppercase;
  color: var(--bfq-color-muted-slate);
}
.bfq .bfq-translation-text {
  display: block;
  max-width: var(--bfq-reading-measure);
  font-family: var(--bfq-font-family-reading);
  font-weight: var(--bfq-font-weight-reading);
  font-size: var(--bfq-font-size-translation);
  line-height: 1.4;
  color: var(--bfq-color-ink);
  overflow-wrap: break-word;
}

.bfq .bfq-empty-message {
  font-family: var(--bfq-font-family-reading);
  font-size: var(--bfq-font-size-ui);
  color: var(--bfq-color-muted-slate);
  font-weight: var(--bfq-font-weight-reading);
  margin: 0;
}

/* ---------- source row + primary action ---------- */

.bfq .bfq-source-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--bfq-space-lg);
  margin-top: var(--bfq-space-lg);
  padding-top: 0;
}

/* Two aligned columns: labels in the first, values in the second, so Author
   and Source read as one small table however long the values run. */
.bfq .bfq-source-lines {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: var(--bfq-space-sm);
  row-gap: 3px;
  align-items: baseline;
  width: 100%;
}
.bfq .bfq-source-lines:not(:has(.bfq-source-info:not([hidden]))) { display: none; }
.bfq .bfq-source-info { display: contents; }
.bfq .bfq-source-info[hidden],
.bfq .bfq-source-info[hidden] > * { display: none; }
.bfq .bfq-source-label,
.bfq .bfq-source-value {
  font-family: var(--bfq-font-family-mono);
  font-size: var(--bfq-font-size-micro);
  letter-spacing: var(--bfq-letter-spacing-micro);
  text-transform: uppercase;
  line-height: 1.5;
}
.bfq .bfq-source-label { color: var(--bfq-color-muted-slate); }
.bfq .bfq-source-value {
  min-width: 0;
  overflow-wrap: break-word;
  color: var(--bfq-color-ink);
  font-weight: var(--bfq-font-weight-medium);
}
.bfq .bfq-source-info--none .bfq-source-label { display: none; }
.bfq .bfq-source-info--none .bfq-source-value { grid-column: 1 / -1; }
.bfq .bfq-source-value--none { color: var(--bfq-color-muted-slate); font-weight: var(--bfq-font-weight-reading, 400); }
.bfq .bfq-actions {
  flex: none;
  min-width: 0;
  width: 100%;
  display: flex;
  justify-content: center; /* Back and the primary button sit centred under the quote */
  margin-left: 0;
}
@media (max-width: 600px) {
  .bfq .bfq-btn-primary { flex: 0 1 auto; min-width: 0; justify-content: center; }
  .bfq .bfq-btn-primary > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Note under the buttons: points at the signup block further down the page. */
.bfq .bfq-note {
  margin: var(--bfq-space-lg) 0 0;
  text-align: center;
  font-family: var(--bfq-font-family-reading);
  font-size: var(--bfq-font-size-small);
  line-height: 1.4;
  color: var(--bfq-color-muted-slate);
}
.bfq .bfq-note[hidden] { display: none; }
.bfq .bfq-note-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.bfq .bfq-note-link:hover { color: var(--bfq-color-ink); }
.bfq .bfq-note--static .bfq-note-link { border-bottom: 0; cursor: default; }
.bfq .bfq-note-arrow { display: inline-block; margin-left: 2px; }
.bfq .bfq-toggle--dim { opacity: .45; }
.bfq .bfq-toggle--dim:hover { opacity: .7; }
/* ---------- buttons ---------- */

.bfq .bfq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bfq-font-family-mono);
  text-transform: uppercase;
  cursor: pointer;
  border-radius: var(--bfq-radius-pill);
}

@media (prefers-reduced-motion: reduce) {
  .bfq .bfq-btn {
    transition: none !important;
  }
}

.bfq .bfq-btn-primary {
  line-height: 1;
  font-size: var(--bfq-font-size-ui);
  font-weight: var(--bfq-font-weight-medium);
  letter-spacing: var(--bfq-letter-spacing-control);
  background: var(--bfq-color-btn-primary-bg);
  color: var(--bfq-color-btn-primary-text);
  border: none;
  min-height: var(--bfq-btn-height);
  padding: 0 var(--bfq-btn-padding-inline);
  gap: var(--bfq-space-xs);
  transition: background var(--bfq-transition-duration) var(--bfq-transition-easing),
              color var(--bfq-transition-duration) var(--bfq-transition-easing);
}


.bfq .bfq-btn-primary:hover {
  background: var(--bfq-color-btn-primary-bg-hover);
  color: var(--bfq-color-btn-primary-text-hover);
}

.bfq .bfq-btn-primary:active {
  opacity: 0.85;
}

/* Back: small accent-coloured text with an arrow, left of the primary button. */
.bfq .bfq-actions {
  align-items: center;
  gap: var(--bfq-space-md);
}
.bfq .bfq-btn-back {
  gap: 6px;
  line-height: 1;
  font-size: var(--bfq-font-size-small);
  font-weight: var(--bfq-font-weight-medium);
  letter-spacing: var(--bfq-letter-spacing-control);
  background: transparent;
  color: var(--bfq-color-accent-red);
  border: none;
  padding: 0 var(--bfq-space-2xs);
  min-height: var(--bfq-touch-target);
}
.bfq .bfq-btn-back:hover {
  text-decoration: underline;
}
.bfq .bfq-btn-back[hidden] {
  display: none;
}
.bfq[data-bfq-glow] .bfq-btn-back {
  color: var(--bfq-glow-2);
  text-shadow: 0 0 8px var(--bfq-glow-2-faint);
}

/* Arrow glyphs as inline SVG so they sit on the text's optical centre
   (a text arrow rides the baseline and looks low). */
.bfq .bfq-btn-arrow {
  display: block;
  width: 0.9em;
  height: 0.9em;
  flex: none;
}

.bfq .bfq-btn-ghost {
  font-size: var(--bfq-font-size-small);
  font-weight: var(--bfq-font-weight-medium);
  letter-spacing: var(--bfq-letter-spacing-control);
  background: transparent;
  color: var(--bfq-color-ink);
  border: none;
  padding: 0 var(--bfq-space-2xs);
  min-height: var(--bfq-touch-target);
}

.bfq .bfq-btn-ghost::before {
  content: "\00D7 "; /* × */
}

.bfq .bfq-btn-ghost:hover {
  text-decoration: underline;
}

.bfq:where(button, input, [tabindex]):focus-visible,
.bfq button:focus-visible,
.bfq input:focus-visible {
  outline: 2px solid var(--bfq-focus-ring-on-light);
  outline-offset: 2px;
}

/* ---------- refine (filter) panel ---------- */

.bfq .bfq-refine-panel {
  padding: var(--bfq-refine-padding-desktop);
  background-color: var(--bfq-color-panel-lime);
  border-left: var(--bfq-border-width) solid var(--bfq-hairline-on-light);
}

.bfq .bfq-refine-heading {
  margin-bottom: var(--bfq-space-md);
}
/* Collapsible: the heading is a button with a chevron and an "N filters on" hint. */
.bfq button.bfq-refine-heading {
  display: flex;
  align-items: center;
  gap: var(--bfq-space-sm);
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.bfq button.bfq-refine-heading[aria-expanded="false"] { margin-bottom: 0; }
.bfq .bfq-refine-state {
  margin-left: auto;
  font-weight: var(--bfq-font-weight-medium, 500);
  font-size: var(--bfq-font-size-micro);
  color: var(--bfq-color-muted-slate);
  letter-spacing: var(--bfq-letter-spacing-micro);
}
.bfq .bfq-refine-chevron {
  flex: none;
  transition: transform var(--bfq-transition-duration) var(--bfq-transition-easing);
}
/* Chevron points left when closed, down when open. */
.bfq button.bfq-refine-heading[aria-expanded="false"] .bfq-refine-chevron { transform: rotate(90deg); }
.bfq button.bfq-refine-heading[aria-expanded="true"] .bfq-refine-chevron { transform: rotate(0deg); }
.bfq button.bfq-refine-heading:focus-visible { outline: 2px solid var(--bfq-focus-ring-on-light); outline-offset: 4px; }
.bfq .bfq-refine-body[hidden] { display: none; }
/* Quote Info: same collapsible heading; closed by default. When closed, the heading
   carries the divider that the toggles' bottom rule provides when open. */
.bfq .bfq-info-body[hidden] { display: none; }
.bfq button.bfq-info-heading .bfq-refine-chevron { margin-left: auto; }
.bfq button.bfq-info-heading[aria-expanded="false"] {
  padding-bottom: var(--bfq-space-md);
  margin-bottom: var(--bfq-space-md);
  border-bottom: var(--bfq-border-width) solid var(--bfq-hairline-on-light);
}
.bfq[data-bfq-glow] button.bfq-info-heading[aria-expanded="false"] { border-bottom-color: var(--bfq-glow-color); }
.bfq .bfq-refine-body { padding-top: var(--bfq-space-xs); }

.bfq .bfq-filter-group {
  border: 0;
  margin: 0 0 var(--bfq-space-lg) 0;
  padding: 0;
}

.bfq .bfq-filter-group--last {
  margin-bottom: var(--bfq-space-sm);
}

.bfq .bfq-filter-group legend {
  font-family: var(--bfq-font-family-mono);
  font-size: var(--bfq-font-size-micro);
  font-weight: var(--bfq-font-weight-medium);
  color: var(--bfq-color-ink);
  text-transform: uppercase;
  letter-spacing: var(--bfq-letter-spacing-micro);
  margin-bottom: var(--bfq-space-xs);
  padding: 0;
}

.bfq .bfq-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bfq-space-xs);
}

.bfq .bfq-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bfq-font-family-mono);
  font-size: var(--bfq-font-size-chip);
  font-weight: var(--bfq-font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--bfq-letter-spacing-control);
  background: transparent;
  color: var(--bfq-color-chip-text);
  border: var(--bfq-border-width) solid var(--bfq-color-chip-border);
  border-radius: var(--bfq-radius-pill);
  padding: 0 var(--bfq-space-sm);
  min-height: var(--bfq-chip-height);
  cursor: pointer;
  transition: background var(--bfq-transition-duration) var(--bfq-transition-easing),
              border-color var(--bfq-transition-duration) var(--bfq-transition-easing),
              color var(--bfq-transition-duration) var(--bfq-transition-easing);
}

.bfq .bfq-chip:hover {
  border-color: var(--bfq-color-chip-border-hover);
}

.bfq .bfq-chip--humor {
  border-style: dashed; /* a tag that narrows the types, not a type itself */
}

.bfq .bfq-chip[aria-pressed="true"] {
  background: var(--bfq-color-chip-selected-bg);
  border-color: var(--bfq-color-chip-selected-bg);
  color: var(--bfq-color-chip-selected-text);
}

.bfq .bfq-custom-length {
  display: flex;
  gap: var(--bfq-space-lg);
  margin-top: var(--bfq-space-sm);
  flex-wrap: wrap;
}

.bfq .bfq-custom-length label {
  display: flex;
  flex-direction: column;
  gap: var(--bfq-space-2xs);
  font-family: var(--bfq-font-family-mono);
  font-size: var(--bfq-font-size-micro);
  letter-spacing: var(--bfq-letter-spacing-micro);
  text-transform: uppercase;
  color: var(--bfq-color-muted-slate);
}

.bfq .bfq-custom-length input {
  font-family: var(--bfq-font-family-mono);
  font-size: var(--bfq-font-size-ui);
  color: var(--bfq-color-ink);
  background: transparent;
  border: none;
  border-bottom: var(--bfq-border-width) solid var(--bfq-hairline-on-light);
  border-radius: 0;
  padding: var(--bfq-space-2xs) 0;
  min-height: var(--bfq-touch-target);
  width: 72px;
}

.bfq .bfq-refine-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* ---------- glow palettes (Tron, Light side, Dark side) ----------
   Only active when a glow palette sets data-bfq-glow. Lines glow via layered
   box-shadows on the neon colour; nothing here changes layout.
   Lines: every edge is drawn exactly once, as a real 1px border in one colour
   (--bfq-hairline-on-light, the neon at 85%). The old inset 1px shadow line stacked
   with the strip's border and the neighbour's line at every seam, so the seams read
   two to three times heavier than the outer frame (Tamer, 2026-10-03). */
.bfq[data-bfq-glow] .bfq-card,
.bfq[data-bfq-glow] .bfq-refine-panel,
.bfq[data-bfq-glow] .bfq-topstrip {
  box-shadow: inset 0 0 26px var(--bfq-glow-faint), 0 0 16px var(--bfq-glow-faint), 0 0 32px var(--bfq-glow-faint);
}
.bfq[data-bfq-glow] .bfq-topstrip {
  border: var(--bfq-border-width) solid var(--bfq-hairline-on-light);
}
.bfq[data-bfq-glow] .bfq-card {
  border: var(--bfq-border-width) solid var(--bfq-hairline-on-light);
  border-top: 0; /* the strip's bottom edge is the card's top edge */
}
.bfq[data-bfq-glow] .bfq-refine-panel {
  border: var(--bfq-border-width) solid var(--bfq-hairline-on-light);
  border-top: 0;
  border-left: 0; /* beside the card: the card's right edge is the panel's left edge */
}
@media (max-width: 900px) {
  /* stacked: the card's bottom edge is the panel's top edge */
  .bfq[data-bfq-glow] .bfq-refine-panel { border-left: var(--bfq-border-width) solid var(--bfq-hairline-on-light); }
}
.bfq[data-bfq-glow] .bfq-chip,
.bfq[data-bfq-glow] .bfq-swatch-chip {
  box-shadow: 0 0 8px var(--bfq-glow-faint), inset 0 0 7px var(--bfq-glow-faint);
}
.bfq[data-bfq-glow] .bfq-chip[aria-pressed="true"],
.bfq[data-bfq-glow] .bfq-btn-primary {
  box-shadow: 0 0 12px var(--bfq-glow-2-soft), 0 0 32px var(--bfq-glow-2-faint);
}
.bfq[data-bfq-glow] .bfq-btn-primary:hover {
  box-shadow: 0 0 18px var(--bfq-glow-2), 0 0 48px var(--bfq-glow-2-soft);
}
.bfq[data-bfq-glow] .bfq-tag {
  border-color: var(--bfq-glow-2); color: var(--bfq-glow-2); box-shadow: 0 0 9px var(--bfq-glow-2-faint); text-shadow: 0 0 8px var(--bfq-glow-2-faint);
}
.bfq[data-bfq-glow] .bfq-source-row b, .bfq[data-bfq-glow] .bfq-source-value { color: var(--bfq-glow-2); }
.bfq[data-bfq-glow] .bfq-source-value--none { color: var(--bfq-color-muted-slate); }
.bfq[data-bfq-glow] .bfq-translation,
.bfq[data-bfq-glow] .bfq-stats { border-top-color: var(--bfq-glow-color); border-bottom-color: var(--bfq-glow-color); }
.bfq[data-bfq-glow] .bfq-info-toggles { border-bottom-color: var(--bfq-glow-color); }
.bfq[data-bfq-glow] .bfq-toggle-track { border-color: var(--bfq-glow-color); }
.bfq[data-bfq-glow] .bfq-toggle-track::after { background: var(--bfq-glow-color); }
.bfq[data-bfq-glow] .bfq-toggle input:checked + .bfq-toggle-track { background: var(--bfq-glow-color); border-color: var(--bfq-glow-color); box-shadow: 0 0 8px var(--bfq-glow-color); }
.bfq[data-bfq-glow] .bfq-toggle input:checked + .bfq-toggle-track::after { background: var(--bfq-color-ground, #000); }
.bfq[data-bfq-glow] .bfq-translation-label { color: var(--bfq-glow-2); }
.bfq[data-bfq-glow] .bfq-quote-text {
  text-shadow: 0 0 12px var(--bfq-glow-faint), 0 0 24px var(--bfq-glow-faint);
}
.bfq[data-bfq-glow] .bfq-panel-heading,
.bfq[data-bfq-glow] .bfq-stats,
.bfq[data-bfq-glow] .bfq-info-toggles,
.bfq[data-bfq-glow] .bfq-filter-group legend,
.bfq[data-bfq-glow] .bfq-source-row,
.bfq[data-bfq-glow] .bfq-appearance {
  text-shadow: 0 0 8px var(--bfq-glow-faint);
}

.bfq .bfq-range-label { display: inline-flex; align-items: center; gap: 5px; line-height: 1; }
.bfq .bfq-range-arrow { display: block; opacity: .85; }

/* ---------- appearance picker (folded, below the strip) ---------- */

.bfq .bfq-appearance {
  border-top: var(--bfq-border-width) solid var(--bfq-hairline-on-dark);
  color: var(--bfq-color-muted-on-dark);
  font-family: var(--bfq-font-family-mono);
  font-size: var(--bfq-font-size-micro);
  letter-spacing: var(--bfq-letter-spacing-micro);
  text-transform: uppercase;
}
.bfq .bfq-appearance summary {
  list-style: none;
  text-transform: inherit;
  cursor: pointer;
  padding: var(--bfq-space-sm) var(--bfq-space-md);
  display: flex;
  align-items: center;
  gap: var(--bfq-space-xs);
  min-height: 44px;
}
.bfq .bfq-appearance summary::-webkit-details-marker { display: none; }
.bfq .bfq-appearance summary::before { content: "+"; width: 1em; display: inline-block; }
.bfq .bfq-appearance[open] summary::before { content: "\2013"; }
.bfq .bfq-appearance summary:focus-visible { outline: 2px solid var(--bfq-focus-ring-on-dark); outline-offset: -2px; }
.bfq .bfq-appearance-body {
  padding: 0 var(--bfq-space-md) var(--bfq-space-md);
  display: grid;
  gap: var(--bfq-space-sm);
}
.bfq .bfq-appearance-row { display: flex; flex-wrap: wrap; gap: var(--bfq-space-sm); align-items: center; }
#bfq-mode-chips, #bfq-palette-chips { display: flex; flex-wrap: wrap; gap: var(--bfq-space-sm); }
.bfq .bfq-appearance-row > span:first-child { min-width: 64px; }
.bfq .bfq-swatch-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 14px;
  line-height: 1;
  border: var(--bfq-border-width) solid var(--bfq-hairline-on-dark);
  border-radius: var(--bfq-radius-pill);
  background: transparent;
  color: var(--bfq-color-muted-on-dark);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.bfq .bfq-swatch-chip[aria-pressed="true"] { color: var(--bfq-color-on-ground); border-color: var(--bfq-color-on-ground); }
.bfq .bfq-swatch-chip:focus-visible { outline: 2px solid var(--bfq-focus-ring-on-dark); outline-offset: 2px; }
.bfq .bfq-swatch-chip .bfq-swatch { margin-left: -4px; }
.bfq .bfq-swatch { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); flex: none; }

/* ---------- bottom strip ---------- */

.bfq .bfq-footstrip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bfq-space-md);
  min-height: var(--bfq-footstrip-height);
  padding: var(--bfq-space-xs) var(--bfq-space-md);
  border-top: var(--bfq-border-width) solid var(--bfq-hairline-on-dark);
  font-family: var(--bfq-font-family-mono);
  font-size: var(--bfq-font-size-micro);
  letter-spacing: var(--bfq-letter-spacing-micro);
  text-transform: uppercase;
  color: var(--bfq-color-muted-on-dark);
  flex-wrap: wrap;
}

.bfq .bfq-footstrip-right {
  display: inline-flex;
  align-items: center;
  gap: var(--bfq-space-2xs);
  white-space: nowrap;
}

.bfq .bfq-live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--bfq-color-accent-red);
}

@media (max-width: 480px) {
  .bfq {
    padding: 0 var(--bfq-space-sm) var(--bfq-space-lg);
  }
  .bfq .bfq-card,
  .bfq .bfq-refine-panel {
    padding: var(--bfq-card-padding-mobile);
  }
}

/* ---------- surrounding section ----------
   The script paints the container matching the "fill" selector with the palette ground
   and sets its text colour, but Divi gives headings and text modules their own colour
   rules, which win over the inherited value. These make everything in the painted
   section follow the palette. Add class "bfq-keep-color" to an element to opt out. */
/* Divi paints section backgrounds, patterns and masks in its own layers; hide
   them while the section carries a palette so the ground colour shows. */
[data-quotatron-palette] > .et_pb_background_pattern,
[data-quotatron-palette] > .et_pb_background_mask,
[data-quotatron-palette] > .et_pb_section_video_bg,
[data-quotatron-palette] > .et_pb_section_parallax {
  display: none !important;
}
[data-quotatron-palette] :is(h1, h2, h3, h4, h5, h6):not(.bfq *):not(.bfq-keep-color),
[data-quotatron-palette] .et_pb_text:not(.bfq-keep-color),
[data-quotatron-palette] .et_pb_text :is(p, li, span, strong, em):not(.bfq-keep-color) {
  color: var(--quotatron-ink) !important;
}
[data-quotatron-palette] .et_pb_text a:not(.bfq-keep-color) {
  color: var(--quotatron-accent) !important;
}

/* Flodesk inline form inside the painted section. Flodesk injects its own
   styles (and inline colours) at runtime; these make the form sit on the
   palette ground with the palette's text and accent. Selectors match the
   ff-<formId>__part class pattern by suffix so they survive a form change. */
[data-quotatron-palette] [id^="fd-form-"] [class*="__container"],
[data-quotatron-palette] [id^="fd-form-"] [class*="__wrapper"],
[data-quotatron-palette] [id^="fd-form-"] [class*="__form"] {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
[data-quotatron-palette] [id^="fd-form-"] [class*="__title"],
[data-quotatron-palette] [id^="fd-form-"] [class*="__subtitle"],
[data-quotatron-palette] [id^="fd-form-"] [class*="__text"],
[data-quotatron-palette] [id^="fd-form-"] [class*="__label"],
[data-quotatron-palette] [id^="fd-form-"] [class*="__footer"],
[data-quotatron-palette] [id^="fd-form-"] h1,
[data-quotatron-palette] [id^="fd-form-"] h2,
[data-quotatron-palette] [id^="fd-form-"] h3,
[data-quotatron-palette] [id^="fd-form-"] p {
  color: var(--quotatron-ink) !important;
}
[data-quotatron-palette] [id^="fd-form-"] input:not([type="submit"]):not([type="button"]) {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--quotatron-ink) !important;
  border: 1px solid var(--quotatron-line) !important;
}
[data-quotatron-palette] [id^="fd-form-"] input::placeholder {
  color: var(--quotatron-muted) !important;
}
[data-quotatron-palette] [id^="fd-form-"] button,
[data-quotatron-palette] [id^="fd-form-"] [class*="__button"],
[data-quotatron-palette] [id^="fd-form-"] input[type="submit"] {
  background: var(--quotatron-accent) !important;
  background-color: var(--quotatron-accent) !important;
  color: var(--quotatron-ground) !important;
  border-color: var(--quotatron-accent) !important;
}

/* ---------- newsletter signup frame ----------
   Settings → Newsletter signup box. The script sets --bfq-signup-color and
   --bfq-signup-bg on the block from the palette, plus data-bfq-border/glow. */
.bfq-signup-box {
  box-sizing: border-box;
  border-radius: 14px;
  padding: 28px 24px;
  background: var(--bfq-signup-bg, transparent) !important;
  transition: box-shadow 200ms ease, border-color 200ms ease, background-color 200ms ease;
}
.bfq-signup-box[data-bfq-border="thin"]  { border: 1px solid var(--bfq-signup-color); }
.bfq-signup-box[data-bfq-border="thick"] { border: 3px solid var(--bfq-signup-color); }
.bfq-signup-box[data-bfq-glow="soft"]    { box-shadow: 0 0 22px color-mix(in srgb, var(--bfq-signup-color) 45%, transparent), inset 0 0 18px color-mix(in srgb, var(--bfq-signup-color) 12%, transparent); }
.bfq-signup-box[data-bfq-glow="strong"]  { box-shadow: 0 0 44px color-mix(in srgb, var(--bfq-signup-color) 75%, transparent), 0 0 8px color-mix(in srgb, var(--bfq-signup-color) 60%, transparent), inset 0 0 24px color-mix(in srgb, var(--bfq-signup-color) 18%, transparent); }
/* Flodesk fills its own box: keep the frame's background visible through it. */
.bfq-signup-box [class*="__container"], .bfq-signup-box [class*="__wrapper"], .bfq-signup-box [class*="__form"] { background: transparent !important; }