/* ABOUTME: Styles for the server-rendered components (market toggle, calculator, candidate brief, fact strip, TOC) and the render filter's nowrap span; tokens come from style.css and no Global Class is assumed. */

/* Dark grounds restate colours below. style.css forces headings and paragraphs white there at specificity (0,1,1), so cards and
   controls that must keep their own ink use two-class selectors, which beat it whatever the load order. */

/* ---------- Facts in running text ---------- */
/* A derived adjective fact ("90-day", the .adj keys the facts store builds from a duration) is one compound, and a line may not break at its hyphen. A fact whose display
   is a number and its unit ("10 business days", "net 15") is held together the same way, so a figure never ends one line with its unit starting the next. The list names
   the facts by key, because a sentence-length fact ("guarantee.scope") has to wrap as text. */
.ffdh-fact[data-fact$=".adj"],
.ffdh-fact:is(
  [data-fact="shortlist.latam_days"],
  [data-fact="shortlist.us_days"],
  [data-fact="guarantee.days"],
  [data-fact="guarantee.notice_days"],
  [data-fact="tail.months"],
  [data-fact="reply.sla"],
  [data-fact="leads.call_minutes"],
  [data-fact="retention.days"],
  [data-fact="payment.terms"]
) {
  white-space: nowrap;
}
/* A hyphenated compound in a heading or a FAQ question ("direct-hire", "work-sample"), which the KeepTogether render filter wraps in this span. */
.ffdh-nowrap {
  white-space: nowrap;
}

/* ---------- Market toggle ---------- */
.ffdh-market {
  display: grid;
  gap: var(--sp-5);
  font-family: var(--font-stack);
}
.ffdh-market__switch,
.ffdh-calc__market {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.ffdh-market__switch > legend,
.ffdh-calc__market > legend {
  padding: 0;
  margin-block-end: var(--sp-3);
  font-weight: 600;
  color: var(--c-ink-900);
}

/* The segmented pill: the radio is stretched over its label and made invisible, so the native control keeps its keyboard and screen-reader behaviour. */
.ffdh-market__options,
.ffdh-calc__options {
  display: inline-grid;
  grid-auto-flow: column;
  gap: var(--sp-1);
  max-width: 100%;
  padding: var(--sp-1);
  border: 2px solid var(--c-border-input);
  border-radius: var(--r-pill);
  background: var(--c-surface);
}
.ffdh-market__option,
.ffdh-calc__option {
  position: relative;
  display: block;
}
.ffdh-market__input,
.ffdh-calc__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.ffdh-market__label,
.ffdh-calc__label {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--sp-5);
  border-radius: var(--r-pill);
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-ink-900);
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
/* The calculator card is a container. Inside it, from about 348px of viewport up, the track is wide enough for both segments at 24px of side padding (they need about
   250px of track); below that the padding drops to --sp-3 on both sides, so the selected pill stays inside the track instead of breaking through its border.
   A toggle outside a container (Home's hero) has no query to match and keeps its padding. */
@container (max-width: 252px) {
  .ffdh-market__label,
  .ffdh-calc__label {
    padding-inline: var(--sp-3);
  }
}
.ffdh-market__option:hover .ffdh-market__input:not(:checked) + .ffdh-market__label,
.ffdh-calc__option:hover .ffdh-calc__input:not(:checked) + .ffdh-calc__label {
  background: var(--c-surface-mist);
}
.ffdh-market__input:checked + .ffdh-market__label,
.ffdh-calc__input:checked + .ffdh-calc__label {
  background: var(--c-fuchsia-600);
  color: var(--c-surface);
}
.ffdh-market__input:focus-visible,
.ffdh-calc__input:focus-visible {
  box-shadow: none;
}
.ffdh-market__input:focus-visible + .ffdh-market__label,
.ffdh-calc__input:focus-visible + .ffdh-calc__label {
  box-shadow: var(--ring);
}

