/* ============================================================
   Big-Five test + report — layout on top of tokens.css / base.css / mm.css
   Single brass accent discipline. Reuses .btn, .q, .lead, .reveal, .topbar.
   ============================================================ */

/* ---------- stage machine (intro · test · done) ---------- */
.bf-stage { display: none; }
.bf-stage.is-active { display: block; }

/* ---------- intro: prep + mode picker -------------------- */
.bf-prep { margin: var(--space-6) 0 var(--space-7); padding: 0; list-style: none; max-width: 46ch; }
.bf-prep li {
  position: relative;
  padding: var(--space-3) 0 var(--space-3) var(--space-6);
  border-top: 1px solid var(--rule);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--ink-muted);
}
.bf-prep li::before {
  content: "·";
  position: absolute;
  left: var(--space-2);
  color: var(--brass);
  font-weight: var(--weight-semi);
}

.bf-modes { display: grid; gap: var(--space-4); margin-bottom: var(--space-7); }
@media (min-width: 36rem) { .bf-modes { grid-template-columns: 1fr 1fr; } }

.bf-mode {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: left;
  padding: var(--space-5);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  background: var(--paper);
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .bf-mode:hover { border-color: var(--brass); transform: translateY(-1px); }
}
.bf-mode:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.bf-mode__title { font-family: var(--font-display); font-size: var(--text-lg); color: var(--ink); }
.bf-mode__desc { font-family: var(--font-body); font-size: var(--text-sm); color: var(--ink-soft); }
.bf-mode--soon { cursor: not-allowed; opacity: 0.6; }
.bf-mode--soon:hover { border-color: var(--rule); transform: none; }
.bf-mode__badge {
  align-self: flex-start;
  margin-top: var(--space-2);
  padding: 2px var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brass-deep);
  background: var(--cream-deep);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-1);
}

/* ---------- wizard: progress + timer --------------------- */
.bf-progress {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--cream);
  padding: var(--space-4) 0 var(--space-3);
  border-bottom: 1px solid var(--rule);
}
.bf-progress__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  margin-bottom: var(--space-2);
}
.bf-progress__count { font-weight: var(--weight-semi); color: var(--ink-muted); }
.bf-progress__timer { font-variant-numeric: tabular-nums; }
.bf-progress__bar { height: 3px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.bf-progress__fill {
  height: 100%;
  width: 0;
  background: var(--brass);
  transition: width var(--dur-base) var(--ease-out);
}

/* ---------- wizard: question ----------------------------- */
.bf-q { margin: var(--space-8) 0 var(--space-7); border: 0; padding: 0; }
.bf-q__stem {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--ink-soft);
  margin-bottom: var(--space-3);
}
.bf-q__text {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: var(--space-6);
  max-width: 22ch;
}

/* 5-point Likert */
.bf-likert {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.bf-likert__anchor {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-soft);
  flex: 0 0 auto;
  width: 4.5rem;
}
.bf-likert__anchor--hi { text-align: right; }
.bf-likert__opts {
  display: flex;
  gap: var(--space-3);
  flex: 1 1 auto;
  justify-content: center;
}
.bf-likert__opt {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--rule-strong);
  background: var(--paper);
  cursor: pointer;
  transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out), transform 160ms var(--ease-out);
}
/* graduated sizes: 1 and 5 largest, 3 smallest — classic semantic-differential look */
.bf-likert__opt[data-v="1"], .bf-likert__opt[data-v="5"] { width: 3rem; height: 3rem; }
.bf-likert__opt[data-v="2"], .bf-likert__opt[data-v="4"] { width: 2.5rem; height: 2.5rem; }
.bf-likert__opt[data-v="3"] { width: 2rem; height: 2rem; }
@media (hover: hover) and (pointer: fine) {
  .bf-likert__opt:hover { border-color: var(--brass); transform: scale(1.06); }
}
.bf-likert__opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.bf-likert__opt:has(input:checked) { background: var(--brass); border-color: var(--brass); }
.bf-likert__opt:has(input:checked)::after { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--paper); }
.bf-likert__opt:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

/* tighten the scale on small phones so the "Не … Да" row never wraps */
@media (max-width: 30rem) {
  .bf-likert__anchor { width: 3rem; }
  .bf-likert__opts { gap: var(--space-2); }
  .bf-likert__opt[data-v="1"], .bf-likert__opt[data-v="5"] { width: 2.5rem; height: 2.5rem; }
  .bf-likert__opt[data-v="2"], .bf-likert__opt[data-v="4"] { width: 2.1rem; height: 2.1rem; }
  .bf-likert__opt[data-v="3"] { width: 1.75rem; height: 1.75rem; }
}

.bf-q__scalehint {
  margin-top: var(--space-4);
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  min-height: 1.4em;
}

/* ---------- wizard: nav ---------------------------------- */
.bf-nav { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-6); }
.bf-nav .btn { min-width: 7rem; justify-content: center; }
.bf-nav__back[disabled] { opacity: 0.35; pointer-events: none; }

/* "still unanswered" hint shown when finishing with gaps */
.bf-remaining { margin-top: var(--space-4); font-family: var(--font-body); font-size: var(--text-sm); color: var(--brass-deep); }
.bf-remaining[hidden] { display: none; }

