/* ==========================================================================
   PKOUG Community — forum components
   --------------------------------------------------------------------------
   Loaded AFTER forum/assets/css/tokens.css (the forum's Modern Technical
   tokens, which also define the `--pk-` names used here) and the platform's
   assets/pkoug-components.css. Every colour, space, radius, shadow and
   duration below is a token: there is not one hard-coded hex value in this
   file, and that is what lets the forum change theme, palette or contrast
   in tokens.css without this file being touched.

   The `fx-` prefix marks a component as belonging to the forum. `pk-` classes
   are the platform's and are used as-is — buttons, cards, badges, alerts,
   inputs, tables, pagination and the empty state are all reused rather than
   restyled, because a forum that reimplements the button is a forum whose
   buttons drift.

   THE DIRECTION: a technical knowledge workspace. Neutral surfaces and ink
   carry the interface. PKOUG red marks the primary path (Ask, the current
   section) and nothing else; green means a verified solution; a restrained
   navy marks technical metadata — product, version, tags — and ordinary
   links. Every state that has a colour also has a word or an icon.

   MOBILE FIRST. Every rule is written for the narrow viewport and widened at
   a breakpoint, never the reverse. Breakpoints: 48rem tablet, 64rem desktop.
   ========================================================================== */

/* --------------------------------------------------------------- roles --- */

/* Forum-scoped roles, derived from platform tokens. Setting --pk-link here is
   how the forum stops painting every link red WITHOUT touching the platform
   sheet: the platform's blanket link rule reads var(--pk-link) from each
   anchor, so a forum page — and any component below that redefines it —
   decides its own link colour. Navy clears 9:1 on both themes' grounds. */
.fx-body {
  --pk-link: var(--pk-brand-navy);
  --pk-link-hover: var(--pk-brand-red-ink);

  --fx-tech: var(--pk-brand-navy);
  --fx-tech-tint: var(--pk-brand-navy-tint);
  --fx-tech-edge: color-mix(in srgb, var(--pk-brand-navy-lift) 42%, var(--pk-border));

  --fx-solved: var(--pk-brand-green-ink);
  --fx-solved-tint: var(--pk-brand-green-tint);
  --fx-solved-edge: color-mix(in srgb, var(--pk-brand-green-lift) 60%, var(--pk-border));

  /* Code panels follow the theme: a light tinted panel in light mode, a
     deep one in dark (Modern Technical: code is never dark in light mode).
     The toolbar is the same ground with a touch of ink, so the frame reads
     as one object. */
  --fx-code-bg: var(--code-bg);
  --fx-code-head: color-mix(in oklch, var(--code-bg) 94%, var(--foreground));
  --fx-code-ink: var(--code-fg);
  --fx-code-muted: var(--muted-foreground);
  --fx-code-edge: var(--border);

  --fx-card: var(--pk-surface);
  --fx-sunk: var(--pk-surface-sunk);

  /* The page ground (with its faint red tint) is set in tokens.css. */
}

/* ---------------------------------------------------------- primitives --- */

.fx-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* `hidden` must always win. Several forum components set display:flex/grid,
   which would otherwise override the attribute the scripts toggle. */
.fx-body [hidden] { display: none !important; }

.fx-icon {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.2em;
}

.fx-monogram {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: var(--pk-radius-full);
  background: var(--fx-tech-tint);
  color: var(--fx-tech);
  font-size: var(--pk-text-xs);
  font-weight: var(--pk-weight-bold);
  letter-spacing: .02em;
}

.fx-count {
  display: inline-block;
  min-width: 1.25rem;
  padding: 0 .35rem;
  border-radius: var(--pk-radius-full);
  background: var(--pk-brand-red);
  color: var(--pk-on-brand);
  font-size: var(--pk-text-xs);
  font-weight: var(--pk-weight-bold);
  line-height: 1.25rem;
  text-align: center;
}

.fx-inline-form { margin: 0; display: inline-flex; }

/* Ghost buttons on the platform wear link red and a red hover wash. In a
   toolbar of six of them that is the "wall of red" the audit describes, so
   here they are neutral until hovered. */
.fx-body .pk-btn--ghost { --_fg: var(--pk-ink-soft); }
.fx-body .pk-btn--ghost:hover:not([disabled]) { --_bg: var(--pk-surface-sunk); --_fg: var(--pk-ink); }
.fx-body .pk-btn .fx-icon { width: 1rem; height: 1rem; }

/* A destructive action that must stay visually distinct from its neighbours
   without shouting: danger ink, a danger edge, and the confirm dialog the
   script already provides. */
.fx-body .pk-btn.fx-btn--danger { --_fg: var(--pk-danger); --_bd: var(--pk-danger-edge); --_bg: transparent; }
.fx-body .pk-btn.fx-btn--danger:hover:not([disabled]) { --_bg: var(--pk-danger-tint); }

/* The platform's small button is 36px. Fine for a mouse; below the 44px the
   platform itself promises for touch, so phones and coarse pointers get 44. */
@media (max-width: 47.99rem), (pointer: coarse) {
  .fx-body .pk-btn--sm { min-height: 44px; }
}

/* One visible focus treatment for every forum control the platform sheet
   does not already ring. Never transitioned. */
.fx-body :is(.fx-nav__link, .fx-filter, .fx-chip, .fx-menu__toggle, .fx-bell, .fx-me,
             .fx-topic__title a, .fx-cat, .fx-code, .fx-codeframe__copy, .fx-tagdir__item,
             .fx-quick__item, .fx-solution-jump, summary):focus-visible {
  outline: var(--pk-focus-width) solid var(--pk-focus-ring);
  outline-offset: var(--pk-focus-offset);
}

/* --------------------------------------------------------------- shell --- */

/* THE SHELL (UI Phase 2 — DEVELOPER-HANDOFF §3, §5, §8, §9).

   Phones (below 48rem): one 56px bar — menu, brand, search icon, theme,
   alerts, sign-in — and the fixed five-item bottom nav, which carries Ask.
   Tablet (48–63.99rem): the same bar with the search field and Ask in it;
   the destinations stay in the menu. Desktop (64rem up): two rows — brand,
   search and actions; then the primary navigation with More.

   Controls are 44px on touch widths and 36px on the desktop bar; focus is the
   global 2px ring from tokens.css; the current section is a word, a weight and
   an underline (desktop) or a top bar (bottom nav) plus aria-current — never
   colour alone. Borders over shadows; the one decoration is the red mark. */

/* Shared with pkoug.org: a translucent surface over the page — the blur on a
   pseudo-element, as on the portal, so the header never becomes the containing
   block of anything positioned inside it — and the portal's faint red→green
   hairline beneath, the cue that says "same PkOUG". */
.fx-header {
  position: relative;
  z-index: var(--pk-z-header);
  border-bottom: 1px solid var(--border);
}
.fx-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: color-mix(in oklch, var(--card) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .fx-header::before { background: var(--card); }
}
.fx-header::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--primary) 42%, var(--pkoug-green) 58%, transparent);
  opacity: .42;
}

/* One row on phones: the brand gives way (its host line ellipsizes) rather
   than the bar wrapping to two rows. Only the no-JavaScript fallback wraps,
   because there the open menu flows as a full-width row of its own. */
.fx-header__inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--pk-space-1);
  min-height: 3.5rem;
  padding-block: var(--pk-space-2);
}
html:not(.fx-js) .fx-header__inner { flex-wrap: wrap; }

/* ---- brand */
.fx-brand {
  order: 1;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  margin-right: auto;
  padding: 0;          /* the logo mark sets the row; focus is the global outline + offset */
  border-radius: var(--radius-md);
  color: var(--foreground);
  text-decoration: none;
}
.fx-brand:hover { color: var(--foreground); }

/* The platform component sheet paints every anchor with var(--pk-link), at a
   specificity a plain class does not beat (see the top of this file). So each
   shell anchor states its own --pk-link / --pk-link-hover — the convention the
   rest of this file already uses — instead of fighting the rule with `color`. */
.fx-brand { --pk-link: var(--foreground); --pk-link-hover: var(--foreground); }
.fx-iconbtn,
.fx-bell { --pk-link: var(--muted-foreground); --pk-link-hover: var(--foreground); }
.fx-bell.has-unread { --pk-link: var(--foreground); }
.fx-nav__link,
.fx-menuitem { --pk-link: var(--secondary-foreground); --pk-link-hover: var(--foreground); }
.fx-nav__link.is-current,
.fx-nav__link--staff,
.fx-menuitem--staff,
.fx-menuitem[aria-current="page"] { --pk-link: var(--foreground); }
.fx-crumbs a { --pk-link: var(--muted-foreground); --pk-link-hover: var(--foreground); }
.fx-footer__links a { --pk-link: var(--secondary-foreground); --pk-link-hover: var(--primary-ink); }   /* red on hover, as on pkoug.org */
.fx-footer__brand { --pk-link: var(--foreground); --pk-link-hover: var(--foreground); }
.fx-footer__lead a { --pk-link: var(--primary-ink); --pk-link-hover: var(--primary-ink-hover); }
.fx-signin-prompt a { --pk-link: var(--primary-ink); --pk-link-hover: var(--primary-ink-hover); }
.fx-bottomnav__item { --pk-link: var(--muted-foreground); --pk-link-hover: var(--foreground); }
.fx-bottomnav__item--ask { --pk-link: var(--foreground); }
.fx-bottomnav__item.is-current { --pk-link: var(--primary-ink); --pk-link-hover: var(--primary-ink); }

/* The official PkOUG mark is a primary orientation cue, not a favicon-sized
   accessory. Its quiet halo separates the transparent artwork from either
   theme without redrawing or modifying the supplied logo. */
.fx-brand__mark {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in oklch, var(--border) 76%, var(--pkoug-green));
  border-radius: 13px;
  background: linear-gradient(145deg, color-mix(in oklch, var(--card) 92%, white), var(--muted));
  box-shadow: 0 7px 20px -14px color-mix(in oklch, var(--shadow-ink) 58%, transparent), inset 0 1px 0 color-mix(in oklch, white 72%, transparent);
}
.fx-logo { display: block; width: 36px; height: 36px; object-fit: contain; }
.fx-brand__text { display: grid; min-width: 0; line-height: 1.15; }
.fx-wordmark { font-size: 1.125rem; font-weight: 750; letter-spacing: -.025em; }
.fx-wordmark__pk  { color: var(--pkoug-green); }
.fx-wordmark__oug { color: var(--pkoug-red); }
.fx-brand__sub {
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: .6875rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fx-brand__host { display: none; }   /* the host joins the identity on the desktop bar */
/* Phones say "Forum" in full rather than an ellipsized "Community For…";
   "Community Forum" from tablet up. */
@media (max-width: 47.99rem) {
  .fx-header .fx-brand__wide { display: none; }
}

/* ---- actions */
.fx-header__actions {
  order: 2;
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--pk-space-1);
}

.fx-iconbtn,
.fx-bell,
.fx-theme__toggle {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--muted-foreground);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.fx-iconbtn:hover,
.fx-bell:hover,
.fx-theme__toggle:hover,
.fx-theme[open] > .fx-theme__toggle { background: var(--accent); color: var(--foreground); }
.fx-iconbtn .fx-icon,
.fx-bell .fx-icon,
.fx-theme__toggle .fx-icon { width: 1.25rem; height: 1.25rem; }
.fx-bell.has-unread { color: var(--foreground); }

.fx-bell__count {
  position: absolute;
  top: 5px;
  right: 3px;
  min-width: 1.125rem;
  padding: 0 .25rem;
  border: 2px solid var(--card);
  border-radius: var(--radius-pill);
  background: var(--primary-fill);
  color: var(--primary-foreground);
  font-size: .625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: .875rem;
  text-align: center;
}

.fx-ask { display: none; gap: var(--pk-space-1); white-space: nowrap; }
.fx-ask__more { display: none; }
.fx-signin { white-space: nowrap; }

/* ---- account menu (desktop bar) */
.fx-account { display: none; }
.fx-me {
  display: inline-flex;
  align-items: center;
  gap: var(--pk-space-2);
  height: 36px;
  padding: 0 var(--pk-space-2) 0 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--foreground);
  font-size: .8125rem;
  font-weight: 600;
}
.fx-me:hover,
.fx-account[open] .fx-me { border-color: var(--border-strong); background: var(--accent); }
.fx-me .fx-monogram { width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm); font-size: .6875rem; }
.fx-me__name { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-me__caret { width: 1rem; height: 1rem; color: var(--muted-foreground); }
.fx-account__panel { min-width: 16rem; }
.fx-account__who {
  margin: 0 0 var(--pk-space-1);
  padding: var(--pk-space-1) var(--pk-space-2) var(--pk-space-2);
  border-bottom: 1px solid var(--border);
  color: var(--muted-foreground);
  font-size: .8125rem;
}
.fx-account__who strong { color: var(--foreground); }

/* ---- global search (command-palette style) */
.fx-search {
  position: relative;
  display: none;
  align-items: center;
  gap: var(--pk-space-1);
  min-width: 0;
  height: 2.5rem;
  margin: 0;
  padding: 0 .375rem 0 2.25rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur-fast) ease;
}
.fx-search:focus-within { border-color: var(--ring); outline: 2px solid var(--ring); outline-offset: 2px; }

.fx-search__icon {
  position: absolute;
  top: 50%;
  left: .75rem;
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%);
  color: var(--muted-foreground);
  pointer-events: none;
}

.fx-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--foreground);
  font: inherit;
  font-size: .875rem;
}
.fx-search__input::placeholder { color: var(--muted-foreground); opacity: 1; }
/* The whole field carries the focus ring (above), so the input's own is not
   drawn twice. */
.fx-body .fx-search__input:focus-visible { outline: none; }

.fx-search__scope {
  flex: none;
  max-width: 7.5rem;
  height: 1.75rem;
  padding: 0 .25rem 0 .5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--muted);
  color: var(--secondary-foreground);
  font: inherit;
  font-size: .75rem;
  font-weight: 500;
  cursor: pointer;
}

.fx-search__kbd {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 1.375rem;
  height: 1.375rem;
  padding: 0 .25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--muted);
  color: var(--muted-foreground);
  font-family: var(--font-mono);
  font-size: .6875rem;
  line-height: 1;
}
.fx-search:focus-within .fx-search__kbd { display: none; }

/* Phones: the full-screen search sheet. */
.fx-searchsheet {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: var(--pk-space-3) var(--shell-pad);
  border: 0;
  background: var(--background);
  color: var(--foreground);
}
.fx-searchsheet::backdrop { background: var(--pk-overlay); }
.fx-searchsheet__bar { display: flex; align-items: center; gap: var(--pk-space-2); }
.fx-search.fx-search--sheet { display: flex; flex: 1 1 auto; height: 2.75rem; }
.fx-searchsheet__hint { margin: var(--pk-space-4) 0 0; color: var(--muted-foreground); font-size: .8125rem; }

/* On the search page its own form is the tool; a second one in the bar above
   it is the duplication the audit flagged. */
.fx-page-search .fx-search:not(.fx-search--sheet),
.fx-page-search .fx-search-open { display: none; }

/* ---- the section menu (phones and tablet) */
.fx-menu { order: 0; }

.fx-menu__toggle {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--foreground);
  cursor: pointer;
  list-style: none;
}
.fx-menu__toggle::-webkit-details-marker { display: none; }
.fx-menu__toggle:hover { background: var(--accent); }
.fx-menu__toggle .fx-icon { grid-area: 1 / 1; width: 1.25rem; height: 1.25rem; }
.fx-menu__close { display: none; }
.fx-menu[open] .fx-menu__open { display: none; }
.fx-menu[open] .fx-menu__close { display: block; }

/* Without JavaScript the open menu flows in the page — every destination
   reachable, nothing overlaid. With it, the menu is a panel that drops over
   the content below the header and closes again. */
html:not(.fx-js) .fx-menu[open] { order: 10; flex: 1 0 100%; }

.fx-js .fx-menu[open] > .fx-nav {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  max-height: calc(100vh - 7.5rem);
  max-height: calc(100dvh - 7.5rem);
  overflow-y: auto;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-pop);
}

.fx-nav__inner {
  display: grid;
  gap: var(--pk-space-4);
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding: var(--pk-space-4) var(--shell-pad) var(--pk-space-5);
}
html:not(.fx-js) .fx-nav__inner { padding-inline: 0; }

.fx-nav__label {
  margin: 0 0 var(--pk-space-1);
  padding-inline: var(--pk-space-3);
  color: var(--muted-foreground);
  font-size: .6875rem;
  font-weight: 650;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.fx-nav__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pk-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fx-nav__link {
  display: flex;
  align-items: center;
  gap: var(--pk-space-2);
  width: 100%;
  min-height: 44px;
  padding: 0 var(--pk-space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--secondary-foreground);
  font: inherit;
  font-size: .875rem;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.fx-nav__link > .fx-icon { width: 1.05rem; height: 1.05rem; color: var(--muted-foreground); transition: color var(--dur-fast) ease, transform var(--dur-fast) ease; }
.fx-nav__link:hover > .fx-icon,
.fx-nav__link.is-current > .fx-icon { color: var(--primary-ink); }
.fx-nav__link:hover > .fx-icon { transform: translateY(-1px); }
.fx-nav__link:hover { background: var(--accent); color: var(--foreground); }

/* The current section: a bar AND a surface AND a weight AND aria-current. */
.fx-nav__link.is-current {
  background: var(--accent);
  color: var(--foreground);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--primary);
}

.fx-nav__more { display: none; }
.fx-nav__account { padding-top: var(--pk-space-4); border-top: 1px solid var(--border); }
.fx-nav__signout { display: grid; gap: 2px; margin-top: var(--pk-space-2); }
.fx-theme-choice {
  display: flex;
  align-items: center;
  margin-left: auto;
  padding-left: var(--pk-space-2);
}
.fx-theme-choice__select {
  min-height: 36px;
  max-width: 8.5rem;
  padding: 0 1.75rem 0 var(--pk-space-2);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-sm);
  background: var(--pk-surface);
  color: var(--pk-ink-soft);
  font: inherit;
  font-size: var(--pk-text-xs);
  font-weight: var(--pk-weight-semibold);
}
.fx-theme-choice__select:focus-visible {
  outline: var(--pk-focus-width) solid var(--pk-focus-ring);
  outline-offset: var(--pk-focus-offset);
}

.fx-main { padding-block: var(--pk-space-6) var(--pk-space-16); }

/* The staff destination — Forum Admin or Moderation — is a real nav item with
   an icon, so it is findable without reading every word of the bar. */
.fx-nav__link--staff { color: var(--foreground); font-weight: 600; }
.fx-nav__link--staff .fx-icon { width: 1rem; height: 1rem; color: var(--success); }

/* ---- popovers and their items (theme, account, More) */
.fx-pop { position: relative; }
.fx-pop > summary { list-style: none; cursor: pointer; }
.fx-pop > summary::-webkit-details-marker { display: none; }

.fx-pop__panel {
  position: absolute;
  top: calc(100% + var(--pk-space-2));
  right: 0;
  z-index: var(--pk-z-dropdown);
  display: grid;
  gap: 2px;
  min-width: 13rem;
  padding: var(--pk-space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--popover);
  box-shadow: var(--shadow-pop);
}
.fx-pop__title {
  margin: 0;
  padding: var(--pk-space-1) var(--pk-space-2);
  color: var(--muted-foreground);
  font-size: .6875rem;
  font-weight: 650;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.fx-pop__sep { margin: var(--pk-space-1) 0; border: 0; border-top: 1px solid var(--border); }

.fx-menuitem {
  display: flex;
  align-items: center;
  gap: var(--pk-space-2);
  width: 100%;
  min-height: 44px;
  padding: var(--pk-space-1) var(--pk-space-2);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--secondary-foreground);
  font: inherit;
  font-size: .875rem;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.fx-menuitem:hover { background: var(--accent); color: var(--foreground); }
.fx-menuitem .fx-icon { flex: none; width: 1.1rem; height: 1.1rem; }
.fx-menuitem__text { display: grid; }
.fx-menuitem__hint { color: var(--muted-foreground); font-size: .75rem; font-weight: 400; }
.fx-menuitem--quiet { color: var(--muted-foreground); }
.fx-menuitem--staff { color: var(--foreground); font-weight: 600; }
.fx-menuitem__check { margin-left: auto; visibility: hidden; }
.fx-menuitem[aria-pressed="true"],
.fx-menuitem[aria-current="page"] { background: var(--accent); color: var(--foreground); font-weight: 600; }
.fx-menuitem[aria-pressed="true"] .fx-menuitem__check { visibility: visible; }
.fx-signout-form { display: block; }

/* ---- theme control: hidden without JavaScript (its choices need it) */
.fx-theme { display: none; }
.fx-js .fx-theme { display: block; }
.fx-theme__toggle { display: grid; }   /* block-level: an inline box would add line-height and grow the bar */
.fx-theme__toggle .fx-icon { grid-area: 1 / 1; display: none; }
.fx-theme__toggle .fx-theme__icon--system { display: block; }
:root[data-fx-pref="light"] .fx-theme__toggle .fx-theme__icon--system,
:root[data-fx-pref="dark"]  .fx-theme__toggle .fx-theme__icon--system { display: none; }
:root[data-fx-pref="light"] .fx-theme__toggle .fx-theme__icon--light,
:root[data-fx-pref="dark"]  .fx-theme__toggle .fx-theme__icon--dark { display: block; }
.fx-theme__panel { min-width: 11rem; }

.fx-nav__theme { display: none; }
.fx-js .fx-nav__theme { display: block; }
.fx-themeseg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--muted);
}
.fx-themeseg__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pk-space-1);
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--secondary-foreground);
  font: inherit;
  font-size: .875rem;
  cursor: pointer;
}
.fx-themeseg__btn .fx-icon { width: 1rem; height: 1rem; }
.fx-themeseg__btn[aria-pressed="true"] { background: var(--card); color: var(--foreground); font-weight: 600; box-shadow: var(--shadow-card); }

/* ---- breadcrumbs */
.fx-crumbs { margin: 0 0 var(--pk-space-4); color: var(--muted-foreground); font-size: .8125rem; }
.fx-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 .375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fx-crumbs__list li { display: inline-flex; align-items: center; gap: .375rem; min-width: 0; }
.fx-crumbs__list li + li::before { content: "/"; color: var(--border-strong); }
.fx-crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted-foreground);
  text-decoration: none;
}
.fx-crumbs a:hover { color: var(--foreground); text-decoration: underline; }
.fx-crumbs [aria-current="page"] { color: var(--foreground); font-weight: 500; overflow-wrap: anywhere; }

/* ---- main, flash */
.fx-main { padding-block: var(--pk-space-5) var(--pk-space-16); }
.fx-flash { margin-bottom: var(--pk-space-5); }

/* ---- inline sign-in prompt (never a modal) */
.fx-signin-prompt {
  display: flex;
  align-items: center;
  gap: var(--pk-space-2);
  margin: 0;
  padding: var(--pk-space-2) var(--pk-space-3);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--elevated);
  color: var(--muted-foreground);
  font-size: .8125rem;
}
.fx-signin-prompt .fx-icon { flex: none; width: 1rem; height: 1rem; }
.fx-signin-prompt a { color: var(--primary-ink); font-weight: 600; }
.fx-signin-prompt a:hover { color: var(--primary-ink-hover); }

/* ---- footer: the portal's sunk band, kept technical */
.fx-footer {
  border-top: 1px solid var(--border);
  padding-top: var(--pk-space-8);
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: .8125rem;
}
.fx-footer p { margin: 0; }
.fx-footer__inner { display: grid; gap: var(--pk-space-6); }
.fx-footer__top { display: grid; gap: var(--pk-space-6); }
.fx-footer__id { display: grid; gap: var(--pk-space-3); max-width: 44ch; }
.fx-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  justify-self: start;
  min-height: 44px;
  border-radius: var(--radius-md);
  text-decoration: none;
}
.fx-footer__brand .fx-logo { width: 40px; height: 40px; }
.fx-footer__lead { color: var(--secondary-foreground); line-height: 1.55; }
.fx-footer__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pk-space-6); }
.fx-footer__head {
  margin: 0 0 var(--pk-space-1);
  color: var(--foreground);
  font-size: .6875rem;
  font-weight: 650;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.fx-footer__links { display: grid; margin: 0; padding: 0; list-style: none; }
.fx-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}
.fx-footer__links a:hover { text-decoration: underline; }
.fx-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--pk-space-2) var(--pk-space-6);
  padding-block: var(--pk-space-4);
  border-top: 1px solid var(--border);
  font-size: .75rem;
}

/* ---- bottom nav (phones only) */
.fx-bottomnav { display: none; }

.fx-bottomnav__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Exactly 3.5rem, whatever it holds: the page reserves this height (plus the
   nav's 1px border) below the footer, so an item that grew would hide it. */
.fx-bottomnav__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  height: 3.5rem;
  padding: 3px 2px;
  color: var(--muted-foreground);
  font-size: .6875rem;
  font-weight: 500;
  line-height: 1.15;
  text-decoration: none;
}
.fx-bottomnav__item:hover { color: var(--foreground); }

.fx-bottomnav__icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 1.75rem;
  border-radius: var(--radius-md);
}
.fx-bottomnav__icon .fx-icon { width: 1.25rem; height: 1.25rem; }

/* Current: the red top bar, a tinted, filled icon, a weight — and aria-current. */
.fx-bottomnav__item.is-current { color: var(--primary-ink); font-weight: 600; }
.fx-bottomnav__item.is-current::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 1.75rem;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, var(--primary), var(--primary-deep));
}
.fx-bottomnav__item.is-current .fx-bottomnav__icon { background: var(--primary-soft); }
.fx-bottomnav__item.is-current .fx-icon { fill: color-mix(in oklch, currentColor 20%, transparent); }

.fx-bottomnav__item--ask { color: var(--foreground); }
.fx-bottomnav__item--ask .fx-bottomnav__icon,
.fx-bottomnav__item--ask.is-current .fx-bottomnav__icon {
  width: 2.5rem;
  height: 1.75rem;
  background: linear-gradient(180deg, var(--primary-fill), var(--primary-fill-deep));
  color: var(--primary-foreground);
  box-shadow: var(--shadow-card);
}

.fx-bottomnav__count {
  position: absolute;
  top: -3px;
  right: -4px;
  min-width: 1rem;
  padding: 0 .2rem;
  border: 2px solid var(--card);
  border-radius: var(--radius-pill);
  background: var(--primary-fill);
  color: var(--primary-foreground);
  font-size: .5625rem;
  font-weight: 700;
  line-height: .75rem;
  text-align: center;
}

@media (max-width: 47.99rem) {
  /* The page reserves the bottom nav's height — its 3.5rem items plus its
     1px top border — so nothing hides behind it. */
  .fx-body { padding-bottom: calc(3.5rem + 1px + env(safe-area-inset-bottom, 0px)); }
  .fx-bottomnav {
    display: block;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--pk-z-sticky);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--border);
    background: var(--card);
    box-shadow: 0 -8px 22px -16px color-mix(in oklch, var(--shadow-ink) 30%, transparent);
  }
}

/* ---- tablet */
@media (min-width: 48rem) {
  .fx-header__inner { flex-wrap: nowrap; gap: var(--pk-space-2); }
  .fx-brand { margin-right: 0; }
  .fx-brand__mark { width: 46px; height: 46px; }
  .fx-logo { width: 40px; height: 40px; }
  .fx-wordmark { font-size: 1.1875rem; }
  .fx-search { order: 2; display: flex; flex: 1 1 16rem; max-width: 36rem; margin-inline: var(--pk-space-2) auto; }
  .fx-header__actions { order: 3; }
  .fx-search-open { display: none; }
  .fx-ask { display: inline-flex; }
  .fx-js .fx-nav__theme { display: none; }
  .fx-nav__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fx-page-search .fx-header__actions { margin-left: auto; }
  .fx-footer__top { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
}

/* ---- desktop: two rows, sticky together */
@media (min-width: 64rem) {
  .fx-header { position: sticky; top: 0; }
  .fx-header__inner { flex-wrap: wrap; row-gap: 0; min-height: 0; padding-block: .75rem 0; }
  .fx-search { flex: 1 1 24rem; max-width: 40rem; margin-inline: var(--pk-space-6) auto; }
  .fx-brand__mark { width: 58px; height: 58px; border-radius: 17px; }
  .fx-logo { width: 52px; height: 52px; }
  .fx-wordmark { font-size: 1.375rem; }
  .fx-brand__sub { font-size: .75rem; }
  .fx-brand__host { display: inline; }

  .fx-iconbtn,
  .fx-bell,
  .fx-theme__toggle { width: 36px; height: 36px; }
  .fx-bell__count { top: 1px; right: -2px; }
  .fx-ask__more { display: inline; }
  .fx-account { display: block; }

  .fx-menu { order: 10; flex: 1 0 100%; }
  .fx-menu__toggle { display: none; }
  .fx-js .fx-menu[open] > .fx-nav { position: static; max-height: none; overflow: visible; border: 0; background: none; box-shadow: none; }

  .fx-nav { margin-top: .875rem; padding-block: .375rem; border-top: 1px solid var(--border); background: linear-gradient(90deg, color-mix(in oklch, var(--muted) 72%, transparent), color-mix(in oklch, var(--card) 84%, transparent)); }
  .fx-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pk-space-3);
    max-width: none;
    padding: 0;
  }
  .fx-nav__label,
  .fx-nav__account,
  .fx-nav__item--flat { display: none; }
  .fx-nav__more { display: block; }
  .fx-nav__list { display: flex; align-items: center; gap: .25rem; }
  .fx-nav__link {
    position: relative;
    min-height: 40px;
    margin: 0;
    padding: 0 .75rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
  }
  .fx-nav__link::after {
    position: absolute;
    right: .75rem;
    bottom: 3px;
    left: .75rem;
    height: 2px;
    border-radius: var(--radius-pill);
    background: transparent;
    content: "";
  }
  .fx-nav__link:hover { border-color: var(--border); background: color-mix(in oklch, var(--card) 82%, transparent); color: var(--foreground); }
  .fx-nav__link.is-current { border-color: color-mix(in oklch, var(--primary) 25%, var(--border)); background: var(--card); box-shadow: 0 7px 18px -15px var(--shadow-ink), inset 0 1px 0 color-mix(in oklch, white 60%, transparent); }
  .fx-nav__link.is-current::after { background: linear-gradient(90deg, var(--primary), var(--pkoug-green)); }
  .fx-nav__group--aside { padding-left: var(--pk-space-3); border-left: 1px solid var(--border); }
  .fx-nav__link--platform { color: var(--muted-foreground); }

  .fx-more__toggle { gap: .25rem; }
  .fx-more__caret { width: 1rem; height: 1rem; color: var(--muted-foreground); }
  .fx-more[open] > .fx-more__toggle { color: var(--foreground); }
  .fx-more__panel { top: 100%; right: auto; left: 0; min-width: 12rem; }

  .fx-crumbs a,
  .fx-footer__links a { min-height: 32px; }
}

/* ------------------------------------------------------- page masthead --- */

.fx-pagehead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--pk-space-3) var(--pk-space-5);
  margin-bottom: var(--pk-space-5);
}

.fx-pagehead__text { flex: 1 1 26rem; min-width: 0; }

.fx-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pk-space-1) var(--pk-space-2);
  margin: 0 0 var(--pk-space-2);
  color: var(--pk-ink-muted);
  font-size: var(--pk-text-xs);
  font-weight: var(--pk-weight-semibold);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.fx-eyebrow a { --pk-link: var(--pk-ink-muted); --pk-link-hover: var(--pk-ink); text-decoration: none; }
.fx-eyebrow a:hover { text-decoration: underline; }
.fx-eyebrow .fx-icon { width: .875rem; height: .875rem; }

.fx-pagehead__title,
.fx-main .pk-h1 {
  margin: 0;
  color: var(--pk-ink);
  font-size: var(--pk-text-2xl);
  font-weight: var(--pk-weight-heavy);
  line-height: var(--pk-leading-tight);
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.fx-pagehead__lead { margin: var(--pk-space-2) 0 0; max-width: 66ch; color: var(--pk-ink-muted); }
.fx-pagehead__meta { margin-top: var(--pk-space-3); }
.fx-pagehead__actions { display: flex; flex-wrap: wrap; gap: var(--pk-space-2); }

/* ------------------------------------------------------------- panels --- */

.fx-panel {
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-md);
  background: var(--fx-card);
}
.fx-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pk-space-2);
  padding: var(--pk-space-3) var(--pk-space-4);
  border-bottom: 1px solid var(--pk-divider);
}
.fx-panel__title { margin: 0; font-size: var(--pk-text-base); font-weight: var(--pk-weight-bold); color: var(--pk-ink); }
.fx-panel__body { padding: var(--pk-space-4); }

.fx-section { margin-bottom: var(--pk-space-8); }

.fx-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pk-space-2);
  margin-bottom: var(--pk-space-3);
  padding-bottom: var(--pk-space-2);
  border-bottom: 1px solid var(--pk-divider);
}

.fx-section__title { margin: 0; color: var(--pk-ink); font-size: var(--pk-text-lg); font-weight: var(--pk-weight-bold); letter-spacing: -0.01em; }
.fx-section__more { font-size: var(--pk-text-sm); font-weight: var(--pk-weight-medium); }