/* Forced-colors mode drops box-shadow and author backgrounds, and the radio itself is invisible. So the label carries a transparent outline that the
   system turns into a visible one (the C2 pattern), and the checked label takes the system selection colours so selected still differs from unselected. */
@media (forced-colors: active) {
  .ffdh-market__input:focus-visible + .ffdh-market__label,
  .ffdh-calc__input:focus-visible + .ffdh-calc__label {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
  .ffdh-market__input:checked + .ffdh-market__label,
  .ffdh-calc__input:checked + .ffdh-calc__label {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
}

/* Both panels share one grid cell and the unchecked market is hidden, so switching never moves the page. Visibility follows :checked, never the default.
   Each panel and its price row are subgrids of the panels' two columns, so the numeral column is exactly as wide as the wider of the two prices:
   "flat per hire" sits one gap after it and stays put between markets. */
.ffdh-market__panels {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: var(--sp-4);
}
.ffdh-market__panel {
  grid-area: 1 / 1 / auto / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-content: start;
  min-width: 0;
  transition: opacity var(--dur) var(--ease-out), visibility var(--dur);
}
.ffdh-market__panel > * {
  grid-column: 1 / -1;
}
.ffdh-market:has(.ffdh-market__input[value="latam"]:checked) .ffdh-market__panel[data-market="us"],
.ffdh-market:has(.ffdh-market__input[value="us"]:checked) .ffdh-market__panel[data-market="latam"] {
  opacity: 0;
  visibility: hidden;
}
.ffdh-market__price {
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
  margin: 0;
}
.ffdh-market .ffdh-market__amount {
  display: inline-block;
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink-900);
}
.ffdh-market .ffdh-market__unit {
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-ink-900);
}
.ffdh-market__level {
  height: 4px; /* the same 4px as the section-heading level line in style.css and the mockup's .level */
  margin-block: var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--c-fuchsia-600);
}
.ffdh-market .ffdh-market__shortlist,
.ffdh-market .ffdh-market__example {
  max-width: var(--measure);
  margin: 0;
  color: var(--c-text-body);
}
.ffdh-market .ffdh-market__example {
  margin-block-start: var(--sp-3);
  color: var(--c-text-muted);
}
.ffdh-market__example strong {
  color: var(--c-ink-900);
}
.ffdh-market__source {
  display: block;
  font-size: var(--fs-small);
}

/* ---------- Calculator ---------- */
.ffdh-calc {
  container-type: inline-size;
  padding: var(--sp-5);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-xl);
  background: var(--c-surface);
  box-shadow: var(--sh-md);
  font-family: var(--font-stack);
  color: var(--c-text-body);
}
.ffdh-calc__tool {
  display: grid;
  gap: var(--sp-6);
}
.ffdh-calc__controls,
.ffdh-calc__results {
  display: grid;
  align-content: start;
  gap: var(--sp-5);
  min-width: 0;
}
@container (min-width: 720px) {
  .ffdh-calc__tool {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-8);
  }
}
.ffdh-calc__field {
  display: grid;
  gap: var(--sp-2);
}
.ffdh-calc__field > label,
.ffdh-calc__field-head > label {
  font-weight: 600;
  /* Hello's reset sets a label's line-height to 1, so a label that wraps ("Agency fee, as a share of salary" on a phone) would set its lines touching. */
  line-height: 1.5;
  text-wrap: balance;
  color: var(--c-ink-900);
}
.ffdh-calc__field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}
.ffdh-calc .ffdh-calc__rate {
  min-width: 3ch;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: end;
  color: var(--c-fuchsia-600);
}

/* Hello's reset draws every text and number input (and select) at (0,1,1): a 1px grey border, 3px corners and `transition: all .3s`. The fields sit in the calculator card, so
   the card's class lifts these rules to (0,2,0), above it, for every page the calculator is on. */