/* ---------- consent block (capture) ---------------------- */
.bf-consent {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin: var(--space-4) 0;
  max-width: 36rem;
}
.bf-consent input[type="checkbox"] {
  margin-top: 0.25em;
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  accent-color: var(--brass);
}
.bf-consent label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--ink-muted);
}
.bf-consent a { color: var(--brass); border-bottom: 1px solid currentColor; }

.bf-turnstile { margin: var(--space-4) 0; }

/* sex selector (bfas-100 capture only — genders the report text) */
.bf-bfas-only[hidden] { display: none; }
.bf-sex { border: 0; padding: 0; margin: var(--space-2) 0 var(--space-4); max-width: 36rem; }
.bf-sex__legend { font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.5; color: var(--ink-muted); margin-bottom: var(--space-3); padding: 0; }
.bf-sex__opts { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.bf-sex__opt { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--text-base); color: var(--ink); cursor: pointer; }
.bf-sex__opt input { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; accent-color: var(--brass); cursor: pointer; }

/* couple match (relationship lens capture only — optional, double-consent) */
.bf-couple-only[hidden] { display: none; }
/* job lens: name + recruitment consent swap in, B2C consent swaps out (display beats [hidden]) */
.bf-job-only[hidden], .bf-b2c-only[hidden] { display: none; }
.bf-job input[type="text"] { margin-bottom: var(--space-3); }
.bf-couple {
  border: 0;
  border-left: 3px solid var(--brass-soft);
  padding: var(--space-1) 0 var(--space-1) var(--space-4);
  margin: var(--space-2) 0 var(--space-4);
  max-width: 36rem;
}
.bf-couple__legend {
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  letter-spacing: 0.01em; color: var(--ink-muted); padding: 0; margin-bottom: var(--space-2);
}
.bf-couple__lede {
  font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.55;
  color: var(--ink-soft); margin: 0 0 var(--space-3);
}
.bf-couple input[type="email"] { margin-bottom: var(--space-3); }
.bf-couple__consent {
  display: flex; gap: var(--space-3); align-items: flex-start;
  font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.5; color: var(--ink-muted);
}
.bf-couple__consent input[type="checkbox"] {
  margin-top: 0.25em; width: 1.15rem; height: 1.15rem; flex: 0 0 auto; accent-color: var(--brass);
}

/* cooldown notice */
.bf-cooldown {
  display: none;
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-2);
  background: var(--cream-deep);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--ink-muted);
}
.bf-cooldown.is-visible { display: block; }

.bf-disclaimer {
  margin-top: var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  max-width: 50ch;
}

/* ---------- report --------------------------------------- */
.bf-report__intro { margin: var(--space-5) 0 var(--space-8); max-width: 52ch; }

.bf-overview { display: grid; gap: var(--space-4); margin-bottom: var(--space-9); }
.bf-overview__row { display: grid; grid-template-columns: 11rem 1fr; gap: var(--space-4); align-items: center; }
@media (max-width: 32rem) { .bf-overview__row { grid-template-columns: 1fr; gap: var(--space-2); } }
.bf-overview__name { font-family: var(--font-display); font-size: var(--text-base); color: var(--ink); }
.bf-overview__name small { display: block; font-family: var(--font-body); font-size: var(--text-xs); color: var(--ink-soft); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }

.bf-bar { position: relative; height: 0.5rem; background: var(--rule); border-radius: 4px; }
.bf-bar__fill { position: absolute; inset-block: 0; left: 0; background: var(--brass); border-radius: 4px; transition: width var(--dur-slow) var(--ease-out); }
.bf-bar__band {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-left: var(--space-3);
}

.bf-trait { margin-bottom: var(--space-9); padding-top: var(--space-6); border-top: 2px solid var(--rule); }
.bf-trait__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-4); }
.bf-trait__name { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--ink); }
.bf-trait__score { font-family: var(--font-body); font-size: var(--text-sm); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
/* dignified pole spectrum under the trait name (e.g. „Спонтанност ↔ Структура") */
.bf-trait__spectrum { flex-basis: 100%; margin: 0; font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semi); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-soft); }
/* general description zone — quiet secondary context ("what this trait measures") */
.bf-trait__about-block { margin: 0 0 var(--space-6); max-width: 64ch; }
.bf-eyebrow {
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-soft);
  margin: 0 0 var(--space-2);
}
.bf-trait__about { font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.6; color: var(--ink-soft); margin: 0; max-width: 64ch; }

/* "your results" каре — the personal zone. The brass left-rule carries the meaning so it survives the (fill-stripped) PDF. */
.bf-results {
  margin: 0 0 var(--space-6);
  padding: var(--space-5) var(--space-6);
  background: var(--cream-deep);
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--brass);
  border-radius: var(--r-2);
}
.bf-results__title {
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--brass-deep);
  margin: 0 0 var(--space-3);
}
.bf-results__score { font-family: var(--font-body); font-size: var(--text-sm); color: var(--ink-muted); font-variant-numeric: tabular-nums; margin: 0 0 var(--space-2); }
.bf-results > .bf-bar { margin: 0 0 var(--space-5); }
.bf-trait__summary { font-family: var(--font-display); font-size: var(--text-md); line-height: 1.5; color: var(--ink); margin: 0 0 var(--space-6); max-width: 60ch; }