/* ------------------------------------------------------ status + chips --- */

/* A state is a word with an icon, on a tint. The colour is the third cue,
   never the only one. */
.fx-state {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .125rem .55rem;
  border: 1px solid var(--pk-border-strong);
  border-radius: var(--pk-radius-full);
  background: var(--pk-surface);
  color: var(--pk-ink-soft);
  font-size: var(--pk-text-xs);
  font-weight: var(--pk-weight-semibold);
  line-height: 1.4;
  white-space: nowrap;
}
.fx-state .fx-icon { width: .875rem; height: .875rem; stroke-width: 2.2; }
.fx-state--solved     { background: var(--fx-solved-tint); border-color: var(--fx-solved-edge); color: var(--fx-solved); }
.fx-state--discussion { background: var(--fx-tech-tint); border-color: var(--fx-tech-edge); color: var(--fx-tech); }
.fx-state--waiting    { border-style: dashed; }
.fx-state--locked     { background: var(--pk-warning-tint); border-color: var(--pk-warning-edge); color: var(--pk-warning); }
.fx-state--removed    { background: var(--pk-danger-tint); border-color: var(--pk-danger-edge); color: var(--pk-danger); }

.fx-chip {
  --pk-link: var(--pk-ink-soft);
  --pk-link-hover: var(--pk-ink);
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  max-width: 100%;
  min-height: 1.625rem;
  padding: 0 .5rem;
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-sm);
  background: var(--pk-surface-sunk);
  font-size: var(--pk-text-xs);
  font-weight: var(--pk-weight-medium);
  line-height: 1.3;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.fx-chip:hover { border-color: var(--pk-border-strong); }
.fx-chip .fx-icon { width: .8rem; height: .8rem; }

.fx-chip--tag {
  --pk-link: var(--fx-tech);
  --pk-link-hover: var(--fx-tech);
  border-color: transparent;
  background: var(--fx-tech-tint);
  font-family: var(--pk-font-mono);
}
.fx-chip--tag:hover { border-color: var(--fx-tech-edge); }

/* -------------------------------------------------- filters + segments --- */

.fx-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pk-space-2);
  margin-bottom: var(--pk-space-4);
}

.fx-filter {
  --pk-link: var(--pk-ink-muted);
  --pk-link-hover: var(--pk-ink);
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--pk-space-3);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-full);
  background: var(--pk-surface);
  font-size: var(--pk-text-sm);
  font-weight: var(--pk-weight-medium);
  text-decoration: none;
  white-space: nowrap;
}
.fx-filter:hover { border-color: var(--pk-border-strong); }

/* Current filter: inverted neutral, heavier, and aria-current in the markup.
   Not brand red — red is for the primary action, not for "this is selected". */
.fx-filter.is-current {
  --pk-link: var(--pk-surface);
  --pk-link-hover: var(--pk-surface);
  border-color: var(--pk-ink);
  background: var(--pk-ink);
  font-weight: var(--pk-weight-semibold);
}

/* A labelled group of options. Wraps rather than scrolls, so no option is
   ever hidden off the edge. */
.fx-seg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pk-space-1) var(--pk-space-2);
}
.fx-seg__label {
  flex: 0 0 auto;
  margin-right: var(--pk-space-1);
  color: var(--pk-ink-faint);
  font-size: var(--pk-text-xs);
  font-weight: var(--pk-weight-semibold);
  letter-spacing: .05em;
  text-transform: uppercase;
}

@media (max-width: 47.99rem), (pointer: coarse) {
  .fx-filter { min-height: 44px; }
}

/* ------------------------------------------------------- empty states --- */

/* Compact, neutral, and context-specific. The platform's empty state carries
   a red radial wash and 64px of padding, which on a forum reads as an alarm
   and pushes the next useful thing below the fold. */
.fx-body .fx-empty {
  gap: var(--pk-space-3);
  padding: var(--pk-space-8) var(--pk-space-5);
  background: var(--pk-surface);
  text-align: center;
}
.fx-empty__icon {
  box-sizing: content-box;
  width: 1.5rem;
  height: 1.5rem;
  padding: .625rem;
  border-radius: var(--pk-radius-full);
  background: var(--pk-surface-sunk);
  color: var(--pk-ink-muted);
}
.fx-body .fx-empty .pk-empty__title { font-size: var(--pk-text-lg); color: var(--pk-ink); }
.fx-body .fx-empty--page { margin-top: var(--pk-space-4); padding-block: var(--pk-space-12); }
.fx-body .fx-empty--page .pk-empty__title { font-size: var(--pk-text-2xl); font-weight: var(--pk-weight-heavy); }
.fx-empty__cta { margin: var(--pk-space-1) 0 0; }

/* ------------------------------------------------------- error document --- */

/* The standalone page for responses that must not depend on the database or
   the session — a refused SSO assertion, a throttle, an outage. Same tokens,
   same brand, no navigation that could need either. */
.fx-errdoc { display: grid; min-height: 100vh; grid-template-rows: auto 1fr auto; }
.fx-errdoc__bar { border-bottom: 1px solid var(--pk-border); background: var(--pk-surface); }
.fx-errdoc__bar .pk-container { padding-block: var(--pk-space-3); }
.fx-errdoc__main { display: grid; place-items: center; padding: var(--pk-space-10) var(--pk-container-pad); }
.fx-errdoc__card {
  width: 100%;
  max-width: 34rem;
  padding: var(--pk-space-8) var(--pk-space-6);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-lg);
  background: var(--pk-surface);
  box-shadow: var(--pk-shadow-md);
}
.fx-errdoc__icon {
  box-sizing: content-box;
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: var(--pk-space-4);
  padding: .625rem;
  border-radius: var(--pk-radius-full);
  background: var(--pk-surface-sunk);
  color: var(--pk-ink-soft);
}
.fx-errdoc__code {
  margin: 0 0 var(--pk-space-2);
  color: var(--pk-ink-faint);
  font-family: var(--pk-font-mono);
  font-size: var(--pk-text-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.fx-errdoc h1 { margin: 0 0 var(--pk-space-3); font-size: var(--pk-text-2xl); line-height: var(--pk-leading-tight); color: var(--pk-ink); }
.fx-errdoc__card p { margin: 0 0 var(--pk-space-3); color: var(--pk-ink-muted); }
.fx-errdoc__actions { display: flex; flex-wrap: wrap; gap: var(--pk-space-2); margin-top: var(--pk-space-5); }
.fx-errdoc__foot { padding: var(--pk-space-4) var(--pk-container-pad); color: var(--pk-ink-faint); font-size: var(--pk-text-xs); text-align: center; }

/* ----------------------------------------------------------- home page --- */

/* A working masthead: identity, search, the primary action, and four real
   pathways with their real counts. Left-aligned and compact — the old
   centred display hero pushed every question below the fold on a phone. */
.fx-home-mast {
  position: relative;
  display: grid;
  gap: var(--pk-space-6);
  margin-bottom: var(--pk-space-12);
  padding: var(--pk-space-5);
  overflow: hidden;
  border: 1px solid var(--pk-border);
  border-top: 4px solid var(--primary-fill);
  border-radius: var(--pk-radius-xl);
  background:
    radial-gradient(circle at 86% 16%, color-mix(in oklch, var(--fx-tech) 13%, transparent), transparent 24rem),
    linear-gradient(135deg, var(--primary-soft), transparent 42%),
    var(--fx-card);
  box-shadow: var(--pk-shadow-md);
}

.fx-home-mast::after {
  position: absolute;
  top: -7rem;
  left: 42%;
  width: 21rem;
  height: 21rem;
  border: 1px solid color-mix(in oklch, var(--primary) 12%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 4rem color-mix(in oklch, var(--primary) 3%, transparent),
              0 0 0 8rem color-mix(in oklch, var(--fx-tech) 2%, transparent);
  content: "";
  pointer-events: none;
}

.fx-home-mast > * { position: relative; z-index: 1; }
.fx-home-mast__text { min-width: 0; }

.fx-home-mast__title {
  margin: 0;
  color: var(--pk-ink);
  font-size: clamp(2.2rem, 1.65rem + 2.75vw, 4.25rem);
  font-weight: var(--pk-weight-heavy);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.fx-home-mast__title span { color: var(--primary-ink); }

.fx-home-mast__lead { margin: var(--pk-space-4) 0 0; max-width: 60ch; color: var(--pk-ink-soft); font-size: var(--pk-text-lg); line-height: 1.55; }

.fx-home-search { position: relative; display: flex; gap: var(--pk-space-2); max-width: 42rem; margin-top: var(--pk-space-4); }
.fx-home-search .pk-input { flex: 1 1 auto; min-width: 0; padding-left: 2.6rem; }
.fx-home-search__icon { position: absolute; top: 50%; left: .85rem; transform: translateY(-50%); color: var(--pk-ink-faint); pointer-events: none; }

.fx-home-mast__actions { display: flex; flex-wrap: wrap; gap: var(--pk-space-2); margin: var(--pk-space-3) 0 0; }

/* The home mast is a compact platform introduction rather than a decorative
   banner. Its pathway is progressively enhanced: every step remains a normal
   link and the active state simply explains the route in more detail. */
.fx-body--home .fx-home-mast {
  isolation: isolate;
  border: 1px solid rgb(255 255 255 / .1);
  border-top: 0;
  background:
    radial-gradient(circle at 8% 8%, rgb(238 29 35 / .25), transparent 24rem),
    radial-gradient(circle at 90% 90%, rgb(16 147 91 / .22), transparent 26rem),
    linear-gradient(135deg, rgb(7 18 29), rgb(11 29 43) 58%, rgb(7 23 30));
  box-shadow: 0 1.6rem 4rem rgb(3 10 18 / .24);
  color: rgb(255 255 255);
}
.fx-body--home .fx-home-mast::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(rgb(255 255 255 / .035) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / .035) 1px, transparent 1px);
  background-size: 3rem 3rem;
  mask-image: linear-gradient(105deg, transparent 2%, rgb(0 0 0 / .8), transparent 78%);
  content: "";
}
.fx-body--home .fx-home-mast::after {
  top: auto;
  right: -7rem;
  bottom: -11rem;
  left: auto;
  border-color: rgb(119 217 170 / .12);
  box-shadow: 0 0 0 4rem rgb(119 217 170 / .035), 0 0 0 8rem rgb(255 255 255 / .018);
}
.fx-body--home .fx-home-mast .fx-eyebrow { color: rgb(119 217 170); }
.fx-body--home .fx-home-mast__title { color: rgb(255 255 255); }
.fx-body--home .fx-home-mast__title span { color: rgb(255 87 96); }
.fx-body--home .fx-home-mast__lead { color: rgb(255 255 255 / .72); }
.fx-home-mast__proof {
  display: grid;
  gap: .7rem;
  margin: var(--pk-space-5) 0 0;
  padding: 0;
  list-style: none;
}
.fx-home-mast__proof li { display: flex; align-items: flex-start; gap: .65rem; color: rgb(255 255 255 / .68); font-size: var(--pk-text-sm); line-height: 1.45; }
.fx-home-mast__proof .fx-icon { flex: none; width: 1.05rem; height: 1.05rem; margin-top: .18rem; color: rgb(119 217 170); }
.fx-home-mast__proof strong { color: rgb(255 255 255); }
.fx-body--home .fx-home-search .pk-input {
  border-color: rgb(255 255 255 / .17);
  background: rgb(255 255 255 / .09);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .05);
  color: rgb(255 255 255);
  backdrop-filter: blur(12px);
}
.fx-body--home .fx-home-search .pk-input::placeholder { color: rgb(255 255 255 / .45); }
.fx-body--home .fx-home-search .pk-input:focus { border-color: rgb(119 217 170); box-shadow: 0 0 0 3px rgb(119 217 170 / .16); }
.fx-body--home .fx-home-search__icon { color: rgb(255 255 255 / .48); }
.fx-body--home .fx-home-search .pk-btn--secondary,
.fx-body--home .fx-home-mast__actions .pk-btn--secondary { border-color: rgb(255 255 255 / .25); background: rgb(255 255 255 / .08); color: rgb(255 255 255); }
.fx-body--home .fx-home-search .pk-btn--secondary:hover,
.fx-body--home .fx-home-mast__actions .pk-btn--secondary:hover { border-color: rgb(255 255 255 / .5); background: rgb(255 255 255 / .14); }

.fx-home-journey {
  align-self: stretch;
  min-width: 0;
  padding: var(--pk-space-5);
  border: 1px solid rgb(255 255 255 / .13);
  border-radius: calc(var(--pk-radius-xl) - .25rem);
  background: rgb(3 12 21 / .56);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .07);
  backdrop-filter: blur(16px);
}
.fx-home-journey__head { display: flex; align-items: start; justify-content: space-between; gap: var(--pk-space-4); margin-bottom: var(--pk-space-4); }
.fx-home-journey__head .fx-eyebrow { margin-bottom: .35rem; }
.fx-home-journey__head h2 { max-width: 18ch; margin: 0; color: rgb(255 255 255); font-size: var(--pk-text-xl); line-height: 1.15; }
.fx-home-journey__signal { display: inline-flex; align-items: center; gap: .4rem; flex: none; color: rgb(255 255 255 / .48); font: 600 .61rem/1.2 var(--pk-font-mono); letter-spacing: .05em; text-transform: uppercase; }
.fx-home-journey__signal i { width: .45rem; height: .45rem; border-radius: 50%; background: rgb(119 217 170); box-shadow: 0 0 0 .22rem rgb(119 217 170 / .12), 0 0 .9rem rgb(119 217 170 / .72); }
.fx-home-journey__steps { position: relative; display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.fx-home-journey__steps::before {
  position: absolute;
  top: 1.9rem;
  bottom: 1.9rem;
  left: 2.28rem;
  width: 1px;
  background: linear-gradient(rgb(119 217 170 / .75), rgb(238 29 35 / .6));
  content: "";
}
.fx-home-journey__step {
  --pk-link: rgb(255 255 255);
  --pk-link-hover: rgb(255 255 255);
  position: relative;
  display: grid;
  grid-template-columns: 1.8rem 2.35rem minmax(0, 1fr);
  align-items: center;
  gap: .65rem;
  min-height: 4.15rem;
  padding: .55rem .65rem;
  border: 1px solid transparent;
  border-radius: var(--pk-radius-lg);
  text-decoration: none;
  transition: border-color var(--pk-dur-fast) var(--pk-ease), background var(--pk-dur-fast) var(--pk-ease), transform var(--pk-dur-fast) var(--pk-ease);
}
.fx-home-journey__step:hover,
.fx-home-journey__step:focus-visible,
.fx-home-journey__step.is-active { border-color: rgb(255 255 255 / .12); background: rgb(255 255 255 / .075); transform: translateX(.25rem); }
.fx-home-journey__number { color: rgb(255 255 255 / .35); font: 600 .63rem/1 var(--pk-font-mono); }
.fx-home-journey__icon { position: relative; z-index: 1; display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border: 1px solid rgb(255 255 255 / .18); border-radius: 50%; background: rgb(9 27 40); color: rgb(255 255 255 / .65); transition: background var(--pk-dur-fast) var(--pk-ease), color var(--pk-dur-fast) var(--pk-ease), box-shadow var(--pk-dur-fast) var(--pk-ease); }
.fx-home-journey__icon .fx-icon { width: 1rem; height: 1rem; }
.fx-home-journey__step.is-active .fx-home-journey__icon,
.fx-home-journey__step:hover .fx-home-journey__icon,
.fx-home-journey__step:focus-visible .fx-home-journey__icon { border-color: rgb(119 217 170 / .55); background: rgb(16 147 91); color: rgb(255 255 255); box-shadow: 0 0 0 .28rem rgb(16 147 91 / .12), 0 0 1.2rem rgb(16 147 91 / .28); }
.fx-home-journey__step strong,
.fx-home-journey__step small { display: block; }
.fx-home-journey__step strong { color: rgb(255 255 255); font-size: var(--pk-text-sm); }
.fx-home-journey__step small { margin-top: .18rem; color: rgb(255 255 255 / .48); font-size: .69rem; line-height: 1.35; }
.fx-home-journey__detail { min-height: 2.8rem; margin: var(--pk-space-4) 0 0; padding: .75rem .85rem; border-left: 2px solid rgb(238 29 35); background: rgb(255 255 255 / .045); color: rgb(255 255 255 / .62); font-size: var(--pk-text-xs); line-height: 1.45; }

.fx-body--home .fx-quick__item { border-color: rgb(255 255 255 / .12); background: rgb(255 255 255 / .065); color: rgb(255 255 255); }
.fx-body--home .fx-quick__item:hover { border-color: rgb(255 255 255 / .3); background: rgb(255 255 255 / .1); }
.fx-body--home .fx-quick__n { color: rgb(255 255 255); }
.fx-body--home .fx-quick__l { color: rgb(255 255 255 / .5); }
.fx-body--home .fx-quick__icon { color: rgb(255 255 255 / .56); }
.fx-body--home .fx-quick__item--solved .fx-quick__icon { color: rgb(119 217 170); }

.fx-home-map {
  align-self: stretch;
  display: grid;
  gap: var(--pk-space-4);
  min-width: 0;
  padding: var(--pk-space-5);
  overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--fx-tech) 26%, var(--pk-border));
  border-radius: var(--pk-radius-lg);
  background:
    linear-gradient(145deg, color-mix(in oklch, var(--fx-tech) 9%, transparent), transparent 56%),
    var(--fx-card);
  box-shadow: inset 0 1px 0 color-mix(in oklch, white 65%, transparent);
}
.fx-home-map__heading { display: grid; gap: 2px; }
.fx-home-map__heading span {
  color: var(--fx-tech);
  font-family: var(--pk-font-mono);
  font-size: var(--pk-text-xs);
  font-weight: var(--pk-weight-semibold);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.fx-home-map__heading strong { color: var(--pk-ink); font-size: var(--pk-text-lg); line-height: var(--pk-leading-snug); }
.fx-home-map__stage { position: relative; min-height: 15rem; }
.fx-home-map__orbit,
.fx-home-map__line,
.fx-home-map__core,
.fx-home-map__node { position: absolute; }
.fx-home-map__orbit {
  inset: 1rem 12%;
  border: 1px dashed color-mix(in oklch, var(--fx-tech) 38%, var(--pk-border));
  border-radius: 50%;
}
.fx-home-map__line { top: 50%; left: 14%; right: 14%; height: 1px; background: color-mix(in oklch, var(--fx-tech) 24%, var(--pk-border)); }
.fx-home-map__line--b { top: 12%; bottom: 12%; left: 50%; width: 1px; height: auto; }
.fx-home-map__core,
.fx-home-map__node {
  display: grid;
  place-items: center;
  border: 1px solid var(--pk-border);
  background: var(--fx-card);
  box-shadow: var(--pk-shadow-md);
  color: var(--pk-ink);
}
.fx-home-map__core {
  top: 50%; left: 50%;
  width: 6.6rem; height: 6.6rem;
  padding: var(--pk-space-3);
  transform: translate(-50%, -50%);
  border-color: var(--pk-brand-red-edge);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--primary-soft), var(--fx-card) 62%);
}
.fx-home-map__core .fx-icon { width: 1.45rem; height: 1.45rem; color: var(--primary-ink); }
.fx-home-map__core b { margin-top: -2px; font-size: var(--pk-text-sm); }
.fx-home-map__core small { margin-top: -5px; color: var(--pk-ink-faint); font-size: .64rem; }
.fx-home-map__node {
  grid-template-columns: auto 1fr;
  gap: var(--pk-space-2);
  min-width: 5.9rem;
  min-height: 2.6rem;
  padding: var(--pk-space-2) var(--pk-space-3);
  border-radius: var(--pk-radius-full);
  font-size: var(--pk-text-xs);
}
.fx-home-map__node .fx-icon { width: 1rem; height: 1rem; color: var(--fx-tech); }
.fx-home-map__node--search { top: 0; left: 50%; transform: translateX(-50%); }
.fx-home-map__node--ask { top: 50%; right: 0; transform: translateY(-50%); }
.fx-home-map__node--solve { bottom: 0; left: 50%; transform: translateX(-50%); }
.fx-home-map__node--solve .fx-icon { color: var(--fx-solved); }
.fx-home-map__node--share { top: 50%; left: 0; transform: translateY(-50%); }
.fx-home-map__legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pk-space-2); margin: 0; padding: 0; list-style: none; }
.fx-home-map__legend li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--pk-space-2);
  color: var(--pk-ink-muted);
  font-size: var(--pk-text-xs);
  line-height: 1.4;
}
.fx-home-map__legend span { color: var(--primary-ink); font-family: var(--pk-font-mono); font-weight: var(--pk-weight-bold); }

.fx-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pk-space-2); align-content: end; }

.fx-quick__item {
  --pk-link: var(--pk-ink);
  --pk-link-hover: var(--pk-ink);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0 var(--pk-space-3);
  min-height: 44px;
  padding: var(--pk-space-3);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-lg);
  background: color-mix(in oklch, var(--fx-card) 92%, var(--fx-tech-tint));
  text-decoration: none;
  transition: transform var(--pk-dur-fast) var(--pk-ease), border-color var(--pk-dur-fast) var(--pk-ease), box-shadow var(--pk-dur-fast) var(--pk-ease);
}
.fx-quick__item:hover { transform: translateY(-2px); border-color: var(--pk-border-strong); box-shadow: var(--pk-shadow-sm); }
.fx-quick__icon { grid-row: span 2; width: 1.35rem; height: 1.35rem; color: var(--pk-ink-muted); }
.fx-quick__n { font-size: var(--pk-text-xl); font-weight: var(--pk-weight-bold); line-height: 1.1; font-variant-numeric: tabular-nums; }
.fx-quick__l { color: var(--pk-ink-muted); font-size: var(--pk-text-xs); line-height: 1.3; }
.fx-quick__item--solved .fx-quick__icon { color: var(--fx-solved); }

.fx-home-paths { margin-bottom: var(--pk-space-12); }
.fx-home-intro { max-width: 50rem; margin-bottom: var(--pk-space-6); }
.fx-home-intro h2,
.fx-home-join h2 { margin: 0; color: var(--pk-ink); font-size: var(--pk-text-2xl); line-height: var(--pk-leading-tight); letter-spacing: var(--pk-tracking-tight); }
.fx-home-intro > p:last-child { margin: var(--pk-space-2) 0 0; color: var(--pk-ink-muted); }

.fx-home-paths__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-3); }
.fx-home-path {
  --fx-path-accent: var(--primary-fill);
  --fx-path-tint: var(--primary-soft);
  --pk-link: var(--pk-ink);
  --pk-link-hover: var(--pk-ink);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  gap: var(--pk-space-2) var(--pk-space-3);
  min-height: 16rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--pk-border);
  border-top: 4px solid var(--fx-path-accent);
  border-radius: var(--pk-radius-lg);
  background:
    radial-gradient(circle at 100% 0, var(--fx-path-tint), transparent 10rem),
    var(--fx-card);
  text-decoration: none;
  transition: transform var(--pk-dur-fast) var(--pk-ease), border-color var(--pk-dur-fast) var(--pk-ease), box-shadow var(--pk-dur-fast) var(--pk-ease);
}
.fx-home-path::after { position: absolute; right: var(--pk-space-5); bottom: var(--pk-space-5); width: 4rem; height: 4rem; border: 1px solid var(--fx-path-accent); border-radius: 50%; opacity: .1; content: ""; transition: transform .45s var(--pk-ease), opacity .45s var(--pk-ease); }
.fx-home-path:hover { transform: translateY(-5px); border-color: var(--fx-path-accent); box-shadow: var(--pk-shadow-md); }
.fx-home-path:hover::after { opacity: .22; transform: scale(1.35); }
.fx-home-path--ask { --fx-path-accent: var(--primary-fill); --fx-path-tint: var(--primary-soft); }
.fx-home-path--discuss { --fx-path-accent: var(--fx-tech); --fx-path-tint: var(--fx-tech-tint); }
.fx-home-path--explore { --fx-path-accent: var(--fx-solved); --fx-path-tint: var(--fx-solved-tint); }
.fx-home-path--connect { --fx-path-accent: var(--pk-ink-muted); --fx-path-tint: var(--pk-surface-sunk); }
.fx-home-path__number { align-self: center; color: var(--pk-ink-faint); font-family: var(--pk-font-mono); font-size: var(--pk-text-xs); font-weight: var(--pk-weight-bold); }
.fx-home-path__iconwrap {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--pk-radius-lg);
  background: var(--fx-path-tint);
  color: var(--fx-path-accent);
}
.fx-home-path__icon { width: 1.45rem; height: 1.45rem; color: currentColor; }
.fx-home-path__kicker { align-self: center; color: var(--pk-ink-muted); font-family: var(--pk-font-mono); font-size: var(--pk-text-xs); font-weight: var(--pk-weight-semibold); letter-spacing: .04em; text-transform: uppercase; }
.fx-home-path strong { grid-column: 1 / -1; margin-top: var(--pk-space-3); color: var(--pk-ink); font-size: var(--pk-text-lg); line-height: var(--pk-leading-snug); }
.fx-home-path__description { grid-column: 1 / -1; color: var(--pk-ink-muted); font-size: var(--pk-text-sm); line-height: 1.55; }
.fx-home-path__link { grid-column: 1 / -1; align-self: end; margin-top: auto; padding-top: var(--pk-space-3); color: var(--fx-path-accent); font-size: var(--pk-text-sm); font-weight: var(--pk-weight-semibold); }

.fx-home-activity {
  display: grid;
  gap: var(--pk-space-3);
  margin: 0 0 var(--pk-space-6);
  padding-bottom: var(--pk-space-5);
  border-bottom: 1px solid var(--pk-divider);
}
.fx-home-activity h2 { margin: 0; color: var(--pk-ink); font-size: var(--pk-text-2xl); line-height: var(--pk-leading-tight); letter-spacing: var(--pk-tracking-tight); }
.fx-home-activity > p { margin: 0; max-width: 48rem; color: var(--pk-ink-muted); line-height: 1.6; }

.fx-home-grid { display: grid; gap: var(--pk-space-2); }
.fx-home-grid__main,
.fx-home-grid__rail { min-width: 0; }
.fx-home-grid__rail { display: grid; gap: var(--pk-space-5); align-content: start; }

.fx-rail-list { margin: 0; padding: var(--pk-space-1) 0; list-style: none; }

.fx-rail-list__link {
  --pk-link: var(--pk-ink-soft);
  --pk-link-hover: var(--pk-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pk-space-3);
  min-height: 44px;
  padding: 0 var(--pk-space-4);
  font-size: var(--pk-text-sm);
  font-weight: var(--pk-weight-medium);
  text-decoration: none;
}
.fx-rail-list__link:hover { background: var(--pk-surface-sunk); }
.fx-rail-list__count { flex: 0 0 auto; color: var(--pk-ink-faint); font-size: var(--pk-text-xs); font-weight: var(--pk-weight-regular, 400); }

.fx-mini { display: grid; gap: 2px; padding: var(--pk-space-3) var(--pk-space-4); border-top: 1px solid var(--pk-divider); }
.fx-mini:first-child { border-top: 0; }
.fx-mini__title { --pk-link: var(--pk-ink); --pk-link-hover: var(--pk-brand-red-ink); font-size: var(--pk-text-sm); font-weight: var(--pk-weight-semibold); line-height: var(--pk-leading-snug); text-decoration: none; }
.fx-mini__title:hover { text-decoration: underline; }
.fx-mini__meta { color: var(--pk-ink-faint); font-size: var(--pk-text-xs); }

.fx-quiet-note { display: flex; align-items: center; gap: var(--pk-space-2); margin: 0; padding: var(--pk-space-4) 0; color: var(--pk-ink-muted); font-size: var(--pk-text-sm); }
.fx-quiet-note .fx-icon { color: var(--fx-solved); }

.fx-home-feed {
  padding: var(--pk-space-4);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-lg);
  background: var(--fx-card);
}
.fx-home-feed .fx-section__head { align-items: flex-end; }
.fx-home-feed .fx-section__head > div { flex: 1 1 22rem; min-width: 0; }
.fx-section__lead { margin: var(--pk-space-1) 0 0; max-width: 60ch; color: var(--pk-ink-muted); font-size: var(--pk-text-sm); }
.fx-home-feed .fx-eyebrow,
.fx-panel__head .fx-eyebrow { margin-bottom: var(--pk-space-1); }

.fx-home-contributors { border-top: 3px solid var(--primary-fill); }
.fx-home-contributors__mark { width: 1.5rem; height: 1.5rem; color: var(--primary-ink); }
.fx-home-contributors .fx-spotlight__who { margin-top: var(--pk-space-1); }
.fx-home-contributors .pk-btn { margin-top: var(--pk-space-2); }

.fx-home-why { background: linear-gradient(145deg, var(--fx-tech-tint), var(--fx-card) 65%); }
.fx-home-why__icon { width: 2rem; height: 2rem; margin-bottom: var(--pk-space-4); color: var(--fx-tech); }
.fx-home-why .fx-panel__title { max-width: 16ch; font-size: var(--pk-text-xl); line-height: var(--pk-leading-tight); }
.fx-home-why ul { display: grid; gap: var(--pk-space-2); margin: var(--pk-space-4) 0; padding: 0; list-style: none; color: var(--pk-ink-soft); font-size: var(--pk-text-sm); }
.fx-home-why li { position: relative; padding-left: var(--pk-space-5); }
.fx-home-why li::before { position: absolute; left: 0; color: var(--fx-solved); content: "✓"; font-weight: var(--pk-weight-bold); }

.fx-home-join {
  display: grid;
  gap: var(--pk-space-5);
  margin-top: var(--pk-space-4);
  padding: var(--pk-space-6);
  border: 1px solid var(--pk-brand-red-edge);
  border-radius: var(--pk-radius-xl);
  background: linear-gradient(120deg, var(--primary-soft), var(--fx-card) 70%);
}
.fx-home-join > div > p:last-child { margin: var(--pk-space-3) 0 0; max-width: 62ch; color: var(--pk-ink-muted); }
.fx-home-join__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-2); margin: 0; }

.fx-motion-ready .fx-reveal.is-pending { opacity: 0; transform: translateY(1.25rem); }
.fx-motion-ready .fx-reveal.is-visible { animation: fx-home-reveal .65s var(--pk-ease) both; }