.ffdh-calc .ffdh-calc__select,
.ffdh-calc .ffdh-calc__text {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  border: 2px solid var(--c-border-input);
  border-radius: var(--r-md);
  background: var(--c-surface);
  font: inherit;
  font-size: max(16px, 1rem);
  color: var(--c-ink-900);
  transition: none;
}
.ffdh-calc__text--short {
  max-width: 8rem;
}
.ffdh-calc__money {
  position: relative;
}
.ffdh-calc__prefix {
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--sp-4);
  display: flex;
  align-items: center;
  font-weight: 600;
  color: var(--c-text-muted);
  pointer-events: none;
}
.ffdh-calc__money .ffdh-calc__text {
  padding-inline-start: var(--sp-6);
  font-variant-numeric: tabular-nums;
}
.ffdh-calc__text[aria-invalid="true"] {
  border-color: var(--c-danger);
}

/* The slider is 44px tall for a thumb (the minimum touch target); the 28px thumb keeps its 4px ring inside that height. The track and thumb are drawn for WebKit and Gecko. */
.ffdh-calc__range {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.ffdh-calc__range:focus-visible {
  box-shadow: none;
}
.ffdh-calc__range::-webkit-slider-runnable-track {
  height: var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--c-border-strong);
}
.ffdh-calc__range::-moz-range-track {
  height: var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--c-border-strong);
}
.ffdh-calc__range::-webkit-slider-thumb {
  width: 28px;
  height: 28px;
  margin-top: -10px; /* (8px track - 28px thumb) / 2: WebKit does not centre the thumb on the track itself */
  border: 4px solid var(--c-surface);
  border-radius: 50%;
  background: var(--c-fuchsia-600);
  box-shadow: var(--sh-cta);
  -webkit-appearance: none;
  appearance: none;
}
.ffdh-calc__range::-moz-range-thumb {
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  border: 4px solid var(--c-surface);
  border-radius: 50%;
  background: var(--c-fuchsia-600);
  box-shadow: var(--sh-cta);
}
.ffdh-calc__range:focus-visible::-webkit-slider-thumb {
  box-shadow: var(--ring);
}
.ffdh-calc__range:focus-visible::-moz-range-thumb {
  box-shadow: var(--ring);
}

.ffdh-calc__bars {
  display: grid;
  gap: var(--sp-4);
}
.ffdh-calc__bar-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
}
.ffdh-calc .ffdh-calc__bar-label {
  font-weight: 600;
  color: var(--c-ink-900);
}
.ffdh-calc .ffdh-calc__amount {
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--c-ink-900);
}
.ffdh-calc__track {
  grid-column: 1 / -1;
  display: block;
  height: var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--c-surface-mist);
  overflow: hidden;
}
.ffdh-calc__bar {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--r-pill);
  transform: scaleX(var(--ffdh-bar, 1));
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
.ffdh-calc__bar--agency {
  background: var(--c-periwinkle-600);
}
.ffdh-calc__bar--flat {
  background: var(--c-fuchsia-600);
}

/* The verdict is honest in both directions: a saving reads green, a loss reads gold (calm, not alarming), and neither is hidden. */
.ffdh-calc .ffdh-calc__verdict {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border-inline-start: 4px solid var(--c-text-muted);
  border-radius: var(--r-sm);
  background: var(--c-surface-ghost);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-ink-900);
}
.ffdh-calc .ffdh-calc__verdict[data-sign="save"] {
  border-inline-start-color: var(--c-success);
  color: var(--c-success);
}
.ffdh-calc .ffdh-calc__verdict[data-sign="loss"] {
  border-inline-start-color: var(--c-gold-400);
  background: var(--c-gold-100);
  color: var(--c-gold-700);
}
.ffdh-calc .ffdh-calc__verdict[data-sign="invalid"] {
  color: var(--c-text-muted);
}
.ffdh-calc .ffdh-calc__breakeven {
  margin: 0;
  color: var(--c-text-muted);
}
.ffdh-calc__breakeven strong {
  font-variant-numeric: tabular-nums;
  color: var(--c-ink-900);
}