/* life domains — flowing editorial rows (sidehead label + prose), NOT cards */
.bf-domains { display: flex; flex-direction: column; gap: var(--space-6); margin-top: var(--space-2); }
.bf-domain { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--space-2) var(--space-6); align-items: baseline; }
@media (max-width: 40rem) { .bf-domain { grid-template-columns: 1fr; gap: var(--space-1); } }
.bf-domain__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brass);
  margin: 0;
  padding-top: 0.2em;
  hyphens: none;
}
.bf-domain__body { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.65; color: var(--ink); margin: 0; max-width: 62ch; }

/* editorial SVG header art per trait + a report hero — decorative, brand-tokenised */
.bf-hero { height: 132px; margin: var(--space-5) 0 var(--space-7); border-radius: var(--r-2); background: var(--cream-deep); overflow: hidden; }
.bf-trait__art { height: 84px; margin: 0 0 var(--space-5); border-radius: var(--r-1); background: var(--cream-deep); overflow: hidden; }
.bf-hero svg, .bf-trait__art svg { display: block; width: 100%; height: 100%; }

/* duotone photo hero (per-lens; brass/cream tint via CSS → recolours for white-label) */
.bf-hero--photo { height: auto; aspect-ratio: 2 / 1; position: relative; }
.bf-hero__img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center 38%;
  filter: grayscale(1) contrast(1.04) brightness(1.08);
}
.bf-hero--photo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, var(--brass) 0%, var(--brass-deep) 100%);
  mix-blend-mode: multiply; opacity: 0.8;
}
@media (max-width: 40rem) { .bf-hero--photo { aspect-ratio: 3 / 2; } }
.bf-art-stroke { stroke: var(--brass); fill: none; }
.bf-art-fill { fill: var(--brass); }
.bf-art-soft { fill: var(--brass); opacity: 0.24; }

/* per-trait chapter hero: brass duotone band + motif texture + knockout title */
.bf-trait__hero {
  position: relative; overflow: hidden;
  min-height: 200px; margin: 0 0 var(--space-6);
  padding: var(--space-6) var(--space-7);
  border-radius: var(--r-1);
  background: linear-gradient(135deg, var(--brass) 0%, var(--brass-deep) 100%);
  display: flex; align-items: flex-end;
}
.bf-trait__hero-art { position: absolute; inset: 0; opacity: 0.42; }
.bf-trait__hero-art svg { display: block; width: 100%; height: 100%; }
.bf-trait__hero-art .bf-art-stroke { stroke: var(--cream); }
.bf-trait__hero-art .bf-art-fill { fill: var(--cream); }
.bf-trait__hero-art .bf-art-soft { fill: var(--cream); opacity: 0.22; }
.bf-trait__hero .bf-trait__head { position: relative; margin: 0; }
.bf-trait__hero .bf-trait__name { color: var(--cream); font-size: clamp(1.9rem, 4.5vw, 2.8rem); line-height: 1.05; }
.bf-trait__hero .bf-trait__spectrum { color: var(--cream); opacity: 0.9; }
.bf-trait__hero .bf-info { color: var(--cream); border-color: rgba(244, 237, 224, 0.7); }

/* employer SD validity reading: level word + 3-segment meter */
.bf-emp-sd__level { font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--ink); margin: 0 0 var(--space-2); }
.bf-emp-sd__meter { display: flex; gap: 4px; margin: 0 0 var(--space-3); max-width: 240px; }
.bf-emp-sd__meter span { height: 6px; flex: 1; background: var(--rule); border-radius: 3px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.bf-emp-sd__meter span.is-active { background: var(--brass); }
.bf-emp-sd__meter span.is-active.is-elevated { background: var(--brass-deep); }

/* anti-gaming: the QUESTION TEXT is non-selectable (forces a screenshot; slows AI reading).
   Scoped to the item/stem only — the answer scale stays selectable to limit the
   select-to-read cost for low-vision users; copy/contextmenu are also blocked on #bf-q in wizard.js. */
#bf-q-legend, #bf-stem, #bf-text { -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.bf-timer--over { color: var(--brass-deep); font-style: italic; }

/* employer doc: aspect breakdown under each trait */
.bf-emp-aspects { margin: var(--space-3) 0 0 var(--space-4); padding-left: var(--space-4); border-left: 2px solid var(--rule); display: grid; gap: var(--space-3); }
.bf-emp-aspect { break-inside: avoid; }
.bf-emp-aspect__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.bf-emp-aspect__name { font-family: var(--font-body); font-weight: var(--weight-semi); font-size: var(--text-sm); color: var(--ink); }
.bf-emp-aspect__pct { font-family: var(--font-body); font-size: var(--text-xs); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.bf-emp-aspect__rec { font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.5; color: var(--ink-soft); margin: 2px 0 0; }
.bf-emp-howto { font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.55; color: var(--ink-soft); border-left: 2px solid var(--brass-soft); padding-left: var(--space-3); margin: var(--space-4) 0; max-width: 64ch; }
.bf-emp-howto[hidden] { display: none; }
/* thin per-trait motif accent in the employer doc (light, not a full hero) */
.bf-emp-trait__art { height: 38px; margin: 0 0 var(--space-2); border-radius: var(--r-1); background: var(--cream-deep); overflow: hidden; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.bf-emp-trait__art svg { display: block; width: 100%; height: 100%; }

/* overview note (bfas): explains what the percentile number means */
.bf-overview__note { font-family: var(--font-body); font-size: var(--text-sm); color: var(--ink-soft); margin: 0 0 var(--space-5); max-width: 54ch; }
.bf-overview__note[hidden] { display: none; }

/* ---------- BFAS aspect sub-sections ---------- */
.bf-aspects {
  margin-top: var(--space-7);
  padding-left: var(--space-5);
  border-left: 2px solid var(--rule);
  display: grid;
  gap: var(--space-6);
}
.bf-aspects__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brass);
  margin: 0;
}
.bf-aspect__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); }
.bf-aspect__name { font-family: var(--font-display); font-size: var(--text-lg); color: var(--ink); }
.bf-aspect__score { font-family: var(--font-body); font-size: var(--text-sm); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.bf-aspect .bf-bar { margin: var(--space-2) 0 var(--space-3); }
.bf-bar--sm { height: 0.35rem; }
.bf-aspect__about { font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.55; color: var(--ink-soft); margin: 0 0 var(--space-3); max-width: 62ch; }
/* aspect "your result" sub-zone — a lighter echo of the trait каре (thin rule, not a box) */
.bf-aspect__result { margin-top: var(--space-3); padding-left: var(--space-4); border-left: 2px solid var(--brass-soft); }
.bf-aspect__result-label {
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--brass);
  margin: 0 0 var(--space-2);
}
.bf-aspect__summary { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; color: var(--ink); margin: 0 0 var(--space-2); max-width: 62ch; }
.bf-aspect__behavior { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; color: var(--ink-muted); margin: 0; max-width: 62ch; }