@keyframes fx-home-reveal {
  from { opacity: 0; transform: translateY(1.25rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fx-home-orbit {
  to { transform: rotate(360deg); }
}

@keyframes fx-home-float {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -.3rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .fx-home-map__orbit { animation: fx-home-orbit 32s linear infinite; }
  .fx-home-map__node { animation: fx-home-float 4s ease-in-out infinite; }
  .fx-home-map__node--ask { animation-delay: -.8s; }
  .fx-home-map__node--solve { animation-delay: -1.6s; }
  .fx-home-map__node--share { animation-delay: -2.4s; }
}

/* The stronger brand treatment is deliberately homepage-scoped. */
.fx-body--home .fx-wordmark { font-size: 1.2rem; }
.fx-body--home .fx-footer { border-top-color: var(--pk-brand-red-edge); }

/* ------------------------------------------------------------- listings --- */

/* Questions and Discussions use the same data contract, but announce two
   different jobs: resolve a problem, or open a conversation. These rules are
   scoped to their two index body classes so category/tag/profile lists keep
   their existing density. */
.fx-indexhero {
  display: grid;
  gap: var(--pk-space-5);
  margin-bottom: var(--pk-space-5);
  padding: var(--pk-space-5);
  overflow: hidden;
  border: 1px solid var(--pk-border);
  border-top: 3px solid var(--primary-fill);
  border-radius: var(--pk-radius-xl);
  background: linear-gradient(135deg, var(--primary-soft), transparent 44%), var(--fx-card);
  box-shadow: var(--pk-shadow-sm);
}
.fx-indexhero--discussion { border-top-color: var(--fx-tech); background: linear-gradient(135deg, var(--fx-tech-tint), transparent 44%), var(--fx-card); }
.fx-indexhero__main { min-width: 0; }
.fx-indexhero__main h1 { margin: 0; color: var(--pk-ink); font-size: var(--pk-text-3xl); line-height: var(--pk-leading-tight); letter-spacing: var(--pk-tracking-tight); }
.fx-indexhero__main > p:last-child { margin: var(--pk-space-3) 0 0; max-width: 64ch; color: var(--pk-ink-soft); font-size: var(--pk-text-lg); line-height: 1.55; }
.fx-indexhero__aside {
  display: grid;
  align-content: start;
  gap: var(--pk-space-3);
  padding: var(--pk-space-4);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-lg);
  background: color-mix(in oklch, var(--fx-card) 88%, var(--pk-surface-sunk));
}
.fx-indexhero__aside > p { margin: 0; color: var(--pk-ink-muted); font-size: var(--pk-text-sm); line-height: 1.5; }
.fx-indexhero__count { display: flex; align-items: baseline; gap: var(--pk-space-2); }
.fx-indexhero__count strong { color: var(--pk-ink); font-family: var(--pk-font-mono); font-size: var(--pk-text-3xl); line-height: 1; }
.fx-indexhero__count span { color: var(--pk-ink-muted); font-size: var(--pk-text-xs); font-weight: var(--pk-weight-semibold); letter-spacing: .04em; text-transform: uppercase; }
.fx-indexhero__aside .pk-btn { justify-self: start; }

.fx-index-tools {
  margin-bottom: var(--pk-space-5);
  padding: var(--pk-space-3);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-lg);
  background: var(--fx-card);
}
.fx-index-tools__find { display: grid; gap: var(--pk-space-3); padding-bottom: var(--pk-space-3); border-bottom: 1px solid var(--pk-divider); }
.fx-index-search { position: relative; display: flex; gap: var(--pk-space-2); min-width: 0; }
.fx-index-search .pk-input { flex: 1 1 auto; min-width: 0; padding-left: 2.6rem; }
.fx-index-search__icon { position: absolute; top: 50%; left: .85rem; width: 1rem; height: 1rem; transform: translateY(-50%); color: var(--pk-ink-faint); pointer-events: none; }
.fx-index-tools__categories { display: inline-flex; align-items: center; gap: var(--pk-space-2); min-height: 44px; color: var(--pk-ink-soft); font-size: var(--pk-text-sm); font-weight: var(--pk-weight-semibold); text-decoration: none; }
.fx-index-tools__categories:hover { color: var(--primary-ink); }
.fx-index-tools__categories .fx-icon { width: 1rem; height: 1rem; }
.fx-index-tools .fx-toolbar { margin: var(--pk-space-3) 0 0; padding: 0; border: 0; }

.fx-list.fx-index-list { gap: var(--pk-space-3); }
.fx-index-list .fx-topic {
  padding: var(--pk-space-4);
  border: 1px solid var(--pk-border);
  border-left: 3px solid var(--pk-border-strong);
  border-radius: var(--pk-radius-lg);
  background: var(--fx-card);
  box-shadow: var(--pk-shadow-xs);
  transition: border-color var(--pk-dur-fast) var(--pk-ease), box-shadow var(--pk-dur-fast) var(--pk-ease), transform var(--pk-dur-fast) var(--pk-ease);
}
.fx-index-list .fx-topic:hover { transform: translateY(-1px); border-color: var(--pk-border-strong); box-shadow: var(--pk-shadow-md); }
.fx-index-list--question .fx-topic--solved { border-left-color: var(--fx-solved); }
.fx-index-list--question .fx-topic--waiting { border-left-color: var(--primary-ink); }
.fx-index-list--discussion .fx-topic { border-left-color: var(--fx-tech); }
.fx-index-list .fx-topic__title { font-size: var(--pk-text-xl); }
.fx-index-list .fx-topic__excerpt { max-width: 72ch; }
.fx-index-list .fx-topic__stats { padding: var(--pk-space-2) var(--pk-space-3); border-radius: var(--pk-radius-md); background: var(--pk-surface-sunk); }
.fx-index-list .fx-topic__byline::before { content: "Active"; color: var(--pk-ink-faint); font-family: var(--pk-font-mono); font-size: .65rem; letter-spacing: .04em; text-transform: uppercase; }
.fx-body--index .fx-resultline { margin-bottom: var(--pk-space-3); }
.fx-body--index .fx-resultline strong { color: var(--pk-ink-soft); font-weight: var(--pk-weight-semibold); }
.fx-body--index .fx-empty { border: 1px dashed var(--pk-border-strong); border-radius: var(--pk-radius-lg); }

/* The toolbar above a listing: labelled option groups and nothing else. */
.fx-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pk-space-3) var(--pk-space-6);
  margin-bottom: var(--pk-space-4);
  padding-bottom: var(--pk-space-4);
  border-bottom: 1px solid var(--pk-divider);
}

.fx-resultline { margin: 0 0 var(--pk-space-1); color: var(--pk-ink-faint); font-size: var(--pk-text-sm); }

.fx-list { display: flex; flex-direction: column; gap: 0; }

/* A topic row reads in the order a person scanning for an answer needs:
   state, title, a line of context, then where it lives and who is on it.
   The counters are a stable column beside it from tablet up and a quiet
   strip beneath it on a phone. */
.fx-topic {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pk-space-3);
  padding-block: var(--pk-space-4);
  border-bottom: 1px solid var(--pk-divider);
}

.fx-topic__main { display: flex; flex-direction: column; gap: var(--pk-space-2); min-width: 0; }

.fx-topic__state { display: flex; flex-wrap: wrap; gap: var(--pk-space-1); margin: 0; }

.fx-topic__title { margin: 0; font-size: var(--pk-text-lg); font-weight: var(--pk-weight-bold); line-height: var(--pk-leading-snug); overflow-wrap: anywhere; }
.fx-topic__title a { --pk-link: var(--pk-ink); --pk-link-hover: var(--pk-brand-red-ink); text-decoration: none; }
.fx-topic__title a:hover { text-decoration: underline; }

.fx-topic__excerpt {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--pk-ink-muted);
  font-size: var(--pk-text-sm);
  line-height: var(--pk-leading-normal);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow-wrap: anywhere;
}

.fx-topic__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pk-space-2) var(--pk-space-4);
}

.fx-topic__tax { display: flex; flex-wrap: wrap; gap: var(--pk-space-1); margin: 0; min-width: 0; }

.fx-topic__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pk-space-1);
  margin: 0;
  color: var(--pk-ink-faint);
  font-size: var(--pk-text-xs);
}
.fx-topic__byline a { --pk-link: var(--pk-ink-soft); --pk-link-hover: var(--pk-ink); font-weight: var(--pk-weight-medium); text-decoration: none; }
.fx-topic__byline a:hover { text-decoration: underline; }

.fx-topic__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pk-space-1) var(--pk-space-4);
  margin: 0;
  color: var(--pk-ink-muted);
  font-size: var(--pk-text-xs);
}

/* <dt>label</dt><dd>n</dd>, displayed number first. */
.fx-stat { display: inline-flex; flex-direction: row-reverse; align-items: baseline; gap: .3rem; margin: 0; }
.fx-stat dt { color: var(--pk-ink-faint); }
.fx-stat dd { display: inline-flex; align-items: center; gap: 2px; margin: 0; color: var(--pk-ink); font-weight: var(--pk-weight-semibold); font-variant-numeric: tabular-nums; }
.fx-stat dd .fx-icon { width: .85rem; height: .85rem; stroke-width: 2.6; }
.fx-stat--none dd { color: var(--pk-ink-faint); }
.fx-stat--solved dd,
.fx-stat--solved dt { color: var(--fx-solved); }

/* Legacy row shape still used by the bookmarks list until it is rebuilt. */
.fx-topic__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-2); margin: 0; font-size: var(--pk-text-xs); color: var(--pk-ink-muted); }
.fx-stat b { color: var(--pk-ink); font-weight: var(--pk-weight-semibold); }

/* ----------------------------------------------------------- categories --- */

.fx-category-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--pk-space-7);
  margin-bottom: var(--pk-space-10);
  padding: clamp(1.5rem, 5vw, 3.5rem);
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / .1);
  border-radius: var(--pk-radius-xl);
  background:
    radial-gradient(circle at 10% 5%, rgb(238 29 35 / .23), transparent 23rem),
    radial-gradient(circle at 94% 90%, rgb(16 147 91 / .23), transparent 25rem),
    linear-gradient(135deg, rgb(7 18 29), rgb(10 29 43) 56%, rgb(6 24 30));
  box-shadow: 0 1.5rem 4rem rgb(3 10 18 / .22);
  color: rgb(255 255 255);
}
.fx-category-hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(rgb(255 255 255 / .035) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / .035) 1px, transparent 1px);
  background-size: 3rem 3rem;
  mask-image: linear-gradient(110deg, rgb(0 0 0 / .8), transparent 72%);
  content: "";
}
.fx-category-hero::after {
  position: absolute;
  z-index: -1;
  right: -8rem;
  bottom: -12rem;
  width: 24rem;
  height: 24rem;
  border: 1px solid rgb(119 217 170 / .12);
  border-radius: 50%;
  box-shadow: 0 0 0 4rem rgb(119 217 170 / .035), 0 0 0 8rem rgb(255 255 255 / .018);
  content: "";
}
.fx-category-hero__copy { align-self: center; min-width: 0; }
.fx-category-hero .fx-eyebrow { color: rgb(119 217 170); }
.fx-category-hero__copy h1 { max-width: 13ch; margin: 0; color: rgb(255 255 255); font-size: clamp(2.35rem, 1.9rem + 2.6vw, 4.35rem); line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
.fx-category-hero__lead { max-width: 62ch; margin: var(--pk-space-4) 0 0; color: rgb(255 255 255 / .7); font-size: var(--pk-text-lg); line-height: 1.55; }
.fx-category-hero__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: var(--pk-space-6) 0 0; overflow: hidden; border: 1px solid rgb(255 255 255 / .1); border-radius: var(--pk-radius-lg); background: rgb(255 255 255 / .1); }
.fx-category-hero__stats div { display: flex; flex-direction: column-reverse; gap: .2rem; min-width: 0; padding: .85rem 1rem; background: rgb(5 17 27 / .76); }
.fx-category-hero__stats dt { color: rgb(255 255 255 / .48); font-size: .68rem; line-height: 1.3; }
.fx-category-hero__stats dd { margin: 0; color: rgb(255 255 255); font: 700 var(--pk-text-xl)/1 var(--pk-font-mono); }
.fx-category-hero__actions { display: flex; flex-wrap: wrap; gap: var(--pk-space-2); margin: var(--pk-space-5) 0 0; }
.fx-category-hero__actions .pk-btn--secondary { border-color: rgb(255 255 255 / .25); background: rgb(255 255 255 / .07); color: rgb(255 255 255); }
.fx-category-hero__actions .pk-btn--secondary:hover { border-color: rgb(255 255 255 / .5); background: rgb(255 255 255 / .13); }

.fx-category-route { min-width: 0; padding: var(--pk-space-5); border: 1px solid rgb(255 255 255 / .13); border-radius: calc(var(--pk-radius-xl) - .25rem); background: rgb(3 12 21 / .56); box-shadow: inset 0 1px 0 rgb(255 255 255 / .07); backdrop-filter: blur(16px); }
.fx-category-route__head { margin-bottom: var(--pk-space-4); }
.fx-category-route__head .fx-eyebrow { margin-bottom: .35rem; }
.fx-category-route__head h2 { max-width: 16ch; margin: 0; color: rgb(255 255 255); font-size: var(--pk-text-2xl); line-height: 1.12; }
.fx-category-route__steps { position: relative; display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.fx-category-route__steps::before { position: absolute; top: 2rem; bottom: 2rem; left: 2.3rem; width: 1px; background: linear-gradient(rgb(119 217 170 / .72), rgb(238 29 35 / .64)); content: ""; }
.fx-category-route__step { --pk-link: rgb(255 255 255); --pk-link-hover: rgb(255 255 255); position: relative; display: grid; grid-template-columns: 1.8rem 2.4rem minmax(0, 1fr); align-items: center; gap: .65rem; min-height: 4.55rem; padding: .6rem .7rem; border: 1px solid transparent; border-radius: var(--pk-radius-lg); text-decoration: none; transition: transform var(--pk-dur-fast) var(--pk-ease), border-color var(--pk-dur-fast) var(--pk-ease), background var(--pk-dur-fast) var(--pk-ease); }
.fx-category-route__step:hover,
.fx-category-route__step:focus-visible,
.fx-category-route__step.is-active { border-color: rgb(255 255 255 / .12); background: rgb(255 255 255 / .075); transform: translateX(.25rem); }
.fx-category-route__number { color: rgb(255 255 255 / .35); font: 600 .63rem/1 var(--pk-font-mono); }
.fx-category-route__icon { position: relative; z-index: 1; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid rgb(255 255 255 / .18); border-radius: 50%; background: rgb(9 27 40); color: rgb(255 255 255 / .65); transition: background var(--pk-dur-fast) var(--pk-ease), color var(--pk-dur-fast) var(--pk-ease), box-shadow var(--pk-dur-fast) var(--pk-ease); }
.fx-category-route__icon .fx-icon { width: 1rem; height: 1rem; }
.fx-category-route__step:is(.is-active, :hover, :focus-visible) .fx-category-route__icon { border-color: rgb(119 217 170 / .55); background: rgb(16 147 91); color: rgb(255 255 255); box-shadow: 0 0 0 .28rem rgb(16 147 91 / .12), 0 0 1.2rem rgb(16 147 91 / .28); }
.fx-category-route__step strong,
.fx-category-route__step small { display: block; }
.fx-category-route__step strong { color: rgb(255 255 255); font-size: var(--pk-text-sm); }
.fx-category-route__step small { margin-top: .18rem; color: rgb(255 255 255 / .48); font-size: .69rem; line-height: 1.35; }
.fx-category-route__detail { min-height: 2.9rem; margin: var(--pk-space-4) 0 0; padding: .75rem .85rem; border-left: 2px solid rgb(238 29 35); background: rgb(255 255 255 / .045); color: rgb(255 255 255 / .62); font-size: var(--pk-text-xs); line-height: 1.45; }

.fx-category-directory { scroll-margin-top: 8rem; }
.fx-category-directory__head { display: grid; gap: var(--pk-space-5); align-items: end; margin-bottom: var(--pk-space-6); padding-bottom: var(--pk-space-5); border-bottom: 1px solid var(--pk-divider); }
.fx-category-directory__head h2 { margin: 0; color: var(--pk-ink); font-size: var(--pk-text-2xl); line-height: var(--pk-leading-tight); letter-spacing: var(--pk-tracking-tight); }
.fx-category-directory__head > div:first-child > p:last-child { max-width: 60ch; margin: var(--pk-space-2) 0 0; color: var(--pk-ink-muted); line-height: 1.55; }
.fx-category-filter { min-width: 0; }
.fx-category-filter > label { display: block; margin-bottom: var(--pk-space-2); color: var(--pk-ink-soft); font-size: var(--pk-text-sm); font-weight: var(--pk-weight-semibold); }
.fx-category-filter__field { position: relative; display: flex; align-items: center; }
.fx-category-filter__field > .fx-icon { position: absolute; left: .85rem; z-index: 1; width: 1rem; height: 1rem; color: var(--pk-ink-faint); pointer-events: none; }
.fx-category-filter__field .pk-input { width: 100%; min-height: 3rem; padding-right: 4.2rem; padding-left: 2.55rem; background: var(--fx-card); box-shadow: var(--pk-shadow-sm); }
.fx-category-filter__field button { position: absolute; right: .55rem; min-height: 2rem; padding: .2rem .55rem; border: 0; border-radius: var(--pk-radius-sm); background: var(--pk-surface-sunk); color: var(--pk-ink-muted); font: inherit; font-size: var(--pk-text-xs); cursor: pointer; }
.fx-category-filter__field button:hover { color: var(--pk-ink); }
.fx-category-filter__result { margin: .55rem 0 0; color: var(--pk-ink-faint); font-size: var(--pk-text-xs); }

.fx-body--categories .fx-cats { gap: var(--pk-space-4); }
.fx-body--categories .fx-cat { position: relative; display: flex; flex-direction: column; gap: 0; min-width: 0; min-height: 25rem; padding: var(--pk-space-5); overflow: hidden; border: 1px solid var(--pk-border); border-radius: var(--pk-radius-xl); background: linear-gradient(145deg, var(--fx-card), color-mix(in srgb, var(--fx-tech-tint) 24%, var(--fx-card))); box-shadow: var(--pk-shadow-sm); transition: transform var(--pk-dur-fast) var(--pk-ease), border-color var(--pk-dur-fast) var(--pk-ease), box-shadow var(--pk-dur-fast) var(--pk-ease); }
.fx-body--categories .fx-cat::before { position: absolute; top: -4rem; right: -4rem; width: 10rem; height: 10rem; border: 1px solid color-mix(in srgb, var(--fx-tech) 18%, transparent); border-radius: 50%; box-shadow: 0 0 0 2rem color-mix(in srgb, var(--fx-tech) 3%, transparent); content: ""; transition: transform .5s var(--pk-ease); }
.fx-body--categories .fx-cat::after { display: none; }
.fx-body--categories .fx-cat:hover,
.fx-body--categories .fx-cat:focus-within { transform: translateY(-4px); border-color: var(--fx-tech-edge); box-shadow: var(--pk-shadow-md); }
.fx-body--categories .fx-cat:hover .fx-cat__name { text-decoration: none; }
.fx-body--categories .fx-cat:hover::before,
.fx-body--categories .fx-cat:focus-within::before { transform: scale(1.22); }
.fx-body--categories .fx-cat[hidden] { display: none; }
.fx-cat__head { position: relative; z-index: 1; display: flex; align-items: start; justify-content: space-between; gap: var(--pk-space-3); margin-bottom: var(--pk-space-5); }
.fx-cat__area-icon { display: grid; place-items: center; width: 3.15rem; height: 3.15rem; border: 1px solid var(--fx-tech-edge); border-radius: var(--pk-radius-lg); background: var(--fx-tech-tint); color: var(--fx-tech); }
.fx-cat__area-icon .fx-icon { width: 1.45rem; height: 1.45rem; }
.fx-body--categories .fx-cat__count { display: grid; justify-items: end; gap: .15rem; margin: 0; color: var(--pk-ink-faint); font-size: .68rem; text-align: right; }
.fx-body--categories .fx-cat__count strong { color: var(--pk-ink-soft); font-size: var(--pk-text-xs); font-variant-numeric: tabular-nums; }
.fx-body--categories .fx-cat__name { position: relative; z-index: 1; margin: 0; font-size: var(--pk-text-xl); line-height: 1.15; letter-spacing: -.02em; }
.fx-body--categories .fx-cat__name a { color: var(--pk-ink); text-decoration: none; }
.fx-body--categories .fx-cat__name a::after { position: absolute; inset: 0; content: ""; }
.fx-body--categories .fx-cat__name a:hover { color: var(--fx-tech); text-decoration: none; }
.fx-body--categories .fx-cat__desc { position: relative; z-index: 1; margin: var(--pk-space-3) 0 0; color: var(--pk-ink-muted); font-size: var(--pk-text-sm); line-height: 1.55; }
.fx-cat__products-label { margin: var(--pk-space-5) 0 var(--pk-space-2); color: var(--pk-ink-faint); font-family: var(--pk-font-mono); font-size: .65rem; font-weight: var(--pk-weight-semibold); letter-spacing: .07em; text-transform: uppercase; }
.fx-body--categories .fx-cat__kids { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; }
.fx-body--categories .fx-cat__kids li { display: contents; }
.fx-body--categories .fx-cat__kids a { display: inline-flex; align-items: center; min-height: 2rem; padding: .3rem .55rem; border: 1px solid var(--pk-border); border-radius: var(--pk-radius-full); background: var(--pk-surface-sunk); color: var(--pk-ink-soft); font-size: .72rem; line-height: 1.25; text-decoration: none; }
.fx-body--categories .fx-cat__kids a:hover,
.fx-body--categories .fx-cat__kids a:focus-visible { border-color: var(--fx-tech-edge); background: var(--fx-tech-tint); color: var(--fx-tech); }
.fx-body--categories .fx-cat__more { position: relative; z-index: 2; margin-top: .55rem; }
.fx-body--categories .fx-cat__more summary { display: inline-flex; align-items: center; min-height: 2rem; color: var(--fx-tech); font-size: .72rem; font-weight: var(--pk-weight-semibold); cursor: pointer; }
.fx-body--categories .fx-cat__more summary:hover { text-decoration: underline; }
.fx-body--categories .fx-cat__kids--more { margin-top: .45rem; }
.fx-cat__foot { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--pk-space-3); margin-top: auto; padding-top: var(--pk-space-5); }
.fx-cat__foot > a { display: inline-flex; align-items: center; gap: .4rem; color: var(--fx-tech); font-size: var(--pk-text-sm); font-weight: var(--pk-weight-semibold); text-decoration: none; }
.fx-cat__foot > a .fx-icon { width: 1rem; height: 1rem; transition: transform var(--pk-dur-fast) var(--pk-ease); }
.fx-cat__foot > a:hover .fx-icon { transform: translateX(.2rem); }
.fx-category-empty { padding: var(--pk-space-10) var(--pk-space-5); border: 1px dashed var(--pk-border-strong); border-radius: var(--pk-radius-xl); background: var(--fx-card); text-align: center; }
.fx-category-empty[hidden] { display: none; }
.fx-category-empty > .fx-icon { width: 2rem; height: 2rem; color: var(--pk-ink-faint); }
.fx-category-empty h3 { margin: var(--pk-space-3) 0 var(--pk-space-2); color: var(--pk-ink); }
.fx-category-empty p { max-width: 42rem; margin: 0 auto var(--pk-space-4); color: var(--pk-ink-muted); }

@media (prefers-reduced-motion: no-preference) {
  .fx-category-route__step.is-active .fx-category-route__icon { animation: fx-category-pulse 2.4s ease-in-out infinite; }
  .fx-category-hero::after { animation: fx-category-orbit 18s linear infinite; }
}
@keyframes fx-category-pulse {
  0%, 100% { box-shadow: 0 0 0 .28rem rgb(16 147 91 / .12), 0 0 1.2rem rgb(16 147 91 / .22); }
  50% { box-shadow: 0 0 0 .48rem rgb(16 147 91 / .06), 0 0 1.7rem rgb(16 147 91 / .4); }
}
@keyframes fx-category-orbit { to { transform: rotate(360deg); } }

@media (min-width: 48rem) {
  .fx-category-directory__head { grid-template-columns: minmax(0, 1fr) minmax(19rem, .65fr); }
}
@media (min-width: 64rem) {
  .fx-category-hero { grid-template-columns: minmax(0, 1.15fr) minmax(23rem, .85fr); align-items: stretch; }
}
@media (max-width: 30rem) {
  .fx-category-hero { padding: var(--pk-space-5); }
  .fx-category-hero__stats { grid-template-columns: 1fr; }
  .fx-category-hero__stats div { flex-direction: row; align-items: baseline; justify-content: space-between; }
  .fx-category-hero__actions .pk-btn { width: 100%; }
  .fx-category-route { padding: var(--pk-space-4); }
  .fx-category-route__step { grid-template-columns: 1.45rem 2.3rem minmax(0, 1fr); padding-inline: .35rem; }
  .fx-category-route__steps::before { left: 1.95rem; }
  .fx-body--categories .fx-cat { min-height: 0; padding: var(--pk-space-4); }
}

/* Technical domains, not generic cards: a monogram mark in the technical
   accent, the name, what belongs there, and the real counts. An area with
   nothing in it yet is quieter, not hidden. */
.fx-cats {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pk-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fx-cat {
  --pk-link: var(--pk-ink);
  --pk-link-hover: var(--pk-ink);
  display: flex;
  align-items: flex-start;
  gap: var(--pk-space-4);
  height: 100%;
  padding: var(--pk-space-4);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-md);
  background: var(--fx-card);
  text-decoration: none;
  transition: border-color var(--pk-dur-fast) var(--pk-ease),
              box-shadow var(--pk-dur-fast) var(--pk-ease);
}
.fx-cat:hover { border-color: var(--fx-tech-edge); box-shadow: var(--pk-shadow-sm); }
.fx-cat:hover .fx-cat__name { text-decoration: underline; }

.fx-cat__mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--fx-tech-edge);
  border-radius: var(--pk-radius-sm);
  background: var(--fx-tech-tint);
  color: var(--fx-tech);
  font-family: var(--pk-font-mono);
  font-size: var(--pk-text-sm);
  font-weight: var(--pk-weight-bold);
}
.fx-cat--quiet .fx-cat__mark { border-color: var(--pk-border); background: var(--pk-surface-sunk); color: var(--pk-ink-faint); }

.fx-cat__text { display: grid; gap: var(--pk-space-1); min-width: 0; }
.fx-cat__name { color: var(--pk-ink); font-size: var(--pk-text-base); font-weight: var(--pk-weight-bold); line-height: var(--pk-leading-snug); }
.fx-cat__desc { color: var(--pk-ink-muted); font-size: var(--pk-text-sm); line-height: var(--pk-leading-normal); }
.fx-cat__count { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-1) var(--pk-space-3); margin-top: var(--pk-space-1); color: var(--pk-ink-faint); font-size: var(--pk-text-xs); }
.fx-cat__count b { color: var(--pk-ink-soft); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------ tags + search --- */

.fx-tagdir__tools { gap: var(--pk-space-3); }
.fx-tagdir__filter { flex: 1 1 18rem; max-width: 26rem; }

.fx-tagdir {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--pk-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fx-tagdir__row[hidden] { display: none; }

.fx-tagdir__item {
  --pk-link: var(--pk-ink-soft);
  --pk-link-hover: var(--pk-ink);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pk-space-1) var(--pk-space-2);
  height: 100%;
  min-height: 44px;
  padding: var(--pk-space-2) var(--pk-space-3);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-md);
  background: var(--fx-card);
  text-decoration: none;
}
.fx-tagdir__item:hover { border-color: var(--fx-tech-edge); }
.fx-tagdir__count { margin-left: auto; color: var(--pk-ink-faint); font-size: var(--pk-text-xs); font-variant-numeric: tabular-nums; }
.fx-tagdir__desc { flex: 1 0 100%; color: var(--pk-ink-muted); font-size: var(--pk-text-xs); line-height: var(--pk-leading-snug); }

/* The search tool: query and button on one line, the three filters in one
   compact row beneath — not three stacked full-width fields. */
.fx-searchtool {
  display: grid;
  gap: var(--pk-space-3);
  margin-bottom: var(--pk-space-5);
  padding: var(--pk-space-4);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-md);
  background: var(--fx-card);
}
.fx-searchtool__main { position: relative; display: flex; gap: var(--pk-space-2); }
.fx-searchtool__main .pk-input { flex: 1 1 auto; min-width: 0; padding-left: 2.6rem; }
.fx-searchtool__filters { display: grid; grid-template-columns: 1fr; gap: var(--pk-space-3); align-items: end; }
.fx-searchtool__filters .pk-field { margin: 0; }
.fx-searchtool__clear { margin: 0; font-size: var(--pk-text-sm); align-self: center; }

.fx-search-state { margin-bottom: var(--pk-space-4); }
.fx-resultline--search { margin-bottom: var(--pk-space-2); color: var(--pk-ink-muted); }
.fx-query { color: var(--pk-ink); font-family: var(--pk-font-mono); font-weight: var(--pk-weight-semibold); overflow-wrap: anywhere; }
.fx-resultline__filters { color: var(--pk-ink-faint); }

@media (min-width: 40rem) {
  .fx-searchtool__filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fx-searchtool__clear { grid-column: 1 / -1; }
}
@media (min-width: 64rem) {
  .fx-searchtool__filters { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
  .fx-searchtool__clear { grid-column: auto; }
}

/* ---------------------------------------------------------------- topic --- */

/* The topic reads like a reviewed technical case: where it lives, its state,
   the problem statement, the environment it happened in, the evidence, the
   discussion, and a clearly certified solution. */
.fx-body--topic .fx-main > .fx-topicpage,
.fx-body--topic .fx-main > .fx-answers,
.fx-body--topic .fx-main > .fx-replybox { box-sizing: border-box; width: 100%; max-width: 70rem; margin-inline: auto; }

.fx-topicpage { max-width: 70rem; }

.fx-topic-head {
  display: grid;
  gap: var(--pk-space-3);
  margin-bottom: var(--pk-space-5);
  padding: var(--pk-space-5);
  overflow: hidden;
  border: 1px solid var(--pk-border);
  border-top: 3px solid var(--primary-fill);
  border-radius: var(--pk-radius-xl);
  background: linear-gradient(135deg, var(--primary-soft), transparent 46%), var(--fx-card);
  box-shadow: var(--pk-shadow-sm);
}
.fx-topic-head .fx-eyebrow { margin: 0; }

.fx-topic-head__eyebrow,
.fx-replybox__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--pk-space-2);
  margin: 0;
  color: var(--primary-ink);
  font-family: var(--pk-font-mono);
  font-size: var(--pk-text-xs);
  font-weight: var(--pk-weight-bold);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.fx-topic-head__eyebrow .fx-icon { width: 1rem; height: 1rem; }

.fx-topic-head__title {
  margin: 0;
  color: var(--pk-ink);
  font-size: var(--pk-text-3xl);
  font-weight: var(--pk-weight-heavy);
  line-height: var(--pk-leading-tight);
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.fx-topic-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pk-space-1) var(--pk-space-2);
  margin: 0;
  color: var(--pk-ink-muted);
  font-size: var(--pk-text-sm);
}

.fx-topic-head__meta .fx-monogram,
.fx-post__byline .fx-monogram { width: 1.75rem; height: 1.75rem; font-size: .6875rem; }

.fx-topic-head .fx-topic__tax { align-items: center; gap: var(--pk-space-2); }
.fx-topic-head .fx-chip--category {
  border-color: var(--fx-tech-edge);
  background: var(--fx-tech-tint);
  color: var(--fx-tech);
  font-weight: var(--pk-weight-semibold);
}
.fx-topic-head .fx-chip--category .fx-icon { width: .9rem; height: .9rem; }

.fx-topic-head__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 28rem);
  margin: var(--pk-space-1) 0 0;
  overflow: hidden;
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-md);
  background: var(--pk-surface-sunk);
}
.fx-topic-head__stats div { padding: var(--pk-space-2) var(--pk-space-3); text-align: center; }
.fx-topic-head__stats div + div { border-left: 1px solid var(--pk-divider); }
.fx-topic-head__stats dt { color: var(--pk-ink-muted); font-size: var(--pk-text-xs); }
.fx-topic-head__stats dd { margin: 1px 0 0; color: var(--pk-ink); font-family: var(--pk-font-mono); font-size: var(--pk-text-lg); font-weight: var(--pk-weight-bold); line-height: var(--pk-leading-tight); }

.fx-post__author { --pk-link: var(--pk-ink); --pk-link-hover: var(--pk-brand-red-ink); font-weight: var(--pk-weight-semibold); text-decoration: none; }
.fx-post__author:hover { text-decoration: underline; }
.fx-post__edited { --pk-link: var(--pk-ink-muted); --pk-link-hover: var(--pk-ink); display: inline-flex; align-items: center; gap: .25rem; text-decoration-style: dotted; }
.fx-post__edited .fx-icon { width: .9rem; height: .9rem; }

.fx-solution-jump {
  --pk-link: var(--fx-solved);
  --pk-link-hover: var(--fx-solved);
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--pk-space-2);
  min-height: 44px;
  padding: 0 var(--pk-space-3);
  border: 1px solid var(--fx-solved-edge);
  border-radius: var(--pk-radius-md);
  background: var(--fx-solved-tint);
  font-size: var(--pk-text-sm);
  font-weight: var(--pk-weight-semibold);
  text-decoration: none;
}
.fx-solution-jump:hover { text-decoration: underline; }

/* The Oracle environment: labelled facts, as a definition list, in a panel
   of its own so the reader sees product and version before the prose. */
.fx-context {
  margin: 0 0 var(--pk-space-5);
  overflow: hidden;
  border: 1px solid var(--fx-tech-edge);
  border-radius: var(--pk-radius-md);
  background: var(--fx-card);
}

.fx-context__title {
  display: flex;
  align-items: center;
  gap: var(--pk-space-2);
  margin: 0;
  padding: var(--pk-space-2) var(--pk-space-4);
  border-bottom: 1px solid var(--fx-tech-edge);
  background: var(--fx-tech-tint);
  color: var(--fx-tech);
  font-size: var(--pk-text-xs);
  font-weight: var(--pk-weight-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.fx-meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); margin: 0; }
.fx-meta__item { min-width: 0; padding: var(--pk-space-3) var(--pk-space-4); box-shadow: 1px 0 0 var(--pk-divider), 0 1px 0 var(--pk-divider); }
.fx-meta dt { margin-bottom: 2px; color: var(--pk-ink-muted); font-size: var(--pk-text-xs); }
.fx-meta dd { margin: 0; color: var(--pk-ink); font-size: var(--pk-text-sm); font-weight: var(--pk-weight-semibold); overflow-wrap: anywhere; }
.fx-meta dd.fx-meta--code { font-family: var(--pk-font-mono); }

/* One post: a narrow vote gutter and the body. */
.fx-post {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 0 var(--pk-space-3);
  padding-block: var(--pk-space-5);
  border-top: 1px solid var(--pk-divider);
}
.fx-post--question {
  padding: var(--pk-space-5);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-lg);
  background: var(--fx-card);
  box-shadow: var(--pk-shadow-xs);
}

.fx-post__gutter { display: flex; flex-direction: column; align-items: center; gap: var(--pk-space-1); }
.fx-post__body { min-width: 0; }

.fx-post__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pk-space-1) var(--pk-space-2);
  margin: 0 0 var(--pk-space-3);
  color: var(--pk-ink-muted);
  font-size: var(--pk-text-sm);
}

.fx-role {
  padding: 0 .4rem;
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-sm);
  color: var(--pk-ink-soft);
  font-size: var(--pk-text-xs);
  font-weight: var(--pk-weight-semibold);
}

/* THE ACCEPTED SOLUTION. A framed card with a banner heading in words and an
   icon; the green is the third cue. It is also listed first and linked from
   the topic head, so in a long thread it cannot be missed. */
.fx-post--accepted {
  margin-block: var(--pk-space-2) var(--pk-space-4);
  padding: 0 var(--pk-space-4) var(--pk-space-5);
  border: 2px solid var(--fx-solved-edge);
  border-radius: var(--pk-radius-lg);
  background: var(--fx-card);
  box-shadow: var(--pk-shadow-sm);
  scroll-margin-top: 8rem;
}
.fx-post--accepted + .fx-post { border-top: 0; }