/* Static example table and sources: shared by the full view and view="examples". The table is drawn like the [ffdh_table] component (ffdh-content.css): rows divided by a
   hairline on the surface under a pale heading band, with money end-aligned. Hello's reset puts a grey 1px box round every cell (0,0,2), tints the odd rows (0,1,4), darkens the
   row under the pointer and leaves a 15px margin under the table; each is restated here, so the table meets its frame with no second edge and no empty band. */
.ffdh-calc > .ffdh-calc__examples {
  margin-block-start: var(--sp-8);
}
.ffdh-calc__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.ffdh-calc__table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--c-text-body);
}
.ffdh-calc__caption {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-small);
  text-align: start;
  caption-side: top;
  color: var(--c-text-muted);
}
.ffdh-calc__table th,
.ffdh-calc__table td {
  padding: var(--sp-3) var(--sp-4);
  border: 0;
  border-top: 1px solid var(--c-border);
  text-align: start;
  vertical-align: top;
  line-height: 1.4;
}
.ffdh-calc__table tbody tr:is(:nth-child(odd), :nth-child(even)) > * {
  background: var(--c-surface);
}
.ffdh-calc__table tbody tr:hover > * {
  background: var(--c-surface-ghost);
}
.ffdh-calc__table thead th {
  border-top: 0;
  border-bottom: 2px solid var(--c-border-strong);
  background: var(--c-surface-mist);
  font-size: var(--fs-small);
  font-weight: 600;
  white-space: nowrap;
}
.ffdh-calc__table :is(th, td):nth-child(n + 2) {
  text-align: end;
}
/* The heading's 2px rule is the line under it, so the first group's first row draws no hairline on top of it (the shared table component does the same). */
.ffdh-calc__table thead + tbody > tr:first-child > * {
  border-top: 0;
}
.ffdh-calc__table tbody + tbody tr:first-child > * {
  border-top: 2px solid var(--c-border-strong);
}
.ffdh-calc__table tbody th {
  font-weight: 600;
  color: var(--c-ink-900);
}
.ffdh-calc__market-tag {
  display: block;
  margin-block-start: var(--sp-1);
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--c-text-muted);
}
.ffdh-calc__table td[data-sign="save"] {
  font-weight: 600;
  color: var(--c-success);
}
.ffdh-calc__table td[data-sign="loss"] {
  font-weight: 600;
  color: var(--c-gold-700);
}
/* The table scrolls in its frame when the frame is narrower than the table's figures need, and meets the shared table component's guarantees (ffdh-content.css) when it does: the
   frame is a container so the caption takes the frame's own width and the pinned column is capped from it, a figure or heading never wraps (the role column gives the room), and
   the end shade, which that file draws on this frame too, says there is more. The table is as wide as the frame where its figures fit, so the role column takes what they leave. */
.ffdh-calc__table-wrap {
  overflow-y: hidden;
  container-type: inline-size;
}
.ffdh-calc__caption {
  position: sticky;
  inset-inline-start: 0;
  box-sizing: border-box;
  width: 100cqi;
}
.ffdh-calc__table :is(th, td):nth-child(n + 2) {
  white-space: nowrap;
}
.ffdh-calc__table :is(thead, tbody) tr > :first-child {
  position: relative;
}
.ffdh-calc__market-tag {
  text-wrap: balance;
}
/* A phone's padding from 48rem down, tighter between the figure columns, so the figures and a role's longest word fit the frame at tablet widths without scrolling. */
@container (max-width: 48rem) {
  .ffdh-calc__caption,
  .ffdh-calc__table th,
  .ffdh-calc__table td {
    padding-inline: var(--sp-3);
  }
  .ffdh-calc__table :is(th, td):nth-child(n + 2):not(:last-child) {
    padding-inline: var(--sp-2);
  }
}
/* Narrower than the figures need (the role column's longest word plus four figure columns, with the phone padding), the role column is pinned and the role and market names wrap
   to fit. The column is 40% of the frame, so the strip beside it holds a whole figure and the next column peeks at the edge, and grows to 8.75rem (the longest role word,
   "representative", with its padding) where the frame can spare it: up to 50%, which still leaves the strip a whole figure. A word that fits is therefore never split, and the
   browser's own hyphenation, which splits a word at the end of a line even when it would fit whole on the next, stays off. The cells' opaque backgrounds keep scrolled cells from
   showing through, and the heading cell sits above the body's. */