.bf-pdf-row { margin: var(--space-7) 0; }

/* ---------- couple (relationship) report ---------------------- */
.bf-cpl-highlights {
  margin: var(--space-5) 0 var(--space-7);
  padding: var(--space-4) var(--space-5);
  background: var(--cream-deep);
  border-left: 3px solid var(--brass);
  border-radius: 0 var(--r-2) var(--r-2) 0;
}
.bf-cpl-highlight { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.55; color: var(--ink); margin: 0 0 var(--space-2); }
.bf-cpl-highlight:last-child { margin-bottom: 0; }
.bf-cpl-highlight strong { color: var(--brass-deep); }

.bf-cpl-trait { padding: var(--space-6) 0; border-top: 1px solid var(--rule); }
.bf-cpl-trait:first-of-type { border-top: 0; }
.bf-cpl-trait__name { font-family: var(--font-display); font-size: var(--text-xl); color: var(--ink); margin: 0 0 var(--space-4); }
.bf-cpl-bars { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); max-width: 42rem; }
.bf-cpl-bar { display: grid; grid-template-columns: 8rem 1fr 3rem; align-items: center; gap: var(--space-3); }
.bf-cpl-bar__lab { font-family: var(--font-body); font-size: var(--text-sm); color: var(--ink-muted); }
.bf-cpl-bar__pct { font-family: var(--font-body); font-size: var(--text-sm); color: var(--ink-soft); font-variant-numeric: tabular-nums; text-align: right; }
.bf-cpl-bar .bf-bar { margin: 0; }
.bf-cpl-trait__reading { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; color: var(--ink); margin: 0; max-width: 62ch; }

/* partner 2 bar in a second tone + a diagonal hatch, so the two columns read apart
   without relying on hue/lightness alone (colour-blind / low-vision safe) */
.bf-bar--alt .bf-bar__fill {
  background-color: var(--ink-muted);
  background-image: repeating-linear-gradient(45deg, transparent 0 5px, rgba(251, 247, 238, 0.5) 5px 7px);
}

@media (max-width: 40rem) {
  .bf-cpl-bar { grid-template-columns: 5.5rem 1fr 2.6rem; gap: var(--space-2); }
}