.fx-solution-banner {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pk-space-1) var(--pk-space-2);
  margin: 0 calc(var(--pk-space-4) * -1) var(--pk-space-4);
  padding: var(--pk-space-3) var(--pk-space-4);
  border-bottom: 1px solid var(--fx-solved-edge);
  border-radius: calc(var(--pk-radius-lg) - 2px) calc(var(--pk-radius-lg) - 2px) 0 0;
  background: var(--fx-solved-tint);
  color: var(--fx-solved);
}
.fx-solution-banner .fx-icon { width: 1.25rem; height: 1.25rem; stroke-width: 2.2; }
.fx-solution-banner__title { margin: 0; color: inherit; font-size: var(--pk-text-base); font-weight: var(--pk-weight-heavy); }
.fx-solution-banner__note { color: var(--pk-ink-muted); font-size: var(--pk-text-xs); }

.fx-post--deleted .fx-prose { color: var(--pk-ink-muted); }
.fx-removed-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-2); margin: 0 0 var(--pk-space-3); color: var(--pk-ink-muted); font-size: var(--pk-text-sm); }

.fx-vote { display: flex; flex-direction: column; align-items: center; gap: var(--pk-space-1); margin: 0; }

.fx-vote__btn {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--pk-border-strong);
  border-radius: var(--pk-radius-full);
  background: var(--pk-surface);
  color: var(--pk-ink-muted);
  cursor: pointer;
}
.fx-vote__btn .fx-icon { width: 1.1rem; height: 1.1rem; stroke-width: 2.2; }
.fx-vote__btn:hover { border-color: var(--pk-ink-faint); color: var(--pk-ink); }
.fx-vote__btn[aria-pressed="true"] { background: var(--pk-brand-red); border-color: var(--pk-brand-red); color: var(--pk-on-brand); }
.fx-vote__btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.fx-vote__score { color: var(--pk-ink); font-weight: var(--pk-weight-bold); font-variant-numeric: tabular-nums; }
.fx-vote__label { color: var(--pk-ink-faint); font-family: var(--pk-font-mono); font-size: .625rem; letter-spacing: .04em; text-transform: uppercase; }

/* One toolbar per post: the everyday actions, then the destructive one
   pushed to the far end and drawn in danger ink. */
.fx-post__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pk-space-1) var(--pk-space-2);
  margin-top: var(--pk-space-4);
  padding-top: var(--pk-space-3);
  border-top: 1px dashed var(--pk-divider);
}
.fx-post__actions:empty { display: none; }
.fx-post__danger { margin-left: auto; }

.fx-body .pk-btn--ghost.is-on { --_fg: var(--fx-tech); --_bg: var(--fx-tech-tint); }
.fx-body .pk-btn.fx-btn--accept { --_fg: var(--fx-solved); --_bd: var(--fx-solved-edge); }
.fx-body .pk-btn.fx-btn--accept:hover:not([disabled]) { --_bg: var(--fx-solved-tint); }

.fx-modbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pk-space-2);
  margin-top: var(--pk-space-3);
  padding: var(--pk-space-2) var(--pk-space-3);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-md);
  background: var(--pk-surface-sunk);
}
.fx-modbar__label { display: inline-flex; align-items: center; gap: .3rem; margin-right: var(--pk-space-1); color: var(--pk-ink-muted); font-size: var(--pk-text-xs); font-weight: var(--pk-weight-bold); letter-spacing: .05em; text-transform: uppercase; }

.fx-answers { margin-top: var(--pk-space-8); }
.fx-answers > .fx-section__head { margin-bottom: var(--pk-space-4); }
.fx-answers > .fx-post {
  margin-bottom: var(--pk-space-4);
  padding: var(--pk-space-5);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-lg);
  background: var(--fx-card);
  box-shadow: var(--pk-shadow-xs);
}
.fx-answers > .fx-post--accepted {
  padding: 0 var(--pk-space-5) var(--pk-space-5);
  border: 2px solid var(--fx-solved-edge);
  box-shadow: var(--pk-shadow-sm);
}
.fx-answers > .fx-post--accepted + .fx-post { border-top: 1px solid var(--pk-border); }
.fx-answers > .fx-post--accepted .fx-solution-banner { margin-inline: calc(var(--pk-space-5) * -1); }
.fx-section__note { color: var(--pk-ink-faint); font-size: var(--pk-text-xs); }

.fx-replybox {
  margin-top: var(--pk-space-8);
  padding: var(--pk-space-6);
  border-top: 3px solid var(--primary-fill);
  border-radius: var(--pk-radius-xl);
  background: linear-gradient(135deg, var(--primary-soft), transparent 42%), var(--fx-card);
  box-shadow: var(--pk-shadow-sm);
  scroll-margin-top: 7rem;
}
.fx-replybox .fx-section__title { margin: var(--pk-space-2) 0 var(--pk-space-2); font-size: var(--pk-text-2xl); }
.fx-replybox__lead { max-width: 68ch; margin: 0 0 var(--pk-space-5); color: var(--pk-ink-muted); line-height: var(--pk-leading-relaxed); }
.fx-replybox .fx-form { max-width: none; }
.fx-quiet-note--plain { padding-top: var(--pk-space-2); }

.fx-noanswers {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--pk-space-4);
  align-items: start;
  padding: var(--pk-space-5);
  border: 1px dashed var(--pk-border-strong);
  border-radius: var(--pk-radius-lg);
  background: var(--pk-surface-sunk);
}
.fx-noanswers__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--pk-radius-md); background: var(--fx-tech-tint); color: var(--fx-tech); }
.fx-noanswers__icon .fx-icon { width: 1.25rem; height: 1.25rem; }
.fx-noanswers h3 { margin: 0 0 var(--pk-space-1); color: var(--pk-ink); font-size: var(--pk-text-lg); }
.fx-noanswers p { max-width: 62ch; margin: 0 0 var(--pk-space-3); color: var(--pk-ink-muted); line-height: var(--pk-leading-relaxed); }
.fx-noanswers .fx-link-arrow .fx-icon { transform: rotate(90deg); }

/* Member-written prose. Constrained to a readable measure, with code that
   scrolls inside its own box rather than widening the page — the rule the
   platform's own tables follow. */
.fx-prose { max-width: var(--pk-measure); color: var(--pk-ink); line-height: var(--pk-leading-relaxed); overflow-wrap: break-word; }
.fx-prose p { margin: 0 0 var(--pk-space-4); }
.fx-prose p:last-child { margin-bottom: 0; }
.fx-prose blockquote {
  margin: var(--pk-space-4) 0;
  padding: var(--pk-space-3) var(--pk-space-4);
  border-left: 3px solid var(--fx-tech);
  border-radius: 0 var(--pk-radius-md) var(--pk-radius-md) 0;
  background: var(--fx-tech-tint);
  color: var(--pk-ink-soft);
}
.fx-prose blockquote > :last-child { margin-bottom: 0; }

.fx-prose > * + .fx-codeframe,
.fx-prose > .fx-codeframe + * { margin-top: var(--pk-space-4); }

/* Attachments: one labelled row per file. Delivery still goes only through
   attachment.php and its visibility check; this is presentation. */
.fx-attachments {
  display: grid;
  gap: var(--pk-space-2);
  margin: var(--pk-space-4) 0 0;
  padding: 0;
  list-style: none;
}
.fx-attachments li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pk-space-1) var(--pk-space-2);
  padding: var(--pk-space-2) var(--pk-space-3);
  border: 1px solid var(--pk-border);
  border-left: 3px solid var(--fx-tech-edge);
  border-radius: var(--pk-radius-md);
  background: var(--pk-surface-sunk);
  font-size: var(--pk-text-sm);
  overflow-wrap: anywhere;
}
.fx-attachments a { font-family: var(--pk-font-mono); font-weight: var(--pk-weight-medium); }

@media (max-width: 39.99rem) {
  .fx-topic-head { padding: var(--pk-space-4); border-radius: var(--pk-radius-lg); }
  .fx-topic-head__title { font-size: var(--pk-text-2xl); }
  .fx-topic-head__meta { align-items: flex-start; }
  .fx-topic-head__stats { width: 100%; }
  .fx-topic-head__stats div { padding-inline: var(--pk-space-2); }

  .fx-body--topic .fx-post { grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-3); }
  .fx-post__gutter { align-items: flex-start; }
  .fx-vote { flex-direction: row; gap: var(--pk-space-2); }
  .fx-vote__btn { width: 2.75rem; height: 2.75rem; }
  .fx-vote__label { margin-left: calc(var(--pk-space-2) * -1); }

  .fx-post--question,
  .fx-answers > .fx-post { padding: var(--pk-space-4); }
  .fx-answers > .fx-post--accepted { padding: 0 var(--pk-space-4) var(--pk-space-4); }
  .fx-answers > .fx-post--accepted .fx-solution-banner { margin-inline: calc(var(--pk-space-4) * -1); }
  .fx-post__actions { align-items: stretch; }
  .fx-post__actions .pk-btn { min-height: 44px; }
  .fx-post__danger { margin-left: 0; }
  .fx-modbar { align-items: stretch; }

  .fx-replybox { padding: var(--pk-space-4); border-radius: var(--pk-radius-lg); }
  .fx-noanswers { grid-template-columns: minmax(0, 1fr); }
}

/* Inline code only. `pre > code` is excluded here: the old rule also caught
   the code element inside a block and, in dark mode, painted a grey band
   behind every individual line of a log. */
.fx-prose :not(pre) > code {
  padding: 0.1em 0.35em;
  border-radius: var(--pk-radius-sm);
  background: var(--pk-surface-sunk);
  border: 1px solid var(--pk-divider);
  font-family: var(--pk-font-mono);
  font-size: 0.88em;
}

.fx-code {
  margin: 0 0 var(--pk-space-4);
  padding: var(--pk-space-4);
  border: 1px solid var(--fx-code-edge);
  border-radius: var(--pk-radius-md);
  background: var(--fx-code-bg);
  color: var(--fx-code-ink);
  font-family: var(--pk-font-mono);
  font-size: var(--pk-text-sm);
  line-height: var(--pk-leading-normal);
  overflow-x: auto;
}

.fx-code code { background: none; padding: 0; border: 0; color: inherit; font-size: inherit; }
.fx-code { tab-size: 4; white-space: pre; }
.fx-code:focus-visible { outline-offset: -3px; }

/* The progressive frame: a header with the language and a Copy button. The
   block keeps scrolling inside itself; the page never widens. Logs and SQL
   are not force-wrapped — a wrapped stack trace is harder to read. */
.fx-codeframe {
  margin: 0 0 var(--pk-space-4);
  overflow: hidden;
  border: 1px solid var(--fx-code-edge);
  border-radius: var(--pk-radius-md);
  background: var(--fx-code-bg);
}
.fx-codeframe__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pk-space-2);
  padding: .3rem .35rem .3rem var(--pk-space-3);
  border-bottom: 1px solid var(--fx-code-edge);
  background: var(--fx-code-head);
}
.fx-codeframe__lang { color: var(--fx-code-muted); font-family: var(--pk-font-mono); font-size: var(--pk-text-xs); letter-spacing: .06em; text-transform: uppercase; }
.fx-codeframe__copy {
  min-height: 32px;
  padding: 0 var(--pk-space-3);
  border: 1px solid var(--fx-code-edge);
  border-radius: var(--pk-radius-sm);
  background: transparent;
  color: var(--fx-code-ink);
  font: inherit;
  font-size: var(--pk-text-xs);
  font-weight: var(--pk-weight-semibold);
  cursor: pointer;
}
.fx-codeframe__copy:hover { background: color-mix(in srgb, var(--fx-code-ink) 10%, transparent); }
/* Beats .fx-code[data-lang] (defined below): the frame header replaces the
   corner label, so it must not be drawn twice. */
.fx-code.is-framed,
.fx-code.is-framed[data-lang] { margin: 0; padding-top: var(--pk-space-3); border: 0; border-radius: 0; }
.fx-code.is-framed[data-lang]::before { content: none; }

@media (max-width: 47.99rem), (pointer: coarse) {
  .fx-codeframe__copy { min-height: 44px; }
  .fx-code { font-size: .8125rem; }
}

/* The fence's language (```sql) as a quiet label in the corner. Generated
   content, so copying the block copies only the code (UAT OBS-002). */
.fx-code[data-lang] { position: relative; padding-top: calc(var(--pk-space-4) + 1rem); }
.fx-code[data-lang]::before {
  content: attr(data-lang);
  position: absolute;
  top: var(--pk-space-2);
  right: var(--pk-space-3);
  color: var(--fx-code-muted);
  font-size: var(--pk-text-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.fx-mention { --pk-link: var(--fx-tech); font-weight: var(--pk-weight-medium); text-decoration: none; }
.fx-mention:hover { text-decoration: underline; }

/* --------------------------------------------------------------- forms --- */

.fx-form { max-width: 46rem; }

.fx-meta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pk-space-4);
}

.fx-hint { margin: var(--pk-space-1) 0 0; font-size: var(--pk-text-xs); color: var(--pk-ink-muted); }

.fx-error {
  margin: var(--pk-space-1) 0 0;
  font-size: var(--pk-text-xs);
  color: var(--pk-danger);
  font-weight: var(--pk-weight-medium);
}

.fx-input--mono { font-family: var(--pk-font-mono); font-size: var(--pk-text-sm); }
.fx-textarea--tall { min-height: 16rem; font-family: var(--pk-font-mono); font-size: var(--pk-text-sm); line-height: var(--pk-leading-normal); }

/* Composition: the form, and on a desktop a quiet rail of guidance beside it. */
.fx-compose { display: grid; gap: var(--pk-space-6); }
.fx-compose__form { max-width: none; min-width: 0; }
.fx-compose__aside { display: grid; gap: var(--pk-space-4); min-width: 0; align-content: start; }

.fx-body--compose .fx-pagehead {
  align-items: center;
  margin-bottom: var(--pk-space-6);
  padding: var(--pk-space-5);
  border: 1px solid var(--pk-border);
  border-top: 3px solid var(--primary-fill);
  border-radius: var(--pk-radius-xl);
  background: linear-gradient(135deg, var(--primary-soft), transparent 46%), var(--fx-card);
  box-shadow: var(--pk-shadow-sm);
}
.fx-body--compose .fx-pagehead__title { font-size: var(--pk-text-3xl); }
.fx-body--compose .fx-pagehead__lead { max-width: 62ch; color: var(--pk-ink-soft); font-size: var(--pk-text-base); }

/* A numbered section: what the step is for, then its fields. The numbers
   are aria-hidden decoration — the section heading carries the meaning. */
.fx-formsec {
  margin: 0 0 var(--pk-space-4);
  padding: var(--pk-space-5);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-md);
  background: var(--fx-card);
  box-shadow: var(--pk-shadow-xs);
}
.fx-body--compose .fx-formsec { border-radius: var(--pk-radius-lg); }
.fx-body--compose .fx-formsec:focus-within { border-color: var(--pk-border-strong); box-shadow: var(--pk-shadow-sm); }
.fx-formsec .pk-field:last-child { margin-bottom: 0; }

.fx-formsec__title {
  display: flex;
  align-items: center;
  gap: var(--pk-space-2);
  margin: 0 0 var(--pk-space-4);
  color: var(--pk-ink);
  font-size: var(--pk-text-base);
  font-weight: var(--pk-weight-bold);
}
.fx-formsec__n {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: var(--pk-radius-full);
  border: 1px solid var(--pk-brand-red-edge);
  background: var(--primary-soft);
  color: var(--primary-ink);
  font-family: var(--pk-font-mono);
  font-size: var(--pk-text-xs);
  font-variant-numeric: tabular-nums;
}
.fx-formsec__opt { color: var(--pk-ink-faint); font-size: var(--pk-text-xs); font-weight: var(--pk-weight-medium); }
.fx-formsec__hint { margin: calc(var(--pk-space-2) * -1) 0 var(--pk-space-4); color: var(--pk-ink-muted); font-size: var(--pk-text-sm); max-width: 62ch; }
.fx-formsec--submit { border-color: var(--pk-brand-red-edge); background: linear-gradient(135deg, var(--primary-soft), var(--fx-card) 64%); }
.fx-formsec__submitnote { margin: var(--pk-space-3) 0 0; max-width: 58ch; color: var(--pk-ink-faint); font-size: var(--pk-text-xs); }

.fx-meta-grid .pk-field { margin-bottom: 0; }

/* Radio choices as cards: the native input stays, visible and focusable;
   the card is its label. Selected = ring + tint + the checked radio itself. */
.fx-choices { display: grid; gap: var(--pk-space-2); margin: 0 0 var(--pk-space-4); padding: 0; border: 0; }
.fx-choices > legend { margin-bottom: var(--pk-space-2); padding: 0; }

.fx-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--pk-space-3);
  min-height: 44px;
  padding: var(--pk-space-3) var(--pk-space-4);
  border: 1px solid var(--pk-border-strong);
  border-radius: var(--pk-radius-md);
  background: var(--pk-surface);
  cursor: pointer;
}
.fx-choice:hover { border-color: var(--pk-ink-faint); }
.fx-choice input { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; margin: .15rem 0 0; accent-color: var(--pk-ink); }
.fx-choice:has(input:checked) { border-color: var(--pk-ink); background: var(--pk-surface-sunk); box-shadow: inset 0 0 0 1px var(--pk-ink); }
.fx-choice--question:has(input:checked) { border-color: var(--pk-brand-red-edge); background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary-fill); }
.fx-choice--discussion:has(input:checked) { border-color: var(--fx-tech-edge); background: var(--fx-tech-tint); box-shadow: inset 3px 0 0 var(--fx-tech); }
.fx-choice:has(input:focus-visible) { outline: var(--pk-focus-width) solid var(--pk-focus-ring); outline-offset: var(--pk-focus-offset); }
.fx-choice__body { display: grid; gap: 2px; }
.fx-choice__title { display: inline-flex; align-items: center; gap: var(--pk-space-2); color: var(--pk-ink); font-weight: var(--pk-weight-semibold); }
.fx-choice__desc { color: var(--pk-ink-muted); font-size: var(--pk-text-sm); }
.fx-choices--list .fx-choice { padding-block: var(--pk-space-2); align-items: center; }
.fx-choices--list .fx-choice input { margin-top: 0; }

.fx-error-summary { margin-bottom: var(--pk-space-5); }
.fx-error-summary:focus { outline: var(--pk-focus-width) solid var(--pk-focus-ring); outline-offset: var(--pk-focus-offset); }
.fx-error-summary__list { margin: var(--pk-space-2) 0 0; padding-left: var(--pk-space-5); }
.fx-error-summary__list a { --pk-link: var(--pk-danger); --pk-link-hover: var(--pk-danger); font-weight: var(--pk-weight-medium); }

.fx-checklist { display: grid; gap: var(--pk-space-1); margin: 0 0 var(--pk-space-4); padding: 0; list-style: none; color: var(--pk-ink-soft); font-size: var(--pk-text-sm); }
.fx-checklist li { position: relative; padding-left: 1.5rem; }
.fx-checklist li::before { content: ""; position: absolute; top: .4em; left: .2rem; width: .55rem; height: .3rem; border-bottom: 2px solid var(--fx-solved); border-left: 2px solid var(--fx-solved); transform: rotate(-45deg); }

.fx-formactions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-2); }

.fx-example { margin-top: var(--pk-space-3); font-size: var(--pk-text-sm); }
.fx-example > summary { display: inline-flex; min-height: 44px; align-items: center; color: var(--pk-link); cursor: pointer; font-weight: var(--pk-weight-medium); }
.fx-example__text {
  margin: var(--pk-space-2) 0 0;
  padding: var(--pk-space-3) var(--pk-space-4);
  overflow-x: auto;
  border: 1px dashed var(--pk-border-strong);
  border-radius: var(--pk-radius-md);
  background: var(--pk-surface-sunk);
  color: var(--pk-ink-soft);
  font-family: var(--pk-font-mono);
  font-size: var(--pk-text-xs);
  white-space: pre-wrap;
}

.fx-tips { display: grid; gap: var(--pk-space-3); font-size: var(--pk-text-sm); color: var(--pk-ink-muted); }
.fx-tips p { margin: 0; }
.fx-tips strong { color: var(--pk-ink); }

.fx-compose-guide { border-top: 3px solid var(--fx-tech); }
.fx-compose-guide__icon { width: 1.35rem; height: 1.35rem; color: var(--fx-tech); }
.fx-compose-guide__steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.fx-compose-guide__steps li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 2px var(--pk-space-2); padding: var(--pk-space-3) 0; border-top: 1px solid var(--pk-divider); }
.fx-compose-guide__steps li:first-child { padding-top: 0; border-top: 0; }
.fx-compose-guide__steps li:last-child { padding-bottom: 0; }
.fx-compose-guide__steps span { grid-row: span 2; color: var(--primary-ink); font-family: var(--pk-font-mono); font-size: var(--pk-text-xs); font-weight: var(--pk-weight-semibold); }
.fx-compose-guide__steps strong { color: var(--pk-ink); font-size: var(--pk-text-sm); }
.fx-compose-guide__steps small { color: var(--pk-ink-muted); font-size: var(--pk-text-xs); line-height: 1.45; }
.fx-compose-safety code { font-family: var(--pk-font-mono); }

.fx-panel--form { max-width: 46rem; padding: var(--pk-space-5); }

.fx-reported { max-width: 46rem; margin: 0 0 var(--pk-space-4); padding: var(--pk-space-3) var(--pk-space-4); border: 1px solid var(--pk-border); border-left: 3px solid var(--pk-warning-edge); border-radius: var(--pk-radius-md); background: var(--pk-surface-sunk); }
.fx-reported__cap { display: flex; align-items: center; gap: var(--pk-space-2); margin-bottom: var(--pk-space-1); color: var(--pk-ink-muted); font-size: var(--pk-text-xs); font-weight: var(--pk-weight-semibold); letter-spacing: .05em; text-transform: uppercase; }
.fx-reported__text { margin: 0; color: var(--pk-ink); font-weight: var(--pk-weight-medium); overflow-wrap: anywhere; }
.fx-reported__text p { margin: 0; }

@media (min-width: 64rem) {
  .fx-compose { grid-template-columns: minmax(0, 46rem) minmax(15rem, 20rem); align-items: start; gap: var(--pk-space-8); }
  .fx-compose__aside { position: sticky; top: 8rem; }
}

/* ------------------------------------------------------------- profile --- */

.fx-profile { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pk-space-6); }

.fx-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--pk-space-3);
}

.fx-stat-card {
  padding: var(--pk-space-4);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-md);
  background: var(--fx-card);
  text-align: center;
}

.fx-stat-card__n { display: block; font-size: var(--pk-text-2xl); font-weight: var(--pk-weight-bold); color: var(--pk-ink); }
.fx-stat-card__l { display: block; font-size: var(--pk-text-xs); color: var(--pk-ink-muted); }

/* ------------------------------------------------ member productivity --- */

/* A professional identity summary built from forum contribution data, with
   the optional portrait a member explicitly enabled on the platform. No title,
   employer or other directory field crosses the boundary. */
.fx-identity { display: flex; align-items: center; gap: var(--pk-space-4); margin-bottom: var(--pk-space-5); }
.fx-identity__text { min-width: 0; }
.fx-identity .fx-eyebrow { margin-bottom: var(--pk-space-1); }
.fx-monogram--xl { width: 4rem; height: 4rem; font-size: var(--pk-text-xl); }
.fx-identity__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-2); margin: var(--pk-space-1) 0 0; }
.fx-identity__handle { color: var(--pk-ink-muted); font-family: var(--pk-font-mono); font-size: var(--pk-text-sm); overflow-wrap: anywhere; }
.fx-identity__since { margin: var(--pk-space-1) 0 0; color: var(--pk-ink-faint); font-size: var(--pk-text-sm); }

.fx-statstrip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 var(--pk-space-5);
  overflow: hidden;
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-md);
  background: var(--fx-card);
}
.fx-statstrip__item {
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  padding: var(--pk-space-3) var(--pk-space-4);
  box-shadow: 1px 0 0 var(--pk-divider), 0 1px 0 var(--pk-divider);
}
.fx-statstrip dt { color: var(--pk-ink-muted); font-size: var(--pk-text-xs); }
.fx-statstrip dd { margin: 0; color: var(--pk-ink); font-size: var(--pk-text-xl); font-weight: var(--pk-weight-bold); line-height: 1.1; font-variant-numeric: tabular-nums; }
.fx-statstrip__item--solved dd { color: var(--fx-solved); }

.fx-selfbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pk-space-1) var(--pk-space-2);
  margin: 0 0 var(--pk-space-6);
  padding: var(--pk-space-2) var(--pk-space-3);
  border: 1px dashed var(--pk-border-strong);
  border-radius: var(--pk-radius-md);
}
.fx-selfbar__label { margin-right: var(--pk-space-1); color: var(--pk-ink-faint); font-size: var(--pk-text-xs); font-weight: var(--pk-weight-semibold); letter-spacing: .05em; text-transform: uppercase; }

.fx-activity { margin: 0; padding: 0; list-style: none; }
.fx-activity__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px var(--pk-space-3);
  padding-block: var(--pk-space-3);
  border-bottom: 1px solid var(--pk-divider);
}
.fx-activity__kind { display: inline-flex; align-items: center; gap: .3rem; color: var(--pk-ink-faint); font-size: var(--pk-text-xs); font-weight: var(--pk-weight-semibold); letter-spacing: .03em; text-transform: uppercase; }
.fx-activity__kind .fx-icon { width: .875rem; height: .875rem; }
.fx-activity__title { --pk-link: var(--pk-ink); --pk-link-hover: var(--pk-brand-red-ink); font-weight: var(--pk-weight-semibold); text-decoration: none; overflow-wrap: anywhere; }
.fx-activity__title:hover { text-decoration: underline; }
.fx-activity__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-2); color: var(--pk-ink-faint); font-size: var(--pk-text-xs); }

.fx-areas { margin: calc(var(--pk-space-4) * -1) calc(var(--pk-space-4) * -1) var(--pk-space-3); padding: var(--pk-space-1) 0; list-style: none; }

/* Notifications: the type is an icon in a neutral disc; unread is a bold
   line, a dot, a tinted rail and the words "Unread:" for assistive tech —
   the old full-width pink band made every unread row shout. */
.fx-notes { margin: 0; padding: 0; list-style: none; border: 1px solid var(--pk-border); border-radius: var(--pk-radius-md); background: var(--fx-card); overflow: hidden; }
.fx-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--pk-space-1) var(--pk-space-3);
  align-items: start;
  padding: var(--pk-space-3) var(--pk-space-4);
  border-top: 1px solid var(--pk-divider);
}
.fx-note:first-child { border-top: 0; }
.fx-note.is-unread { background: var(--fx-tech-tint); box-shadow: inset 3px 0 0 var(--pk-brand-navy-lift); }
.fx-note__icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-full);
  background: var(--pk-surface);
  color: var(--pk-ink-muted);
}
.fx-note--accepted .fx-note__icon { border-color: var(--fx-solved-edge); color: var(--fx-solved); }
.fx-note--mention .fx-note__icon,
.fx-note--answer .fx-note__icon { color: var(--fx-tech); }
.fx-note__main { min-width: 0; }
.fx-note__main p { margin: 0; }
.fx-note__text { display: flex; align-items: center; gap: var(--pk-space-2); color: var(--pk-ink-soft); font-size: var(--pk-text-sm); }
.fx-note.is-unread .fx-note__text { color: var(--pk-ink); font-weight: var(--pk-weight-semibold); }
.fx-note__dot { flex: 0 0 auto; width: .5rem; height: .5rem; border-radius: var(--pk-radius-full); background: var(--pk-brand-navy-lift); }
.fx-note__topic { margin-top: 2px; font-size: var(--pk-text-sm); overflow-wrap: anywhere; }
.fx-note__topic a { --pk-link: var(--pk-ink); --pk-link-hover: var(--pk-brand-red-ink); }
.fx-note__gone { color: var(--pk-ink-faint); }
.fx-note__time { margin-top: 2px; color: var(--pk-ink-faint); font-size: var(--pk-text-xs); }
.fx-note__action { grid-column: 2; justify-self: start; }

.fx-saved { display: inline-flex; align-items: center; gap: .3rem; color: var(--fx-tech); font-size: var(--pk-text-xs); font-weight: var(--pk-weight-semibold); }
.fx-saved .fx-icon { width: .85rem; height: .85rem; }

/* Revision history: the live version framed as current, each earlier
   version a disclosure with who, when and why in its header. */
.fx-rev { margin: 0 0 var(--pk-space-3); border: 1px solid var(--pk-border); border-radius: var(--pk-radius-md); background: var(--fx-card); }
.fx-rev--current { border-color: var(--fx-solved-edge); }
.fx-rev__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pk-space-1) var(--pk-space-3);
  min-height: 44px;
  padding: var(--pk-space-3) var(--pk-space-4);
  list-style: none;
}
summary.fx-rev__head { cursor: pointer; }
summary.fx-rev__head::-webkit-details-marker { display: none; }
summary.fx-rev__head::before { content: ""; width: .5rem; height: .5rem; border-right: 2px solid var(--pk-ink-muted); border-bottom: 2px solid var(--pk-ink-muted); transform: rotate(-45deg); transition: transform var(--pk-dur-fast) var(--pk-ease); }
details[open] > summary.fx-rev__head::before { transform: rotate(45deg); }
.fx-rev__title { margin: 0; color: var(--pk-ink); font-size: var(--pk-text-base); font-weight: var(--pk-weight-bold); }
.fx-rev__meta { color: var(--pk-ink-faint); font-size: var(--pk-text-xs); }
.fx-rev__inner,
.fx-rev--current .fx-rev__body { padding: 0 var(--pk-space-4) var(--pk-space-4); }
.fx-rev__inner { border-top: 1px solid var(--pk-divider); padding-top: var(--pk-space-3); }
.fx-rev__why { margin: 0 0 var(--pk-space-3); color: var(--pk-ink-muted); font-size: var(--pk-text-sm); }
.fx-rev__oldtitle { margin: 0 0 var(--pk-space-3); color: var(--pk-ink); font-weight: var(--pk-weight-semibold); }
.fx-rev__oldtitle span { display: block; color: var(--pk-ink-faint); font-size: var(--pk-text-xs); font-weight: var(--pk-weight-medium); text-transform: uppercase; letter-spacing: .05em; }

/* A person in a directory table: monogram, name, handle and role. */
.fx-person { display: flex; align-items: center; gap: var(--pk-space-3); min-width: 12rem; }
.fx-person__text { display: grid; gap: 2px; min-width: 0; }
.fx-person__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-1) var(--pk-space-2); color: var(--pk-ink-faint); font-family: var(--pk-font-mono); font-size: var(--pk-text-xs); }
.fx-person__meta .fx-role,
.fx-person__meta .fx-state { font-family: var(--pk-font-sans, inherit); }

@media (min-width: 40rem) {
  .fx-statstrip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .fx-activity__row { grid-template-columns: 7rem minmax(0, 1fr) auto; align-items: baseline; }
  .fx-note { grid-template-columns: auto minmax(0, 1fr) auto; }
  .fx-note__action { grid-column: 3; grid-row: 1; }
}

/* --------------------------------------------------------------- admin --- */

/* THE ADMIN USERS OVERFLOW (Codex UI/UX audit P0: +221px at 390, +181px at
   430). The table itself scrolled correctly inside .pk-table-wrap. What
   escaped were the per-row .pk-visually-hidden labels ("Role for …",
   "Days", "Reason"): they are position:absolute, the wrapper was not
   positioned, so their containing block was the page and they sat at their
   far-right static positions, widening the whole document to 611px. Making
   every forum table wrapper a containing block keeps them inside the box
   that scrolls. Scoped to the forum; no markup or form changed. */
.fx-body .pk-table-wrap { position: relative; }

/* One management vocabulary: context line, sub-navigation shaped like the
   public section bar, the page heading, then operational content. */
.fx-adminbar { margin-bottom: var(--pk-space-4); border-bottom: 1px solid var(--pk-divider); }
.fx-adminbar__context { margin-bottom: var(--pk-space-1); }
.fx-adminbar__back { display: inline-flex; align-items: center; gap: .3rem; margin-left: auto; letter-spacing: 0; text-transform: none; font-weight: var(--pk-weight-medium); }

.fx-adminnav { display: flex; flex-wrap: wrap; gap: 0 var(--pk-space-1); margin-bottom: -1px; }
.fx-adminnav__link {
  --pk-link: var(--pk-ink-muted);
  --pk-link-hover: var(--pk-ink);
  display: inline-flex;
  align-items: center;
  gap: var(--pk-space-2);
  min-height: 44px;
  padding: 0 var(--pk-space-3);
  border-bottom: 2px solid transparent;
  font-size: var(--pk-text-sm);
  font-weight: var(--pk-weight-medium);
  text-decoration: none;
  white-space: nowrap;
}
.fx-adminnav__link .fx-icon { width: 1rem; height: 1rem; }
.fx-adminnav__link.is-current { --pk-link: var(--pk-ink); border-bottom-color: var(--pk-brand-red); font-weight: var(--pk-weight-semibold); }
.fx-adminnav__link:focus-visible { outline: var(--pk-focus-width) solid var(--pk-focus-ring); outline-offset: -2px; }