@container (max-width: 32rem) {
  .ffdh-calc__table :is(thead, tbody) tr > :first-child {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    min-width: max(40cqi, min(8.75rem, 50cqi));
    max-width: max(40cqi, min(8.75rem, 50cqi));
    overflow-wrap: break-word;
    box-shadow: 1px 0 0 var(--c-border-strong);
  }
  .ffdh-calc__table thead th:first-child {
    z-index: 2;
    background: var(--c-surface-mist);
  }
  .ffdh-calc__table tbody th {
    background: var(--c-surface);
  }
}
/* Below 17.5rem of frame (a 320px phone on the calculator page) the type steps down to the small size and the padding to the next step, so the longest role word fits the
   column's 50%. */
@container (max-width: 17.5rem) {
  .ffdh-calc__table {
    font-size: var(--fs-small);
  }
  .ffdh-calc__caption,
  .ffdh-calc__table th,
  .ffdh-calc__table td {
    padding-inline: var(--sp-2);
  }
}
/* Below 15rem of frame (Home's calculator card on a 320 to 343px phone: a 216px frame at 320px) the type and padding step once more, so every word but "representative" fits; that one
   is wider than the column, so it is the only word allowed to hyphenate (hyphenate-limit-chars keeps shorter words whole). The type is 13px, a step under --fs-small (14px, the
   design system's smallest size): at 14px "Bookkeeping" and "development" are wider than the column's 50% in a 216px frame and would split mid-word. */
@container (max-width: 15rem) {
  .ffdh-calc__table {
    font-size: 0.8125rem;
  }
  .ffdh-calc__caption,
  .ffdh-calc__table th,
  .ffdh-calc__table td {
    padding-inline: var(--sp-1);
  }
  .ffdh-calc__table :is(thead, tbody) tr > :first-child {
    hyphens: auto;
    hyphenate-limit-chars: 13 4 4;
  }
}
/* The examples view has no .ffdh-calc card around it, so it carries its own type and keys the title off the shared block. */
.ffdh-calc-examples {
  font-family: var(--font-stack);
  color: var(--c-text-body);
}
.ffdh-calc__examples .ffdh-calc__sources-title {
  margin: var(--sp-6) 0 var(--sp-2);
  font-weight: 600;
  color: var(--c-ink-900);
}
.ffdh-calc__sources {
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding-inline-start: var(--sp-5);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-text-muted);
}
.ffdh-calc__sources a {
  color: var(--c-fuchsia-600);
}

/* ---------- Candidate brief ---------- */
.ffdh-brief {
  container-type: inline-size;
  padding: var(--sp-5);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-xl);
  background: var(--c-surface);
  box-shadow: var(--sh-md);
  font-family: var(--font-stack);
}
/* The candidate brief sits on a mist panel, which is the brief island's own wrapper, so it hugs the card with even room and ends where the card ends. The card carries
   two sheets behind it, drawn as negative-spread shadows (offset up, narrower), so the panel reads as one brief on top of a stack; the top padding makes room for them.
   The wrapper is found with :has(.ffdh-brief), which needs an evergreen browser; it was chosen over a class from classes.json because the wrapper is just an island and
   the brief inside is what marks it. The rules sit under .elementor and use a doubled class where they must outrank the island class's zero padding. */