/* ---------- employer document (B2B job lens) ---------------- */
.bf-emp-trait { padding: var(--space-5) 0; border-top: 1px solid var(--rule); }
.bf-emp-trait:first-of-type { border-top: 0; }
.bf-emp-trait__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.bf-emp-trait__name { font-family: var(--font-display); font-size: var(--text-xl); color: var(--ink); margin: 0; }
.bf-emp-trait__pct { font-family: var(--font-body); font-size: var(--text-sm); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.bf-emp-trait .bf-bar { margin: var(--space-3) 0; max-width: 42rem; }
.bf-emp-trait__rec { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; color: var(--ink); margin: 0; max-width: 62ch; }
.bf-emp-note { margin: var(--space-6) 0 0; padding: var(--space-4) var(--space-5); background: var(--cream-deep); border-left: 3px solid var(--brass); border-radius: 0 var(--r-2) var(--r-2) 0; }
.bf-emp-note__body { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; color: var(--ink); margin: var(--space-2) 0 0; max-width: 62ch; }

/* job candidate report: name byline (screen) + hiring caveat + print running footer */
.bf-report__name { font-family: var(--font-body); font-size: var(--text-lg); color: var(--brass-deep); margin: var(--space-2) 0 0; }
.bf-report__name[hidden] { display: none; }
.bf-hiring-caveat { font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.6; color: var(--ink-muted); margin: var(--space-6) 0 0; padding: var(--space-4) var(--space-5); background: var(--cream-deep); border-left: 3px solid var(--brass); border-radius: 0 var(--r-2) var(--r-2) 0; max-width: 62ch; }
.bf-hiring-caveat[hidden] { display: none; }
.bf-running-footer { display: none; }

/* ---------- partner lead-magnet (parenting_partner): specialist CTA + ZaDeteto CTA + creator credit ---------- */
.bf-partner-cta { margin: var(--space-8) 0 0; }
.bf-partner-cta[hidden] { display: none; }

/* the distributing specialist's photo card */
.bf-cta-card { display: flex; gap: var(--space-5); align-items: center; padding: var(--space-5); background: var(--cream-deep); border-radius: var(--r-3); break-inside: avoid; }
.bf-cta-card__photo { flex: 0 0 auto; width: 88px; height: 88px; border-radius: 50%; object-fit: cover; background: var(--cream); }
.bf-cta-card__photo[hidden] { display: none; }
.bf-cta-card__body { min-width: 0; }
.bf-cta-card__eyebrow { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semi); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--brass-deep); margin: 0 0 var(--space-1); }
.bf-cta-card__name { font-family: var(--font-display); font-size: var(--text-lg); color: var(--ink); margin: 0; }
.bf-cta-card__title { font-family: var(--font-body); font-size: var(--text-sm); color: var(--brass-deep); margin: 0.15rem 0 0; }
.bf-cta-card__blurb { font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.55; color: var(--ink-muted); margin: var(--space-2) 0 var(--space-3); max-width: 52ch; }

/* ZaDeteto directory CTA (constant, below the partner card) */
/* deeper brand shade (--brass-deep) for the solid panel: white text clears WCAG AA with
   margin (≈6:1), where the lighter --brass would not at the body line's reduced opacity */
.bf-cta-zd { margin: var(--space-5) 0 0; padding: var(--space-6); background: var(--brass-deep); border-radius: var(--r-3); text-align: center; break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.bf-cta-zd__h { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-medium); line-height: 1.2; color: var(--paper); margin: 0; }
.bf-cta-zd__body { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.55; color: oklch(0.97 0.018 85 / 0.92); margin: var(--space-3) auto var(--space-5); max-width: 46ch; }
.bf-cta-zd__btn { display: inline-block; font-family: var(--font-body); font-weight: var(--weight-semi); font-size: var(--text-base); color: var(--brass-deep); background: var(--paper); padding: 0.7em 1.5em; border-radius: var(--r-2); text-decoration: none; transition: transform 160ms ease, background 200ms ease; }
.bf-cta-zd__btn:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .bf-cta-zd__btn:hover { background: #fff; } }

/* creator credit + methodology + references footnote (very bottom of the report) */
.bf-credit { margin: var(--space-7) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--rule); }
.bf-credit[hidden] { display: none; }
.bf-credit__line { font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.55; color: var(--ink-muted); margin: 0; max-width: none; }
.bf-credit__method { font-family: var(--font-body); font-size: var(--text-xs); line-height: 1.5; color: var(--ink-soft); margin: var(--space-2) 0 0; max-width: none; }
.bf-refs { margin: var(--space-4) 0 0; }
.bf-refs__h { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semi); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-soft); margin: 0 0 var(--space-2); }
.bf-refs__list { margin: 0; padding-left: 1.1em; }
.bf-refs__list li { font-family: var(--font-body); font-size: var(--text-xs); line-height: 1.45; color: var(--ink-soft); margin: 0 0 0.3rem; }

@media (max-width: 34rem) {
  .bf-cta-card { flex-direction: column; text-align: center; }
  .bf-cta-card__blurb { max-width: none; }
}

/* ---------- bell-curve placement viz (Understand-Myself style) ---------- */
.bf-curve { width: 100%; margin: var(--space-3) 0 var(--space-4); }
.bf-curve--mini { margin: 0; max-width: 210px; }
.bf-curve--lg { max-width: 400px; }
.bf-curve--sm { max-width: 320px; }
.bf-curve__svg { display: block; width: 100%; height: auto; overflow: visible; }
.bf-curve__line { fill: none; stroke: var(--ink-soft); stroke-width: 1.5; }
.bf-curve__shade { fill: var(--brass); opacity: 0.16; }
.bf-curve__axis { stroke: var(--rule); stroke-width: 1; }
.bf-curve__mid { stroke: var(--rule-strong); stroke-width: 1; stroke-dasharray: 2 3; }
.bf-curve__marker { stroke: var(--brass-deep); stroke-width: 3; stroke-linecap: round; }
.bf-curve__pin { fill: var(--brass-deep); }

