/* SFF 2026 - Audience Panels (Who's Moving). Scoped to .sff26-panels; rules
   are written as ".sff26-panels .sff26-panels__x" so they outrank the theme's
   element rules. The only !important is phone typography (see the phone
   block). --sff26-c is the force colour, --sff26-rgb the same as "r, g, b",
   --sff26-on the text on it (black on the Policy red). */

.sff26-panels {
  --sff26-panel: #1e1d1d;
  --sff26-panel-2: #252424;
  --sff26-rule: #333;
  --sff26-muted: #cfcfcf;
  --sff26-amber: #FCB316;
  --sff26-ease: cubic-bezier(.22, .8, .24, 1);
  --sff26-gut: 20px;
  --sff26-max: var(--forum-content-max, 1416px);
  interpolate-size: allow-keywords;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding: 120px 0 0;
  color: #fff;
  font-family: var(--forum-font, "Open Sans", Arial, sans-serif);
}

/* 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-panels { --sff26-gut: var(--forum-gutter, 40px); }
}
.sff26-panels *,
.sff26-panels *::before,
.sff26-panels *::after { box-sizing: border-box; }

.sff26-panels .sff26-panels__w {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 48px;
  max-width: calc(var(--sff26-max) + 2 * var(--sff26-gut));
  margin: 0 auto;
  padding: 0 var(--sff26-gut);
}
.sff26-panels .sff26-panels__bd { min-width: 0; }
.sff26-panels .sff26-panels__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;
}
/* Letter spans added by module.js; the legacy SFF CSS paints "h2 span" amber */
.sff26-panels .sff26-panels__h2 .sff26-panels__wd,
.sff26-panels .sff26-panels__h2 .sff26-panels__ch { color: inherit; }
.sff26-panels .sff26-panels__wd { white-space: nowrap; }
.sff26-panels .sff26-panels__ch { display: inline-block; }

.sff26-panels ul.sff26-panels__rows,
.sff26-panels ul.sff26-panels__row { margin: 0; padding: 0; list-style: none; }
.sff26-panels .sff26-panels__r::marker,
.sff26-panels .sff26-panels__p::marker { content: none; }