.elementor .ffdh-island.ffdh-island:has(.ffdh-brief) {
  padding: var(--sp-6);
  padding-block-start: calc(var(--sp-6) + var(--sp-3));
  padding-block-end: var(--brief-shadow-reach);
  border-radius: var(--r-xl);
  background: var(--c-surface-mist);
}
.elementor .ffdh-island {
  /* How far --sh-lg reaches below the card: its 24px offset plus its 48px blur less its 16px spread. The panel's bottom padding is this, at every width, so its bottom
     edge is clean; change the two together. */
  --brief-shadow-reach: calc(var(--sp-6) + var(--sp-5));
}
.elementor .ffdh-island .ffdh-brief {
  --sheet-step: var(--sp-3);
  box-shadow:
    0 calc(var(--sheet-step) * -1) 0 calc(var(--sheet-step) * -0.5) var(--c-surface),
    0 calc(var(--sheet-step) * -1) 0 calc(var(--sheet-step) * -0.5 + 1px) var(--c-border-strong),
    0 calc(var(--sheet-step) * -2) 0 calc(var(--sheet-step) * -1) var(--c-surface),
    0 calc(var(--sheet-step) * -2) 0 calc(var(--sheet-step) * -1 + 1px) var(--c-border-strong),
    var(--sh-lg);
}
@media (max-width: 767px) {
  .elementor .ffdh-island.ffdh-island:has(.ffdh-brief) {
    padding: var(--sp-4);
    padding-block-start: calc(var(--sp-4) + var(--sp-3));
    padding-block-end: var(--brief-shadow-reach);
  }
  .elementor .ffdh-island .ffdh-brief {
    padding: var(--sp-4);
  }
}
/* The head hangs from the top: centred against a two-line title the 44px tile sat a few pixels lower than the card's side padding, so the card's first ink was further
   from its top border than from its side. */
.ffdh-brief__head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}
.ffdh-brief__mark {
  flex: none;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: var(--sp-2);
  border-radius: var(--r-md);
  background: var(--c-surface-mist);
  color: var(--c-periwinkle-600);
}
.ffdh-brief .ffdh-brief__title {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-ink-900);
}
.ffdh-brief .ffdh-brief__meta {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--c-text-muted);
}
/* A UTC offset is one token: a line may break before it, never inside it. */
.ffdh-brief__offset {
  white-space: nowrap;
}
.ffdh-brief__facts {
  display: grid;
  margin: var(--sp-4) 0 0;
}
.ffdh-brief__row {
  display: grid;
  gap: var(--sp-1);
  padding-block: var(--sp-3);
  border-top: 1px solid var(--c-border);
}
.ffdh-brief__row dt {
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-text-muted);
}
.ffdh-brief__row dd {
  margin: 0;
  line-height: 1.5;
  color: var(--c-ink-900);
}
@container (min-width: 440px) {
  .ffdh-brief__row {
    grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr);
    gap: var(--sp-4);
  }
}
.ffdh-brief__result {
  color: var(--c-success);
}
.ffdh-brief__skills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ffdh-brief__skills li {
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--c-surface-mist);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.4;
}
.ffdh-brief .ffdh-brief__notes {
  margin: 0;
  padding-block-start: var(--sp-3);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--c-text-muted);
}

/* ---------- Fact strip ---------- */
/* The strip is its own container; its items switch between a stack and a row, because a container cannot restyle itself. */
.ffdh-fact-strip {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-stack);
}
.ffdh-fact-strip__item {
  display: grid;
  gap: var(--sp-2);
  flex: 1 1 100%;
  align-content: start;
  padding-block: var(--sp-4);
  border-top: 1px solid var(--c-border-strong);
}
.ffdh-fact-strip__item:first-child {
  border-top: 0;
}
.ffdh-fact-strip__value {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--c-fuchsia-600);
}
.ffdh-fact-strip__part {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--sp-3);
}
/* Two promises in one item (market="both") share the cell, so each steps down one size to stay on a line. */
.ffdh-fact-strip__value:has(.ffdh-fact-strip__part + .ffdh-fact-strip__part) {
  flex-direction: column;
  gap: var(--sp-1);
  font-size: var(--fs-h3);
}
.ffdh-fact-strip__tag {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--c-text-muted);
}
.ffdh-fact-strip__label {
  line-height: 1.5;
  color: var(--c-text-muted);
}
/* Between 560px and 720px the shortlist item is too narrow for the longer figure and its tag on one line (it needs about 700px of strip, and the item gets
   239px of it at 768px), and the tags would wrap one at a time. Both drop under their figures there; the 720px is the strip width from which the longer pair fits
   with room to spare. */