/* "how to read the curve" legend — a quiet tip box under the overview (screen + print) */
.bf-curve-legend {
  font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.55; color: var(--ink-muted);
  background: var(--cream-deep); border-left: 3px solid var(--brass); border-radius: 0 var(--r-2) var(--r-2) 0;
  padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-7); max-width: 64ch;
}
.bf-curve-legend[hidden] { display: none; }
.bf-curve-legend b { color: var(--brass-deep); font-weight: var(--weight-semi); }
.bf-curve-legend__h { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semi); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--brass-deep); margin: 0 0 var(--space-2); }
.bf-curve-legend p { margin: 0 0 var(--space-2); }
.bf-curve-legend p:last-child { margin-bottom: 0; }

/* lens synthesis — the 2-3 paragraph "what it means for your <lens>" block after the aspects */
.bf-synthesis { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--rule); }
.bf-synthesis__h { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semi); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--brass-deep); margin: 0 0 var(--space-4); }
.bf-synthesis__p { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.65; color: var(--ink); margin: 0 0 var(--space-4); max-width: 64ch; }
.bf-synthesis__p:last-child { margin-bottom: 0; }

/* ⓘ info trigger — opens the explanation modal */
.bf-info {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.25rem; height: 1.25rem; flex: 0 0 auto; padding: 0; margin-left: 0.15em;
  font-family: var(--font-body); font-size: 0.72rem; font-style: italic; font-weight: var(--weight-semi);
  line-height: 1; color: var(--brass-deep);
  background: transparent; border: 1.5px solid var(--brass-soft); border-radius: 50%;
  cursor: pointer; vertical-align: middle;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .bf-info:hover { border-color: var(--brass); background: var(--cream-deep); } }
.bf-info:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* explanation modal (native <dialog>) */
.bf-modal {
  width: min(34rem, calc(100vw - 2 * var(--gutter)));
  padding: var(--space-6) var(--space-6) var(--space-7);
  border: 1px solid var(--rule-strong); border-radius: var(--r-2);
  background: var(--paper); color: var(--ink); z-index: var(--z-overlay);
  box-shadow: 0 1px 2px oklch(0.37 0.082 60 / 0.06), 0 24px 60px -28px oklch(0.37 0.082 60 / 0.4);
}
.bf-modal::backdrop { background: oklch(0.21 0.005 60 / 0.42); }
.bf-modal__close {
  -webkit-appearance: none; appearance: none;
  float: right; margin: -0.4rem -0.4rem 0 var(--space-4);
  width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--text-md); line-height: 1; color: var(--ink-soft);
  background: transparent; border: 0; border-radius: var(--r-1); cursor: pointer;
}
.bf-modal__close:hover { color: var(--ink); }
.bf-modal__close:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.bf-modal__title { font-family: var(--font-display); font-size: var(--text-xl); color: var(--ink); margin: 0 0 var(--space-3); }
.bf-modal__body { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; color: var(--ink-muted); margin: 0; }

/* collapsible (accordion) — compact by default; reuses the nav <details> idiom */
.bf-acc { margin-top: var(--space-4); }
.bf-acc__summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--brass-deep);
}
.bf-acc__summary::-webkit-details-marker { display: none; }
.bf-acc__summary::after { content: "\25BE"; font-size: 0.85em; color: var(--brass); transition: transform var(--dur-base) var(--ease-out); }
.bf-acc[open] > .bf-acc__summary::after { transform: rotate(180deg); }
.bf-acc__summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: var(--r-1); }
.bf-acc > .bf-domains, .bf-acc > .bf-aspect__result { margin-top: var(--space-4); }
.bf-acc--aspect { margin-top: var(--space-2); }

/* "what it measures" — surfaced in the ⓘ modal on screen, printed inline in the PDF */
.bf-about { display: none; }
.bf-about__body { font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.6; color: var(--ink-soft); margin: 0; max-width: 64ch; }

/* overview rows now carry a mini bell-curve (name + ⓘ | curve | percentile).
   scoped to :has(.bf-curve) so the dormant BFI-44 overview keeps its own 2-col rule. */
.bf-overview:has(.bf-curve) .bf-overview__row { grid-template-columns: 13rem 1fr 2.5rem; align-items: center; }
.bf-overview__name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2em 0.4em; }
.bf-overview__name small { flex: 1 0 100%; }
.bf-overview__trait { font-family: var(--font-display); font-size: var(--text-base); color: var(--ink); }
.bf-overview__pct { font-family: var(--font-body); font-weight: var(--weight-semi); font-variant-numeric: tabular-nums; color: var(--brass-deep); text-align: right; }
@media (max-width: 34rem) {
  .bf-overview:has(.bf-curve) .bf-overview__row { grid-template-columns: 1fr; gap: var(--space-2); }
  .bf-overview .bf-curve--mini { max-width: 280px; }
  .bf-overview__pct { text-align: left; }
}

/* honor reduced-motion: drop the layout-affecting + decorative transitions */
@media (prefers-reduced-motion: reduce) {
  .bf-bar__fill, .bf-progress__fill, .bf-acc__summary::after, .bf-mode, .bf-likert__opt, .bf-info, .bf-curve__svg { transition: none !important; }
}

/* ---------- print: the "PDF" --------------------------------
   The Save-as-PDF path. Hide chrome, force light, page-break per trait. */
