/* SFF 2026 - Approval Pack. Scoped to .sff26-approval; rules are written as
   ".sff26-approval .sff26-approval__x" so they outrank the theme's element
   rules (including its form rules, which assume a white page).
   The only !important is phone typography (see the phone block). */

.sff26-approval {
  --sff26-muted: #cfcfcf;
  --sff26-amber: #FCB316;
  --sff26-rule: #333;
  --sff26-error: #f2545b;
  --sff26-ease: cubic-bezier(.22, .8, .24, 1);
  --sff26-gut: 20px;
  --sff26-max: var(--forum-content-max, 1416px);
  --sff26-r: 12px;
  box-sizing: border-box;
  position: relative;
  padding: 120px 0 0;
  color: #fff;
  font-family: var(--forum-font, "Open Sans", Arial, sans-serif);
  /* a #link to the section lands its heading clear of the fixed header */
  scroll-margin-top: 12px;
}

/* From tablets up the content lines up with the site header and footer: the
   forum skin's --forum-content-max and --forum-gutter (these fallbacks without it) */
@media (min-width: 768px) {
  .sff26-approval { --sff26-gut: var(--forum-gutter, 40px); }
}
.sff26-approval *,
.sff26-approval *::before,
.sff26-approval *::after { box-sizing: border-box; }

/* Heading, line and button on the left; the terms on the right */
.sff26-approval .sff26-approval__w {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 40px 80px;
  align-items: start;
  max-width: calc(var(--sff26-max) + 2 * var(--sff26-gut));
  margin: 0 auto;
  padding: 0 var(--sff26-gut);
}
/* The left column stays in view while the terms scroll past it */
.sff26-approval .sff26-approval__hd { position: sticky; top: 132px; min-width: 0; }
.sff26-approval .sff26-approval__h2 {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -.018em;
  color: #fff;
  text-transform: none;
  text-wrap: balance;
}
.sff26-approval .sff26-approval__h2 .sff26-approval__accent { color: var(--sff26-amber); }
/* Letter spans added by module.js; the legacy SFF CSS paints "h2 span" amber */
.sff26-approval .sff26-approval__h2 .sff26-approval__wd,
.sff26-approval .sff26-approval__h2 .sff26-approval__ch { color: inherit; }
.sff26-approval .sff26-approval__wd { white-space: nowrap; }
.sff26-approval .sff26-approval__ch { display: inline-block; }
.sff26-approval .sff26-approval__lead {
  max-width: 56ch;
  margin: 18px 0 0;
  padding: 0;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--sff26-muted);
  text-wrap: pretty;
}
/* The button is the theme's own; only placed here */
.sff26-approval .sff26-approval__btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.sff26-approval .sff26-approval__note {
  margin: 16px 0 0;
  padding: 10px 14px;
  border: 1px dashed var(--sff26-amber);
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--sff26-amber);
  overflow-wrap: anywhere;
}

/* The terms: hairline rows, the term on the left of each */
.sff26-approval .sff26-approval__terms { min-width: 0; margin: 0; padding: 0; }
.sff26-approval .sff26-approval__row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 8px 32px;
  margin: 0;
  padding: 20px 0;
  border-bottom: 1px solid var(--sff26-rule);
}
.sff26-approval .sff26-approval__row:first-child { border-top: 1px solid var(--sff26-rule); }
.sff26-approval .sff26-approval__dt {
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 600;
  color: #fff;
}
.sff26-approval .sff26-approval__dd {
  min-width: 0;
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--sff26-muted);
}
.sff26-approval .sff26-approval__dd p { margin: 0; padding: 0; font-size: inherit; line-height: inherit; color: inherit; }
.sff26-approval .sff26-approval__dd p + p { margin-top: 8px; }
/* Inline links: underlined, so they read as links, not bold text */
.sff26-approval .sff26-approval__dd a {
  color: #fff;
  font-weight: inherit;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255, 255, 255, .6);
  text-underline-offset: 4px;
  transition: color .25s ease, text-decoration-color .25s ease;
}
.sff26-approval .sff26-approval__dd a:hover,
.sff26-approval .sff26-approval__dd a:focus-visible { color: var(--sff26-amber); text-decoration-color: currentColor; }
.sff26-approval a:focus-visible { outline: 2px solid var(--sff26-amber); outline-offset: 3px; }