@container (min-width: 560px) and (max-width: 719px) {
  .ffdh-fact-strip__part {
    flex-direction: column;
    align-items: flex-start;
  }
}
@container (min-width: 560px) {
  .ffdh-fact-strip__item {
    flex: 1 1 0;
    padding: var(--sp-2) var(--sp-6);
    border-top: 0;
    border-inline-start: 1px solid var(--c-border-strong);
  }
  .ffdh-fact-strip__item:first-child {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
  .ffdh-fact-strip__item[data-fact-item="shortlist"] {
    flex-grow: 1.6;
  }
}

/* ---------- Table of contents ---------- */
.ffdh-toc {
  font-family: var(--font-stack);
}
@media (min-width: 1081px) {
  .ffdh-toc {
    position: sticky;
    top: calc(var(--header-h-scrolled) + var(--sp-5));
    max-height: calc(100vh - var(--header-h-scrolled) - var(--sp-8));
    overflow-y: auto;
  }
}
.ffdh-toc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 44px;
  font-weight: 600;
  color: var(--c-ink-900);
  cursor: pointer;
  list-style: none;
}
.ffdh-toc__summary::-webkit-details-marker {
  display: none;
}
.ffdh-toc__summary::after {
  content: "";
  flex: none;
  /* A chevron from two borders on a 10px square turned 45 degrees; the 10px and 2.5px match the FAQ chevron in style.css so the two read as one family. */
  width: 10px;
  height: 10px;
  margin-inline-end: var(--sp-1);
  border-right: 2.5px solid var(--c-fuchsia-600);
  border-bottom: 2.5px solid var(--c-fuchsia-600);
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur) var(--ease-out);
}
.ffdh-toc__details[open] > .ffdh-toc__summary::after {
  transform: translateY(2px) rotate(225deg);
}
.ffdh-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ffdh-toc__link {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  border-inline-start: 2px solid var(--c-border-strong);
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--c-text-muted);
  text-decoration: none;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.ffdh-toc__link:hover {
  color: var(--c-ink-900);
}
/* The fuchsia level line marks the section being read, the same rule that sits under section headings. */
.ffdh-toc__link[aria-current="location"] {
  margin-inline-start: -2px;
  padding-inline-start: calc(var(--sp-4) - 2px);
  border-inline-start: 4px solid var(--c-fuchsia-600);
  font-weight: 600;
  color: var(--c-ink-900);
}