@media print {
  /* tight margins + bottom space for the running footer (job report) */
  /* The emailed PDF's footer (name·date·email left + "стр. X / Y" right, on ONE
     line) is rendered by the generation step (gen_pdf.py — Chrome footerTemplate
     via Playwright), which hides the in-page .bf-running-footer to avoid a double.
     The .bf-running-footer below stays as the self-print (window.print) fallback. */
  @page { margin: 1.2cm 1.3cm 1.5cm; }
  .topbar, .footer-min, .skip-link, .bf-pdf-row, .nav__lang, [data-no-print] { display: none !important; }
  body { background: #fff; color: #000; font-size: 10pt; line-height: 1.4; }
  .tool { padding-block: 0; }
  /* use the full page width — the 36rem screen column wastes huge side margins + adds pages */
  .tool__container, .container, .container--med, .container--wide {
    max-width: none !important; width: auto !important; margin-inline: 0 !important; padding-inline: 0 !important;
  }
  .bf-print-header { display: flex !important; }

  /* premium letterhead: keep the hero photo (the one image) as a slim banner */
  .bf-hero { display: block !important; height: auto !important; max-height: 4.2cm; margin: 0 0 0.45cm !important; border-radius: 2px; overflow: hidden; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .bf-hero--photo { aspect-ratio: auto !important; }
  .bf-hero__img { max-height: 4.2cm; width: 100%; object-fit: cover; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .bf-hero--photo::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* per-trait chapter hero prints as a brass chapter-band atop each trait page */
  .bf-trait__hero { min-height: 0; height: 3.3cm; margin: 0 0 0.5cm !important; padding: 0.35cm 0.5cm !important; border-radius: 2px; -webkit-print-color-adjust: exact; print-color-adjust: exact; break-inside: avoid; }
  .bf-trait__hero-art { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .bf-trait__hero .bf-trait__name { color: var(--cream) !important; font-size: 20pt; }
  .bf-trait__hero .bf-trait__spectrum { color: var(--cream) !important; opacity: 0.92; }
  .bf-trait__hero .bf-info { display: none !important; }

  /* headings + lede: denser */
  .tool__h1 { font-size: 19pt !important; line-height: 1.08; margin: 0 0 0.15cm; max-width: none; }
  .eyebrow { font-size: 7.5pt !important; }
  .bf-report__intro, .bf-report__name { font-size: 10pt !important; margin: 0.15cm 0 0.4cm !important; max-width: none; }

  /* how-to-read-the-curve note → a quiet boxed footnote */
  .bf-curve-legend { display: block !important; font-size: 8.5pt !important; line-height: 1.4; color: #333 !important; background: #fff !important; border-left: 2px solid #000; padding: 0.12cm 0.3cm; margin: 0 0 0.5cm; max-width: none; }
  .bf-curve-legend b { color: #000 !important; }
  .bf-curve-legend__h { font-size: 7.5pt !important; color: #000 !important; margin: 0 0 0.1cm !important; }
  .bf-curve-legend p { margin: 0 0 0.12cm !important; max-width: none; }
  .bf-curve-legend p:last-child { margin-bottom: 0 !important; }
  .bf-synthesis { margin-top: 0.4cm !important; padding-top: 0.3cm !important; border-top: 1px solid #bbb; }
  .bf-synthesis__h { font-size: 7.5pt !important; color: #000 !important; margin: 0 0 0.15cm !important; }
  .bf-synthesis__p { font-size: 10pt !important; line-height: 1.45; margin: 0 0 0.2cm !important; max-width: none; }

  /* overview: tight rows */
  .bf-overview { gap: 0.12cm !important; margin-bottom: 0.5cm !important; }
  .bf-overview__note { font-size: 8.5pt !important; margin-bottom: 0.25cm !important; max-width: none; }
  .bf-overview__trait { font-size: 10pt; }
  .bf-overview__name small { font-size: 7pt; }
  .bf-overview__pct { font-size: 9.5pt; }

  /* per-trait block — compact, flows across pages with atomic children */
  .bf-trait { border-top: 1px solid #bbb; margin-bottom: 0.5cm !important; padding-top: 0.4cm !important; }
  .bf-trait__head { margin-bottom: 0.12cm !important; }
  .bf-trait__name { font-size: 14pt !important; }
  .bf-about { display: block !important; margin: 0 0 0.3cm !important; }
  .bf-about__body, .bf-trait__about { color: #333 !important; font-size: 9pt !important; line-height: 1.4; max-width: none; }

  /* results каре */
  .bf-results { background: #fff !important; border: 1px solid #bbb; border-left: 2.5px solid #000; padding: 0.3cm 0.4cm !important; margin-bottom: 0.35cm !important; break-inside: avoid; }
  .bf-results__title { font-size: 7.5pt !important; margin-bottom: 0.1cm !important; }
  .bf-results__score { font-size: 9.5pt !important; margin-bottom: 0.15cm !important; }
  .bf-results__title, .bf-results__score, .bf-eyebrow, .bf-aspect__result-label { color: #000 !important; }
  .bf-trait__summary { font-size: 10pt !important; line-height: 1.42; margin: 0 0 0.3cm !important; max-width: none; }

  /* life domains — tight sidehead rows, full width */
  .bf-domains { gap: 0.25cm !important; margin-top: 0.15cm !important; }
  .bf-domain { grid-template-columns: 3.2cm 1fr !important; gap: 0.05cm 0.4cm !important; break-inside: avoid; }
  .bf-domain__label { font-size: 7.5pt !important; color: #000 !important; }
  .bf-domain__body { font-size: 9.5pt !important; line-height: 1.4; max-width: none; }

  /* aspects */
  .bf-aspects { border-left: 2px solid #bbb; margin-top: 0.4cm !important; padding-left: 0.35cm !important; gap: 0.3cm !important; break-inside: avoid; }
  .bf-aspects__label { color: #000 !important; }
  .bf-aspect { break-inside: avoid; }
  .bf-aspect__name { font-size: 11.5pt !important; }
  .bf-aspect__score { font-size: 9pt !important; }
  .bf-aspect__result { border-left: 1.5px solid #888; }
  .bf-aspect__summary, .bf-aspect__behavior { font-size: 9.5pt !important; line-height: 1.4; max-width: none; }
  .bf-acc { margin-top: 0.25cm !important; }
  .bf-acc__summary { color: #000 !important; }
  .bf-acc__summary::after { display: none !important; }

  /* bell curves: smaller in print so they don't eat the page; grayscale, solid-black marker */
  .bf-curve { margin: 0.1cm 0 0.2cm !important; }
  .bf-curve--lg { max-width: 7.5cm !important; }
  .bf-curve--sm { max-width: 6cm !important; }
  .bf-curve--mini { max-width: 5cm !important; }
  .bf-curve__line { stroke: #333 !important; }
  .bf-curve__shade { fill: #000 !important; opacity: 0.1 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .bf-curve__axis, .bf-curve__mid { stroke: #bbb !important; }
  .bf-curve__marker { stroke: #000 !important; }
  .bf-curve__pin { fill: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* bars (couple / employer / bfi-44) */
  .bf-bar { background: #e5e5e5; }
  .bf-bar__fill { background: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .bf-bar__band, .bf-domain__label, .bf-overview__name small, .bf-aspects__label { color: #000 !important; }
  .bf-bar--alt .bf-bar__fill { background-color: #888 !important; background-image: repeating-linear-gradient(45deg, transparent 0 5px, rgba(255, 255, 255, 0.6) 5px 7px) !important; }

  /* interactive chrome off; accordions force-opened via JS (report.js beforeprint) */
  .bf-info, .bf-modal { display: none !important; }

  /* couple report */
  .bf-cpl-highlights { background: #fff !important; border-left: 2.5px solid #000; }
  .bf-cpl-highlight strong { color: #000 !important; }
  .bf-cpl-trait { break-inside: avoid; border-top: 1px solid #bbb; }
  /* employer document */
  .bf-emp-trait { break-inside: avoid; border-top: 1px solid #bbb; }
  .bf-emp-note { background: #fff !important; border-left: 2.5px solid #000; break-inside: avoid; }
  /* job candidate report: paginate + repeat the name on every page */
  body.bf-paginated .bf-trait:not(:first-of-type) { break-before: page; }
  .bf-hiring-caveat { background: #fff !important; border-left: 2.5px solid #000; break-inside: avoid; color: #333 !important; }
  body.bf-paginated .bf-running-footer { display: block; position: fixed; bottom: 0; left: 0; right: 0; font-family: Arial, sans-serif; font-size: 8.5pt; color: #666; border-top: 1px solid #ccc; padding: 3px 0; text-align: left; }

  .bf-disclaimer { font-size: 8pt !important; color: #555 !important; margin-top: 0.4cm !important; max-width: none; width: 100%; break-inside: avoid; }
  a { color: #000; text-decoration: none; }
}
.bf-print-header {
  display: none;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-5);
  border-bottom: 2px solid #000;
  font-family: var(--font-body);
  font-size: 12px;
  color: #000;
}
.bf-print-header__brand { font-family: var(--font-display); font-size: 16px; font-weight: var(--weight-semi); }

/* ─── voucher box (test start, generic entry) ─── */
.bf-voucher { margin: var(--space-5) auto 0; max-width: 420px; text-align: center; }
.bf-voucher__q { font-size: 14px; color: var(--ink-muted); margin: 0 0 var(--space-3); }
.bf-voucher__form { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.bf-voucher__input {
  flex: 1 1 180px; min-width: 0; padding: 12px 14px; font: inherit; font-size: 15px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 10px;
}
.bf-voucher__input:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; border-color: var(--brass); }
.bf-voucher.is-error .bf-voucher__input { border-color: #c0392b; }
.bf-voucher__form .btn { flex: 0 0 auto; min-width: 132px; } /* hold width through the „Проверявам…“ swap */
.bf-voucher__err { margin: var(--space-3) 0 0; color: #c0392b; font-size: 13px; }
.bf-voucher__err:empty { display: none; }

/* ─── partner acknowledgement banner (test start) ─── */
.bf-ack {
  margin: var(--space-4) auto 0; max-width: 560px; padding: 14px 18px;
  background: var(--cream); border: 1px solid var(--rule); border-radius: 12px; text-align: left;
}
.bf-ack__by { margin: 0; font-weight: var(--weight-semi); color: var(--ink); }
.bf-ack__privacy { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-muted); }

/* ─── partner privacy note on the report card ─── */
.bf-cta-card__privacy { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-muted); }