/* The request dialog: a centred panel on desktop, a sheet from the bottom on phones */
.sff26-approval .sff26-approval__dlg {
  width: min(600px, calc(100vw - 48px));
  max-width: none;
  max-height: min(90vh, 760px);
  margin: auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: var(--sff26-r);
  background: #1b1b1b;
  color: #fff;
  font-family: var(--forum-font, "Open Sans", Arial, sans-serif);
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .7);
}
.sff26-approval .sff26-approval__dlg::backdrop {
  background: rgba(12, 12, 12, .8);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.sff26-approval .sff26-approval__x {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.sff26-approval .sff26-approval__x:hover,
.sff26-approval .sff26-approval__x:focus-visible { background: var(--sff26-amber); border-color: var(--sff26-amber); color: #141414; }
.sff26-approval .sff26-approval__x:focus { outline: none; }
.sff26-approval .sff26-approval__x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sff26-approval .sff26-approval__x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sff26-approval .sff26-approval__panel { padding: 36px 36px 34px; }
.sff26-approval .sff26-approval__dlg-t {
  margin: 0 56px 0 0;
  padding: 0;
  font-family: inherit;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #fff;
  text-transform: none;
}
.sff26-approval .sff26-approval__dlg-p { margin: 10px 0 0; padding: 0; font-size: 16px; line-height: 1.55; font-weight: 400; color: var(--sff26-muted); }
.sff26-approval .sff26-approval__dlg--done .sff26-approval__dlg-p { display: none; }
.sff26-approval .sff26-approval__embed { margin-top: 26px; }

/* The HubSpot form inside the dialog (legacy form markup). The theme's form
   styles assume a white page (dark labels, white fields), so the dialog
   restates them for its dark panel. */
.sff26-approval .sff26-approval__embed .hs_cos_wrapper_type_form > .form-title:empty { display: none; }
.sff26-approval .sff26-approval__embed form { margin: 0; padding: 0; background: transparent; font-family: inherit; }
.sff26-approval .sff26-approval__embed form fieldset {
  display: flex;
  gap: 16px;
  max-width: none;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}
.sff26-approval .sff26-approval__embed form fieldset .hs-form-field,
.sff26-approval .sff26-approval__embed form fieldset .hs-richtext { flex: 1 1 0; min-width: 0; width: auto; float: none; margin: 0; padding: 0; }
.sff26-approval .sff26-approval__embed form fieldset .input { margin: 0; }
.sff26-approval .sff26-approval__embed form .hs-form-field > label,
.sff26-approval .sff26-approval__embed form .hs-form-field > label span {
  display: inline;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0;
  color: #fff;
  text-transform: none;
}
.sff26-approval .sff26-approval__embed form .hs-form-field > label { display: block; margin-bottom: 6px; }
.sff26-approval .sff26-approval__embed form .hs-form-field > label .hs-form-required { margin-left: 2px; color: var(--sff26-amber); }
.sff26-approval .sff26-approval__embed form .hs-input:not([type=checkbox]):not([type=radio]) {
  display: block;
  width: 100%;
  height: 48px;
  min-height: 48px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 8px;
  background: #252424;
  box-shadow: none;
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.2;
  transition: border-color .2s ease;
}
.sff26-approval .sff26-approval__embed form textarea.hs-input { height: auto; min-height: 96px; padding: 12px 14px; }
.sff26-approval .sff26-approval__embed form select.hs-input option { color: #141414; }
.sff26-approval .sff26-approval__embed form .hs-input:not([type=checkbox]):not([type=radio]):hover { border-color: rgba(255, 255, 255, .4); }
.sff26-approval .sff26-approval__embed form .hs-input:not([type=checkbox]):not([type=radio]):focus { outline: none; border-color: var(--sff26-amber); }
.sff26-approval .sff26-approval__embed form .hs-input.invalid.error { border-color: var(--sff26-error); }
.sff26-approval .sff26-approval__embed form .hs-error-msgs { margin: 6px 0 0; padding: 0; list-style: none; }
.sff26-approval .sff26-approval__embed form .hs-error-msgs li,
.sff26-approval .sff26-approval__embed form .hs-error-msgs label,
.sff26-approval .sff26-approval__embed form .hs-main-font-element.hs-error-msg { margin: 0; padding: 0; font-size: 13px; line-height: 1.4; font-weight: 400; color: var(--sff26-error); }
.sff26-approval .sff26-approval__embed form .hs-error-msgs li::before { content: none; }
.sff26-approval .sff26-approval__embed form .hs-field-desc { margin: 4px 0 0; font-size: 13px; line-height: 1.4; color: var(--sff26-muted); }
.sff26-approval .sff26-approval__embed form .legal-consent-container { margin: 4px 0 0; padding: 0; }
.sff26-approval .sff26-approval__embed form .hs-richtext,
.sff26-approval .sff26-approval__embed form .hs-richtext p,
.sff26-approval .sff26-approval__embed form .legal-consent-container .hs-form-booleancheckbox-display > span,
.sff26-approval .sff26-approval__embed form .legal-consent-container .hs-form-booleancheckbox-display > span p {
  margin: 0;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--sff26-muted);
}
.sff26-approval .sff26-approval__embed form .hs-richtext p + p { margin-top: 8px; }
.sff26-approval .sff26-approval__embed form .hs-richtext a,
.sff26-approval .sff26-approval__embed form .legal-consent-container a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.sff26-approval .sff26-approval__embed form .inputs-list { margin: 8px 0 0; padding: 0; list-style: none; }
.sff26-approval .sff26-approval__embed form .inputs-list li::before { content: none; }
.sff26-approval .sff26-approval__embed form .hs-form-booleancheckbox-display,
.sff26-approval .sff26-approval__embed form .hs-form-checkbox-display,
.sff26-approval .sff26-approval__embed form .hs-form-radio-display { display: flex; align-items: flex-start; gap: 10px; margin: 0; color: var(--sff26-muted); }
.sff26-approval .sff26-approval__embed form input[type=checkbox],
.sff26-approval .sff26-approval__embed form input[type=radio] { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--sff26-amber); }
/* Submit: the theme's filled button look (a HubSpot form's submit is an input, so it can't take the theme's button markup) */
.sff26-approval .sff26-approval__embed form .hs-submit { margin: 24px 0 0; }
.sff26-approval .sff26-approval__embed form .hs-submit .actions { margin: 0; padding: 0; }
.sff26-approval .sff26-approval__embed form .hs-button,
.sff26-approval .sff26-approval__embed form input[type=submit] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 48px;
  margin: 0;
  padding: 10px 24px;
  border: 2px solid var(--forum-highlight, var(--sff26-amber));
  border-radius: 8px;
  background: var(--forum-highlight, var(--sff26-amber));
  box-shadow: none;
  color: #141414;
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: .5px;
  text-transform: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .3s ease, border-color .3s ease;
}
.sff26-approval .sff26-approval__embed form .hs-button:hover,
.sff26-approval .sff26-approval__embed form .hs-button:focus,
.sff26-approval .sff26-approval__embed form input[type=submit]:hover,
.sff26-approval .sff26-approval__embed form input[type=submit]:focus { border-color: #fdd57e; background: #fdd57e; color: #141414; outline: none; }
.sff26-approval .sff26-approval__embed form .hs-button:focus-visible,
.sff26-approval .sff26-approval__embed form input[type=submit]:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* The form's own thank-you message (inline response) */
.sff26-approval .sff26-approval__embed .submitted-message { margin: 0; padding: 0; font-size: 16px; line-height: 1.55; color: var(--sff26-muted); text-align: left; }
.sff26-approval .sff26-approval__embed .submitted-message:focus { outline: none; }
.sff26-approval .sff26-approval__embed .submitted-message p { margin: 0; padding: 0; font-size: inherit; line-height: inherit; color: inherit; text-align: inherit; }
.sff26-approval .sff26-approval__embed .submitted-message p + p { margin-top: 8px; }
.sff26-approval .sff26-approval__embed .submitted-message strong { display: block; font-size: 22px; line-height: 1.25; font-weight: 600; color: #fff; }
/* Forms made in HubSpot's new form editor draw from these variables
   (untested here: no such form exists yet) */
.sff26-approval .sff26-approval__embed [data-hsfc-id=Renderer] {
  --hsf-global__font-family: var(--forum-font, "Open Sans", Arial, sans-serif);
  --hsf-global__color: #fff;
  --hsf-background__background-color: transparent;
  --hsf-background__padding: 0;
  --hsf-richtext__color: var(--sff26-muted);
  --hsf-field-label__color: #fff;
  --hsf-field-input__color: #fff;
  --hsf-field-input__background-color: #252424;
  --hsf-field-input__border-color: rgba(255, 255, 255, .2);
  --hsf-field-input__border-radius: 8px;
  --hsf-button__color: #141414;
  --hsf-button__background-color: var(--forum-highlight, #FCB316);
  --hsf-button__border-radius: 8px;
  --hsf-erroralert__color: var(--sff26-error);
}

@media (prefers-reduced-motion: no-preference) {
  .sff26-approval .sff26-approval__dlg[open] { animation: sff26-approval-dlg .35s var(--sff26-ease); }
}
@keyframes sff26-approval-dlg {
  from { opacity: 0; transform: translateY(20px) scale(.98); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 991px) {
  .sff26-approval { padding-top: 96px; scroll-margin-top: 36px; }
  .sff26-approval .sff26-approval__w { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .sff26-approval .sff26-approval__hd { position: static; }
}

@media (max-width: 767px) {
  .sff26-approval { padding-top: 72px; scroll-margin-top: 40px; }
  .sff26-approval .sff26-approval__h2 { font-size: 32px; line-height: 1.12; }
  .sff26-approval .sff26-approval__lead { margin-top: 12px; font-size: 16px; }
  .sff26-approval .sff26-approval__btns .cta-button { flex: 1 1 100%; justify-content: center; }
  .sff26-approval .sff26-approval__row { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 16px 0; }
  .sff26-approval .sff26-approval__dd a { white-space: normal; overflow-wrap: anywhere; }
  .sff26-approval .sff26-approval__dlg { width: 100vw; max-height: 92vh; margin: auto 0 0; border-radius: var(--sff26-r) var(--sff26-r) 0 0; }
  .sff26-approval .sff26-approval__panel { padding: 28px 20px 24px; }
  .sff26-approval .sff26-approval__embed form fieldset { flex-direction: column; }
  .sff26-approval .sff26-approval__embed form .hs-button,
  .sff26-approval .sff26-approval__embed form input[type=submit] { width: 100%; }

  /* Phone type. The theme's main.css and the homepage's own head styles set
     h2 / h3 / p sizes and weights on phones with !important, so these must
     be !important too (phone typography only). */
  .sff26-approval .sff26-approval__h2 { font-size: 32px !important; line-height: 1.12 !important; font-weight: 600 !important; }
  .sff26-approval .sff26-approval__lead { font-size: 16px !important; line-height: 1.5 !important; }
  .sff26-approval .sff26-approval__dt,
  .sff26-approval .sff26-approval__dd,
  .sff26-approval .sff26-approval__dd p { font-size: 15px !important; line-height: 1.55 !important; }
  .sff26-approval .sff26-approval__dlg-t { font-size: 22px !important; line-height: 1.2 !important; font-weight: 600 !important; }
  .sff26-approval .sff26-approval__dlg-p,
  .sff26-approval .sff26-approval__embed .submitted-message p { font-size: 15px !important; line-height: 1.55 !important; }
  .sff26-approval .sff26-approval__embed form .hs-richtext p,
  .sff26-approval .sff26-approval__embed form .legal-consent-container .hs-form-booleancheckbox-display > span p { font-size: 13px !important; line-height: 1.5 !important; }
}

/* The smallest phones (320px): a little less padding and type in the button,
   so the longest label stays on one line (the theme does the same for its
   header buttons below 370px) */
@media (max-width: 359px) {
  .sff26-approval .sff26-approval__btns .cta-button { padding-left: 16px; padding-right: 16px; font-size: 15px; letter-spacing: .2px; }
}

/* Entrances, once each. module.js adds --armed only when it can also reveal,
   so without JavaScript or with reduced motion nothing is hidden: heading
   letters rise in, then the line and button, then the rows in turn. */
.sff26-approval.sff26-approval--armed .sff26-approval__ch {
  transition: opacity .45s ease, transform .6s var(--sff26-ease);
  transition-delay: calc(var(--sff26-ci, 0) * 16ms);
}
.sff26-approval.sff26-approval--armed .sff26-approval__h2:not(.sff26-approval__h2--in) .sff26-approval__ch { opacity: 0; transform: translateY(.4em); }
.sff26-approval.sff26-approval--armed .sff26-approval__lead,
.sff26-approval.sff26-approval--armed .sff26-approval__btns { transition: opacity .6s ease .2s, transform .8s var(--sff26-ease) .2s; }
.sff26-approval.sff26-approval--armed .sff26-approval__hd:not(.sff26-approval__hd--in) .sff26-approval__lead,
.sff26-approval.sff26-approval--armed .sff26-approval__hd:not(.sff26-approval__hd--in) .sff26-approval__btns { opacity: 0; transform: translateY(18px); }
.sff26-approval.sff26-approval--armed .sff26-approval__row {
  transition: opacity .55s ease, transform .75s var(--sff26-ease);
  transition-delay: calc(var(--sff26-i, 0) * 70ms + 100ms);
}
.sff26-approval.sff26-approval--armed .sff26-approval__terms--settled .sff26-approval__row { transition-delay: 0s; }
.sff26-approval.sff26-approval--armed .sff26-approval__terms:not(.sff26-approval__terms--in) .sff26-approval__row { opacity: 0; transform: translateY(16px); }

@media (prefers-reduced-motion: reduce) {
  .sff26-approval .sff26-approval__dd a,
  .sff26-approval .sff26-approval__x,
  .sff26-approval .sff26-approval__embed form .hs-input,
  .sff26-approval .sff26-approval__embed form .hs-button,
  .sff26-approval.sff26-approval--armed .sff26-approval__ch,
  .sff26-approval.sff26-approval--armed .sff26-approval__lead,
  .sff26-approval.sff26-approval--armed .sff26-approval__btns,
  .sff26-approval.sff26-approval--armed .sff26-approval__row { transition: none; }
  .sff26-approval.sff26-approval--armed .sff26-approval__h2:not(.sff26-approval__h2--in) .sff26-approval__ch,
  .sff26-approval.sff26-approval--armed .sff26-approval__hd:not(.sff26-approval__hd--in) .sff26-approval__lead,
  .sff26-approval.sff26-approval--armed .sff26-approval__hd:not(.sff26-approval__hd--in) .sff26-approval__btns,
  .sff26-approval.sff26-approval--armed .sff26-approval__terms:not(.sff26-approval__terms--in) .sff26-approval__row { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------------------------------------------
   Other forums (12 Oct, user: "globalise the new modules to be used on other forums"). Everything below applies only
   OFF SFF (".sff26-approval:not(.skin-sff *)"), so SFF keeps exactly the values above. The module reads the forum skin's tokens
   (the bss.css contract: --forum-text, --forum-text-body, --forum-text-muted, --forum-text-faint, --forum-surface,
   --forum-surface-raised, --forum-line, --forum-highlight, --forum-dark, the brand palette --forum-gold / -accent /
   -orchid / -teal) and the BSS layout (--bss-max, --bss-gutter), each falling back to SFF's value. A light edition
   (BSS Cambodia) sets --forum-highlight-text to its text colour: brand colours never as small text on a light page.
   BSS forces p / li to var(--forum-text-body) !important, so each text role sets that token to its own colour.
   --------------------------------------------------------------------------------------------------------------- */
.sff26-approval:not(.skin-sff *) {
  --sff26-gut: 15px; /* BSS's phone gutter (from 768px: --bss-gutter, below) */
  --sff26-max: var(--forum-content-max, var(--bss-max, 1416px));
  --sff26-amber: var(--forum-highlight, #FCB316);
  --sff26-hl-text: var(--forum-highlight-text, var(--forum-highlight, #FCB316));
  --sff26-fg: var(--forum-text, #fff);
  --sff26-muted: var(--forum-text-muted, #cfcfcf);
  --sff26-rule: var(--forum-line, #333);
  /* form errors: the forum's alert colour, pulled toward the text colour so the small text reads on the dialog */
  --sff26-error: color-mix(in srgb, var(--forum-alert, #f2545b) 65%, var(--sff26-fg));
  --sff26-amber-ink: var(--forum-dark, #141414); /* fallback for browsers without relative colours */
  --forum-text-body: var(--sff26-muted);
  color: var(--sff26-fg);
}
@supports (color: oklch(from red l c h)) {
  .sff26-approval:not(.skin-sff *) {
    /* ink on the highlight fill: white on a dark fill, a near-black on a light one (River Stone's oklch) */
    --sff26-amber-ink: oklch(from var(--sff26-amber) clamp(0.245, (0.62 - l) * 1000, 1) clamp(0, (l - 0.62) * 1000, 0.017) 248);
  }
}
@media (min-width: 768px) {
  .sff26-approval:not(.skin-sff *) { --sff26-gut: var(--forum-gutter, var(--bss-gutter, 40px)); }
}
.sff26-approval:not(.skin-sff *) .sff26-approval__h2,
.sff26-approval:not(.skin-sff *) .sff26-approval__dt,
.sff26-approval:not(.skin-sff *) .sff26-approval__dlg-t { color: var(--sff26-fg); }
/* the heading's accent is large text, but a light page's highlight can still fail 3:1 (Cambodia's coral): --forum-highlight-text */
.sff26-approval:not(.skin-sff *) .sff26-approval__h2 .sff26-approval__accent,
.sff26-approval:not(.skin-sff *) .sff26-approval__note { color: var(--sff26-hl-text); }
.sff26-approval:not(.skin-sff *) .sff26-approval__dd a { color: var(--sff26-fg); text-decoration-color: color-mix(in srgb, var(--sff26-fg) 60%, transparent); }
.sff26-approval:not(.skin-sff *) .sff26-approval__dd a:hover,
.sff26-approval:not(.skin-sff *) .sff26-approval__dd a:focus-visible { color: var(--sff26-hl-text); text-decoration-color: currentColor; }
/* The request dialog follows the page: the forum's card colour, its text and fields (dark on BSS Australia, light on
   Cambodia and India); the backdrop stays a dark scrim on every forum */
.sff26-approval:not(.skin-sff *) .sff26-approval__dlg { background: var(--forum-surface, #1b1b1b); color: var(--sff26-fg); }
.sff26-approval:not(.skin-sff *) .sff26-approval__x { border-color: color-mix(in srgb, var(--sff26-fg) 28%, transparent); color: var(--sff26-fg); }
.sff26-approval:not(.skin-sff *) .sff26-approval__x:hover,
.sff26-approval:not(.skin-sff *) .sff26-approval__x:focus-visible { border-color: var(--sff26-amber); background: var(--sff26-amber); color: var(--sff26-amber-ink); }
.sff26-approval:not(.skin-sff *) .sff26-approval__x:focus-visible { outline-color: var(--sff26-fg); }
.sff26-approval:not(.skin-sff *) .sff26-approval__embed form .hs-form-field > label,
.sff26-approval:not(.skin-sff *) .sff26-approval__embed form .hs-form-field > label span,
.sff26-approval:not(.skin-sff *) .sff26-approval__embed form .hs-richtext a,
.sff26-approval:not(.skin-sff *) .sff26-approval__embed form .legal-consent-container a,
.sff26-approval:not(.skin-sff *) .sff26-approval__embed .submitted-message strong { color: var(--sff26-fg); }
/* BSS paints every form's required mark in --forum-highlight and its errors in --forum-alert (!important), so the
   dialog points those tokens at its own readable colours */
.sff26-approval:not(.skin-sff *) .sff26-approval__embed form { --forum-alert: var(--sff26-error); }
.sff26-approval:not(.skin-sff *) .sff26-approval__embed form .hs-form-required { --forum-highlight: var(--sff26-hl-text); }
.sff26-approval:not(.skin-sff *) .sff26-approval__embed form .hs-form-field > label .hs-form-required { color: var(--sff26-hl-text); }
.sff26-approval:not(.skin-sff *) .sff26-approval__embed form .hs-input:not([type=checkbox]):not([type=radio]) { border-color: var(--forum-line, rgba(255, 255, 255, .2)); background: var(--forum-surface-raised, #252424); color: var(--sff26-fg); }
.sff26-approval:not(.skin-sff *) .sff26-approval__embed form .hs-input:not([type=checkbox]):not([type=radio]):hover { border-color: var(--forum-text-faint, rgba(255, 255, 255, .4)); }
.sff26-approval:not(.skin-sff *) .sff26-approval__embed form .hs-input:not([type=checkbox]):not([type=radio]):focus { border-color: var(--sff26-amber); }
.sff26-approval:not(.skin-sff *) .sff26-approval__embed form .hs-input.invalid.error { border-color: var(--sff26-error); }
/* Submit: the forum's primary button (BSS: --forum-accent with dark text, --forum-button-hover on hover) */
.sff26-approval:not(.skin-sff *) .sff26-approval__embed form .hs-button,
.sff26-approval:not(.skin-sff *) .sff26-approval__embed form input[type=submit] { border-color: var(--forum-accent, var(--forum-highlight, #FCB316)); background: var(--forum-accent, var(--forum-highlight, #FCB316)); color: var(--forum-dark, #141414); }
.sff26-approval:not(.skin-sff *) .sff26-approval__embed form .hs-button:hover,
.sff26-approval:not(.skin-sff *) .sff26-approval__embed form .hs-button:focus,
.sff26-approval:not(.skin-sff *) .sff26-approval__embed form input[type=submit]:hover,
.sff26-approval:not(.skin-sff *) .sff26-approval__embed form input[type=submit]:focus { border-color: var(--forum-button-hover, var(--forum-highlight, #fdd57e)); background: var(--forum-button-hover, var(--forum-highlight, #fdd57e)); color: var(--forum-dark, #141414); }
.sff26-approval:not(.skin-sff *) .sff26-approval__embed form .hs-button:focus-visible,
.sff26-approval:not(.skin-sff *) .sff26-approval__embed form input[type=submit]:focus-visible { outline-color: var(--sff26-fg); }
.sff26-approval:not(.skin-sff *) .sff26-approval__embed [data-hsfc-id=Renderer] {
  --hsf-global__color: var(--sff26-fg);
  --hsf-field-label__color: var(--sff26-fg);
  --hsf-field-input__color: var(--sff26-fg);
  --hsf-field-input__background-color: var(--forum-surface-raised, #252424);
  --hsf-field-input__border-color: var(--forum-line, rgba(255, 255, 255, .2));
  --hsf-button__color: var(--forum-dark, #141414);
  --hsf-button__background-color: var(--forum-accent, var(--forum-highlight, #FCB316));
}