/* SFF 2026 - Role Switcher. Scoped to .sff26-roles; rules are written as
   ".sff26-roles .sff26-roles__x" so they outrank the theme's element rules.
   The only !important is phone typography (see the phone block).
   States set by module.js: --js (tabs working: one panel at a time),
   --armed (entrances waiting for their scroll-in), --switched (a role has
   been chosen, so the chosen panel fades in). */

.sff26-roles {
  --sff26-muted: #cfcfcf;
  --sff26-body: #dcdcdc;
  --sff26-amber: #FCB316;
  --sff26-rule: #333;
  --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-roles { --sff26-gut: var(--forum-gutter, 40px); }
}
.sff26-roles *,
.sff26-roles *::before,
.sff26-roles *::after { box-sizing: border-box; }

.sff26-roles .sff26-roles__w {
  max-width: calc(var(--sff26-max) + 2 * var(--sff26-gut));
  margin: 0 auto;
  padding: 0 var(--sff26-gut);
}

/* Heading */
.sff26-roles .sff26-roles__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-roles .sff26-roles__h2 .sff26-roles__accent { color: var(--sff26-amber); }
/* Letter spans added by module.js; the legacy SFF CSS paints "h2 span" amber */
.sff26-roles .sff26-roles__h2 .sff26-roles__wd,
.sff26-roles .sff26-roles__h2 .sff26-roles__ch { color: inherit; }
.sff26-roles .sff26-roles__wd { white-space: nowrap; }
.sff26-roles .sff26-roles__ch { display: inline-block; }
.sff26-roles .sff26-roles__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 tab bar (the theme pages' own: an 8px bar, 4px tabs, the chosen tab
   filled SFF yellow). Hidden until module.js makes the tabs work. */