.fx-admin-title { margin-bottom: var(--pk-space-4); }
.fx-admin-lead { margin: calc(var(--pk-space-2) * -1) 0 var(--pk-space-4); }
.fx-admin-h2 { margin: var(--pk-space-6) 0 var(--pk-space-3); }
.fx-admin-aside .fx-section__title { margin: var(--pk-space-6) 0 var(--pk-space-3); font-size: var(--pk-text-base); }
.fx-admin-aside ul { margin: 0; padding: 0; list-style: none; }
.fx-admin-aside li { display: flex; justify-content: space-between; gap: var(--pk-space-3); padding-block: var(--pk-space-2); border-bottom: 1px solid var(--pk-divider); font-size: var(--pk-text-sm); }
.fx-admin-context { margin-top: var(--pk-space-8); }
.fx-admin-formsec { margin-top: var(--pk-space-8); }
.fx-toolbar__note { margin: 0; font-size: var(--pk-text-xs); }

/* Needs attention: a worded state first, then the count. Action = danger
   edge, waiting = warning edge, clear = solved; the word carries it. */
.fx-attention { display: grid; gap: var(--pk-space-3); margin-bottom: var(--pk-space-2); }
.fx-attn {
  --pk-link: var(--pk-ink);
  --pk-link-hover: var(--pk-ink);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--pk-space-1) var(--pk-space-3);
  padding: var(--pk-space-4);
  border: 1px solid var(--pk-border);
  border-left-width: 4px;
  border-radius: var(--pk-radius-md);
  background: var(--fx-card);
  text-decoration: none;
}
a.fx-attn:hover { box-shadow: var(--pk-shadow-sm); }
.fx-attn__state { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: .35rem; font-size: var(--pk-text-xs); font-weight: var(--pk-weight-bold); letter-spacing: .04em; text-transform: uppercase; }
.fx-attn__n { font-size: var(--pk-text-3xl); font-weight: var(--pk-weight-heavy); line-height: 1; font-variant-numeric: tabular-nums; }
.fx-attn__l { color: var(--pk-ink-muted); font-size: var(--pk-text-sm); }
.fx-attn--act   { border-left-color: var(--pk-danger); }
.fx-attn--act .fx-attn__state   { color: var(--pk-danger); }
.fx-attn--watch { border-left-color: var(--pk-warning-edge); }
.fx-attn--watch .fx-attn__state { color: var(--pk-warning); }
.fx-attn--clear { border-left-color: var(--fx-solved-edge); }
.fx-attn--clear .fx-attn__state { color: var(--fx-solved); }

.fx-statstrip--admin { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Search / filter / create toolbars: labelled, compact, one row where it fits. */
.fx-admintools { display: grid; gap: var(--pk-space-2); max-width: 40rem; margin-bottom: var(--pk-space-5); }
.fx-admintools .pk-label { margin: 0; }
.fx-admintools__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-2); }
.fx-admintools__row .pk-input { flex: 1 1 14rem; min-width: 0; }
.fx-admintools__clear { font-size: var(--pk-text-sm); }
.fx-admintools--filters { grid-template-columns: 1fr; max-width: none; align-items: end; }
.fx-admintools--filters .pk-field { margin: 0; }

.fx-cell-note { display: block; color: var(--pk-ink-faint); font-size: var(--pk-text-xs); }
/* A value and its notes as ONE grid item, so the phone card layout (label | value)
   keeps a note under its value instead of starting a new row in the label column. */
.fx-cell-stack { display: grid; gap: 2px; justify-items: start; }
.fx-nowrap { white-space: nowrap; }
.fx-rowactions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-1); }

/* Row forms in Users: role change, then the suspension group — which is
   separated and edged in danger so it cannot be mistaken for "Set role". */
.fx-cell-actions { min-width: 20rem; }
.fx-rowform { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-2); margin: 0; }
.fx-rowform + .fx-rowform { margin-top: var(--pk-space-2); }
.fx-rowform .pk-select { width: auto; min-width: 10rem; flex: 1 1 10rem; }
.fx-rowform--danger { padding-top: var(--pk-space-2); border-top: 1px dashed var(--pk-danger-edge); }
.fx-rowform__days { width: 5.5rem; flex: 0 0 5.5rem; }
.fx-rowform__reason { flex: 1 1 12rem; min-width: 0; }

/* On a phone the Users table becomes labelled cards: every cell names its
   column, the action forms get the full width, and nothing needs a sideways
   scroll. Table roles are explicit in the markup so semantics survive. */
@media (max-width: 47.99rem) {
  .fx-table-wrap--cards { overflow: visible; border: 0; background: none; }
  .fx-table--cards,
  .fx-table--cards tbody,
  .fx-table--cards tr,
  .fx-table--cards td { display: block; width: 100%; }
  .fx-table--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .fx-table--cards caption { display: block; margin-bottom: var(--pk-space-2); text-align: left; }
  .fx-table--cards tr {
    margin-bottom: var(--pk-space-3);
    padding: var(--pk-space-2) 0;
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-radius-md);
    background: var(--fx-card);
  }
  .fx-table--cards td { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--pk-space-3); padding: var(--pk-space-2) var(--pk-space-4); border: 0; text-align: left; }
  .fx-table--cards td::before { content: attr(data-label); color: var(--pk-ink-faint); font-size: var(--pk-text-xs); font-weight: var(--pk-weight-semibold); }
  .fx-table--cards td.pk-table__num { text-align: left; }
  /* minmax(0, 1fr), not 1fr: a bare 1fr track cannot shrink below its
     content, and a <select> is as wide as its longest option — "Standard
     (membership from PKOUG)" pushed the card 2px past a 360px screen. */
  .fx-table--cards td.fx-cell-actions { grid-template-columns: minmax(0, 1fr); min-width: 0; margin-top: var(--pk-space-1); padding-top: var(--pk-space-3); border-top: 1px solid var(--pk-divider); }
  .fx-table--cards td.fx-cell-actions::before { display: none; }
  .fx-table--cards td > .fx-state { justify-self: start; }   /* a lone chip keeps its own width */
  .fx-table--cards td[data-label="Member"] { grid-template-columns: 1fr; }
  .fx-table--cards td[data-label="Member"]::before { display: none; }
  .fx-rowform .pk-select { flex-basis: 100%; max-width: 100%; }
}

/* Moderation cases: what was reported and why, the evidence, then the
   decision — each in its own band. */
.fx-case { margin-top: var(--pk-space-4); border: 1px solid var(--pk-border); border-radius: var(--pk-radius-md); background: var(--fx-card); }
.fx-case--open { border-left: 4px solid var(--pk-warning-edge); }
.fx-case__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-2); padding: var(--pk-space-3) var(--pk-space-4); border-bottom: 1px solid var(--pk-divider); background: var(--pk-surface-sunk); border-radius: var(--pk-radius-md) var(--pk-radius-md) 0 0; }
.fx-case__when { margin-left: auto; color: var(--pk-ink-faint); font-size: var(--pk-text-xs); }
.fx-case__body { padding: var(--pk-space-4); }
.fx-case__title { margin: 0 0 var(--pk-space-3); font-size: var(--pk-text-base); font-weight: var(--pk-weight-bold); overflow-wrap: anywhere; }
.fx-case__title a { --pk-link: var(--pk-ink); --pk-link-hover: var(--pk-brand-red-ink); }
.fx-case__quote { margin: 0 0 var(--pk-space-3); padding: var(--pk-space-3) var(--pk-space-4); border-left: 3px solid var(--pk-border-strong); background: var(--pk-surface-sunk); color: var(--pk-ink-soft); font-size: var(--pk-text-sm); overflow-wrap: anywhere; }
.fx-case__quote p { margin: 0; }
.fx-case__said { margin: 0 0 var(--pk-space-3); font-size: var(--pk-text-sm); }
.fx-case__said span { display: block; color: var(--pk-ink-faint); font-size: var(--pk-text-xs); font-weight: var(--pk-weight-semibold); text-transform: uppercase; letter-spacing: .05em; }
.fx-case__decide { margin-top: var(--pk-space-4); padding-top: var(--pk-space-4); border-top: 1px dashed var(--pk-divider); }
.fx-case__decide .fx-hint { margin: var(--pk-space-3) 0; }
.fx-case__closed { margin: 0; color: var(--pk-ink-muted); font-size: var(--pk-text-sm); }

/* Audit: evidence one click away per row, never hidden only visually. */
.fx-action { font-family: var(--pk-font-mono); font-size: var(--pk-text-xs); white-space: nowrap; }
.fx-change > summary { display: inline-flex; align-items: center; min-height: 32px; color: var(--pk-link); cursor: pointer; font-size: var(--pk-text-sm); white-space: nowrap; }
@media (max-width: 47.99rem), (pointer: coarse) {
  .fx-change > summary { min-height: 44px; }
}
.fx-change__grid { display: grid; gap: var(--pk-space-2); margin-top: var(--pk-space-2); min-width: 16rem; }
.fx-change__label { margin: 0 0 2px; color: var(--pk-ink-faint); font-size: var(--pk-text-xs); font-weight: var(--pk-weight-semibold); text-transform: uppercase; letter-spacing: .05em; }

@media (min-width: 40rem) {
  .fx-attention { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-statstrip--admin { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fx-admintools--filters { grid-template-columns: repeat(2, minmax(0, 16rem)) auto; }
  .fx-change__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .fx-statstrip--admin { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

.fx-admin-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pk-space-4);
  margin-bottom: var(--pk-space-8);
}

.fx-kpi {
  padding: var(--pk-space-4);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-md);
  background: var(--fx-card);
}

.fx-kpi__n { display: block; font-size: var(--pk-text-3xl); font-weight: var(--pk-weight-bold); color: var(--pk-ink); line-height: 1.1; }
.fx-kpi__l { display: block; margin-top: var(--pk-space-1); font-size: var(--pk-text-sm); color: var(--pk-ink-muted); }

.fx-kpi--alert { border-color: var(--pk-danger-edge); background: var(--pk-danger-tint); }
.fx-kpi--alert .fx-kpi__n { color: var(--pk-danger); }

.fx-admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pk-space-2);
  margin-bottom: var(--pk-space-6);
  padding-bottom: var(--pk-space-4);
  border-bottom: 1px solid var(--pk-divider);
}

.fx-json {
  margin: 0;
  font-family: var(--pk-font-mono);
  font-size: var(--pk-text-xs);
  color: var(--pk-ink-muted);
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 40ch;
}

/* ---------------------------------------------- contribution (Phase 2A) ---
   Professional marks, not a game: a rank is a quiet outlined chip, a badge a
   small labelled mark, reputation a plain number. No bars, no animation, no
   trophies. Every colour is a token, so light and dark follow on their own. */

.fx-rank {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: 1px .5rem;
  border: 1px solid var(--pk-border-strong);
  border-radius: var(--pk-radius-full);
  color: var(--pk-ink-soft);
  font-size: var(--pk-text-xs);
  font-weight: var(--pk-weight-semibold);
  line-height: 1.5;
  white-space: nowrap;
}
.fx-rank .fx-icon { width: .85rem; height: .85rem; color: var(--pk-ink-faint); }
.fx-rank--trusted_contributor,
.fx-rank--community_expert { border-color: var(--fx-solved-edge, var(--pk-border-strong)); color: var(--pk-ink); }

.fx-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: 1px .5rem;
}

/* ------------------------------------------------------------ taxonomy --- */

/* Tag chips stay secondary to titles: the same small monospaced chip for
   every type. A legacy tag gets a dashed edge AND the word "legacy" (visible
   in the ask form, announced on links) — never colour alone. */
.fx-chip--tag { max-width: 100%; overflow-wrap: anywhere; }
.fx-chip--legacy { border: 1px dashed var(--pk-border-strong); }

.fx-crumbs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-1); }
.fx-crumbs__sep { color: var(--pk-ink-faint); }
.fx-crumbs--page { margin: 0 0 var(--pk-space-3); font-size: var(--pk-text-sm); }

.fx-products,
.fx-related,
.fx-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pk-space-2);
  margin: 0 0 var(--pk-space-4);
}

.fx-related__label {
  font-size: var(--pk-text-xs);
  font-weight: var(--pk-weight-semibold);
  color: var(--pk-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: var(--pk-space-1);
}

.fx-tag-facts { margin-bottom: var(--pk-space-4); }
.fx-tag-facts__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pk-space-2);
  margin: 0 0 var(--pk-space-3);
  font-size: var(--pk-text-sm);
}

.fx-tag-index {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pk-space-2) var(--pk-space-4);
  margin: var(--pk-space-6) 0 0;
  padding: 0;
  list-style: none;
}
.fx-tag-index__item { display: inline-flex; align-items: center; gap: var(--pk-space-1); max-width: 100%; }

/* A master card lists products as plain links under its name. */
.fx-cat--area .fx-cat__name { font-size: var(--pk-text-base); }
.fx-cat--area .fx-cat__name a { color: var(--pk-ink); text-decoration: none; }
.fx-cat--area .fx-cat__name a:hover { color: var(--pk-link-hover); text-decoration: underline; }
.fx-cat--area .fx-cat__desc a { color: var(--pk-ink-soft); }
.fx-cat__kids {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pk-space-1) var(--pk-space-3);
  margin: 0 0 var(--pk-space-3);
  padding: 0;
  list-style: none;
  font-size: var(--pk-text-sm);
}
.fx-cat__kids a { color: var(--pk-ink-soft); }
.fx-cat__more { font-weight: var(--pk-weight-medium); }

/* ---- the tag combobox ---- */

.fx-tagbox {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pk-space-2);
  min-height: 2.75rem;
  padding: var(--pk-space-1) var(--pk-space-2);
  border: 1px solid var(--pk-border-strong);
  border-radius: var(--pk-radius-md);
  background: var(--pk-surface);
  cursor: text;
}

.fx-tagbox:focus-within {
  outline: var(--pk-focus-width) solid var(--pk-focus-ring);
  outline-offset: var(--pk-focus-offset);
}

.fx-tagbox__chips {
  display: contents;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fx-tagbox__input {
  flex: 1 1 8rem;
  min-width: 6rem;
  min-height: 2rem;
  border: 0;
  background: transparent;
  color: var(--pk-ink);
  font: inherit;
  font-size: var(--pk-text-base);
}
.fx-tagbox__input:focus { outline: none; }
.fx-tagbox__input::placeholder { color: var(--pk-ink-faint); }

.fx-tagchip {
  display: inline-flex;
  align-items: center;
  gap: var(--pk-space-1);
  max-width: 100%;
  padding: 0 0 0 var(--pk-space-2);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-sm);
  background: var(--pk-brand-navy-tint);
  color: var(--pk-brand-navy);
  font-family: var(--pk-font-mono);
  font-size: var(--pk-text-sm);
}
.fx-tagchip__label { overflow-wrap: anywhere; }
.fx-tagchip__note { font-family: inherit; font-size: var(--pk-text-xs); color: var(--pk-ink-muted); }
.fx-tagchip--legacy { border-style: dashed; border-color: var(--pk-border-strong); }
.fx-tagchip--pending { border-style: dashed; }

/* 32px targets: comfortably above the 24px minimum on a phone. */
.fx-tagchip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: var(--pk-radius-sm);
  background: transparent;
  color: inherit;
  font-size: var(--pk-text-lg);
  line-height: 1;
  cursor: pointer;
}
.fx-tagchip__remove:hover { background: var(--pk-surface-sunk); }

.fx-listbox {
  position: absolute;
  top: calc(100% + var(--pk-space-1));
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 18rem;
  overflow-y: auto;
  margin: 0;
  padding: var(--pk-space-1);
  list-style: none;
  border: 1px solid var(--pk-border-strong);
  border-radius: var(--pk-radius-md);
  background: var(--pk-surface-raised);
  box-shadow: var(--pk-shadow-lg);
}

.fx-listbox__option {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 var(--pk-space-3);
  padding: var(--pk-space-2) var(--pk-space-3);
  border-left: 3px solid transparent;
  border-radius: var(--pk-radius-sm);
  cursor: pointer;
}
.fx-listbox__option:hover,
.fx-listbox__option.is-active {
  background: var(--pk-brand-navy-tint);
  border-left-color: var(--pk-brand-navy-lift);
}
.fx-option__name { color: var(--pk-ink); font-weight: var(--pk-weight-medium); overflow-wrap: anywhere; }
.fx-option__meta { color: var(--pk-ink-muted); font-size: var(--pk-text-xs); }
.fx-listbox__option--free .fx-option__name { font-weight: var(--pk-weight-normal, 400); font-style: italic; }

.fx-tagbox__count { margin-top: var(--pk-space-1); }

.fx-suggest { margin-top: var(--pk-space-3); }
.fx-suggest__label { margin: 0 0 var(--pk-space-2); font-size: var(--pk-text-xs); color: var(--pk-ink-muted); }
.fx-suggest__list { display: flex; flex-wrap: wrap; gap: var(--pk-space-2); margin: 0; padding: 0; list-style: none; }
.fx-suggest__btn {
  min-height: 2rem;
  max-width: 100%;
  padding: 0 var(--pk-space-3);
  border: 1px dashed var(--pk-border-strong);
  border-radius: var(--pk-radius-sm);
  background: var(--pk-surface);
  color: var(--pk-ink-soft);
  font-family: var(--pk-font-mono);
  font-size: var(--pk-text-sm);
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.fx-suggest__btn:hover { border-style: solid; color: var(--pk-ink); }

/* ---- search filters and administration ---- */

.fx-form--wide { max-width: 64rem; }
.fx-filterset { margin-top: var(--pk-space-2); }

.fx-admin-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--pk-space-3);
  margin-top: var(--pk-space-5);
}
.fx-admin-filters .pk-field { margin-bottom: 0; min-width: 0; flex: 1 1 10rem; }

.fx-tree-child td:first-child { padding-left: var(--pk-space-6); }
.fx-tree-child__mark { color: var(--pk-ink-faint); margin-right: var(--pk-space-1); }
.fx-actions-cell { white-space: nowrap; }

.fx-subhead { margin: var(--pk-space-8) 0 var(--pk-space-2); font-size: var(--pk-text-lg); }

.fx-alias-list { margin: 0 0 var(--pk-space-3); padding: 0; list-style: none; }
.fx-alias-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pk-space-2);
  padding: var(--pk-space-2) 0;
  border-bottom: 1px solid var(--pk-divider);
  overflow-wrap: anywhere;
}

.fx-inline-form--row { display: flex; flex-wrap: wrap; gap: var(--pk-space-2); align-items: flex-start; max-width: 40rem; }
.fx-inline-form--row .pk-input, .fx-inline-form--row .fx-tagbox { flex: 1 1 14rem; min-width: 0; }
.fx-inline-form--row > div:not(.fx-tagbox) { flex: 1 1 14rem; }

/* ------------------------------------------- Modern Technical finish --- */

/* The taxonomy branch deliberately stays on the Phase 1 architecture. This
   layer finishes that UI without changing its markup or pulling in the other
   branch's schema/auth work. Neutral surfaces carry structure; red is kept
   for the primary path, green for a verified solution, and navy for technical
   taxonomy and ordinary links. */
.fx-body {
  --pk-link: var(--pk-brand-navy);
  --pk-link-hover: var(--pk-brand-red-ink);
  --fx-tech: var(--pk-brand-navy);
  --fx-tech-bg: var(--pk-brand-navy-tint);
  --fx-card: var(--pk-surface);
  --fx-code-bg: var(--pk-n-950);
  --fx-code-ink: var(--pk-n-100);
  background:
    linear-gradient(180deg, var(--pk-surface-sunk) 0, var(--pk-bg) 18rem);
}

.fx-body [hidden] { display: none !important; }
.fx-body :is(input, select, textarea, button) { max-width: 100%; }
.fx-body :is(.pk-fieldset, .pk-table-wrap, .fx-form, .fx-post__body, .fx-topic__main) { min-width: 0; }

.fx-body :is(.fx-nav__link, .fx-filter, .fx-chip, .fx-cat, .fx-bell,
  .fx-me, .fx-topic__title a, .fx-tagchip__remove, .fx-suggest__btn,
  .fx-listbox__option, summary):focus-visible {
  outline: var(--pk-focus-width) solid var(--pk-focus-ring);
  outline-offset: var(--pk-focus-offset);
}

.fx-header {
  background: color-mix(in srgb, var(--pk-surface) 96%, transparent);
  border-bottom-color: color-mix(in srgb, var(--pk-border) 78%, var(--pk-brand-red-edge));
  box-shadow: var(--pk-shadow-sm);
  overflow-x: clip;
}

.fx-header::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--pk-brand-red) 42%, var(--pk-brand-green-lift) 58%, transparent);
  opacity: .38;
}

.fx-brand .pk-brand__logo { width: 36px; height: 36px; }
.fx-brand .pk-brand__sub { display: block; font-size: var(--pk-text-xs); line-height: 1.2; }
.fx-searchbar__input { background: var(--pk-surface-sunk); }
.fx-header__actions .pk-btn { white-space: nowrap; }
.fx-bell { min-width: 44px; min-height: 44px; }

.fx-nav { background: var(--pk-surface); }
.fx-nav__list { scroll-snap-type: x proximity; }
.fx-nav__item { scroll-snap-align: start; }
.fx-nav__link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-weight: var(--pk-weight-semibold);
}

.fx-main { min-height: 60vh; }
.fx-main .pk-h1,
.fx-topic-head__title {
  max-width: 28ch;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.fx-pagehead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--pk-space-4);
  margin-bottom: var(--pk-space-6);
  padding-bottom: var(--pk-space-5);
  border-bottom: 1px solid var(--pk-border);
}
.fx-pagehead__text { flex: 1 1 28rem; min-width: 0; }
.fx-pagehead .pk-h1 { margin-bottom: 0; }
.fx-eyebrow {
  margin: 0 0 var(--pk-space-1);
  color: var(--pk-brand-red-ink);
  font-size: var(--pk-text-xs);
  font-weight: var(--pk-weight-bold);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.fx-pagehead__lead { max-width: 68ch; margin: var(--pk-space-2) 0 0; color: var(--pk-ink-muted); }

.fx-hero {
  position: relative;
  margin: calc(var(--pk-space-6) * -1) 0 var(--pk-space-8);
  padding: var(--pk-space-10) clamp(var(--pk-space-4), 5vw, var(--pk-space-10));
  border: 1px solid var(--pk-border);
  border-top: 0;
  border-radius: 0 0 var(--pk-radius-lg) var(--pk-radius-lg);
  background:
    linear-gradient(135deg, var(--pk-surface) 0 70%, var(--pk-brand-navy-tint));
  overflow: hidden;
}

.fx-hero::before {
  content: "SQL  /  OCI  /  APEX  /  EBS";
  position: absolute;
  right: var(--pk-space-4);
  bottom: var(--pk-space-3);
  color: var(--pk-ink-faint);
  font-family: var(--pk-font-mono);
  font-size: var(--pk-text-xs);
  letter-spacing: .08em;
}

.fx-hero__title { letter-spacing: -.035em; text-wrap: balance; }
.fx-hero__search .pk-input { background: var(--pk-bg); box-shadow: var(--pk-shadow-sm); }

.fx-section__head {
  border-bottom-color: var(--pk-border);
}
.fx-section__title { color: var(--pk-ink); font-weight: var(--pk-weight-bold); letter-spacing: -.01em; }
.fx-section__more { font-weight: var(--pk-weight-semibold); }

.fx-topic {
  position: relative;
  margin-inline: calc(var(--pk-space-3) * -1);
  padding: var(--pk-space-4) var(--pk-space-3);
  border: 1px solid transparent;
  border-bottom-color: var(--pk-divider);
  background: transparent;
  transition: background-color var(--pk-dur-fast) var(--pk-ease),
              border-color var(--pk-dur-fast) var(--pk-ease);
}
.fx-topic:hover,
.fx-topic:focus-within {
  border-color: var(--pk-border);
  background: var(--fx-card);
}
.fx-topic--solved { border-left: 3px solid var(--pk-brand-green-lift); }
.fx-topic__title { overflow-wrap: anywhere; font-weight: var(--pk-weight-bold); }
.fx-topic__excerpt { max-width: 72ch; }
.fx-topic__meta { min-width: 0; }
.fx-topic__byline { max-width: 100%; overflow-wrap: anywhere; }
.fx-topic__stats { font-variant-numeric: tabular-nums; }

.fx-chip {
  max-width: 100%;
  overflow-wrap: anywhere;
  line-height: 1.45;
}
.fx-chip--tag {
  background: var(--fx-tech-bg);
  border-color: color-mix(in srgb, var(--pk-brand-navy-lift) 34%, var(--pk-border));
  color: var(--fx-tech);
}
.fx-chip--tag:hover { border-color: var(--pk-brand-navy-lift); color: var(--pk-ink); }

.fx-cat {
  position: relative;
  border-radius: var(--pk-radius-md);
  background: var(--fx-card);
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--pk-brand-navy-lift) 32%, transparent);
}
.fx-cat:hover,
.fx-cat:focus-within { transform: translateY(-1px); }
.fx-cat--area { overflow: hidden; }
.fx-cat--area::after {
  content: "";
  position: absolute;
  right: var(--pk-space-4);
  top: var(--pk-space-4);
  width: .5rem;
  height: .5rem;
  border: 1px solid var(--pk-brand-navy-lift);
  transform: rotate(45deg);
  opacity: .45;
}
.fx-cat__kids { padding-right: var(--pk-space-3); }

.fx-filters {
  padding-bottom: var(--pk-space-1);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}
.fx-filter {
  flex: 0 0 auto;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--pk-radius-sm);
  font-weight: var(--pk-weight-medium);
}
.fx-filter.is-current { font-weight: var(--pk-weight-bold); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--pk-on-brand) 55%, transparent); }

.fx-form,
.fx-form--wide {
  width: 100%;
  padding: clamp(var(--pk-space-4), 3vw, var(--pk-space-6));
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-md);
  background: var(--fx-card);
  box-shadow: var(--pk-shadow-sm);
}
.fx-form > :first-child { margin-top: 0; }
.fx-form > :last-child { margin-bottom: 0; }
.fx-form .pk-fieldset {
  padding: var(--pk-space-4);
  border-color: var(--pk-border);
  border-radius: var(--pk-radius-md);
  background: var(--pk-surface-sunk);
}
.fx-form .pk-fieldset legend {
  padding-inline: var(--pk-space-2);
  color: var(--pk-ink);
  font-weight: var(--pk-weight-bold);
}
.fx-form--compose { max-width: 58rem; }
.fx-searchtool { max-width: 64rem; }
.fx-filterset > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--pk-space-2);
  padding: var(--pk-space-2) var(--pk-space-3);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-sm);
  background: var(--pk-surface-sunk);
  color: var(--pk-ink-soft);
  font-size: var(--pk-text-xs);
  font-weight: var(--pk-weight-medium);
  line-height: 1.5;
  white-space: nowrap;
}
.fx-badge .fx-icon { width: .85rem; height: .85rem; color: var(--pk-ink-muted); }
.fx-badge--contribution { border-color: var(--fx-solved-edge, var(--pk-border)); background: var(--fx-solved-tint, var(--pk-surface-sunk)); color: var(--pk-ink); }

.fx-rep {
  color: var(--pk-ink-muted);
  font-size: var(--pk-text-xs);
  font-variant-numeric: tabular-nums;
  font-weight: var(--pk-weight-semibold);
}

/* A byline's context wraps as one unit under the name on a phone. */
.fx-authorctx { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem; }

.fx-contrib { margin-bottom: var(--pk-space-6); }
.fx-contrib__rank { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-3); }
.fx-contrib__rank p { margin: 0; color: var(--pk-ink-soft); }
.fx-contrib__rank strong { color: var(--pk-ink); font-size: var(--pk-text-lg); font-variant-numeric: tabular-nums; }
.fx-contrib__sub { margin: var(--pk-space-4) 0 var(--pk-space-2); font-size: var(--pk-text-sm); font-weight: var(--pk-weight-semibold); }

.fx-badgelist { display: grid; gap: var(--pk-space-2); margin: 0; padding: 0; list-style: none; }
.fx-badgelist li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pk-space-2); }
.fx-badgelist__why { color: var(--pk-ink-soft); font-size: var(--pk-text-sm); }
.fx-badgelist__when { color: var(--pk-ink-faint); font-size: var(--pk-text-xs); }

.fx-spotlight__who { display: flex; align-items: center; gap: var(--pk-space-2); margin: 0 0 var(--pk-space-2); }
.fx-spotlight__who > span:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.fx-spotlight__why { margin: 0 0 var(--pk-space-2); color: var(--pk-ink-soft); font-size: var(--pk-text-sm); }

.fx-ranklist { display: grid; gap: var(--pk-space-2); margin: 0 0 var(--pk-space-2); padding: 0; list-style: none; }
.fx-ranklist li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pk-space-3); color: var(--pk-ink-soft); font-size: var(--pk-text-sm); }

/* Leaderboards: compact rows, the position a quiet numeral.

   The name column has a floor and the stats column may shrink. The stats
   track used to be `auto`, which sizes to max-content (every stat on one
   line) and is served BEFORE a 1fr track grows — so inside a ~350px
   technology card the name column fell to 0–29px, and `overflow-wrap:
   anywhere` then broke the name after every letter (2026-09-11). Rows also
   answer to their own width through a container query, so a narrow card gets
   the stacked row a phone gets, whatever the viewport. */
.fx-lb { container-type: inline-size; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--pk-divider); }
.fx-lb__row {
  display: grid;
  grid-template-columns: 2rem minmax(min(9rem, 100%), 1fr) minmax(0, auto);
  align-items: center;
  gap: var(--pk-space-3);
  padding: var(--pk-space-3) 0;
  border-bottom: 1px solid var(--pk-divider);
}
.fx-lb__pos { color: var(--pk-ink-faint); font-size: var(--pk-text-sm); font-variant-numeric: tabular-nums; font-weight: var(--pk-weight-semibold); text-align: right; }
.fx-lb__who { display: flex; align-items: center; gap: var(--pk-space-2); min-width: 0; }
.fx-lb__name { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; min-width: 0; }
.fx-lb__name a { overflow-wrap: break-word; }   /* only an over-long word breaks, never every letter */
.fx-lb__stats { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem var(--pk-space-3); margin: 0; color: var(--pk-ink-muted); font-size: var(--pk-text-sm); text-align: right; }
.fx-lb__stats b { color: var(--pk-ink); font-variant-numeric: tabular-nums; }
.fx-lb__points { color: var(--pk-ink); font-size: var(--pk-text-lg); font-variant-numeric: tabular-nums; font-weight: var(--pk-weight-semibold); }

.fx-lb-grid { display: grid; gap: var(--pk-space-6); }
/* Technology cards: as many 22rem columns as fit. Two cards share the row
   side by side on desktop; below ~46rem of content width they stack. */
.fx-lb-grid--cats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.fx-catlb { padding: var(--pk-space-4); border: 1px solid var(--pk-border); border-radius: var(--pk-radius-md); background: var(--pk-surface); }
.fx-catlb__title { margin: 0 0 var(--pk-space-2); font-size: var(--pk-text-base); }
.fx-catlb .fx-lb { border-top: 0; }
.fx-catlb .fx-lb__row:last-child { border-bottom: 0; }
.fx-catlb__more { margin: var(--pk-space-2) 0 0; font-size: var(--pk-text-sm); }

/* A narrow list — a phone, or a card on any screen — puts the stats under
   the name instead of beside it. */
@container (max-width: 30rem) {
  .fx-lb__row { grid-template-columns: 1.5rem minmax(0, 1fr); }
  .fx-lb__stats { grid-column: 2; justify-content: flex-start; text-align: left; }
}
/* The same for browsers without container queries, by viewport. */
@media (max-width: 29.99rem) {
  .fx-lb__row { grid-template-columns: 1.5rem minmax(0, 1fr); }
  .fx-lb__stats { grid-column: 2; justify-content: flex-start; text-align: left; }
}
@media (min-width: 64rem) {
  .fx-lb-grid--boards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Admin Users: what each privilege means, and the administrator count. */
.fx-rolekey {
  display: grid;
  gap: var(--pk-space-2);
  margin: 0 0 var(--pk-space-4);
  padding: var(--pk-space-3) var(--pk-space-4);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-md);
  background: var(--pk-surface);
  font-size: var(--pk-text-sm);
}
.fx-rolekey div { display: grid; gap: 2px; }
.fx-rolekey dt { color: var(--pk-ink); font-weight: var(--pk-weight-semibold); }
.fx-rolekey dd { margin: 0; color: var(--pk-ink-muted); }
.fx-admin-note {
  display: flex;
  align-items: flex-start;
  gap: var(--pk-space-2);
  margin: 0 0 var(--pk-space-4);
  color: var(--pk-ink-soft);
  font-size: var(--pk-text-sm);
}
.fx-admin-note .fx-icon { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 2px; }
.fx-state--staff { color: var(--pk-ink); font-weight: var(--pk-weight-semibold); }

@media (min-width: 64rem) {
  .fx-rolekey { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pk-space-4); }
  font-weight: var(--pk-weight-semibold);
  cursor: pointer;
}