/* ---------- On dark grounds ---------- */
:where(.ffdh-section--dark, .ffdh-cta-band--dark, .ffdh-fact-band) .ffdh-market__switch > legend,
:where(.ffdh-section--dark, .ffdh-cta-band--dark, .ffdh-fact-band) .ffdh-market .ffdh-market__amount,
:where(.ffdh-section--dark, .ffdh-cta-band--dark, .ffdh-fact-band) .ffdh-market .ffdh-market__unit,
:where(.ffdh-section--dark, .ffdh-cta-band--dark, .ffdh-fact-band) .ffdh-market .ffdh-market__shortlist,
:where(.ffdh-section--dark, .ffdh-cta-band--dark, .ffdh-fact-band) .ffdh-market__example strong {
  color: var(--c-text-on-dark);
}
/* The example is a <p>, and style.css restates on-dark paragraph colour at (0,2,1) under .elementor; the muted tone needs one step more. */
.elementor :where(.ffdh-section--dark, .ffdh-cta-band--dark, .ffdh-fact-band) .ffdh-market .ffdh-market__example {
  color: var(--c-text-on-dark-muted);
}
:where(.ffdh-section--dark, .ffdh-cta-band--dark, .ffdh-fact-band) .ffdh-market__level {
  background: var(--c-fuchsia-400);
}
:where(.ffdh-section--dark, .ffdh-cta-band--dark, .ffdh-fact-band) .ffdh-fact-strip__item {
  border-color: var(--c-text-subtle);
}
:where(.ffdh-section--dark, .ffdh-cta-band--dark, .ffdh-fact-band) .ffdh-fact-strip__value {
  color: var(--c-fuchsia-400);
}
:where(.ffdh-section--dark, .ffdh-cta-band--dark, .ffdh-fact-band) .ffdh-fact-strip__tag,
:where(.ffdh-section--dark, .ffdh-cta-band--dark, .ffdh-fact-band) .ffdh-fact-strip__label {
  color: var(--c-text-on-dark-muted);
}
:where(.ffdh-section--dark, .ffdh-cta-band--dark, .ffdh-fact-band) .ffdh-toc__summary,
:where(.ffdh-section--dark, .ffdh-cta-band--dark, .ffdh-fact-band) .ffdh-toc__link[aria-current="location"] {
  color: var(--c-text-on-dark);
}
:where(.ffdh-section--dark, .ffdh-cta-band--dark, .ffdh-fact-band) .ffdh-toc__link {
  color: var(--c-text-on-dark-muted);
  border-inline-start-color: var(--c-text-subtle);
}
:where(.ffdh-section--dark, .ffdh-cta-band--dark, .ffdh-fact-band) .ffdh-toc__link[aria-current="location"] {
  border-inline-start-color: var(--c-fuchsia-400);
}
:where(.ffdh-section--dark, .ffdh-cta-band--dark, .ffdh-fact-band) .ffdh-toc__summary::after {
  border-color: var(--c-fuchsia-400);
}
/* Base :hover (0,2,0) outranks the (0,1,0) dark colour above, so the hover colour is restated here or it would turn ink on ink. */
:where(.ffdh-section--dark, .ffdh-cta-band--dark, .ffdh-fact-band) .ffdh-toc__link:hover {
  color: var(--c-text-on-dark);
}
/* The toggle sits straight on the ground, so its focus ring takes the on-dark ring instead of the light one. */
:where(.ffdh-section--dark, .ffdh-cta-band--dark, .ffdh-fact-band) .ffdh-market__input:focus-visible + .ffdh-market__label {
  box-shadow: var(--ring-on-dark);
}
/* The examples view has no card, so its title, sources and links take the ground's ink. */
:where(.ffdh-section--dark, .ffdh-cta-band--dark, .ffdh-fact-band) .ffdh-calc-examples .ffdh-calc__sources-title {
  color: var(--c-text-on-dark);
}
:where(.ffdh-section--dark, .ffdh-cta-band--dark, .ffdh-fact-band) .ffdh-calc-examples .ffdh-calc__sources {
  color: var(--c-text-on-dark-muted);
}
:where(.ffdh-section--dark, .ffdh-cta-band--dark, .ffdh-fact-band) .ffdh-calc-examples .ffdh-calc__sources a {
  color: var(--c-fuchsia-300);
}

/* ---------- Forced colors ---------- */
/* Backgrounds are dropped in this mode, so shapes that are only a background get a border, and state that is only a colour gets a second cue. */
@media (forced-colors: active) {
  /* The engine-prefixed track pseudos stay in separate rules: one unknown pseudo-element drops a whole selector list. */
  .ffdh-calc__range::-webkit-slider-runnable-track {
    border: 1px solid CanvasText;
  }
  .ffdh-calc__range::-moz-range-track {
    border: 1px solid CanvasText;
  }
  .ffdh-calc__track {
    border: 1px solid CanvasText;
  }
  .ffdh-calc__bar {
    forced-color-adjust: none;
  }
  .ffdh-calc__bar--agency {
    background: CanvasText;
  }
  .ffdh-calc__bar--flat {
    background: Highlight;
  }
  .ffdh-calc__text[aria-invalid="true"] {
    border-style: dashed;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ffdh-market__label,
  .ffdh-calc__label,
  .ffdh-market__panel,
  .ffdh-calc__bar,
  .ffdh-toc__summary::after,
  .ffdh-toc__link {
    transition: none;
  }
}