/* ---------- Rows: every group visible, the groups in the force colour in one column ---------- */
.sff26-panels.sff26-panels--rows::before {
  content: "";
  position: absolute;
  top: 0;
  right: calc(max(0px, (100% - var(--sff26-max) - 2 * var(--sff26-gut)) / 2) - 260px);
  z-index: -1;
  width: 900px;
  height: 900px;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--sff26-rgb), .2) 0%, rgba(var(--sff26-rgb), .07) 50%, rgba(var(--sff26-rgb), 0) 100%);
}
.sff26-panels .sff26-panels__r {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  column-gap: 48px;
  align-items: baseline;
  margin: 0;
  padding: 28px 0;
  list-style: none;
}
/* the hairline above each row (it draws in on arrival) and one under the last */
.sff26-panels .sff26-panels__r::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--sff26-rule);
  transform-origin: 0 50%;
}
.sff26-panels .sff26-panels__r:last-child { border-bottom: 1px solid var(--sff26-rule); }
/* a dark fill slides in behind the row on hover: a reading aid, not a link */
.sff26-panels .sff26-panels__r::before {
  content: "";
  position: absolute;
  inset: 0 -20px;
  z-index: -1;
  border-radius: 14px;
  background: var(--sff26-panel);
  opacity: 0;
  transform: scaleX(.97);
  transform-origin: 0 50%;
  transition: opacity .3s ease, transform .5s var(--sff26-ease);
}
.sff26-panels .sff26-panels__r:hover::before { opacity: 1; transform: none; }
.sff26-panels .sff26-panels__rn {
  display: block;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--sff26-c);
  transition: transform .45s var(--sff26-ease);
}
.sff26-panels .sff26-panels__r:hover .sff26-panels__rn { transform: translateX(8px); }
.sff26-panels .sff26-panels__rl { font-size: 19px; line-height: 1.5; font-weight: 400; color: #d0d0d0; transition: color .3s ease; }
.sff26-panels .sff26-panels__r:hover .sff26-panels__rl { color: #fff; }

/* ---------- Panels: a plain list without JavaScript; module.js adds --js ---------- */
.sff26-panels .sff26-panels__row { display: grid; gap: 10px; }
.sff26-panels .sff26-panels__p {
  position: relative;
  isolation: isolate;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  background: var(--sff26-panel);
  list-style: none;
  transition: background-color .45s ease;
}
/* the pass weave, blended into the panel's right edge */
.sff26-panels .sff26-panels__p::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: var(--sff26-weave, none) right center / cover no-repeat;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 78%);
  mask-image: linear-gradient(90deg, transparent 30%, #000 78%);
  transition: opacity .6s ease;
}
.sff26-panels .sff26-panels__b {
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 24px 64px 24px 56px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  color: #fff;
  font: inherit;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.sff26-panels .sff26-panels__b:hover,
.sff26-panels .sff26-panels__b:focus { background: none; color: inherit; }
.sff26-panels .sff26-panels__b:focus-visible { outline: 2px solid var(--sff26-amber); outline-offset: -4px; border-radius: 16px; }
.sff26-panels .sff26-panels__stk {
  position: absolute;
  top: 28px;
  left: 26px;
  display: block;
  width: 12px;
  height: 26px;
  background: var(--sff26-c);
  clip-path: polygon(45% 0, 100% 0, 55% 100%, 0 100%);
  transition: background-color .4s ease, transform .4s var(--sff26-ease);
}
.sff26-panels .sff26-panels__v { display: none; }
.sff26-panels .sff26-panels__body { display: block; }
.sff26-panels .sff26-panels__n { display: block; font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; color: inherit; transition: color .3s ease; }
.sff26-panels .sff26-panels__lw { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .45s var(--sff26-ease); }
.sff26-panels .sff26-panels__lw > .sff26-panels__l { overflow: hidden; }
.sff26-panels .sff26-panels__l { display: block; padding-top: 8px; font-size: 17px; line-height: 1.5; font-weight: 400; color: var(--sff26-muted); transition: color .3s ease; }
.sff26-panels .sff26-panels__pm { display: none; }

/* open: flooded in the force colour, the weave showing at its edge */
.sff26-panels .sff26-panels__row--js .sff26-panels__p--open { background: var(--sff26-c); }
.sff26-panels .sff26-panels__row--js .sff26-panels__p--open::before { opacity: 1; }
.sff26-panels .sff26-panels__row--js .sff26-panels__p--open .sff26-panels__b { color: var(--sff26-on); }
.sff26-panels .sff26-panels__row--js .sff26-panels__p--open .sff26-panels__stk { background: var(--sff26-on); }
.sff26-panels .sff26-panels__row--js .sff26-panels__p--open .sff26-panels__l { color: var(--sff26-on); }
.sff26-panels .sff26-panels__row--js .sff26-panels__p:not(.sff26-panels__p--open):hover { background: var(--sff26-panel-2); }

/* tablets and phones: one open at a time, the line folds away on the others */
@media (max-width: 1023px) {
  .sff26-panels .sff26-panels__row--js .sff26-panels__p:not(.sff26-panels__p--open) .sff26-panels__lw { grid-template-rows: 0fr; }
  .sff26-panels .sff26-panels__row--js .sff26-panels__pm {
    position: absolute;
    top: 24px;
    right: 20px;
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #2b2a2a;
    color: #fff;
    transition: background-color .3s ease, transform .45s var(--sff26-ease);
  }
  .sff26-panels .sff26-panels__pm::before,
  .sff26-panels .sff26-panels__pm::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 2px;
    margin: -1px 0 0 -5px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .45s var(--sff26-ease);
  }
  .sff26-panels .sff26-panels__pm::after { transform: rotate(90deg); }
  .sff26-panels .sff26-panels__row--js .sff26-panels__p--open .sff26-panels__pm { background: rgba(20, 20, 20, .14); color: var(--sff26-on); transform: rotate(180deg); }
  .sff26-panels .sff26-panels__row--js .sff26-panels__p--open .sff26-panels__pm::after { transform: rotate(0deg); }
}

/* desktop: the panels in a row, the open one wide */
@media (min-width: 1024px) {
  .sff26-panels .sff26-panels__row.sff26-panels__row--js { display: flex; gap: 12px; height: 440px; }
  .sff26-panels .sff26-panels__row--js .sff26-panels__p { flex: 1 1 0; min-width: 0; transition: flex-grow .75s cubic-bezier(.25, .9, .3, 1), background-color .45s ease; }
  .sff26-panels .sff26-panels__row--js .sff26-panels__p--open { flex-grow: 3.4; }
  .sff26-panels .sff26-panels__row--js .sff26-panels__b { height: 100%; padding: 0; }
  .sff26-panels .sff26-panels__row--js .sff26-panels__stk { top: 30px; left: 28px; width: 14px; height: 34px; }
  .sff26-panels .sff26-panels__row--js .sff26-panels__v {
    position: absolute;
    bottom: 30px;
    left: 26px;
    display: block;
    font-size: 19px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -.005em;
    white-space: nowrap;
    color: #fff;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    transition: opacity .35s ease .15s;
  }
  .sff26-panels .sff26-panels__row--js .sff26-panels__body {
    position: absolute;
    bottom: 32px;
    left: 32px;
    width: 400px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .15s ease, transform .15s ease;
  }
  .sff26-panels .sff26-panels__row--js .sff26-panels__n { font-size: 34px; line-height: 1.15; }
  .sff26-panels .sff26-panels__row--js .sff26-panels__l { padding-top: 12px; font-size: 20px; line-height: 1.45; }
  .sff26-panels .sff26-panels__row--js .sff26-panels__p--open .sff26-panels__v { opacity: 0; transition: opacity .15s ease; }
  .sff26-panels .sff26-panels__row--js .sff26-panels__p--open .sff26-panels__body { opacity: 1; transform: none; transition: opacity .45s ease .3s, transform .7s var(--sff26-ease) .3s; }
  .sff26-panels .sff26-panels__row--js .sff26-panels__p:not(.sff26-panels__p--open):hover .sff26-panels__stk { transform: scaleY(1.25); }
  .sff26-panels .sff26-panels__row--js .sff26-panels__p:not(.sff26-panels__p--open)::before { opacity: .16; }
  .sff26-panels .sff26-panels__row--js .sff26-panels__p:not(.sff26-panels__p--open):hover::before { opacity: .3; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .sff26-panels .sff26-panels__row--js .sff26-panels__body { width: 340px; }
  .sff26-panels .sff26-panels__row--js .sff26-panels__n { font-size: 30px; }
}

@media (max-width: 991px) {
  .sff26-panels { padding-top: 96px; }
}

@media (max-width: 767px) {
  .sff26-panels { padding-top: 72px; }
  .sff26-panels .sff26-panels__w { row-gap: 28px; }
  .sff26-panels.sff26-panels--rows::before { right: -360px; width: 640px; height: 640px; }
  .sff26-panels .sff26-panels__r { grid-template-columns: minmax(0, 1fr); row-gap: 6px; padding: 20px 0; }
  .sff26-panels .sff26-panels__r::before { inset: 0 -12px; }
  .sff26-panels .sff26-panels__b { padding: 20px 60px 20px 48px; }
  .sff26-panels .sff26-panels__stk { top: 23px; left: 22px; width: 11px; height: 22px; }

  /* Phone type. The theme's main.css and the page's head styles set h2 / p
     / li sizes and weights on phones with !important, so these must be
     !important too (phone typography only). */
  .sff26-panels .sff26-panels__h2 { font-size: 32px !important; line-height: 1.12 !important; font-weight: 600 !important; }
  .sff26-panels .sff26-panels__r { font-size: 16px !important; line-height: 1.5 !important; }
  .sff26-panels .sff26-panels__rn { font-size: 23px !important; line-height: 1.2 !important; font-weight: 600 !important; }
  .sff26-panels .sff26-panels__rl { font-size: 16px !important; line-height: 1.5 !important; }
  .sff26-panels .sff26-panels__n { font-size: 20px !important; line-height: 1.25 !important; font-weight: 600 !important; }
  .sff26-panels .sff26-panels__l { font-size: 16px !important; line-height: 1.5 !important; }
}

/* 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; rows rise and their hairlines draw in, in turn; panels
   rise in turn. */
.sff26-panels.sff26-panels--armed .sff26-panels__ch {
  transition: opacity .45s ease, transform .6s var(--sff26-ease);
  transition-delay: calc(var(--sff26-ci, 0) * 16ms);
}
.sff26-panels.sff26-panels--armed .sff26-panels__h2:not(.sff26-panels--in) .sff26-panels__ch { opacity: 0; transform: translateY(.4em); }
.sff26-panels.sff26-panels--armed .sff26-panels__r,
.sff26-panels.sff26-panels--armed .sff26-panels__p { transition: opacity .6s ease, transform .85s cubic-bezier(.2, .9, .25, 1.1), flex-grow .75s cubic-bezier(.25, .9, .3, 1), background-color .45s ease; transition-delay: calc(var(--sff26-i, 0) * 80ms); }
.sff26-panels.sff26-panels--armed .sff26-panels__bd:not(.sff26-panels--in) .sff26-panels__r,
.sff26-panels.sff26-panels--armed .sff26-panels__bd:not(.sff26-panels--in) .sff26-panels__p { opacity: 0; transform: translateY(28px) scale(.97); }
.sff26-panels.sff26-panels--armed .sff26-panels__bd.sff26-panels--settled .sff26-panels__r,
.sff26-panels.sff26-panels--armed .sff26-panels__bd.sff26-panels--settled .sff26-panels__p { transition-delay: 0s; }
.sff26-panels.sff26-panels--armed .sff26-panels__r::after { transition: transform 1s var(--sff26-ease) calc(var(--sff26-i, 0) * 110ms + 120ms); }
.sff26-panels.sff26-panels--armed .sff26-panels__bd:not(.sff26-panels--in) .sff26-panels__r::after { transform: scaleX(0); }

/* Reduced motion: no animation at all (the entrances are never armed; the
   panels open and close at once) */
@media (prefers-reduced-motion: reduce) {
  .sff26-panels .sff26-panels__r::before,
  .sff26-panels .sff26-panels__rn,
  .sff26-panels .sff26-panels__rl,
  .sff26-panels .sff26-panels__row--js .sff26-panels__p,
  .sff26-panels .sff26-panels__row--js .sff26-panels__p::before,
  .sff26-panels .sff26-panels__row--js .sff26-panels__p .sff26-panels__stk,
  .sff26-panels .sff26-panels__row--js .sff26-panels__p .sff26-panels__lw,
  .sff26-panels .sff26-panels__row--js .sff26-panels__p .sff26-panels__v,
  .sff26-panels .sff26-panels__row--js .sff26-panels__p .sff26-panels__body,
  .sff26-panels .sff26-panels__row--js .sff26-panels__p .sff26-panels__pm,
  .sff26-panels .sff26-panels__row--js .sff26-panels__p .sff26-panels__pm::after { transition: none; }
}

/* ---------------------------------------------------------------------------------------------------------------
   Other forums (12 Oct, user: "globalise the new modules to be used on other forums"). Everything below applies only
   OFF SFF (".sff26-panels: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-panels: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-fg: var(--forum-text, #fff);
  --sff26-pal-amber: var(--forum-gold, var(--forum-highlight, #FCB316));
  --sff26-pal-red: var(--forum-highlight, #E53935);
  --sff26-pal-blue: var(--forum-accent, #3399FF);
  --sff26-pal-pink: var(--forum-orchid, #FF88A2);
  --sff26-pal-green: var(--forum-teal, #76C893);
  --sff26-pal-amber-ink: var(--forum-dark, #141414); /* fallback for browsers without relative colours */
  --sff26-pal-red-ink: var(--forum-dark, #141414);
  --sff26-pal-blue-ink: var(--forum-dark, #141414);
  --sff26-pal-pink-ink: var(--forum-dark, #141414);
  --sff26-pal-green-ink: var(--forum-dark, #141414);
  --sff26-muted: var(--forum-text-muted, #cfcfcf);
  --sff26-panel: var(--forum-surface, #1e1d1d);
  --sff26-panel-2: var(--forum-surface-raised, #252424);
  --sff26-rule: var(--forum-line, #333);
  /* a light edition without --forum-highlight-text (BSS India today): its text colour. It names --forum-page, which
     only a light edition sets, so on a dark page it is invalid and the force colour itself shows */
  --sff26-light-text: color-mix(in srgb, var(--forum-text) 100%, var(--forum-page) 0%);
  --forum-text-body: var(--sff26-muted);
  color: var(--sff26-fg);
}
@supports (color: oklch(from red l c h)) {
  .sff26-panels:not(.skin-sff *) {
    /* ink on a palette fill: white on a dark fill, a near-black on a light one (River Stone's oklch) */
    --sff26-pal-amber-ink: oklch(from var(--sff26-pal-amber) clamp(0.245, (0.62 - l) * 1000, 1) clamp(0, (l - 0.62) * 1000, 0.017) 248);
    --sff26-pal-red-ink: oklch(from var(--sff26-pal-red) clamp(0.245, (0.62 - l) * 1000, 1) clamp(0, (l - 0.62) * 1000, 0.017) 248);
    --sff26-pal-blue-ink: oklch(from var(--sff26-pal-blue) clamp(0.245, (0.62 - l) * 1000, 1) clamp(0, (l - 0.62) * 1000, 0.017) 248);
    --sff26-pal-pink-ink: oklch(from var(--sff26-pal-pink) clamp(0.245, (0.62 - l) * 1000, 1) clamp(0, (l - 0.62) * 1000, 0.017) 248);
    --sff26-pal-green-ink: oklch(from var(--sff26-pal-green) clamp(0.245, (0.62 - l) * 1000, 1) clamp(0, (l - 0.62) * 1000, 0.017) 248);
  }
}
@media (min-width: 768px) {
  .sff26-panels:not(.skin-sff *) { --sff26-gut: var(--forum-gutter, var(--bss-gutter, 40px)); }
}
.sff26-panels:not(.skin-sff *) .sff26-panels__h2,
.sff26-panels:not(.skin-sff *) .sff26-panels__b,
.sff26-panels:not(.skin-sff *) .sff26-panels__v,
.sff26-panels:not(.skin-sff *) .sff26-panels__r:hover .sff26-panels__rl { color: var(--sff26-fg); }
.sff26-panels:not(.skin-sff *) .sff26-panels__rl { color: var(--sff26-muted); }
/* the groups in the force colour: on a light page the text colour (--forum-highlight-text) */
.sff26-panels:not(.skin-sff *) .sff26-panels__rn { color: var(--forum-highlight-text, var(--sff26-light-text, var(--sff26-c))); }
.sff26-panels:not(.skin-sff *).sff26-panels--rows::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--sff26-c) 20%, transparent) 0%, color-mix(in srgb, var(--sff26-c) 7%, transparent) 50%, transparent 100%); }
/* the open/close button on a closed panel (an open one keeps its tint on the colour, above) */
.sff26-panels:not(.skin-sff *) .sff26-panels__pm { background: var(--forum-surface-raised, #2b2a2a); color: var(--sff26-fg); }