/* ========================================================================
   Community people — profile, directory and leaderboards

   These surfaces share one visual grammar: a dark technical canvas for
   orientation, white contribution cards for detail, green for solved work
   and red for action. Motion is decorative and disabled below for people who
   request reduced motion.
   ======================================================================== */

.fx-avatar {
  display: block;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--pk-surface-sunk);
}
.fx-avatar--lg,
.fx-monogram--lg { width: 4.25rem; height: 4.25rem; font-size: var(--pk-text-lg); }
.fx-avatar--xl,
.fx-monogram--xl { width: clamp(5.75rem, 9vw, 7.5rem); height: clamp(5.75rem, 9vw, 7.5rem); font-size: var(--pk-text-2xl); }

/* Profile hero */
.fx-profile-hero {
  position: relative;
  min-height: 18rem;
  margin-bottom: var(--pk-space-5);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--pk-border) 60%, transparent);
  border-radius: calc(var(--pk-radius-lg, 1rem) + .4rem);
  background: rgb(11 23 35);
  color: rgb(255 255 255);
  box-shadow: 0 26px 70px color-mix(in srgb, rgb(7 19 31) 20%, transparent);
}
.fx-profile-hero__cover {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    linear-gradient(105deg, rgba(5, 14, 23, .96) 5%, rgba(5, 20, 30, .72) 55%, rgba(5, 16, 24, .35)),
    radial-gradient(circle at 82% 22%, rgba(16, 147, 91, .7), transparent 28rem),
    linear-gradient(135deg, rgb(9 23 35), rgb(25 52 71));
}
.fx-profile-hero--image .fx-profile-hero__cover {
  background:
    linear-gradient(100deg, rgba(5, 14, 23, .96), rgba(5, 14, 23, .7) 54%, rgba(5, 14, 23, .32)),
    var(--fx-profile-banner) center / cover no-repeat;
}
.fx-profile-hero__grid { position: absolute; inset: 0; opacity: .17; background-image: linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(90deg, transparent 18%, rgb(0 0 0)); }
.fx-profile-hero__orb { position: absolute; border-radius: 50%; filter: blur(1px); animation: fx-drift 7s ease-in-out infinite alternate; }
.fx-profile-hero__orb--one { right: 8%; top: 12%; width: 9rem; height: 9rem; border: 1px solid rgba(255,255,255,.2); background: rgba(238, 29, 35, .16); }
.fx-profile-hero__orb--two { right: 24%; bottom: -3rem; width: 7rem; height: 7rem; background: rgba(16, 147, 91, .22); animation-delay: -2s; }
.fx-profile-hero__body { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: var(--pk-space-4); min-height: 18rem; padding: clamp(1.35rem, 4vw, 2.5rem); }
.fx-profile-hero .fx-pagehead__title { color: rgb(255 255 255); font-size: clamp(2.1rem, 5vw, 3.5rem); }
.fx-profile-hero .fx-eyebrow { color: rgba(255,255,255,.68); }
.fx-profile-hero .fx-identity__handle,
.fx-profile-hero .fx-identity__since { color: rgba(255,255,255,.68); }
.fx-profile-hero .fx-role,
.fx-profile-hero .fx-badge { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.12); color: rgb(255 255 255); backdrop-filter: blur(8px); }
.fx-profile-hero__avatar { position: relative; }
.fx-profile-hero__avatar :is(.fx-avatar,.fx-monogram) { border: 4px solid rgba(255,255,255,.94); box-shadow: 0 18px 42px rgba(0,0,0,.38); }
.fx-profile-hero__presence { position: absolute; right: .25rem; bottom: .25rem; width: 1.15rem; height: 1.15rem; border: 3px solid rgb(255 255 255); border-radius: 50%; background: rgb(44 200 125); }
.fx-profile-hero__edit { grid-column: 2; justify-self: start; border-color: rgba(255,255,255,.28) !important; background: rgba(255,255,255,.12) !important; color: rgb(255 255 255) !important; backdrop-filter: blur(12px); }
.fx-statstrip--profile { gap: var(--pk-space-2); overflow: visible; border: 0; background: transparent; }
.fx-statstrip--profile .fx-statstrip__item { min-height: 6.4rem; justify-content: center; border: 1px solid var(--pk-border); border-radius: var(--pk-radius-md); background: var(--fx-card); box-shadow: 0 10px 30px color-mix(in srgb, var(--pk-ink) 6%, transparent); }
.fx-statstrip--profile .fx-statstrip__icon { position:absolute;top:var(--pk-space-3);right:var(--pk-space-3);display:grid;place-items:center;width:1.8rem;height:1.8rem;border-radius:50%;background:var(--pk-surface-sunk);color:var(--pk-ink-faint); }
.fx-statstrip--profile .fx-statstrip__icon .fx-icon { width: .95rem; height: .95rem; }
.fx-statstrip--profile .fx-statstrip__item { position:relative; }
.fx-contrib__rankcard { padding: var(--pk-space-4); border: 1px solid var(--pk-border); border-radius: var(--pk-radius-md); background: linear-gradient(135deg, var(--fx-card), var(--fx-solved-tint)); }
.fx-contrib__track { height: .55rem; margin-top: var(--pk-space-4); overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--pk-border) 65%, transparent); }
.fx-contrib__track span { display: block; width: var(--fx-progress); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--pk-brand-red), var(--fx-solved)); animation: fx-progress-in 900ms var(--pk-ease) both; }
.fx-contrib__track-label { display: flex; justify-content: space-between; margin: var(--pk-space-1) 0 0; color: var(--pk-ink-faint); font-size: var(--pk-text-xs); }
.fx-profile-empty { display: flex; align-items: center; gap: var(--pk-space-3); padding: var(--pk-space-4); border: 1px dashed var(--pk-border-strong); border-radius: var(--pk-radius-md); background: var(--pk-surface-sunk); color: var(--pk-ink-muted); }
.fx-profile-empty > .fx-icon { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; color: var(--fx-tech); }
.fx-profile-empty div { display: grid; gap: .15rem; }
.fx-profile-empty strong { color: var(--pk-ink); }
.fx-profile-empty span { font-size: var(--pk-text-sm); }
.fx-profile-empty--stack { align-items: flex-start; }

/* Member directory */
.fx-members-hero,
.fx-leader-hero { position: relative; display: grid; gap: var(--pk-space-6); align-items: center; min-height: 18rem; margin-bottom: var(--pk-space-5); padding: clamp(1.5rem, 5vw, 3.5rem); overflow: hidden; border-radius: calc(var(--pk-radius-lg, 1rem) + .4rem); background: linear-gradient(120deg, rgb(8 24 35), rgb(19 50 71)); color: rgb(255 255 255); }
.fx-members-hero::before,
.fx-leader-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 82% 25%, rgba(16,147,91,.28), transparent 24rem), linear-gradient(90deg, transparent 55%, rgba(255,255,255,.025) 55%); background-size: auto, 32px 32px; }
.fx-members-hero__copy,
.fx-members-hero__visual,
.fx-leader-hero__copy,
.fx-leader-hero__graphic { position: relative; z-index: 1; }
.fx-members-hero .fx-pagehead__title,
.fx-leader-hero .fx-pagehead__title { color: rgb(255 255 255); font-size: clamp(2.25rem, 5vw, 3.75rem); }
.fx-members-hero .fx-pagehead__lead,
.fx-leader-hero .fx-pagehead__lead { max-width: 48rem; color: rgba(255,255,255,.72); }
.fx-members-hero .fx-eyebrow,
.fx-leader-hero .fx-eyebrow { color: rgb(119 217 170); }
.fx-members-hero__visual { min-height: 10rem; }
.fx-members-hero__visual svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: rgba(119,217,170,.5); stroke-width: 2; stroke-dasharray: 7 7; }
.fx-members-hero__visual circle { fill: rgb(239 53 65); stroke: rgb(255 255 255); stroke-width: 2; }
.fx-members-hero__avatar { position: absolute; z-index: 2; display: grid; place-items: center; width: 4.2rem; height: 4.2rem; border: 3px solid rgba(255,255,255,.85); border-radius: 50%; background: linear-gradient(145deg,rgb(231 239 244),rgb(185 202 215)); color: rgb(23 53 76); font-weight: 800; box-shadow: 0 16px 30px rgba(0,0,0,.3); animation: fx-float 5s ease-in-out infinite; }
.fx-members-hero__avatar:nth-of-type(1) { left: 3%; top: 34%; }
.fx-members-hero__avatar:nth-of-type(2) { left: 43%; top: 52%; animation-delay: -1.2s; }
.fx-members-hero__avatar:nth-of-type(3) { right: 2%; top: 2%; animation-delay: -2.4s; }
.fx-community-snapshot { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--pk-space-2); margin: 0 0 var(--pk-space-5); }
.fx-community-snapshot > div { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 0 var(--pk-space-2); padding: var(--pk-space-3) var(--pk-space-4); border: 1px solid var(--pk-border); border-radius: var(--pk-radius-md); background: var(--fx-card); }
.fx-community-snapshot .fx-icon { grid-row: 1 / 3; align-self: center; width: 1.35rem; height: 1.35rem; color: var(--fx-tech); }
.fx-community-snapshot dt { color: var(--pk-ink-muted); font-size: var(--pk-text-xs); }
.fx-community-snapshot dd { grid-column: 2; margin: 0; color: var(--pk-ink); font-size: var(--pk-text-xl); font-weight: 800; line-height: 1.1; }
.fx-member-tools { display: grid; gap: var(--pk-space-3); margin-bottom: var(--pk-space-5); padding: var(--pk-space-3); border: 1px solid var(--pk-border); border-radius: var(--pk-radius-md); background: var(--fx-card); }
.fx-member-search { display: flex; align-items: center; gap: var(--pk-space-2); min-width: 0; }
.fx-member-search > .fx-icon { flex: 0 0 auto; color: var(--pk-ink-faint); }
.fx-member-search input[type="search"] { min-width: 0; flex: 1; min-height: 44px; border: 0; outline: 0; background: transparent; color: var(--pk-ink); font: inherit; }
.fx-directory-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--pk-space-2); align-items: baseline; margin-bottom: var(--pk-space-3); }
.fx-directory-head p { margin: 0; }
.fx-directory-head span { color: var(--pk-ink-faint); font-size: var(--pk-text-xs); }
.fx-member-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,18rem),1fr)); gap: var(--pk-space-4); }
.fx-member-card { position: relative; overflow: hidden; border: 1px solid var(--pk-border); border-radius: var(--pk-radius-lg, 1rem); background: var(--fx-card); box-shadow: 0 12px 32px color-mix(in srgb, var(--pk-ink) 5%, transparent); animation: fx-card-in 500ms var(--pk-ease) both; animation-delay: var(--fx-card-delay); transition: transform 180ms var(--pk-ease), box-shadow 180ms var(--pk-ease), border-color 180ms var(--pk-ease); }
.fx-member-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--fx-tech) 45%, var(--pk-border)); box-shadow: 0 20px 46px color-mix(in srgb, var(--pk-ink) 12%, transparent); }
.fx-member-card__cover { position: relative; display: block; height: 4.8rem; overflow: hidden; background: linear-gradient(125deg,rgb(16 42 61),rgb(23 99 68)); }
.fx-member-card__cover::before { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:24px 24px; }
.fx-member-card__cover span { position: absolute; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; }
.fx-member-card__cover span:first-child { width: 6rem; height: 6rem; right: -1rem; top: -2rem; }
.fx-member-card__cover span:last-child { width: 3rem; height: 3rem; right: 5rem; bottom: -1.6rem; background: rgba(239,53,65,.18); }
.fx-member-card__head { display: flex; justify-content: space-between; align-items: flex-start; min-height: 2.4rem; padding: 0 var(--pk-space-4); }
.fx-member-card__avatar { display: block; margin-top: -2.1rem; border-radius: 50%; }
.fx-member-card__avatar :is(.fx-avatar,.fx-monogram) { border: 4px solid var(--fx-card); box-shadow: 0 8px 20px color-mix(in srgb,var(--pk-ink) 18%,transparent); }
.fx-member-card__active { padding-top: var(--pk-space-2); color: var(--pk-ink-faint); font-size: var(--pk-text-xs); }
.fx-member-card__active::before { content:""; display:inline-block; width:.45rem; height:.45rem; margin-right:.35rem; border-radius:50%; background:var(--fx-solved); }
.fx-member-card__body { padding: var(--pk-space-2) var(--pk-space-4) var(--pk-space-4); }
.fx-member-card__body h2 { margin: 0; font-size: var(--pk-text-lg); }
.fx-member-card__body h2 a { color: var(--pk-ink); text-decoration: none; }
.fx-member-card__handle { margin: .15rem 0 var(--pk-space-3); color: var(--pk-ink-faint); font: var(--pk-text-xs)/1.5 var(--pk-font-mono); }
.fx-member-card__badges { display: flex; flex-wrap: wrap; gap: var(--pk-space-1); min-height: 1.7rem; }
.fx-member-card__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin: var(--pk-space-4) 0; overflow: hidden; border: 1px solid var(--pk-divider); border-radius: var(--pk-radius-sm); background: var(--pk-divider); }
.fx-member-card__stats div { display: flex; flex-direction: column-reverse; padding: var(--pk-space-2); background: var(--pk-surface-sunk); }
.fx-member-card__stats dt { color: var(--pk-ink-faint); font-size: .68rem; }
.fx-member-card__stats dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.fx-member-card__link { display: flex; justify-content: space-between; align-items: center; color: var(--pk-ink); font-size: var(--pk-text-sm); font-weight: 700; text-decoration: none; }
.fx-member-card__link .fx-icon { width: 1rem; transition: transform 160ms var(--pk-ease); }
.fx-member-card:hover .fx-member-card__link .fx-icon { transform: translateX(.25rem); }

/* Leaderboards */
.fx-leader-hero__note { display: flex; align-items: center; gap: .45rem; margin: var(--pk-space-4) 0 0; color: rgba(255,255,255,.58); font-size: var(--pk-text-xs); }
.fx-leader-hero__note .fx-icon { flex: none; width: 1rem; }
.fx-leader-hero__graphic { min-height: 12rem; }
.fx-leader-hero__ring { position: absolute; inset: 8% 12%; border: 1px solid rgba(119,217,170,.35); border-radius: 50%; box-shadow: 0 0 0 2rem rgba(119,217,170,.035),0 0 0 4rem rgba(119,217,170,.025); animation: fx-spin 24s linear infinite; }
.fx-leader-hero__trophy { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 7rem; height: 7rem; border: 1px solid rgba(255,255,255,.3); border-radius: 38% 62% 58% 42%; background: linear-gradient(145deg,rgb(255 201 95),rgb(239 53 65)); color: rgb(255 255 255); box-shadow: inset -1rem -1rem 2rem rgba(77,10,17,.2),0 2rem 4rem rgba(0,0,0,.3); transform: translate(-50%,-50%) rotate(-8deg); animation: fx-float-trophy 5s ease-in-out infinite; }
.fx-leader-hero__trophy .fx-icon { width: 3.2rem; height: 3.2rem; }
.fx-leader-hero__spark { position:absolute; width:.55rem; height:.55rem; border-radius:50%; background:rgb(119 217 170); box-shadow:0 0 18px rgb(119 217 170); }
.fx-leader-hero__spark--a { left:12%; top:18%; }.fx-leader-hero__spark--b { right:8%; top:55%; background:rgb(239 53 65); box-shadow:0 0 18px rgb(239 53 65); }.fx-leader-hero__spark--c { left:28%; bottom:6%; background:rgb(255 201 95); box-shadow:0 0 18px rgb(255 201 95); }
.fx-seg--leader { position: sticky; top: 6.5rem; z-index: 5; width: fit-content; margin: 0 auto var(--pk-space-7); padding: .35rem; border: 1px solid var(--pk-border); border-radius: 999px; background: color-mix(in srgb,var(--fx-card) 90%,transparent); box-shadow: 0 10px 30px color-mix(in srgb,var(--pk-ink) 8%,transparent); backdrop-filter: blur(14px); }
.fx-seg--leader .fx-seg__label { padding-left: var(--pk-space-2); }
.fx-seg--leader .fx-filter { border: 0; border-radius: 999px; }
.fx-podium-section { margin-bottom: var(--pk-space-8); }
.fx-podium { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: end; gap: var(--pk-space-3); margin: 0; padding: 0; list-style: none; }
.fx-podium__item { position: relative; display: grid; justify-items: center; min-width: 0; padding: var(--pk-space-5) var(--pk-space-3) 0; overflow: hidden; border: 1px solid var(--pk-border); border-radius: var(--pk-radius-lg,1rem); background: var(--fx-card); text-align: center; box-shadow: 0 14px 36px color-mix(in srgb,var(--pk-ink) 7%,transparent); }
.fx-podium__item--1 { order: 2; padding-top: var(--pk-space-7); border-color: color-mix(in srgb,rgb(224 170 53) 55%,var(--pk-border)); }.fx-podium__item--2 { order: 1; }.fx-podium__item--3 { order: 3; }
.fx-podium__place { position:absolute; top:.7rem; left:.8rem; display:grid; place-items:center; width:1.8rem; height:1.8rem; border-radius:50%; background:var(--pk-surface-sunk); color:var(--pk-ink-muted); font-weight:800; }
.fx-podium__item--1 .fx-podium__place { background:rgb(255 242 200);color:rgb(118 82 11); }.fx-podium__item--2 .fx-podium__place { background:rgb(232 238 242);color:rgb(69 87 101); }.fx-podium__item--3 .fx-podium__place { background:rgb(244 223 209);color:rgb(121 72 45); }
.fx-podium__avatar :is(.fx-avatar,.fx-monogram) { border: 4px solid var(--fx-card); box-shadow:0 0 0 2px var(--pk-border),0 12px 28px color-mix(in srgb,var(--pk-ink) 18%,transparent); }
.fx-podium h3 { max-width: 100%; margin: var(--pk-space-3) 0 0; font-size: var(--pk-text-base); overflow-wrap: anywhere; }.fx-podium h3 a { color:var(--pk-ink);text-decoration:none; }
.fx-podium p { margin: .25rem 0 var(--pk-space-4); color: var(--pk-ink-muted); font-size: var(--pk-text-xs); }.fx-podium p strong { color:var(--pk-ink);font-size:var(--pk-text-xl); }
.fx-podium__bar { display:block; width:calc(100% + var(--pk-space-6)); height:1.5rem; background:linear-gradient(90deg,rgb(23 54 74),rgb(19 115 76)); }.fx-podium__item--1 .fx-podium__bar { height:2.8rem;background:linear-gradient(90deg,rgb(216 155 41),rgb(255 201 95)); }.fx-podium__item--3 .fx-podium__bar { height:1rem;background:linear-gradient(90deg,rgb(140 81 51),rgb(207 129 85)); }
.fx-lb-grid--boards > .fx-section { padding: var(--pk-space-4); border:1px solid var(--pk-border); border-radius:var(--pk-radius-lg,1rem); background:var(--fx-card); }
.fx-lb__row { animation: fx-row-in 420ms var(--pk-ease) both; animation-delay: var(--fx-row-delay); }
.fx-lb__row--top { background: linear-gradient(90deg,color-mix(in srgb,var(--fx-solved-tint) 60%,transparent),transparent 45%); }
.fx-lb__pos { position:relative; display:grid; place-items:center; width:2rem;height:2rem; text-align:center; }.fx-lb__pos .fx-icon { position:absolute;width:2rem;height:2rem;color:rgb(213 165 54);opacity:.28; }.fx-lb__pos span { position:relative;z-index:1; }
.fx-catlb { position:relative; overflow:hidden; padding:var(--pk-space-5); border-radius:var(--pk-radius-lg,1rem); box-shadow:0 12px 34px color-mix(in srgb,var(--pk-ink) 5%,transparent); transition:transform 180ms var(--pk-ease),box-shadow 180ms var(--pk-ease); }.fx-catlb:hover { transform:translateY(-3px);box-shadow:0 18px 42px color-mix(in srgb,var(--pk-ink) 10%,transparent); }
.fx-catlb::before { content:"";position:absolute;right:-3rem;top:-3rem;width:9rem;height:9rem;border-radius:50%;background:color-mix(in srgb,var(--fx-tech) 8%,transparent); }
.fx-catlb__icon { position:relative;display:grid;place-items:center;width:2.7rem;height:2.7rem;margin-bottom:var(--pk-space-3);border-radius:var(--pk-radius-sm);background:var(--fx-tech-tint);color:var(--fx-tech); }.fx-catlb__icon .fx-icon{width:1.35rem;height:1.35rem;}
.fx-catlb__title { position:relative;font-size:var(--pk-text-xl); }.fx-catlb__more a{display:inline-flex;align-items:center;gap:.35rem;font-weight:700;text-decoration:none;}.fx-catlb__more .fx-icon{width:1rem;}
.fx-reputation-guide { margin-top:var(--pk-space-8);padding:clamp(1.25rem,4vw,2rem);border:1px solid var(--pk-border);border-radius:var(--pk-radius-lg,1rem);background:linear-gradient(135deg,var(--fx-card),var(--pk-surface-sunk)); }
.fx-scorecards { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:var(--pk-space-2);margin:0 0 var(--pk-space-5);padding:0;list-style:none; }.fx-scorecards li{display:grid;gap:.2rem;padding:var(--pk-space-3);border:1px solid var(--pk-border);border-radius:var(--pk-radius-md);background:var(--fx-card);color:var(--pk-ink-muted);font-size:var(--pk-text-xs);}.fx-scorecards b{color:var(--fx-solved);font-size:var(--pk-text-xl);}
.fx-leader-program-link{margin:var(--pk-space-4) 0 0}.fx-leader-program-link a{display:inline-flex;align-items:center;gap:.4rem;color:rgb(178 239 212);font-weight:700}.fx-leader-program-link .fx-icon{width:1rem}.fx-score-explainer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--pk-space-3);margin-top:var(--pk-space-4)}.fx-metric-card{display:flex;flex-direction:column;min-width:0;padding:var(--pk-space-5);border:1px solid var(--pk-border);border-top:4px solid var(--pk-brand-red);border-radius:var(--pk-radius-md);background:var(--fx-card)}.fx-metric-card--reputation{border-top-color:var(--fx-solved)}.fx-metric-card--board{border-top-color:rgb(221 167 47)}.fx-metric-card>span{font:700 .68rem var(--pk-font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--pk-ink-muted)}.fx-metric-card h3{margin:.45rem 0;font-size:var(--pk-text-xl)}.fx-metric-card p{margin:.1rem 0 var(--pk-space-3);color:var(--pk-ink-muted)}.fx-metric-card ul{display:grid;gap:.45rem;margin:0 0 var(--pk-space-4);padding:0;list-style:none}.fx-metric-card li{display:flex;gap:.5rem;padding-top:.45rem;border-top:1px solid var(--pk-border);font-size:var(--pk-text-sm)}.fx-metric-card li strong{min-width:2.5rem;color:var(--fx-solved);font-variant-numeric:tabular-nums}.fx-metric-card--points li strong{color:var(--pk-brand-red)}.fx-metric-card a{margin-top:auto;font-weight:700}.fx-metric-card small{display:block;margin-top:auto;color:var(--pk-ink-muted)}.fx-score-policy{display:flex;gap:.8rem;align-items:flex-start;margin-top:var(--pk-space-4);padding:var(--pk-space-4);border:1px solid var(--fx-solved-edge);border-radius:var(--pk-radius-md);background:var(--fx-solved-tint)}.fx-score-policy .fx-icon{flex:0 0 auto;color:var(--fx-solved)}.fx-score-policy p{margin:0;color:var(--pk-ink-muted)}

@keyframes fx-card-in { from { opacity:0;transform:translateY(12px); } to { opacity:1;transform:none; } }
@keyframes fx-row-in { from { opacity:0;transform:translateX(-8px); } to { opacity:1;transform:none; } }
@keyframes fx-progress-in { from { width:0; } }
@keyframes fx-float { 50% { transform:translateY(-8px); } }
@keyframes fx-float-trophy { 50% { transform:translate(-50%,-56%) rotate(-3deg); } }
@keyframes fx-drift { to { transform:translate(8px,-10px) scale(1.05); } }
@keyframes fx-spin { to { transform:rotate(360deg); } }

@media (min-width: 48rem) {
  .fx-members-hero,.fx-leader-hero { grid-template-columns:minmax(0,1.55fr) minmax(16rem,.7fr); }
  .fx-community-snapshot { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .fx-member-tools { grid-template-columns:minmax(18rem,.8fr) minmax(0,1.2fr);align-items:center; }
  .fx-member-tools .fx-seg { justify-content:flex-end; }
}
@media (max-width: 47.99rem) {
  .fx-profile-hero__body { grid-template-columns:1fr;align-content:end; }
  .fx-profile-hero__avatar { align-self:end; }
  .fx-profile-hero__edit { grid-column:1; }
  .fx-members-hero__visual,.fx-leader-hero__graphic { display:none; }
  .fx-member-search { display:grid;grid-template-columns:auto minmax(0,1fr); }.fx-member-search input { min-width:0; }.fx-member-search button { grid-column:1 / -1;width:100%; }
  .fx-podium { grid-template-columns:1fr;align-items:stretch; }.fx-podium__item { order:initial!important;padding-top:var(--pk-space-5); }.fx-podium__item--1 { order:-1!important; }.fx-podium__bar { height:1rem!important; }
  .fx-seg--leader { position:static;width:100%;justify-content:center; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-profile-hero__orb,.fx-members-hero__avatar,.fx-leader-hero__ring,.fx-leader-hero__trophy,.fx-member-card,.fx-lb__row,.fx-contrib__track span { animation:none!important; }
  .fx-member-card,.fx-catlb,.fx-member-card__link .fx-icon { transition:none!important; }
}
.fx-filterset[open] > summary { border-bottom-color: transparent; border-radius: var(--pk-radius-sm) var(--pk-radius-sm) 0 0; }
.fx-filterset > .pk-fieldset { margin-top: 0; border-radius: 0 0 var(--pk-radius-sm) var(--pk-radius-sm); }
.fx-form :is(.pk-input, .pk-select, .pk-textarea):focus {
  background: var(--pk-surface);
}
.fx-form :is(.pk-input, .pk-select, .pk-textarea)[aria-invalid="true"] {
  border-color: var(--pk-danger);
  box-shadow: inset 3px 0 0 var(--pk-danger);
}
.fx-hint { max-width: 72ch; line-height: var(--pk-leading-normal); }

.fx-tagbox {
  min-width: 0;
  min-height: 48px;
  border-radius: var(--pk-radius-sm);
  background: var(--pk-surface);
}
.fx-tagbox__chips { min-width: 0; }
.fx-tagchip { min-height: 34px; }
.fx-tagchip__label { min-width: 0; }
.fx-tagchip__remove { min-width: 34px; min-height: 34px; }
.fx-listbox {
  max-width: min(100%, calc(100vw - (2 * var(--pk-container-pad))));
  overscroll-behavior: contain;
}
.fx-listbox__option { min-height: 44px; align-content: center; }
.fx-listbox__option[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--pk-brand-navy-lift); }
.fx-option__meta { overflow-wrap: anywhere; }
.fx-suggest__btn { min-height: 40px; padding-block: var(--pk-space-1); }

.fx-tag-facts,
.fx-products,
.fx-related {
  padding: var(--pk-space-3) var(--pk-space-4);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-sm);
  background: var(--pk-surface-sunk);
}
.fx-tag-index {
  align-items: stretch;
  gap: var(--pk-space-2);
}
.fx-tag-index__item {
  padding: var(--pk-space-2);
  border: 1px solid var(--pk-divider);
  border-radius: var(--pk-radius-sm);
  background: var(--fx-card);
}

.fx-topic-head {
  padding: clamp(var(--pk-space-4), 4vw, var(--pk-space-6));
  border: 1px solid var(--pk-border);
  border-top: 3px solid var(--pk-brand-navy-lift);
  border-radius: var(--pk-radius-md);
  background: var(--fx-card);
}
.fx-topicpage { max-width: 68rem; margin-inline: auto; }
.fx-topic-head__meta { line-height: var(--pk-leading-normal); }
.fx-meta {
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  border-left-color: var(--pk-brand-navy-lift);
  background: var(--pk-surface-sunk);
}
.fx-meta dt { font-size: var(--pk-text-xs); font-weight: var(--pk-weight-semibold); text-transform: uppercase; letter-spacing: .04em; }
.fx-meta dd { overflow-wrap: anywhere; }
.fx-post {
  margin-top: var(--pk-space-3);
  padding: var(--pk-space-5) clamp(var(--pk-space-3), 3vw, var(--pk-space-5));
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-md);
  background: var(--fx-card);
}
.fx-post--question { margin-top: 0; }
.fx-post--accepted {
  border: 1px solid var(--pk-brand-green-lift);
  border-left: 4px solid var(--pk-brand-green-lift);
  background: linear-gradient(90deg, var(--pk-brand-green-tint), var(--fx-card) 22rem);
}
.fx-post__actions {
  padding-top: var(--pk-space-3);
  border-top: 1px solid var(--pk-divider);
}
.fx-post__byline { padding-top: var(--pk-space-3); border-top: 1px dashed var(--pk-divider); }
.fx-vote__btn { min-width: 44px; min-height: 44px; }
.fx-prose { overflow-wrap: break-word; }
.fx-prose blockquote {
  margin: var(--pk-space-4) 0;
  padding: var(--pk-space-3) var(--pk-space-4);
  border-left: 3px solid var(--pk-brand-navy-lift);
  background: var(--pk-surface-sunk);
  color: var(--pk-ink-soft);
}
.fx-code {
  max-width: 100%;
  border-color: var(--pk-n-800);
  background: var(--fx-code-bg);
  color: var(--fx-code-ink);
  box-shadow: inset 0 3px 0 var(--pk-brand-navy-lift);
  overscroll-behavior-inline: contain;
  tab-size: 4;
  white-space: pre;
}
.fx-answers { margin-top: var(--pk-space-8); }
.fx-answers > .fx-section__title { padding-bottom: var(--pk-space-3); border-bottom: 1px solid var(--pk-border); }
.fx-replybox {
  margin-top: var(--pk-space-8);
  padding: clamp(var(--pk-space-4), 3vw, var(--pk-space-6));
  border: 1px solid var(--pk-border);
  border-top: 3px solid var(--pk-brand-red);
  border-radius: var(--pk-radius-md);
  background: var(--pk-surface-sunk);
}
.fx-replybox .fx-form { padding: 0; border: 0; background: transparent; box-shadow: none; }
.fx-quiet-note {
  margin: var(--pk-space-4) 0 0;
  padding: var(--pk-space-4);
  border: 1px dashed var(--pk-border-strong);
  border-radius: var(--pk-radius-sm);
  color: var(--pk-ink-muted);
  text-align: center;
}

.fx-admin-grid { align-items: stretch; }
.fx-kpi { border-top: 3px solid var(--pk-brand-navy-lift); background: var(--fx-card); }
.fx-kpi--alert { border-top-color: var(--pk-danger); }
.fx-admin-filters {
  padding: var(--pk-space-4);
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius-md);
  background: var(--pk-surface-sunk);
}
.pk-table-wrap {
  max-width: 100%;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}
.fx-actions-cell { position: sticky; right: 0; background: var(--fx-card); box-shadow: -1px 0 0 var(--pk-divider); }
.fx-alias-list li { min-height: 44px; }
.fx-subhead { padding-bottom: var(--pk-space-2); border-bottom: 1px solid var(--pk-divider); }

/* Mobile is not a compressed desktop. The content order stays identical, but
   voting moves beside the post and every control remains reachable without a
   document-level horizontal scrollbar. */