.sff26-roles .sff26-roles__rs { margin-top: 44px; }
.sff26-roles .sff26-roles__tabs { scroll-margin-top: 132px; }
.sff26-roles .sff26-roles__tabs { display: none; }
.sff26-roles.sff26-roles--js .sff26-roles__tabs {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 4px;
  max-width: 100%;
  margin: 0;
  padding: 5px;
  overflow-x: auto;
  border-radius: 8px;
  background: #1e1d1d;
  scrollbar-width: none;
}
.sff26-roles .sff26-roles__tabs::-webkit-scrollbar { display: none; }
/* When the bar scrolls sideways (tablets), the edge with more tabs fades */
.sff26-roles .sff26-roles__tabs--more-end { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.sff26-roles .sff26-roles__tabs--more-start { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px); mask-image: linear-gradient(90deg, transparent, #000 56px); }
.sff26-roles .sff26-roles__tabs--more-start.sff26-roles__tabs--more-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
.sff26-roles .sff26-roles__tab {
  flex: none;
  margin: 0;
  padding: 12px 22px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  color: #bfbfbf;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: normal;
  text-align: center;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .25s ease, color .25s ease, transform .15s ease;
}
.sff26-roles .sff26-roles__tab:hover { background: #2c2b2b; color: #fff; }
.sff26-roles .sff26-roles__tab:active { transform: scale(.96); }
.sff26-roles .sff26-roles__tab[aria-selected="true"] { background: var(--sff26-amber); color: #141414; }
.sff26-roles .sff26-roles__tab:focus { outline: none; }
.sff26-roles .sff26-roles__tab:focus-visible { outline: 2px solid var(--sff26-amber); outline-offset: 2px; }

/* The panels. Without JavaScript all of them, one under the other. */
.sff26-roles .sff26-roles__panels { margin-top: 36px; }
.sff26-roles .sff26-roles__p {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  grid-template-rows: auto auto;
  grid-template-areas: "t ph" "c ph";
  align-content: center;
  column-gap: 56px;
  scroll-margin-top: 132px;
}
.sff26-roles .sff26-roles__p + .sff26-roles__p { margin-top: 88px; }
.sff26-roles .sff26-roles__p--nophoto { grid-template-columns: minmax(0, 1fr); grid-template-areas: "t" "c"; }
.sff26-roles .sff26-roles__p:focus { outline: none; }
.sff26-roles .sff26-roles__p:focus-visible { outline: 2px solid var(--sff26-amber); outline-offset: 8px; border-radius: var(--sff26-r); }

.sff26-roles .sff26-roles__t {
  grid-area: t;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 36px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -.018em;
  color: #fff;
  text-transform: none;
  text-wrap: balance;
}
.sff26-roles .sff26-roles__t .sff26-roles__tt { color: inherit; }
/* The slanted GFTN stroke, in the colour of the pass the role buys */
.sff26-roles .sff26-roles__stk,
.sff26-roles .sff26-roles__org::before {
  display: inline-block;
  flex: none;
  background: var(--sff26-c, var(--sff26-amber));
  clip-path: polygon(45% 0, 100% 0, 55% 100%, 0 100%);
}
.sff26-roles .sff26-roles__stk { width: 12px; height: 30px; }

.sff26-roles .sff26-roles__ph {
  grid-area: ph;
  align-self: center;
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--sff26-r);
  background: #1b1b1b;
}
.sff26-roles .sff26-roles__ph img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.sff26-roles .sff26-roles__copy { grid-area: c; min-width: 0; }
.sff26-roles .sff26-roles__body { margin-top: 22px; }
.sff26-roles .sff26-roles__body p {
  max-width: 60ch;
  margin: 18px 0 0;
  padding: 0;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--sff26-body);
}
.sff26-roles .sff26-roles__body > :first-child { margin-top: 0; }
/* Inline links: underlined, so they read as links, not bold text */
.sff26-roles .sff26-roles__body a {
  color: #fff;
  font-weight: inherit;
  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-roles .sff26-roles__body a:hover,
.sff26-roles .sff26-roles__body a:focus-visible { color: var(--sff26-amber); text-decoration-color: currentColor; }

/* Attending organisations of the role's sector */
.sff26-roles .sff26-roles__orgs { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--sff26-rule); }
.sff26-roles .sff26-roles__orgs-h {
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0;
  color: #fff;
  text-transform: none;
}
.sff26-roles .sff26-roles__orgs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.sff26-roles .sff26-roles__org {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--sff26-muted);
}
.sff26-roles .sff26-roles__org::marker { content: none; }
.sff26-roles .sff26-roles__org::before { content: ""; position: static; width: 6px; height: 15px; margin: 0; border: 0; border-radius: 0; }

/* Text link: amber, the primary CTA's arrow; the underline runs under the
   text and the arrow and stretches with it (same as the other v2 modules) */
.sff26-roles .sff26-roles__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 6px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--forum-highlight, var(--sff26-amber));
  text-decoration: none;
}
.sff26-roles .sff26-roles__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: calc(24px * -0.3);
  bottom: 8px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .3s ease;
}
.sff26-roles .sff26-roles__link:hover,
.sff26-roles .sff26-roles__link:focus-visible { color: var(--forum-highlight, var(--sff26-amber)); text-decoration: none; }
.sff26-roles .sff26-roles__link:hover::after,
.sff26-roles .sff26-roles__link:focus-visible::after { transform: scaleX(1); }
.sff26-roles .sff26-roles__link-ic { flex: none; display: block; width: 24px; height: 12px; transform-origin: left center; transition: transform .3s ease; }
.sff26-roles .sff26-roles__link:hover .sff26-roles__link-ic,
.sff26-roles .sff26-roles__link:focus-visible .sff26-roles__link-ic { transform: scaleX(1.3); }
.sff26-roles a:focus-visible { outline: 2px solid var(--sff26-amber); outline-offset: 3px; }