@media (max-width: 39.99rem) {
  .fx-body :is(button, .pk-btn, .fx-filter, .fx-suggest__btn, .fx-theme-choice__select) { min-height: 44px; }
  .fx-header__inner { gap: var(--pk-space-2); }
  .fx-brand { max-width: calc(100% - 9rem); }
  .fx-brand .pk-brand__name { font-size: var(--pk-text-base); }
  .fx-header__actions { max-width: 100%; }
  .fx-header__actions .pk-btn--sm { min-height: 44px; }
  .fx-searchbar { gap: var(--pk-space-1); }
  .fx-searchbar .pk-btn { padding-inline: var(--pk-space-3); }
  .fx-nav__link { padding-inline: var(--pk-space-4); }
  .fx-main { padding-top: var(--pk-space-4); }
  .fx-hero { margin-top: calc(var(--pk-space-4) * -1); padding-block: var(--pk-space-8); }
  .fx-hero::before { display: none; }
  .fx-hero__search { flex-wrap: wrap; }
  .fx-hero__search .pk-btn { flex: 1 0 100%; min-height: 44px; }
  .fx-topic { margin-inline: 0; }
  .fx-topic__byline { margin-left: 0; flex-basis: 100%; }
  .fx-filters { flex-wrap: nowrap; margin-right: calc(var(--pk-container-pad) * -1); padding-right: var(--pk-container-pad); }
  .fx-form, .fx-form--wide { padding: var(--pk-space-4); }
  .fx-form .pk-fieldset { padding: var(--pk-space-3); }
  .fx-tagbox { align-items: flex-start; }
  .fx-tagbox__input { flex-basis: 100%; min-width: 0; }
  .fx-listbox__option { display: grid; grid-template-columns: minmax(0, 1fr); }
  .fx-suggest__list { display: grid; grid-template-columns: minmax(0, 1fr); }
  .fx-suggest__btn { width: 100%; }
  .fx-products, .fx-related { margin-inline: 0; padding: var(--pk-space-3); }
  .fx-tag-index__item { flex: 1 1 100%; justify-content: space-between; }
  .fx-post { display: grid; grid-template-columns: 1fr; }
  .fx-post__gutter { flex: none; flex-direction: row; justify-content: flex-start; }
  .fx-vote { flex-direction: row; }
  .fx-post__actions .pk-btn--sm { min-height: 44px; }
  .fx-meta { grid-template-columns: minmax(0, 1fr); }
  .fx-admin-filters { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .fx-admin-filters .pk-btn { width: 100%; min-height: 44px; }
  .fx-inline-form--row { display: grid; grid-template-columns: minmax(0, 1fr); }
  .fx-inline-form--row > * { width: 100%; }
  .fx-actions-cell { position: static; box-shadow: none; }
}

@media (min-width: 40rem) {
  .fx-tag-index__item { flex: 0 1 auto; }
}

@media (min-width: 64rem) {
  .fx-main { padding-top: var(--pk-space-8); }
  .fx-topic-head { padding-inline: var(--pk-space-8); }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fx-body {
    --fx-code-bg: var(--pk-surface-sunk);
    background: linear-gradient(180deg, var(--pk-n-950) 0, var(--pk-bg) 18rem);
  }
  :root:not([data-theme="light"]) .fx-header,
  :root:not([data-theme="light"]) .fx-nav { background: var(--pk-surface); }
  :root:not([data-theme="light"]) .fx-post--accepted {
    background: linear-gradient(90deg, var(--pk-brand-green-tint), var(--fx-card) 22rem);
  }
}

:root[data-theme="dark"] .fx-body {
  --fx-code-bg: var(--pk-surface-sunk);
  background: linear-gradient(180deg, var(--pk-n-950) 0, var(--pk-bg) 18rem);
}
:root[data-theme="dark"] :is(.fx-header, .fx-nav) { background: var(--pk-surface); }

@media (prefers-reduced-motion: reduce) {
  .fx-body *, .fx-body *::before, .fx-body *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .fx-cat:hover, .fx-cat:focus-within,
  .fx-home-path:hover, .fx-quick__item:hover { transform: none; }
}

/* --------------------------------------------------------- breakpoints --- */

@media (min-width: 40rem) {
  .fx-choices:not(.fx-choices--list) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-choices > legend { grid-column: 1 / -1; }
  .fx-cats { grid-template-columns: repeat(2, 1fr); }
  .fx-stats { grid-template-columns: repeat(3, 1fr); }
  .fx-admin-grid { grid-template-columns: repeat(2, 1fr); }
  .fx-meta-grid { grid-template-columns: repeat(2, 1fr); }

  .fx-topic { grid-template-columns: minmax(0, 1fr) 6.5rem; gap: var(--pk-space-5); align-items: start; }
  .fx-topic__stats {
    flex-direction: column;
    align-items: flex-end;
    gap: var(--pk-space-1);
    padding-top: 1.75rem;
  }
  .fx-stat--solved {
    padding: 1px var(--pk-space-2);
    border: 1px solid var(--fx-solved-edge);
    border-radius: var(--pk-radius-sm);
    background: var(--fx-solved-tint);
  }
  .fx-quick { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fx-home-paths__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-home-activity { grid-template-columns: minmax(16rem, .8fr) minmax(0, 1.2fr); align-items: end; }
  .fx-home-join { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .fx-index-tools__find { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .fx-index-list .fx-topic__stats { padding: 1.75rem 0 0; background: transparent; }
}

/* Tablet: page-level rules. The shell's own breakpoints live in its section. */
@media (min-width: 48rem) {
  .fx-main { padding-top: var(--pk-space-6); }
  .fx-pagehead__title,
  .fx-main .pk-h1 { font-size: var(--pk-text-3xl); }
  .fx-home-mast { padding: var(--pk-space-8); }
  .fx-home-feed { padding: var(--pk-space-5); }
  .fx-indexhero,
  .fx-body--compose .fx-pagehead { padding: var(--pk-space-6); }
}

/* Desktop: page-level rules. The shell's own breakpoints live in its section. */
@media (min-width: 64rem) {
  .fx-cats { grid-template-columns: repeat(3, 1fr); }
  .fx-admin-grid { grid-template-columns: repeat(4, 1fr); }
  .fx-stats { grid-template-columns: repeat(6, 1fr); }
  .fx-profile { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .fx-meta-grid { grid-template-columns: repeat(3, 1fr); }
  .fx-meta-grid--two { grid-template-columns: repeat(2, 1fr); }
  .fx-main { padding-top: var(--pk-space-8); }

  .fx-home-mast {
    grid-template-areas: "copy journey" "quick quick";
    grid-template-columns: minmax(0, 1.35fr) minmax(22rem, .85fr);
    align-items: stretch;
    gap: var(--pk-space-8);
  }
  .fx-home-mast__text { grid-area: copy; }
  .fx-home-map { grid-area: map; }
  .fx-home-journey { grid-area: journey; }
  .fx-quick { grid-area: quick; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fx-home-paths__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fx-home-grid { grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); gap: var(--pk-space-10); }
  .fx-home-grid__rail { position: sticky; top: 8rem; }
  .fx-body--home .fx-wordmark { font-size: 1.375rem; }
  .fx-indexhero { grid-template-columns: minmax(0, 1.55fr) minmax(17rem, .75fr); align-items: stretch; padding: var(--pk-space-8); }
  .fx-indexhero__aside { padding: var(--pk-space-5); }
}

@media (prefers-reduced-motion: reduce) {
  .fx-body * { transition-duration: 0s !important; animation-duration: 0s !important; }
}

@media print {
  .fx-header, .fx-footer, .fx-bottomnav, .fx-crumbs, .fx-post__actions, .fx-vote, .fx-codeframe__copy { display: none !important; }
  .fx-body { padding-bottom: 0 !important; }
  .fx-code { white-space: pre-wrap; }
}
:root[data-theme="dark"] .fx-footer,
:root[data-theme="dark"] .fx-chip,
:root[data-theme="dark"] .fx-meta { background: var(--pk-n-900); }
:root[data-theme="dark"] .fx-prose code { background: var(--pk-n-800); }

/* Taxonomy chips remain technical navy in explicit/system dark mode; the
   older neutral fallback above is for untyped category chips. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fx-chip--tag { background: var(--pk-brand-navy-tint); }
}
:root[data-theme="dark"] .fx-chip--tag { background: var(--pk-brand-navy-tint); }

/* Community Contribution Program — a recognisable PKOUG campaign inside the
   existing forum shell. Emblems are original SVGs; no Oracle mark is used. */
.fx-contribution-hero{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(18rem,.65fr);gap:var(--pk-space-8);align-items:center;margin-bottom:var(--pk-space-6);padding:clamp(2rem,5vw,4.5rem);border:1px solid rgb(255 255 255/.13);border-radius:var(--radius-xl);color:rgb(255 255 255);background:linear-gradient(90deg,rgb(3 12 22/.98) 0%,rgb(3 12 22/.88) 39%,rgb(3 12 22/.28) 72%,rgb(3 12 22/.38) 100%),url("../contribution-hero-v2.webp") center right/cover no-repeat,rgb(7 19 29);box-shadow:var(--shadow-md)}
.fx-contribution-hero:before{content:"";position:absolute;z-index:-1;inset:auto 0 0;height:36%;background:linear-gradient(transparent,rgb(2 9 15/.72));pointer-events:none}
.fx-contribution-hero:after{content:"";position:absolute;z-index:-1;inset:0;background-image:linear-gradient(rgb(255 255 255/.025) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255/.025) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to right,transparent,rgb(0 0 0))}
.fx-contribution-hero__copy,.fx-contribution-hero__visual{position:relative;z-index:1}.fx-contribution-kicker{margin:0 0 .65rem;font:600 .72rem/1.4 var(--font-mono);letter-spacing:.24em;text-transform:uppercase;color:rgb(255 255 255/.78)}.fx-contribution-hero h1{max-width:17ch;margin:0;font-size:clamp(2.35rem,5.6vw,5rem);line-height:.96;letter-spacing:-.045em;color:rgb(255 255 255)}.fx-contribution-tagline{margin:.8rem 0!important;font-size:clamp(1.05rem,2vw,1.45rem)!important;font-weight:700;color:rgb(255 57 68)!important}.fx-contribution-hero__copy>p:last-of-type{max-width:42rem;color:rgb(255 255 255/.8)}.fx-contribution-hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}.fx-contribution-hero__actions .pk-btn--secondary{border-color:rgb(255 255 255/.6);color:rgb(255 255 255);background:rgb(4 12 20/.25)}
.fx-contribution-hero__visual{display:grid;place-items:center;min-height:18rem}.fx-contribution-hero__visual:before{content:"";position:absolute;width:13rem;height:15rem;border:2px solid rgb(255 255 255/.72);border-radius:58% 42% 52% 48%/35% 52% 48% 65%;background:radial-gradient(circle at 52% 48%,rgb(20 143 96/.32),rgb(5 24 26/.1) 58%,transparent 59%);filter:drop-shadow(0 0 18px rgb(33 190 128/.28));transform:rotate(-7deg)}.fx-contribution-hero__orbit{position:absolute;width:20rem;height:9rem;border:1px solid rgb(255 255 255/.17);border-radius:50%;transform:rotate(-14deg)}.fx-contribution-hero__visual .fx-rank-emblem--hero{position:relative;width:8.5rem;filter:drop-shadow(0 1.2rem 1.3rem rgb(0 0 0/.45))}.fx-contribution-hero__visual>div{position:absolute;right:0;bottom:0;display:grid;grid-template-columns:auto 1fr;gap:.1rem .6rem;align-items:center;padding:.65rem .8rem;border:1px solid rgb(255 255 255/.16);border-radius:.75rem;background:rgb(3 11 18/.7);backdrop-filter:blur(10px)}.fx-contribution-hero__visual img{grid-row:1/3;width:2.7rem;height:2.7rem;object-fit:contain}.fx-contribution-hero__visual strong{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em}.fx-contribution-hero__visual small{color:rgb(255 255 255/.65)}
.fx-rank-emblem{--emblem:rgb(96 113 132);--emblem-hi:rgb(170 181 192);display:inline-grid;width:2rem;height:auto;aspect-ratio:24/27;flex:0 0 auto;color:rgb(255 255 255)}.fx-rank-emblem svg{width:100%;height:100%;overflow:visible;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 .3rem .35rem rgb(0 0 0/.2))}.fx-rank-emblem__shield{fill:color-mix(in srgb,var(--emblem) 78%,rgb(8 16 25));stroke:var(--emblem-hi);stroke-width:1}.fx-rank-emblem__rim{fill:color-mix(in srgb,var(--emblem) 55%,rgb(7 16 24));stroke:rgb(255 255 255/.68);stroke-width:.45}.fx-rank-emblem__motif{fill:none;stroke:rgb(255 240 194);stroke-width:1.25}.fx-rank-emblem text{font:700 2.15px var(--font-mono);text-anchor:middle;letter-spacing:.12px;fill:rgb(255 255 255);stroke:none}.fx-rank-emblem--aaghaz{--emblem:rgb(120 93 76);--emblem-hi:rgb(203 179 163)}.fx-rank-emblem--oracle-explorer{--emblem:rgb(35 115 69);--emblem-hi:rgb(139 206 162)}.fx-rank-emblem--knowledge-contributor{--emblem:rgb(8 123 128);--emblem-hi:rgb(126 214 216)}.fx-rank-emblem--community-builder{--emblem:rgb(7 89 152);--emblem-hi:rgb(134 197 237)}.fx-rank-emblem--oracle-specialist{--emblem:rgb(104 43 145);--emblem-hi:rgb(196 156 224)}.fx-rank-emblem--rahnuma{--emblem:rgb(165 106 0);--emblem-hi:rgb(255 208 108)}.fx-rank-emblem--community-mentor{--emblem:rgb(169 14 27);--emblem-hi:rgb(255 157 162)}.fx-rank-emblem--pkoug-vanguard{--emblem:rgb(0 100 81);--emblem-hi:rgb(120 215 187)}.fx-rank-emblem--community-architect{--emblem:rgb(21 43 133);--emblem-hi:rgb(140 166 255)}.fx-rank-emblem--pkoug-fellow{--emblem:rgb(153 13 23);--emblem-hi:rgb(255 146 152)}.fx-rank-emblem--pkoug-luminary{--emblem:rgb(140 97 0);--emblem-hi:rgb(255 224 138)}
.fx-contribution-principles{margin-bottom:var(--pk-space-6)}.fx-contribution-three,.fx-earning-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--pk-space-4)}.fx-contribution-three article,.fx-earning-grid article{padding:var(--pk-space-5);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card)}.fx-contribution-three article{border-top:3px solid var(--primary)}.fx-contribution-three article>span{font:600 .75rem var(--font-mono);color:var(--primary-ink)}.fx-contribution-three h3,.fx-earning-grid h3{margin:.45rem 0}.fx-contribution-three p{margin:0;color:var(--muted-foreground)}
.fx-rank-journey{padding:clamp(1rem,2.4vw,1.6rem)}.fx-rank-path{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:.5rem;overflow:visible;margin:0;padding:.5rem 0 0;list-style:none}.fx-rank-path li{position:relative;display:grid;grid-template-rows:6rem auto;justify-items:center;min-width:0;padding:.35rem;text-align:center}.fx-rank-path .fx-rank-emblem{z-index:1;width:clamp(3.75rem,6.5vw,5.75rem);transition:transform .18s ease}.fx-rank-path li:hover .fx-rank-emblem{transform:translateY(-.25rem)}.fx-rank-path h3{margin:.25rem 0;font-size:clamp(.74rem,1vw,.92rem);line-height:1.15}.fx-rank-path strong{display:block;color:var(--primary-ink);font-size:.78rem}.fx-rank-path p{margin:.35rem 0 0;color:var(--muted-foreground);font-size:.72rem;line-height:1.35}.fx-rank-path__level{font:600 .62rem var(--font-mono);text-transform:uppercase;color:var(--muted-foreground)}.fx-rank-path__next{position:absolute;z-index:2;top:2.45rem;right:-.65rem;color:var(--muted-foreground)}.fx-rank-path__next .fx-icon{width:.8rem}
.fx-contribution-dashboard{display:grid;grid-template-columns:1.45fr .85fr 1fr;gap:var(--pk-space-4);margin:var(--pk-space-5) 0}.fx-contribution-panel{padding:var(--pk-space-5);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);box-shadow:var(--shadow-sm)}.fx-contribution-panel>p{color:var(--muted-foreground)}.fx-earning-featured{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem}.fx-earning-featured>div{min-width:0;padding:.7rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--elevated)}.fx-earning-featured__mark{display:grid;place-items:center;width:2rem;height:2rem;margin-bottom:.5rem;border-radius:.55rem;color:rgb(255 255 255);background:linear-gradient(145deg,var(--primary),rgb(234 43 54));font:700 .72rem var(--font-mono)}.fx-earning-featured h3{margin:0;font-size:.76rem;line-height:1.2}.fx-earning-featured strong{display:block;margin-top:.25rem;color:var(--success);font-size:.72rem}.fx-benefit-list{display:grid;gap:.55rem;margin:.9rem 0;padding:0;list-style:none}.fx-benefit-list li{display:flex;gap:.5rem;align-items:flex-start;font-size:.8rem}.fx-benefit-list .fx-icon{flex:0 0 auto;width:1rem;color:var(--success)}.fx-benefit-list strong{color:var(--success);white-space:nowrap}.fx-contribution-panel--leadership .fx-benefit-list .fx-icon{color:var(--primary)}.fx-panel-note{margin:1rem 0 0;padding:.75rem;border-radius:var(--radius-md);background:var(--elevated);font-size:.78rem}.fx-earning-details{margin-top:var(--pk-space-6)}.fx-earning-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.fx-earning-grid ul{margin:0;padding:0;list-style:none}.fx-earning-grid li{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-top:1px solid var(--border);font-size:.84rem}.fx-earning-grid strong{color:var(--success);font-family:var(--font-mono)}.fx-contribution-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--pk-space-5)}.fx-rank-benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem;margin-top:var(--pk-space-5)}.fx-rank-benefits>div{display:flex;gap:.65rem;align-items:center;padding:.7rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--elevated)}.fx-rank-benefits .fx-rank-emblem{width:2.7rem}.fx-rank-benefits span{display:grid}.fx-rank-benefits small{color:var(--muted-foreground)}
.fx-chip-cloud{display:flex;flex-wrap:wrap;gap:.65rem}.fx-chip-cloud>span{display:inline-flex;align-items:center;gap:.4rem;min-height:2.5rem;padding:.55rem .8rem;border:1px solid var(--border);border-radius:999px;background:var(--elevated);font-weight:500}.fx-chip-cloud--badges>span{border-radius:var(--radius-md);border-left:3px solid var(--primary)}
.fx-verified{display:grid;grid-template-columns:1fr 1.4fr;gap:var(--pk-space-8);align-items:start}.fx-verified ul,.fx-credential-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin:0;padding:0;list-style:none}.fx-verified li,.fx-credential-list li{display:flex;gap:.5rem;align-items:flex-start;padding:.75rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--elevated)}.fx-verified li .fx-icon,.fx-credential-list .fx-icon{color:var(--success)}.fx-faq details{border-top:1px solid var(--border);padding:1rem 0}.fx-faq summary{cursor:pointer;font-weight:600}.fx-faq details p{max-width:var(--measure);color:var(--muted-foreground)}
.fx-program-profile{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--pk-space-5);align-items:center;margin:var(--pk-space-5) 0;padding:var(--pk-space-5);border:1px solid var(--border);border-radius:var(--radius-lg);background:linear-gradient(120deg,var(--card),var(--elevated))}.fx-rank-emblem--profile{width:4.5rem;height:4.5rem}.fx-program-profile h2,.fx-program-profile p{margin:.2rem 0}.fx-program-profile__main{min-width:0}.fx-credential-list small{display:block;color:var(--muted-foreground)}
.fx-program-badge-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:var(--pk-space-4);margin:var(--pk-space-4) 0 var(--pk-space-6)}
.fx-program-badge{--fx-badge-art-size:5rem;display:grid;grid-template-columns:var(--fx-badge-art-size) minmax(0,1fr);gap:var(--pk-space-4);align-items:center;min-width:0;padding:var(--pk-space-4);border:1px solid var(--border);border-radius:var(--radius-lg);background:linear-gradient(145deg,var(--card),var(--elevated));box-shadow:var(--shadow-sm)}
.fx-program-badge--catalogue{--fx-badge-art-size:7.5rem;min-height:10rem}
.fx-program-badge img,.fx-program-badge__fallback{display:block;width:var(--fx-badge-art-size);height:var(--fx-badge-art-size);object-fit:contain;object-position:center;aspect-ratio:1}
.fx-program-badge--artwork img{filter:drop-shadow(0 .45rem .45rem color-mix(in srgb,var(--foreground) 16%,transparent))}
.fx-program-badge__fallback{display:grid;place-items:center;border:2px solid color-mix(in srgb,var(--pk-brand-green) 72%,var(--border));border-radius:30% 30% 38% 38%;background:linear-gradient(145deg,color-mix(in srgb,var(--pk-brand-green) 12%,var(--card)),var(--card));color:var(--pk-brand-green)}
.fx-program-badge__fallback svg{width:42%;height:42%}
.fx-program-badge__copy{display:grid;justify-items:start;gap:.32rem;min-width:0}.fx-program-badge__copy strong{font-size:1rem;line-height:1.25}.fx-program-badge__copy small{color:var(--muted-foreground);font-size:.7rem;text-transform:uppercase;letter-spacing:.04em}.fx-program-badge__copy>span:not(.fx-program-badge__tier){color:var(--muted-foreground);font-size:.8rem;line-height:1.4}
.fx-program-badge__tier{display:inline-flex;max-width:100%;padding:.24rem .55rem;border:1px solid var(--pk-success-edge);border-radius:var(--radius-pill);color:var(--pk-brand-green-ink);background:var(--pk-brand-green-tint);font:700 .68rem/1.25 var(--font-mono);letter-spacing:.025em}
.fx-program-badge__tier--catalogue{white-space:normal}
.fx-program-badge--annual,.fx-program-badge--historical,.fx-program-badge--special{border-color:color-mix(in srgb,var(--pk-warning) 58%,var(--border))}.fx-program-badge--annual .fx-program-badge__fallback,.fx-program-badge--historical .fx-program-badge__fallback,.fx-program-badge--special .fx-program-badge__fallback{border-color:var(--pk-warning);color:var(--pk-brand-red)}
.fx-program-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--pk-space-3);margin:0 0 var(--pk-space-6)}
.fx-program-nav a{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.15rem .7rem;align-items:center;min-width:0;padding:var(--pk-space-4);border:1px solid var(--border);border-radius:var(--radius-lg);color:var(--foreground);background:var(--card);box-shadow:var(--shadow-sm);text-decoration:none}
.fx-program-nav a:hover{border-color:var(--primary);transform:translateY(-1px)}
.fx-program-nav a>span{grid-row:1/3;display:grid;place-items:center;width:2rem;height:2rem;border-radius:var(--radius-pill);color:var(--primary-foreground);background:var(--primary);font:700 .78rem var(--font-mono)}
.fx-program-nav strong{font-size:.84rem}.fx-program-nav small{overflow:hidden;color:var(--muted-foreground);font-size:.72rem;text-overflow:ellipsis;white-space:nowrap}
.fx-program-start{scroll-margin-top:6rem}.fx-program-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--pk-space-3)}
.fx-program-actions>a{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:var(--pk-space-3);align-items:start;padding:var(--pk-space-4);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--foreground);background:var(--elevated);text-decoration:none}
.fx-program-actions>a:hover{border-color:var(--primary);background:var(--card)}.fx-program-actions>a>.fx-icon{display:grid;width:2.5rem;height:2.5rem;padding:.65rem;border-radius:.7rem;color:var(--primary);background:color-mix(in srgb,var(--primary) 12%,var(--card))}
.fx-program-actions span{display:grid;gap:.25rem}.fx-program-actions strong{font-size:.86rem;line-height:1.3}.fx-program-actions small{color:var(--muted-foreground);line-height:1.4}
.fx-program-me{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--pk-space-5);align-items:center;margin:0 0 var(--pk-space-6);padding:var(--pk-space-5);border:1px solid var(--pk-success-edge);border-radius:var(--radius-lg);background:linear-gradient(120deg,var(--card),color-mix(in srgb,var(--pk-brand-green-tint) 62%,var(--card)));box-shadow:var(--shadow-sm)}
.fx-program-me__main{min-width:0}.fx-program-me h2,.fx-program-me p{margin:.15rem 0}.fx-program-me .fx-rank-emblem{width:4.5rem}.fx-program-me--guest>div:first-child{display:grid;place-items:center;width:4rem;height:4rem;border-radius:var(--radius-pill);color:var(--pk-brand-green-ink);background:var(--pk-brand-green-tint)}.fx-program-me--guest>div:first-child .fx-icon{width:1.6rem}
.fx-contribution-three article a{display:inline-flex;margin-top:var(--pk-space-3);font-size:.78rem;font-weight:700}
.fx-program-trust,.fx-program-recognition{scroll-margin-top:6rem}.fx-program-trust .fx-contribution-grid article{padding:var(--pk-space-4);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--elevated)}.fx-program-trust h3{margin-top:0}.fx-program-trust article p{margin-bottom:0;color:var(--muted-foreground)}
.fx-program-recognition-map{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--pk-space-4)}.fx-program-recognition-map a{display:grid;grid-template-columns:2.7rem minmax(0,1fr);gap:.2rem var(--pk-space-3);align-items:center;padding:var(--pk-space-4);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--foreground);background:var(--elevated);text-decoration:none}.fx-program-recognition-map a:hover{border-color:var(--primary)}.fx-program-recognition-map a>span{grid-row:1/3;display:grid;place-items:center;width:2.7rem;height:2.7rem;border-radius:.7rem;color:var(--pk-brand-green-ink);background:var(--pk-brand-green-tint)}.fx-program-recognition-map .fx-icon{width:1.2rem}.fx-program-recognition-map small{color:var(--muted-foreground);line-height:1.35}
.fx-program-disclosure{scroll-margin-top:6rem;margin:var(--pk-space-5) 0;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);box-shadow:var(--shadow-sm)}
.fx-program-disclosure>summary{display:flex;justify-content:space-between;gap:var(--pk-space-4);align-items:center;padding:var(--pk-space-5);cursor:pointer;list-style:none}.fx-program-disclosure>summary::-webkit-details-marker{display:none}.fx-program-disclosure>summary>span:first-child{display:grid;gap:.25rem}.fx-program-disclosure>summary strong{font-size:1rem}.fx-program-disclosure>summary small{color:var(--muted-foreground);line-height:1.45}.fx-program-disclosure__action{flex:0 0 auto;color:var(--primary-ink);font-size:.76rem;font-weight:700}.fx-program-disclosure__action:after{content:" +"}.fx-program-disclosure[open] .fx-program-disclosure__action:after{content:" −"}
.fx-program-disclosure__body{padding:0 var(--pk-space-5) var(--pk-space-5);border-top:1px solid var(--border)}.fx-program-disclosure__body>.fx-section__head:first-child{margin-top:var(--pk-space-5)}.fx-program-disclosure .fx-program-badge-grid{margin-bottom:var(--pk-space-4)}.fx-program-policy .fx-contribution-grid{margin-top:var(--pk-space-5)}.fx-program-policy section{padding:var(--pk-space-4);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--elevated)}.fx-program-policy section:last-child{grid-column:1/-1}.fx-program-policy section p:last-child{margin-bottom:0;color:var(--muted-foreground)}
.fx-profile-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:var(--pk-space-3);margin:var(--pk-space-5) 0}.fx-profile-facts>div{padding:var(--pk-space-3);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--elevated)}.fx-profile-facts dt{font-size:var(--pk-text-xs);color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.06em}.fx-profile-facts dd{margin:.25rem 0 0;font-weight:700}
.fx-admin-cardgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--pk-space-4)}.fx-admin-rank{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:end;padding:var(--pk-space-4);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--elevated)}.fx-admin-rank label{display:grid;gap:.25rem}.fx-admin-rank .fx-rank-emblem{grid-row:span 2;width:3rem;height:3rem}.fx-admin-inline{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:1rem;align-items:end;margin-top:1rem}
@media(max-width:1050px){.fx-rank-path{grid-template-columns:repeat(11,minmax(7rem,1fr));overflow-x:auto;scroll-snap-type:x proximity}.fx-rank-path li{scroll-snap-align:start}.fx-contribution-dashboard{grid-template-columns:1fr 1fr}.fx-contribution-panel--earn{grid-column:1/-1}.fx-rank-benefits{grid-template-columns:repeat(3,1fr)}.fx-program-nav,.fx-program-actions{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.fx-contribution-hero,.fx-verified{grid-template-columns:1fr}.fx-contribution-hero__visual{min-height:14rem}.fx-contribution-three,.fx-admin-cardgrid{grid-template-columns:1fr 1fr}.fx-admin-inline{grid-template-columns:1fr 1fr}.fx-admin-inline .pk-btn{grid-column:1/-1}.fx-program-profile{grid-template-columns:auto 1fr}.fx-program-profile>a{grid-column:1/-1}.fx-earning-grid,.fx-rank-benefits{grid-template-columns:1fr 1fr}.fx-score-explainer{grid-template-columns:1fr}.fx-metric-card{min-height:0}}
@media(max-width:600px){.fx-contribution-hero{padding:var(--pk-space-6)}.fx-contribution-hero__visual{min-height:12rem}.fx-contribution-hero__visual:before{width:9rem;height:11rem}.fx-contribution-hero__visual .fx-rank-emblem--hero{width:6.5rem}.fx-contribution-hero__visual>div{right:auto;left:0}.fx-contribution-three,.fx-earning-grid,.fx-contribution-grid,.fx-contribution-dashboard,.fx-rank-benefits,.fx-admin-cardgrid,.fx-verified ul,.fx-credential-list,.fx-program-nav,.fx-program-actions,.fx-program-recognition-map{grid-template-columns:1fr}.fx-contribution-panel--earn{grid-column:auto}.fx-earning-featured{grid-template-columns:1fr 1fr}.fx-contribution-hero__actions .pk-btn{width:100%}.fx-program-profile,.fx-program-me{grid-template-columns:1fr}.fx-rank-emblem--profile{width:3.5rem;height:auto}.fx-program-me .fx-rank-emblem{width:3.5rem}.fx-program-me>.pk-btn{width:100%}.fx-admin-inline{grid-template-columns:1fr}.fx-score-policy{padding:var(--pk-space-3)}.fx-program-disclosure>summary{align-items:flex-start;padding:var(--pk-space-4)}.fx-program-disclosure__action{display:none}.fx-program-disclosure__body{padding:0 var(--pk-space-4) var(--pk-space-4)}.fx-program-policy section:last-child{grid-column:auto}}
@media(max-width:600px){.fx-program-badge,.fx-program-badge--catalogue{--fx-badge-art-size:5.5rem;grid-template-columns:var(--fx-badge-art-size) minmax(0,1fr);min-height:0;padding:var(--pk-space-3);gap:var(--pk-space-3)}.fx-program-badge__copy strong{font-size:.92rem}}
@media(prefers-reduced-motion:reduce){.fx-rank-path{scroll-behavior:auto}.fx-rank-path .fx-rank-emblem{transition:none}.fx-rank-path li:hover .fx-rank-emblem{transform:none}}
/* Contribution administration lists and the profile history state (tokens only). */
.fx-admin-list{display:grid;gap:var(--pk-space-2);margin:0;padding:0;list-style:none}.fx-admin-list li{display:flex;flex-wrap:wrap;gap:var(--pk-space-2);align-items:center;padding:var(--pk-space-2) 0;border-bottom:1px solid var(--border)}.fx-inline{display:inline-flex;flex-wrap:wrap;gap:var(--pk-space-1);align-items:center;margin:0}.fx-inline input{min-width:0;max-width:12rem}.fx-activity__row--reversed .fx-activity__title{text-decoration:line-through;color:var(--muted-foreground)}.fx-activity__note{font-size:.8rem;color:var(--muted-foreground)}
/* Contribution administration panels (tokens only; controls use the shared pk-input/pk-select/pk-textarea). */
.fx-admin-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--pk-space-4);margin-bottom:var(--pk-space-6);align-items:start}.fx-admin-panel{min-width:0;padding:var(--pk-space-5);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--elevated);margin-bottom:var(--pk-space-6)}.fx-admin-pair>.fx-admin-panel{margin-bottom:0}.fx-admin-panel>h2,.fx-admin-panel .fx-section__head h2{margin:0 0 var(--pk-space-3);font-size:1.125rem}.fx-admin-panel .pk-form{display:grid;gap:var(--pk-space-3)}.fx-admin-panel .pk-form label{display:grid;gap:var(--pk-space-1);font-size:.875rem;font-weight:600}.fx-admin-panel .pk-form label:has(input[type=checkbox]){display:flex;align-items:center;gap:var(--pk-space-2)}.fx-form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--pk-space-3);align-items:end}.fx-statstrip--admin{margin-bottom:var(--pk-space-6)}
@media(max-width:900px){.fx-admin-pair,.fx-form-row{grid-template-columns:minmax(0,1fr)}}

/* Member discovery and profile — spacious, evidence-led community surfaces. */
.fx-body--members .fx-main,.fx-body--member-profile .fx-main{padding-top:var(--pk-space-5)}
.fx-members-hero--directory{grid-template-columns:minmax(0,1.15fr) minmax(19rem,.85fr);min-height:29rem;padding:clamp(1.6rem,4vw,3.6rem);background:linear-gradient(118deg,rgb(4 16 27),rgb(9 39 49) 55%,rgb(11 73 55))}
.fx-members-hero--directory:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgb(255 255 255/.035) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255/.035) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(90deg,transparent 18%,rgb(0 0 0));pointer-events:none}
.fx-members-hero__copy{max-width:46rem}.fx-members-hero__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin:var(--pk-space-5) 0}.fx-members-hero__actions .pk-btn--secondary{border-color:rgb(255 255 255/.35);color:rgb(255 255 255);background:rgb(255 255 255/.08);backdrop-filter:blur(10px)}
.fx-members-hero__stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;overflow:hidden;margin:var(--pk-space-6) 0 0;border:1px solid rgb(255 255 255/.14);border-radius:var(--radius-md);background:rgb(255 255 255/.14)}
.fx-members-hero__stats div{display:flex;min-width:0;flex-direction:column-reverse;padding:.75rem;background:rgb(3 15 24/.52)}.fx-members-hero__stats dt{color:rgb(255 255 255/.62);font-size:.68rem;line-height:1.3}.fx-members-hero__stats dd{margin:0;color:rgb(255 255 255);font-size:clamp(1rem,2vw,1.35rem);font-weight:800;font-variant-numeric:tabular-nums}
.fx-member-journey{position:relative;z-index:2;padding:clamp(1rem,2.5vw,1.5rem);border:1px solid rgb(255 255 255/.16);border-radius:var(--radius-lg);background:rgb(3 14 22/.7);box-shadow:0 24px 60px rgb(0 0 0/.24);backdrop-filter:blur(16px)}.fx-member-journey h2{margin:.3rem 0 1rem;color:rgb(255 255 255);font-size:clamp(1.25rem,2vw,1.65rem)}.fx-member-journey ol{display:grid;gap:.55rem;margin:0;padding:0;list-style:none}
.fx-member-journey a{position:relative;display:grid;grid-template-columns:2.35rem minmax(0,1fr);gap:.1rem .7rem;min-height:4.15rem;padding:.7rem;border:1px solid transparent;border-radius:var(--radius-md);color:rgb(255 255 255/.68);text-decoration:none;transition:transform .2s var(--pk-ease),border-color .2s var(--pk-ease),background .2s var(--pk-ease)}.fx-member-journey a>span{grid-row:1/3;display:grid;place-items:center;width:2.35rem;height:2.35rem;border:1px solid rgb(255 255 255/.2);border-radius:50%;font:700 .7rem var(--font-mono)}.fx-member-journey a strong{align-self:end;color:rgb(255 255 255)}.fx-member-journey a small{font-size:.72rem}.fx-member-journey a.is-active{border-color:rgb(89 207 151/.55);background:rgb(38 166 111/.13);transform:translateX(-.35rem)}.fx-member-journey a.is-active>span{border-color:rgb(89 207 151);color:rgb(255 255 255);background:rgb(17 126 82);box-shadow:0 0 0 .3rem rgb(89 207 151/.08)}.fx-member-journey__status{min-height:3.1rem;margin:1rem 0 0;padding:.75rem 0 0;border-top:1px solid rgb(255 255 255/.12);color:rgb(255 255 255/.68);font-size:.78rem;line-height:1.45}
.fx-member-directory{scroll-margin-top:6rem}.fx-member-directory__intro{display:flex;justify-content:space-between;gap:var(--pk-space-5);align-items:end;margin:var(--pk-space-7) 0 var(--pk-space-4)}.fx-member-directory__intro h2{margin:.15rem 0;font-size:clamp(1.5rem,3vw,2.25rem)}.fx-member-directory__intro p:last-child{max-width:54rem;margin:.25rem 0;color:var(--muted-foreground)}
.fx-body--members .fx-member-tools{grid-template-columns:minmax(18rem,1fr) auto;align-items:end;padding:var(--pk-space-4);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.fx-body--members .fx-member-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.4rem .65rem}.fx-body--members .fx-member-search>label{grid-column:1/-1;color:var(--foreground);font-size:.75rem;font-weight:700}.fx-member-search__field{display:flex;align-items:center;gap:.5rem;min-width:0;min-height:2.75rem;padding:0 .75rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--elevated)}.fx-member-search__field .fx-icon{flex:none;color:var(--muted-foreground)}.fx-body--members .fx-member-search__field input{min-height:2.6rem}.fx-body--members .fx-seg{align-self:end}
.fx-body--members .fx-member-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--pk-space-5)}.fx-body--members .fx-member-card{box-shadow:var(--shadow-sm)}.fx-body--members .fx-member-card__cover{height:4rem}.fx-body--members .fx-member-card__body{padding-top:.35rem}.fx-body--members .fx-member-card__stats{margin:var(--pk-space-3) 0}.fx-body--members .fx-member-card__link{padding-top:var(--pk-space-2);border-top:1px solid var(--border)}

.fx-body--member-profile .fx-profile-hero{min-height:20rem;margin-bottom:var(--pk-space-4);border:0;box-shadow:0 28px 70px rgb(3 15 24/.22)}.fx-body--member-profile .fx-profile-hero__cover:after{content:"";position:absolute;right:-7rem;bottom:-12rem;width:34rem;height:34rem;border:1px solid rgb(255 255 255/.12);border-radius:50%;box-shadow:0 0 0 4rem rgb(255 255 255/.025),0 0 0 8rem rgb(255 255 255/.018);animation:fx-profile-orbit 18s linear infinite}.fx-body--member-profile .fx-profile-hero__body{min-height:20rem}.fx-body--member-profile .fx-program-profile{position:relative;overflow:hidden;margin:0 0 var(--pk-space-4);border-top:3px solid var(--primary);box-shadow:var(--shadow-sm)}.fx-body--member-profile .fx-program-profile:after{content:"";position:absolute;right:-2.5rem;top:-2.5rem;width:8rem;height:8rem;border-radius:50%;background:color-mix(in srgb,var(--success) 8%,transparent);pointer-events:none}
.fx-body--member-profile .fx-statstrip--profile{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:var(--pk-space-2)}.fx-body--member-profile .fx-statstrip--profile .fx-statstrip__item{min-height:5.6rem}
.fx-profile-signals{margin:0 0 var(--pk-space-5);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--card)}.fx-profile-signals>summary{display:flex;justify-content:space-between;gap:var(--pk-space-3);padding:.8rem 1rem;cursor:pointer;color:var(--foreground);font-size:.8rem;font-weight:700}.fx-profile-signals>summary span{color:var(--muted-foreground);font-weight:400}.fx-profile-signals dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:0;border-top:1px solid var(--border);background:var(--border)}.fx-profile-signals dl>div{display:flex;justify-content:space-between;gap:.5rem;padding:.75rem;background:var(--elevated)}.fx-profile-signals dt{color:var(--muted-foreground);font-size:.72rem}.fx-profile-signals dd{margin:0;font-weight:800}
.fx-body--member-profile .fx-profile{grid-template-columns:minmax(0,1.55fr) minmax(19rem,.75fr);align-items:start;gap:var(--pk-space-5)}.fx-body--member-profile .fx-profile__main{display:grid;gap:var(--pk-space-5)}.fx-body--member-profile .fx-profile__main>.fx-section,.fx-body--member-profile .fx-profile__main>section[aria-labelledby="fx-activity"]{margin:0;padding:var(--pk-space-5);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);box-shadow:var(--shadow-sm);animation:fx-card-in .5s var(--pk-ease) both}.fx-body--member-profile .fx-section__head{margin-bottom:var(--pk-space-4)}
.fx-profile-standing__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--pk-space-4)}.fx-profile-standing__grid>div{min-width:0}.fx-profile-standing__grid h3{display:flex;align-items:center;gap:.45rem;margin:0 0 var(--pk-space-3);font-size:.9rem}.fx-profile-standing__grid h3>.fx-icon{width:1rem;color:var(--success)}.fx-profile-standing .fx-credential-list{grid-template-columns:1fr}
.fx-profile-rail{position:sticky;top:7rem;overflow:hidden;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);animation:fx-card-in .55s var(--pk-ease) .12s both}.fx-profile-rail>.fx-panel__head{padding:var(--pk-space-5);background:linear-gradient(135deg,color-mix(in srgb,var(--pk-brand-green-tint) 72%,var(--card)),var(--card))}.fx-profile-rail>.fx-panel__body{padding:0 var(--pk-space-5) var(--pk-space-5)}.fx-profile-rail__section{padding:var(--pk-space-5) 0;border-bottom:1px solid var(--border)}.fx-profile-rail__section h3{margin:0 0 var(--pk-space-3);font-size:.85rem}.fx-profile-rail .fx-areas{margin:0 0 var(--pk-space-3)}.fx-profile-rail__badges{display:grid;gap:.65rem}.fx-profile-rail .fx-program-badge--rail{--fx-badge-art-size:3.75rem;gap:.7rem;padding:.7rem;border-radius:var(--radius-md);box-shadow:none}.fx-profile-rail .fx-program-badge__copy{gap:.18rem}.fx-profile-rail .fx-program-badge__copy strong{font-size:.82rem}.fx-profile-rail .fx-program-badge__copy small{font-size:.58rem}.fx-profile-rail .fx-program-badge__copy>span:not(.fx-program-badge__tier){display:none}.fx-profile-rail .fx-program-badge__tier{padding:.15rem .4rem;font-size:.58rem}.fx-profile-rail__guide{display:flex;justify-content:space-between;gap:.5rem;align-items:center;padding-top:var(--pk-space-4);font-size:.78rem;font-weight:700;text-decoration:none}.fx-profile-rail__guide .fx-icon{width:1rem}
.fx-private-history{border-color:color-mix(in srgb,var(--success) 32%,var(--border))!important;background:linear-gradient(135deg,var(--card),color-mix(in srgb,var(--pk-brand-green-tint) 45%,var(--card)))!important}.fx-private-history__label{padding:.22rem .5rem;border-radius:var(--radius-pill);color:var(--pk-brand-green-ink);background:var(--pk-brand-green-tint);font-size:.65rem;font-weight:700}
@keyframes fx-profile-orbit{to{transform:rotate(360deg)}}
@keyframes fx-member-pulse{50%{box-shadow:0 0 0 .55rem rgb(89 207 151/.03)}}
@media(min-width:62rem){.fx-member-journey a.is-active:after{content:"";position:absolute;right:-.45rem;top:50%;width:.55rem;height:.55rem;border-radius:50%;background:rgb(89 207 151);box-shadow:0 0 0 .35rem rgb(89 207 151/.12);transform:translateY(-50%);animation:fx-member-pulse 1.8s ease-in-out infinite}}
@media(max-width:70rem){.fx-body--members .fx-member-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fx-body--member-profile .fx-profile{grid-template-columns:minmax(0,1.35fr) minmax(17rem,.65fr)}}
@media(max-width:56rem){.fx-members-hero--directory{grid-template-columns:1fr}.fx-member-journey{max-width:42rem}.fx-body--members .fx-member-tools,.fx-body--member-profile .fx-profile{grid-template-columns:1fr}.fx-profile-rail{position:static}.fx-body--member-profile .fx-statstrip--profile{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:40rem){.fx-members-hero--directory{min-height:0;padding:var(--pk-space-5)}.fx-members-hero__actions .pk-btn{width:100%}.fx-members-hero__stats{grid-template-columns:repeat(2,minmax(0,1fr))}.fx-member-journey a.is-active{transform:none}.fx-body--members .fx-member-grid{grid-template-columns:1fr}.fx-body--members .fx-member-search{grid-template-columns:1fr}.fx-body--members .fx-member-search .pk-btn{width:100%}.fx-body--members .fx-seg{overflow-x:auto}.fx-body--member-profile .fx-statstrip--profile{grid-template-columns:repeat(2,minmax(0,1fr))}.fx-profile-signals>summary{display:grid}.fx-profile-signals dl,.fx-profile-standing__grid{grid-template-columns:1fr}.fx-body--member-profile .fx-profile__main>.fx-section,.fx-body--member-profile .fx-profile__main>section[aria-labelledby="fx-activity"]{padding:var(--pk-space-4)}.fx-profile-rail>.fx-panel__head,.fx-profile-rail>.fx-panel__body{padding-left:var(--pk-space-4);padding-right:var(--pk-space-4)}}
@media(prefers-reduced-motion:reduce){.fx-member-journey a,.fx-body--member-profile .fx-profile-hero__cover:after{animation:none!important;transition:none!important}}

/* Contribution administration workspace — task-led, progressively disclosed,
   and built entirely from the forum's existing semantic colour tokens. */
.fx-contrib-admin-intro{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(17rem,.6fr);gap:var(--pk-space-6);align-items:center;margin:0 0 var(--pk-space-5);padding:clamp(1.25rem,3vw,2rem);overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-lg);background:linear-gradient(125deg,var(--card),color-mix(in srgb,var(--pk-brand-green-tint) 55%,var(--card)));box-shadow:var(--shadow-sm)}
.fx-contrib-admin-intro h2{margin:.2rem 0 .5rem;font-size:clamp(1.45rem,2.4vw,2rem)}
.fx-contrib-admin-intro p{max-width:62ch;margin:.25rem 0;color:var(--muted-foreground)}
.fx-contrib-admin-intro__guardrails{display:grid;gap:.45rem;padding:var(--pk-space-4);border:1px solid var(--pk-success-edge);border-radius:var(--radius-md);background:color-mix(in srgb,var(--pk-brand-green-tint) 65%,var(--card));font-size:.8rem}
.fx-contrib-admin-intro__guardrails strong{color:var(--pk-brand-green-ink);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em}
.fx-contrib-admin-intro__guardrails span{position:relative;padding-left:1.1rem;color:var(--foreground)}
.fx-contrib-admin-intro__guardrails span:before{content:"✓";position:absolute;left:0;color:var(--success);font-weight:800}

.fx-admin-tasknav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--pk-space-3);margin-bottom:var(--pk-space-5)}
.fx-admin-tasknav a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.15rem .65rem;align-content:start;min-height:5.7rem;padding:var(--pk-space-3);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--foreground);background:var(--card);box-shadow:var(--shadow-sm);text-decoration:none;transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}
.fx-admin-tasknav a:hover,.fx-admin-tasknav a:focus-visible{border-color:var(--primary);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.fx-admin-tasknav__number{grid-row:1/3;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;color:rgb(255 255 255);background:var(--primary);font:700 .8rem var(--font-mono)}
.fx-admin-tasknav strong{align-self:end;font-size:.88rem}.fx-admin-tasknav small{color:var(--muted-foreground);font-size:.72rem;line-height:1.35}
.fx-statstrip--admin{grid-template-columns:repeat(5,minmax(0,1fr))}

.fx-admin-workstream{scroll-margin-top:6rem;margin:0 0 var(--pk-space-8);padding-top:var(--pk-space-2)}
.fx-admin-workstream__head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--pk-space-3);align-items:start;margin-bottom:var(--pk-space-4);padding-bottom:var(--pk-space-3);border-bottom:1px solid var(--border)}
.fx-admin-workstream__step{display:grid;place-items:center;width:2.65rem;height:2.65rem;border-radius:var(--radius-md);color:rgb(255 255 255);background:linear-gradient(145deg,var(--primary),color-mix(in srgb,var(--primary) 72%,rgb(0 0 0)));box-shadow:var(--shadow-sm);font:800 1rem var(--font-mono)}
.fx-admin-workstream__head h2{margin:.05rem 0 .3rem;font-size:1.35rem}.fx-admin-workstream__head p{max-width:72ch;margin:0;color:var(--muted-foreground)}.fx-admin-workstream__head .fx-eyebrow{margin-bottom:.1rem;color:var(--primary-ink)}

.fx-admin-workstream .fx-admin-pair{margin-bottom:var(--pk-space-4)}
.fx-admin-workstream .fx-admin-panel{margin-bottom:var(--pk-space-4);border-radius:var(--radius-lg);background:var(--card);box-shadow:var(--shadow-sm)}
.fx-admin-workstream .fx-admin-pair>.fx-admin-panel{height:100%;margin-bottom:0}
.fx-admin-panel--caution{border-top:3px solid var(--pk-warning)!important}
.fx-admin-panel--wide{margin-bottom:0!important}
.fx-admin-panel__head{margin-bottom:var(--pk-space-4);padding-bottom:var(--pk-space-3);border-bottom:1px solid var(--border)}
.fx-admin-panel__head h3{margin:.35rem 0;font-size:1.08rem}.fx-admin-panel__head p{max-width:65ch;margin:0;color:var(--muted-foreground);font-size:.82rem;line-height:1.55}
.fx-admin-panel__tag{display:inline-flex;padding:.2rem .5rem;border:1px solid var(--pk-success-edge);border-radius:var(--radius-pill);color:var(--pk-brand-green-ink);background:var(--pk-brand-green-tint);font:700 .65rem var(--font-mono);letter-spacing:.04em;text-transform:uppercase}
.fx-admin-panel--caution .fx-admin-panel__tag{border-color:color-mix(in srgb,var(--pk-warning) 55%,var(--border));color:var(--foreground);background:color-mix(in srgb,var(--pk-warning) 14%,var(--card))}
.fx-field-help{color:var(--muted-foreground);font-size:.7rem;font-weight:400}
.fx-admin-steps{display:grid;gap:.35rem;margin:0 0 var(--pk-space-4);padding:0;list-style:none;counter-reset:admin-step}
.fx-admin-steps li{position:relative;padding-left:1.7rem;color:var(--muted-foreground);font-size:.78rem;counter-increment:admin-step}
.fx-admin-steps li:before{content:counter(admin-step);position:absolute;left:0;top:.03rem;display:grid;place-items:center;width:1.15rem;height:1.15rem;border-radius:50%;color:var(--primary-ink);background:var(--pk-brand-red-tint);font:700 .62rem var(--font-mono)}
.fx-admin-result{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.55rem;margin-top:var(--pk-space-3);padding:.65rem .75rem;border-left:3px solid var(--success);border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:var(--elevated);font-size:.75rem}
.fx-admin-result strong{color:var(--pk-brand-green-ink);text-transform:uppercase;letter-spacing:.04em}.fx-admin-result span{color:var(--muted-foreground)}
.fx-admin-form--compact{grid-template-columns:minmax(10rem,.7fr) minmax(13rem,1fr) minmax(16rem,1.2fr)!important;align-items:end}.fx-admin-form--compact>label:nth-of-type(3){grid-row:span 2}.fx-admin-form--compact textarea{min-height:7.2rem}.fx-form-actions{display:flex;flex-wrap:wrap;gap:var(--pk-space-2)}

.fx-admin-callout{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.65rem;margin:0 0 var(--pk-space-4);padding:.75rem 1rem;border:1px solid var(--pk-success-edge);border-radius:var(--radius-md);background:var(--pk-brand-green-tint);font-size:.78rem}.fx-admin-callout strong{color:var(--pk-brand-green-ink)}.fx-admin-callout span{color:var(--foreground)}
.fx-admin-callout--warning{border-color:color-mix(in srgb,var(--pk-warning) 55%,var(--border));background:color-mix(in srgb,var(--pk-warning) 12%,var(--card))}.fx-admin-callout--warning strong{color:var(--foreground)}
.fx-admin-empty{display:grid;justify-items:center;gap:.25rem;padding:var(--pk-space-6);border:1px dashed var(--border);border-radius:var(--radius-md);color:var(--muted-foreground);text-align:center}.fx-admin-empty strong{color:var(--foreground)}
.fx-admin-record{display:grid;gap:.15rem;min-width:12rem;flex:1 1 14rem}.fx-admin-record>span{color:var(--muted-foreground);font-size:.75rem}
.fx-admin-list--records li{align-items:flex-start;padding:var(--pk-space-3);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--elevated)}
.fx-admin-list--records .fx-inline{flex:1 1 100%}.fx-admin-list--records .fx-inline .pk-input{flex:1 1 10rem;max-width:none}
.fx-admin-panel--queue{display:block;height:auto!important;padding:0!important;overflow:clip}
.fx-admin-panel--queue>summary{display:flex;align-items:center;min-height:7rem;padding:var(--pk-space-5);cursor:pointer;list-style:none}.fx-admin-panel--queue>summary::-webkit-details-marker{display:none}.fx-admin-panel--queue>summary>span{display:grid;gap:.35rem;min-width:0}.fx-admin-panel--queue>summary strong{font-size:1.08rem}.fx-admin-panel--queue>summary small{color:var(--muted-foreground)}.fx-admin-panel--queue>summary:after{content:"+";display:grid;place-items:center;width:1.8rem;height:1.8rem;margin-left:auto;border:1px solid var(--border);border-radius:50%;color:var(--primary-ink);font-size:1.2rem}.fx-admin-panel--queue[open]>summary:after{content:"−"}.fx-admin-panel--queue>summary:hover,.fx-admin-panel--queue>summary:focus-visible{background:var(--elevated)}.fx-admin-panel--queue>p,.fx-admin-panel--queue>.fx-admin-list,.fx-admin-panel--queue>.fx-admin-empty{margin-right:var(--pk-space-5);margin-left:var(--pk-space-5)}.fx-admin-panel--queue>p{color:var(--muted-foreground);font-size:.82rem}.fx-admin-panel--queue>.fx-admin-list,.fx-admin-panel--queue>.fx-admin-empty{margin-bottom:var(--pk-space-5)}

.fx-admin-disclosure{margin:0 0 var(--pk-space-3);overflow:clip;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);box-shadow:var(--shadow-sm)}
.fx-admin-disclosure>summary{display:flex;justify-content:space-between;gap:var(--pk-space-4);align-items:center;padding:var(--pk-space-4) var(--pk-space-5);cursor:pointer;list-style:none}.fx-admin-disclosure>summary::-webkit-details-marker{display:none}.fx-admin-disclosure>summary:after{content:"+";display:grid;place-items:center;width:1.7rem;height:1.7rem;flex:0 0 auto;border:1px solid var(--border);border-radius:50%;color:var(--primary-ink);font-size:1.15rem}.fx-admin-disclosure[open]>summary:after{content:"−"}.fx-admin-disclosure>summary:hover,.fx-admin-disclosure>summary:focus-visible{background:var(--elevated)}
.fx-admin-disclosure>summary>span:first-child{display:grid;gap:.15rem;min-width:0;flex:1}.fx-admin-disclosure>summary small{color:var(--muted-foreground);font-weight:400}.fx-admin-disclosure__count{margin-left:auto;padding:.2rem .5rem;border-radius:var(--radius-pill);color:var(--muted-foreground);background:var(--elevated);font:600 .68rem var(--font-mono);white-space:nowrap}.fx-admin-disclosure__body{padding:0 var(--pk-space-5) var(--pk-space-5);border-top:1px solid var(--border)}.fx-admin-disclosure__body>p{max-width:78ch;color:var(--muted-foreground);font-size:.82rem}
.fx-admin-nested{margin-top:var(--pk-space-4);padding:var(--pk-space-3);border:1px dashed var(--border);border-radius:var(--radius-md);background:var(--elevated)}.fx-admin-nested>summary{cursor:pointer;font-weight:700}.fx-admin-nested[open]>summary{margin-bottom:var(--pk-space-3)}
.fx-admin-leaderboard{display:grid;gap:.4rem;margin:0;padding:0;list-style:none}.fx-admin-leaderboard li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.65rem;align-items:center;padding:.55rem .7rem;border-radius:var(--radius-sm);background:var(--elevated);font-size:.8rem}.fx-admin-leaderboard__place{display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;color:var(--primary-ink);background:var(--pk-brand-red-tint);font:700 .65rem var(--font-mono)}.fx-admin-leaderboard li>span:last-child{color:var(--muted-foreground);font-family:var(--font-mono)}

/* Legacy reputation audit — the old f003 data remains available without
   competing visually with the current contribution programme. */
.fx-legacy-admin-intro{align-items:stretch}.fx-admin-guardrails{display:grid;gap:.4rem;margin:var(--pk-space-4) 0 0;padding:0;list-style:none}.fx-admin-guardrails li{position:relative;padding-left:1.25rem;color:var(--foreground);font-size:.8rem}.fx-admin-guardrails li:before{content:"✓";position:absolute;left:0;color:var(--success);font-weight:800}
.fx-admin-principle{display:grid;align-content:center;gap:.45rem;padding:var(--pk-space-5);border:1px solid color-mix(in srgb,var(--pk-warning) 50%,var(--border));border-radius:var(--radius-md);background:color-mix(in srgb,var(--pk-warning) 9%,var(--card))}.fx-admin-principle__icon{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;color:var(--primary-ink);background:var(--pk-brand-red-tint)}.fx-admin-principle__icon svg{width:1.2rem;height:1.2rem}.fx-admin-principle strong{font-size:1rem}.fx-admin-principle p{margin:0!important;font-size:.8rem;line-height:1.55}
.fx-legacy-scopegrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--pk-space-4)}.fx-legacy-scopecard{display:flex;flex-direction:column;height:100%;margin:0!important}.fx-legacy-scopecard--current{border-top:3px solid var(--success)!important}.fx-legacy-scopecard>.pk-btn{align-self:flex-start;margin-top:auto}.fx-statstrip--compact{grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 var(--pk-space-4)}.fx-statstrip--compact .fx-statstrip__item{padding:var(--pk-space-3)}.fx-statstrip--compact .fx-statstrip__item dd{font-size:1.15rem}
.fx-legacy-health__head{display:flex;justify-content:space-between;gap:var(--pk-space-4);align-items:center;margin-bottom:var(--pk-space-4)}.fx-legacy-health__head h3{margin:.45rem 0 0;font-size:1.15rem}.fx-legacy-health__signal{width:1rem;height:1rem;flex:0 0 auto;border-radius:50%;box-shadow:0 0 0 .35rem var(--elevated)}.fx-legacy-health__signal.is-healthy{background:var(--success)}.fx-legacy-health__signal.is-warning{background:var(--pk-warning)}.fx-legacy-health .fx-statstrip--admin{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:var(--pk-space-4)}
.fx-legacy-filters{margin-bottom:var(--pk-space-4)}.fx-legacy-filters .fx-admintools__row{display:grid;grid-template-columns:minmax(12rem,.7fr) minmax(15rem,1fr) auto auto;gap:var(--pk-space-3);align-items:end}.fx-legacy-filters label{display:grid;gap:var(--pk-space-1);font-size:.8rem;font-weight:700}.fx-legacy-filters .pk-btn{min-height:2.65rem}.fx-legacy-filters .fx-admintools__clear{align-self:center;margin-top:1.25rem}.fx-legacy-ledger{margin-bottom:var(--pk-space-4)}.fx-legacy-ledger .fx-pager{margin-bottom:0}
.fx-users-admin-intro{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(17rem,.65fr);gap:var(--pk-space-6);align-items:center;margin-bottom:var(--pk-space-5);padding:clamp(1.25rem,3vw,2rem);border:1px solid var(--border);border-radius:var(--radius-lg);background:linear-gradient(125deg,var(--card),color-mix(in srgb,var(--pk-brand-green-tint) 55%,var(--card)));box-shadow:var(--shadow-sm)}.fx-users-admin-intro h2{margin:.2rem 0 .5rem;font-size:clamp(1.45rem,2.4vw,2rem)}.fx-users-admin-intro p{max-width:62ch;margin:.25rem 0;color:var(--muted-foreground)}.fx-users-admin-intro aside{display:grid;gap:.45rem;padding:var(--pk-space-4);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--elevated)}.fx-users-admin-intro aside strong{margin-bottom:.15rem;color:var(--primary-ink);font-size:.76rem;text-transform:uppercase;letter-spacing:.05em}.fx-users-admin-intro aside span{position:relative;padding-left:1.1rem;font-size:.8rem}.fx-users-admin-intro aside span:before{content:"→";position:absolute;left:0;color:var(--muted-foreground)}
.fx-admin-tasknav--three{grid-template-columns:repeat(3,minmax(0,1fr))}.fx-users-role-guide{scroll-margin-top:6rem;margin-bottom:var(--pk-space-5);padding:var(--pk-space-5);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);box-shadow:var(--shadow-sm)}.fx-users-role-guide .fx-rolekey{margin:0}.fx-users-role-guide .fx-section__head{margin-bottom:var(--pk-space-4)}
.fx-users-directory{scroll-margin-top:6rem}.fx-users-stats{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:var(--pk-space-4)}.fx-users-search{scroll-margin-top:6rem;max-width:52rem;margin-bottom:var(--pk-space-4)}.fx-users-directory .fx-table--cards{table-layout:fixed;min-width:68rem}.fx-users-directory .fx-table--cards th:nth-child(1){width:16%}.fx-users-directory .fx-table--cards th:nth-child(2){width:10%}.fx-users-directory .fx-table--cards th:nth-child(3){width:16%}.fx-users-directory .fx-table--cards th:nth-child(4){width:10%}.fx-users-directory .fx-table--cards th:nth-child(5){width:11%}.fx-users-directory .fx-table--cards th:nth-child(6){width:37%}
.fx-user-controls{width:100%;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--card)}.fx-user-controls>summary{display:flex;justify-content:space-between;gap:var(--pk-space-3);align-items:center;padding:.65rem .75rem;cursor:pointer;list-style:none}.fx-user-controls>summary::-webkit-details-marker{display:none}.fx-user-controls>summary span{font-weight:700}.fx-user-controls>summary small{color:var(--muted-foreground)}.fx-user-controls>summary:after{content:"+";color:var(--primary);font-weight:800}.fx-user-controls[open]>summary:after{content:"−"}.fx-user-controls__body{display:grid;gap:var(--pk-space-3);padding:var(--pk-space-3);border-top:1px solid var(--border)}.fx-user-controls__body section{display:grid;grid-template-columns:1fr;gap:var(--pk-space-3);align-items:end;padding:var(--pk-space-3);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--elevated)}.fx-user-controls__body h3{margin:0 0 .2rem;font-size:.9rem}.fx-user-controls__body section p{margin:0;color:var(--muted-foreground);font-size:.76rem;line-height:1.4}.fx-user-controls .fx-rowform{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--pk-space-2);align-items:end}.fx-user-controls .fx-rowform label{display:grid;gap:.25rem;min-width:0;font-size:.75rem;font-weight:700}.fx-user-controls .fx-rowform label small{color:var(--muted-foreground);font-weight:400}.fx-user-controls .fx-rowform .pk-select{width:100%;min-width:0}.fx-user-controls .fx-rowform--danger{grid-template-columns:6.5rem minmax(0,1fr);padding-top:0;border-top:0}.fx-user-controls .fx-rowform--danger .pk-btn{grid-column:1/-1;width:100%}.fx-user-controls .fx-rowform__days,.fx-user-controls .fx-rowform__reason{width:100%;min-width:0}.fx-user-controls__audit{display:flex;gap:.45rem;align-items:center;margin:0;color:var(--muted-foreground);font-size:.74rem}.fx-user-controls__audit .fx-icon{width:1rem}.fx-self-guard{display:flex;gap:.6rem;align-items:flex-start;padding:.65rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--elevated)}.fx-self-guard>.fx-icon{flex:0 0 auto;width:1rem;color:var(--primary)}.fx-self-guard span{display:grid;gap:.15rem}.fx-self-guard small{color:var(--muted-foreground);line-height:1.35}

@media(max-width:1050px){.fx-admin-tasknav{grid-template-columns:repeat(2,minmax(0,1fr))}.fx-admin-form--compact{grid-template-columns:repeat(2,minmax(0,1fr))!important}.fx-admin-form--compact>label:nth-of-type(3){grid-row:auto}.fx-admin-form--compact>.fx-form-actions{grid-column:1/-1}}
@media(max-width:760px){.fx-contrib-admin-intro,.fx-users-admin-intro,.fx-legacy-scopegrid{grid-template-columns:1fr}.fx-admin-tasknav{grid-template-columns:1fr 1fr}.fx-admin-callout{grid-template-columns:1fr}.fx-admin-disclosure>summary{align-items:flex-start;padding:var(--pk-space-3)}.fx-admin-disclosure__count{display:none}.fx-admin-disclosure__body{padding:0 var(--pk-space-3) var(--pk-space-3)}.fx-legacy-filters .fx-admintools__row{grid-template-columns:1fr 1fr}.fx-legacy-filters .pk-btn{width:100%}.fx-legacy-filters .fx-admintools__clear{align-self:center;margin:0}.fx-legacy-health .fx-statstrip--admin{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.fx-statstrip--admin{grid-template-columns:repeat(2,minmax(0,1fr))}.fx-statstrip--admin .fx-statstrip__item:last-child{grid-column:1/-1}.fx-legacy-health .fx-statstrip--admin .fx-statstrip__item:last-child{grid-column:auto}}
@media(max-width:520px){.fx-admin-tasknav,.fx-admin-form--compact{grid-template-columns:1fr!important}.fx-admin-tasknav a{min-height:0}.fx-admin-form--compact>.fx-form-actions{grid-column:auto}.fx-form-actions .pk-btn{width:100%}.fx-admin-workstream__head{grid-template-columns:1fr}.fx-admin-workstream__step{width:2.25rem;height:2.25rem}.fx-admin-panel{padding:var(--pk-space-4)}.fx-admin-panel--queue>summary{min-height:0;padding:var(--pk-space-4)}.fx-admin-panel--queue>p,.fx-admin-panel--queue>.fx-admin-list,.fx-admin-panel--queue>.fx-admin-empty{margin-right:var(--pk-space-4);margin-left:var(--pk-space-4)}.fx-admin-result{grid-template-columns:1fr}.fx-admin-disclosure>summary{gap:var(--pk-space-2)}.fx-admin-list--records .fx-inline{display:grid;grid-template-columns:1fr 1fr;width:100%}.fx-admin-list--records .fx-inline .pk-input{grid-column:1/-1}.fx-admin-rank{grid-template-columns:1fr;align-items:start}.fx-admin-rank .fx-rank-emblem{grid-row:auto;width:3.5rem}.fx-admin-rank .pk-btn{width:100%}.fx-legacy-filters .fx-admintools__row{grid-template-columns:1fr}.fx-legacy-filters .fx-admintools__clear{justify-self:start}.fx-statstrip--compact{grid-template-columns:1fr 1fr}.fx-statstrip--compact .fx-statstrip__item:last-child{grid-column:1/-1}.fx-users-stats .fx-statstrip__item:last-child{grid-column:auto}.fx-user-controls>summary{align-items:flex-start}.fx-user-controls>summary small{display:none}.fx-user-controls__body section{grid-template-columns:1fr}.fx-user-controls .fx-rowform,.fx-user-controls .fx-rowform--danger{grid-template-columns:1fr}.fx-user-controls .pk-btn{width:100%}}
@media(max-width:47.99rem){.fx-users-directory .fx-table--cards{min-width:0;table-layout:auto}}