/* The pass button (the theme's own; only placed here) */
.sff26-roles .sff26-roles__go { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* With JavaScript: one panel at a time. On desktop every panel shares one
   grid cell, so the section keeps the tallest panel's height and the page
   never jumps when the role changes. */
.sff26-roles.sff26-roles--js .sff26-roles__panels { display: grid; }
.sff26-roles.sff26-roles--js .sff26-roles__p { grid-area: 1 / 1; margin: 0; visibility: hidden; opacity: 0; }
.sff26-roles.sff26-roles--js .sff26-roles__p--on { visibility: visible; opacity: 1; }

@media (max-width: 991px) {
  .sff26-roles { padding-top: 96px; scroll-margin-top: 36px; }
  .sff26-roles .sff26-roles__tab { padding: 12px 16px; }
  /* One column: the title, the photo, then the case */
  .sff26-roles .sff26-roles__p {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "t" "ph" "c";
    align-content: start;
  }
  .sff26-roles .sff26-roles__ph { align-self: start; max-width: 720px; margin-top: 22px; aspect-ratio: 16 / 9; }
  .sff26-roles .sff26-roles__body { margin-top: 22px; }
}

/* Phones: the roles as one full-width list, the chosen one filled; only
   the chosen panel takes space (their heights differ a lot here) */
@media (max-width: 767px) {
  .sff26-roles { padding-top: 72px; scroll-margin-top: 40px; }
  .sff26-roles .sff26-roles__h2 { font-size: 32px; line-height: 1.12; }
  .sff26-roles .sff26-roles__lead { margin-top: 12px; font-size: 16px; }
  .sff26-roles .sff26-roles__rs { margin-top: 28px; }
  .sff26-roles.sff26-roles--js .sff26-roles__tabs { display: flex; flex-direction: column; width: 100%; overflow: visible; }
  .sff26-roles .sff26-roles__tab { padding: 13px 16px; text-align: left; white-space: normal; }
  .sff26-roles .sff26-roles__panels { margin-top: 24px; }
  .sff26-roles.sff26-roles--js .sff26-roles__panels { display: block; }
  .sff26-roles.sff26-roles--js .sff26-roles__p:not(.sff26-roles__p--on) { display: none; }
  .sff26-roles:not(.sff26-roles--js) .sff26-roles__p + .sff26-roles__p { margin-top: 64px; }
  .sff26-roles .sff26-roles__t { gap: 12px; }
  .sff26-roles .sff26-roles__stk { width: 10px; height: 24px; }
  .sff26-roles .sff26-roles__ph { margin-top: 18px; aspect-ratio: 16 / 10; }
  .sff26-roles .sff26-roles__body { margin-top: 18px; }
  .sff26-roles .sff26-roles__orgs-list { gap: 4px 18px; }
  .sff26-roles .sff26-roles__go .cta-button { max-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-roles .sff26-roles__h2 { font-size: 32px !important; line-height: 1.12 !important; font-weight: 600 !important; }
  .sff26-roles .sff26-roles__lead { font-size: 16px !important; line-height: 1.5 !important; }
  .sff26-roles .sff26-roles__tab { font-size: 16px !important; line-height: 1.3 !important; font-weight: 600 !important; }
  .sff26-roles .sff26-roles__t { font-size: 26px !important; line-height: 1.15 !important; font-weight: 600 !important; }
  .sff26-roles .sff26-roles__body p { font-size: 16px !important; line-height: 1.6 !important; }
  .sff26-roles .sff26-roles__orgs-h { font-size: 15px !important; line-height: 1.3 !important; font-weight: 600 !important; }
  .sff26-roles .sff26-roles__org { font-size: 15px !important; line-height: 1.5 !important; }
  .sff26-roles .sff26-roles__link { font-size: 16px !important; line-height: 24px !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-roles .sff26-roles__go .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 tab bar, then the first role. */
.sff26-roles.sff26-roles--armed .sff26-roles__ch {
  transition: opacity .45s ease, transform .6s var(--sff26-ease);
  transition-delay: calc(var(--sff26-ci, 0) * 16ms);
}
.sff26-roles.sff26-roles--armed .sff26-roles__h2:not(.sff26-roles__h2--in) .sff26-roles__ch { opacity: 0; transform: translateY(.4em); }
.sff26-roles.sff26-roles--armed .sff26-roles__tabs,
.sff26-roles.sff26-roles--armed .sff26-roles__panels { transition: opacity .6s ease, transform .85s var(--sff26-ease); }
.sff26-roles.sff26-roles--armed .sff26-roles__panels { transition-delay: .15s; }
.sff26-roles.sff26-roles--armed .sff26-roles__rs:not(.sff26-roles__rs--in) .sff26-roles__tabs,
.sff26-roles.sff26-roles--armed .sff26-roles__rs:not(.sff26-roles__rs--in) .sff26-roles__panels { opacity: 0; transform: translateY(24px); }

/* Choosing a role: the chosen panel's copy rises in and its photo settles */
@media (prefers-reduced-motion: no-preference) {
  .sff26-roles.sff26-roles--switched .sff26-roles__p--on .sff26-roles__t,
  .sff26-roles.sff26-roles--switched .sff26-roles__p--on .sff26-roles__copy > * { animation: sff26-roles-in .55s var(--sff26-ease) both; }
  .sff26-roles.sff26-roles--switched .sff26-roles__p--on .sff26-roles__copy > :nth-child(1) { animation-delay: .05s; }
  .sff26-roles.sff26-roles--switched .sff26-roles__p--on .sff26-roles__copy > :nth-child(2) { animation-delay: .1s; }
  .sff26-roles.sff26-roles--switched .sff26-roles__p--on .sff26-roles__copy > :nth-child(n+3) { animation-delay: .15s; }
  .sff26-roles.sff26-roles--switched .sff26-roles__p--on .sff26-roles__ph img { animation: sff26-roles-ph .9s var(--sff26-ease) both; }
}
@keyframes sff26-roles-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes sff26-roles-ph {
  from { opacity: .4; transform: scale(1.07); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sff26-roles .sff26-roles__tab,
  .sff26-roles .sff26-roles__body a,
  .sff26-roles .sff26-roles__link::after,
  .sff26-roles .sff26-roles__link-ic,
  .sff26-roles.sff26-roles--armed .sff26-roles__tabs,
  .sff26-roles.sff26-roles--armed .sff26-roles__panels,
  .sff26-roles.sff26-roles--armed .sff26-roles__ch { transition: none; }
  .sff26-roles .sff26-roles__tab:active { transform: none; }
  .sff26-roles.sff26-roles--armed .sff26-roles__rs:not(.sff26-roles__rs--in) .sff26-roles__tabs,
  .sff26-roles.sff26-roles--armed .sff26-roles__rs:not(.sff26-roles__rs--in) .sff26-roles__panels,
  .sff26-roles.sff26-roles--armed .sff26-roles__h2:not(.sff26-roles__h2--in) .sff26-roles__ch { 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-roles: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-roles: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-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-muted: var(--forum-text-muted, #cfcfcf);
  --sff26-body: var(--forum-text-muted, #dcdcdc);
  --sff26-rule: var(--forum-line, #333);
  --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-roles: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-roles:not(.skin-sff *) { --sff26-gut: var(--forum-gutter, var(--bss-gutter, 40px)); }
}
.sff26-roles:not(.skin-sff *) .sff26-roles__h2,
.sff26-roles:not(.skin-sff *) .sff26-roles__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-roles:not(.skin-sff *) .sff26-roles__h2 .sff26-roles__accent { color: var(--sff26-hl-text); }
.sff26-roles:not(.skin-sff *) .sff26-roles__orgs-h { --forum-text-body: var(--sff26-fg); color: var(--sff26-fg); }
.sff26-roles:not(.skin-sff *) .sff26-roles__body { --forum-text-body: var(--sff26-body); }
.sff26-roles:not(.skin-sff *) .sff26-roles__body a { color: var(--sff26-fg); text-decoration-color: color-mix(in srgb, var(--sff26-fg) 60%, transparent); }
.sff26-roles:not(.skin-sff *) .sff26-roles__body a:hover,
.sff26-roles:not(.skin-sff *) .sff26-roles__body a:focus-visible { color: var(--sff26-hl-text); text-decoration-color: currentColor; }
.sff26-roles:not(.skin-sff *) .sff26-roles__link,
.sff26-roles:not(.skin-sff *) .sff26-roles__link:hover,
.sff26-roles:not(.skin-sff *) .sff26-roles__link:focus-visible { color: var(--sff26-hl-text); }
/* the tab bar: the forum's card colour, the chosen tab in its highlight */
.sff26-roles:not(.skin-sff *).sff26-roles--js .sff26-roles__tabs { background: var(--forum-surface, #1e1d1d); }
.sff26-roles:not(.skin-sff *) .sff26-roles__tab { color: var(--sff26-muted); }
.sff26-roles:not(.skin-sff *) .sff26-roles__tab:hover { background: var(--forum-surface-raised, #2c2b2b); color: var(--sff26-fg); }
.sff26-roles:not(.skin-sff *) .sff26-roles__tab[aria-selected="true"] { background: var(--sff26-amber); color: var(--sff26-amber-ink); }
.sff26-roles:not(.skin-sff *) .sff26-roles__ph { background: var(--forum-surface-raised, #1b1b1b); }