/* =============================================================================
   Bluefin "Open Market" layer  (WS3 home rebuild; generalized in WS4 / W0)
   -----------------------------------------------------------------------------
   A modern, photo-forward marketplace look. Everything is scoped under
   :is(.bf-home, .bf-om): the homepage opts in with class="bf-home", and any other page
   opts in with <main class="bf-shell__main bf-om"> (the WS4 per-page rollout). Pages
   without the scope keep the plain .bf-scope system untouched. Net-new components use
   bf-om-* class names; the PHP-generated category cards (.bf-category-card) and featured
   / recently-viewed carousels (.bf-carousel__*) are restyled in place via the same scope.

   Brand colors are referenced through the --bf-brand-* / --bf-color-* tokens (and
   color-mix on those tokens) so a storefront recolors the whole home page by
   overriding only its brand tokens. No hard-coded brand hex.

   Loaded after components.css/layout.css and before the legacy hozi stylesheets.
   No em dash (U+2014) anywhere (CI style guard).
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Open Market scope: fonts, canvas, link discipline
   --------------------------------------------------------------------------- */
:is(.bf-home, .bf-om) {
  --bf-om-font-display: "Bricolage Grotesque", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bf-om-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Cooler canvas tone for the home page only (scoped redefine of the alt surface). */
  --bf-color-surface-alt: #f5f7fa;
  /* Derive the home page's interactive + text colors from the CONFIGURED
     storefront brand (STORE_PRIMARY_COLOR -> --bf-brand-primary, and
     --bf-brand-accent), so each site recolors the whole look from its own brand
     instead of a baked-in palette. color-mix darkens the brand toward ink so the
     derived colors stay readable on light surfaces. */
  --bf-color-primary-hover: color-mix(in srgb, var(--bf-brand-primary) 78%, #000);
  --bf-color-primary-text: color-mix(in srgb, var(--bf-brand-primary) 70%, #000);
  --bf-color-accent-hover: color-mix(in srgb, var(--bf-brand-accent) 82%, #000);
  /* The home "sell" accent (the Place-an-ad CTAs + the close-to-home gradient
     tail) is a deeper variant of the CONFIGURABLE primary brand color, so it
     recolors per storefront. (--bf-brand-accent now derives from the primary the
     same way, so the two match; this local alias is kept for the OM call sites.) */
  --bf-om-accent: color-mix(in srgb, var(--bf-brand-primary) 72%, #000);
  --bf-om-primary-strong: color-mix(in srgb, var(--bf-brand-primary) 68%, #000);
  --bf-om-primary-tint: color-mix(in srgb, var(--bf-brand-primary) 10%, #fff);
  background-color: var(--bf-color-surface-alt);
  font-family: var(--bf-om-font-body);
}

:is(.bf-home, .bf-om) h1,
:is(.bf-home, .bf-om) h2,
:is(.bf-home, .bf-om) h3,
:is(.bf-home, .bf-om) h4 {
  font-family: var(--bf-om-font-display);
  letter-spacing: -0.01em;
}

/* The home page builds its own link affordances per component, so neutralise the
   global bf-scope link color/underline for component anchors. */
:is(.bf-home, .bf-om) .bf-om-action,
:is(.bf-home, .bf-om) .bf-om-pill,
:is(.bf-home, .bf-om) .bf-category-card__title,
:is(.bf-home, .bf-om) .bf-carousel a,
:is(.bf-home, .bf-om) .bf-om-seeall {
  text-decoration: none;
}

:is(.bf-home, .bf-om) .bf-container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* ---------------------------------------------------------------------------
   HERO  (signature: floating search + twin action cards over a soft gradient)
   --------------------------------------------------------------------------- */
/* Tinted-paper page canvas (home only): a soft brand-tinted paper with the aurora
   blooms concentrated near the hero, so the white cards float on colour instead of
   on white. The linear base runs cool (top) to warm (bottom); the shell + footer
   wave below are pinned to that warm bottom colour so the whole page reads seamless
   straight into the footer wave. */
.bf-home {
  background:
    radial-gradient(1100px 700px at 8% 0%, color-mix(in srgb, var(--bf-brand-primary) 12%, transparent), transparent 55%),
    radial-gradient(1100px 720px at 100% 10%, color-mix(in srgb, var(--bf-brand-accent) 11%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--bf-brand-primary) 7%, #edf0f5), color-mix(in srgb, var(--bf-brand-accent) 5%, #f4eeef));
}

.bf-shell:has(> .bf-home) {
  background-color: color-mix(in srgb, var(--bf-brand-accent) 5%, #f4eeef);
}

/* The footer defines its own --bf-footer-canvas (#f5f7fa), which overrides an
   inherited value, so the wave-fill colour must be pinned on the footer itself
   (not the shell) to blend the wave out of the warm paper bottom without a seam. */
.bf-shell:has(> .bf-home) .bf-footer {
  --bf-footer-canvas: color-mix(in srgb, var(--bf-brand-accent) 5%, #f4eeef);
}

.bf-om-hero {
  position: relative;
  background-color: transparent;
  background-image:
    radial-gradient(760px 340px at 4% 4%, color-mix(in srgb, var(--bf-brand-primary) 20%, transparent), transparent 70%),
    radial-gradient(820px 380px at 52% 122%, color-mix(in srgb, var(--bf-brand-secondary) 18%, transparent), transparent 66%),
    radial-gradient(760px 340px at 98% 14%, color-mix(in srgb, var(--bf-brand-accent) 20%, transparent), transparent 70%);
}

.bf-om-hero__inner {
  padding: 54px 24px 24px;
}

.bf-om-hero__head {
  max-width: 720px;
  margin-bottom: 26px;
}

:is(.bf-home, .bf-om) .bf-om-hero__title {
  margin: 0;
  font-family: var(--bf-om-font-display);
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--bf-color-text);
}

.bf-om-grad {
  background: linear-gradient(100deg, var(--bf-brand-primary), var(--bf-brand-secondary) 55%, var(--bf-brand-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bf-om-hero__sub {
  margin: 14px 0 0;
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--bf-color-text-muted);
  max-width: 560px;
}

/* Floating search bar */
.bf-om-search {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1.7fr 1fr auto;
  gap: 10px;
  align-items: center;
  margin: 0 0 26px;
  padding: 12px;
  border: 1.5px solid transparent;
  border-radius: var(--bf-radius-xl);
  background:
    linear-gradient(var(--bf-color-surface), var(--bf-color-surface)) padding-box,
    linear-gradient(90deg, var(--bf-brand-primary), var(--bf-brand-secondary), var(--bf-brand-accent)) border-box;
  box-shadow: var(--bf-shadow-lg), inset 0 0 26px color-mix(in srgb, var(--bf-brand-primary) 7%, transparent);
}

.bf-om-search__field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--bf-color-surface-alt);
  border: 1px solid transparent;
  border-radius: var(--bf-radius-lg);
}

.bf-om-search__field:focus-within {
  border-color: var(--bf-brand-primary);
  background: var(--bf-color-surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bf-brand-primary) 18%, transparent);
}

.bf-om-search__field svg {
  flex: none;
  color: var(--bf-color-text-muted);
}

:is(.bf-home, .bf-om) .bf-om-search__input,
:is(.bf-home, .bf-om) .bf-om-search__select {
  width: 100%;
  border: 0;
  background: transparent;
  font-family: var(--bf-om-font-body);
  font-size: 15.5px;
  color: var(--bf-color-text);
  outline: none;
}

:is(.bf-home, .bf-om) .bf-om-search__select {
  cursor: pointer;
}

:is(.bf-home, .bf-om) .bf-om-search__input::placeholder {
  color: var(--bf-color-text-muted);
}

/* ---------------------------------------------------------------------------
   THE brand action button. Two of them exist (the search bar's Search, and the
   "got something to sell" band's Place your ad) and they are declared TOGETHER so
   they cannot drift apart, which is exactly what happened before: postcta had
   grown its own flat single-brand-colour fill with dark brand-derived ink, while
   search used the gradient with white ink.

   The vocabulary: the brand GRADIENT (primary -> accent, so it never leans on one
   brand colour), white ink, a brand glow plus an inset highlight, and a brightness
   + lift hover. Only geometry (padding, radius, size) is per-button, set below.
   --------------------------------------------------------------------------- */
:is(.bf-home, .bf-om) .bf-om-search__btn,
:is(.bf-home, .bf-om) .bf-om-postcta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  background: linear-gradient(120deg, var(--bf-brand-primary), var(--bf-brand-accent));
  color: #ffffff;
  font-family: var(--bf-om-font-body);
  font-weight: 700;
  cursor: pointer;
  /* brand glow, not an elevation: it stays a hand-authored shadow (tokens.css) */
  box-shadow: 0 6px 16px color-mix(in srgb, var(--bf-brand-primary) 34%, transparent), inset 0 0 12px rgba(255, 255, 255, 0.2);
  transition: var(--bf-transition-lift), filter var(--bf-transition-fast);
}

:is(.bf-home, .bf-om) .bf-om-search__btn:hover,
:is(.bf-home, .bf-om) .bf-om-postcta__btn:hover {
  filter: brightness(1.06);
  transform: translateY(var(--bf-lift-1));
  text-decoration: none;
}

:is(.bf-home, .bf-om) .bf-om-search__btn {
  padding: 13px 26px;
  border-radius: var(--bf-radius-lg);
  font-size: 15.5px;
}

/* Twin co-equal action cards */
.bf-om-twin {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.bf-om-action {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 26px;
  border: 1.5px solid transparent;
  border-radius: var(--bf-radius-xl);
  background:
    linear-gradient(var(--bf-color-surface), var(--bf-color-surface)) padding-box,
    linear-gradient(120deg, var(--bf-brand-primary), var(--bf-brand-secondary), var(--bf-brand-accent)) border-box;
  /* Tier 2: the only component in the system that rests raised (md), so it is the
     only one that lifts to lg. Everything else is tier 1. */
  box-shadow: var(--bf-elev-rest-2);
  color: var(--bf-color-text);
  transition: var(--bf-transition-lift);
}

.bf-om-action:hover {
  transform: translateY(var(--bf-lift-2));
  box-shadow: var(--bf-elev-hover-2);
  /* this is a card, not body copy: opt out of the reset's anchor underline */
  text-decoration: none;
}

.bf-om-action::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bf-om-action--buy::after {
  background: radial-gradient(320px 170px at 10% -10%, color-mix(in srgb, var(--bf-brand-primary) 16%, transparent), transparent 70%);
}

.bf-om-action--sell::after {
  background: radial-gradient(320px 170px at 90% -10%, color-mix(in srgb, var(--bf-brand-accent) 16%, transparent), transparent 70%);
}

/* keep icon + copy above the bloom layer */
.bf-om-action > * {
  position: relative;
  z-index: 1;
}

.bf-om-action__ico {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #ffffff;
  box-shadow: var(--bf-shadow-sm);
}

.bf-om-action--buy .bf-om-action__ico {
  background: linear-gradient(140deg, var(--bf-brand-primary), var(--bf-brand-secondary));
}

.bf-om-action--sell .bf-om-action__ico {
  background: linear-gradient(140deg, var(--bf-brand-secondary), var(--bf-brand-accent));
}

:is(.bf-home, .bf-om) .bf-om-action__title {
  display: block;
  margin: 0 0 4px;
  font-family: var(--bf-om-font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--bf-color-text);
}

.bf-om-action p {
  margin: 0;
  color: var(--bf-color-text-muted);
  font-size: 14.5px;
}

.bf-om-action__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--bf-color-primary-hover);
}

.bf-om-action--sell .bf-om-action__go {
  color: color-mix(in srgb, var(--bf-brand-accent) 78%, #000);
}

/* ---------------------------------------------------------------------------
   CATEGORY PILL RAIL  (horizontal scroll)
   --------------------------------------------------------------------------- */
.bf-om-pillrail-wrap {
  background: var(--bf-color-surface);
  border-block: 1px solid var(--bf-color-border);
}

.bf-om-pillrail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 14px 24px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.bf-om-pillrail::-webkit-scrollbar { display: none; }

:is(.bf-home, .bf-om) .bf-om-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  white-space: nowrap;
  border: 1px solid var(--bf-color-border);
  border-radius: var(--bf-radius-pill);
  background: var(--bf-color-surface);
  color: var(--bf-color-text);
  font-weight: 500;
  font-size: 14px;
  transition: border-color var(--bf-transition-fast), background-color var(--bf-transition-fast), color var(--bf-transition-fast);
}

:is(.bf-home, .bf-om) .bf-om-pill:hover {
  border-color: var(--bf-brand-primary);
  background: color-mix(in srgb, var(--bf-brand-primary) 8%, var(--bf-color-surface));
  color: var(--bf-color-primary-hover);
  text-decoration: none;
}

:is(.bf-home, .bf-om) .bf-om-pill--active {
  background: var(--bf-color-secondary);
  border-color: var(--bf-color-secondary);
  color: var(--bf-color-text-inverse);
}

:is(.bf-home, .bf-om) .bf-om-pill--active:hover {
  background: var(--bf-color-ink-hover);
  color: var(--bf-color-text-inverse);
}

/* ---------------------------------------------------------------------------
   SECTION SCAFFOLD
   --------------------------------------------------------------------------- */
.bf-om-sec {
  padding: 44px 0;
}

/* Pull the browse/featured market panel up under the hero tiles so the search,
   the twin action tiles, and the market panel read as one uniform stack rather
   than three widely spaced bands. */
.bf-home #browse {
  padding-top: 0;
}

.bf-om-sec__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

:is(.bf-home, .bf-om) .bf-om-sec__head h2 {
  margin: 4px 0 0;
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 700;
  color: var(--bf-color-text);
}

.bf-om-sec__head .bf-kicker {
  margin: 0;
}

:is(.bf-home, .bf-om) .bf-om-seeall {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--bf-color-primary-hover);
}

:is(.bf-home, .bf-om) .bf-om-seeall:hover {
  color: var(--bf-color-text);
}

/* ---------------------------------------------------------------------------
   CATEGORY TILES  (restyle the PHP-generated .bf-category-card to image-led cards)
   --------------------------------------------------------------------------- */
:is(.bf-home, .bf-om) .bf-category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

:is(.bf-home, .bf-om) .bf-category-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bf-color-surface);
  border: 1px solid var(--bf-color-border);
  border-radius: var(--bf-radius-lg);
  box-shadow: var(--bf-elev-rest-1);
  color: var(--bf-color-text);
  cursor: pointer;
  transition: var(--bf-transition-lift);
}

:is(.bf-home, .bf-om) .bf-category-card:hover {
  transform: translateY(var(--bf-lift-1));
  box-shadow: var(--bf-elev-hover-1);
}

:is(.bf-home, .bf-om) .bf-category-card__frame {
  overflow: hidden;
}

:is(.bf-home, .bf-om) .bf-category-card__media {
  height: 118px;
  background-color: var(--bf-color-surface-sunken);
  background-size: cover;
  background-position: center;
  transition: transform var(--bf-transition-base);
}

:is(.bf-home, .bf-om) .bf-category-card:hover .bf-category-card__media {
  transform: scale(1.04);
}

/* Modern SVG category markers on the homepage card: a centered teal glyph on a
   soft brand tint (line icons are not photos, so they are contained, not
   cover-stretched). The per-icon mask URL is passed inline as --bf-cat-mask. */
:is(.bf-home, .bf-om) .bf-category-card__media--icon {
  background-image: none;
  background-color: var(--bf-om-primary-tint, color-mix(in srgb, var(--bf-brand-primary) 10%, #fff));
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: auto;
}

:is(.bf-home, .bf-om) .bf-category-card__media--icon::before {
  content: "";
  width: 72px;
  height: 72px;
  background-color: var(--bf-color-primary-text);
  -webkit-mask: var(--bf-cat-mask) center / contain no-repeat;
  mask: var(--bf-cat-mask) center / contain no-repeat;
}

/* ===== Homepage category tiles (compact horizontal; fits BOTH SVG icon chips and
   raster photos) =====
   .bf-category-card--tile lays the photo-caption card out as a horizontal row: a fixed
   media chip beside the title / count / child-links. An SVG marker becomes a teal->ink
   gradient chip with a white glyph; a raster image becomes a cover thumbnail. Every tile
   is the same size (no lead/hero card). */
:is(.bf-home, .bf-om) .bf-category-grid--tile {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

:is(.bf-home, .bf-om) .bf-category-card--tile {
  flex-direction: row;
  align-items: center;
  gap: var(--bf-space-4);
  padding: var(--bf-space-4);
}

/* drop the photo-band frame box so the chip is a direct flex child of the row */
:is(.bf-home, .bf-om) .bf-category-card--tile .bf-category-card__frame {
  display: contents;
}

:is(.bf-home, .bf-om) .bf-category-card--tile .bf-category-card__media {
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  aspect-ratio: auto;
  border-radius: var(--bf-radius-md);
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

:is(.bf-home, .bf-om) .bf-category-card--tile .bf-category-card__media--icon {
  background: linear-gradient(140deg, color-mix(in srgb, var(--bf-brand-primary) 90%, #000), var(--bf-om-accent, color-mix(in srgb, var(--bf-brand-primary) 72%, #000)));
}

:is(.bf-home, .bf-om) .bf-category-card--tile .bf-category-card__media--icon::before {
  width: 56%;
  height: 56%;
  background-color: var(--bf-brand-primary-ink);
}

:is(.bf-home, .bf-om) .bf-category-card--tile .bf-category-card__plate {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
}

:is(.bf-home, .bf-om) .bf-category-card__plate {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 14px 16px 16px;
  background: var(--bf-color-surface);
  border-top: 0;
  color: var(--bf-color-text);
}

:is(.bf-home, .bf-om) .bf-category-card__heading {
  margin: 0;
}

:is(.bf-home, .bf-om) .bf-category-card__title {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--bf-om-font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  color: var(--bf-color-text);
}

:is(.bf-home, .bf-om) .bf-category-card__title:hover {
  color: var(--bf-color-primary-hover);
  text-decoration: none;
}

:is(.bf-home, .bf-om) .bf-category-card__count {
  margin-top: 3px;
  font-size: 13px;
  font-weight: 500;
  color: var(--bf-color-text-muted);
}

:is(.bf-home, .bf-om) .bf-category-card__count b {
  color: var(--bf-color-primary-hover);
  font-weight: 700;
}

:is(.bf-home, .bf-om) .bf-category-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

:is(.bf-home, .bf-om) .bf-category-card__links li {
  margin: 0;
}

:is(.bf-home, .bf-om) .bf-category-card__links a {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--bf-color-border);
  border-radius: var(--bf-radius-pill);
  background: var(--bf-color-surface-alt);
  color: var(--bf-color-text);
  font-size: 12.5px;
  font-weight: 500;
}

:is(.bf-home, .bf-om) .bf-category-card__links a:hover {
  border-color: var(--bf-brand-primary);
  color: var(--bf-color-primary-hover);
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
   FEATURED + RECENTLY VIEWED  (restyle the PHP-generated .bf-carousel into a
   responsive grid of photo cards)
   --------------------------------------------------------------------------- */
:is(.bf-home, .bf-om) .bf-carousel {
  margin: 0;
}

:is(.bf-home, .bf-om) .bf-carousel__title {
  margin: 0 0 18px;
  font-family: var(--bf-om-font-display);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  text-align: left;
  color: var(--bf-color-text);
}

/* The PHP emits ONE .row.featured-ad-row PER AD (a per-ad wrapper), not one row of
   many anchors - so grid the CONTAINER of those per-ad rows and let each ad be a grid
   cell. featured_home wraps the rows in #featured-ad-data; previously_viewed puts them
   directly inside .bf-carousel after the title; featured_results uses .item carousel
   slides (no .featured-ad-row.row / no #featured-ad-data) and is left untouched. */
:is(.bf-home, .bf-om) .bf-carousel #featured-ad-data,
:is(.bf-home, .bf-om) .bf-carousel:has(> .featured-ad-row.row) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  align-items: start;
}

/* the per-ad rows are direct children of .bf-carousel in previously_viewed, so the
   title shares that grid - span it full width */
:is(.bf-home, .bf-om) .bf-carousel:has(> .featured-ad-row.row) > .bf-carousel__title {
  grid-column: 1 / -1;
}

/* each per-ad row is now a grid CELL (its single card fills it), not its own grid */
:is(.bf-home, .bf-om) .bf-carousel .featured-ad-row.row {
  display: block;
  margin: 0 !important;
}

:is(.bf-home, .bf-om) .bf-carousel .featured-ad-row.row > a {
  display: block;
  margin: 0;
  color: var(--bf-color-text);
}

:is(.bf-home, .bf-om) .bf-carousel .featured-ad-row.row > a > [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  padding: 0 !important;
}

:is(.bf-home, .bf-om) .bf-carousel__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--bf-color-surface);
  border: 1px solid var(--bf-color-border);
  border-radius: var(--bf-radius-lg);
  box-shadow: var(--bf-elev-rest-1);
  text-align: left;
  color: var(--bf-color-text);
  transition: var(--bf-transition-lift);
}

:is(.bf-home, .bf-om) .bf-carousel .featured-ad-row.row > a:hover .bf-carousel__card {
  transform: translateY(var(--bf-lift-1));
  box-shadow: var(--bf-elev-hover-1);
  text-decoration: none;
}

:is(.bf-home, .bf-om) .bf-carousel__card-img {
  width: 100%;
  height: 168px;
  object-fit: cover;
  display: block;
  background: var(--bf-color-surface-sunken);
}

:is(.bf-home, .bf-om) .bf-carousel__card-body {
  padding: 12px 14px 14px;
}

:is(.bf-home, .bf-om) .bf-carousel__card-title {
  margin: 0 0 4px;
  font-family: var(--bf-om-font-display);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.25;
  color: var(--bf-color-text);
}

/* The card's leading category label (rendered as <strong>/<center> by the PHP). */
:is(.bf-home, .bf-om) .bf-carousel__card center,
:is(.bf-home, .bf-om) .bf-carousel__card > strong,
:is(.bf-home, .bf-om) .bf-carousel__card-body strong {
  display: block;
  text-align: left;
  margin: 0 0 4px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bf-color-primary-hover);
}

:is(.bf-home, .bf-om) .bf-carousel__card-boxed {
  padding: 12px 14px 14px;
}

/* ---------------------------------------------------------------------------
   MARKET PANEL  (Split Deck: the browse-by-category chip rail and the featured
   spotlight fold into one enveloped Aurora surface. The two configurable ad slots
   integrate here: the 300x250 box docks under the category chips
   (.bf-om-market__dock); the 728x90 leaderboard sits below all home content as
   .bf-om-adbanner. Both render only when a real ad is configured.)
   --------------------------------------------------------------------------- */
:is(.bf-home, .bf-om) .bf-om-market {
  position: relative;
  overflow: hidden;
  padding: 30px;
  border: 1.5px solid transparent;
  border-radius: var(--bf-radius-xl);
  background:
    radial-gradient(720px 320px at 2% 2%, color-mix(in srgb, var(--bf-brand-primary) 15%, transparent), transparent 68%) padding-box,
    radial-gradient(780px 360px at 55% 120%, color-mix(in srgb, var(--bf-brand-secondary) 15%, transparent), transparent 66%) padding-box,
    radial-gradient(720px 320px at 98% 6%, color-mix(in srgb, var(--bf-brand-accent) 15%, transparent), transparent 68%) padding-box,
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(120deg, var(--bf-brand-primary), var(--bf-brand-secondary), var(--bf-brand-accent)) border-box;
  box-shadow: var(--bf-shadow-lg);
}

:is(.bf-home, .bf-om) .bf-om-market__grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 28px;
  align-items: start;
}

:is(.bf-home, .bf-om) .bf-om-market__aside {
  display: flex;
  flex-direction: column;
}

:is(.bf-home, .bf-om) .bf-om-market__head {
  margin-bottom: 16px;
}

:is(.bf-home, .bf-om) .bf-om-market__head .bf-kicker {
  margin: 0 0 4px;
}

:is(.bf-home, .bf-om) .bf-om-market__head h2 {
  margin: 0;
  font-family: var(--bf-om-font-display);
  font-size: clamp(21px, 2.2vw, 26px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--bf-color-text);
}

:is(.bf-home, .bf-om) .bf-om-market__head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

/* Category chip rail: stack the reused .bf-category-card--tile into a single
   compact column in the narrow aside. */
:is(.bf-home, .bf-om) .bf-om-market__aside .bf-category-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}

:is(.bf-home, .bf-om) .bf-om-market__aside .bf-category-card--tile {
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
}

:is(.bf-home, .bf-om) .bf-om-market__aside .bf-category-card--tile .bf-category-card__media {
  width: 46px;
  height: 46px;
  border-radius: 12px;
}

:is(.bf-home, .bf-om) .bf-om-market__aside .bf-category-card__title {
  font-size: 15px;
}

:is(.bf-home, .bf-om) .bf-om-market__aside .bf-category-card__count {
  margin-top: 1px;
  font-size: 12px;
}

/* Rotate the icon medallions through the three brand colours so the rail
   carries the full palette (photo categories keep their thumbnail). */
:is(.bf-home, .bf-om) .bf-om-market__aside .bf-category-card--tile:nth-child(3n + 1) .bf-category-card__media--icon {
  background: linear-gradient(140deg, var(--bf-brand-primary), var(--bf-brand-secondary));
}

:is(.bf-home, .bf-om) .bf-om-market__aside .bf-category-card--tile:nth-child(3n + 2) .bf-category-card__media--icon {
  background: linear-gradient(140deg, var(--bf-brand-secondary), var(--bf-brand-accent));
}

:is(.bf-home, .bf-om) .bf-om-market__aside .bf-category-card--tile:nth-child(3n) .bf-category-card__media--icon {
  background: linear-gradient(140deg, var(--bf-brand-accent), var(--bf-brand-primary));
}

:is(.bf-home, .bf-om) .bf-om-market__seeall {
  margin-top: 14px;
}

/* Featured column: hide the include's built-in title (we render our own head)
   and undo its legacy center alignment. */
:is(.bf-home, .bf-om) .bf-om-market__main .bf-carousel__title {
  display: none;
}

:is(.bf-home, .bf-om) .bf-om-market__main center,
:is(.bf-home, .bf-om) .bf-om-market__main .text-center {
  text-align: left;
}

/* Featured: a compact two-up grid in the right column, balanced against the
   category rail height (scoped to the market so previously-viewed / search on
   other pages keep their own auto-fit grid). */
:is(.bf-home, .bf-om) .bf-om-market .bf-carousel #featured-ad-data {
  grid-template-columns: 1fr 1fr;
}

/* Slot B (300x250 box / SITE_AD_SIDEBAR_TAGS) docked under the category chips: it
   fills the otherwise-empty bottom of the narrow left column. No frame - the ad
   lives as its own entity, just spaced from the links above it. */
:is(.bf-home, .bf-om) .bf-om-market__dock {
  margin-top: 16px;
}

/* The ad_sidebar wrapper is a flex row shared by other pages; inside the dock make it
   a single centered column and strip its leading <br> whitespace. */
:is(.bf-home, .bf-om) .bf-om-market__dock .bf-adrail {
  display: block;
  gap: 0;
  margin: 0;
}

:is(.bf-home, .bf-om) .bf-om-market__dock .bf-adrail br {
  display: none;
}

:is(.bf-home, .bf-om) .bf-om-market__dock :is(img, iframe, ins) {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Slot A (728x90 leaderboard) below all home content: an unframed, centered banner
   just above the footer - the ad lives as its own entity. */
:is(.bf-home, .bf-om) .bf-om-adbanner {
  text-align: center;
}

:is(.bf-home, .bf-om) .bf-om-adbanner :is(img, iframe, ins) {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  :is(.bf-home, .bf-om) .bf-om-market__grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  :is(.bf-home, .bf-om) .bf-om-market__aside .bf-category-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

@media (max-width: 620px) {
  :is(.bf-home, .bf-om) .bf-om-market {
    padding: 20px;
  }

  :is(.bf-home, .bf-om) .bf-om-market .bf-carousel #featured-ad-data {
    grid-template-columns: 1fr;
  }
}

/* .bf-om-sec--ads wraps the bottom-of-page leaderboard banner (Slot A): a slim
   centered band above the footer. (The 300x250 box now docks in the market panel.) */
.bf-om-sec--ads {
  padding: 28px 0;
}

:is(.bf-home, .bf-om) .bf-adrail {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: center;
}

:is(.bf-home, .bf-om) .bf-adrail img {
  border-radius: var(--bf-radius-md);
  box-shadow: var(--bf-shadow-sm);
}

/* ---------------------------------------------------------------------------
   POST-AN-AD CTA
   --------------------------------------------------------------------------- */
.bf-om-postcta {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 40px 44px;
  border-radius: var(--bf-radius-xl);
  /* Aurora CTA: the same guaranteed-dark NEUTRAL housing the footer and the OM dark
     consoles use (derived from --bf-color-text, never --bf-brand-secondary) so the copy
     is legible on ANY storefront brand, dressed with three soft BRAND glows as accents.
     Every brand value is a token (primary + secondary + accent), so a storefront recolors
     the whole panel - it is not hard-wired to the default brand colors. The glow POSITIONS
     are rotated vs the footer (primary low-left, accent high-right, secondary mid-right) and
     there are three of them, so it echoes the footer's language without copying it. */
  --bf-postcta-base: #17181c;
  --bf-postcta-base: color-mix(in srgb, var(--bf-color-text) 84%, #000);
  color: var(--bf-color-text-inverse);
  background-color: var(--bf-postcta-base);
  background-image:
    radial-gradient(1000px 520px at 0% 132%,
        color-mix(in srgb, var(--bf-brand-primary) 28%, transparent), transparent 66%),
    radial-gradient(940px 480px at 100% -28%,
        color-mix(in srgb, var(--bf-brand-accent) 22%, transparent), transparent 64%),
    radial-gradient(720px 540px at 92% 64%,
        color-mix(in srgb, var(--bf-brand-secondary) 32%, transparent), transparent 70%);
  border: 1px solid color-mix(in srgb, #ffffff 8%, transparent);
  box-shadow: var(--bf-shadow-md);
}

:is(.bf-home, .bf-om) .bf-om-postcta h2 {
  margin: 0;
  font-family: var(--bf-om-font-display);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  color: var(--bf-color-text-inverse);
}

.bf-om-postcta p {
  margin: 8px 0 0;
  font-size: 16px;
  color: color-mix(in srgb, var(--bf-color-text-inverse) 82%, transparent);
}

/* Geometry only. The fill, ink, glow and hover are the shared brand action button
   vocabulary declared alongside .bf-om-search__btn above; do not re-declare them
   here, or these two drift apart again. The pill radius is deliberate: this one
   sits alone in a dark band, where a pill reads better than the search bar's
   squarer form. */
:is(.bf-home, .bf-om) .bf-om-postcta__btn {
  position: relative;
  z-index: 1;
  flex: none;
  padding: 15px 30px;
  border-radius: var(--bf-radius-pill);
  font-size: 16px;
}

/* ---------------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width: 1020px) {
  :is(.bf-home, .bf-om) .bf-category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .bf-om-hero__inner {
    padding: 34px 20px 40px;
  }
  .bf-om-search {
    grid-template-columns: 1fr;
  }
  .bf-om-twin {
    grid-template-columns: 1fr;
  }
  :is(.bf-home, .bf-om) .bf-category-grid {
    grid-template-columns: 1fr;
  }
  .bf-om-postcta {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px;
  }
}

/* Reduced motion for every hover lift on this page is handled once, at the token
   layer (tokens.css): the durations collapse to 1ms and --bf-lift-* to 0, so
   nothing travels. No per-component reduce block is needed for a lift. */

/* ---------------------------------------------------------------------------
   BROWSE-ALL DEEP-LINK FLASH  (W1)
   The category index (browse_all.php) deep-links a parent section via
   #browse_<anchor>; highlightCategory() toggles .is-highlighted on it. The accent
   is brand-driven (replaces the old hard-coded orange), so it recolors per
   storefront. scroll-margin-top clears the sticky header on scrollIntoView.
   --------------------------------------------------------------------------- */
:is(.bf-home, .bf-om) .bf-browse-section {
  scroll-margin-top: 96px;
}

@media (prefers-reduced-motion: no-preference) {
  :is(.bf-home, .bf-om) .bf-browse-section {
    transition: background-color var(--bf-transition-base), border-color var(--bf-transition-base);
  }
}

:is(.bf-home, .bf-om) .bf-browse-section.is-highlighted {
  border-color: var(--bf-brand-accent);
  background: color-mix(in srgb, var(--bf-brand-accent) 12%, var(--bf-color-surface));
}

/* =============================================================================
   BROWSE / FACETED SEARCH  (W2 - search_results.php)  "Aurora Command Deck"
   -----------------------------------------------------------------------------
   The results page opts into .bf-om and adds the page hook .bf-browse (on
   <main>). It is restyled to the home Aurora language: a tinted-paper bloom field
   that seams into the footer wave, a gradient-bordered search console, the mobile
   FILTER RESULTS drawer promoted to a floating Aurora control panel at lg+, rich
   result cards with gradient-border featured spotlights + a corner ribbon, dark
   aurora place-ad tiles, and a pill paginator. Every accent derives from the
   three --bf-brand-* tokens, so the whole page recolors per storefront. All
   selectors are scoped under .bf-browse so no other .bf-om page is touched, and no
   markup/JS contract changes (cards stay PHP-authored .bf-result; the search /
   sort / pagination / infinite-scroll JS keeps its IDs, inline onClick handlers,
   and the #all-search-results-data boundary markers). Behavior below lg is
   unchanged: the facet panel is still the slide-out drawer.
   ============================================================================= */

/* -- Tinted-paper aurora field + seamless footer canvas (mirrors .bf-home). ---- */
.bf-browse {
  background:
    radial-gradient(1100px 700px at 8% 0%, color-mix(in srgb, var(--bf-brand-primary) 12%, transparent), transparent 55%),
    radial-gradient(1100px 720px at 100% 10%, color-mix(in srgb, var(--bf-brand-accent) 11%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--bf-brand-primary) 7%, #edf0f5), color-mix(in srgb, var(--bf-brand-accent) 5%, #f4eeef));
}
.bf-shell:has(> .bf-browse) {
  background-color: color-mix(in srgb, var(--bf-brand-accent) 5%, #f4eeef);
}
.bf-shell:has(> .bf-browse) .bf-footer {
  --bf-footer-canvas: color-mix(in srgb, var(--bf-brand-accent) 5%, #f4eeef);
}

/* -- The compact hero searchbar restyled as a gradient-bordered search console. */
.bf-browse .bf-hero--compact {
  background: transparent;
  border: 0;
  padding: var(--bf-space-5) 0 var(--bf-space-1);
}
/* Kill the base .bf-hero::after masthead double rule; the console stands alone. */
.bf-browse .bf-hero--compact::after {
  display: none;
}
/* Hero head: kicker + gradient headline + subtitle above the search console
   (matches the picked mock). */
.bf-browse .bf-hero--compact .bf-browse-hero__head {
  max-width: 720px;
  margin: 0 0 var(--bf-space-4);
}
.bf-browse .bf-browse-hero__kicker {
  margin: 0 0 var(--bf-space-1);
  font-family: var(--bf-font-display);
  font-weight: var(--bf-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: var(--bf-text-xs);
  color: color-mix(in srgb, var(--bf-brand-primary) 62%, #000);
}
.bf-browse .bf-hero--compact .bf-browse-hero__title {
  margin: 0 0 var(--bf-space-2);
  font-family: var(--bf-font-display);
  font-weight: 800;
  font-size: var(--bf-text-3xl);
  line-height: var(--bf-leading-tight);
  color: var(--bf-color-text);
}
.bf-browse .bf-browse-hero__title span {
  background: linear-gradient(100deg, var(--bf-brand-primary), var(--bf-brand-secondary) 55%, var(--bf-brand-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bf-browse .bf-browse-hero__sub {
  margin: 0;
  color: var(--bf-color-text-muted);
  font-size: var(--bf-text-base);
}
/* The top search console is redundant with the side facet rail's keyword +
   category fields; hide it. Kept in the DOM so pagination's submitSearch (which
   reads #search_keywords when not in mobile mode) does not break. The headline
   stays as the page masthead. */
.bf-browse .bf-hero--compact .bf-results-searchbar {
  display: none;
}
.bf-browse .bf-results-searchbar {
  position: relative;
  gap: var(--bf-space-2);
  margin: 0;
  padding: var(--bf-space-4);
  border-radius: var(--bf-radius-xl);
  border: 1px solid transparent;
  background:
    radial-gradient(760px 340px at 3% 6%, color-mix(in srgb, var(--bf-brand-primary) 18%, transparent), transparent 70%) padding-box,
    radial-gradient(820px 380px at 55% 128%, color-mix(in srgb, var(--bf-brand-secondary) 15%, transparent), transparent 66%) padding-box,
    radial-gradient(760px 340px at 99% 10%, color-mix(in srgb, var(--bf-brand-accent) 18%, transparent), transparent 70%) padding-box,
    linear-gradient(#fff, #fff) padding-box;
  box-shadow: var(--bf-shadow-lg), inset 0 0 30px color-mix(in srgb, var(--bf-brand-primary) 6%, transparent);
}
.bf-browse .bf-results-searchbar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--bf-radius-xl);
  padding: 1px;
  background: linear-gradient(120deg, var(--bf-brand-primary), var(--bf-brand-secondary), var(--bf-brand-accent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.bf-browse .bf-results-searchbar .bf-input,
.bf-browse .bf-results-searchbar .bf-select {
  height: 52px;
  padding: 0 var(--bf-space-4);
  border-radius: var(--bf-radius-lg);
  border: 1px solid var(--bf-color-border);
  background: var(--bf-color-surface);
  font-size: var(--bf-text-base);
}
.bf-browse .bf-results-searchbar .bf-input:focus,
.bf-browse .bf-results-searchbar .bf-select:focus {
  border-color: var(--bf-brand-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bf-brand-primary) 18%, transparent);
  outline: none;
}
.bf-browse .bf-results-searchbar .bf-btn--primary {
  height: 52px;
  padding: 0 var(--bf-space-6);
  border: 0;
  border-radius: var(--bf-radius-lg);
  font-family: var(--bf-font-display);
  background: linear-gradient(120deg, var(--bf-brand-primary), var(--bf-brand-accent));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--bf-brand-primary) 34%, transparent);
}
.bf-browse .bf-results-searchbar .bf-btn--primary:hover {
  filter: brightness(1.05);
}

/* -- Two-column layout at lg+: a single left rail that stacks the filter panel
   ON TOP of the ad / featured / safety extras, beside one WIDE results column.
   This reclaims the old squeezed third column so the map and result cards get
   real width. Done as a grid re-placement of the existing three siblings (filter,
   main, sidebar) so no markup changes. Below lg the filter panel stays the
   slide-out drawer and the extras flow under the results (unchanged). ---------- */
@media (min-width: 1100px) {
  .bf-browse .bf-region--faceted {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    /* auto 1fr, not auto auto: the tall spanning main column must dump its slack
       into the SECOND row so the extras hug right under the filter panel instead
       of the grid growing row 1 and leaving a gap between them. */
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "rail main"
      "extras main";
    align-items: start;
    gap: var(--bf-space-3) var(--bf-space-6);
  }
  .bf-browse .bf-region--faceted .panel-search-filter {
    grid-area: rail;
    position: static;
    width: auto;
    height: auto;
    max-height: none;
    overflow: visible;
    background: transparent;
    box-shadow: none;
    padding: 0;
    z-index: auto;
  }
  .bf-browse .bf-region--faceted .bf-region__main {
    grid-area: main;
    min-width: 0;
  }
  .bf-browse .bf-region--faceted .bf-region__sidebar {
    grid-area: extras;
    width: auto;
    flex: none;
  }
  .bf-browse .bf-region--faceted .panel-search-filter .close-filter-panel {
    display: none;
  }
}

/* -- The facet rail as an Aurora control panel. -------------------------------- */
.bf-browse .bf-region--faceted .filter-panel-wrapper {
  padding: var(--bf-space-4);
  border: 1px solid var(--bf-color-border);
  border-top: 3px solid var(--bf-brand-primary);
  border-radius: var(--bf-radius-lg);
  background: var(--bf-color-surface);
  box-shadow: var(--bf-shadow-md);
}
.bf-browse .bf-region--faceted .filter-panel-wrapper > h4 {
  margin: 0 0 var(--bf-space-2);
  display: flex;
  align-items: center;
  gap: var(--bf-space-2);
  color: var(--bf-color-text);
  font-family: var(--bf-font-display);
  font-weight: var(--bf-weight-bold);
  font-size: var(--bf-text-lg);
}
/* Sections are plain transparent groups; no per-section fill (that read as
   patchy white highlighting behind the controls). */
.bf-browse .bf-region--faceted .filter-panel-wrapper > header,
.bf-browse .bf-region--faceted .filter-panel-wrapper > section {
  margin: 0;
  padding: 0;
  background: transparent;
}
.bf-browse .bf-region--faceted .panel-search-filter header {
  display: block;
  margin: var(--bf-space-3) 0 var(--bf-space-1);
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bf-color-text-muted);
}
.bf-browse .bf-region--faceted .panel-search-filter section {
  margin-bottom: var(--bf-space-2);
}
.bf-browse .bf-region--faceted .filter-panel-wrapper .bf-input,
.bf-browse .bf-region--faceted .filter-panel-wrapper .bf-select {
  width: 100%;
  height: 44px;
  padding: 0 var(--bf-space-3);
  border-radius: var(--bf-radius-md);
  border: 1px solid var(--bf-color-border);
  background: var(--bf-color-surface-alt);
  font-size: var(--bf-text-sm);
}
.bf-browse .bf-region--faceted .filter-panel-wrapper .bf-input:focus,
.bf-browse .bf-region--faceted .filter-panel-wrapper .bf-select:focus {
  border-color: var(--bf-brand-primary);
  background: var(--bf-color-surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bf-brand-primary) 16%, transparent);
  outline: none;
}
.bf-browse .bf-region--faceted .filter-panel-wrapper .bf-btn--primary {
  width: 100%;
  margin-top: var(--bf-space-3);
  border: 0;
  border-radius: var(--bf-radius-md);
  font-family: var(--bf-font-display);
  background: linear-gradient(120deg, var(--bf-brand-primary), var(--bf-brand-accent));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--bf-brand-primary) 30%, transparent);
}

/* -- Result group heads + the per-group sort control as a pill. ---------------- */
.bf-browse .bf-region__main .bf-result-group {
  position: relative;
  margin: var(--bf-space-5) 0 var(--bf-space-3);
}
.bf-browse .bf-region__main .bf-result-group:first-of-type {
  margin-top: var(--bf-space-1);
}
.bf-browse .bf-region__main .bf-result-group > h2 {
  margin: 0 0 var(--bf-space-2);
  padding-right: 150px;
  font-family: var(--bf-font-display);
  font-weight: var(--bf-weight-bold);
  font-size: var(--bf-text-xl);
}
/* The sort <select> sits in a .pull-right; pin it top-right as a pill without
   depending on the legacy Bootstrap float (the inline position is overridden). */
.bf-browse .bf-region__main .bf-result-group .pull-right {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 1;
}
.bf-browse .bf-region__main .bf-result-group #sort_by {
  height: 38px;
  width: auto;
  padding: 0 var(--bf-space-3);
  border-radius: var(--bf-radius-pill);
  border: 1px solid var(--bf-color-border);
  background: var(--bf-color-surface);
  font-size: var(--bf-text-sm);
  font-family: var(--bf-font-body);
}

/* -- Result cards: Concept A "Aurora Spotlight". A media zone (photo, or a
   category default panel for photo/no-photo parity) beside a body (kicker /
   title / fact chips / description), with a footer (publication + share + View).
   Featured gets a gradient rim + a media flag. Grid areas place the media, the
   .detail-link body, and the foot; the hidden email panels (.hide) stay out. -- */
.bf-browse .bf-region__main .bf-result {
  position: relative;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "media body"
    "media foot";
  background: var(--bf-color-surface);
  border: 1px solid var(--bf-color-border);
  border-radius: var(--bf-radius-lg);
  overflow: hidden;
  margin: 0 0 var(--bf-space-4);
  box-shadow: var(--bf-elev-rest-1);
  transition: var(--bf-transition-lift);
}
.bf-browse .bf-region__main .bf-result:hover {
  transform: translateY(var(--bf-lift-1));
  box-shadow: var(--bf-elev-hover-1);
}
.bf-browse .bf-region__main .bf-result--featured {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--bf-color-surface), var(--bf-color-surface)) padding-box,
    linear-gradient(120deg, var(--bf-brand-primary), var(--bf-brand-secondary), var(--bf-brand-accent)) border-box;
  box-shadow: var(--bf-shadow-md), 0 0 0 4px color-mix(in srgb, var(--bf-brand-primary) 6%, transparent);
}

/* Media zone */
.bf-browse .bf-region__main .bf-result__media {
  grid-area: media;
  position: relative;
  min-height: 178px;
  overflow: hidden;
}
.bf-browse .bf-region__main .bf-result__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bf-browse .bf-region__main .bf-result__photo--display {
  object-fit: contain;
  background: #fff;
}
/* Category default panel: per-category hue (PHP crc32) + category glyph, so a
   photo-less liner still reads as a real listing with the same footprint. */
.bf-browse .bf-region__main .bf-result__media-default {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--bf-space-4);
  color: #fff;
  background: linear-gradient(150deg, hsl(var(--cat-hue, 210) 42% 40%), hsl(var(--cat-hue, 210) 52% 22%));
}
.bf-browse .bf-region__main .bf-result__cat-glyph svg {
  width: 54px;
  height: 54px;
  opacity: 0.92;
}
.bf-browse .bf-region__main .bf-result__cat-name {
  position: absolute;
  left: var(--bf-space-4);
  bottom: var(--bf-space-3);
  font-family: var(--bf-font-display);
  font-weight: var(--bf-weight-bold);
  font-size: var(--bf-text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* Pin number + featured flag on the media */
.bf-browse .bf-region__main .bf-result__pin {
  position: absolute;
  top: var(--bf-space-3);
  left: var(--bf-space-3);
  z-index: 2;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--bf-radius-pill);
  font-family: var(--bf-font-display);
  font-weight: var(--bf-weight-bold);
  font-size: var(--bf-text-sm);
  color: #fff;
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(3px);
}
.bf-browse .bf-region__main .bf-result__flag {
  position: absolute;
  top: var(--bf-space-3);
  left: 50px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--bf-font-display);
  font-weight: var(--bf-weight-bold);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bf-brand-primary-ink);
  padding: 5px 10px;
  border-radius: var(--bf-radius-pill);
  background: linear-gradient(120deg, var(--bf-brand-primary), var(--bf-brand-accent));
  box-shadow: 0 6px 14px color-mix(in srgb, var(--bf-brand-primary) 34%, transparent);
}

/* Favorite (floating, top-right of the card) */
.bf-browse .bf-region__main .bf-result__fav {
  position: absolute;
  top: var(--bf-space-3);
  right: var(--bf-space-3);
  z-index: 3;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--bf-radius-pill);
  border: 1px solid var(--bf-color-border);
  background: color-mix(in srgb, #fff 92%, transparent);
  color: var(--bf-brand-accent);
  font-size: var(--bf-text-lg);
}
.bf-browse .bf-region__main .bf-result__fav a {
  color: inherit;
  cursor: pointer;
  line-height: 0;
}

/* Body (the detail link) */
.bf-browse .bf-region__main .bf-result .detail-link {
  grid-area: body;
  display: block;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  padding: var(--bf-space-4) var(--bf-space-5) var(--bf-space-3);
}
.bf-browse .bf-region__main .bf-result__body {
  min-width: 0;
}
.bf-browse .bf-region__main .bf-result__kicker {
  display: block;
  font-family: var(--bf-font-display);
  font-weight: var(--bf-weight-bold);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--bf-brand-primary) 55%, #000);
  margin-bottom: 5px;
}
.bf-browse .bf-region__main .bf-result__body h4 {
  margin: 0 0 var(--bf-space-2);
  padding-right: 44px;
  font-family: var(--bf-font-display);
  font-weight: var(--bf-weight-bold);
  font-size: var(--bf-text-xl);
  line-height: var(--bf-leading-tight);
  color: var(--bf-color-text);
}
.bf-browse .bf-region__main .bf-result__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bf-space-2);
  margin-bottom: var(--bf-space-3);
}
.bf-browse .bf-region__main .bf-result__fact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: var(--bf-weight-medium);
  color: var(--bf-color-text-muted);
  background: var(--bf-color-surface-alt);
  border-radius: var(--bf-radius-pill);
  padding: 5px 11px;
}
.bf-browse .bf-region__main .bf-result__fact .fa {
  color: var(--bf-brand-accent);
}
.bf-browse .bf-region__main .bf-result__desc {
  margin: 0;
  font-size: var(--bf-text-sm);
  line-height: var(--bf-leading-normal);
  color: #4a4a4a;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Footer (publication + share + View) */
.bf-browse .bf-region__main .bf-result__foot {
  grid-area: foot;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bf-space-3);
  flex-wrap: wrap;
  margin: 0 var(--bf-space-5) var(--bf-space-4);
  padding-top: var(--bf-space-3);
  border-top: 1px solid var(--bf-color-surface-alt);
}
.bf-browse .bf-region__main .bf-result__store {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: var(--bf-weight-medium);
  color: var(--bf-color-text-muted);
}
.bf-browse .bf-region__main .bf-result__store .fa {
  color: color-mix(in srgb, var(--bf-brand-primary) 55%, #000);
}
.bf-browse .bf-region__main .bf-result__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--bf-space-2);
}
.bf-browse .bf-region__main .bf-result__act {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--bf-radius-pill);
  border: 1px solid var(--bf-color-border);
  background: var(--bf-color-surface);
  color: var(--bf-color-text-muted);
  cursor: pointer;
  transition: border-color var(--bf-transition-fast), color var(--bf-transition-fast);
}
.bf-browse .bf-region__main .bf-result__act:hover {
  border-color: var(--bf-brand-primary);
  color: color-mix(in srgb, var(--bf-brand-primary) 55%, #000);
}
.bf-browse .bf-region__main .bf-result__view {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--bf-font-display);
  font-weight: var(--bf-weight-bold);
  font-size: 13px;
  color: var(--bf-brand-primary-ink);
  padding: 8px 15px;
  border-radius: var(--bf-radius-pill);
  background: linear-gradient(120deg, var(--bf-brand-primary), var(--bf-brand-accent));
  box-shadow: 0 6px 14px color-mix(in srgb, var(--bf-brand-primary) 30%, transparent);
}
.bf-browse .bf-region__main .bf-result__view:hover {
  filter: brightness(1.05);
}

@media (max-width: 640px) {
  .bf-browse .bf-region__main .bf-result {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: "media" "body" "foot";
  }
  .bf-browse .bf-region__main .bf-result__media {
    min-height: 168px;
  }
}

/* -- Interleaved place-ad promo as a dark aurora tile. ------------------------- */
.bf-browse .bf-region__main .bf-click-here {
  position: relative;
  overflow: hidden;
  margin: 0 0 var(--bf-space-4);
  padding: 0;
  border-radius: var(--bf-radius-lg);
  background: linear-gradient(120deg, var(--bf-brand-secondary), color-mix(in srgb, var(--bf-brand-secondary) 55%, #000));
}
.bf-browse .bf-region__main .bf-click-here::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(400px 200px at 88% 120%, color-mix(in srgb, var(--bf-brand-accent) 55%, transparent), transparent 70%),
    radial-gradient(360px 200px at 6% -30%, color-mix(in srgb, var(--bf-brand-primary) 50%, transparent), transparent 70%);
  pointer-events: none;
}
/* The link is a real flex row of two elements: a text span (pitch) + a pill CTA,
   so the copy no longer shatters into flex items the way raw text nodes did. */
.bf-browse .bf-region__main .bf-click-here__link {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bf-space-5);
  /* zero the legacy .search-result-item margin-bottom + box-shadow that the <a>
     also inherits (inside overflow:hidden they showed as a line + dead space). */
  margin: 0;
  box-shadow: none;
  padding: var(--bf-space-4) var(--bf-space-5);
  color: var(--bf-color-text-inverse);
  text-decoration: none;
}
.bf-browse .bf-region__main .bf-click-here__text {
  flex: 1 1 auto;
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-lg);
  font-weight: var(--bf-weight-bold);
  line-height: var(--bf-leading-normal);
  text-align: left;
}
.bf-browse .bf-region__main .bf-click-here__text strong {
  color: color-mix(in srgb, var(--bf-brand-accent) 35%, #fff);
}
.bf-browse .bf-region__main .bf-click-here__cta {
  flex: 0 0 auto;
  padding: var(--bf-space-2) var(--bf-space-4);
  border-radius: var(--bf-radius-pill);
  background: var(--bf-color-surface);
  color: color-mix(in srgb, var(--bf-brand-secondary) 70%, #000);
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-bold);
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}
/* Hide the sm/xs mobile place-ad variant at desktop widths (its visible-* utility
   was leaking through as a second bar beside the desktop promo). */
@media (min-width: 992px) {
  .bf-browse .bf-region__main .bf-click-here-mobile {
    display: none !important;
  }
}
/* Mobile promo variant keeps padded, centered copy (the container padding was
   zeroed for the desktop flex layout). */
.bf-browse .bf-region__main .bf-click-here-mobile a {
  display: block;
  padding: var(--bf-space-4);
  color: var(--bf-color-text-inverse);
  text-align: center;
  text-decoration: none;
}

/* -- Pill paginator. ----------------------------------------------------------- */
.bf-browse .bf-region__main #search_pagination hr {
  border: 0;
  border-top: 1px solid var(--bf-color-border);
  margin: var(--bf-space-5) 0 var(--bf-space-4);
}
.bf-browse .bf-region__main .search_page-of-page {
  font-family: var(--bf-font-display);
  font-weight: var(--bf-weight-bold);
  color: var(--bf-color-text-muted);
}
.bf-browse .bf-region__main .search_pagination-results ul {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--bf-space-1);
  list-style: none;
  margin: 0 var(--bf-space-2);
  padding: 0;
}
.bf-browse .bf-region__main .search_pagination-results li a {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 var(--bf-space-3);
  border-radius: var(--bf-radius-md);
  border: 1px solid var(--bf-color-border);
  background: var(--bf-color-surface);
  font-family: var(--bf-font-display);
  font-weight: var(--bf-weight-bold);
  color: var(--bf-color-text);
  text-decoration: none;
}
.bf-browse .bf-region__main .search_pagination-results li.active a,
.bf-browse .bf-region__main .search_pagination-results li.search_pagination-current a {
  color: var(--bf-brand-primary-ink);
  border-color: transparent;
  background: linear-gradient(120deg, var(--bf-brand-primary), var(--bf-brand-accent));
}
.bf-browse .bf-region__main .search_pagination-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--bf-font-display);
  font-weight: var(--bf-weight-bold);
  color: color-mix(in srgb, var(--bf-brand-primary) 55%, #000);
  text-decoration: none;
}

/* Tokenized result location line (kept from the earlier pass). */
.bf-browse .bf-result__loc {
  color: var(--bf-color-text-muted);
}

/* -- The Google results map, framed as an Aurora "Dusk" console atop the
   results column. The map tiles are recolored by the JSON style array in
   initMap() (bluefin/scripts.js); this frames the panel, draws the header +
   count, and darkens Google's info window to match the navy map. The 400px map
   body height stays in the page-head style (#map). ------------------------- */
:is(.bf-browse, .bf-home, .bf-om) .bf-map-frame:not(.hide) {
  margin-bottom: var(--bf-space-5);
  border: 1px solid #2a3a58;
  border-radius: var(--bf-radius-lg);
  overflow: hidden;
  background: #16233b;
  box-shadow: var(--bf-shadow-md), 0 0 0 4px color-mix(in srgb, var(--bf-brand-primary) 6%, transparent);
}
:is(.bf-browse, .bf-home, .bf-om) .bf-map-frame__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bf-space-3);
  padding: 11px var(--bf-space-4);
  background: linear-gradient(120deg, #182741, #20172a);
  border-bottom: 1px solid #2a3a58;
}
:is(.bf-browse, .bf-home, .bf-om) .bf-map-frame__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--bf-font-display);
  font-weight: var(--bf-weight-bold);
  font-size: var(--bf-text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #cfe0ea;
}
:is(.bf-browse, .bf-home, .bf-om) .bf-map-frame__label .fa {
  color: color-mix(in srgb, var(--bf-brand-accent) 70%, #fff);
}
:is(.bf-browse, .bf-home, .bf-om) .bf-map-frame__count {
  font-size: 12.5px;
  font-weight: var(--bf-weight-medium);
  color: #9fb2cf;
}

/* Darken Google's generated info window into a dusk card to match the map. */
:is(.bf-browse, .bf-home, .bf-om) .gm-style .gm-style-iw-c {
  padding: 12px 14px !important;
  background: #1b2a44;
  border: 1px solid #2f4368;
  border-radius: 14px;
  box-shadow: 0 16px 30px rgba(6, 10, 20, 0.5);
}
:is(.bf-browse, .bf-home, .bf-om) .gm-style .gm-style-iw-d {
  overflow: hidden !important;
  color: #e7eef7;
}
:is(.bf-browse, .bf-home, .bf-om) .gm-style .gm-style-iw-t::after {
  background: linear-gradient(45deg, #1b2a44 50%, rgba(27, 42, 68, 0) 51%);
}
:is(.bf-browse, .bf-home, .bf-om) .gm-style .gm-style-iw-c strong {
  color: #ffffff;
}
:is(.bf-browse, .bf-home, .bf-om) .gm-style .gm-style-iw-c a {
  color: color-mix(in srgb, var(--bf-brand-accent) 60%, #fff);
  font-weight: var(--bf-weight-medium);
}
:is(.bf-browse, .bf-home, .bf-om) .gm-style .gm-ui-hover-effect > span {
  background-color: #9fb2cf !important;
}

/* -- Left-rail extras (ad / featured / safety), now stacked under the filters. --
   Give them a tidy vertical rhythm and tame the legacy widget chrome so they read
   as one calm stack rather than loose fragments floating on the paper field. ---- */
.bf-browse .bf-region__sidebar {
  display: block;
}
/* Kill the legacy #search-page-ads margin-top:50px (an ID rule, hence the extra
   class here to win specificity); the grid gap already spaces the rail. */
.bf-browse #search-page-ads.bf-region__sidebar {
  margin-top: 0;
}
.bf-browse .bf-region__sidebar > * {
  margin-bottom: var(--bf-space-4);
}
.bf-browse .bf-region__sidebar > center {
  display: block;
}
/* Block, full-width ad rail: a flex column can starve a responsive ad unit's
   width detection and squeeze it narrow. Keep it a plain full-width block. */
.bf-browse .bf-region__sidebar .bf-adslot,
.bf-browse .bf-region__sidebar .bf-adrail {
  width: 100%;
  margin: 0 0 var(--bf-space-4);
  text-align: center;
}
.bf-browse .bf-region__sidebar .bf-adrail :is(ins, iframe, img, .adsbygoogle) {
  max-width: 100%;
}
.bf-browse .bf-region__sidebar .bf-adrail > br:first-child {
  display: none;
}


/* =============================================================================
   MARKETPLACE AD DETAIL - Concept C "Split Concierge" (ad_listing.php). The
   editorial paper frame is shed for a two-pane split: a wide LEFT column with a
   media STAGE (a Photos / Map toggle) above the write-up (attribute spec grid +
   description), beside a sticky RIGHT CONCIERGE (source identity, save/report
   actions, share, the inline email + report panels, owner tools). The featured /
   previously-viewed / ad rail stays a full-width band below (.bf-adview-related).
   Color/space from tokens; brand color as accent + gradient borders only.
   ============================================================================= */

:is(.bf-home, .bf-om) .bf-adview--concierge {
  margin-bottom: var(--bf-space-5);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: grid;
  gap: var(--bf-space-5);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 1000px) {
  :is(.bf-home, .bf-om) .bf-adview--concierge {
    grid-template-columns: minmax(0, 1.55fr) minmax(340px, 1fr);
  }
}

:is(.bf-home, .bf-om) .bf-adview__main {
  min-width: 0;
}

/* --- media stage: Photos / Map, a rounded gradient-bordered frame --- */
:is(.bf-home, .bf-om) .bf-adview__stage {
  position: relative;
  margin-bottom: var(--bf-space-5);
  padding: var(--bf-space-3);
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(125deg, var(--bf-brand-primary), var(--bf-brand-secondary), var(--bf-brand-accent)) border-box;
  border: 1.5px solid transparent;
  border-radius: var(--bf-radius-xl);
  box-shadow: var(--bf-shadow-md);
}

:is(.bf-home, .bf-om) .bf-adview__stagetabs {
  display: flex;
  gap: var(--bf-space-1);
  width: fit-content;
  margin-bottom: var(--bf-space-3);
  padding: var(--bf-space-1);
  background: var(--bf-color-surface-alt);
  border-radius: var(--bf-radius-pill);
}

:is(.bf-home, .bf-om) .bf-adview__stagetab {
  display: inline-flex;
  align-items: center;
  gap: var(--bf-space-2);
  height: 34px;
  padding: 0 var(--bf-space-4);
  border: 0;
  border-radius: var(--bf-radius-pill);
  background: transparent;
  cursor: pointer;
  font-family: var(--bf-font-display);
  font-weight: var(--bf-weight-bold);
  font-size: var(--bf-text-sm);
  color: var(--bf-color-text-muted);
}

:is(.bf-home, .bf-om) .bf-adview__stagetab.is-on {
  color: var(--bf-color-on-primary);
  background: linear-gradient(120deg, var(--bf-brand-primary), var(--bf-brand-accent));
}

:is(.bf-home, .bf-om) .bf-adview__stagepane {
  display: none;
}

:is(.bf-home, .bf-om) .bf-adview__stagepane.is-on {
  display: block;
}

/* photos pane: soften the legacy gallery + rebrand the orange thumb border
   (hozi.main.css loads after this file, but these rules out-specify it) */
:is(.bf-home, .bf-om) .bf-adview__stage .ad-gallery {
  margin: 0;
}

:is(.bf-home, .bf-om) .bf-adview__stage .ad-theatre {
  border-radius: var(--bf-radius-lg);
}

:is(.bf-home, .bf-om) .bf-adview__stage .ad-thumb {
  border-radius: var(--bf-radius-sm);
  overflow: hidden;
}

:is(.bf-home, .bf-om) .bf-adview__stage .ad-thumb.active,
:is(.bf-home, .bf-om) .bf-adview__stage .ad-thumb:hover {
  border-color: var(--bf-brand-primary);
}

/* map pane: the #map (400px, set in the page head) sits in a rounded well */
:is(.bf-home, .bf-om) .bf-adview__stage .bf-adview__map {
  margin: 0;
  border: 0;
  border-radius: var(--bf-radius-lg);
}

/* --- the write-up: a clean card holding the spec grid + description --- */
:is(.bf-home, .bf-om) .bf-adview--concierge .bf-adview__body {
  background: var(--bf-color-surface);
  border: 1px solid var(--bf-color-border);
  border-radius: var(--bf-radius-xl);
  padding: var(--bf-space-5) var(--bf-space-6);
  box-shadow: var(--bf-shadow-sm);
}

:is(.bf-home, .bf-om) .bf-adview__bodyhd {
  display: flex;
  align-items: center;
  gap: var(--bf-space-3);
  margin: 0 0 var(--bf-space-4);
  font-family: var(--bf-font-display);
  font-weight: var(--bf-weight-bold);
  font-size: var(--bf-text-xl);
}

:is(.bf-home, .bf-om) .bf-adview__bodyhd::before {
  content: "";
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--bf-brand-primary), var(--bf-brand-accent));
}

/* attribute spec grid (was a run of <strong>label</strong>: value<br/>) */
:is(.bf-home, .bf-om) .bf-adview__spec {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--bf-space-6);
  margin: 0 0 var(--bf-space-5);
}

:is(.bf-home, .bf-om) .bf-adview__specrow {
  display: flex;
  justify-content: space-between;
  gap: var(--bf-space-4);
  padding: var(--bf-space-3) 0;
  border-bottom: 1px solid var(--bf-color-surface-alt);
}

:is(.bf-home, .bf-om) .bf-adview__specrow dt {
  color: var(--bf-color-text-muted);
  font-size: var(--bf-text-sm);
}

:is(.bf-home, .bf-om) .bf-adview__specrow dd {
  margin: 0;
  font-weight: var(--bf-weight-medium);
  font-size: var(--bf-text-sm);
  text-align: right;
}

:is(.bf-home, .bf-om) .bf-adview__prose {
  font-size: var(--bf-text-base);
  line-height: var(--bf-leading-loose);
  color: var(--bf-color-text);
}

@media (max-width: 640px) {
  :is(.bf-home, .bf-om) .bf-adview__spec {
    grid-template-columns: 1fr;
  }
}

/* --- the sticky concierge --- */
:is(.bf-home, .bf-om) .bf-adview__concierge {
  min-width: 0;
}

:is(.bf-home, .bf-om) .bf-adview__conciergesticky {
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-4);
}

@media (min-width: 1000px) {
  :is(.bf-home, .bf-om) .bf-adview__conciergesticky {
    position: sticky;
    top: var(--bf-space-6);
  }
}

/* head card: gradient border, kicker, title, meta */
:is(.bf-home, .bf-om) .bf-adview__headcard {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(150deg, color-mix(in srgb, var(--bf-brand-primary) 55%, #fff), color-mix(in srgb, var(--bf-brand-accent) 45%, #fff)) border-box;
  border: 1.5px solid transparent;
  border-radius: var(--bf-radius-xl);
  box-shadow: var(--bf-shadow-md);
}

:is(.bf-home, .bf-om) .bf-adview__kicker {
  display: inline-block;
  margin-bottom: var(--bf-space-2);
  font-family: var(--bf-font-display);
  font-weight: var(--bf-weight-bold);
  font-size: var(--bf-text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bf-color-primary-text);
}

:is(.bf-home, .bf-om) .bf-adview--concierge .bf-adview__title {
  margin: 0 0 var(--bf-space-3);
  padding-bottom: 0;
  font-size: var(--bf-text-2xl);
  border-bottom: 0;
}

:is(.bf-home, .bf-om) .bf-adview--concierge .bf-adview__meta {
  margin: 0;
  padding: 0;
  font-size: var(--bf-text-sm);
  line-height: var(--bf-leading-normal);
  color: var(--bf-color-text-muted);
  border-bottom: 0;
}

/* source identity */
:is(.bf-home, .bf-om) .bf-adview__seller {
  display: flex;
  align-items: center;
  gap: var(--bf-space-3);
  padding: var(--bf-space-3) var(--bf-space-4);
  background: var(--bf-color-surface);
  border: 1px solid var(--bf-color-border);
  border-radius: var(--bf-radius-lg);
  box-shadow: var(--bf-shadow-sm);
}

:is(.bf-home, .bf-om) .bf-adview__selleravatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--bf-radius-pill);
  color: var(--bf-color-on-primary);
  font-size: var(--bf-text-lg);
  background: linear-gradient(140deg, var(--bf-brand-primary), var(--bf-brand-accent));
}

:is(.bf-home, .bf-om) .bf-adview__sellerid b {
  display: block;
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-base);
}

:is(.bf-home, .bf-om) .bf-adview__sellerid span {
  font-size: var(--bf-text-sm);
  color: var(--bf-color-text-muted);
}

/* actions: Save / Report as a matched pair */
:is(.bf-home, .bf-om) .bf-adview__actions {
  display: flex;
  gap: var(--bf-space-2);
}

:is(.bf-home, .bf-om) .bf-adview__act {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bf-space-2);
  height: 44px;
  border: 1px solid var(--bf-color-border);
  border-radius: var(--bf-radius-md);
  background: var(--bf-color-surface);
  cursor: pointer;
  font-family: var(--bf-font-body);
  font-weight: var(--bf-weight-medium);
  font-size: var(--bf-text-sm);
  color: var(--bf-color-text);
  transition: border-color var(--bf-transition-fast), color var(--bf-transition-fast);
}

:is(.bf-home, .bf-om) .bf-adview__act:hover {
  border-color: var(--bf-brand-primary);
  color: var(--bf-color-primary-text);
}

:is(.bf-home, .bf-om) .bf-adview__act.is-active {
  border-color: var(--bf-brand-accent);
  color: var(--bf-color-accent-hover);
}

/* concierge share row (shareExternalLinks sprite icons): centered */
:is(.bf-home, .bf-om) .bf-adview--concierge .bf-adview__share {
  justify-content: center;
  gap: var(--bf-space-3);
  margin: 0;
  padding: var(--bf-space-2) 0;
}

/* owner/dealer tools inside the concierge: a dashed "shown to the owner" box */
:is(.bf-home, .bf-om) .bf-adview__ownerbox {
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-2);
  padding: var(--bf-space-4);
  border: 1px dashed color-mix(in srgb, var(--bf-color-warning) 55%, #d8b060);
  border-radius: var(--bf-radius-lg);
  background: color-mix(in srgb, var(--bf-color-warning) 6%, #fff);
}

:is(.bf-home, .bf-om) .bf-adview__ownernote {
  display: inline-flex;
  align-items: center;
  gap: var(--bf-space-2);
  font-family: var(--bf-font-display);
  font-weight: var(--bf-weight-bold);
  font-size: var(--bf-text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bf-color-warning);
}

/* the owner action buttons stack full-width, compact */
:is(.bf-home, .bf-om) .bf-adview__ownerbox .bf-adview__owner {
  margin: 0;
  text-align: left;
}

:is(.bf-home, .bf-om) .bf-adview__ownerbox .bf-adview__owner + .bf-adview__owner {
  margin-top: var(--bf-space-2);
}

:is(.bf-home, .bf-om) .bf-adview__ownerbox .bf-btn {
  display: block;
  width: 100%;
  text-align: center;
}

/* sidebar ad (.bf-adrail) tucked into the concierge column, below the tools */
:is(.bf-home, .bf-om) .bf-adview__concierge .bf-adrail {
  max-width: 100%;
  margin: 0;
  text-align: center;
  overflow: hidden;
}

:is(.bf-home, .bf-om) .bf-adview__concierge .bf-adrail img,
:is(.bf-home, .bf-om) .bf-adview__concierge .bf-adrail iframe,
:is(.bf-home, .bf-om) .bf-adview__concierge .bf-adrail ins {
  max-width: 100%;
  height: auto;
}

/* concierge share row: a muted label + round icon buttons (replaces the legacy
   sprite circles) */
:is(.bf-home, .bf-om) .bf-adview--concierge .bf-adview__share {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--bf-space-2);
  margin: 0;
  padding: 0;
  font-size: var(--bf-text-base);
}

:is(.bf-home, .bf-om) .bf-adview__sharelbl {
  margin-right: auto;
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-medium);
  color: var(--bf-color-text-muted);
}

:is(.bf-home, .bf-om) .bf-adview__sharebtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--bf-color-border);
  border-radius: var(--bf-radius-pill);
  background: var(--bf-color-surface);
  color: var(--bf-color-text-muted);
  font-size: var(--bf-text-lg);
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--bf-transition-fast), color var(--bf-transition-fast), background var(--bf-transition-fast);
}

:is(.bf-home, .bf-om) .bf-adview__sharebtn:hover {
  border-color: var(--bf-brand-primary);
  color: var(--bf-color-primary-text);
  background: color-mix(in srgb, var(--bf-brand-primary) 8%, #fff);
}

/* back-to-category crumb + prev/next, together in a bar above the detail */
:is(.bf-home, .bf-om) .bf-adview-crumbbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bf-space-3);
  flex-wrap: wrap;
  margin: 0 0 var(--bf-space-4);
}

:is(.bf-home, .bf-om) .bf-adview-crumb {
  display: inline-flex;
  align-items: center;
  gap: var(--bf-space-2);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-medium);
  color: var(--bf-color-text-muted);
  text-decoration: none;
}

:is(.bf-home, .bf-om) .bf-adview-crumb .fa {
  color: var(--bf-brand-accent);
}

:is(.bf-home, .bf-om) .bf-adview-crumb:hover {
  color: var(--bf-color-text);
}

/* prev/next listing nav: compact pills grouped to the right of the crumb bar */
:is(.bf-home, .bf-om) .bf-adview-nav {
  display: inline-flex;
  gap: var(--bf-space-2);
  margin: 0;
}

/* the re-homed rail, now a band below the listing: the featured / previously-
   viewed / ad widgets flow side by side (each capped to a rail-width column so
   their hard-coded internal widths fit) and wrap on narrow viewports; the
   safety-tips trigger sits beneath. */
:is(.bf-home, .bf-om) .bf-adview-related {
  margin-top: var(--bf-space-6);
  padding-top: var(--bf-space-5);
  border-top: 1px solid var(--bf-color-border-strong);
}

:is(.bf-home, .bf-om) .bf-adview-related__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bf-space-5);
  align-items: flex-start;
}

:is(.bf-home, .bf-om) .bf-adview-related__grid > * {
  flex: 1 1 300px;
  min-width: 280px;
  max-width: 380px;
}

:is(.bf-home, .bf-om) .bf-adview-related__safety {
  margin-top: var(--bf-space-4);
}

/* ---------------------------------------------------------------------------
   AUTH GATE  (W4: authorized_login - the centered "secure door" login card)
   --------------------------------------------------------------------------- */

/* Center the gate card in a calm canvas: the focused admin/CSR login wall. */
:is(.bf-home, .bf-om) .bf-om-gate {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62vh;
  padding: var(--bf-space-8) 0;
}

:is(.bf-home, .bf-om) .bf-om-gate__card {
  width: 100%;
  max-width: 440px;
}

/* The lock chip above the heading: brand accent as a soft wash only (the glyph
   is decorative; its color is the text-safe primary-text token, never the raw
   teal carrying text). */
:is(.bf-home, .bf-om) .bf-om-gate__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--bf-space-3);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bf-brand-accent) 14%, transparent);
  color: var(--bf-color-primary-text);
  font-size: 22px;
}

:is(.bf-home, .bf-om) .bf-om-gate__sub {
  margin: 0 0 var(--bf-space-5);
  color: var(--bf-color-text-muted);
}

/* The gate's primary action spans the card. */
:is(.bf-home, .bf-om) .bf-om-gate__submit {
  width: 100%;
  margin-top: var(--bf-space-2);
}

/* ---------------------------------------------------------------------------
   VERIFY / ACCOUNT-STATUS GATE  (W5: verify_customer - the centered status
   card: verify-pending / success / logged-out)
   --------------------------------------------------------------------------- */

/* Centered page-head above the status card: kicker + the single heading, no
   heavy section rule (the gate stays calm). */
:is(.bf-home, .bf-om) .bf-om-verify__head {
  text-align: center;
  margin: var(--bf-space-8) 0 var(--bf-space-5);
}

:is(.bf-home, .bf-om) .bf-om-verify__head .bf-kicker {
  justify-content: center;
}

:is(.bf-home, .bf-om) .bf-om-verify__head h1 {
  margin: var(--bf-space-2) 0 0;
  border: 0;
}

/* The status card(s) centered in a narrow column. */
:is(.bf-home, .bf-om) .bf-om-verify {
  max-width: 480px;
  margin: 0 auto;
}

:is(.bf-home, .bf-om) .bf-om-verify__card .bf-card__body {
  padding: var(--bf-space-7);
  text-align: center;
}

/* The envelope chip above the copy: brand primary as a soft wash only (the
   glyph is decorative; its color is the text-safe primary-text token, never the
   raw teal carrying text). */
:is(.bf-home, .bf-om) .bf-om-verify__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--bf-space-3);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bf-brand-primary) 14%, transparent);
  color: var(--bf-color-primary-text);
  font-size: 22px;
}

/* The verification-code field stays left-aligned inside the centered card. */
:is(.bf-home, .bf-om) .bf-om-verify .bf-field {
  text-align: left;
}

/* Submit + Resend stack full-width under the field. */
:is(.bf-home, .bf-om) .bf-om-verify__actions {
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-2);
  margin-top: var(--bf-space-4);
}

:is(.bf-home, .bf-om) .bf-om-verify__actions .bf-btn {
  width: 100%;
}

/* ============================================================================
   CUSTOMER-ADMIN CONSOLE (W6)
   The CSR "Search for Customer" admin tool, promoted to Open Market: a two-pane
   working surface (a sticky identity rail beside the edit-form detail) with the
   dense customer-edit form organized into labelled groups + a two-column field
   grid. One new component for the account/auth tier's admin tool (cf.
   .bf-om-gate / .bf-om-verify).
   ========================================================================== */

/* the console: identity rail + edit detail */
:is(.bf-home, .bf-om) .bf-om-console {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: var(--bf-space-5);
  align-items: start;
  margin-bottom: var(--bf-space-8);
}

:is(.bf-home, .bf-om) .bf-om-console__rail {
  display: grid;
  gap: var(--bf-space-4);
  align-self: start;
}

/* the rail tracks the form on wide screens; both stack on narrow ones */
@media (min-width: 861px) {
  :is(.bf-home, .bf-om) .bf-om-console__rail {
    position: sticky;
    top: var(--bf-space-5);
  }
}

@media (max-width: 860px) {
  :is(.bf-home, .bf-om) .bf-om-console {
    grid-template-columns: 1fr;
  }
}

/* the CSR per-portal box reads as a highlighted sub-panel within the role group */
:is(.bf-home, .bf-om) .bf-om-console__subpanel {
  margin-top: var(--bf-space-3);
  padding: var(--bf-space-4);
  border-radius: var(--bf-radius-md);
  background: color-mix(in srgb, var(--bf-brand-primary) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--bf-brand-primary) 22%, transparent);
}

:is(.bf-home, .bf-om) .bf-om-console select[multiple] {
  min-height: 7.5em;
}

/* grouped form sections with hairline-ruled heads */
:is(.bf-home, .bf-om) .bf-om-console__section {
  margin-top: var(--bf-space-6);
}

:is(.bf-home, .bf-om) .bf-om-console__section:first-of-type {
  margin-top: var(--bf-space-4);
}

:is(.bf-home, .bf-om) .bf-om-console__section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--bf-space-2);
  margin: 0 0 var(--bf-space-3);
  padding-bottom: var(--bf-space-2);
  border-bottom: 1px solid var(--bf-color-border);
}

:is(.bf-home, .bf-om) .bf-om-console__section-title {
  margin: 0;
  font-size: var(--bf-text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

:is(.bf-home, .bf-om) .bf-om-console__section-note {
  margin: 0;
  font-size: var(--bf-text-xs);
  color: var(--bf-color-text-muted);
}

/* two-column field grid; full-width fields opt out with __col-full */
:is(.bf-home, .bf-om) .bf-om-console__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bf-space-3) var(--bf-space-4);
}

:is(.bf-home, .bf-om) .bf-om-console__grid .bf-field {
  margin: 0;
}

:is(.bf-home, .bf-om) .bf-om-console__col-full {
  grid-column: 1 / -1;
}

@media (max-width: 520px) {
  :is(.bf-home, .bf-om) .bf-om-console__grid {
    grid-template-columns: 1fr;
  }
}

/* separated action footer: Save left, account actions right */
:is(.bf-home, .bf-om) .bf-om-console__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bf-space-3);
  margin-top: var(--bf-space-7);
  padding-top: var(--bf-space-5);
  border-top: 1px solid var(--bf-color-border);
}

:is(.bf-home, .bf-om) .bf-om-console__actions > .bf-btn:first-child {
  margin-right: auto;
}

@media (max-width: 520px) {
  :is(.bf-home, .bf-om) .bf-om-console__actions {
    flex-direction: column;
    align-items: stretch;
  }

  :is(.bf-home, .bf-om) .bf-om-console__actions > .bf-btn:first-child {
    margin-right: 0;
  }
}

/* ===== orders_history: status-led order board + compact order card (W7) ===== */
:is(.bf-home, .bf-om) .bf-om-orders-board {
  display: grid;
  gap: var(--bf-space-4);
}

:is(.bf-home, .bf-om) .bf-om-orders {
  position: relative;
  overflow: hidden;
}

:is(.bf-home, .bf-om) .bf-om-orders::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--bf-color-border);
}

:is(.bf-home, .bf-om) .bf-om-orders.is-active::before {
  background: var(--bf-color-success);
}

:is(.bf-home, .bf-om) .bf-om-orders.is-hold::before {
  background: var(--bf-color-warning);
}

:is(.bf-home, .bf-om) .bf-om-orders.is-waiting::before {
  background: var(--bf-brand-primary);
}

:is(.bf-home, .bf-om) .bf-om-orders.is-expired::before {
  background: var(--bf-color-border-strong);
}

:is(.bf-home, .bf-om) .bf-om-orders > .bf-card__body {
  padding-left: calc(var(--bf-space-5) + 4px);
}

/* header line: chip . ref . category .... hide */
:is(.bf-home, .bf-om) .bf-om-orders__head {
  display: flex;
  align-items: center;
  gap: var(--bf-space-3);
  flex-wrap: wrap;
  padding-bottom: var(--bf-space-3);
  border-bottom: 1px solid var(--bf-color-border);
}

:is(.bf-home, .bf-om) .bf-om-orders__ref {
  font-weight: 700;
  color: var(--bf-color-text);
  text-decoration: none;
}

:is(.bf-home, .bf-om) .bf-om-orders__ref:hover {
  color: var(--bf-color-primary-text);
}

:is(.bf-home, .bf-om) .bf-om-orders__cat {
  color: var(--bf-color-text-muted);
  font-size: var(--bf-text-sm);
}

:is(.bf-home, .bf-om) .bf-om-orders__head-actions {
  margin-left: auto;
}

:is(.bf-home, .bf-om) .bf-om-orders__hide {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--bf-color-text-muted);
  width: 30px;
  height: 30px;
  border-radius: var(--bf-radius-sm);
}

:is(.bf-home, .bf-om) .bf-om-orders__hide:hover {
  background: var(--bf-color-surface-sunken);
  color: var(--bf-color-text);
}

/* status chip */
:is(.bf-home, .bf-om) .bf-om-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--bf-space-1);
  white-space: nowrap;
  font-size: var(--bf-text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px var(--bf-space-2);
  border-radius: 999px;
  border: 1px solid var(--bf-color-border);
  background: var(--bf-color-surface-sunken);
  color: var(--bf-color-text-muted);
}

:is(.bf-home, .bf-om) .bf-om-chip.is-active {
  color: var(--bf-color-success);
  background: var(--bf-color-success-bg);
  border-color: color-mix(in srgb, var(--bf-color-success) 35%, transparent);
}

:is(.bf-home, .bf-om) .bf-om-chip.is-hold {
  color: var(--bf-color-warning);
  background: var(--bf-color-warning-bg);
  border-color: color-mix(in srgb, var(--bf-color-warning) 35%, transparent);
}

:is(.bf-home, .bf-om) .bf-om-chip.is-waiting {
  color: var(--bf-color-primary-text);
  background: color-mix(in srgb, var(--bf-brand-primary) 12%, transparent);
  border-color: color-mix(in srgb, var(--bf-brand-primary) 30%, transparent);
}

/* body: facts grid + ad preview */
:is(.bf-home, .bf-om) .bf-om-orders__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: var(--bf-space-5);
  padding: var(--bf-space-4) 0;
}

:is(.bf-home, .bf-om) .bf-om-orders__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--bf-space-3) var(--bf-space-4);
  align-content: start;
}

:is(.bf-home, .bf-om) .bf-om-orders__fact {
  min-width: 0;
}

:is(.bf-home, .bf-om) .bf-om-orders__k {
  display: block;
  font-size: var(--bf-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bf-color-text-muted);
}

:is(.bf-home, .bf-om) .bf-om-orders__v {
  font-weight: 600;
  font-size: var(--bf-text-sm);
  overflow-wrap: anywhere;
}

:is(.bf-home, .bf-om) .bf-om-orders__facts > .bf-btn {
  justify-self: start;
}

:is(.bf-home, .bf-om) .bf-om-orders__pricing,
:is(.bf-home, .bf-om) .bf-om-orders__pub {
  grid-column: 1 / -1;
  font-size: var(--bf-text-sm);
}

:is(.bf-home, .bf-om) .bf-om-orders__pricing label,
:is(.bf-home, .bf-om) .bf-om-orders__pub label {
  color: var(--bf-color-text-muted);
  font-weight: 600;
}

:is(.bf-home, .bf-om) .bf-om-orders__facts hr,
:is(.bf-home, .bf-om) .bf-om-orders__pricing hr,
:is(.bf-home, .bf-om) .bf-om-orders__pub hr {
  margin: var(--bf-space-2) 0;
  border: 0;
  border-top: 1px solid var(--bf-color-border);
}

/* ad preview column */
:is(.bf-home, .bf-om) .bf-om-orders__preview {
  border: 1px solid var(--bf-color-border);
  border-radius: var(--bf-radius-md);
  padding: var(--bf-space-3);
  background: var(--bf-color-surface-alt);
  min-width: 0;
}

:is(.bf-home, .bf-om) .bf-om-orders__preview label {
  display: block;
  font-size: var(--bf-text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bf-color-text-muted);
}

:is(.bf-home, .bf-om) .bf-om-orders__preview img {
  max-width: 100%;
  height: auto;
}

:is(.bf-home, .bf-om) .bf-om-orders__preview .cat-col-txt {
  min-width: 0 !important;
  max-width: 100% !important;
  margin-top: var(--bf-space-2) !important;
  font-size: var(--bf-text-base) !important;
}

/* collapsible order notes (wraps getPlaceadOrdersNotes output) */
:is(.bf-home, .bf-om) .bf-om-orders__notes {
  border: 1px solid var(--bf-color-border);
  border-radius: var(--bf-radius-md);
  background: var(--bf-color-surface-alt);
  margin-bottom: var(--bf-space-4);
}

:is(.bf-home, .bf-om) .bf-om-orders__notes > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--bf-space-2);
  padding: var(--bf-space-2) var(--bf-space-3);
  font-size: var(--bf-text-sm);
  font-weight: 600;
  color: var(--bf-color-text);
}

:is(.bf-home, .bf-om) .bf-om-orders__notes > summary::-webkit-details-marker {
  display: none;
}

:is(.bf-home, .bf-om) .bf-om-orders__notes > summary .fa-chevron-right {
  color: var(--bf-color-text-muted);
  font-size: 0.8em;
  transition: transform var(--bf-transition-fast);
}

:is(.bf-home, .bf-om) .bf-om-orders__notes[open] > summary .fa-chevron-right {
  transform: rotate(90deg);
}

:is(.bf-home, .bf-om) .bf-om-orders__notes-body {
  max-height: 180px;
  overflow-y: auto;
  padding: var(--bf-space-2) var(--bf-space-3) var(--bf-space-3);
  border-top: 1px solid var(--bf-color-border);
  font-size: var(--bf-text-sm);
}

@media (prefers-reduced-motion: reduce) {
  :is(.bf-home, .bf-om) .bf-om-orders__notes > summary .fa-chevron-right {
    transition: none;
  }
}

/* action bar */
:is(.bf-home, .bf-om) .bf-om-orders__actions {
  display: flex;
  align-items: center;
  gap: var(--bf-space-2);
  flex-wrap: wrap;
  padding-top: var(--bf-space-4);
  border-top: 1px solid var(--bf-color-border);
}

:is(.bf-home, .bf-om) .bf-om-orders__note {
  width: 100%;
  margin: var(--bf-space-1) 0 0;
  font-style: italic;
  font-size: var(--bf-text-sm);
  color: var(--bf-color-text-muted);
}

/* More overflow menu (native details) */
:is(.bf-home, .bf-om) .bf-om-orders__more {
  position: relative;
  margin-left: auto;
}

:is(.bf-home, .bf-om) .bf-om-orders__more > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--bf-radius-sm);
  border: 1px solid var(--bf-color-border);
  background: var(--bf-color-surface);
  color: var(--bf-color-text-muted);
}

:is(.bf-home, .bf-om) .bf-om-orders__more > summary::-webkit-details-marker {
  display: none;
}

:is(.bf-home, .bf-om) .bf-om-orders__more > summary:hover {
  border-color: var(--bf-color-border-strong);
  color: var(--bf-color-text);
}

:is(.bf-home, .bf-om) .bf-om-orders__more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 200px;
  z-index: 5;
  background: var(--bf-color-surface);
  border: 1px solid var(--bf-color-border);
  border-radius: var(--bf-radius-md);
  box-shadow: 0 10px 28px color-mix(in srgb, #000 16%, transparent);
  padding: var(--bf-space-1);
  display: grid;
  gap: 2px;
}

:is(.bf-home, .bf-om) .bf-om-orders__more-item {
  display: flex;
  align-items: center;
  gap: var(--bf-space-2);
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: var(--bf-text-sm);
  padding: var(--bf-space-2) var(--bf-space-3);
  border: 0;
  background: transparent;
  border-radius: var(--bf-radius-sm);
  cursor: pointer;
  color: var(--bf-color-text);
}

:is(.bf-home, .bf-om) .bf-om-orders__more-item:hover {
  background: var(--bf-color-surface-sunken);
}

:is(.bf-home, .bf-om) .bf-om-orders__more-item[disabled] {
  color: var(--bf-color-text-muted);
  cursor: not-allowed;
}

@media (max-width: 680px) {
  :is(.bf-home, .bf-om) .bf-om-orders__body {
    grid-template-columns: 1fr;
  }
}

/* ===========================================================================
   PLACE-AD WIZARD (W8) - Open Market "guided rail + canvas"
   Promotes place_ad.php's shell + category step to Open Market. Reuses the WS3
   .bf-steps / .bf-wizard-frame markup; these :is(.bf-home, .bf-om) rules outrank
   the .bf-scope (components.css) and hozi.main.css rules (.nav-tabs ...). One new
   component family; the category tiles are .bf-om-dept (the old .bf-pick-* rules
   in components.css are now orphaned - see docs/DEADCODE.md).
   =========================================================================== */

/* Wizard masthead: the editorial section head WITHOUT the shared .bf-section-head
   newspaper "double rule" (3px bar + hairline), which read heavy stacked above the
   guided rail. One quiet brand tick under the title stands in for it. Scoped to this
   page's header so the shared .bf-section-head device is untouched elsewhere. */
:is(.bf-home, .bf-om) .bf-om-wizard__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--bf-space-5);
  flex-wrap: wrap;
  padding: var(--bf-space-8) 0 var(--bf-space-6);
  margin-bottom: var(--bf-space-6);
}

:is(.bf-home, .bf-om) .bf-om-wizard__headlead {
  min-width: 0;
}

:is(.bf-home, .bf-om) .bf-om-wizard__head h1 {
  margin: var(--bf-space-2) 0 0;
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

/* the single intentional accent that replaces the double rule */
:is(.bf-home, .bf-om) .bf-om-wizard__head h1::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: var(--bf-space-4);
  background: var(--bf-brand-primary);
  border-radius: 999px;
}

/* lede under the page head */
:is(.bf-home, .bf-om) .bf-om-wizard__lede {
  margin: var(--bf-space-3) 0 0;
  color: var(--bf-color-text-muted);
  max-width: 60ch;
}

/* the frame becomes the rail + canvas shell (the rail bg meets the rounded edge) */
:is(.bf-home, .bf-om) .bf-wizard-frame.bf-om-wizard {
  padding: 0;
  overflow: hidden;
  border-radius: var(--bf-radius-lg);
}

/* CSR-only support banner sits above the grid inside the frame */
:is(.bf-home, .bf-om) .bf-wizard-frame.bf-om-wizard > .row {
  margin: 0;
  padding: var(--bf-space-4) var(--bf-space-5) 0;
}

/* rail | canvas grid (lives on #place_ad-tab-panel) */
:is(.bf-home, .bf-om) .bf-om-wizard__grid {
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
}

/* ---- rail ---- */
:is(.bf-home, .bf-om) .bf-om-wizard__rail {
  display: flex;
  flex-direction: column;
  padding: var(--bf-space-6) var(--bf-space-5);
  background: var(--bf-color-surface-alt);
  border-right: 1px solid var(--bf-color-border);
}

:is(.bf-home, .bf-om) .bf-om-wizard__railhead {
  margin-bottom: var(--bf-space-6);
}

:is(.bf-home, .bf-om) .bf-om-wizard__eyebrow {
  margin: 0 0 var(--bf-space-3);
  font-family: var(--bf-om-font-display);
  font-weight: 700;
  font-size: var(--bf-text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bf-color-text-muted);
}

:is(.bf-home, .bf-om) .bf-om-wizard__progress {
  height: 6px;
  border-radius: 999px;
  background: var(--bf-color-surface-sunken);
  overflow: hidden;
}

:is(.bf-home, .bf-om) .bf-om-wizard__progressfill {
  display: block;
  height: 100%;
  width: 25%; /* step 1 (category) by default; advances via :has() below */
  border-radius: 999px;
  background: var(--bf-brand-primary);
  transition: width var(--bf-transition-base);
}

:is(.bf-home, .bf-om) .bf-om-wizard__railfoot {
  margin-top: auto;
  padding-top: var(--bf-space-6);
}

:is(.bf-home, .bf-om) .bf-om-wizard__save {
  display: flex;
  align-items: center;
  gap: var(--bf-space-2);
  font-size: var(--bf-text-xs);
  color: var(--bf-color-text-muted);
}

:is(.bf-home, .bf-om) .bf-om-wizard__save .fa {
  color: var(--bf-color-success);
}

/* progress fill tracks the active step (pure CSS; Bootstrap toggles li.active /
   the single-category site seeds .active on the step-2 anchor) */
:is(.bf-home, .bf-om) .bf-om-wizard__rail:has(.bf-steps > li:nth-child(2).active) .bf-om-wizard__progressfill,
:is(.bf-home, .bf-om) .bf-om-wizard__rail:has(.bf-steps > li:nth-child(2) > .tab-nav-link.active) .bf-om-wizard__progressfill {
  width: 50%;
}

:is(.bf-home, .bf-om) .bf-om-wizard__rail:has(.bf-steps > li:nth-child(3).active) .bf-om-wizard__progressfill,
:is(.bf-home, .bf-om) .bf-om-wizard__rail:has(.bf-steps > li:nth-child(3) > .tab-nav-link.active) .bf-om-wizard__progressfill {
  width: 75%;
}

:is(.bf-home, .bf-om) .bf-om-wizard__rail:has(.bf-steps > li:nth-child(4).active) .bf-om-wizard__progressfill,
:is(.bf-home, .bf-om) .bf-om-wizard__rail:has(.bf-steps > li:nth-child(4) > .tab-nav-link.active) .bf-om-wizard__progressfill {
  width: 100%;
}

/* ---- canvas ---- */
:is(.bf-home, .bf-om) .bf-om-wizard__canvas {
  padding: var(--bf-space-6);
  min-width: 0;
}

/* clicking a department is the forward action, so the redundant Next button +
   its divider rule are hidden (the control stays in the DOM for the JS contract) */
:is(.bf-home, .bf-om) #category #next-button-category,
:is(.bf-home, .bf-om) #category .place-ad_button-row hr {
  display: none;
}

/* ---- the .bf-steps strip restyled as a vertical timeline (desktop) ---- */
@media (min-width: 768px) {
  :is(.bf-home, .bf-om) .bf-om-wizard__rail .bf-steps {
    display: block;
    margin: 0;
    padding: 0;
    border-bottom: 0;
    gap: 0;
  }

  :is(.bf-home, .bf-om) .bf-om-wizard__rail .bf-steps > li {
    position: relative;
    display: block;
    margin: 0;
    padding: 0 0 var(--bf-space-5);
  }

  :is(.bf-home, .bf-om) .bf-om-wizard__rail .bf-steps > li:last-child {
    padding-bottom: 0;
  }

  /* connector line through the badges */
  :is(.bf-home, .bf-om) .bf-om-wizard__rail .bf-steps > li::after {
    content: "";
    position: absolute;
    left: 15px;
    top: 34px;
    bottom: 4px;
    width: 2px;
    background: var(--bf-color-border);
  }

  :is(.bf-home, .bf-om) .bf-om-wizard__rail .bf-steps > li:last-child::after {
    display: none;
  }

  /* the anchor is the row: badge (::before) | label + desc */
  :is(.bf-home, .bf-om) .bf-om-wizard__rail .bf-steps > li > .tab-nav-link {
    display: grid;
    grid-template-columns: 32px 1fr;
    column-gap: var(--bf-space-3);
    align-items: start;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
  }

  :is(.bf-home, .bf-om) .bf-om-wizard__rail .bf-steps > li > .tab-nav-link::before {
    content: counter(bf-step);
    position: relative;
    z-index: 1;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--bf-om-font-display);
    font-weight: 700;
    font-size: var(--bf-text-sm);
    background: var(--bf-color-surface);
    border: 2px solid var(--bf-color-border);
    color: var(--bf-color-text-muted);
  }

  :is(.bf-home, .bf-om) .bf-om-wizard__rail .bf-steps .bf-steps__label {
    grid-column: 2;
    grid-row: 1;
    font-family: var(--bf-om-font-display);
    font-weight: 600;
    font-size: var(--bf-text-sm);
    color: var(--bf-color-text-muted);
    letter-spacing: -0.01em;
  }

  :is(.bf-home, .bf-om) .bf-om-wizard__rail .bf-steps .bf-steps__desc {
    grid-column: 2;
    grid-row: 2;
    margin-top: 1px;
    font-size: var(--bf-text-xs);
    color: var(--bf-color-text-muted);
    opacity: 0.8;
  }

  /* active step: filled brand badge + soft halo + ink title */
  :is(.bf-home, .bf-om) .bf-om-wizard__rail .bf-steps > li.active > .tab-nav-link::before,
  :is(.bf-home, .bf-om) .bf-om-wizard__rail .bf-steps > li > .tab-nav-link.active::before {
    background: var(--bf-brand-primary);
    border-color: var(--bf-brand-primary);
    color: var(--bf-brand-primary-ink);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--bf-brand-primary) 16%, transparent);
  }

  :is(.bf-home, .bf-om) .bf-om-wizard__rail .bf-steps > li.active .bf-steps__label,
  :is(.bf-home, .bf-om) .bf-om-wizard__rail .bf-steps > li > .tab-nav-link.active .bf-steps__label {
    color: var(--bf-color-text);
    font-weight: 700;
  }

  /* done steps (any step before the active one): accent badge + accent connector */
  :is(.bf-home, .bf-om) .bf-om-wizard__rail .bf-steps > li:has(~ li.active) > .tab-nav-link::before,
  :is(.bf-home, .bf-om) .bf-om-wizard__rail .bf-steps > li:has(~ li > .tab-nav-link.active) > .tab-nav-link::before {
    background: var(--bf-om-accent);
    border-color: var(--bf-om-accent);
    color: var(--bf-brand-primary-ink);
  }

  :is(.bf-home, .bf-om) .bf-om-wizard__rail .bf-steps > li:has(~ li.active)::after,
  :is(.bf-home, .bf-om) .bf-om-wizard__rail .bf-steps > li:has(~ li > .tab-nav-link.active)::after {
    background: var(--bf-om-accent);
  }

  :is(.bf-home, .bf-om) .bf-om-wizard__rail .bf-steps > li:has(~ li.active) .bf-steps__label,
  :is(.bf-home, .bf-om) .bf-om-wizard__rail .bf-steps > li:has(~ li > .tab-nav-link.active) .bf-steps__label {
    color: var(--bf-color-text);
  }

  /* hover/focus stay quiet (the steps are indicators, not buttons) */
  :is(.bf-home, .bf-om) .bf-om-wizard__rail .bf-steps > li > .tab-nav-link:hover .bf-steps__label {
    color: var(--bf-color-text);
  }

  :is(.bf-home, .bf-om) .bf-om-wizard__rail .bf-steps > li > .tab-nav-link:hover::before {
    border-color: var(--bf-color-border-strong);
  }

  :is(.bf-home, .bf-om) .bf-om-wizard__rail .bf-steps > li > .tab-nav-link:focus-visible {
    outline: none;
    border-radius: var(--bf-radius-sm);
    box-shadow: 0 0 0 3px var(--bf-color-focus-ring);
  }

  /* Kill the legacy hozi.main.css .nav-tabs black: it paints the ACTIVE step's
     .tab-nav-link with background:#000 + a heavy drop-shadow (its li.active:hover
     variant ties our base rule and wins by load order), which renders as a harsh
     black box (label hidden under it, the shadow reading like a floating overlay)
     on the current step - most visible on hover. These higher-specificity rules
     neutralise it across the link's states; the active badge (::before) keeps its
     brand fill + halo. */
  :is(.bf-home, .bf-om) .bf-om-wizard__rail .bf-steps > li > .tab-nav-link:hover,
  :is(.bf-home, .bf-om) .bf-om-wizard__rail .bf-steps > li > .tab-nav-link:focus,
  :is(.bf-home, .bf-om) .bf-om-wizard__rail .bf-steps > li.active > .tab-nav-link,
  :is(.bf-home, .bf-om) .bf-om-wizard__rail .bf-steps > li.active > .tab-nav-link:hover,
  :is(.bf-home, .bf-om) .bf-om-wizard__rail .bf-steps > li.active > .tab-nav-link:focus,
  :is(.bf-home, .bf-om) .bf-om-wizard__rail .bf-steps > li > .tab-nav-link.active,
  :is(.bf-home, .bf-om) .bf-om-wizard__rail .bf-steps > li > .tab-nav-link.active:hover,
  :is(.bf-home, .bf-om) .bf-om-wizard__rail .bf-steps > li > .tab-nav-link.active:focus {
    background: none;
    border: 0;
    box-shadow: none;
    transform: none;
    color: var(--bf-color-text);
  }
}

/* Same hozi .nav-tabs black on the mobile (<768px) compact step strip - keep the
   active chip on the brand fill (via its ::before badge), never a black box. */
@media (max-width: 767px) {
  :is(.bf-home, .bf-om) .bf-om-wizard__rail .bf-steps > li.active > .tab-nav-link,
  :is(.bf-home, .bf-om) .bf-om-wizard__rail .bf-steps > li.active > .tab-nav-link:hover,
  :is(.bf-home, .bf-om) .bf-om-wizard__rail .bf-steps > li > .tab-nav-link.active,
  :is(.bf-home, .bf-om) .bf-om-wizard__rail .bf-steps > li > .tab-nav-link.active:hover {
    background: none;
    border: 0;
    box-shadow: none;
  }
}

/* ---- mobile: stack rail over canvas; the WS3 numbers-only chip strip handles
   the steps (font-size:0 hides the new label/desc spans) ---- */
@media (max-width: 767px) {
  :is(.bf-home, .bf-om) .bf-om-wizard__grid {
    grid-template-columns: 1fr;
  }

  :is(.bf-home, .bf-om) .bf-om-wizard__rail {
    border-right: 0;
    border-bottom: 1px solid var(--bf-color-border);
    padding: var(--bf-space-3) var(--bf-space-4);
  }

  :is(.bf-home, .bf-om) .bf-om-wizard__rail .bf-steps {
    border-bottom: 0;
  }

  :is(.bf-home, .bf-om) .bf-om-wizard__railhead,
  :is(.bf-home, .bf-om) .bf-om-wizard__railfoot {
    display: none;
  }

  :is(.bf-home, .bf-om) .bf-om-wizard__canvas {
    padding: var(--bf-space-4);
  }
}

/* ---- category step: the .bf-om-dept department cards (click a card to proceed) ---- */
:is(.bf-home, .bf-om) .bf-om-deptgrid {
  display: grid;
  /* width:100% is load-bearing: this grid lives inside a Bootstrap .row
     (.category-boxes-container, display:flex), so without an explicit width it
     shrinks to its 1-column max-content and auto-fill collapses to a single
     column (a vertical stack). The legacy .bf-pick-grid set width:100% for the
     same reason; the homepage .bf-category-grid is not inside a .row so it never
     needed it. The literal min keeps the track list valid regardless of the
     inline --bf-pick-min that CATEGORY_BOX_MIN_WIDTH feeds. */
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  gap: var(--bf-space-3);
  margin: 0 0 var(--bf-space-2);
}

:is(.bf-home, .bf-om) .bf-om-dept {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--bf-space-3);
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: var(--bf-space-3) var(--bf-space-4) var(--bf-space-3) var(--bf-space-3);
  border: 1px solid var(--bf-color-border-strong);
  border-radius: var(--bf-radius-md);
  background: var(--bf-color-surface);
  box-shadow: var(--bf-elev-rest-1);
  transition: var(--bf-transition-lift), border-color var(--bf-transition-fast);
}

:is(.bf-home, .bf-om) .bf-om-dept:hover {
  border-color: var(--bf-brand-primary);
  box-shadow: var(--bf-elev-hover-1);
  transform: translateY(var(--bf-lift-1));
}

:is(.bf-home, .bf-om) .bf-om-dept:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--bf-color-focus-ring);
}

:is(.bf-home, .bf-om) .bf-om-dept__media {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: var(--bf-radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bf-om-font-display);
  font-weight: 700;
  font-size: var(--bf-text-lg);
  color: var(--bf-brand-primary-ink);
  background: linear-gradient(140deg, color-mix(in srgb, var(--bf-brand-primary) 90%, #000), var(--bf-om-accent));
}

:is(.bf-home, .bf-om) .bf-om-dept__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Modern SVG category markers: a brand-ink glyph masked onto the teal chip.
   The per-icon mask URL is passed inline as --bf-cat-mask. Raster markers keep
   using .bf-om-dept__img above. */
:is(.bf-home, .bf-om) .bf-om-dept__glyph {
  display: block;
  width: 58%;
  height: 58%;
  background-color: var(--bf-brand-primary-ink);
  -webkit-mask: var(--bf-cat-mask) center / contain no-repeat;
  mask: var(--bf-cat-mask) center / contain no-repeat;
}

:is(.bf-home, .bf-om) .bf-om-dept__body {
  min-width: 0;
  flex: 1 1 auto;
}

:is(.bf-home, .bf-om) .bf-om-dept__title {
  display: block;
  font-family: var(--bf-om-font-display);
  font-weight: 600;
  font-size: var(--bf-text-base);
  color: var(--bf-color-text);
  letter-spacing: -0.01em;
}

:is(.bf-home, .bf-om) .bf-om-dept__chev {
  flex: 0 0 auto;
  color: var(--bf-color-text-muted);
  transition: transform var(--bf-transition-fast), color var(--bf-transition-fast);
}

:is(.bf-home, .bf-om) .bf-om-dept:hover .bf-om-dept__chev {
  color: var(--bf-brand-primary);
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  /* the .bf-om-dept hover lift stands down at the token layer (tokens.css) */
  :is(.bf-home, .bf-om) .bf-om-dept__chev,
  :is(.bf-home, .bf-om) .bf-om-wizard__progressfill {
    transition: none;
  }

  :is(.bf-home, .bf-om) .bf-om-dept:hover .bf-om-dept__chev {
    transform: none;
  }
}

/* ===========================================================================
   PLACE-AD PACKAGES STEP (W9) - Open Market "pricing tiers"
   CSS-led elevation of the real, byte-identical markup: the fn_packages.php
   package cards (.bf-pack-card etc.), the placead_packages_tab.php shell + the
   region_dialog, and the shared placead_summary_panel.php recap. Behaviour is
   untouched (the radio/onclick/selectPubPackage/#place_ad-running-total contract
   stays in the PHP). These :is(.bf-home, .bf-om) rules outrank the .bf-scope
   (components.css) + Bootstrap (.btn/.col-*) rules. Hard-coded fn_packages colours
   (font color=red PLUS / color:black region) are tokenised here via attribute
   selectors, so no audited PHP is edited.
   =========================================================================== */

/* ---- packages tab heading ---- */
:is(.bf-home, .bf-om) #package > .row.container-fluid {
  margin: 0;
}

:is(.bf-home, .bf-om) #package h3 {
  margin: 0 0 var(--bf-space-2) !important; /* beats the inline style="margin:20px" */
  font-family: var(--bf-om-font-display);
  font-size: var(--bf-text-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--bf-color-text);
}

/* ---- the region/coverage line + change link (above the tiers) ---- */
:is(.bf-home, .bf-om) #local_rate_packages > label[for="place-ad_choose-pub"] {
  display: block;
  margin: 0 0 var(--bf-space-2);
  font-size: var(--bf-text-sm);
  color: var(--bf-color-text-muted);
  font-weight: 400;
}

/* tokenise the hard-coded color:black region name (Directive B, no PHP edit) */
:is(.bf-home, .bf-om) #local_rate_packages font[style*="color:black"],
:is(.bf-home, .bf-om) #local_rate_packages font[style*="color: black"] {
  color: var(--bf-color-text) !important;
  font-weight: 600;
}

:is(.bf-home, .bf-om) #local_rate_packages a[onclick*="showRegionChoices"] {
  display: inline-block;
  margin-bottom: var(--bf-space-4);
  color: var(--bf-color-primary-text);
  font-weight: 600;
  font-size: var(--bf-text-sm);
}

/* ---- zone heading (h3.place_ad-pack-label is the zone label, NOT a card name) ---- */
:is(.bf-home, .bf-om) #local_rate_packages h3.place_ad-pack-label {
  margin: var(--bf-space-2) 0 var(--bf-space-4);
  font-family: var(--bf-om-font-display);
  font-weight: 700;
  font-size: var(--bf-text-base);
  letter-spacing: -0.01em;
  color: var(--bf-color-text);
}

/* ---- the tier card (the .bf-pack-card button, inside its Bootstrap col) ---- */
:is(.bf-home, .bf-om) #local_rate_packages .bf-pack-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--bf-space-3);
  width: 100%;
  height: 100%;
  margin: 0 0 var(--bf-space-4);
  padding: var(--bf-space-5);
  text-align: left;
  white-space: normal;
  cursor: pointer;
  font: inherit;
  text-transform: none;
  color: var(--bf-color-text);
  background: var(--bf-color-surface);
  border: 1px solid var(--bf-color-border-strong);
  border-radius: var(--bf-radius-lg);
  box-shadow: var(--bf-elev-rest-1);
  transition: var(--bf-transition-lift), border-color var(--bf-transition-fast);
}

:is(.bf-home, .bf-om) #local_rate_packages .bf-pack-card:hover {
  border-color: var(--bf-brand-primary);
  box-shadow: var(--bf-elev-hover-1);
  transform: translateY(var(--bf-lift-1));
}

:is(.bf-home, .bf-om) #local_rate_packages .bf-pack-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--bf-color-focus-ring);
}

/* the label holds the radio (hidden) + the package name + the price */
:is(.bf-home, .bf-om) #local_rate_packages .bf-pack-card .place_ad-pack-label {
  display: block;
  margin: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--bf-om-font-display);
  font-weight: 700;
  font-size: var(--bf-text-base);
  line-height: 1.25;
  color: var(--bf-color-text);
}

/* the price line ("(Starts at $X)" / "(FREE listing)") - the tier's price emphasis */
:is(.bf-home, .bf-om) .bf-pack-card__price {
  display: block;
  margin-top: var(--bf-space-2);
  font-family: var(--bf-om-font-display);
  font-weight: 800;
  font-size: var(--bf-text-xl);
  letter-spacing: -0.01em;
  color: var(--bf-color-text);
}

/* the description / publication list -> a feature block */
:is(.bf-home, .bf-om) #local_rate_packages .bf-pack-card .place_ad-pack-desc {
  margin: var(--bf-space-3) 0 0;
  padding-top: var(--bf-space-4);
  border-top: 1px solid var(--bf-color-border);
  font-size: var(--bf-text-sm);
  color: var(--bf-color-text);
  flex: 1 1 auto;
}

:is(.bf-home, .bf-om) #local_rate_packages .bf-pack-card .place_ad-pack-desc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--bf-space-2);
}

:is(.bf-home, .bf-om) #local_rate_packages .bf-pack-card .place_ad-pack-desc li {
  position: relative;
  padding-left: var(--bf-space-5);
  color: var(--bf-color-text);
}

:is(.bf-home, .bf-om) #local_rate_packages .bf-pack-card .place_ad-pack-desc li::before {
  content: "\2713"; /* plain unicode check - renders in any font (no FontAwesome dependency) */
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 0.85em;
  font-weight: 700;
  color: var(--bf-color-success);
}

/* tokenise the hard-coded red PLUS badge (Directive B, no PHP edit) */
:is(.bf-home, .bf-om) #local_rate_packages font[color="red"] {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--bf-om-accent);
  border: 1px solid color-mix(in srgb, var(--bf-om-accent) 40%, transparent);
  border-radius: 999px;
  vertical-align: middle;
}

:is(.bf-home, .bf-om) #local_rate_packages font[color="red"] b {
  font-weight: 700;
}

/* Selected state. JS adds .btn-success/.active to #rate-package_<id> on pick. The
   card itself IS the select button, so the affordance is the hover lift + a clear
   brand ring on the chosen tier - NO ::after CTA pseudo-element. (An earlier one
   rendered a broken FontAwesome check glyph as a white "X" in a black box; removed.) */
:is(.bf-home, .bf-om) #local_rate_packages .bf-pack-card.btn-success,
:is(.bf-home, .bf-om) #local_rate_packages .bf-pack-card.active {
  border-color: var(--bf-brand-primary);
  background: var(--bf-color-surface);
  color: var(--bf-color-text);
  box-shadow: 0 0 0 2px var(--bf-brand-primary), 0 12px 26px color-mix(in srgb, var(--bf-brand-primary) 18%, transparent);
}

/* ---- custom-package path ---- */
:is(.bf-home, .bf-om) #custom-package-button {
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-1);
  width: 100%;
  padding: var(--bf-space-4);
  text-align: left;
  white-space: normal;
  cursor: pointer;
  background: var(--bf-color-surface);
  border: 1px dashed var(--bf-color-border-strong);
  border-radius: var(--bf-radius-md);
  color: var(--bf-color-text);
  text-transform: none;
}

:is(.bf-home, .bf-om) #custom-package-button:hover {
  border-color: var(--bf-brand-primary);
}

:is(.bf-home, .bf-om) #custom-package-button h3 {
  margin: 0 !important;
  font-family: var(--bf-om-font-display);
  font-size: var(--bf-text-base);
  font-weight: 700;
  color: var(--bf-color-text);
}

:is(.bf-home, .bf-om) #custom-package-div .alert-warning {
  background: var(--bf-om-primary-tint);
  border: 1px solid color-mix(in srgb, var(--bf-brand-primary) 24%, transparent);
  border-radius: var(--bf-radius-md);
  color: var(--bf-color-text);
}

:is(.bf-home, .bf-om) #custom-package-div .local_zone {
  accent-color: var(--bf-brand-primary);
}

/* ---- packages button row (the step footer) ---- */
:is(.bf-home, .bf-om) #package .place-ad_button-row {
  margin-top: var(--bf-space-5);
  padding-top: var(--bf-space-4);
  border-top: 1px solid var(--bf-color-border);
}

:is(.bf-home, .bf-om) #package .place-ad_button-row hr {
  display: none;
}

/* ---- region_dialog (coverage-area picker) ---- */
:is(.bf-home, .bf-om) #region_dialog .form-group {
  padding: var(--bf-space-2) 0;
}

:is(.bf-home, .bf-om) #region_dialog input[type="radio"] {
  accent-color: var(--bf-brand-primary);
}

:is(.bf-home, .bf-om) #region_dialog .bf-help {
  margin-top: var(--bf-space-3);
  color: var(--bf-color-text-muted);
  font-size: var(--bf-text-xs);
}

/* ===========================================================================
   SHARED RUNNING-ORDER SUMMARY (placead_summary_panel.php) - OM recap
   The single, JS-driven running summary (category / package / schedule / total),
   shown across the wizard steps. Elevated to a slim OM recap card; ids untouched.
   =========================================================================== */
:is(.bf-home, .bf-om) #ad-summary .bf-summary-card,
:is(.bf-home, .bf-om) .place-ad_summary {
  padding: var(--bf-space-4) var(--bf-space-5);
  background: var(--bf-color-paper);
  border: 1px solid var(--bf-color-border-strong);
  border-left: 3px solid var(--bf-brand-primary);
  border-radius: var(--bf-radius-md);
  box-shadow: var(--bf-shadow-sm);
}

:is(.bf-home, .bf-om) .place-ad_summary > h4 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--bf-space-2) var(--bf-space-3);
  margin: 0;
  font-family: var(--bf-om-font-display);
  font-size: var(--bf-text-base);
  color: var(--bf-color-text);
}

:is(.bf-home, .bf-om) .place-ad_summary .place_ad-running-total-label {
  margin-left: auto;
  font-size: var(--bf-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bf-color-text-muted);
}

:is(.bf-home, .bf-om) .place-ad_summary .place_ad-running-total {
  font-family: var(--bf-om-font-display);
  font-weight: 800;
  font-size: var(--bf-text-xl);
  color: var(--bf-color-text);
}

:is(.bf-home, .bf-om) .place-ad_summary hr {
  margin: var(--bf-space-3) 0;
  border: 0;
  border-top: 1px solid var(--bf-color-border);
}

:is(.bf-home, .bf-om) .place-ad_summary .bf-term {
  display: block;
  font-size: var(--bf-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bf-color-text-muted);
  margin-bottom: 1px;
}

/* ============================================================================
   W37 - Place-ad BUILDER step = the "Guided Studio" (Concept D).
   The #build pane becomes a two-column studio inside the wizard canvas: a
   COMPOSE column (style, print + online details, photos, upsells) on the left,
   and a PINNED live-proof column (the SOAP TrueView render + running price +
   order summary + Next) on the right. Paired with the wizard's guided __rail,
   this reads as rail | compose | proof: the advertiser stays oriented AND never
   loses sight of what the ad looks like or costs. CSS-led - every id/hook/onclick
   is byte-identical; the fragment was only re-wrapped and the redundant duplicate
   summary/preview consolidated into this one proof column. Replaces the earlier
   W10 print two-pane grid. Scoped :is(.bf-home, .bf-om).
   ============================================================================ */

/* ---- the studio layout: the form WRAPS the capped proof box ----
   This is a float, not a grid, on purpose. A grid (or a flex/BFC compose column)
   reserves the proof's 360px for the FULL height of the step, so once the proof box
   ends, the form keeps drafting inside a narrow middle strip and the rest of the row
   is dead space. Only a float lets the form run beside the proof and then reclaim the
   full width underneath it.
   Two things this depends on, both easy to break:
   - the proof <aside> must come BEFORE .bf-om-studio__compose in the markup, because a
     float only affects content that FOLLOWS it in source order;
   - .bf-om-studio__compose must NOT establish a formatting context (no flex, no
     overflow), or the container itself would dodge the float for its whole height and
     nothing would be reclaimed. The CARDS each establish one instead (flow-root below),
     so they individually sit beside the float and then go full width past it. */
:is(.bf-home, .bf-om) .bf-om-studio { display: block; }
:is(.bf-home, .bf-om) .bf-om-studio__compose {
  min-width: 0;
  display: block;
}
/* the cards used to be flex children with a gap; in block flow they own their spacing */
:is(.bf-home, .bf-om) .bf-om-studio__compose > * { margin-bottom: var(--bf-space-5); }
:is(.bf-home, .bf-om) .bf-om-studio__compose > *:last-child { margin-bottom: 0; }

/* Below the float breakpoint there is no float, so the proof-first source order (which
   the float requires) would push the whole form below the preview box. Put the form back
   on top: compose, then proof, then nav.
   The cutoff is 1180px, not 900px, because the float has to leave the form a workable
   column: the wizard rail already eats ~250px, and the proof another ~384px, so under
   ~1180px the form is squeezed to a ~180px ribbon, which is worse than stacking. */
@media (max-width: 1179px) {
  :is(.bf-home, .bf-om) .bf-om-studio { display: flex; flex-direction: column; }
  :is(.bf-home, .bf-om) .bf-om-studio__compose { order: 1; }
  :is(.bf-home, .bf-om) .bf-om-studio__proof { order: 2; margin-top: var(--bf-space-6); }
  :is(.bf-home, .bf-om) .bf-om-studio__nav { order: 3; }
}

@media (min-width: 1180px) {
  :is(.bf-home, .bf-om) .bf-om-studio__proof {
    float: right;
    width: 360px;
    margin: 0 0 var(--bf-space-6) var(--bf-space-6);
  }
  /* each compose card avoids the float on its own: beside it while it lasts, full
     width once past it. flow-root (not overflow:hidden) so nothing gets clipped. */
  :is(.bf-home, .bf-om) .bf-om-studio__compose > * { display: flow-root; }
  :is(.bf-home, .bf-om) .bf-om-studio__compose > *.hide { display: none; }
}

/* compose section cards */
:is(.bf-home, .bf-om) .bf-om-studio__card {
  background: var(--bf-color-surface);
  border: 1px solid var(--bf-color-border);
  border-radius: var(--bf-radius-lg);
  box-shadow: var(--bf-shadow-sm);
  padding: var(--bf-space-5);
}
:is(.bf-home, .bf-om) .bf-om-studio__card.hide { display: none; }
:is(.bf-home, .bf-om) .bf-om-studio__card--flush { padding: 0; border: 0; box-shadow: none; background: none; }
:is(.bf-home, .bf-om) .bf-om-studio__lead h4 {
  font-family: var(--bf-om-font-display); font-weight: 700; letter-spacing: -0.01em; margin: 0;
}
:is(.bf-home, .bf-om) .bf-om-studio__styles { text-align: center; }

/* ---- pane + section headers (kept) ---- */
:is(.bf-home, .bf-om) #build .place_ad-print-details > h2,
:is(.bf-home, .bf-om) #build .place_ad-online-details > h2 {
  font-family: var(--bf-om-font-display); font-weight: 700; letter-spacing: -0.01em;
  color: var(--bf-color-text); margin-top: 0;
}
:is(.bf-home, .bf-om) #build .place_ad-print-details > p { color: var(--bf-color-text-muted); font-size: var(--bf-text-sm); }

/* ---- the styles band ----
   Picking a style is a gallery task: you compare the options against each other. It used
   to live inside the compose column, so the cards were fighting the floated proof for
   width and piled up two-then-one. It gets the full canvas now, above the proof and the
   form, which is also the order the advertiser works in: choose a style, THEN write the
   ad and watch the proof. It sits before the float in the markup, so the float does not
   touch it. */
:is(.bf-home, .bf-om) .bf-om-studio__styleband {
  margin-bottom: var(--bf-space-6);
}
:is(.bf-home, .bf-om) .bf-om-studio__styleband #top-of-build {
  margin: var(--bf-space-6) 0 0;
  border: 0;
  border-top: 1px solid var(--bf-color-border);
}

/* ---- style picker ----
   "What is your style?" is the label for the single biggest choice on this step, and it
   was set as a .bf-alert--info: a washed-out tint that made the question read as a
   footnote. It is a section header now, with a brand rule anchoring it. The lead above
   it drops to a kicker so the two stop competing for the same job. */
:is(.bf-home, .bf-om) .bf-om-studio__lead h4 {
  margin: 0 0 var(--bf-space-2);
  font-family: var(--bf-om-font-display);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bf-color-text-muted);
}
:is(.bf-home, .bf-om) .bf-om-stylehead {
  padding: var(--bf-space-4) var(--bf-space-5);
  border: 1px solid var(--bf-color-border);
  border-left: 4px solid var(--bf-brand-primary);
  border-radius: var(--bf-radius-lg);
  background: var(--bf-color-surface);
}
:is(.bf-home, .bf-om) .bf-om-stylehead h4 {
  margin: 0 0 var(--bf-space-2);
  font-family: var(--bf-om-font-display);
  font-size: var(--bf-text-xl);
  font-weight: var(--bf-weight-bold);
  letter-spacing: -0.01em;
  color: var(--bf-color-text);
}
:is(.bf-home, .bf-om) .bf-om-stylehead p {
  margin: 0;
  /* the band is full width now, so cap the measure: a single line of copy running the
     whole canvas is unreadable */
  max-width: 68ch;
  font-size: var(--bf-text-sm);
  line-height: var(--bf-leading-normal);
  color: var(--bf-color-text-muted);
}

/* The picker itself. The cards are injected carrying Bootstrap col-md-* classes (the
   DB's column style), so their widths came from whatever fraction the grid handed them
   and they crammed together in the compose column. A grid of equal tracks standardizes
   them; the col-* floats/widths are neutralized. */
:is(.bf-home, .bf-om) #build-choose-type {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--bf-space-4);
  align-items: stretch;
  text-align: left;
}
:is(.bf-home, .bf-om) #build-choose-type .template-button {
  float: none;
  width: auto;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
}
:is(.bf-home, .bf-om) #build-choose-type { color: var(--bf-color-text-muted); }
:is(.bf-home, .bf-om) #build-choose-type .template-button {
  border: 1px solid var(--bf-color-border-strong);
  border-radius: var(--bf-radius-md);
  background: var(--bf-color-surface);
  box-shadow: var(--bf-elev-rest-1);
  transition: var(--bf-transition-lift), border-color var(--bf-transition-fast);
}
:is(.bf-home, .bf-om) #build-choose-type .template-button:hover {
  border-color: var(--bf-brand-primary);
  box-shadow: var(--bf-elev-hover-1);
  transform: translateY(var(--bf-lift-1));
}
:is(.bf-home, .bf-om) #build-choose-type .place_ad-build-rad:checked + .template-button {
  border-color: var(--bf-brand-primary);
  box-shadow: 0 0 0 2px var(--bf-brand-primary);
}

/* ---- the PINNED proof column ---- */
:is(.bf-home, .bf-om) .bf-om-studio__proof { min-width: 0; }
/* The proof box is deliberately NOT sticky any more. A sticky float would slide down
   over the form that wrapped beneath it. Reachability is handled instead by the proof
   bar (below), which appears once this box scrolls out of view. */
:is(.bf-home, .bf-om) .bf-om-studio__prooflabel {
  font-family: var(--bf-om-font-display); font-weight: 700; font-size: var(--bf-text-xs);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--bf-color-text-muted);
  margin-bottom: var(--bf-space-3); display: flex; align-items: center; gap: var(--bf-space-2);
}
:is(.bf-home, .bf-om) .bf-om-studio__prooflabel .fa { color: var(--bf-color-primary-text); }

/* neutralize any Bootstrap affix on the proof wrapper - we pin via CSS sticky instead */
:is(.bf-home, .bf-om) .bf-om-studio .full-summary-preview-div,
:is(.bf-home, .bf-om) .bf-om-studio .full-summary-preview-div.affix,
:is(.bf-home, .bf-om) .bf-om-studio .full-summary-preview-div.affix-top,
:is(.bf-home, .bf-om) .bf-om-studio .full-summary-preview-div.affix-bottom {
  position: static !important; top: auto !important; width: auto !important;
}

/* the proof card = a paper frame around the SOAP TrueView render */
:is(.bf-home, .bf-om) .bf-om-proofcard {
  background: #fbfaf7;
  border: 1px solid var(--bf-color-border-strong);
  border-radius: var(--bf-radius-lg);
  padding: var(--bf-space-4);
  box-shadow: 0 10px 30px color-mix(in srgb, #000 9%, transparent);
  min-height: 168px;
}
:is(.bf-home, .bf-om) .bf-om-proofcard #print-summary-preview { text-align: center; }
/* Cap the render. An ad can compose to any depth, and an uncapped stage would stretch
   the proof box, which lengthens the strip of form squeezed beside the float and puts
   the reclaimed width right back where it was. Past the cap the render scrolls in place. */
:is(.bf-home, .bf-om) .bf-om-proofcard__stage {
  text-align: center;
  max-height: 420px;
  overflow: auto;
  overscroll-behavior: contain;
}
:is(.bf-home, .bf-om) #build #trueview-image {
  border-radius: var(--bf-radius-sm); border: 1px solid var(--bf-color-border);
  background: #fff; max-width: 100%; height: auto;
}
/* empty state: before the first render, hint what the panel is for */
:is(.bf-home, .bf-om) .bf-om-proofcard .preview-content::after {
  content: "Your ad preview appears here as you build.";
  display: block; padding: var(--bf-space-5) var(--bf-space-3);
  color: var(--bf-color-text-muted); font-size: var(--bf-text-sm);
}
:is(.bf-home, .bf-om) .bf-om-proofcard:has(#preview-content-wrapper:not(.hide)) .preview-content::after,
:is(.bf-home, .bf-om) .bf-om-proofcard:has(#preview-building:not(.hide)) .preview-content::after { content: none; }

/* running price */
:is(.bf-home, .bf-om) .bf-om-studio__price {
  margin-top: var(--bf-space-4); padding-top: var(--bf-space-4);
  border-top: 1px solid var(--bf-color-border);
  display: flex; align-items: baseline; gap: var(--bf-space-2); flex-wrap: wrap;
}
:is(.bf-home, .bf-om) .bf-om-studio__price .place_ad-running-total-label { font-size: var(--bf-text-sm); color: var(--bf-color-text-muted); font-weight: 600; }
:is(.bf-home, .bf-om) #build .place_ad-running-total {
  font-family: var(--bf-om-font-display); font-weight: 800; font-size: var(--bf-text-2xl); color: var(--bf-color-text);
}

/* order summary */
/* The order summary: what the advertiser has chosen so far, sitting under the running
   price as part of the proof. It is a quiet detail list on the column's own surface, NOT
   a card: it used to wear a white plate and a heavy drop shadow (an override.main.css
   rule, now deleted) which made it float in the middle of the column like a stray
   dialog, and that same rule tinted the values with a per-storefront token instead of
   letting them read as ink. */
:is(.bf-home, .bf-om) .bf-om-studio__summary {
  margin-top: var(--bf-space-4);
  padding-top: var(--bf-space-4);
  border-top: 1px solid var(--bf-color-border);
  background: none;
  box-shadow: none;
  color: var(--bf-color-text);
}
:is(.bf-home, .bf-om) .bf-om-studio__summary section {
  display: flex;
  align-items: baseline;
  gap: var(--bf-space-2);
  padding: var(--bf-space-2) 0;
  font-size: var(--bf-text-sm);
  line-height: var(--bf-leading-normal);
  border-bottom: 1px solid color-mix(in srgb, var(--bf-color-border) 55%, transparent);
}
:is(.bf-home, .bf-om) .bf-om-studio__summary section:last-child { border-bottom: 0; padding-bottom: 0; }
/* a fixed label column so the values line up instead of stair-stepping. 104px is sized
   off the longest label ("Listing type:"), which wrapped to two lines below that. */
:is(.bf-home, .bf-om) .bf-om-studio__summary .bf-term {
  flex: 0 0 auto;
  width: 104px;
  font-size: var(--bf-text-xs);
  color: var(--bf-color-text-muted);
}
:is(.bf-home, .bf-om) .bf-om-studio__summary section > span:not(.bf-term) {
  min-width: 0;
  font-weight: var(--bf-weight-medium);
  color: var(--bf-color-text);
}
:is(.bf-home, .bf-om) #build .bf-term { color: var(--bf-color-text-muted); font-weight: 600; }

/* CTAs */
:is(.bf-home, .bf-om) .bf-om-studio__continue { margin-top: var(--bf-space-4); }
:is(.bf-home, .bf-om) #build #update-preview-button,
:is(.bf-home, .bf-om) #build #continue-to-digital-button { white-space: normal; }

/* proof nav (Back / Next) */
/* The nav is now the studio's own footer, not part of the proof column: full width,
   cleared below the floated proof, so the advertiser finishes where the form ends
   instead of scrolling back up to a Next button stranded at the top right. */
:is(.bf-home, .bf-om) .bf-om-studio__nav {
  clear: both;
  margin-top: var(--bf-space-5);
  padding-top: var(--bf-space-4);
  border-top: 1px solid var(--bf-color-border);
}
:is(.bf-home, .bf-om) #build .place-ad_button-row #next-button-build,
:is(.bf-home, .bf-om) #build .place-ad_button-row .prev-tab { white-space: normal; }

/* the retained (JS-contract) floating online summary no longer renders - the proof column shows the price */
:is(.bf-home, .bf-om) #online-summary-preview-div { display: none !important; }

/* ---- ONLINE phase: photos + upsells as OM rows (kept) ---- */
:is(.bf-home, .bf-om) #build-capture-images .bf-thumb {
  border: 1px solid var(--bf-color-border);
  border-radius: var(--bf-radius-md);
  background: var(--bf-color-surface-alt);
  overflow: hidden;
}
:is(.bf-home, .bf-om) #build #prominent_placement_options > label,
:is(.bf-home, .bf-om) #build #sponsored_search_words > label,
:is(.bf-home, .bf-om) #build #photo_upsell > label {
  font-family: var(--bf-om-font-display); font-weight: 700; color: var(--bf-color-text);
}
/* featured-placement rows: checkbox + label ........ price (right) */
:is(.bf-home, .bf-om) #prominent_placement_options > .bf-form-frame > label[id] {
  display: flex; align-items: center; gap: var(--bf-space-2);
  padding: var(--bf-space-3) 0; margin: 0; border-top: 1px solid var(--bf-color-border);
}
:is(.bf-home, .bf-om) #prominent_placement_options > .bf-form-frame > label[id]:first-of-type { border-top: 0; }
:is(.bf-home, .bf-om) #prominent_placement_options > .bf-form-frame > label[id] > span[id$="upsell_price"] {
  margin-left: auto; font-family: var(--bf-om-font-display); font-weight: 700; color: var(--bf-color-primary-text); white-space: nowrap;
}
:is(.bf-home, .bf-om) #build #enhance_online_description_price,
:is(.bf-home, .bf-om) #build #photo_upsell_price,
:is(.bf-home, .bf-om) #build #video_upsell_price,
:is(.bf-home, .bf-om) #build #sponsored_search_words_price { color: var(--bf-color-primary-text); font-weight: 600; }

/* ============================================================================
   W11 - Place-ad CONFIRM step (place-ad step 4, the #confirm tab pane).
   Open Market "order receipt": one document card reviews the order (details,
   package/schedule, print proof, digital listing, options) above an
   Order Price / Tax / Total block, then a captcha-gated Confirm. Full markup
   recompose; every #place_ad-confirm-* id, JS hook (.place_ad-confirm-heading,
   .place-ad_button-row, .prev-tab, .g-recaptcha) and the .hide toggles stay
   byte-identical - this only re-houses + styles them. Pricing shows only the
   three aggregates the client actually receives (no itemization: fn_preview.php
   never sends per-component prices). Scoped :is(.bf-home, .bf-om).
   ============================================================================ */

/* ---- pane heading + intro ---- */
:is(.bf-home, .bf-om) .bf-om-confirm { max-width: 780px; }
:is(.bf-home, .bf-om) .bf-om-confirm__head { margin: 0 0 var(--bf-space-5); }
:is(.bf-home, .bf-om) .bf-om-confirm__title {
  font-family: var(--bf-om-font-display); font-weight: 800; font-size: var(--bf-text-2xl);
  letter-spacing: -0.02em; margin: 0; color: var(--bf-color-text);
}
:is(.bf-home, .bf-om) .bf-om-confirm__sub { margin: var(--bf-space-2) 0 0; color: var(--bf-color-text-muted); max-width: 62ch; }

/* ---- guide (the 4 instructions) + note + not-signed-in warning ---- */
:is(.bf-home, .bf-om) .bf-om-confirm__guide { margin: 0 0 var(--bf-space-5); }
:is(.bf-home, .bf-om) .bf-om-confirm__steps {
  list-style: none; margin: 0 0 var(--bf-space-3); padding: var(--bf-space-4) var(--bf-space-5);
  display: grid; gap: var(--bf-space-3); border-radius: var(--bf-radius-md);
  background: var(--bf-om-primary-tint); border: 1px solid color-mix(in srgb, var(--bf-brand-primary) 18%, transparent);
}
:is(.bf-home, .bf-om) .bf-om-confirm__steps > li { display: flex; align-items: flex-start; gap: var(--bf-space-2); margin: 0; font-size: var(--bf-text-sm); line-height: 1.5; color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-confirm__steps > li .fa { flex: 0 0 auto; margin-top: 3px; color: var(--bf-color-primary-text); }
:is(.bf-home, .bf-om) .bf-om-confirm__note { font-size: var(--bf-text-sm); color: var(--bf-color-text-muted); }
:is(.bf-home, .bf-om) .bf-om-confirm__warn { margin: var(--bf-space-3) 0 0; }
:is(.bf-home, .bf-om) .bf-om-confirm__warn > p { margin: 0; min-width: 0; }
:is(.bf-home, .bf-om) .bf-om-confirm__warn > .fa { margin-top: 2px; }

/* ---- the receipt card (neutralize any inherited bf-summary-card padding) ---- */
:is(.bf-home, .bf-om) .bf-om-receipt {
  padding: 0; border: 1px solid var(--bf-color-border-strong); border-radius: var(--bf-radius-lg);
  background: var(--bf-color-surface); overflow: hidden; box-shadow: 0 10px 30px color-mix(in srgb, #000 6%, transparent);
}
:is(.bf-home, .bf-om) .bf-om-receipt__head {
  padding: var(--bf-space-5) var(--bf-space-6); border-bottom: 1px solid var(--bf-color-border); background: var(--bf-color-surface-alt);
}
:is(.bf-home, .bf-om) .bf-om-receipt__title { font-family: var(--bf-om-font-display); font-weight: 700; font-size: var(--bf-text-lg); margin: 0; letter-spacing: -0.01em; color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-receipt__ref { margin: 2px 0 0; font-size: var(--bf-text-xs); color: var(--bf-color-text-muted); }
:is(.bf-home, .bf-om) .bf-om-receipt__ref span { color: var(--bf-color-text); font-weight: 700; }

/* sections */
:is(.bf-home, .bf-om) .bf-om-receipt__sec { padding: var(--bf-space-5) var(--bf-space-6); border-top: 1px solid var(--bf-color-border); }
:is(.bf-home, .bf-om) .bf-om-receipt__body > .bf-om-receipt__sec:first-child { border-top: 0; }
:is(.bf-home, .bf-om) .bf-om-receipt__sechead { display: flex; align-items: center; gap: var(--bf-space-2); margin: 0 0 var(--bf-space-3); }
:is(.bf-home, .bf-om) .bf-om-receipt__sechead .fa { color: var(--bf-color-primary-text); width: 1.1em; text-align: center; }
:is(.bf-home, .bf-om) .bf-om-receipt__sectitle {
  font-family: var(--bf-om-font-display); font-weight: 700; font-size: var(--bf-text-sm);
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--bf-color-text-muted);
}

/* order details breadcrumb */
:is(.bf-home, .bf-om) .bf-om-receipt__crumb { font-family: var(--bf-om-font-display); font-weight: 700; font-size: var(--bf-text-lg); letter-spacing: -0.01em; color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-receipt__crumb .fa { font-size: var(--bf-text-sm); color: var(--bf-color-text-muted); margin: 0 var(--bf-space-1); }

/* package + schedule (schedule HTML is JS-injected by fSetSelectedDay2) */
:is(.bf-home, .bf-om) .bf-om-receipt__pkg { font-weight: 600; color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-receipt__sched { margin-top: var(--bf-space-2); font-size: var(--bf-text-sm); color: var(--bf-color-text-muted); line-height: 1.6; }
:is(.bf-home, .bf-om) .bf-om-receipt__sched b,
:is(.bf-home, .bf-om) .bf-om-receipt__sched strong { color: var(--bf-color-text); }

/* print proof (SOAP trueview JPG injected into the wrapper) */
:is(.bf-home, .bf-om) .bf-om-receipt__buildtype { font-weight: 600; color: var(--bf-color-text); margin-bottom: var(--bf-space-2); }
:is(.bf-home, .bf-om) .bf-om-receipt__proofcap { display: flex; align-items: center; gap: var(--bf-space-2); margin-bottom: var(--bf-space-2); font-size: var(--bf-text-xs); color: var(--bf-color-text-muted); }
:is(.bf-home, .bf-om) .bf-om-receipt__proofcap .fa { color: var(--bf-color-text-muted); }
:is(.bf-home, .bf-om) .bf-om-receipt__proof { max-width: 380px; padding: var(--bf-space-2); border: 1px solid var(--bf-color-border); border-radius: var(--bf-radius-sm); background: #fff; }
:is(.bf-home, .bf-om) .bf-om-receipt__proof:empty { display: none; }
:is(.bf-home, .bf-om) .bf-om-receipt__proof img { display: block; max-width: 100%; height: auto; }

/* digital listing (title + description + properties; JS-injected HTML) */
:is(.bf-home, .bf-om) .bf-om-receipt__digital { font-size: var(--bf-text-sm); color: var(--bf-color-text-muted); line-height: 1.6; }
:is(.bf-home, .bf-om) .bf-om-receipt__digital b,
:is(.bf-home, .bf-om) .bf-om-receipt__digital strong { color: var(--bf-color-text); }

/* options: featured rows, sponsored words, photos */
:is(.bf-home, .bf-om) .bf-om-receipt__optlbl {
  display: block; margin: var(--bf-space-3) 0 var(--bf-space-1); font-size: var(--bf-text-xs); font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--bf-color-text-muted);
}
:is(.bf-home, .bf-om) #confirm_placement_options > .bf-om-receipt__optlbl { margin-top: 0; }
:is(.bf-home, .bf-om) .bf-om-receipt__optlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--bf-space-2); }
:is(.bf-home, .bf-om) .bf-om-receipt__optlist > li { display: flex; align-items: center; gap: var(--bf-space-2); font-size: var(--bf-text-sm); color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-receipt__optlist .fa { color: var(--bf-color-success); }
:is(.bf-home, .bf-om) .bf-om-receipt__words { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--bf-space-2); }
:is(.bf-home, .bf-om) .bf-om-receipt__words > li {
  padding: 2px 9px; border-radius: 999px; font-size: var(--bf-text-xs); font-weight: 600;
  background: var(--bf-om-primary-tint); color: var(--bf-color-primary-text);
}
:is(.bf-home, .bf-om) .bf-om-receipt__photos { display: flex; flex-wrap: wrap; gap: var(--bf-space-2); }
:is(.bf-home, .bf-om) .bf-om-receipt__photo { width: 56px; height: 56px; overflow: hidden; border: 1px solid var(--bf-color-border); border-radius: var(--bf-radius-sm); background: var(--bf-color-surface-alt); }
:is(.bf-home, .bf-om) .bf-om-receipt__photoimg { width: 100%; height: 100%; object-fit: contain; }

/* totals: only Order Price / Tax / Total are available (JS hides #tax-line at 0 and
   the whole #place_ad-confirm-amount block for free ads) */
:is(.bf-home, .bf-om) .bf-om-receipt__totals { padding: var(--bf-space-5) var(--bf-space-6); border-top: 2px solid var(--bf-color-border-strong); background: var(--bf-color-surface-alt); }
:is(.bf-home, .bf-om) .bf-om-receipt__trow { display: flex; align-items: baseline; justify-content: flex-end; gap: var(--bf-space-5); margin-top: var(--bf-space-1); }
:is(.bf-home, .bf-om) .bf-om-receipt__tk { font-size: var(--bf-text-sm); color: var(--bf-color-text-muted); text-align: right; }
:is(.bf-home, .bf-om) .bf-om-receipt__tv { min-width: 96px; font-weight: 600; color: var(--bf-color-text); text-align: right; font-variant-numeric: tabular-nums; }
:is(.bf-home, .bf-om) .bf-om-receipt__trow--grand { margin-top: var(--bf-space-3); padding-top: var(--bf-space-3); border-top: 1px solid var(--bf-color-border); }
:is(.bf-home, .bf-om) .bf-om-receipt__trow--grand .bf-om-receipt__tk { font-family: var(--bf-om-font-display); font-weight: 700; font-size: var(--bf-text-base); color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-receipt__trow--grand .bf-om-receipt__tv { font-family: var(--bf-om-font-display); font-weight: 800; font-size: var(--bf-text-xl); color: var(--bf-color-primary-text); }

/* ---- action bar: Back (left) + captcha + Confirm (right) ---- */
:is(.bf-home, .bf-om) .bf-om-confirm__actions {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--bf-space-4); margin-top: var(--bf-space-5);
  padding: var(--bf-space-5); border: 1px solid var(--bf-color-border-strong); border-radius: var(--bf-radius-lg); background: var(--bf-color-surface);
}
:is(.bf-home, .bf-om) .bf-om-confirm__submit { display: flex; align-items: center; gap: var(--bf-space-3); margin-left: auto; }
:is(.bf-home, .bf-om) .bf-om-confirm__captcha { display: inline-flex; }
:is(.bf-home, .bf-om) .bf-om-confirm__actions #next-button-confirm { white-space: normal; }
@media (max-width: 600px) {
  :is(.bf-home, .bf-om) .bf-om-confirm__actions { flex-direction: column; align-items: stretch; }
  :is(.bf-home, .bf-om) .bf-om-confirm__submit { flex-direction: column; align-items: stretch; margin-left: 0; }
  :is(.bf-home, .bf-om) .bf-om-receipt__head,
  :is(.bf-home, .bf-om) .bf-om-receipt__sec,
  :is(.bf-home, .bf-om) .bf-om-receipt__totals { padding-left: var(--bf-space-4); padding-right: var(--bf-space-4); }
}

/* ============================================================================
   W12 - place_ad_payment.php: "Secure checkout stepper" (Open Market).
   A numbered vertical spine ties Billing -> Payment -> Confirm into one guided
   sequence. The payment step (which carries the running total + the Square card)
   is brand-accented as the money moment; the ink Pay button is the action climax.
   Every figure flows from brand tokens; page behavior (ids/JS hooks) is untouched.
   ============================================================================ */
:is(.bf-home, .bf-om) .bf-om-pay__securechip { display: inline-flex; align-items: center; gap: var(--bf-space-2); font-size: var(--bf-text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; background: var(--bf-om-primary-tint); color: var(--bf-color-primary-text); border: 1px solid color-mix(in srgb, var(--bf-brand-primary) 28%, transparent); }

:is(.bf-home, .bf-om) .bf-om-pay { max-width: 680px; margin: 0 auto; }

:is(.bf-home, .bf-om) .bf-om-pay__steps { display: grid; gap: var(--bf-space-4); }
:is(.bf-home, .bf-om) .bf-om-pay__step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--bf-space-4); }
:is(.bf-home, .bf-om) .bf-om-pay__rail { position: relative; }
:is(.bf-home, .bf-om) .bf-om-pay__no { width: 40px; height: 40px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--bf-om-font-display); font-weight: 800; font-size: var(--bf-text-base); background: var(--bf-brand-primary); color: var(--bf-brand-primary-ink); position: relative; z-index: 1; box-shadow: 0 0 0 4px color-mix(in srgb, var(--bf-brand-primary) 14%, transparent); }
:is(.bf-home, .bf-om) .bf-om-pay__step:not(:last-child) .bf-om-pay__rail::after { content: ""; position: absolute; left: 19px; top: 48px; bottom: calc(-1 * var(--bf-space-4)); width: 2px; background: var(--bf-color-border-strong); }

:is(.bf-home, .bf-om) .bf-om-pay__card { border: 1px solid var(--bf-color-border-strong); border-radius: var(--bf-radius-lg); background: var(--bf-color-surface); overflow: hidden; }
:is(.bf-home, .bf-om) .bf-om-pay__cardhead { padding: var(--bf-space-4) var(--bf-space-5); border-bottom: 1px solid var(--bf-color-border); }
:is(.bf-home, .bf-om) .bf-om-pay__t { font-family: var(--bf-om-font-display); font-weight: 700; font-size: var(--bf-text-base); color: var(--bf-color-text); margin: 0; letter-spacing: -0.01em; }
:is(.bf-home, .bf-om) .bf-om-pay__d { font-size: var(--bf-text-xs); color: var(--bf-color-text-muted); margin: 2px 0 0; }
:is(.bf-home, .bf-om) .bf-om-pay__cardbody { padding: var(--bf-space-5); }

/* payment step = the money moment: brand top-accent + tinted head */
:is(.bf-home, .bf-om) .bf-om-pay__step--pay .bf-om-pay__card { border-top: 3px solid var(--bf-brand-primary); }
:is(.bf-home, .bf-om) .bf-om-pay__step--pay .bf-om-pay__cardhead { background: var(--bf-om-primary-tint); }

/* CSR lookup: only the visible (non-hidden) lookup gets a divider */
:is(.bf-home, .bf-om) .bf-om-pay__lookup:has(input:not([type="hidden"])) { margin-bottom: var(--bf-space-4); padding-bottom: var(--bf-space-4); border-bottom: 1px dashed var(--bf-color-border); }
:is(.bf-home, .bf-om) .bf-om-pay__lookup .bf-input { max-width: 360px; margin: var(--bf-space-1) var(--bf-space-2) var(--bf-space-2) 0; }
:is(.bf-home, .bf-om) .bf-om-pay__lookup span i { color: var(--bf-color-text-muted); font-size: var(--bf-text-xs); }

/* billing summary (#show-billing-info) */
:is(.bf-home, .bf-om) .bf-om-pay__bill .form-group { font-size: var(--bf-text-sm); color: var(--bf-color-text-muted); line-height: 1.7; margin: 0 0 var(--bf-space-3); }
:is(.bf-home, .bf-om) .bf-om-pay__bill #show-billing-firstname,
:is(.bf-home, .bf-om) .bf-om-pay__bill #show-billing-lastname { font-weight: 700; color: var(--bf-color-text); }

/* billing edit (#update-billing-info): stacked full-width fields */
:is(.bf-home, .bf-om) .bf-om-pay__billedit .bf-input,
:is(.bf-home, .bf-om) .bf-om-pay__billedit .bf-select { display: block; width: 100%; margin-bottom: var(--bf-space-3); }
:is(.bf-home, .bf-om) .bf-om-pay__billedit br { display: none; }
:is(.bf-home, .bf-om) .bf-om-pay__billedit hr { display: none; }

/* Square card field note */
:is(.bf-home, .bf-om) .bf-om-pay__cardnote { display: flex; align-items: center; gap: var(--bf-space-2); margin: var(--bf-space-3) 0 0; font-size: var(--bf-text-xs); color: var(--bf-color-text-muted); }
:is(.bf-home, .bf-om) .bf-om-pay__cardnote .fa { color: var(--bf-color-success); }

/* running total (Order Price / Tax / Total Amount of Payment) */
:is(.bf-home, .bf-om) .bf-om-pay__amount { margin-top: var(--bf-space-4); padding-top: var(--bf-space-4); border-top: 1px solid var(--bf-color-border); }
:is(.bf-home, .bf-om) .bf-om-pay__trow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--bf-space-3); margin-top: var(--bf-space-2); }
:is(.bf-home, .bf-om) .bf-om-pay__trow:first-child { margin-top: 0; }
:is(.bf-home, .bf-om) .bf-om-pay__tk { color: var(--bf-color-text-muted); font-size: var(--bf-text-sm); }
:is(.bf-home, .bf-om) .bf-om-pay__tv { color: var(--bf-color-text); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
:is(.bf-home, .bf-om) .bf-om-pay__trow--grand { margin-top: var(--bf-space-3); padding-top: var(--bf-space-3); border-top: 1px solid var(--bf-color-border); }
:is(.bf-home, .bf-om) .bf-om-pay__trow--grand .bf-om-pay__tk { font-family: var(--bf-om-font-display); font-weight: 700; font-size: var(--bf-text-base); color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-pay__trow--grand .bf-om-pay__tv { font-family: var(--bf-om-font-display); font-weight: 800; font-size: var(--bf-text-2xl); color: var(--bf-color-primary-text); }
/* the figure matches its row (overrides the legacy WS3 #payment-amount sizing in components.css) */
:is(.bf-home, .bf-om) #payment-credit-card-info .bf-om-pay__trow #payment-amount { font: inherit; color: inherit; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* step 3 actions: stacked, ink Pay first, quiet Cancel */
:is(.bf-home, .bf-om) .bf-om-pay__actions { display: flex; flex-direction: column; gap: var(--bf-space-2); }
:is(.bf-home, .bf-om) .bf-om-pay__actions .bf-btn { width: 100%; }
:is(.bf-home, .bf-om) .bf-om-pay__actions .bf-btn[data-target="#myModal"] { background: transparent; border-color: transparent; color: var(--bf-color-text-muted); }
:is(.bf-home, .bf-om) .bf-om-pay__reassure { display: flex; align-items: center; justify-content: center; gap: var(--bf-space-2); margin: var(--bf-space-4) 0 0; font-size: var(--bf-text-xs); color: var(--bf-color-text-muted); text-align: center; }
:is(.bf-home, .bf-om) .bf-om-pay__reassure .fa { color: var(--bf-color-success); }

@media (max-width: 480px) {
  :is(.bf-home, .bf-om) .bf-om-pay__step { grid-template-columns: 32px minmax(0, 1fr); gap: var(--bf-space-3); }
  :is(.bf-home, .bf-om) .bf-om-pay__no { width: 32px; height: 32px; font-size: var(--bf-text-sm); }
  :is(.bf-home, .bf-om) .bf-om-pay__step:not(:last-child) .bf-om-pay__rail::after { left: 15px; top: 40px; }
}

/* =============================================================================
   PAYMENT SUCCESS (W13) - payment_success.php promoted to Open Market as a
   focused "confirmation moment" (owner picked option 1). A success medallion +
   one <h1>, one line of copy, then ONE card that owns the order: a header anchors
   the order reference (the datum the customer quotes to support), and the body is
   the stacked next-step action rows (receipt / listing / manage / PDF), the
   email/PDF confirmation note, and the Return-to-home ink action. The
   #print-upsell-dialog stays a Bootstrap .modal (the body onload AND scripts.js
   both call .modal('show')); only its skin is Open Market. All color/space from
   tokens; teal is accent/border/focus only, the primary action is the ink plate.
   ============================================================================= */

:is(.bf-home, .bf-om) .bf-om-paid { max-width: 540px; margin: 0 auto; }

/* success hero */
:is(.bf-home, .bf-om) .bf-om-paid__hero { text-align: center; margin: var(--bf-space-6) 0 var(--bf-space-5); }
:is(.bf-home, .bf-om) .bf-om-paid__badge { display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 999px; margin-bottom: var(--bf-space-3); font-size: 28px;
  background: color-mix(in srgb, var(--bf-color-success) 14%, transparent); color: var(--bf-color-success);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--bf-color-success) 8%, transparent); }
:is(.bf-home, .bf-om) .bf-om-paid__hero .bf-kicker { justify-content: center; }
:is(.bf-home, .bf-om) .bf-om-paid__hero h1 { margin: var(--bf-space-2) 0 0; border: 0; }
:is(.bf-home, .bf-om) .bf-om-paid__sub { margin: var(--bf-space-3) auto 0; max-width: 38ch; color: var(--bf-color-text-muted); }

/* the order card */
:is(.bf-home, .bf-om) .bf-om-paid__card { overflow: hidden; }
:is(.bf-home, .bf-om) .bf-om-paid__head { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--bf-space-3); padding: var(--bf-space-4) var(--bf-space-5); border-bottom: 1px solid var(--bf-color-border); }
:is(.bf-home, .bf-om) .bf-om-paid__head-label { font-size: var(--bf-text-xs); font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--bf-color-text-muted); }
:is(.bf-home, .bf-om) .bf-om-paid__ref { font-family: var(--bf-om-font-display); font-weight: 800;
  font-size: var(--bf-text-xl); color: var(--bf-color-text); font-variant-numeric: tabular-nums; }
:is(.bf-home, .bf-om) .bf-om-paid__body { padding: var(--bf-space-5); }

/* stacked action list (each row is a labelled, focus-ringed link) */
:is(.bf-home, .bf-om) .bf-om-paid__actions { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--bf-space-2); }
:is(.bf-home, .bf-om) .bf-om-paid__action { display: flex; align-items: center; gap: var(--bf-space-4);
  padding: var(--bf-space-3) var(--bf-space-4); border: 1px solid var(--bf-color-border-strong);
  border-radius: var(--bf-radius-md); background: var(--bf-color-surface); color: var(--bf-color-text); text-decoration: none; }
:is(.bf-home, .bf-om) .bf-om-paid__action:hover { border-color: color-mix(in srgb, var(--bf-brand-primary) 45%, var(--bf-color-border));
  background: var(--bf-om-primary-tint); text-decoration: none; }
:is(.bf-home, .bf-om) .bf-om-paid__action:focus-visible { outline: 2px solid var(--bf-color-focus-ring); outline-offset: 2px; }
:is(.bf-home, .bf-om) .bf-om-paid__action-ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--bf-radius-md);
  display: grid; place-items: center; font-size: var(--bf-text-lg); background: var(--bf-om-primary-tint); color: var(--bf-color-primary-text); }
:is(.bf-home, .bf-om) .bf-om-paid__action-txt { display: grid; gap: 1px; min-width: 0; }
:is(.bf-home, .bf-om) .bf-om-paid__action-txt b { font-family: var(--bf-om-font-display); font-weight: 700;
  font-size: var(--bf-text-base); color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-paid__action-txt span { font-size: var(--bf-text-xs); color: var(--bf-color-text-muted); }
:is(.bf-home, .bf-om) .bf-om-paid__action-go { margin-left: auto; flex: 0 0 auto; color: var(--bf-color-text-muted); font-size: var(--bf-text-base); }

/* confirmation note (email / PDF) */
:is(.bf-home, .bf-om) .bf-om-paid__note { display: flex; align-items: flex-start; gap: var(--bf-space-3);
  margin: var(--bf-space-4) 0 0; padding: var(--bf-space-3) var(--bf-space-4); border-radius: var(--bf-radius-md);
  font-size: var(--bf-text-sm); background: var(--bf-om-primary-tint); color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-paid__note .fa { color: var(--bf-color-primary-text); margin-top: 2px; }
:is(.bf-home, .bf-om) .bf-om-paid__note i { font-style: italic; }

/* return home (the ink plate exit, set off by a hairline) */
:is(.bf-home, .bf-om) .bf-om-paid__foot { margin-top: var(--bf-space-5); padding-top: var(--bf-space-5);
  border-top: 1px solid var(--bf-color-border); text-align: center; }
:is(.bf-home, .bf-om) .bf-om-paid__home { min-width: 220px; }

/* upgrade-offer modal skin (the element stays a Bootstrap .modal so .modal('show') works) */
:is(.bf-home, .bf-om) .bf-om-paid__dialog { background: var(--bf-color-surface); border: 0;
  border-top: 3px solid var(--bf-brand-primary); border-radius: var(--bf-radius-lg); box-shadow: var(--bf-shadow-lg);
  padding: var(--bf-space-6); text-align: center; }
:is(.bf-home, .bf-om) .bf-om-paid__dialog-media { width: 76px; height: 76px; margin: 0 auto var(--bf-space-3);
  border-radius: 999px; overflow: hidden; display: grid; place-items: center; background: var(--bf-om-primary-tint); }
:is(.bf-home, .bf-om) .bf-om-paid__dialog-media img { width: 100%; height: 100%; object-fit: cover; }
:is(.bf-home, .bf-om) .bf-om-paid__dialog-title { margin: 0 0 var(--bf-space-3); font-family: var(--bf-om-font-display); font-size: var(--bf-text-xl); }
:is(.bf-home, .bf-om) .bf-om-paid__dialog p { margin: 0 0 var(--bf-space-2); color: var(--bf-color-text-muted); font-size: var(--bf-text-sm); }
:is(.bf-home, .bf-om) .bf-om-paid__dialog-foot { display: flex; gap: var(--bf-space-3); justify-content: center; margin-top: var(--bf-space-5); }
:is(.bf-home, .bf-om) .bf-om-paid__dialog-foot .bf-btn { min-width: 130px; }

/* gated motion: row hover only animates when reduced-motion is not requested */
@media (prefers-reduced-motion: no-preference) {
  :is(.bf-home, .bf-om) .bf-om-paid__action { transition: border-color var(--bf-transition-fast), background-color var(--bf-transition-fast); }
}

@media (max-width: 440px) {
  :is(.bf-home, .bf-om) .bf-om-paid__dialog-foot { flex-direction: column-reverse; }
  :is(.bf-home, .bf-om) .bf-om-paid__dialog-foot .bf-btn { width: 100%; }
}

/* =============================================================================
   PAYMENT FAILED (W14) - payment_failed.php promoted to Open Market as a focused
   "recovery moment" (owner picked option 1), the inverse sibling of the W13
   success page. A danger medallion + one <h1> (the real $header_title), one
   explanatory line ($error_title), then ONE card holding the raw gateway $message
   in a danger-tinted well and the single recovery action - Try again - as the ink
   plate, with a quiet Contact-us path below a hairline. All color/space from
   tokens; the failure accent derives from --bf-color-danger (the analogue of the
   success medallion's --bf-color-success). Teal stays accent/border/focus only;
   the primary action is the ink plate.
   ============================================================================= */

:is(.bf-home, .bf-om) .bf-om-fail { max-width: 540px; margin: 0 auto; }

/* failure hero (mirror of .bf-om-paid__hero, danger medallion) */
:is(.bf-home, .bf-om) .bf-om-fail__hero { text-align: center; margin: var(--bf-space-6) 0 var(--bf-space-5); }
:is(.bf-home, .bf-om) .bf-om-fail__badge { display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 999px; margin-bottom: var(--bf-space-3); font-size: 28px;
  background: color-mix(in srgb, var(--bf-color-danger) 14%, transparent); color: var(--bf-color-danger);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--bf-color-danger) 8%, transparent); }
:is(.bf-home, .bf-om) .bf-om-fail__hero .bf-kicker { justify-content: center; }
:is(.bf-home, .bf-om) .bf-om-fail__hero h1 { margin: var(--bf-space-2) 0 0; border: 0; text-transform: none; }
:is(.bf-home, .bf-om) .bf-om-fail__sub { margin: var(--bf-space-3) auto 0; max-width: 40ch; color: var(--bf-color-text-muted); }

/* the recovery card */
:is(.bf-home, .bf-om) .bf-om-fail__body { padding: var(--bf-space-5); }

/* gateway message (the raw $message), in a danger-tinted well */
:is(.bf-home, .bf-om) .bf-om-fail__msg { display: flex; align-items: flex-start; gap: var(--bf-space-3);
  margin: 0 0 var(--bf-space-5); padding: var(--bf-space-4); border-radius: var(--bf-radius-md);
  background: var(--bf-color-danger-bg); color: var(--bf-color-text); font-size: var(--bf-text-sm);
  border: 1px solid color-mix(in srgb, var(--bf-color-danger) 22%, transparent); }
:is(.bf-home, .bf-om) .bf-om-fail__msg .fa { color: var(--bf-color-danger); margin-top: 2px; font-size: var(--bf-text-base); }

/* primary action (the ink plate, full width) */
:is(.bf-home, .bf-om) .bf-om-fail__retry { margin: 0; }
:is(.bf-home, .bf-om) .bf-om-fail__retry-btn { width: 100%; }

/* quiet help path below a hairline */
:is(.bf-home, .bf-om) .bf-om-fail__foot { margin-top: var(--bf-space-5); padding-top: var(--bf-space-5);
  border-top: 1px solid var(--bf-color-border); text-align: center; }
:is(.bf-home, .bf-om) .bf-om-fail__help { margin: 0; font-size: var(--bf-text-sm); color: var(--bf-color-text-muted); }
:is(.bf-home, .bf-om) .bf-om-fail__help a { color: var(--bf-color-primary-text); font-weight: 600; }
:is(.bf-home, .bf-om) .bf-om-fail__reassure { margin: var(--bf-space-2) 0 0; font-size: var(--bf-text-xs); color: var(--bf-color-text-muted); }

/* =============================================================================
   APPROVE AD ORDER (W15) - placead_approve_order.php promoted to Open Market as a
   focused "confirmation moment" (owner picked option 1), the internal sibling of
   the W13 success page. By the time the page renders the order has already been
   approved by the logic prefix, so this is a confirmation: a success medallion +
   one <h1> (the real "Approve Ad Order #N"), a one-line confirmation, then ONE card
   whose head carries the order reference and whose body holds the approved-ad
   summary (the raw $ad_order_confirm) and the single onward action - Continue (it
   self-posts with action='redirect', and the page prefix redirects to csr_home.php)
   - as the ink plate below a hairline. All color/space from tokens; the success
   accent derives from --bf-color-success (same as W13). Teal stays accent/border/
   focus only; the primary action is the ink plate.
   ============================================================================= */

:is(.bf-home, .bf-om) .bf-om-approve { max-width: 560px; margin: 0 auto; }

/* confirmation hero (success medallion, mirror of .bf-om-paid__hero) */
:is(.bf-home, .bf-om) .bf-om-approve__hero { text-align: center; margin: var(--bf-space-6) 0 var(--bf-space-5); }
:is(.bf-home, .bf-om) .bf-om-approve__badge { display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 999px; margin-bottom: var(--bf-space-3); font-size: 28px;
  background: color-mix(in srgb, var(--bf-color-success) 14%, transparent); color: var(--bf-color-success);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--bf-color-success) 8%, transparent); }
:is(.bf-home, .bf-om) .bf-om-approve__hero .bf-kicker { justify-content: center; }
:is(.bf-home, .bf-om) .bf-om-approve__hero h1 { margin: var(--bf-space-2) 0 0; border: 0; }
:is(.bf-home, .bf-om) .bf-om-approve__sub { margin: var(--bf-space-3) auto 0; max-width: 44ch; color: var(--bf-color-text-muted); }

/* the order card */
:is(.bf-home, .bf-om) .bf-om-approve__card { overflow: hidden; }
:is(.bf-home, .bf-om) .bf-om-approve__head { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--bf-space-3); padding: var(--bf-space-4) var(--bf-space-5); border-bottom: 1px solid var(--bf-color-border); }
:is(.bf-home, .bf-om) .bf-om-approve__head-label { font-size: var(--bf-text-xs); font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--bf-color-text-muted); }
:is(.bf-home, .bf-om) .bf-om-approve__ref { font-family: var(--bf-om-font-display); font-weight: 800;
  font-size: var(--bf-text-xl); color: var(--bf-color-text); font-variant-numeric: tabular-nums; }
:is(.bf-home, .bf-om) .bf-om-approve__body { padding: var(--bf-space-5); }

/* the approved-ad summary (the raw $ad_order_confirm blob, presented cleanly) */
:is(.bf-home, .bf-om) .bf-om-approve__summary { font-size: var(--bf-text-sm); color: var(--bf-color-text); line-height: 1.55; }
:is(.bf-home, .bf-om) .bf-om-approve__summary a { color: var(--bf-color-primary-text); }

/* onward action (the ink plate exit, set off by a hairline) */
:is(.bf-home, .bf-om) .bf-om-approve__foot { margin-top: var(--bf-space-5); padding-top: var(--bf-space-5);
  border-top: 1px solid var(--bf-color-border); text-align: center; }
:is(.bf-home, .bf-om) .bf-om-approve__continue { min-width: 240px; }
:is(.bf-home, .bf-om) .bf-om-approve__hint { margin: var(--bf-space-3) 0 0; font-size: var(--bf-text-xs); color: var(--bf-color-text-muted); }
/* ===========================================================================
   .bf-om-cancel  -  W16 ad-cancellation page (placead_cancel_order.php, option 1)
   The destructive sibling of .bf-om-approve: a focused centered column whose hero
   carries a CAUTION medallion for the cancel-decision form and a SUCCESS medallion
   for the after-cancel confirmation. Token-only; the only red is the shipped
   .bf-btn--danger Cancel Order button. Mirrors .bf-om-approve / .bf-om-fail.
   =========================================================================== */
:is(.bf-home, .bf-om) .bf-om-cancel { max-width: 560px; margin: 0 auto; }

/* caution / confirmation hero (mirror of .bf-om-approve__hero) */
:is(.bf-home, .bf-om) .bf-om-cancel__hero { text-align: center; margin: var(--bf-space-6) 0 var(--bf-space-5); }
:is(.bf-home, .bf-om) .bf-om-cancel__badge { display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: var(--bf-radius-pill); margin-bottom: var(--bf-space-3); font-size: 26px;
  background: color-mix(in srgb, var(--bf-color-warning) 14%, transparent); color: var(--bf-color-warning);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--bf-color-warning) 8%, transparent); }
:is(.bf-home, .bf-om) .bf-om-cancel__badge--done {
  background: color-mix(in srgb, var(--bf-color-success) 14%, transparent); color: var(--bf-color-success);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--bf-color-success) 8%, transparent); }
:is(.bf-home, .bf-om) .bf-om-cancel__hero .bf-kicker { justify-content: center; }
:is(.bf-home, .bf-om) .bf-om-cancel__hero h1 { margin: var(--bf-space-2) 0 0; border: 0; }
:is(.bf-home, .bf-om) .bf-om-cancel__sub { margin: var(--bf-space-3) auto 0; max-width: 46ch; color: var(--bf-color-text-muted); }

/* the decision card */
:is(.bf-home, .bf-om) .bf-om-cancel__card { overflow: hidden; }
:is(.bf-home, .bf-om) .bf-om-cancel__head { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--bf-space-3); padding: var(--bf-space-4) var(--bf-space-5); border-bottom: 1px solid var(--bf-color-border); }
:is(.bf-home, .bf-om) .bf-om-cancel__head-label { font-size: var(--bf-text-xs); font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--bf-color-text-muted); }
:is(.bf-home, .bf-om) .bf-om-cancel__ref { font-family: var(--bf-om-font-display); font-weight: 800;
  font-size: var(--bf-text-xl); color: var(--bf-color-text); font-variant-numeric: tabular-nums; }
:is(.bf-home, .bf-om) .bf-om-cancel__body { padding: var(--bf-space-5); display: grid; gap: var(--bf-space-5); }

/* the ad summary well (the raw $ad_order_confirm blob) */
:is(.bf-home, .bf-om) .bf-om-cancel__summary { margin: 0; font-size: var(--bf-text-sm); line-height: 1.55; }
:is(.bf-home, .bf-om) .bf-om-cancel__summary a { color: var(--bf-color-primary-text); }

/* the optional inputs (reason + the gated fraud toggle) */
:is(.bf-home, .bf-om) .bf-om-cancel__fields { display: grid; gap: var(--bf-space-4); }

/* footer actions (calm Do Not Cancel + danger Cancel Order, set off by a hairline) */
:is(.bf-home, .bf-om) .bf-om-cancel__foot { margin-top: var(--bf-space-1); padding-top: var(--bf-space-5);
  border-top: 1px solid var(--bf-color-border); display: flex; gap: var(--bf-space-3);
  justify-content: flex-end; flex-wrap: wrap; }
:is(.bf-home, .bf-om) .bf-om-cancel__foot .bf-btn { min-width: 168px; }

/* the after-cancel confirmation (the success state) */
:is(.bf-home, .bf-om) .bf-om-cancel__done { padding: var(--bf-space-5); text-align: center; }
:is(.bf-home, .bf-om) .bf-om-cancel__done-msg { margin: 0 0 var(--bf-space-2); font-family: var(--bf-om-font-display);
  font-weight: 700; font-size: var(--bf-text-lg); color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-cancel__done-sub { margin: 0 0 var(--bf-space-5); color: var(--bf-color-text-muted); }
:is(.bf-home, .bf-om) .bf-om-cancel__continue { min-width: 240px; }

/* stack the footer actions full-width on narrow screens (safe action on top) */
@media (max-width: 30rem) {
  :is(.bf-home, .bf-om) .bf-om-cancel__foot { flex-direction: column; }
  :is(.bf-home, .bf-om) .bf-om-cancel__foot .bf-btn { width: 100%; }
}

/* ============================================================================
   W17 - payment_receipt.php (the print/popup receipt, rendered via the shared
   fragment bluefin/receipt.php): "Tear-off printable document" (Open Market).
   A chrome-light print page: the .bf-om-printreceipt wrap centers a single
   receipt document (the body reuses the W11 .bf-om-receipt family) under one h1,
   with a quiet Print/Close action row that drops out on print. The host page
   payment_receipt.php stays a bare print/popup shell (no bf-shell nav).
   Scoped :is(.bf-home, .bf-om); tokens only.
   ============================================================================ */
:is(.bf-home, .bf-om) .bf-om-printreceipt { max-width: 720px; margin: 0 auto; }
:is(.bf-home, .bf-om) .bf-om-printreceipt__head { margin: 0 0 var(--bf-space-3); }
:is(.bf-home, .bf-om) .bf-om-printreceipt__head h1 { margin: var(--bf-space-1) 0 0; border: 0; }

/* quiet action row: Print = ink primary, Close = secondary; hidden on print */
:is(.bf-home, .bf-om) .bf-om-printreceipt__actions {
  display: flex; align-items: center; gap: var(--bf-space-3); justify-content: flex-end; margin: 0 0 var(--bf-space-4);
}
:is(.bf-home, .bf-om) .bf-om-printreceipt__actions .bf-btn .fa { margin-right: var(--bf-space-1); }

/* labelled definition rows (Customer details, Order details) */
:is(.bf-home, .bf-om) .bf-om-printreceipt__dl { display: grid; gap: var(--bf-space-2); margin: 0; }
:is(.bf-home, .bf-om) .bf-om-printreceipt__dl > div { display: flex; gap: var(--bf-space-4); align-items: baseline; }
:is(.bf-home, .bf-om) .bf-om-printreceipt__dl dt { flex: 0 0 150px; margin: 0; font-size: var(--bf-text-sm); font-weight: 600; color: var(--bf-color-text-muted); }
:is(.bf-home, .bf-om) .bf-om-printreceipt__dl dd { margin: 0; min-width: 0; color: var(--bf-color-text); line-height: 1.5; }
:is(.bf-home, .bf-om) .bf-om-printreceipt__muted { color: var(--bf-color-text-muted); }

/* spacing between the order-details breadcrumb and the company row */
:is(.bf-home, .bf-om) .bf-om-printreceipt .bf-om-receipt__crumb { margin: 0 0 var(--bf-space-3); }

/* receipt notes (the admin-configured RECEIPT_NOTES html) */
:is(.bf-home, .bf-om) .bf-om-printreceipt__notes { margin: 0; font-size: var(--bf-text-sm); color: var(--bf-color-text-muted); line-height: 1.6; }

/* print-clean: drop the action row, flatten the document to paper */
@media print {
  :is(.bf-home, .bf-om) .bf-om-printreceipt__actions { display: none; }
  :is(.bf-home, .bf-om) .bf-om-printreceipt .bf-om-receipt { box-shadow: none; border-color: var(--bf-color-border-strong); }
}

@media (max-width: 540px) {
  :is(.bf-home, .bf-om) .bf-om-printreceipt__dl > div { flex-direction: column; gap: 2px; }
  :is(.bf-home, .bf-om) .bf-om-printreceipt__dl dt { flex-basis: auto; }
  :is(.bf-home, .bf-om) .bf-om-printreceipt__actions { justify-content: stretch; }
  :is(.bf-home, .bf-om) .bf-om-printreceipt__actions .bf-btn { flex: 1; }
}

/* ---------------------------------------------------------------------------
   CONTACT  (contact.php - the publication directory, W18 "Map hero")
   A homepage-style gradient hero (editorial masthead + stylized map + floating
   contact card) above a designed publications directory + leader-dot index.
   All color from the brand tokens + color-mix(); motion reduced-motion gated.
   --------------------------------------------------------------------------- */
:is(.bf-home, .bf-om) .bf-om-contact__hero {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--bf-space-8);
  border: 1px solid color-mix(in srgb, var(--bf-brand-primary) 16%, var(--bf-color-border));
  border-radius: var(--bf-radius-xl);
  background:
    radial-gradient(900px 380px at 8% -25%, color-mix(in srgb, var(--bf-brand-primary) 18%, transparent), transparent 60%),
    radial-gradient(720px 360px at 98% -12%, color-mix(in srgb, var(--bf-om-accent) 16%, transparent), transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--bf-brand-primary) 8%, #ffffff) 0%, var(--bf-color-surface) 72%);
  box-shadow: var(--bf-shadow-md);
}
:is(.bf-home, .bf-om) .bf-om-contact__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image: radial-gradient(color-mix(in srgb, var(--bf-color-secondary) 16%, transparent) 1px, transparent 1.5px);
  background-size: 15px 15px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 42%);
  mask-image: linear-gradient(180deg, #000, transparent 42%);
}

:is(.bf-home, .bf-om) .bf-om-contact__masthead { position: relative; z-index: 1; padding: var(--bf-space-8) var(--bf-space-8) var(--bf-space-6); }
:is(.bf-home, .bf-om) .bf-om-contact__dateline { display: flex; align-items: center; gap: var(--bf-space-3); margin: 0 0 var(--bf-space-4); font-size: var(--bf-text-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bf-color-text-muted); }
:is(.bf-home, .bf-om) .bf-om-contact__datedot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--bf-brand-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bf-brand-primary) 22%, transparent); }
:is(.bf-home, .bf-om) .bf-om-contact__dateline-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--bf-color-border-strong), transparent); }
:is(.bf-home, .bf-om) .bf-om-contact__title { margin: 0; font-family: var(--bf-font-serif); font-weight: 600; font-size: clamp(40px, 6vw, 62px); line-height: 1.02; letter-spacing: -0.01em; color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-contact__title em { font-style: normal; background: linear-gradient(100deg, var(--bf-color-primary-hover), var(--bf-brand-primary) 55%, var(--bf-om-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
:is(.bf-home, .bf-om) .bf-om-contact__lead { margin: var(--bf-space-4) 0 0; max-width: 60ch; font-size: var(--bf-text-lg); line-height: 1.5; color: var(--bf-color-text-muted); }

:is(.bf-home, .bf-om) .bf-om-contact__map {
  position: relative; min-height: 380px; display: flex; align-items: flex-end; padding: var(--bf-space-6);
  border-top: 1px solid color-mix(in srgb, var(--bf-brand-primary) 14%, var(--bf-color-border));
  background:
    radial-gradient(440px 260px at 84% 16%, color-mix(in srgb, var(--bf-brand-primary) 30%, transparent), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 45px, color-mix(in srgb, var(--bf-color-secondary) 7%, transparent) 45px 46px),
    repeating-linear-gradient(90deg, transparent 0 45px, color-mix(in srgb, var(--bf-color-secondary) 7%, transparent) 45px 46px),
    linear-gradient(160deg, color-mix(in srgb, var(--bf-brand-primary) 12%, var(--bf-color-surface-sunken)), var(--bf-color-surface-sunken));
}
:is(.bf-home, .bf-om) .bf-om-contact__road { position: absolute; pointer-events: none; left: -10%; top: 36%; width: 120%; height: 20px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bf-brand-primary) 32%, transparent) 45%, transparent); transform: rotate(-6deg); }
:is(.bf-home, .bf-om) .bf-om-contact__road2 { position: absolute; pointer-events: none; left: 58%; top: -12%; width: 16px; height: 124%; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bf-om-accent) 26%, transparent) 50%, transparent); transform: rotate(7deg); }
:is(.bf-home, .bf-om) .bf-om-contact__map::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, color-mix(in srgb, var(--bf-color-secondary) 14%, transparent), transparent 55%); }
:is(.bf-home, .bf-om) .bf-om-contact__mapcap { position: absolute; z-index: 1; top: var(--bf-space-3); left: var(--bf-space-4); font-size: var(--bf-text-xs); color: var(--bf-color-text-muted); background: color-mix(in srgb, var(--bf-color-surface) 90%, transparent); padding: 2px var(--bf-space-2); border-radius: 999px; border: 1px solid var(--bf-color-border); }

:is(.bf-home, .bf-om) .bf-om-contact__pin { position: absolute; z-index: 1; top: 30%; right: 18%; width: 16px; height: 16px; }
:is(.bf-home, .bf-om) .bf-om-contact__pindot { position: absolute; inset: 0; border-radius: 50%; background: var(--bf-brand-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bf-brand-primary) 24%, transparent), 0 6px 14px rgba(0, 0, 0, 0.3); }
:is(.bf-home, .bf-om) .bf-om-contact__pinring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--bf-brand-primary) 55%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  :is(.bf-home, .bf-om) .bf-om-contact__pinring { animation: bf-om-contact-pulse 2.6s ease-out infinite; }
}
@keyframes bf-om-contact-pulse { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(3.4); opacity: 0; } }

:is(.bf-home, .bf-om) .bf-om-contact__card { position: relative; z-index: 1; width: 100%; max-width: 460px; overflow: hidden; background: var(--bf-color-surface); border: 1px solid var(--bf-color-border); border-radius: var(--bf-radius-lg); box-shadow: var(--bf-shadow-lg); }
:is(.bf-home, .bf-om) .bf-om-contact__cardaccent { height: 4px; background: linear-gradient(90deg, var(--bf-brand-primary), var(--bf-om-accent)); }
:is(.bf-home, .bf-om) .bf-om-contact__cardinner { padding: var(--bf-space-5) var(--bf-space-6) var(--bf-space-6); }
:is(.bf-home, .bf-om) .bf-om-contact__label { display: inline-flex; align-items: center; gap: var(--bf-space-2); margin: 0 0 var(--bf-space-2); font-size: var(--bf-text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bf-color-primary-text); }
:is(.bf-home, .bf-om) .bf-om-contact__addr { margin: 0 0 var(--bf-space-5); font-family: var(--bf-font-serif); font-weight: 600; font-size: var(--bf-text-2xl); line-height: 1.15; color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-contact__ctarow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bf-space-4); }
:is(.bf-home, .bf-om) .bf-om-contact__dir { display: inline-flex; align-items: center; gap: var(--bf-space-2); padding: 12px 24px; border-radius: var(--bf-radius-pill); background: linear-gradient(120deg, var(--bf-brand-primary), var(--bf-color-primary-hover)); color: var(--bf-brand-primary-ink); font-weight: 700; font-size: var(--bf-text-sm); text-decoration: none; box-shadow: 0 6px 18px color-mix(in srgb, var(--bf-brand-primary) 42%, transparent); transition: var(--bf-transition-lift); }
:is(.bf-home, .bf-om) .bf-om-contact__dir:hover { transform: translateY(var(--bf-lift-1)); color: var(--bf-brand-primary-ink); text-decoration: none; }
:is(.bf-home, .bf-om) .bf-om-contact__dir:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--bf-color-focus-ring), 0 6px 18px color-mix(in srgb, var(--bf-brand-primary) 42%, transparent); }
:is(.bf-home, .bf-om) .bf-om-contact__tel { display: inline-flex; align-items: center; gap: var(--bf-space-2); font-weight: 600; color: var(--bf-color-text); text-decoration: none; }
:is(.bf-home, .bf-om) .bf-om-contact__tel .fa { color: var(--bf-color-primary-text); }
:is(.bf-home, .bf-om) .bf-om-contact__tel:hover { color: var(--bf-color-primary-text); }

:is(.bf-home, .bf-om) .bf-om-contact__sec { margin-bottom: var(--bf-space-8); }
:is(.bf-home, .bf-om) .bf-om-contact__sechead { display: flex; align-items: baseline; gap: var(--bf-space-3); margin: 0 0 var(--bf-space-5); }
:is(.bf-home, .bf-om) .bf-om-contact__eyebrow { flex: 0 0 auto; font-size: var(--bf-text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bf-color-text-muted); }
:is(.bf-home, .bf-om) .bf-om-contact__sectitle { flex: 0 0 auto; margin: 0; font-family: var(--bf-font-serif); font-weight: 600; font-size: var(--bf-text-2xl); color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-contact__count { flex: 0 0 auto; font-size: var(--bf-text-xs); font-weight: 700; color: var(--bf-color-primary-text); background: var(--bf-om-primary-tint); border: 1px solid color-mix(in srgb, var(--bf-brand-primary) 24%, transparent); padding: 2px 10px; border-radius: 999px; }
:is(.bf-home, .bf-om) .bf-om-contact__rule { flex: 1; align-self: center; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--bf-brand-primary) 38%, transparent), transparent); }

:is(.bf-home, .bf-om) .bf-om-contact__pubs { display: grid; gap: var(--bf-space-3); }
:is(.bf-home, .bf-om) .bf-om-contact__pub { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--bf-space-3) var(--bf-space-5); padding: var(--bf-space-4) var(--bf-space-5); background: var(--bf-color-surface); border: 1px solid var(--bf-color-border); border-radius: var(--bf-radius-md); box-shadow: var(--bf-elev-rest-1); transition: var(--bf-transition-lift), border-color var(--bf-transition-fast); }
:is(.bf-home, .bf-om) .bf-om-contact__pub::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: var(--bf-radius-md) 0 0 var(--bf-radius-md); background: linear-gradient(180deg, var(--bf-brand-primary), var(--bf-om-accent)); opacity: 0; transition: opacity var(--bf-transition-base); }
:is(.bf-home, .bf-om) .bf-om-contact__pub:hover { transform: translateY(var(--bf-lift-1)); box-shadow: var(--bf-elev-hover-1); border-color: color-mix(in srgb, var(--bf-brand-primary) 28%, var(--bf-color-border)); }
:is(.bf-home, .bf-om) .bf-om-contact__pub:hover::before { opacity: 1; }
:is(.bf-home, .bf-om) .bf-om-contact__pubmain { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bf-space-3); min-width: 0; }
:is(.bf-home, .bf-om) .bf-om-contact__pubname { margin: 0; font-family: var(--bf-font-serif); font-weight: 600; font-size: var(--bf-text-lg); color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-contact__days { display: flex; flex-wrap: wrap; gap: var(--bf-space-1); }
:is(.bf-home, .bf-om) .bf-om-contact__pubcontact { display: flex; flex-wrap: wrap; gap: var(--bf-space-2) var(--bf-space-4); justify-content: flex-end; }
:is(.bf-home, .bf-om) .bf-om-contact__link { display: inline-flex; align-items: center; gap: var(--bf-space-2); font-size: var(--bf-text-sm); color: var(--bf-color-text); text-decoration: none; }
:is(.bf-home, .bf-om) .bf-om-contact__link .fa { color: var(--bf-color-primary-text); }
:is(.bf-home, .bf-om) .bf-om-contact__link:hover { color: var(--bf-color-primary-text); text-decoration: underline; }

:is(.bf-home, .bf-om) .bf-om-contact__idxcard { padding: var(--bf-space-6); background: var(--bf-color-surface); border: 1px solid var(--bf-color-border); border-radius: var(--bf-radius-lg); box-shadow: var(--bf-shadow-sm); }
:is(.bf-home, .bf-om) .bf-om-contact__idx { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--bf-space-8); }
:is(.bf-home, .bf-om) .bf-om-contact__idx > li { display: flex; align-items: baseline; gap: var(--bf-space-2); padding: var(--bf-space-2) 0; break-inside: avoid; font-size: var(--bf-text-sm); }
:is(.bf-home, .bf-om) .bf-om-contact__idxname { color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-contact__idxdots { flex: 1; align-self: stretch; min-width: var(--bf-space-5); border-bottom: 1px dotted var(--bf-color-border-strong); transform: translateY(-4px); }
:is(.bf-home, .bf-om) .bf-om-contact__idx a { color: var(--bf-color-text-muted); text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
:is(.bf-home, .bf-om) .bf-om-contact__idx a:hover { color: var(--bf-color-primary-text); }

:is(.bf-home, .bf-om) .bf-om-contact__noaddr { margin: 0 0 var(--bf-space-8); font-size: var(--bf-text-lg); color: var(--bf-color-text-muted); }

@media (max-width: 720px) {
  :is(.bf-home, .bf-om) .bf-om-contact__masthead { padding: var(--bf-space-6) var(--bf-space-5) var(--bf-space-5); }
  :is(.bf-home, .bf-om) .bf-om-contact__map { padding: var(--bf-space-4); min-height: 320px; }
  :is(.bf-home, .bf-om) .bf-om-contact__card { max-width: none; }
  :is(.bf-home, .bf-om) .bf-om-contact__pubcontact { justify-content: flex-start; }
  :is(.bf-home, .bf-om) .bf-om-contact__idx { columns: 1; }
}

/* ---------------------------------------------------------------------------
   LEGAL DOCUMENT  (.bf-om-doc - privacy_policy.php W19 "Indexed document + rail";
   built generic so terms_and_conditions.php W20 reuses it)
   A masthead above an indexed two-column reading layout: a sticky NUMBERED
   contents rail (anchor deep-links + a "Questions?" contact card) beside a
   .bf-prose document with numbered section heads. Collapses to a single column
   when the admin override constant is set (no rail is rendered then). Buildless:
   anchor links only, no JS, no animation. All color from brand tokens + color-mix().
   --------------------------------------------------------------------------- */
:is(.bf-home, .bf-om) .bf-om-doc__head { margin-bottom: var(--bf-space-6); }
:is(.bf-home, .bf-om) .bf-om-doc__kicker { margin: 0 0 var(--bf-space-2); font-size: var(--bf-text-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bf-color-text-muted); }
:is(.bf-home, .bf-om) .bf-om-doc__title { margin: 0; font-family: var(--bf-font-serif); font-weight: 600; font-size: clamp(36px, 5.4vw, 56px); line-height: 1.04; letter-spacing: -0.015em; color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-doc__standfirst { margin: var(--bf-space-3) 0 0; max-width: 60ch; font-size: var(--bf-text-lg); line-height: 1.55; color: var(--bf-color-text-muted); }
:is(.bf-home, .bf-om) .bf-om-doc__headrule { margin: var(--bf-space-5) 0 0; height: 3px; border: 0; background: linear-gradient(90deg, var(--bf-brand-primary), color-mix(in srgb, var(--bf-brand-primary) 30%, transparent) 60%, transparent); }

:is(.bf-home, .bf-om) .bf-om-doc__grid { display: grid; grid-template-columns: 1fr; gap: var(--bf-space-7); align-items: start; }
@media (min-width: 992px) {
  :is(.bf-home, .bf-om) .bf-om-doc__grid { grid-template-columns: 16rem minmax(0, 1fr); gap: var(--bf-space-8); }
}

:is(.bf-home, .bf-om) .bf-om-doc__rail { display: grid; gap: var(--bf-space-4); }
@media (min-width: 992px) {
  :is(.bf-home, .bf-om) .bf-om-doc__rail { position: sticky; top: var(--bf-space-5); }
}
:is(.bf-home, .bf-om) .bf-om-doc__rail-eyebrow { margin: 0 0 var(--bf-space-2); font-size: var(--bf-text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bf-color-text-muted); }
:is(.bf-home, .bf-om) .bf-om-doc__toc { list-style: none; margin: 0; padding: 0; counter-reset: bfomtoc; border-top: 1px solid var(--bf-color-border); }
:is(.bf-home, .bf-om) .bf-om-doc__toc li { counter-increment: bfomtoc; border-bottom: 1px solid var(--bf-color-border); }
:is(.bf-home, .bf-om) .bf-om-doc__toc a { display: flex; align-items: baseline; gap: var(--bf-space-2); padding: var(--bf-space-2) 0; font-size: var(--bf-text-sm); color: var(--bf-color-text); text-decoration: none; line-height: 1.35; }
:is(.bf-home, .bf-om) .bf-om-doc__toc a::before { content: counter(bfomtoc, decimal-leading-zero); flex: 0 0 auto; font-family: var(--bf-font-display); font-size: var(--bf-text-xs); font-weight: 700; color: var(--bf-color-primary-text); font-variant-numeric: tabular-nums; }
:is(.bf-home, .bf-om) .bf-om-doc__toc-intro { counter-increment: none; }
:is(.bf-home, .bf-om) .bf-om-doc__toc-intro a::before { content: "\00B7"; }
:is(.bf-home, .bf-om) .bf-om-doc__toc a:hover { color: var(--bf-color-primary-text); }
:is(.bf-home, .bf-om) .bf-om-doc__toc a:focus-visible { outline: 2px solid var(--bf-color-focus-ring); outline-offset: 2px; border-radius: 2px; }
:is(.bf-home, .bf-om) .bf-om-doc__toc-txt { flex: 1; }

:is(.bf-home, .bf-om) .bf-om-doc__mini { overflow: hidden; border: 1px solid var(--bf-color-border); border-radius: var(--bf-radius-lg); background: var(--bf-color-surface); box-shadow: var(--bf-shadow-sm); }
:is(.bf-home, .bf-om) .bf-om-doc__mini-accent { height: 3px; background: linear-gradient(90deg, var(--bf-brand-primary), var(--bf-om-accent)); }
:is(.bf-home, .bf-om) .bf-om-doc__mini-body { padding: var(--bf-space-4) var(--bf-space-4) var(--bf-space-5); }
:is(.bf-home, .bf-om) .bf-om-doc__mini-lbl { display: inline-flex; align-items: center; gap: var(--bf-space-2); margin: 0 0 var(--bf-space-1); font-size: var(--bf-text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bf-color-primary-text); }
:is(.bf-home, .bf-om) .bf-om-doc__mini p { margin: 0 0 var(--bf-space-3); font-size: var(--bf-text-sm); color: var(--bf-color-text-muted); line-height: 1.5; }
:is(.bf-home, .bf-om) .bf-om-doc__mini-link { display: inline-flex; align-items: center; gap: var(--bf-space-2); font-weight: 600; font-size: var(--bf-text-sm); color: var(--bf-color-primary-text); text-decoration: none; word-break: break-word; }
:is(.bf-home, .bf-om) .bf-om-doc__mini-link:hover { text-decoration: underline; }
:is(.bf-home, .bf-om) .bf-om-doc__mini-link:focus-visible { outline: 2px solid var(--bf-color-focus-ring); outline-offset: 2px; border-radius: 2px; }

:is(.bf-home, .bf-om) .bf-om-doc__doc { counter-reset: bfomdoc; }
:is(.bf-home, .bf-om) .bf-om-doc__doc.bf-prose { max-width: 70ch; }
:is(.bf-home, .bf-om) .bf-om-doc__doc h2 { counter-increment: bfomdoc; display: flex; align-items: baseline; gap: var(--bf-space-3); scroll-margin-top: var(--bf-space-5); margin-top: var(--bf-space-7); padding-top: var(--bf-space-5); border-top: 1px solid var(--bf-color-border); font-size: var(--bf-text-xl); }
:is(.bf-home, .bf-om) .bf-om-doc__doc h2::before { content: counter(bfomdoc, decimal-leading-zero); flex: 0 0 auto; font-family: var(--bf-font-display); font-size: var(--bf-text-sm); font-weight: 700; color: var(--bf-color-primary-text); transform: translateY(-2px); }
:is(.bf-home, .bf-om) .bf-om-doc__doc > p:first-of-type { font-size: var(--bf-text-xl); line-height: 1.55; color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-doc__doc ul { margin: 0 0 var(--bf-space-4); padding-left: var(--bf-space-5); }
:is(.bf-home, .bf-om) .bf-om-doc__doc ul li { margin: 0 0 var(--bf-space-2); }
:is(.bf-home, .bf-om) .bf-om-doc__doc a { color: var(--bf-color-primary-text); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
:is(.bf-home, .bf-om) .bf-om-doc__doc a:hover { text-decoration-thickness: 2px; }
:is(.bf-home, .bf-om) .bf-om-doc__doc a:focus-visible { outline: 2px solid var(--bf-color-focus-ring); outline-offset: 2px; border-radius: 2px; }

@media print {
  :is(.bf-home, .bf-om) .bf-om-doc__rail { display: none; }
  :is(.bf-home, .bf-om) .bf-om-doc__grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   LEGAL DOCUMENT - numbered-agreement variant (.bf-om-doc, terms_and_conditions.php
   W20 "Indexed document + rail"). Extends the W19 family for a NUMBERED legal
   agreement whose clause numbers are content (cross-referenced as "Section 2
   above"), so they are carried by a semantic <ol> (1-9) / explicit rail numbers,
   NOT the W19 auto-counters. Generic + token-only; reused by any future numbered
   policy page.
   ------------------------------------------------------------------------- */
/* rail contents that show the REAL clause number (suppress the W19 auto-counter) */
:is(.bf-home, .bf-om) .bf-om-doc__toc--manual { counter-reset: none; }
:is(.bf-home, .bf-om) .bf-om-doc__toc--manual li { counter-increment: none; }
:is(.bf-home, .bf-om) .bf-om-doc__toc--manual a::before { content: none; }
:is(.bf-home, .bf-om) .bf-om-doc__toc-num { flex: 0 0 1.4em; font-family: var(--bf-font-display); font-size: var(--bf-text-xs); font-weight: 700; color: var(--bf-color-primary-text); font-variant-numeric: tabular-nums; }

/* the agreement column */
:is(.bf-home, .bf-om) .bf-om-doc__agreement { max-width: 70ch; }
:is(.bf-home, .bf-om) .bf-om-doc__lede { margin: 0 0 var(--bf-space-5); font-family: var(--bf-font-serif); font-weight: 600; font-size: var(--bf-text-2xl); letter-spacing: -0.01em; color: var(--bf-color-text); }

/* numbered clauses - the <ol> ordinals ARE the legal numbering (1-9) */
:is(.bf-home, .bf-om) .bf-om-doc__clauses { list-style: decimal; margin: 0; padding: 0; }
:is(.bf-home, .bf-om) .bf-om-doc__clauses > li { list-style-position: outside; margin: 0 0 var(--bf-space-5) var(--bf-space-6); padding: 0; line-height: 1.7; scroll-margin-top: var(--bf-space-5); }
:is(.bf-home, .bf-om) .bf-om-doc__clauses > li + li { padding-top: var(--bf-space-5); border-top: 1px solid var(--bf-color-border); }
:is(.bf-home, .bf-om) .bf-om-doc__clauses > li::marker { font-family: var(--bf-font-display); font-weight: 700; font-size: var(--bf-text-base); color: var(--bf-color-primary-text); }
:is(.bf-home, .bf-om) .bf-om-doc__clauses > li > b:first-child { font-family: var(--bf-font-serif); font-weight: 600; font-size: var(--bf-text-lg); color: var(--bf-color-text); }

/* a/b/c sub-clauses */
:is(.bf-home, .bf-om) .bf-om-doc__sub { list-style: lower-alpha; margin: var(--bf-space-3) 0 0; padding: 0 0 0 var(--bf-space-5); }
:is(.bf-home, .bf-om) .bf-om-doc__sub > li { margin: 0 0 var(--bf-space-2); line-height: 1.7; }
:is(.bf-home, .bf-om) .bf-om-doc__sub > li::marker { color: var(--bf-color-text-muted); font-weight: 600; }

/* emphasis callout (e.g. the refund line, modernized from <center><b>) */
:is(.bf-home, .bf-om) .bf-om-doc__callout { margin: var(--bf-space-4) 0 0; padding: var(--bf-space-3) var(--bf-space-4); text-align: center; font-weight: 600; color: var(--bf-color-text); background: var(--bf-om-primary-tint); border: 1px solid color-mix(in srgb, var(--bf-brand-primary) 24%, var(--bf-color-border)); border-radius: var(--bf-radius-md); }

/* ===========================================================================
   .bf-om-maint - the standalone site-maintenance screen (W21).
   Chrome-light: site_maintenance.php has NO bf-shell (a maintenance page must not
   depend on the chrome stack), so the .bf-om scope sits on <body>. A centered,
   fully-synthesized "we are down for maintenance" moment: a soft brand-glow canvas,
   a CSS gear emblem (no raster art), the apology + lede, then one card with an
   indeterminate progress bar, a live-status chip, the back-online / current-time
   readout (the current time ticks via a small inline script), an auto-refresh note,
   and a support path. Token-only - every color flows from the four --bf-brand-*
   tokens + color-mix(). All motion is prefers-reduced-motion gated.
   =========================================================================== */
:is(.bf-home, .bf-om) .bf-om-maint { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--bf-space-7) var(--bf-space-4); overflow: hidden; }
:is(.bf-home, .bf-om) .bf-om-maint::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 50% -8%, color-mix(in srgb, var(--bf-brand-primary) 12%, transparent), transparent 70%), radial-gradient(45% 40% at 92% 8%, color-mix(in srgb, var(--bf-brand-accent) 8%, transparent), transparent 60%); }
:is(.bf-home, .bf-om) .bf-om-maint__wrap { position: relative; width: 100%; max-width: 540px; margin: 0 auto; text-align: center; }

/* store branding - the masthead logo (region_small_banner_image), wordmark fallback */
:is(.bf-home, .bf-om) .bf-om-maint__banner { margin: 0 0 var(--bf-space-6); }
:is(.bf-home, .bf-om) .bf-om-maint__banner a { display: inline-block; text-decoration: none; }
:is(.bf-home, .bf-om) .bf-om-maint__logo { display: block; width: auto; height: auto; max-width: 260px; max-height: 80px; margin: 0 auto; }
:is(.bf-home, .bf-om) .bf-om-maint__wordmark { font-family: var(--bf-om-font-display); font-weight: 800; font-size: var(--bf-text-xl); letter-spacing: -0.01em; color: var(--bf-color-text); }

/* synthesized animated emblem (counter-rotating gears in a warning-tinted disc) */
:is(.bf-home, .bf-om) .bf-om-maint__emblem { position: relative; width: 132px; height: 132px; margin: 0 auto var(--bf-space-4); }
:is(.bf-home, .bf-om) .bf-om-maint__disc { position: absolute; inset: 0; border-radius: 999px; background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--bf-color-warning) 22%, var(--bf-color-surface)), color-mix(in srgb, var(--bf-color-warning) 12%, var(--bf-color-surface))); box-shadow: 0 0 0 10px color-mix(in srgb, var(--bf-color-warning) 7%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent); }
:is(.bf-home, .bf-om) .bf-om-maint__gear { position: absolute; transform-origin: 50% 50%; line-height: 1; color: var(--bf-color-warning); }
:is(.bf-home, .bf-om) .bf-om-maint__gear--lg { left: 26px; top: 24px; font-size: 56px; animation: bf-om-maint-spin 11s linear infinite; }
:is(.bf-home, .bf-om) .bf-om-maint__gear--sm { right: 22px; bottom: 22px; font-size: 34px; color: color-mix(in srgb, var(--bf-color-warning) 62%, var(--bf-color-text)); animation: bf-om-maint-spin-rev 8s linear infinite; }

/* heading block */
:is(.bf-home, .bf-om) .bf-om-maint__hero { margin: 0 0 var(--bf-space-5); }
:is(.bf-home, .bf-om) .bf-om-maint__hero .bf-kicker { justify-content: center; }
:is(.bf-home, .bf-om) .bf-om-maint__hero h1 { margin: var(--bf-space-2) 0 0; border: 0; text-transform: none; }
:is(.bf-home, .bf-om) .bf-om-maint__sub { margin: var(--bf-space-3) auto 0; max-width: 40ch; font-size: var(--bf-text-lg); color: var(--bf-color-text); }

/* card */
:is(.bf-home, .bf-om) .bf-om-maint__card-body { padding: var(--bf-space-6); }
:is(.bf-home, .bf-om) .bf-om-maint__reassure { margin: 0 auto var(--bf-space-5); max-width: 46ch; color: var(--bf-color-text-muted); line-height: 1.6; }

/* indeterminate progress bar */
:is(.bf-home, .bf-om) .bf-om-maint__progress { position: relative; height: 8px; margin: 0 0 var(--bf-space-5); border-radius: 999px; overflow: hidden; background: var(--bf-color-surface-alt); border: 1px solid var(--bf-color-border); }
:is(.bf-home, .bf-om) .bf-om-maint__progress-bar { position: absolute; top: 0; bottom: 0; left: 0; width: 38%; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--bf-brand-primary) 70%, var(--bf-brand-accent)), var(--bf-brand-primary)); animation: bf-om-maint-slide 1.7s ease-in-out infinite; }

/* status block (the two real time echoes) */
:is(.bf-home, .bf-om) .bf-om-maint__status { padding-top: var(--bf-space-5); border-top: 1px solid var(--bf-color-border); }
:is(.bf-home, .bf-om) .bf-om-maint__status .bf-om-chip { margin: 0 0 var(--bf-space-4); }
:is(.bf-home, .bf-om) .bf-om-maint__dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 999px; background: var(--bf-brand-primary); animation: bf-om-maint-pulse 1.7s ease-in-out infinite; }
:is(.bf-home, .bf-om) .bf-om-maint__times { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--bf-space-4) var(--bf-space-6); margin: 0; }
:is(.bf-home, .bf-om) .bf-om-maint__times > div { min-width: 9rem; }
:is(.bf-home, .bf-om) .bf-om-maint__times dt { margin: 0; font-size: var(--bf-text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bf-color-text-muted); }
:is(.bf-home, .bf-om) .bf-om-maint__times dd { margin: var(--bf-space-1) 0 0; font-family: var(--bf-om-font-display); font-weight: 700; font-size: var(--bf-text-xl); color: var(--bf-color-text); font-variant-numeric: tabular-nums; }
:is(.bf-home, .bf-om) .bf-om-maint__eta { color: var(--bf-color-primary-text); }
:is(.bf-home, .bf-om) .bf-om-maint__autonote { margin: var(--bf-space-4) 0 0; font-size: var(--bf-text-xs); color: var(--bf-color-text-muted); }
:is(.bf-home, .bf-om) .bf-om-maint__autonote .fa { margin-right: 5px; }

/* support path below a hairline */
:is(.bf-home, .bf-om) .bf-om-maint__foot { margin-top: var(--bf-space-5); padding-top: var(--bf-space-5); border-top: 1px solid var(--bf-color-border); }
:is(.bf-home, .bf-om) .bf-om-maint__help { margin: 0; font-size: var(--bf-text-sm); color: var(--bf-color-text-muted); }
:is(.bf-home, .bf-om) .bf-om-maint__help a { color: var(--bf-color-primary-text); font-weight: 600; }

/* motion (all gated below) */
@keyframes bf-om-maint-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes bf-om-maint-spin-rev { from { transform: rotate(0); } to { transform: rotate(-360deg); } }
@keyframes bf-om-maint-slide { 0% { left: -38%; } 100% { left: 100%; } }
@keyframes bf-om-maint-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.65); } }
@media (prefers-reduced-motion: reduce) {
  :is(.bf-home, .bf-om) .bf-om-maint__gear,
  :is(.bf-home, .bf-om) .bf-om-maint__progress-bar,
  :is(.bf-home, .bf-om) .bf-om-maint__dot { animation: none; }
  :is(.bf-home, .bf-om) .bf-om-maint__progress-bar { left: 0; width: 45%; }
}

/* =============================================================================
   NOT FOUND (W22) - error404.php's unmatched-URL fallthrough, rendered as a real
   branded Open Market 404 (owner picked option 1, "lost & found moment"). The
   routing (error404.php lines 1-470) stays byte-identical; only the fallthrough
   changed from a silent redirect-to-home into this page. A calm brand compass
   medallion + one <h1> + a ranked recovery: two primary buttons (Back to home /
   Browse listings), one focused search card with popular-category chips, and a
   quiet help line. All color/space from tokens; teal is accent/badge/focus only.
   ============================================================================= */
:is(.bf-home, .bf-om) .bf-om-404 { max-width: 620px; margin: 0 auto; }

/* wayfinding hero: calm brand compass medallion, message, primary actions */
:is(.bf-home, .bf-om) .bf-om-404__hero { text-align: center; margin: var(--bf-space-7) 0 var(--bf-space-6); }
:is(.bf-home, .bf-om) .bf-om-404__badge { display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: 999px; margin-bottom: var(--bf-space-4); font-size: 30px;
  background: color-mix(in srgb, var(--bf-brand-primary) 14%, transparent); color: var(--bf-color-primary-text);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--bf-brand-primary) 7%, transparent); }
:is(.bf-home, .bf-om) .bf-om-404__hero .bf-kicker { justify-content: center; }
:is(.bf-home, .bf-om) .bf-om-404__hero h1 { margin: var(--bf-space-2) 0 0; border: 0; }
:is(.bf-home, .bf-om) .bf-om-404__sub { margin: var(--bf-space-3) auto 0; max-width: 46ch; line-height: 1.6; color: var(--bf-color-text-muted); }

/* primary: the two clear escape routes */
:is(.bf-home, .bf-om) .bf-om-404__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--bf-space-3); margin: var(--bf-space-5) 0 0; }
:is(.bf-home, .bf-om) .bf-om-404__actions .bf-btn { min-width: 190px; }

/* secondary: one focused search card */
:is(.bf-home, .bf-om) .bf-om-404__card { margin-top: var(--bf-space-5); }
:is(.bf-home, .bf-om) .bf-om-404__body { padding: var(--bf-space-5); }
:is(.bf-home, .bf-om) .bf-om-404__cardhead { margin: 0 0 var(--bf-space-1); font-family: var(--bf-om-font-display); font-weight: 700; font-size: var(--bf-text-lg); color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-404__cardhint { margin: 0 0 var(--bf-space-4); font-size: var(--bf-text-sm); color: var(--bf-color-text-muted); }
:is(.bf-home, .bf-om) .bf-om-404__body .bf-om-search { margin: 0; box-shadow: none; }
:is(.bf-home, .bf-om) .bf-om-404__sep { margin: var(--bf-space-5) 0; border: 0; border-top: 1px solid var(--bf-color-border); }
:is(.bf-home, .bf-om) .bf-om-404__seclabel { margin: 0 0 var(--bf-space-3); font-size: var(--bf-text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bf-color-text-muted); }

/* popular-category chips (links; the .bf-om-chip scope already beats .bf-scope a) */
:is(.bf-home, .bf-om) .bf-om-404__chips { display: flex; flex-wrap: wrap; gap: var(--bf-space-2); }
:is(.bf-home, .bf-om) a.bf-om-chip { text-decoration: none; }
:is(.bf-home, .bf-om) a.bf-om-chip:hover { color: var(--bf-color-text); border-color: color-mix(in srgb, var(--bf-brand-primary) 40%, var(--bf-color-border)); }

/* tertiary: quiet centered help line */
:is(.bf-home, .bf-om) .bf-om-404__help { margin: var(--bf-space-6) 0 0; text-align: center; font-size: var(--bf-text-sm); color: var(--bf-color-text-muted); }
:is(.bf-home, .bf-om) .bf-om-404__help a { color: var(--bf-color-primary-text); font-weight: 600; }
:is(.bf-home, .bf-om) .bf-om-404__help-sep { margin: 0 var(--bf-space-3); color: var(--bf-color-border-strong); }

@media (prefers-reduced-motion: no-preference) {
  :is(.bf-home, .bf-om) a.bf-om-chip { transition: border-color var(--bf-transition-fast), color var(--bf-transition-fast); }
}
@media (max-width: 480px) {
  :is(.bf-home, .bf-om) .bf-om-404__actions { flex-direction: column; }
  :is(.bf-home, .bf-om) .bf-om-404__actions .bf-btn { width: 100%; }
  :is(.bf-home, .bf-om) .bf-om-404__help-sep { display: block; height: 0; margin: var(--bf-space-1) 0; color: transparent; }
}

/* ===== csr_home: bento command deck (W23) ===== */
/* A balanced two-column deck: an even 2x2 grid of equal tool tiles beside a full-height
   live System-status panel (align-items:stretch keeps both columns the same height), then
   a compact Advanced-tools band. All tools render inline (no Show/Hide toggle). Token-only;
   recolors via the four --bf-brand-* tokens. */
:is(.bf-home, .bf-om) .bf-om-csr-banner {
  display: block;
  width: 100%;
  max-width: 430px;
  height: auto;
}

/* -----------------------------------------------------------------------------
   .bf-csr-banner  -  the reusable "Customer Service Center" support banner link
   (bluefin/csr_banner.php), which replaced the legacy centered cust_support gif.
   It adapts to two contexts: standalone (centered + spaced) and inline in a
   page-head right slot (.bf-om-pagehead or place_ad's .bf-om-wizard__head).
   -------------------------------------------------------------------------- */
:is(.bf-home, .bf-om) .bf-csr-banner {
  display: block;
  width: 100%;
  max-width: 380px;
  margin: var(--bf-space-4) auto var(--bf-space-5);
}

/* inline in a page-head right slot: right-aligns via the head's space-between,
   wraps under the title on narrow screens */
:is(.bf-home, .bf-om) :is(.bf-om-pagehead, .bf-om-wizard__head, .bf-om-rephead) .bf-csr-banner {
  flex: 0 0 auto;
  width: 340px;
  max-width: 100%;
  margin: 0;
  align-self: center;
}

:is(.bf-home, .bf-om) .bf-om-csr-deck {
  display: grid;
  grid-template-columns: 2fr minmax(286px, 1fr);
  gap: var(--bf-space-4);
  align-items: stretch;
}

@media (max-width: 900px) {
  :is(.bf-home, .bf-om) .bf-om-csr-deck { grid-template-columns: 1fr; }
}

:is(.bf-home, .bf-om) .bf-om-csr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--bf-space-4);
}

@media (max-width: 520px) {
  :is(.bf-home, .bf-om) .bf-om-csr-grid { grid-template-columns: 1fr; grid-template-rows: none; }
}

:is(.bf-home, .bf-om) .bf-om-csr-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-3);
  min-height: 158px;
  padding: var(--bf-space-5);
  background: var(--bf-color-surface);
  border: 1px solid var(--bf-color-border-strong);
  border-radius: var(--bf-radius-lg);
  box-shadow: var(--bf-elev-rest-1);
  text-decoration: none;
  color: var(--bf-color-text);
  transition: var(--bf-transition-lift), border-color var(--bf-transition-fast);
}

:is(.bf-home, .bf-om) .bf-om-csr-tile:hover {
  border-color: var(--bf-brand-primary);
  box-shadow: var(--bf-elev-hover-1);
  transform: translateY(var(--bf-lift-1));
  text-decoration: none;
}

:is(.bf-home, .bf-om) .bf-om-csr-tile:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--bf-color-focus-ring);
}

:is(.bf-home, .bf-om) .bf-om-csr-tile__ico {
  width: 52px;
  height: 52px;
  border-radius: var(--bf-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  color: var(--bf-brand-primary-ink);
  background: linear-gradient(140deg, color-mix(in srgb, var(--bf-brand-primary) 92%, #000), var(--bf-brand-secondary));
}

:is(.bf-home, .bf-om) .bf-om-csr-tile__title {
  font-family: var(--bf-font-display);
  font-weight: var(--bf-weight-bold);
  font-size: var(--bf-text-xl);
  line-height: var(--bf-leading-tight);
  color: var(--bf-color-text);
}

:is(.bf-home, .bf-om) .bf-om-csr-tile__desc {
  color: var(--bf-color-text-muted);
  font-size: var(--bf-text-sm);
  margin: 0;
}

:is(.bf-home, .bf-om) .bf-om-csr-tile__go {
  position: absolute;
  top: var(--bf-space-4);
  right: var(--bf-space-4);
  color: var(--bf-color-text-muted);
  transition: color var(--bf-transition-fast), transform var(--bf-transition-base);
}

:is(.bf-home, .bf-om) .bf-om-csr-tile:hover .bf-om-csr-tile__go {
  color: var(--bf-brand-primary);
  transform: translateX(3px);
}

:is(.bf-home, .bf-om) .bf-om-csr-status {
  display: flex;
  flex-direction: column;
  padding: var(--bf-space-5);
  background: var(--bf-color-surface-sunken);
  border: 1px solid var(--bf-color-border-strong);
  border-radius: var(--bf-radius-lg);
}

:is(.bf-home, .bf-om) .bf-om-csr-status__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--bf-space-1);
}

:is(.bf-home, .bf-om) .bf-om-csr-status__title {
  font-size: var(--bf-text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bf-color-text-muted);
}

:is(.bf-home, .bf-om) .bf-om-csr-svc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bf-space-3);
  padding: var(--bf-space-3) 0;
  border-top: 1px solid var(--bf-color-border);
}

:is(.bf-home, .bf-om) .bf-om-csr-svc:first-of-type {
  margin-top: var(--bf-space-2);
}

:is(.bf-home, .bf-om) .bf-om-csr-svc__name {
  display: flex;
  align-items: center;
  gap: var(--bf-space-2);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-medium);
  color: var(--bf-color-text);
}

:is(.bf-home, .bf-om) .bf-om-csr-svc__name .fa {
  color: var(--bf-color-text-muted);
  width: 16px;
  text-align: center;
}

:is(.bf-home, .bf-om) .bf-om-csr-status__foot {
  margin-top: auto;
  padding-top: var(--bf-space-4);
  display: flex;
  align-items: center;
  gap: var(--bf-space-2);
  font-size: var(--bf-text-xs);
  color: var(--bf-color-text-muted);
}

:is(.bf-home, .bf-om) .bf-om-csr-adv {
  margin-top: var(--bf-space-6);
}

:is(.bf-home, .bf-om) .bf-om-csr-seclabel {
  font-size: var(--bf-text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bf-color-text-muted);
  margin: 0 0 var(--bf-space-3);
}

:is(.bf-home, .bf-om) .bf-om-csr-advgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--bf-space-3);
}

:is(.bf-home, .bf-om) .bf-om-csr-mini {
  display: flex;
  align-items: center;
  gap: var(--bf-space-3);
  padding: var(--bf-space-3) var(--bf-space-4);
  background: var(--bf-color-surface);
  border: 1px solid var(--bf-color-border);
  border-radius: var(--bf-radius-md);
  box-shadow: var(--bf-elev-rest-1);
  text-decoration: none;
  color: var(--bf-color-text);
  transition: var(--bf-transition-lift), border-color var(--bf-transition-fast);
}

:is(.bf-home, .bf-om) .bf-om-csr-mini:hover {
  border-color: var(--bf-brand-primary);
  box-shadow: var(--bf-elev-hover-1);
  transform: translateY(var(--bf-lift-1));
  text-decoration: none;
}

:is(.bf-home, .bf-om) .bf-om-csr-mini:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--bf-color-focus-ring);
}

:is(.bf-home, .bf-om) .bf-om-csr-mini__ico {
  width: 34px;
  height: 34px;
  border-radius: var(--bf-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex: 0 0 auto;
  color: var(--bf-color-primary-text);
  background: color-mix(in srgb, var(--bf-brand-primary) 12%, transparent);
}

:is(.bf-home, .bf-om) .bf-om-csr-mini__title {
  font-weight: var(--bf-weight-medium);
  font-size: var(--bf-text-sm);
  color: var(--bf-color-text);
}

@media (prefers-reduced-motion: reduce) {
  /* the csr-tile / csr-mini hover lifts stand down at the token layer (tokens.css) */
  :is(.bf-home, .bf-om) .bf-om-csr-tile__go {
    transition: none;
  }

  :is(.bf-home, .bf-om) .bf-om-csr-tile:hover .bf-om-csr-tile__go {
    transform: none;
  }
}

/* ===========================================================================
   REPORTS - "The Daily Brief" (W24) : a newsroom front-page CSR reports desk.
   Token-only, scoped to :is(.bf-home, .bf-om). The legacy .report_* result
   tables are reskinned in place (markup frozen for the CSV/Email/FTP export
   contract); the launchpad is recomposed into this .bf-om-brief family.
   =========================================================================== */
:is(.bf-home, .bf-om) .bf-om-brief {
  --brief-medal: linear-gradient(140deg, color-mix(in srgb, var(--bf-brand-primary) 90%, #000), var(--bf-om-accent));
  --brief-glow:
    radial-gradient(820px 380px at 8% -20%, color-mix(in srgb, var(--bf-brand-primary) 16%, transparent), transparent 60%),
    radial-gradient(680px 360px at 96% -10%, color-mix(in srgb, var(--bf-brand-accent) 12%, transparent), transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--bf-brand-primary) 8%, var(--bf-color-surface)) 0%, var(--bf-color-surface) 80%);
  --brief-rule: color-mix(in srgb, var(--bf-color-text) 86%, transparent);
  --brief-halftone: radial-gradient(color-mix(in srgb, var(--bf-color-text) 7%, transparent) 1px, transparent 1.6px);
}
:is(.bf-home, .bf-om) .bf-om-brief a { text-decoration: none; }

/* ---- masthead ---- */
:is(.bf-home, .bf-om) .bf-om-brief__masthead {
  position: relative; overflow: hidden; margin-top: var(--bf-space-5);
  padding: var(--bf-space-6) var(--bf-space-6) var(--bf-space-5); border-radius: var(--bf-radius-xl);
  border: 1px solid var(--bf-color-border); background: var(--brief-glow); box-shadow: var(--bf-shadow-sm);
}
:is(.bf-home, .bf-om) .bf-om-brief__masthead::before {
  content: ""; position: absolute; inset: 0; background-image: var(--brief-halftone); background-size: 15px 15px;
  opacity: 0.5; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%);
  mask-image: linear-gradient(180deg, #000, transparent 70%);
}
:is(.bf-home, .bf-om) .bf-om-brief__masthead > * { position: relative; }
:is(.bf-home, .bf-om) .bf-om-brief__dateline {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--bf-space-2);
  font-size: var(--bf-text-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--bf-color-text-muted);
  padding-bottom: var(--bf-space-3); border-bottom: 1px solid color-mix(in srgb, var(--bf-color-text) 14%, transparent);
}
:is(.bf-home, .bf-om) .bf-om-brief__home { color: var(--bf-color-primary-text); }
:is(.bf-home, .bf-om) .bf-om-brief__dateline .sep { color: color-mix(in srgb, var(--bf-color-text) 30%, transparent); margin: 0 var(--bf-space-1); }
:is(.bf-home, .bf-om) .bf-om-brief__nameplate {
  font-family: var(--bf-om-font-display); font-weight: 800; letter-spacing: -0.03em;
  font-size: clamp(2.4rem, 5.5vw, 3.4rem); line-height: 0.95; margin: var(--bf-space-4) 0 0; color: var(--bf-color-text); border: 0;
}
:is(.bf-home, .bf-om) .bf-om-brief__standfirst { margin: var(--bf-space-3) 0 0; max-width: 56ch; color: var(--bf-color-text-muted); font-size: var(--bf-text-md); }

/* ---- by the numbers ---- */
:is(.bf-home, .bf-om) .bf-om-brief__ticker {
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; gap: var(--bf-space-5);
  margin: var(--bf-space-6) 0 var(--bf-space-8);
}
:is(.bf-home, .bf-om) .bf-om-brief__stat {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--bf-space-1);
  padding: var(--bf-space-4); background: var(--bf-color-surface); border: 1px solid var(--bf-color-border-strong);
  border-radius: var(--bf-radius-lg); box-shadow: var(--bf-shadow-sm);
}
:is(.bf-home, .bf-om) .bf-om-brief__stat-top { display: flex; align-items: center; gap: var(--bf-space-2); }
:is(.bf-home, .bf-om) .bf-om-brief__medal {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: var(--bf-radius-sm); display: flex; align-items: center;
  justify-content: center; font-size: 14px; color: var(--bf-brand-primary-ink); background: var(--brief-medal);
}
:is(.bf-home, .bf-om) .bf-om-brief__k { font-size: var(--bf-text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--bf-color-text-muted); }
:is(.bf-home, .bf-om) .bf-om-brief__v { font-family: var(--bf-om-font-display); font-weight: 800; font-size: var(--bf-text-3xl); line-height: 1.02; color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-brief__trend { display: inline-flex; align-items: center; gap: 5px; font-size: var(--bf-text-xs); font-weight: var(--bf-weight-medium); }
:is(.bf-home, .bf-om) .bf-om-brief__trend.up { color: color-mix(in srgb, var(--bf-color-success) 72%, var(--bf-color-text)); }
:is(.bf-home, .bf-om) .bf-om-brief__trend.down { color: color-mix(in srgb, var(--bf-color-danger) 72%, var(--bf-color-text)); }
:is(.bf-home, .bf-om) .bf-om-brief__trend.warn { color: color-mix(in srgb, var(--bf-color-warning) 64%, var(--bf-color-text)); }
:is(.bf-home, .bf-om) .bf-om-brief__trend.muted { color: var(--bf-color-text-muted); }
:is(.bf-home, .bf-om) .bf-om-brief__stat--feature { background: linear-gradient(160deg, var(--bf-om-primary-tint), var(--bf-color-surface) 70%); }
:is(.bf-home, .bf-om) .bf-om-brief__stat--feature::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--brief-medal); }
:is(.bf-home, .bf-om) .bf-om-brief__stat--feature .bf-om-brief__v { font-size: var(--bf-text-4xl); }
:is(.bf-home, .bf-om) .bf-om-brief__livedot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--bf-color-success);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--bf-color-success) 60%, transparent); animation: bf-om-brief-pulse 2.4s ease-out infinite;
}

/* ---- the desk ---- */
:is(.bf-home, .bf-om) .bf-om-brief__desk { display: grid; grid-template-columns: 1fr minmax(290px, 350px); gap: var(--bf-space-6); }
:is(.bf-home, .bf-om) .bf-om-brief__sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--bf-space-3); margin: 0 0 var(--bf-space-4); }
:is(.bf-home, .bf-om) .bf-om-brief__sechead h2 { font-family: var(--bf-om-font-display); font-weight: 700; font-size: var(--bf-text-2xl); margin: 2px 0 0; color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-brief__seeall { font-weight: var(--bf-weight-medium); font-size: var(--bf-text-sm); color: var(--bf-color-primary-text); }
:is(.bf-home, .bf-om) .bf-om-brief__seeall:hover { color: var(--bf-color-text); }

/* lead story = actionable queue */
:is(.bf-home, .bf-om) .bf-om-brief__lead {
  position: relative; overflow: hidden; border: 1px solid var(--bf-color-border-strong); border-radius: var(--bf-radius-xl);
  background: var(--bf-color-surface); box-shadow: var(--bf-shadow-md); margin-bottom: var(--bf-space-4);
}
:is(.bf-home, .bf-om) .bf-om-brief__lead::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--bf-color-warning), color-mix(in srgb, var(--bf-color-warning) 50%, var(--bf-brand-accent)));
}
:is(.bf-home, .bf-om) .bf-om-brief__lead-head { display: flex; align-items: center; gap: var(--bf-space-3); padding: var(--bf-space-4) var(--bf-space-5); border-bottom: 1px solid var(--bf-color-border); }
:is(.bf-home, .bf-om) .bf-om-brief__lead-medal { width: 42px; height: 42px; flex: 0 0 auto; border-radius: var(--bf-radius-md); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--bf-brand-primary-ink); background: var(--brief-medal); }
:is(.bf-home, .bf-om) .bf-om-brief__kicker { font-size: var(--bf-text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--bf-color-text-muted); }
:is(.bf-home, .bf-om) .bf-om-brief__lead-title { font-family: var(--bf-om-font-display); font-weight: 700; font-size: var(--bf-text-lg); color: var(--bf-color-text); margin: 2px 0 0; }
:is(.bf-home, .bf-om) .bf-om-brief__count { margin-left: auto; }
:is(.bf-home, .bf-om) .bf-om-brief__row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--bf-space-3); padding: var(--bf-space-3) var(--bf-space-5); border-bottom: 1px solid var(--bf-color-border); transition: background var(--bf-transition-fast); }
:is(.bf-home, .bf-om) .bf-om-brief__row:hover { background: color-mix(in srgb, var(--bf-brand-primary) 4%, transparent); }
:is(.bf-home, .bf-om) .bf-om-brief__ref { font-family: var(--bf-om-font-display); font-weight: 700; font-size: var(--bf-text-md); color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-brief__who { font-size: var(--bf-text-sm); color: var(--bf-color-text); min-width: 0; }
:is(.bf-home, .bf-om) .bf-om-brief__who small { display: block; color: var(--bf-color-text-muted); margin-top: 1px; }
:is(.bf-home, .bf-om) .bf-om-brief__lead-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--bf-space-3); padding: var(--bf-space-3) var(--bf-space-5); background: var(--bf-color-surface-sunken); }
:is(.bf-home, .bf-om) .bf-om-brief__lead-foot .more { color: var(--bf-color-text-muted); font-size: var(--bf-text-sm); }
:is(.bf-home, .bf-om) .bf-om-brief__empty-lead { padding: var(--bf-space-4) var(--bf-space-5); color: var(--bf-color-text-muted); font-size: var(--bf-text-sm); }

:is(.bf-home, .bf-om) .bf-om-brief__leadgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bf-space-4); }
:is(.bf-home, .bf-om) .bf-om-brief__mini {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--bf-space-2); padding: var(--bf-space-5);
  border: 1px solid var(--bf-color-border-strong); border-radius: var(--bf-radius-xl); background: var(--bf-color-surface); box-shadow: var(--bf-elev-rest-1);
  transition: var(--bf-transition-lift), border-color var(--bf-transition-fast);
}
:is(.bf-home, .bf-om) .bf-om-brief__mini:hover { border-color: var(--bf-brand-primary); box-shadow: var(--bf-elev-hover-1); transform: translateY(var(--bf-lift-1)); }
:is(.bf-home, .bf-om) .bf-om-brief__mini-top { display: flex; align-items: center; gap: var(--bf-space-2); }
:is(.bf-home, .bf-om) .bf-om-brief__mini-medal { width: 34px; height: 34px; flex: 0 0 auto; border-radius: var(--bf-radius-md); display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--bf-color-primary-text); background: color-mix(in srgb, var(--bf-brand-primary) 12%, transparent); }
:is(.bf-home, .bf-om) .bf-om-brief__n { font-family: var(--bf-om-font-display); font-weight: 800; font-size: var(--bf-text-4xl); line-height: 1; color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-brief__cap { color: var(--bf-color-text-muted); font-size: var(--bf-text-sm); }
:is(.bf-home, .bf-om) .bf-om-brief__mini-foot { margin-top: auto; padding-top: var(--bf-space-1); }

/* sidebar */
:is(.bf-home, .bf-om) .bf-om-brief__aside { display: flex; flex-direction: column; gap: var(--bf-space-4); }
:is(.bf-home, .bf-om) .bf-om-brief__panel { border: 1px solid var(--bf-color-border-strong); border-radius: var(--bf-radius-xl); background: var(--bf-color-surface); padding: var(--bf-space-5); box-shadow: var(--bf-shadow-sm); }
:is(.bf-home, .bf-om) .bf-om-brief__panel-label { display: flex; align-items: center; gap: var(--bf-space-2); font-size: var(--bf-text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--bf-color-text-muted); margin: 0 0 var(--bf-space-3); }
:is(.bf-home, .bf-om) .bf-om-brief__panel--live { background: linear-gradient(165deg, var(--bf-om-primary-tint), var(--bf-color-surface) 72%); }
:is(.bf-home, .bf-om) .bf-om-brief__live { display: flex; align-items: baseline; gap: var(--bf-space-3); }
:is(.bf-home, .bf-om) .bf-om-brief__live-n { font-family: var(--bf-om-font-display); font-weight: 800; font-size: 3.2rem; line-height: 0.9; color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-brief__live-cap { font-size: var(--bf-text-sm); color: var(--bf-color-text-muted); }
:is(.bf-home, .bf-om) .bf-om-brief__findrow { display: flex; gap: var(--bf-space-2); margin-bottom: var(--bf-space-2); }
:is(.bf-home, .bf-om) .bf-om-brief__findrow .bf-field { margin: 0; flex: 1 1 auto; }
:is(.bf-home, .bf-om) .bf-om-brief__findlinks { display: flex; flex-direction: column; gap: var(--bf-space-1); margin-top: var(--bf-space-2); }

/* find (focused entry view) */
:is(.bf-home, .bf-om) .bf-om-brief__findwrap { max-width: 760px; margin: var(--bf-space-5) 0 0; }
:is(.bf-home, .bf-om) .bf-om-brief__findgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bf-space-3) var(--bf-space-4); }

/* ---- section index (calm + searchable) ---- */
:is(.bf-home, .bf-om) .bf-om-brief__index { margin-top: var(--bf-space-8); padding-top: var(--bf-space-6); border-top: 3px double var(--brief-rule); }
:is(.bf-home, .bf-om) .bf-om-brief__search { position: relative; flex: 0 1 320px; min-width: 220px; }
:is(.bf-home, .bf-om) .bf-om-brief__search .fa { position: absolute; left: var(--bf-space-3); top: 50%; transform: translateY(-50%); color: var(--bf-color-text-muted); font-size: 13px; pointer-events: none; }
:is(.bf-home, .bf-om) .bf-om-brief__search input { width: 100%; padding: var(--bf-space-2) var(--bf-space-3) var(--bf-space-2) calc(var(--bf-space-3) + 20px); border: 1px solid var(--bf-color-border-strong); border-radius: var(--bf-radius-pill); background: var(--bf-color-surface); font-family: var(--bf-om-font-body); font-size: var(--bf-text-sm); color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-brief__search input::placeholder { color: var(--bf-color-text-muted); }
:is(.bf-home, .bf-om) .bf-om-brief__search input:focus { outline: none; border-color: var(--bf-brand-primary); box-shadow: 0 0 0 3px var(--bf-color-focus-ring); }
:is(.bf-home, .bf-om) .bf-om-brief__indexcols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bf-space-4) var(--bf-space-6); margin-top: var(--bf-space-5); }
:is(.bf-home, .bf-om) .bf-om-brief__indexcol h3 { display: flex; align-items: baseline; justify-content: space-between; gap: var(--bf-space-2); font-size: var(--bf-text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bf-color-text-muted); font-weight: var(--bf-weight-medium); margin: 0 0 var(--bf-space-2); padding-bottom: var(--bf-space-2); border-bottom: 1px solid var(--bf-color-border); }
:is(.bf-home, .bf-om) .bf-om-brief__indexcol h3 .c { font-weight: 400; }
:is(.bf-home, .bf-om) .bf-om-brief__indexcol ul { list-style: none; margin: 0; padding: 0; }
:is(.bf-home, .bf-om) .bf-om-brief__indexcol a { display: block; padding: 7px var(--bf-space-2); margin: 0 calc(-1 * var(--bf-space-2)); border-radius: var(--bf-radius-sm); color: var(--bf-color-text); font-size: var(--bf-text-sm); transition: background var(--bf-transition-fast), color var(--bf-transition-fast); }
:is(.bf-home, .bf-om) .bf-om-brief__indexcol a:hover { background: color-mix(in srgb, var(--bf-brand-primary) 7%, transparent); color: var(--bf-color-primary-text); }
:is(.bf-home, .bf-om) .bf-om-brief__indexcol mark { background: color-mix(in srgb, var(--bf-brand-accent) 28%, transparent); color: inherit; border-radius: 2px; }
:is(.bf-home, .bf-om) .bf-om-brief__indexcol.is-hidden, :is(.bf-home, .bf-om) .bf-om-brief__indexcol li.is-hidden { display: none; }
:is(.bf-home, .bf-om) .bf-om-brief__index-empty { display: none; padding: var(--bf-space-4) 0; color: var(--bf-color-text-muted); font-size: var(--bf-text-sm); }

/* ---- legacy result-table reskin (markup frozen; CSV markers + <tr>/<td> intact) ---- */
/* The schedule reports (11, 11a, 11z, 12) still render the legacy table. Report 12
   (Deadlines) is 15 columns and overran the right edge of the page; this scroll box
   keeps a wide legacy table inside its own bounds (same affordance as the grid
   surface's .bf-om-grid__scroll) instead of pushing the whole page sideways. */
:is(.bf-home, .bf-om) .bf-om-legacy-scroll {
  overflow-x: auto; background: var(--bf-color-surface);
  border: 1px solid var(--bf-color-border); border-radius: var(--bf-radius-lg);
}
:is(.bf-home, .bf-om) table.report { width: 100%; border-collapse: collapse; font-size: var(--bf-text-sm); }
:is(.bf-home, .bf-om) .report_heading, :is(.bf-home, .bf-om) th.report-title {
  text-align: left; vertical-align: bottom; background: var(--bf-color-surface-sunken); color: var(--bf-color-text);
  font-weight: var(--bf-weight-bold); font-size: var(--bf-text-xs); letter-spacing: 0.04em; text-transform: uppercase;
  padding: var(--bf-space-3) var(--bf-space-4); border-bottom: 2px solid var(--bf-color-border-strong);
}
:is(.bf-home, .bf-om) .report_data {
  padding: var(--bf-space-3) var(--bf-space-4); border-bottom: 1px solid var(--bf-color-border);
  color: var(--bf-color-text); vertical-align: middle;
}
:is(.bf-home, .bf-om) .report_schedule { padding: var(--bf-space-2) var(--bf-space-4); border-bottom: 1px solid var(--bf-color-border); color: var(--bf-color-text-muted); }
:is(.bf-home, .bf-om) tr:hover .report_data { background: color-mix(in srgb, var(--bf-brand-primary) 5%, transparent); }

@keyframes bf-om-brief-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bf-color-success) 55%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@media (max-width: 1040px) {
  :is(.bf-home, .bf-om) .bf-om-brief__ticker { grid-template-columns: 1fr 1fr 1fr; }
  :is(.bf-home, .bf-om) .bf-om-brief__stat--feature { grid-column: span 3; }
}
@media (max-width: 920px) {
  :is(.bf-home, .bf-om) .bf-om-brief__desk { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  :is(.bf-home, .bf-om) .bf-om-brief__indexcols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  :is(.bf-home, .bf-om) .bf-om-brief__leadgrid { grid-template-columns: 1fr; }
  :is(.bf-home, .bf-om) .bf-om-brief__findgrid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  :is(.bf-home, .bf-om) .bf-om-brief__ticker { grid-template-columns: 1fr 1fr; }
  :is(.bf-home, .bf-om) .bf-om-brief__stat--feature { grid-column: span 2; }
}
@media (max-width: 460px) {
  :is(.bf-home, .bf-om) .bf-om-brief__indexcols { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.bf-home, .bf-om) .bf-om-brief__livedot { animation: none; }
  /* the .bf-om-brief__mini hover lift stands down at the token layer (tokens.css) */
  :is(.bf-home, .bf-om) .bf-om-brief__row, :is(.bf-home, .bf-om) .bf-om-brief__indexcol a { transition: none; }
}

/* ============================================================================
   BANNER ADMIN - "Campaign board" (W25) : the CSR banner manager as a deck of
   creative cards. Token-only, scoped to :is(.bf-home, .bf-om). Each banner is a
   visual card led by its creative; a KPI strip + pill rail (the search-link/active
   group switcher, JS toggle contract unchanged) sit above the board. The Bootstrap
   #banner_edit modal is untouched (its inner controls are already bf-).
   ============================================================================ */
:is(.bf-home, .bf-om) .bf-om-banners__top {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--bf-space-4); flex-wrap: wrap; margin: var(--bf-space-4) 0 var(--bf-space-5);
}
:is(.bf-home, .bf-om) .bf-om-banners__top .bf-om-pagehead { margin: 0; }
:is(.bf-home, .bf-om) .bf-om-banners__topaction { flex: 0 0 auto; }

/* KPI strip - derived, in-page (no new data source) */
:is(.bf-home, .bf-om) .bf-om-banners__kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bf-space-3);
  margin-bottom: var(--bf-space-5);
}
:is(.bf-home, .bf-om) .bf-om-banners__kpi {
  padding: var(--bf-space-4); background: var(--bf-color-surface);
  border: 1px solid var(--bf-color-border); border-radius: var(--bf-radius-lg);
  box-shadow: var(--bf-shadow-sm);
}
:is(.bf-home, .bf-om) .bf-om-banners__kpi--feature {
  background: var(--bf-brand-secondary); border-color: transparent;
}
:is(.bf-home, .bf-om) .bf-om-banners__kpi-k {
  font-size: var(--bf-text-xs); letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--bf-color-text-muted); margin: 0;
}
:is(.bf-home, .bf-om) .bf-om-banners__kpi--feature .bf-om-banners__kpi-k {
  color: color-mix(in srgb, var(--bf-brand-primary-ink) 78%, transparent);
}
:is(.bf-home, .bf-om) .bf-om-banners__kpi-v {
  font-family: var(--bf-font-display); font-weight: 700; font-size: var(--bf-text-3xl);
  line-height: 1; color: var(--bf-color-text); margin: var(--bf-space-2) 0 0;
}
:is(.bf-home, .bf-om) .bf-om-banners__kpi--feature .bf-om-banners__kpi-v { color: var(--bf-brand-primary-ink); }
:is(.bf-home, .bf-om) .bf-om-banners__kpi-foot {
  font-size: var(--bf-text-xs); color: var(--bf-color-text-muted); margin: var(--bf-space-1) 0 0;
}
:is(.bf-home, .bf-om) .bf-om-banners__kpi--feature .bf-om-banners__kpi-foot {
  color: color-mix(in srgb, var(--bf-brand-primary-ink) 70%, transparent);
}

/* group switcher = pill rail (keeps search-link/active toggle classes) */
:is(.bf-home, .bf-om) .bf-om-banners__grouplabel {
  font-size: var(--bf-text-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bf-color-text-muted); margin: 0 0 var(--bf-space-3);
}
:is(.bf-home, .bf-om) .bf-om-banners__rail {
  display: flex; flex-wrap: wrap; gap: var(--bf-space-2);
  list-style: none; margin: 0 0 var(--bf-space-4); padding: 0;
}
:is(.bf-home, .bf-om) .bf-om-banners__pill {
  display: inline-flex; border-radius: var(--bf-radius-pill);
  border: 1px solid var(--bf-color-border-strong); background: var(--bf-color-surface);
  transition: border-color var(--bf-transition-fast), background var(--bf-transition-fast);
}
:is(.bf-home, .bf-om) .bf-om-banners__pill:hover { border-color: var(--bf-brand-primary); }
:is(.bf-home, .bf-om) .bf-om-banners__pill.active {
  background: var(--bf-brand-secondary); border-color: transparent;
}
:is(.bf-home, .bf-om) .bf-om-banners__pillbtn {
  display: inline-flex; align-items: center; gap: var(--bf-space-2);
  padding: var(--bf-space-2) var(--bf-space-4); border: 0; border-radius: var(--bf-radius-pill);
  background: transparent; color: var(--bf-color-text); font-family: var(--bf-font-body);
  font-weight: 600; font-size: var(--bf-text-sm); cursor: pointer;
}
:is(.bf-home, .bf-om) .bf-om-banners__pill.active .bf-om-banners__pillbtn { color: var(--bf-brand-primary-ink); }
:is(.bf-home, .bf-om) .bf-om-banners__pillbtn:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--bf-color-focus-ring);
}
:is(.bf-home, .bf-om) .bf-om-banners__pilln {
  font-size: var(--bf-text-xs); padding: 1px 7px; border-radius: var(--bf-radius-pill);
  background: color-mix(in srgb, var(--bf-brand-primary) 14%, transparent); color: var(--bf-color-primary-text);
}
:is(.bf-home, .bf-om) .bf-om-banners__pill.active .bf-om-banners__pilln {
  background: color-mix(in srgb, var(--bf-brand-primary-ink) 22%, transparent); color: var(--bf-brand-primary-ink);
}

/* the campaign board */
:is(.bf-home, .bf-om) .bf-om-banners__board {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--bf-space-4);
}
:is(.bf-home, .bf-om) .bf-om-banners__card {
  display: flex; flex-direction: column; background: var(--bf-color-surface);
  border: 1px solid var(--bf-color-border); border-radius: var(--bf-radius-lg);
  box-shadow: var(--bf-elev-rest-1); overflow: hidden;
  transition: var(--bf-transition-lift), border-color var(--bf-transition-fast);
}
:is(.bf-home, .bf-om) .bf-om-banners__card:hover {
  border-color: var(--bf-brand-primary); box-shadow: var(--bf-elev-hover-1); transform: translateY(var(--bf-lift-1));
}
/* creative preview - a solid sunken surface behind the artwork (no text over it) */
:is(.bf-home, .bf-om) .bf-om-banners__creative {
  display: flex; align-items: center; justify-content: center; min-height: 96px; padding: var(--bf-space-3);
  background:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--bf-brand-secondary) 5%, transparent) 0 10px, transparent 10px 20px),
    var(--bf-color-surface-sunken);
  border-bottom: 1px solid var(--bf-color-border);
}
:is(.bf-home, .bf-om) .bf-om-banners__creative .bf-banner__img {
  display: block; max-width: 100%; height: auto; margin: 0;
}
:is(.bf-home, .bf-om) .bf-om-banners__cardbody {
  display: flex; flex-direction: column; gap: var(--bf-space-3); padding: var(--bf-space-4);
}
:is(.bf-home, .bf-om) .bf-om-banners__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--bf-space-3);
}
:is(.bf-home, .bf-om) .bf-om-banners__title {
  font-family: var(--bf-font-display); font-weight: 700; font-size: var(--bf-text-lg);
  line-height: var(--bf-leading-tight); color: var(--bf-color-text); margin: 0; border: 0;
}
:is(.bf-home, .bf-om) .bf-om-banners__link {
  margin: 0; font-size: var(--bf-text-xs); word-break: break-all;
}
:is(.bf-home, .bf-om) .bf-om-banners__link a { color: var(--bf-color-primary-text); }
:is(.bf-home, .bf-om) .bf-om-banners__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bf-space-2);
  padding: var(--bf-space-3) 0; border-top: 1px solid var(--bf-color-border);
  border-bottom: 1px solid var(--bf-color-border);
}
:is(.bf-home, .bf-om) .bf-om-banners__stat-k {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bf-color-text-muted); margin: 0;
}
:is(.bf-home, .bf-om) .bf-om-banners__stat-v {
  font-family: var(--bf-font-display); font-weight: 700; font-size: var(--bf-text-lg);
  color: var(--bf-color-text); margin: 2px 0 0;
}
:is(.bf-home, .bf-om) .bf-om-banners__sched {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--bf-space-1) var(--bf-space-2);
  margin: 0; font-size: var(--bf-text-xs); color: var(--bf-color-text-muted);
}
:is(.bf-home, .bf-om) .bf-om-banners__sched .fa { color: var(--bf-color-text-muted); }
:is(.bf-home, .bf-om) .bf-om-banners__sched b { color: var(--bf-color-text); font-weight: 600; }

@media (max-width: 720px) {
  :is(.bf-home, .bf-om) .bf-om-banners__kpis { grid-template-columns: repeat(2, 1fr); }
}
/* ============================================================================
   WIDGET ADMIN - "Widget gallery" (W26) : the CSR embeddable-listing-widget
   manager as a board of config spec cards, the direct sibling of the W25 banner
   Campaign board. Token-only, scoped to :is(.bf-home, .bf-om). Each widget is a
   spec card (host, status chip, a Category/Listings/Format grid, a 7-dot weekly
   schedule); a KPI strip (derived in-page, no new data source) sits above the
   board, and the selected card carries the live preview + actions. The two
   Bootstrap modals (#widget_edit / #widget_delete) are untouched.
   ============================================================================ */
:is(.bf-home, .bf-om) .bf-om-widgets__top {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--bf-space-4); flex-wrap: wrap; margin: var(--bf-space-4) 0 var(--bf-space-5);
}
:is(.bf-home, .bf-om) .bf-om-widgets__top .bf-om-pagehead { margin: 0; }
:is(.bf-home, .bf-om) .bf-om-widgets__topaction { flex: 0 0 auto; }

/* KPI strip - derived, in-page (no new data source) */
:is(.bf-home, .bf-om) .bf-om-widgets__kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bf-space-3);
  margin-bottom: var(--bf-space-5);
}
:is(.bf-home, .bf-om) .bf-om-widgets__kpi {
  padding: var(--bf-space-4); background: var(--bf-color-surface);
  border: 1px solid var(--bf-color-border); border-radius: var(--bf-radius-lg);
  box-shadow: var(--bf-shadow-sm);
}
:is(.bf-home, .bf-om) .bf-om-widgets__kpi--feature {
  background: var(--bf-brand-secondary); border-color: transparent;
}
:is(.bf-home, .bf-om) .bf-om-widgets__kpi-k {
  font-size: var(--bf-text-xs); letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--bf-color-text-muted); margin: 0;
}
:is(.bf-home, .bf-om) .bf-om-widgets__kpi--feature .bf-om-widgets__kpi-k {
  color: color-mix(in srgb, var(--bf-brand-primary-ink) 78%, transparent);
}
:is(.bf-home, .bf-om) .bf-om-widgets__kpi-v {
  font-family: var(--bf-font-display); font-weight: 700; font-size: var(--bf-text-3xl);
  line-height: 1; color: var(--bf-color-text); margin: var(--bf-space-2) 0 0;
}
:is(.bf-home, .bf-om) .bf-om-widgets__kpi--feature .bf-om-widgets__kpi-v { color: var(--bf-brand-primary-ink); }
:is(.bf-home, .bf-om) .bf-om-widgets__kpi-foot {
  font-size: var(--bf-text-xs); color: var(--bf-color-text-muted); margin: var(--bf-space-1) 0 0;
}
:is(.bf-home, .bf-om) .bf-om-widgets__kpi--feature .bf-om-widgets__kpi-foot {
  color: color-mix(in srgb, var(--bf-brand-primary-ink) 70%, transparent);
}

/* the widget gallery board */
:is(.bf-home, .bf-om) .bf-om-widgets__board {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--bf-space-4);
}
:is(.bf-home, .bf-om) .bf-om-widgets__card {
  display: flex; flex-direction: column; background: var(--bf-color-surface);
  border: 1px solid var(--bf-color-border); border-radius: var(--bf-radius-lg);
  box-shadow: var(--bf-elev-rest-1); overflow: hidden; cursor: pointer;
  transition: var(--bf-transition-lift), border-color var(--bf-transition-fast);
}
:is(.bf-home, .bf-om) .bf-om-widgets__card:hover {
  border-color: var(--bf-brand-primary); box-shadow: var(--bf-elev-hover-1); transform: translateY(var(--bf-lift-1));
}
:is(.bf-home, .bf-om) .bf-om-widgets__card:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--bf-color-focus-ring);
}
:is(.bf-home, .bf-om) .bf-om-widgets__card.is-inactive { opacity: 0.86; }
:is(.bf-home, .bf-om) .bf-om-widgets__card.is-selected {
  border-color: var(--bf-brand-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bf-brand-primary) 40%, transparent), var(--bf-shadow-md);
}
:is(.bf-home, .bf-om) .bf-om-widgets__cardbody {
  display: flex; flex-direction: column; gap: var(--bf-space-3); padding: var(--bf-space-4);
}
:is(.bf-home, .bf-om) .bf-om-widgets__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--bf-space-3);
}
:is(.bf-home, .bf-om) .bf-om-widgets__host {
  display: block; margin: 0 0 var(--bf-space-1); font-size: var(--bf-text-xs);
  color: var(--bf-color-text-muted); word-break: break-all;
}
:is(.bf-home, .bf-om) .bf-om-widgets__title {
  font-family: var(--bf-font-display); font-weight: 700; font-size: var(--bf-text-lg);
  line-height: var(--bf-leading-tight); color: var(--bf-color-text); margin: 0; border: 0;
}
:is(.bf-home, .bf-om) .bf-om-widgets__logo {
  display: block; max-width: 100%; height: auto; margin: var(--bf-space-1) 0 0;
}

/* config spec grid */
:is(.bf-home, .bf-om) .bf-om-widgets__spec {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bf-space-2);
  padding: var(--bf-space-3) 0; border-top: 1px solid var(--bf-color-border);
  border-bottom: 1px solid var(--bf-color-border);
}
:is(.bf-home, .bf-om) .bf-om-widgets__spec-k {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bf-color-text-muted); margin: 0;
}
:is(.bf-home, .bf-om) .bf-om-widgets__spec-v {
  font-family: var(--bf-font-display); font-weight: 700; font-size: var(--bf-text-base);
  color: var(--bf-color-text); margin: 2px 0 0;
}

/* weekly schedule dots */
:is(.bf-home, .bf-om) .bf-om-widgets__week {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--bf-space-1);
  margin: 0; font-size: var(--bf-text-xs); color: var(--bf-color-text-muted);
}
:is(.bf-home, .bf-om) .bf-om-widgets__week-label { margin-right: var(--bf-space-1); }
:is(.bf-home, .bf-om) .bf-om-widgets__dot {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 50%; border: 1px solid var(--bf-color-border-strong);
  font-size: 10px; font-weight: 700; color: var(--bf-color-text-muted); background: var(--bf-color-surface);
}
:is(.bf-home, .bf-om) .bf-om-widgets__dot.is-on {
  background: color-mix(in srgb, var(--bf-brand-primary) 16%, transparent);
  border-color: color-mix(in srgb, var(--bf-brand-primary) 40%, transparent);
  color: var(--bf-color-primary-text);
}

/* live-preview featured panel (shown for the selected widget) */
:is(.bf-home, .bf-om) .bf-om-widgets__preview {
  margin: var(--bf-space-1) 0 0; padding: var(--bf-space-4);
  background: var(--bf-color-surface-sunken); border: 1px dashed var(--bf-color-border-strong);
  border-radius: var(--bf-radius-md);
}
:is(.bf-home, .bf-om) .bf-om-widgets__preview-k {
  font-size: var(--bf-text-xs); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bf-color-text-muted); margin: 0 0 var(--bf-space-2); text-align: center;
}
:is(.bf-home, .bf-om) .bf-om-widgets__preview #bf-widget-container {
  display: block; min-height: 60px; text-align: center;
}

@media (max-width: 720px) {
  :is(.bf-home, .bf-om) .bf-om-widgets__kpis { grid-template-columns: repeat(2, 1fr); }
}
/* ==========================================================================
   W27 datafeeds.php - Feed operations console (.bf-om-datafeeds)
   A two-pane console: system-status bar + a feed rail (list view) and focused
   drill-in cards (edit / log / console views). Token-only; teal is accent only.
   ========================================================================== */

/* page head row */
:is(.bf-home, .bf-om) .bf-om-datafeeds__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--bf-space-4); flex-wrap: wrap; margin: var(--bf-space-4) 0 var(--bf-space-5);
}

/* system status bar (DataPuller) */
:is(.bf-home, .bf-om) .bf-om-datafeeds__sysbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--bf-space-4);
  flex-wrap: wrap; padding: var(--bf-space-4); margin-bottom: var(--bf-space-4);
  background: var(--bf-color-surface); border: 1px solid var(--bf-color-border);
  border-left: 4px solid var(--bf-color-success); border-radius: var(--bf-radius-lg); box-shadow: var(--bf-shadow-sm);
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__sysbar.is-stopped { border-left-color: var(--bf-color-danger); }
:is(.bf-home, .bf-om) .bf-om-datafeeds__sys-main {
  display: flex; align-items: center; gap: var(--bf-space-4); flex-wrap: wrap;
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__sys-label {
  font-size: var(--bf-text-xs); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bf-color-text-muted); display: block; margin: 0 0 2px;
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__sys-value {
  font-family: var(--bf-font-display); font-weight: 700; font-size: var(--bf-text-lg);
  color: var(--bf-color-text); margin: 0; line-height: 1;
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__livedot {
  width: 12px; height: 12px; border-radius: 50%; background: var(--bf-color-success); flex: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bf-color-success) 24%, transparent);
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__sysbar.is-stopped .bf-om-datafeeds__livedot {
  background: var(--bf-color-danger);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bf-color-danger) 24%, transparent);
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__chips {
  display: flex; align-items: center; gap: var(--bf-space-2); flex-wrap: wrap;
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__chip {
  display: inline-flex; align-items: center; gap: var(--bf-space-1); padding: 3px var(--bf-space-2);
  font-size: var(--bf-text-xs); font-weight: 600; color: var(--bf-color-text-muted);
  background: var(--bf-color-surface-sunken); border-radius: var(--bf-radius-pill);
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__chip b { color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-datafeeds__sys-side { text-align: right; }
:is(.bf-home, .bf-om) .bf-om-datafeeds__sys-time {
  font-size: var(--bf-text-xs); color: var(--bf-color-text-muted); margin: var(--bf-space-2) 0 0;
}

/* upload panel */
:is(.bf-home, .bf-om) .bf-om-datafeeds__upload {
  padding: var(--bf-space-4); margin-bottom: var(--bf-space-5);
  background: var(--bf-color-surface); border: 1px solid var(--bf-color-border);
  border-radius: var(--bf-radius-lg); box-shadow: var(--bf-shadow-sm);
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__upload-k {
  font-size: var(--bf-text-xs); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bf-color-text-muted); margin: 0 0 var(--bf-space-2);
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__upload-files {
  margin: var(--bf-space-2) 0 0; font-size: var(--bf-text-sm); color: var(--bf-color-text-muted);
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__upload-list { margin: var(--bf-space-2) 0 0; padding-left: var(--bf-space-5); }

/* error banner */
:is(.bf-home, .bf-om) .bf-om-datafeeds__error {
  padding: var(--bf-space-3) var(--bf-space-4); margin-bottom: var(--bf-space-4);
  background: var(--bf-color-danger-bg); border: 1px solid var(--bf-color-danger);
  border-radius: var(--bf-radius-md); color: var(--bf-color-text);
}

/* workspace grid (list view) */
:is(.bf-home, .bf-om) .bf-om-datafeeds__workspace {
  display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: var(--bf-space-4); align-items: start;
}
@media (max-width: 900px) {
  :is(.bf-home, .bf-om) .bf-om-datafeeds__workspace { grid-template-columns: 1fr; }
}

/* left rail */
:is(.bf-home, .bf-om) .bf-om-datafeeds__rail {
  position: sticky; top: var(--bf-space-4); background: var(--bf-color-surface);
  border: 1px solid var(--bf-color-border); border-radius: var(--bf-radius-lg);
  box-shadow: var(--bf-shadow-sm); overflow: hidden;
}
@media (max-width: 900px) {
  :is(.bf-home, .bf-om) .bf-om-datafeeds__rail { position: static; }
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__rail-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--bf-space-2);
  padding: var(--bf-space-4); border-bottom: 1px solid var(--bf-color-border);
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__rail-title {
  display: inline-flex; align-items: baseline; gap: var(--bf-space-2);
  font-family: var(--bf-font-display); font-weight: 700; font-size: var(--bf-text-base);
  color: var(--bf-color-text); margin: 0; border: 0;
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__count {
  font-size: var(--bf-text-xs); font-weight: 700; color: var(--bf-color-primary-text);
  background: color-mix(in srgb, var(--bf-brand-primary) 14%, transparent);
  border-radius: var(--bf-radius-pill); padding: 2px var(--bf-space-2);
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__group {
  padding: var(--bf-space-3) var(--bf-space-4) var(--bf-space-1); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--bf-color-text-muted);
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__list { list-style: none; margin: 0; padding: 0; }
:is(.bf-home, .bf-om) .bf-om-datafeeds__feed {
  display: flex; align-items: center; gap: var(--bf-space-3); width: 100%;
  padding: var(--bf-space-3) var(--bf-space-4); border-top: 1px solid var(--bf-color-border);
  border-left: 3px solid transparent; transition: background var(--bf-transition-fast);
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__feed:hover { background: var(--bf-color-surface-alt); }
:is(.bf-home, .bf-om) .bf-om-datafeeds__feed.is-prog { border-left-color: var(--bf-color-success); }
:is(.bf-home, .bf-om) .bf-om-datafeeds__feed.is-wait { border-left-color: var(--bf-color-info); }
:is(.bf-home, .bf-om) .bf-om-datafeeds__feed.is-force { border-left-color: var(--bf-color-warning); }
:is(.bf-home, .bf-om) .bf-om-datafeeds__feed.is-err { border-left-color: var(--bf-color-danger); }
:is(.bf-home, .bf-om) .bf-om-datafeeds__feed.is-off { border-left-color: var(--bf-color-border-strong); }
:is(.bf-home, .bf-om) .bf-om-datafeeds__feed-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--bf-color-border-strong);
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__feed.is-prog .bf-om-datafeeds__feed-dot { background: var(--bf-color-success); }
:is(.bf-home, .bf-om) .bf-om-datafeeds__feed.is-wait .bf-om-datafeeds__feed-dot { background: var(--bf-color-info); }
:is(.bf-home, .bf-om) .bf-om-datafeeds__feed.is-force .bf-om-datafeeds__feed-dot { background: var(--bf-color-warning); }
:is(.bf-home, .bf-om) .bf-om-datafeeds__feed.is-err .bf-om-datafeeds__feed-dot { background: var(--bf-color-danger); }
:is(.bf-home, .bf-om) .bf-om-datafeeds__feed-grow { flex: 1; min-width: 0; }
:is(.bf-home, .bf-om) .bf-om-datafeeds__feed-title {
  display: block; font-weight: 600; font-size: var(--bf-text-sm); color: var(--bf-color-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__feed-meta {
  display: block; font-size: var(--bf-text-xs); color: var(--bf-color-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__feed-when {
  flex: none; font-size: var(--bf-text-xs); color: var(--bf-color-text-muted); text-align: right;
}

/* right pane (list view) + focus card (drill-ins) */
:is(.bf-home, .bf-om) .bf-om-datafeeds__pane,
:is(.bf-home, .bf-om) .bf-om-datafeeds__focus {
  background: var(--bf-color-surface); border: 1px solid var(--bf-color-border);
  border-radius: var(--bf-radius-lg); box-shadow: var(--bf-shadow-sm); overflow: hidden;
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__pane-head {
  padding: var(--bf-space-5) var(--bf-space-5) var(--bf-space-4);
  border-bottom: 1px solid var(--bf-color-border);
  background: linear-gradient(180deg, var(--bf-color-surface-alt), var(--bf-color-surface));
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__pane-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--bf-space-3); flex-wrap: wrap;
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__ref {
  font-size: var(--bf-text-xs); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--bf-color-text-muted); margin: 0 0 var(--bf-space-1);
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__pane-title {
  font-family: var(--bf-font-display); font-weight: 700; font-size: var(--bf-text-2xl);
  color: var(--bf-color-text); margin: 0; border: 0; line-height: var(--bf-leading-tight);
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__actions {
  display: flex; gap: var(--bf-space-2); flex-wrap: wrap; margin-top: var(--bf-space-4);
}

/* metrics tiles */
:is(.bf-home, .bf-om) .bf-om-datafeeds__metrics {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bf-space-3); padding: var(--bf-space-5);
}
@media (max-width: 620px) {
  :is(.bf-home, .bf-om) .bf-om-datafeeds__metrics { grid-template-columns: repeat(2, 1fr); }
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__metric {
  padding: var(--bf-space-3) var(--bf-space-4); border: 1px solid var(--bf-color-border);
  border-radius: var(--bf-radius-md); background: var(--bf-color-surface);
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__metric--feature {
  background: var(--bf-color-secondary, var(--bf-brand-secondary)); border-color: transparent;
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__metric-k {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bf-color-text-muted); margin: 0;
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__metric--feature .bf-om-datafeeds__metric-k {
  color: color-mix(in srgb, var(--bf-brand-primary-ink) 76%, transparent);
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__metric-v {
  font-family: var(--bf-font-display); font-weight: 700; font-size: var(--bf-text-xl);
  color: var(--bf-color-text); margin: var(--bf-space-1) 0 0; line-height: 1;
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__metric--feature .bf-om-datafeeds__metric-v { color: var(--bf-brand-primary-ink); }

/* bulk-action toolbar + status legend (list-view pane) */
:is(.bf-home, .bf-om) .bf-om-datafeeds__bulk { padding: var(--bf-space-5); }
:is(.bf-home, .bf-om) .bf-om-datafeeds__bulk-k {
  font-family: var(--bf-font-display); font-weight: 700; font-size: var(--bf-text-base);
  color: var(--bf-color-text); margin: 0 0 var(--bf-space-1);
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__bulk-note {
  font-size: var(--bf-text-sm); color: var(--bf-color-text-muted); margin: 0 0 var(--bf-space-4);
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__legend {
  display: flex; align-items: center; gap: var(--bf-space-4); flex-wrap: wrap;
  margin-top: var(--bf-space-5); padding-top: var(--bf-space-4); border-top: 1px solid var(--bf-color-border);
  font-size: var(--bf-text-xs); color: var(--bf-color-text-muted);
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__legend-item { display: inline-flex; align-items: center; gap: var(--bf-space-2); }
:is(.bf-home, .bf-om) .bf-om-datafeeds__legend-sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
:is(.bf-home, .bf-om) .bf-om-datafeeds__legend-sw--prog { background: var(--bf-color-success); }
:is(.bf-home, .bf-om) .bf-om-datafeeds__legend-sw--force { background: var(--bf-color-warning); }
:is(.bf-home, .bf-om) .bf-om-datafeeds__legend-sw--err { background: var(--bf-color-danger); }
:is(.bf-home, .bf-om) .bf-om-datafeeds__legend-sw--off { background: var(--bf-color-border-strong); }

/* sectioned edit form (edit-view focus card) */
:is(.bf-home, .bf-om) .bf-om-datafeeds__form { padding: 0 var(--bf-space-5) var(--bf-space-5); }
:is(.bf-home, .bf-om) .bf-om-datafeeds__section { padding: var(--bf-space-5) 0; border-top: 1px solid var(--bf-color-border); }
:is(.bf-home, .bf-om) .bf-om-datafeeds__section:first-child { border-top: 0; padding-top: 0; }
:is(.bf-home, .bf-om) .bf-om-datafeeds__section-head {
  display: flex; align-items: center; gap: var(--bf-space-2); margin: 0 0 var(--bf-space-4);
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__section-ico {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: var(--bf-radius-sm); color: var(--bf-color-primary-text);
  background: color-mix(in srgb, var(--bf-brand-primary) 14%, transparent); font-size: var(--bf-text-sm); flex: none;
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__section-title {
  font-family: var(--bf-font-display); font-weight: 700; font-size: var(--bf-text-base);
  color: var(--bf-color-text); margin: 0; border: 0;
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__section-note {
  font-size: var(--bf-text-xs); color: var(--bf-color-text-muted); margin-left: auto;
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--bf-space-3) var(--bf-space-4);
}
@media (max-width: 620px) {
  :is(.bf-home, .bf-om) .bf-om-datafeeds__grid { grid-template-columns: 1fr; }
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__grid .bf-field--wide { grid-column: 1 / -1; }
:is(.bf-home, .bf-om) .bf-om-datafeeds__formbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--bf-space-3);
  flex-wrap: wrap; padding: var(--bf-space-4) var(--bf-space-5); border-top: 1px solid var(--bf-color-border);
  background: var(--bf-color-surface-alt);
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__formbar-note { font-size: var(--bf-text-xs); color: var(--bf-color-text-muted); }

/* recent runs + generic focus body */
:is(.bf-home, .bf-om) .bf-om-datafeeds__body { padding: var(--bf-space-5); }
:is(.bf-home, .bf-om) .bf-om-datafeeds__runs { padding: var(--bf-space-5); border-top: 1px solid var(--bf-color-border); }
:is(.bf-home, .bf-om) .bf-om-datafeeds__runs-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--bf-space-3); margin: 0 0 var(--bf-space-3);
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__runs-title {
  font-family: var(--bf-font-display); font-weight: 700; font-size: var(--bf-text-base);
  color: var(--bf-color-text); margin: 0; border: 0;
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__scroll { overflow-x: auto; }
:is(.bf-home, .bf-om) .bf-om-datafeeds__mono {
  font-family: var(--bf-font-mono, ui-monospace, monospace); font-size: var(--bf-text-xs); color: var(--bf-color-text-muted);
}
:is(.bf-home, .bf-om) .bf-om-datafeeds__console {
  padding: var(--bf-space-4); background: var(--bf-color-secondary, var(--bf-brand-secondary));
  border-radius: var(--bf-radius-md); color: color-mix(in srgb, var(--bf-brand-primary-ink) 88%, transparent);
  font-family: var(--bf-font-mono, ui-monospace, monospace); font-size: var(--bf-text-xs);
  white-space: pre-wrap; word-break: break-word; max-height: 480px; overflow: auto;
}

@media (prefers-reduced-motion: no-preference) {
  :is(.bf-home, .bf-om) .bf-om-datafeeds__livedot { animation: bf-om-datafeeds-pulse 2.4s ease-in-out infinite; }
  @keyframes bf-om-datafeeds-pulse {
    0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--bf-color-success) 24%, transparent); }
    50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--bf-color-success) 8%, transparent); }
  }
}

/* ============================================================================
   W29 includes/setup/setup_categories.php - Category Setup workbench (.bf-om-setup)
   Server-rendered category tree + one contextual editor. Replaces the legacy
   two-step wizard + two <select size=20> listboxes. Token-only, AA-verified,
   reduced-motion gated. Reusable by the rest of the setup-* tier.
   ============================================================================ */
:is(.bf-home, .bf-om) .bf-om-setup__toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--bf-space-4); flex-wrap: wrap; margin: var(--bf-space-4) 0; }
:is(.bf-home, .bf-om) .bf-om-setup__lede { margin: 0; color: var(--bf-color-text-muted); font-size: var(--bf-text-sm); max-width: 60ch; }
:is(.bf-home, .bf-om) .bf-om-setup__util { display: inline-flex; align-items: center; gap: var(--bf-space-2); font-size: var(--bf-text-sm); color: var(--bf-color-primary-text); text-decoration: none; white-space: nowrap; }
:is(.bf-home, .bf-om) .bf-om-setup__util:hover { text-decoration: underline; color: var(--bf-color-text); }

/* inline notices (replace echo '...'; exit(0)) */
:is(.bf-home, .bf-om) .bf-om-setup__note { display: flex; align-items: flex-start; gap: var(--bf-space-3); padding: var(--bf-space-3) var(--bf-space-4); border-radius: var(--bf-radius-md); font-size: var(--bf-text-sm); margin-bottom: var(--bf-space-4); border: 1px solid var(--bf-color-border); background: var(--bf-color-surface); }
:is(.bf-home, .bf-om) .bf-om-setup__note[hidden] { display: none; }
:is(.bf-home, .bf-om) .bf-om-setup__note i { margin-top: 2px; }
:is(.bf-home, .bf-om) .bf-om-setup__note--ok { border-color: color-mix(in srgb, var(--bf-color-success) 45%, transparent); background: color-mix(in srgb, var(--bf-color-success) 12%, var(--bf-color-surface)); }
:is(.bf-home, .bf-om) .bf-om-setup__note--ok i { color: var(--bf-color-success); }
:is(.bf-home, .bf-om) .bf-om-setup__note--err { border-color: color-mix(in srgb, var(--bf-color-danger) 45%, transparent); background: color-mix(in srgb, var(--bf-color-danger) 10%, var(--bf-color-surface)); }
:is(.bf-home, .bf-om) .bf-om-setup__note--err i { color: var(--bf-color-danger); }

/* two-pane workbench */
:is(.bf-home, .bf-om) .bf-om-setup { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: var(--bf-space-5); align-items: start; }
@media (max-width: 900px) { :is(.bf-home, .bf-om) .bf-om-setup { grid-template-columns: 1fr; } }

/* rail: the category tree */
:is(.bf-home, .bf-om) .bf-om-setup__rail { background: var(--bf-color-surface); border: 1px solid var(--bf-color-border); border-radius: var(--bf-radius-lg); box-shadow: var(--bf-shadow-sm); overflow: hidden; position: sticky; top: var(--bf-space-4); }
:is(.bf-home, .bf-om) .bf-om-setup__railhead { display: flex; align-items: center; justify-content: space-between; gap: var(--bf-space-2); padding: var(--bf-space-3) var(--bf-space-4); border-bottom: 1px solid var(--bf-color-border); }
:is(.bf-home, .bf-om) .bf-om-setup__railtitle { font-family: var(--bf-font-display); font-weight: 700; font-size: var(--bf-text-sm); letter-spacing: 0.04em; text-transform: uppercase; color: var(--bf-color-text-muted); margin: 0; }
:is(.bf-home, .bf-om) .bf-om-setup__count { font-size: var(--bf-text-xs); color: var(--bf-color-text-muted); font-variant-numeric: tabular-nums; }
:is(.bf-home, .bf-om) .bf-om-setup__search { padding: var(--bf-space-3) var(--bf-space-4) 0; position: relative; }
:is(.bf-home, .bf-om) .bf-om-setup__search .fa { position: absolute; left: calc(var(--bf-space-4) + 10px); top: 50%; transform: translateY(-30%); color: var(--bf-color-text-muted); pointer-events: none; }
:is(.bf-home, .bf-om) .bf-om-setup__search .bf-input { padding-left: var(--bf-space-6); }
/* Filter row: an icon-overlay search box + a Go submit button side by side (styles / templates editors). */
:is(.bf-home, .bf-om) .bf-om-comp__filter { display: flex; align-items: stretch; gap: var(--bf-space-2); margin: 0 0 var(--bf-space-2); }
:is(.bf-home, .bf-om) .bf-om-comp__filter .bf-om-setup__search { flex: 1 1 auto; padding: 0; }
:is(.bf-home, .bf-om) .bf-om-comp__filter .bf-om-setup__search .fa { left: calc(var(--bf-space-3) + 4px); }
:is(.bf-home, .bf-om) .bf-om-comp__filter .bf-btn { flex: 0 0 auto; }
:is(.bf-home, .bf-om) .bf-om-setup__tree { list-style: none; margin: var(--bf-space-2) 0 0; padding: 0 var(--bf-space-2) var(--bf-space-2); }
:is(.bf-home, .bf-om) .bf-om-setup__node { display: flex; align-items: center; gap: var(--bf-space-2); width: 100%; text-align: left; text-decoration: none; border-radius: var(--bf-radius-md); padding: var(--bf-space-2) var(--bf-space-3); color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-setup__node:hover { background: var(--bf-color-surface-sunken); text-decoration: none; color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-setup__node.is-selected { background: color-mix(in srgb, var(--bf-brand-primary) 12%, var(--bf-color-surface)); box-shadow: inset 3px 0 0 var(--bf-color-primary); }
:is(.bf-home, .bf-om) .bf-om-setup__node:focus-visible { outline: 2px solid var(--bf-color-primary); outline-offset: -2px; }
:is(.bf-home, .bf-om) .bf-om-setup__node--sub { padding-left: var(--bf-space-6); }
:is(.bf-home, .bf-om) .bf-om-setup__nodename { flex: 1; min-width: 0; font-weight: 600; font-size: var(--bf-text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.bf-home, .bf-om) .bf-om-setup__node--sub .bf-om-setup__nodename { font-weight: 500; }
:is(.bf-home, .bf-om) .bf-om-setup__num { font-size: var(--bf-text-xs); color: var(--bf-color-text-muted); font-variant-numeric: tabular-nums; flex: none; }
:is(.bf-home, .bf-om) .bf-om-setup__addsub { display: flex; align-items: center; gap: var(--bf-space-2); width: 100%; text-decoration: none; border-radius: var(--bf-radius-md); padding: var(--bf-space-1) var(--bf-space-3); padding-left: var(--bf-space-6); margin-bottom: var(--bf-space-1); color: var(--bf-color-primary-text); font-size: var(--bf-text-xs); font-weight: 600; }
:is(.bf-home, .bf-om) .bf-om-setup__addsub:hover { background: var(--bf-color-surface-sunken); text-decoration: none; color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-setup__tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--bf-radius-pill); border: 1px solid var(--bf-color-border-strong); color: var(--bf-color-text-muted); flex: none; }
:is(.bf-home, .bf-om) .bf-om-setup__tag--hidden { border-color: color-mix(in srgb, var(--bf-color-text-muted) 40%, transparent); }
:is(.bf-home, .bf-om) .bf-om-setup__tag--hold { border-color: color-mix(in srgb, var(--bf-color-warning) 55%, transparent); color: color-mix(in srgb, var(--bf-color-warning) 72%, var(--bf-color-text)); }
:is(.bf-home, .bf-om) .bf-om-setup__railfoot { padding: var(--bf-space-3) var(--bf-space-4); border-top: 1px solid var(--bf-color-border); }

/* editor */
:is(.bf-home, .bf-om) .bf-om-setup__editor { background: var(--bf-color-surface); border: 1px solid var(--bf-color-border); border-radius: var(--bf-radius-lg); box-shadow: var(--bf-shadow-sm); overflow: hidden; }
:is(.bf-home, .bf-om) .bf-om-setup__ehead { padding: var(--bf-space-4) var(--bf-space-5); border-bottom: 1px solid var(--bf-color-border); background: var(--bf-color-surface-sunken); }
:is(.bf-home, .bf-om) .bf-om-setup__crumb { display: flex; align-items: center; gap: var(--bf-space-2); font-size: var(--bf-text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--bf-color-text-muted); margin: 0; flex-wrap: wrap; }
:is(.bf-home, .bf-om) .bf-om-setup__crumb .fa { font-size: 9px; }
:is(.bf-home, .bf-om) .bf-om-setup__idchip { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; padding: 2px 7px; border-radius: var(--bf-radius-pill); border: 1px solid var(--bf-color-border-strong); color: var(--bf-color-text-muted); }
:is(.bf-home, .bf-om) .bf-om-setup__etitle { font-family: var(--bf-font-display); font-weight: 700; font-size: var(--bf-text-xl); color: var(--bf-color-text); margin: var(--bf-space-2) 0 0; line-height: var(--bf-leading-tight); }
:is(.bf-home, .bf-om) .bf-om-setup__ebody { padding: var(--bf-space-5); }
:is(.bf-home, .bf-om) .bf-om-setup__sec { margin: 0 0 var(--bf-space-5); }
:is(.bf-home, .bf-om) .bf-om-setup__seck { font-family: var(--bf-font-display); font-weight: 700; font-size: var(--bf-text-sm); letter-spacing: 0.04em; text-transform: uppercase; color: var(--bf-color-text-muted); margin: 0 0 var(--bf-space-3); padding-bottom: var(--bf-space-2); border-bottom: 1px solid var(--bf-color-border); }
:is(.bf-home, .bf-om) .bf-om-setup__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bf-space-4); }
@media (max-width: 620px) { :is(.bf-home, .bf-om) .bf-om-setup__grid { grid-template-columns: 1fr; } }
:is(.bf-home, .bf-om) .bf-om-setup__field { display: flex; flex-direction: column; gap: var(--bf-space-2); }
:is(.bf-home, .bf-om) .bf-om-setup__field--wide { grid-column: 1 / -1; }
:is(.bf-home, .bf-om) .bf-om-setup__field > label { font-weight: 600; font-size: var(--bf-text-sm); color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-setup__hint { font-size: var(--bf-text-xs); color: var(--bf-color-text-muted); margin: 0; }
:is(.bf-home, .bf-om) .bf-om-setup__err { font-size: var(--bf-text-xs); color: var(--bf-color-danger); font-weight: 600; margin: 0; }
:is(.bf-home, .bf-om) .bf-om-setup .bf-input.is-invalid, :is(.bf-home, .bf-om) .bf-om-setup .bf-select.is-invalid { border-color: var(--bf-color-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bf-color-danger) 20%, transparent); }
:is(.bf-home, .bf-om) .bf-om-setup__idrow { display: flex; align-items: center; gap: var(--bf-space-2); }
:is(.bf-home, .bf-om) .bf-om-setup__idrow .bf-input { max-width: 8em; }
:is(.bf-home, .bf-om) .bf-om-setup__idbadge { font-size: var(--bf-text-xs); color: var(--bf-color-text-muted); }

/* advanced disclosure */
:is(.bf-home, .bf-om) .bf-om-setup__adv { border: 1px solid var(--bf-color-border); border-radius: var(--bf-radius-md); background: var(--bf-color-surface-sunken); margin-bottom: var(--bf-space-5); }
:is(.bf-home, .bf-om) .bf-om-setup__adv > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--bf-space-2); padding: var(--bf-space-3) var(--bf-space-4); font-family: var(--bf-font-display); font-weight: 600; font-size: var(--bf-text-sm); color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-setup__adv > summary::-webkit-details-marker { display: none; }
:is(.bf-home, .bf-om) .bf-om-setup__advnote { font-weight: 400; color: var(--bf-color-text-muted); font-size: var(--bf-text-xs); margin-left: auto; }
:is(.bf-home, .bf-om) .bf-om-setup__advbody { padding: 0 var(--bf-space-4) var(--bf-space-4); }
:is(.bf-home, .bf-om) .bf-om-setup__advbody .bf-om-setup__grid { margin-top: var(--bf-space-2); }
:is(.bf-home, .bf-om) .bf-om-setup__chev { transition: transform var(--bf-transition-fast); color: var(--bf-color-text-muted); }
:is(.bf-home, .bf-om) .bf-om-setup__adv[open] > summary .bf-om-setup__chev { transform: rotate(90deg); }
:is(.bf-home, .bf-om) .bf-om-setup__locked { padding: var(--bf-space-3); border: 1px dashed var(--bf-color-border-strong); border-radius: var(--bf-radius-md); background: var(--bf-color-surface); font-size: var(--bf-text-xs); color: var(--bf-color-text-muted); display: flex; align-items: flex-start; gap: var(--bf-space-2); }
:is(.bf-home, .bf-om) .bf-om-setup__locked i { margin-top: 2px; }

/* action bar + delete confirm */
:is(.bf-home, .bf-om) .bf-om-setup__actions { display: flex; align-items: center; gap: var(--bf-space-3); flex-wrap: wrap; padding-top: var(--bf-space-4); border-top: 1px solid var(--bf-color-border); }
:is(.bf-home, .bf-om) .bf-om-setup__spacer { flex: 1; }
:is(.bf-home, .bf-om) .bf-om-setup__guard { font-size: var(--bf-text-xs); color: var(--bf-color-text-muted); max-width: 24ch; text-align: right; }
:is(.bf-home, .bf-om) .bf-om-setup__confirm { padding: var(--bf-space-5) 0 0; margin-top: var(--bf-space-4); border-top: 1px solid var(--bf-color-border); }
:is(.bf-home, .bf-om) .bf-om-setup__confirm[hidden] { display: none; }
:is(.bf-home, .bf-om) .bf-om-setup__medallion { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--bf-color-danger) 14%, var(--bf-color-surface)); color: var(--bf-color-danger); font-size: var(--bf-text-xl); margin-bottom: var(--bf-space-3); }
:is(.bf-home, .bf-om) .bf-om-setup__confirmtitle { font-family: var(--bf-font-display); font-weight: 700; font-size: var(--bf-text-lg); color: var(--bf-color-text); margin: 0 0 var(--bf-space-2); }
:is(.bf-home, .bf-om) .bf-om-setup__confirmbody { color: var(--bf-color-text-muted); font-size: var(--bf-text-sm); margin: 0 0 var(--bf-space-4); max-width: 56ch; }

/* setup section nav (the cross-section config nav, consolidated + restored) */
:is(.bf-home, .bf-om) .bf-om-setup__sections { display: flex; flex-wrap: wrap; gap: var(--bf-space-2); margin: var(--bf-space-4) 0; padding-bottom: var(--bf-space-4); border-bottom: 1px solid var(--bf-color-border); }
:is(.bf-home, .bf-om) .bf-om-setup__seclink { display: inline-flex; align-items: center; padding: var(--bf-space-2) var(--bf-space-4); border-radius: var(--bf-radius-pill); border: 1px solid var(--bf-color-border); background: var(--bf-color-surface); color: var(--bf-color-text-muted); font-family: var(--bf-font-display); font-weight: 600; font-size: var(--bf-text-sm); text-decoration: none; white-space: nowrap; }
:is(.bf-home, .bf-om) .bf-om-setup__seclink:hover { border-color: var(--bf-color-border-strong); color: var(--bf-color-text); text-decoration: none; background: var(--bf-color-surface-sunken); }
:is(.bf-home, .bf-om) .bf-om-setup__seclink.is-active,
:is(.bf-home, .bf-om) .bf-om-setup__seclink.is-active:hover { background: var(--bf-color-secondary, var(--bf-brand-secondary)); border-color: transparent; color: var(--bf-brand-primary-ink); }

/* collapsible major rows */
:is(.bf-home, .bf-om) .bf-om-setup__majorrow { display: flex; align-items: stretch; }
:is(.bf-home, .bf-om) .bf-om-setup__majorrow .bf-om-setup__node { flex: 1; min-width: 0; }
:is(.bf-home, .bf-om) .bf-om-setup__toggle { flex: none; width: 26px; appearance: none; cursor: pointer; border: 0; background: transparent; color: var(--bf-color-text-muted); border-radius: var(--bf-radius-md); display: grid; place-items: center; }
:is(.bf-home, .bf-om) .bf-om-setup__toggle:hover { background: var(--bf-color-surface-sunken); color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-setup__toggle:focus-visible { outline: 2px solid var(--bf-color-primary); outline-offset: -2px; }
:is(.bf-home, .bf-om) .bf-om-setup__toggle .fa { transition: transform var(--bf-transition-fast); }
:is(.bf-home, .bf-om) .bf-om-setup__toggle.is-open .fa { transform: rotate(90deg); }
:is(.bf-home, .bf-om) .bf-om-setup__subs[hidden] { display: none; }

/* anchor buttons: beat base.css `.bf-scope a { color: teal }` (0,1,1) so bf-btn
   anchors keep their plate text color (the W13 gotcha). */
:is(.bf-home, .bf-om) .bf-om-setup a.bf-btn--secondary,
:is(.bf-home, .bf-om) .bf-om-setup a.bf-btn--secondary:hover,
:is(.bf-home, .bf-om) .bf-om-setup__chain a.bf-btn--secondary,
:is(.bf-home, .bf-om) .bf-om-setup__chain a.bf-btn--secondary:hover { color: var(--bf-color-text); text-decoration: none; }
:is(.bf-home, .bf-om) .bf-om-setup a.bf-btn--danger,
:is(.bf-home, .bf-om) .bf-om-setup a.bf-btn--danger:hover { color: var(--bf-color-text-inverse); text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  :is(.bf-home, .bf-om) .bf-om-setup__chev,
  :is(.bf-home, .bf-om) .bf-om-setup__toggle .fa { transition: none; }
}

/* -------------------------------------------------------------------------- *
 * .bf-om-pub - Publications & Zones workbench (W30).
 * Extends the shipped .bf-om-setup rail/editor with the domain-specific
 * controls this page needs: an entity switcher, a day-of-week edition picker,
 * the revenue-breakout editor, checklist assignment pickers, and a deadline
 * cutoff grid. Token-only, AA-verified, reduced-motion gated.
 * -------------------------------------------------------------------------- */

/* entity switcher at the head of the rail */
:is(.bf-home, .bf-om) .bf-om-pub__tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--bf-space-1); padding: var(--bf-space-3) var(--bf-space-3) 0; }
:is(.bf-home, .bf-om) .bf-om-pub__tab { display: flex; align-items: center; gap: var(--bf-space-2); border: 1px solid var(--bf-color-border); background: var(--bf-color-surface); color: var(--bf-color-text-muted); border-radius: var(--bf-radius-md); padding: var(--bf-space-2) var(--bf-space-3); font-family: var(--bf-font-display); font-weight: 600; font-size: var(--bf-text-xs); text-decoration: none; }
:is(.bf-home, .bf-om) .bf-om-pub__tab .fa { font-size: var(--bf-text-sm); }
:is(.bf-home, .bf-om) .bf-om-pub__tab:hover { border-color: var(--bf-color-border-strong); color: var(--bf-color-text); text-decoration: none; }
:is(.bf-home, .bf-om) .bf-om-pub__tab.is-active { background: color-mix(in srgb, var(--bf-brand-primary) 12%, var(--bf-color-surface)); border-color: var(--bf-color-primary); color: var(--bf-color-text); box-shadow: inset 0 -2px 0 var(--bf-color-primary); }
:is(.bf-home, .bf-om) .bf-om-pub__tab:focus-visible { outline: 2px solid var(--bf-color-primary); outline-offset: 1px; }
:is(.bf-home, .bf-om) .bf-om-pub__tabn { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--bf-color-text-muted); }

/* day-of-week edition picker (replaces 7 checkboxes) */
:is(.bf-home, .bf-om) .bf-om-pub__days { display: flex; align-items: center; gap: var(--bf-space-2); flex-wrap: wrap; }
:is(.bf-home, .bf-om) .bf-om-pub__day { position: relative; cursor: pointer; }
:is(.bf-home, .bf-om) .bf-om-pub__day input { position: absolute; opacity: 0; width: 0; height: 0; }
:is(.bf-home, .bf-om) .bf-om-pub__day span { display: grid; place-items: center; width: 44px; height: 40px; border-radius: var(--bf-radius-md); border: 1px solid var(--bf-color-border-strong); background: var(--bf-color-surface); color: var(--bf-color-text-muted); font-weight: 700; font-size: var(--bf-text-xs); }
:is(.bf-home, .bf-om) .bf-om-pub__day input:checked + span { background: var(--bf-color-secondary, var(--bf-brand-secondary)); color: var(--bf-brand-primary-ink); border-color: transparent; }
:is(.bf-home, .bf-om) .bf-om-pub__day input:focus-visible + span { outline: 2px solid var(--bf-color-primary); outline-offset: 2px; }
:is(.bf-home, .bf-om) .bf-om-pub__daily { margin-left: var(--bf-space-2); font-size: var(--bf-text-xs); font-weight: 600; color: var(--bf-color-primary-text); background: none; border: 0; cursor: pointer; }
:is(.bf-home, .bf-om) .bf-om-pub__daily:hover { text-decoration: underline; }
:is(.bf-home, .bf-om) .bf-om-pub__switch { display: inline-flex; align-items: center; gap: var(--bf-space-2); font-size: var(--bf-text-sm); color: var(--bf-color-text); font-weight: 500; }

/* revenue breakout editor (membership + split combined) */
:is(.bf-home, .bf-om) .bf-om-pub__split { border: 1px solid var(--bf-color-border); border-radius: var(--bf-radius-lg); overflow: hidden; background: var(--bf-color-surface); }
:is(.bf-home, .bf-om) .bf-om-pub__shead { display: flex; align-items: center; justify-content: space-between; gap: var(--bf-space-3); padding: var(--bf-space-3) var(--bf-space-4); background: var(--bf-color-surface-sunken); border-bottom: 1px solid var(--bf-color-border); }
:is(.bf-home, .bf-om) .bf-om-pub__stitle { font-size: var(--bf-text-xs); color: var(--bf-color-text-muted); margin: 0; font-weight: 600; }
:is(.bf-home, .bf-om) .bf-om-pub__even { border: 1px solid var(--bf-color-border); background: var(--bf-color-surface); color: var(--bf-color-primary-text); border-radius: var(--bf-radius-pill); font-size: var(--bf-text-xs); font-weight: 700; padding: 4px var(--bf-space-3); cursor: pointer; flex: none; }
:is(.bf-home, .bf-om) .bf-om-pub__even:hover { border-color: var(--bf-color-primary); }
:is(.bf-home, .bf-om) .bf-om-pub__srows { list-style: none; margin: 0; padding: var(--bf-space-2) var(--bf-space-3); max-height: 340px; overflow: auto; }
:is(.bf-home, .bf-om) .bf-om-pub__srow { display: flex; align-items: center; gap: var(--bf-space-3); padding: var(--bf-space-2) 0; border-bottom: 1px solid var(--bf-color-border); }
:is(.bf-home, .bf-om) .bf-om-pub__srow:last-child { border-bottom: 0; }
:is(.bf-home, .bf-om) .bf-om-pub__spub { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--bf-space-2); font-size: var(--bf-text-sm); color: var(--bf-color-text-muted); cursor: pointer; }
:is(.bf-home, .bf-om) .bf-om-pub__srow.is-on .bf-om-pub__spub { color: var(--bf-color-text); font-weight: 600; }
:is(.bf-home, .bf-om) .bf-om-pub__spub span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.bf-home, .bf-om) .bf-om-pub__spct { display: inline-flex; align-items: center; gap: 4px; flex: none; }
:is(.bf-home, .bf-om) .bf-om-pub__spct .bf-input { width: 5.5em; text-align: right; }
:is(.bf-home, .bf-om) .bf-om-pub__spct span { color: var(--bf-color-text-muted); font-weight: 600; }
:is(.bf-home, .bf-om) .bf-om-pub__sfoot { padding: var(--bf-space-3) var(--bf-space-4) var(--bf-space-4); border-top: 1px solid var(--bf-color-border); }
:is(.bf-home, .bf-om) .bf-om-pub__strack { height: 8px; border-radius: var(--bf-radius-pill); overflow: hidden; background: var(--bf-color-surface-sunken); }
:is(.bf-home, .bf-om) .bf-om-pub__sfill { height: 100%; width: 0; background: var(--bf-color-primary); transition: width var(--bf-transition-base), background var(--bf-transition-base); }
:is(.bf-home, .bf-om) .bf-om-pub__stot { display: flex; align-items: center; justify-content: space-between; gap: var(--bf-space-2); margin-top: var(--bf-space-2); font-size: var(--bf-text-sm); font-weight: 700; }
:is(.bf-home, .bf-om) .bf-om-pub__totnum { font-variant-numeric: tabular-nums; }
:is(.bf-home, .bf-om) .bf-om-pub__split.is-ok .bf-om-pub__sfill { background: var(--bf-color-success); }
:is(.bf-home, .bf-om) .bf-om-pub__split.is-ok .bf-om-pub__totnum { color: var(--bf-color-success); }
:is(.bf-home, .bf-om) .bf-om-pub__split.is-off .bf-om-pub__sfill { background: var(--bf-color-danger); }
:is(.bf-home, .bf-om) .bf-om-pub__split.is-off .bf-om-pub__totnum { color: var(--bf-color-danger); }

/* checklist assignment picker (replaces dual select-multiple boxes) */
:is(.bf-home, .bf-om) .bf-om-pub__searchrow { margin-bottom: var(--bf-space-2); }
:is(.bf-home, .bf-om) .bf-om-pub__check { border: 1px solid var(--bf-color-border-strong); border-radius: var(--bf-radius-md); background: var(--bf-color-surface); max-height: 240px; overflow: auto; padding: var(--bf-space-2); }
:is(.bf-home, .bf-om) .bf-om-pub__checkitem { display: flex; align-items: center; gap: var(--bf-space-2); padding: var(--bf-space-1) var(--bf-space-2); border-radius: var(--bf-radius-sm); font-size: var(--bf-text-sm); color: var(--bf-color-text); cursor: pointer; }
:is(.bf-home, .bf-om) .bf-om-pub__checkitem:hover { background: var(--bf-color-surface-sunken); }
:is(.bf-home, .bf-om) .bf-om-pub__checkgroup { margin: var(--bf-space-2) 0 2px; font-size: var(--bf-text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bf-color-text-muted); }

/* deadline cutoff grid */
:is(.bf-home, .bf-om) .bf-om-pub__dl { border: 1px solid var(--bf-color-border); border-radius: var(--bf-radius-md); overflow: hidden; }
:is(.bf-home, .bf-om) .bf-om-pub__dlrow { display: grid; grid-template-columns: 6em 1fr 1fr; align-items: center; gap: var(--bf-space-3); padding: var(--bf-space-2) var(--bf-space-3); border-bottom: 1px solid var(--bf-color-border); }
:is(.bf-home, .bf-om) .bf-om-pub__dlrow:last-child { border-bottom: 0; }
:is(.bf-home, .bf-om) .bf-om-pub__dlrow--head { background: var(--bf-color-surface-sunken); font-size: var(--bf-text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--bf-color-text-muted); font-weight: 700; }
:is(.bf-home, .bf-om) .bf-om-pub__dlday { font-weight: 600; font-size: var(--bf-text-sm); }

@media (prefers-reduced-motion: reduce) {
  :is(.bf-home, .bf-om) .bf-om-pub__sfill { transition: none; }
}

/* --------------------------------------------------------------------------
   W31 Rate desk - setup_rate_packages workbench (entity tabs, rate-group money
   trail, billable-element editor, component toggles, wizard wrapper). Built atop
   the shipped .bf-om-setup rail/editor/sections + .bf-om-pub checklist families.
   Token-only, :is(.bf-home,.bf-om)-scoped, reduced-motion gated.
   -------------------------------------------------------------------------- */

/* entity switcher at the head of the rail (Packages/Cards/Units/Types), rendered as links */
:is(.bf-home, .bf-om) .bf-om-rate__tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--bf-space-1); padding: var(--bf-space-3) var(--bf-space-3) 0; }
:is(.bf-home, .bf-om) .bf-om-rate__tab { display: flex; align-items: center; gap: var(--bf-space-2); border: 1px solid var(--bf-color-border); background: var(--bf-color-surface); color: var(--bf-color-text-muted); text-decoration: none; border-radius: var(--bf-radius-md); padding: var(--bf-space-2) var(--bf-space-3); font-family: var(--bf-font-display); font-weight: 600; font-size: var(--bf-text-xs); }
:is(.bf-home, .bf-om) .bf-om-rate__tab .fa { font-size: var(--bf-text-sm); }
:is(.bf-home, .bf-om) .bf-om-rate__tab:hover { border-color: var(--bf-color-border-strong); color: var(--bf-color-text); text-decoration: none; }
:is(.bf-home, .bf-om) .bf-om-rate__tab.is-active { background: color-mix(in srgb, var(--bf-brand-primary) 12%, var(--bf-color-surface)); border-color: var(--bf-color-primary); color: var(--bf-color-text); box-shadow: inset 0 -2px 0 var(--bf-color-primary); }
:is(.bf-home, .bf-om) .bf-om-rate__tab:focus-visible { outline: 2px solid var(--bf-color-focus-ring); outline-offset: 1px; }
:is(.bf-home, .bf-om) .bf-om-rate__tabn { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--bf-color-text-muted); }

/* "Runs in" group label + component toggles (Online / Print) */
:is(.bf-home, .bf-om) .bf-om-rate__flabel { display: block; margin-bottom: var(--bf-space-1); font-size: var(--bf-text-sm); font-weight: var(--bf-weight-medium); color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-rate__comp { display: flex; gap: var(--bf-space-2); flex-wrap: wrap; }
:is(.bf-home, .bf-om) .bf-om-rate__compopt { position: relative; }
:is(.bf-home, .bf-om) .bf-om-rate__compopt input { position: absolute; opacity: 0; width: 0; height: 0; }
:is(.bf-home, .bf-om) .bf-om-rate__compface { display: inline-flex; align-items: center; gap: var(--bf-space-2); cursor: pointer; border: 1px solid var(--bf-color-border-strong); border-radius: var(--bf-radius-pill); padding: 6px var(--bf-space-3); font-size: var(--bf-text-sm); font-weight: 600; color: var(--bf-color-text-muted); background: var(--bf-color-surface); }
:is(.bf-home, .bf-om) .bf-om-rate__compopt input:checked + .bf-om-rate__compface { background: color-mix(in srgb, var(--bf-brand-primary) 14%, var(--bf-color-surface)); border-color: var(--bf-color-primary); color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-rate__compopt input:focus-visible + .bf-om-rate__compface { outline: 2px solid var(--bf-color-focus-ring); outline-offset: 2px; }

/* the rate-group money trail (Package -> rate group -> base rates -> HnJ engine) */
:is(.bf-home, .bf-om) .bf-om-rate__trail { border: 1px solid var(--bf-color-border); border-radius: var(--bf-radius-lg); background: var(--bf-color-surface); overflow: hidden; }
:is(.bf-home, .bf-om) .bf-om-rate__trailhead { display: flex; align-items: center; justify-content: space-between; gap: var(--bf-space-3); padding: var(--bf-space-3) var(--bf-space-4); background: var(--bf-color-surface-sunken); border-bottom: 1px solid var(--bf-color-border); }
:is(.bf-home, .bf-om) .bf-om-rate__trailtitle { font-family: var(--bf-font-display); font-weight: 700; font-size: var(--bf-text-sm); letter-spacing: 0.04em; text-transform: uppercase; color: var(--bf-color-text-muted); margin: 0; }
:is(.bf-home, .bf-om) .bf-om-rate__trailflow { display: flex; align-items: stretch; gap: var(--bf-space-1); flex-wrap: wrap; padding: var(--bf-space-3) var(--bf-space-4); }
:is(.bf-home, .bf-om) .bf-om-rate__trailstep { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
:is(.bf-home, .bf-om) .bf-om-rate__trailk { font-size: var(--bf-text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--bf-color-text-muted); font-weight: 700; }
:is(.bf-home, .bf-om) .bf-om-rate__trailv { font-weight: 700; font-size: var(--bf-text-sm); color: var(--bf-color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.bf-home, .bf-om) .bf-om-rate__trailv code { font-family: var(--bf-font-mono, monospace); font-size: 0.92em; background: color-mix(in srgb, var(--bf-brand-primary) 10%, var(--bf-color-surface)); border: 1px solid color-mix(in srgb, var(--bf-brand-primary) 30%, transparent); border-radius: var(--bf-radius-sm); padding: 1px 6px; }
:is(.bf-home, .bf-om) .bf-om-rate__trailarrow { align-self: center; color: var(--bf-color-primary-text); font-weight: 700; padding: 0 var(--bf-space-1); }

/* billable-element editor (unit / min units / min days repeatable rows) */
:is(.bf-home, .bf-om) .bf-om-rate__el { border: 1px solid var(--bf-color-border); border-radius: var(--bf-radius-md); overflow: hidden; }
:is(.bf-home, .bf-om) .bf-om-rate__elrow { display: grid; grid-template-columns: 1fr 7em 7em 2.5em; align-items: center; gap: var(--bf-space-3); padding: var(--bf-space-2) var(--bf-space-3); border-bottom: 1px solid var(--bf-color-border); }
:is(.bf-home, .bf-om) .bf-om-rate__elrow:last-child { border-bottom: 0; }
:is(.bf-home, .bf-om) .bf-om-rate__elrow--head { background: var(--bf-color-surface-sunken); font-size: var(--bf-text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--bf-color-text-muted); font-weight: 700; }
:is(.bf-home, .bf-om) .bf-om-rate__elrow.is-removed { opacity: 0.45; }
:is(.bf-home, .bf-om) .bf-om-rate__elx { cursor: pointer; border: 0; background: transparent; line-height: 1; color: var(--bf-color-text-muted); font-size: var(--bf-text-md); justify-self: center; padding: 4px; }
:is(.bf-home, .bf-om) .bf-om-rate__elx:hover { color: var(--bf-color-danger); }
:is(.bf-home, .bf-om) .bf-om-rate__elx:focus-visible { outline: 2px solid var(--bf-color-focus-ring); outline-offset: 1px; border-radius: var(--bf-radius-sm); }

/* base-rate wizard (full width; the legacy money table wrapped in the OM shell, kept verbatim) */
:is(.bf-home, .bf-om) .bf-om-rate__wizard { margin-top: var(--bf-space-2); }
:is(.bf-home, .bf-om) .bf-om-rate__wztable { border: 1px solid var(--bf-color-border); border-radius: var(--bf-radius-md); overflow-x: auto; margin-top: var(--bf-space-3); }
:is(.bf-home, .bf-om) .bf-om-rate__wztable table { width: 100%; border-collapse: collapse; }
:is(.bf-home, .bf-om) .bf-om-rate__wztable td, :is(.bf-home, .bf-om) .bf-om-rate__wztable th { padding: var(--bf-space-2) var(--bf-space-3); font-size: var(--bf-text-sm); text-align: left; vertical-align: middle; }
:is(.bf-home, .bf-om) .bf-om-rate__wztable input[type="text"] { max-width: 8em; }
:is(.bf-home, .bf-om) .bf-om-rate__wztitle { font-family: var(--bf-font-display); font-weight: 700; font-size: var(--bf-text-lg); margin: var(--bf-space-3) 0; }

/* base-rate tier grid (W33 setup_rate_groups): the placead_base_rates row shape as an editable table */
:is(.bf-home, .bf-om) .bf-om-rate__grid { border: 1px solid var(--bf-color-border); border-radius: var(--bf-radius-md); overflow-x: auto; }
:is(.bf-home, .bf-om) .bf-om-rate__grid table { width: 100%; border-collapse: collapse; min-width: 560px; }
:is(.bf-home, .bf-om) .bf-om-rate__grid th, :is(.bf-home, .bf-om) .bf-om-rate__grid td { padding: var(--bf-space-2) var(--bf-space-2); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--bf-color-border); }
:is(.bf-home, .bf-om) .bf-om-rate__grid thead th { background: var(--bf-color-surface-sunken); font-size: var(--bf-text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--bf-color-text-muted); font-weight: 700; white-space: nowrap; }
:is(.bf-home, .bf-om) .bf-om-rate__grid tbody tr:last-child td { border-bottom: 0; }
:is(.bf-home, .bf-om) .bf-om-rate__gridrow--new { background: color-mix(in srgb, var(--bf-brand-primary) 5%, var(--bf-color-surface)); }
:is(.bf-home, .bf-om) .bf-om-rate__gridrow--removed td { opacity: 0.4; }
:is(.bf-home, .bf-om) .bf-om-rate__grid .bf-select { min-width: 5.5em; }
:is(.bf-home, .bf-om) .bf-om-rate__gridspan { display: flex; align-items: center; gap: 4px; }
:is(.bf-home, .bf-om) .bf-om-rate__gridspan .bf-input { width: 3.7em; min-width: 0; padding-left: 6px; padding-right: 4px; }
:is(.bf-home, .bf-om) .bf-om-rate__gridspan span { color: var(--bf-color-text-muted); font-size: var(--bf-text-xs); }
:is(.bf-home, .bf-om) .bf-om-rate__gridamt { position: relative; }
:is(.bf-home, .bf-om) .bf-om-rate__gridamt::before { content: "$"; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: var(--bf-color-text-muted); font-size: var(--bf-text-sm); pointer-events: none; }
:is(.bf-home, .bf-om) .bf-om-rate__gridamt .bf-input { padding-left: 18px; text-align: right; width: 5.5em; }
:is(.bf-home, .bf-om) .bf-om-rate__gridx { cursor: pointer; border: 0; background: transparent; color: var(--bf-color-text-muted); font-size: var(--bf-text-md); padding: 4px; line-height: 1; }
:is(.bf-home, .bf-om) .bf-om-rate__gridx:hover { color: var(--bf-color-danger); }
:is(.bf-home, .bf-om) .bf-om-rate__gridx:focus-visible { outline: 2px solid var(--bf-color-focus-ring); outline-offset: 1px; border-radius: var(--bf-radius-sm); }
:is(.bf-home, .bf-om) .bf-om-rate__tiernote { display: flex; align-items: center; gap: var(--bf-space-2); margin-top: var(--bf-space-3); font-size: var(--bf-text-xs); color: var(--bf-color-text-muted); }
:is(.bf-home, .bf-om) .bf-om-rate__tiertools { display: flex; align-items: center; gap: var(--bf-space-3); flex-wrap: wrap; margin-top: var(--bf-space-4); }
:is(.bf-home, .bf-om) .bf-om-rate__tiertools-spacer { flex: 1; }
:is(.bf-home, .bf-om) .bf-om-rate__pkgs { display: flex; align-items: center; gap: var(--bf-space-2); flex-wrap: wrap; }
:is(.bf-home, .bf-om) .bf-om-rate__pkg { display: inline-flex; align-items: center; gap: 6px; font-size: var(--bf-text-xs); font-weight: 600; padding: 4px var(--bf-space-3); border-radius: var(--bf-radius-pill); border: 1px solid var(--bf-color-border-strong); background: var(--bf-color-surface); color: var(--bf-color-text-muted); }
:is(.bf-home, .bf-om) .bf-om-rate__pkg .fa { color: var(--bf-color-primary-text); }

/* the element grid + tabs collapse gracefully on narrow admin viewports */
@media (max-width: 620px) {
  :is(.bf-home, .bf-om) .bf-om-rate__elrow { grid-template-columns: 1fr 5em 5em 2em; gap: var(--bf-space-2); }
  :is(.bf-home, .bf-om) .bf-om-rate__tabs { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: no-preference) {
  :is(.bf-home, .bf-om) .bf-om-rate__tab, :is(.bf-home, .bf-om) .bf-om-rate__compface { transition: border-color var(--bf-transition-fast), background var(--bf-transition-fast), color var(--bf-transition-fast); }
}


/* ==========================================================================
   W34 includes/setup/setup_storefront.php - "Web Site Config" brand cockpit
   (.bf-om-store). Page-scoped head (replaces the shared double-rule
   .bf-section-head on this page only) + a two-column brand cockpit (light
   control panel beside a dark instrument console: live storefront monitor,
   WCAG contrast gauges, color-coverage map, derived color-mix palette ramps)
   + a config dashboard (read-only version card, Global configuration and
   Portal constants cards). Built atop the shipped .bf-om-setup families.
   Token-driven only; the console recolors through --bf-om-store-p /
   --bf-om-store-s, defaulting to the --bf-brand-* tokens and driven live by
   the two color inputs. No hard-coded brand hex; reduced-motion gated.
   ========================================================================== */

    .bf-om-store {
      /* utility "instrument" face for readouts, hex, ratios, ramp labels */
      --bf-om-store-mono: ui-monospace, "SF Mono", "SFMono-Regular", "Roboto Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
      /* neutral console housing derived from the text token (never the live brand) */
      --bf-om-store-ink-900: color-mix(in srgb, var(--bf-color-text) 82%, black);
      --bf-om-store-ink-800: color-mix(in srgb, var(--bf-color-text) 90%, black);
      --bf-om-store-hair: color-mix(in srgb, #ffffff 13%, transparent);
      --bf-om-store-hair-soft: color-mix(in srgb, #ffffff 8%, transparent);
      --bf-om-store-on-dark: #ffffff;
      --bf-om-store-on-dark-dim: color-mix(in srgb, #ffffff 62%, transparent);
      --bf-om-store-on-dark-faint: color-mix(in srgb, #ffffff 40%, transparent);
    }

    /* ================= COCKPIT ================= */
    .bf-om-store-cockpit { --bf-om-store-p: var(--bf-brand-primary); --bf-om-store-s: var(--bf-brand-secondary);
      margin-bottom: var(--bf-space-6); }
    .bf-om-store-cockpit__grid { display: grid; grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.3fr);
      gap: var(--bf-space-5); align-items: stretch; }

    /* ---- left: control panel ---- */
    .bf-om-store-panel-ctl { border: 1px solid var(--bf-color-border); border-radius: var(--bf-radius-xl);
      background: var(--bf-color-surface); box-shadow: var(--bf-shadow-sm);
      padding: var(--bf-space-5); display: flex; flex-direction: column; gap: var(--bf-space-4); }
    .bf-om-store-panel-ctl__kicker { font-family: var(--bf-om-store-mono); font-size: var(--bf-text-xs);
      letter-spacing: 0.14em; text-transform: uppercase; color: var(--bf-color-primary-text);
      font-weight: 700; margin: 0; }
    .bf-om-store-panel-ctl__title { font-family: var(--bf-font-display); font-weight: 800;
      font-size: var(--bf-text-2xl); letter-spacing: -0.01em; margin: var(--bf-space-1) 0 0; }
    .bf-om-store-panel-ctl__lede { color: var(--bf-color-text-muted); font-size: var(--bf-text-sm);
      margin: calc(var(--bf-space-2) * -1) 0 var(--bf-space-2); }

    .bf-om-store-ctl { display: flex; flex-direction: column; gap: var(--bf-space-2); }
    .bf-om-store-ctl__label { font-family: var(--bf-font-display); font-weight: 700;
      font-size: var(--bf-text-sm); display: flex; align-items: center; gap: var(--bf-space-2); }
    .bf-om-store-ctl__tokchip { font-family: var(--bf-om-store-mono); font-size: 10px; font-weight: 600;
      letter-spacing: 0.02em; color: var(--bf-color-text-muted); background: var(--bf-color-surface-sunken);
      border-radius: var(--bf-radius-sm); padding: 1px 6px; }
    .bf-om-store-ctl__row { display: flex; align-items: center; gap: var(--bf-space-3); }
    .bf-om-store-ctl__pick { -webkit-appearance: none; appearance: none; width: 54px; height: 54px;
      flex: 0 0 auto; padding: 5px; border: 1px solid var(--bf-color-border-strong);
      border-radius: var(--bf-radius-md); background: var(--bf-color-surface); cursor: pointer;
      box-shadow: var(--bf-shadow-sm); }
    .bf-om-store-ctl__pick::-webkit-color-swatch-wrapper { padding: 0; }
    .bf-om-store-ctl__pick::-webkit-color-swatch { border: none; border-radius: var(--bf-radius-sm); }
    .bf-om-store-ctl__pick::-moz-color-swatch { border: none; border-radius: var(--bf-radius-sm); }
    .bf-om-store-ctl__pick:focus-visible { outline: 2px solid var(--bf-color-focus-ring); outline-offset: 2px; }
    .bf-om-store-ctl__hex { flex: 1 1 auto; min-width: 0; font-family: var(--bf-om-store-mono);
      letter-spacing: 0.04em; text-transform: uppercase; }

    .bf-om-store-ctl__actions { display: flex; align-items: center; gap: var(--bf-space-3);
      flex-wrap: wrap; margin-top: auto; padding-top: var(--bf-space-2); }
    .bf-om-store-ctl__note { font-size: var(--bf-text-xs); color: var(--bf-color-text-muted);
      margin: 0; display: inline-flex; align-items: center; gap: var(--bf-space-2); }
    .bf-om-store-ctl__note .fa { color: var(--bf-color-primary-text); }

    /* ---- right: dark instrument console ---- */
    .bf-om-store-console { border-radius: var(--bf-radius-xl); overflow: hidden;
      background: var(--bf-om-store-ink-900); color: var(--bf-om-store-on-dark);
      border: 1px solid var(--bf-om-store-ink-800); box-shadow: var(--bf-shadow-lg);
      display: flex; flex-direction: column; }
    .bf-om-store-console__bar { display: flex; align-items: center; justify-content: space-between;
      gap: var(--bf-space-4); padding: var(--bf-space-3) var(--bf-space-4);
      border-bottom: 1px solid var(--bf-om-store-hair);
      background: linear-gradient(180deg, color-mix(in srgb, #ffffff 4%, transparent), transparent); }
    .bf-om-store-live { display: inline-flex; align-items: center; gap: var(--bf-space-2);
      font-family: var(--bf-om-store-mono); font-size: var(--bf-text-xs); letter-spacing: 0.14em;
      text-transform: uppercase; font-weight: 700; color: var(--bf-om-store-on-dark); }
    .bf-om-store-live__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bf-om-store-p);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--bf-om-store-p) 32%, transparent); flex: 0 0 auto; }
    .bf-om-store-console__hexes { display: inline-flex; gap: var(--bf-space-2); }
    .bf-om-store-hexchip { display: inline-flex; align-items: center; gap: var(--bf-space-2);
      font-family: var(--bf-om-store-mono); font-size: var(--bf-text-xs); font-weight: 600;
      letter-spacing: 0.03em; color: var(--bf-om-store-on-dark-dim); padding: 3px var(--bf-space-2);
      border: 1px solid var(--bf-om-store-hair); border-radius: var(--bf-radius-pill); }
    .bf-om-store-hexchip__sw { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto;
      box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 26%, transparent); }
    .bf-om-store-hexchip__sw--p { background: var(--bf-om-store-p); }
    .bf-om-store-hexchip__sw--s { background: var(--bf-om-store-s); }

    .bf-om-store-console__body { padding: var(--bf-space-4); display: flex; flex-direction: column;
      gap: var(--bf-space-4); }

    /* the monitor: a lit storefront screen inside the console */
    .bf-om-store-monitor { position: relative; border-radius: var(--bf-radius-lg);
      padding: var(--bf-space-2); background: color-mix(in srgb, #000000 30%, transparent);
      box-shadow: inset 0 0 0 1px var(--bf-om-store-hair), 0 10px 30px rgba(0, 0, 0, 0.35); }
    .bf-om-store-monitor__tag { position: absolute; top: calc(var(--bf-space-2) + 6px);
      right: calc(var(--bf-space-2) + 8px); z-index: 2; font-family: var(--bf-om-store-mono);
      font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
      color: var(--bf-om-store-on-dark-faint); }

    .bf-om-store-shop { --bf-om-store-p: var(--bf-om-store-p); border-radius: var(--bf-radius-md); overflow: hidden;
      background: var(--bf-color-surface); display: flex; flex-direction: column; }
    .bf-om-store-shop__bar { display: flex; align-items: center; gap: var(--bf-space-3);
      padding: var(--bf-space-2) var(--bf-space-3); background: var(--bf-om-store-s);
      color: var(--bf-brand-primary-ink); }
    .bf-om-store-shop__mark { font-family: var(--bf-font-display); font-weight: 700;
      font-size: var(--bf-text-base); letter-spacing: -0.01em; }
    .bf-om-store-shop__mark b { color: var(--bf-om-store-p); font-weight: 800; }
    .bf-om-store-shop__nav { display: flex; align-items: center; gap: var(--bf-space-3);
      margin-left: auto; font-size: 11px; font-weight: 600; }
    .bf-om-store-shop__navlink { color: color-mix(in srgb, var(--bf-brand-primary-ink) 78%, transparent); }
    .bf-om-store-shop__cta { padding: 4px var(--bf-space-3); border-radius: var(--bf-radius-pill);
      background: var(--bf-om-store-p); color: var(--bf-brand-primary-ink); font-weight: 700; }
    .bf-om-store-shop__stage { padding: var(--bf-space-3); display: flex; gap: var(--bf-space-3);
      align-items: center; background: var(--bf-color-surface-sunken); }
    .bf-om-store-shop__thumb { flex: 0 0 64px; height: 64px; border-radius: var(--bf-radius-sm);
      background: color-mix(in srgb, var(--bf-om-store-p) 16%, var(--bf-color-surface));
      display: grid; place-items: center;
      color: color-mix(in srgb, var(--bf-om-store-p) 72%, var(--bf-color-text-muted)); }
    .bf-om-store-shop__thumb .fa { font-size: var(--bf-text-xl); }
    .bf-om-store-shop__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .bf-om-store-shop__tag { align-self: flex-start; font-size: 9px; font-weight: 800;
      letter-spacing: 0.08em; text-transform: uppercase; padding: 2px var(--bf-space-2);
      border-radius: var(--bf-radius-pill); color: var(--bf-om-store-p);
      background: color-mix(in srgb, var(--bf-om-store-p) 14%, var(--bf-color-surface)); }
    .bf-om-store-shop__title { font-family: var(--bf-font-display); font-weight: 700;
      font-size: var(--bf-text-sm); color: var(--bf-color-text); margin: 2px 0 0; }
    .bf-om-store-shop__row { display: flex; align-items: baseline; gap: var(--bf-space-2); }
    .bf-om-store-shop__price { font-weight: 700; color: var(--bf-color-text); margin: 0; font-size: var(--bf-text-sm); }
    .bf-om-store-shop__link { color: color-mix(in srgb, var(--bf-om-store-p) 82%, black); font-weight: 700;
      font-size: 11px; text-decoration: underline; text-underline-offset: 2px; }

    /* telemetry area */
    .bf-om-store-tele { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: var(--bf-space-4); }
    .bf-om-store-tele__label { display: flex; align-items: baseline; gap: var(--bf-space-2);
      font-family: var(--bf-om-store-mono); font-size: 11px; letter-spacing: 0.12em;
      text-transform: uppercase; font-weight: 700; color: var(--bf-om-store-on-dark-dim);
      margin: 0 0 var(--bf-space-3); }
    .bf-om-store-tele__sub { font-family: var(--bf-font-body); letter-spacing: 0; text-transform: none;
      font-size: var(--bf-text-xs); font-weight: 500; color: var(--bf-om-store-on-dark-faint); }

    /* contrast gauges */
    .bf-om-store-gauges { display: flex; flex-direction: column; gap: var(--bf-space-3); }
    .bf-om-store-gauge { border: 1px solid var(--bf-om-store-hair); border-radius: var(--bf-radius-md);
      background: color-mix(in srgb, #ffffff 4%, transparent); padding: var(--bf-space-3);
      display: flex; flex-direction: column; gap: var(--bf-space-2); }
    .bf-om-store-gauge__head { display: flex; align-items: center; justify-content: space-between;
      gap: var(--bf-space-2); }
    .bf-om-store-gauge__name { font-size: var(--bf-text-xs); font-weight: 600; color: var(--bf-om-store-on-dark-dim); }
    .bf-om-store-gauge__badge { font-family: var(--bf-om-store-mono); font-size: 10px; font-weight: 700;
      letter-spacing: 0.08em; text-transform: uppercase; padding: 2px var(--bf-space-2);
      border-radius: var(--bf-radius-pill); border: 1px solid transparent; white-space: nowrap; }
    .bf-om-store-gauge[data-pass="true"] .bf-om-store-gauge__badge { color: color-mix(in srgb, var(--bf-color-success) 42%, white);
      background: color-mix(in srgb, var(--bf-color-success) 16%, transparent);
      border-color: color-mix(in srgb, var(--bf-color-success) 40%, transparent); }
    .bf-om-store-gauge[data-pass="false"] .bf-om-store-gauge__badge { color: color-mix(in srgb, var(--bf-color-warning) 60%, white);
      background: color-mix(in srgb, var(--bf-color-warning) 18%, transparent);
      border-color: color-mix(in srgb, var(--bf-color-warning) 48%, transparent); }
    .bf-om-store-gauge__body { display: flex; align-items: center; gap: var(--bf-space-3); }
    .bf-om-store-gauge__sample { flex: 0 0 auto; width: 44px; height: 40px; border-radius: var(--bf-radius-sm);
      display: grid; place-items: center; font-family: var(--bf-font-display); font-weight: 800;
      font-size: var(--bf-text-lg); box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 22%, transparent); }
    .bf-om-store-gauge__sample--p { background: var(--bf-om-store-p); color: var(--bf-brand-primary-ink); }
    .bf-om-store-gauge__sample--s { background: #ffffff; color: var(--bf-om-store-s); }
    .bf-om-store-gauge__readout { flex: 1 1 auto; min-width: 0; }
    .bf-om-store-gauge__ratio { font-family: var(--bf-om-store-mono); font-size: var(--bf-text-xl); font-weight: 700;
      color: var(--bf-om-store-on-dark); font-variant-numeric: tabular-nums; line-height: 1; }
    .bf-om-store-gauge__unit { font-size: var(--bf-text-sm); color: var(--bf-om-store-on-dark-faint); font-weight: 600; }
    .bf-om-store-meter { position: relative; height: 6px; border-radius: var(--bf-radius-pill);
      background: color-mix(in srgb, #ffffff 12%, transparent); margin-top: var(--bf-space-2);
      overflow: hidden; }
    .bf-om-store-meter__fill { position: absolute; inset: 0 auto 0 0; width: 0%; border-radius: var(--bf-radius-pill); }
    .bf-om-store-gauge[data-pass="true"] .bf-om-store-meter__fill { background: var(--bf-color-success); }
    .bf-om-store-gauge[data-pass="false"] .bf-om-store-meter__fill { background: var(--bf-color-warning); }
    .bf-om-store-meter__thr { position: absolute; top: -2px; bottom: -2px; left: 21.4%; width: 2px;
      background: color-mix(in srgb, #ffffff 65%, transparent); border-radius: 2px; }
    .bf-om-store-meter__thrlab { display: block; font-family: var(--bf-om-store-mono); font-size: 9px;
      color: var(--bf-om-store-on-dark-faint); margin-top: 3px; }

    /* coverage map */
    .bf-om-store-cover { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
      gap: var(--bf-space-2); align-content: flex-start; }
    .bf-om-store-cover__chip { display: inline-flex; align-items: center; gap: var(--bf-space-2);
      font-size: var(--bf-text-xs); font-weight: 600; color: var(--bf-om-store-on-dark-dim);
      padding: 5px var(--bf-space-3) 5px 6px; border: 1px solid var(--bf-om-store-hair);
      border-radius: var(--bf-radius-pill); background: color-mix(in srgb, #ffffff 4%, transparent); }
    .bf-om-store-cover__sw { width: 16px; height: 16px; border-radius: 4px; flex: 0 0 auto;
      box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 26%, transparent); }
    .bf-om-store-cover__sw--header, .bf-om-store-cover__sw--footer { background: var(--bf-om-store-s); }
    .bf-om-store-cover__sw--btn { background: var(--bf-om-store-p); }
    .bf-om-store-cover__sw--link { background: color-mix(in srgb, var(--bf-om-store-p) 82%, black); }
    .bf-om-store-cover__sw--tag { background: color-mix(in srgb, var(--bf-om-store-p) 22%, white); }
    .bf-om-store-cover__note { font-size: 11px; color: var(--bf-om-store-on-dark-faint); margin: var(--bf-space-3) 0 0; }

    /* derived palette ramps */
    .bf-om-store-palette { border-top: 1px solid var(--bf-om-store-hair); padding-top: var(--bf-space-4);
      display: flex; flex-direction: column; gap: var(--bf-space-3); }
    .bf-om-store-ramp { display: grid; grid-template-columns: 78px minmax(0, 1fr); align-items: center;
      gap: var(--bf-space-3); }
    .bf-om-store-ramp__name { font-family: var(--bf-om-store-mono); font-size: 11px; font-weight: 700;
      letter-spacing: 0.08em; text-transform: uppercase; color: var(--bf-om-store-on-dark-dim); }
    .bf-om-store-ramp__steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--bf-space-2); }
    .bf-om-store-ramp__step { display: flex; flex-direction: column; gap: 4px; }
    .bf-om-store-ramp__step i { display: block; height: 30px; border-radius: var(--bf-radius-sm);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 20%, transparent); }
    .bf-om-store-ramp__step b { font-family: var(--bf-om-store-mono); font-size: 10px; font-weight: 600;
      color: var(--bf-om-store-on-dark-faint); text-align: center; font-variant-numeric: tabular-nums; }
    .bf-om-store-ramp__step--p1 i { background: color-mix(in srgb, var(--bf-om-store-p) 12%, white); }
    .bf-om-store-ramp__step--p2 i { background: color-mix(in srgb, var(--bf-om-store-p) 40%, white); }
    .bf-om-store-ramp__step--p3 i { background: var(--bf-om-store-p); }
    .bf-om-store-ramp__step--p4 i { background: color-mix(in srgb, var(--bf-om-store-p) 72%, black); }
    .bf-om-store-ramp__step--p5 i { background: color-mix(in srgb, var(--bf-om-store-p) 48%, black); }
    .bf-om-store-ramp__step--s1 i { background: color-mix(in srgb, var(--bf-om-store-s) 12%, white); }
    .bf-om-store-ramp__step--s2 i { background: color-mix(in srgb, var(--bf-om-store-s) 40%, white); }
    .bf-om-store-ramp__step--s3 i { background: var(--bf-om-store-s); }
    .bf-om-store-ramp__step--s4 i { background: color-mix(in srgb, var(--bf-om-store-s) 72%, black); }
    .bf-om-store-ramp__step--s5 i { background: color-mix(in srgb, var(--bf-om-store-s) 60%, black); }

    /* ================= CONFIG DASHBOARD ================= */
    .bf-om-store-subhead { margin: 0 0 var(--bf-space-4); }
    .bf-om-store-subhead__kicker { font-family: var(--bf-om-store-mono); font-size: var(--bf-text-xs);
      letter-spacing: 0.14em; text-transform: uppercase; color: var(--bf-color-primary-text);
      font-weight: 700; margin: 0 0 var(--bf-space-1); }
    .bf-om-store-subhead__title { font-family: var(--bf-font-display); font-weight: 800;
      font-size: var(--bf-text-2xl); letter-spacing: -0.01em; margin: 0; }

    .bf-om-store-dash__grid { display: grid; grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.6fr);
      gap: var(--bf-space-5); align-items: start; }
    .bf-om-store-status-col { display: flex; flex-direction: column; gap: var(--bf-space-4); }

    /* read-only version card */
    .bf-om-store-vcard { border: 1px solid var(--bf-color-border); border-radius: var(--bf-radius-lg);
      background: var(--bf-color-surface); box-shadow: var(--bf-shadow-sm); padding: var(--bf-space-4); }
    .bf-om-store-vcard__k { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
      font-weight: 700; color: var(--bf-color-text-muted); margin: 0 0 var(--bf-space-3);
      display: inline-flex; align-items: center; gap: var(--bf-space-2); }
    .bf-om-store-vcard__k .fa { color: var(--bf-color-primary-text); }
    .bf-om-store-vcard__list { margin: 0; display: flex; flex-direction: column; gap: var(--bf-space-2); }
    .bf-om-store-vcard__list > div { display: flex; align-items: baseline; justify-content: space-between;
      gap: var(--bf-space-3); padding-bottom: var(--bf-space-2); border-bottom: 1px solid var(--bf-color-border); }
    .bf-om-store-vcard__list > div:last-child { border-bottom: 0; padding-bottom: 0; }
    .bf-om-store-vcard__list dt { font-size: var(--bf-text-sm); color: var(--bf-color-text-muted); margin: 0; }
    .bf-om-store-vcard__list dd { font-family: var(--bf-om-store-mono); font-size: var(--bf-text-sm); font-weight: 700;
      color: var(--bf-color-text); margin: 0; font-variant-numeric: tabular-nums; }
    .bf-om-store-vcard__toggle { appearance: none; cursor: pointer; margin-top: var(--bf-space-3);
      display: inline-flex; align-items: center; gap: var(--bf-space-2); width: 100%;
      justify-content: center; border: 1px solid var(--bf-color-border); background: var(--bf-color-surface);
      color: var(--bf-color-text-muted); border-radius: var(--bf-radius-md);
      font-size: var(--bf-text-xs); font-weight: 700; padding: 6px var(--bf-space-3); }
    .bf-om-store-vcard__toggle:hover { border-color: var(--bf-color-border-strong); color: var(--bf-color-text); }
    .bf-om-store-vcard__toggle:focus-visible { outline: 2px solid var(--bf-color-primary); outline-offset: 2px; }
    .bf-om-store-changelog { margin-top: var(--bf-space-3); border: 1px solid var(--bf-color-border);
      border-radius: var(--bf-radius-md); background: var(--bf-color-surface-alt);
      max-height: 170px; overflow-y: auto; }
    .bf-om-store-changelog[hidden] { display: none; }
    .bf-om-store-changelog__row { display: flex; gap: var(--bf-space-3); padding: var(--bf-space-2) var(--bf-space-3);
      border-bottom: 1px solid var(--bf-color-border); font-size: var(--bf-text-xs); }
    .bf-om-store-changelog__row:last-child { border-bottom: 0; }
    .bf-om-store-changelog__d { flex: 0 0 76px; font-family: var(--bf-om-store-mono); font-variant-numeric: tabular-nums;
      font-weight: 700; color: var(--bf-color-text-muted); }
    .bf-om-store-changelog__t { color: var(--bf-color-text); }


    /* config cards */
    .bf-om-store-config-col { display: flex; flex-direction: column; gap: var(--bf-space-4); }
    .bf-om-store-cfgcard { border: 1px solid var(--bf-color-border); border-radius: var(--bf-radius-lg);
      background: var(--bf-color-surface); box-shadow: var(--bf-shadow-sm); overflow: hidden; }
    .bf-om-store-cfgcard__head { display: flex; align-items: center; gap: var(--bf-space-3);
      padding: var(--bf-space-4); border-bottom: 1px solid var(--bf-color-border);
      background: linear-gradient(180deg, var(--bf-color-surface-alt), var(--bf-color-surface)); }
    .bf-om-store-cfgcard__ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--bf-radius-md);
      display: grid; place-items: center; color: var(--bf-color-primary-text);
      background: color-mix(in srgb, var(--bf-color-primary) 12%, var(--bf-color-surface));
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bf-color-primary) 24%, transparent); }
    .bf-om-store-cfgcard__titles { flex: 1 1 auto; min-width: 0; }
    .bf-om-store-cfgcard__titles h3 { font-family: var(--bf-font-display); font-weight: 700;
      font-size: var(--bf-text-lg); margin: 0; }
    .bf-om-store-cfgcard__titles p { font-size: var(--bf-text-xs); color: var(--bf-color-text-muted); margin: 2px 0 0; }
    .bf-om-store-cfgcard__count { flex: 0 0 auto; font-family: var(--bf-om-store-mono); font-size: var(--bf-text-xs);
      font-weight: 700; color: var(--bf-color-text-muted); padding: 4px var(--bf-space-3);
      border: 1px solid var(--bf-color-border); border-radius: var(--bf-radius-pill);
      background: var(--bf-color-surface); white-space: nowrap; }
    .bf-om-store-cfgcard__body { padding: var(--bf-space-4); display: flex; flex-direction: column;
      gap: var(--bf-space-4); }

    .bf-om-store-field { display: flex; flex-direction: column; gap: var(--bf-space-2); }
    .bf-om-store-field > label { font-family: var(--bf-font-display); font-weight: 700;
      font-size: var(--bf-text-sm); }
    .bf-om-store-field__hint { font-size: var(--bf-text-xs); color: var(--bf-color-text-muted); margin: 0; }
    .bf-om-store-cfg-desc { font-size: var(--bf-text-sm); color: var(--bf-color-text-muted);
      margin: 0; padding: var(--bf-space-3); border-left: 3px solid var(--bf-color-border-strong);
      background: var(--bf-color-surface-alt); border-radius: 0 var(--bf-radius-sm) var(--bf-radius-sm) 0; }
    .bf-om-store-cfg-desc code, .bf-om-store-field__hint code { font-family: var(--bf-om-store-mono); font-size: 0.92em;
      background: var(--bf-color-surface-sunken); padding: 1px 5px; border-radius: var(--bf-radius-sm); }

    .bf-om-store-textarea { width: 100%; min-height: 116px; resize: vertical; font-family: var(--bf-font-body);
      font-size: var(--bf-text-sm); line-height: var(--bf-leading-normal); padding: var(--bf-space-3);
      border: 1px solid var(--bf-color-border); border-radius: var(--bf-radius-md);
      background: var(--bf-color-surface); color: var(--bf-color-text); }
    .bf-om-store-textarea:focus-visible { outline: 2px solid var(--bf-color-focus-ring); outline-offset: 1px;
      border-color: var(--bf-color-primary); }

    .bf-om-store-addkey { border: 1px dashed var(--bf-color-primary);
      background: color-mix(in srgb, var(--bf-brand-primary) 5%, var(--bf-color-surface));
      border-radius: var(--bf-radius-md); padding: var(--bf-space-3); }
    .bf-om-store-addkey[hidden] { display: none; }

    .bf-om-store-flag { display: flex; gap: var(--bf-space-3); padding: var(--bf-space-3);
      border: 1px solid var(--bf-color-border); border-radius: var(--bf-radius-md);
      background: var(--bf-color-surface-alt); align-items: flex-start; }
    .bf-om-store-flag.is-on { border-color: color-mix(in srgb, var(--bf-color-info) 55%, transparent);
      background: color-mix(in srgb, var(--bf-color-info) 10%, var(--bf-color-surface)); }
    .bf-om-store-flag__ico { color: var(--bf-color-info); margin-top: 2px; flex: 0 0 auto; }
    .bf-om-store-flag__body { font-size: var(--bf-text-sm); }
    .bf-om-store-flag__body strong { font-weight: 700; }
    .bf-om-store-flag__hint { display: block; font-size: var(--bf-text-xs); color: var(--bf-color-text-muted);
      margin-top: 2px; font-weight: 400; }

    .bf-om-store-cfgcard__actions { display: flex; align-items: center; gap: var(--bf-space-3); flex-wrap: wrap; }
    .bf-om-store-cfgcard__actions .bf-om-store-spacer { flex: 1 1 auto; }

    /* ---- responsive ---- */
    @media (max-width: 1040px) {
      .bf-om-store-cockpit__grid { grid-template-columns: minmax(0, 1fr); }
      .bf-om-store-dash__grid { grid-template-columns: minmax(0, 1fr); }
    }
    @media (max-width: 720px) {
      .bf-om-store-tele { grid-template-columns: minmax(0, 1fr); }
      .bf-om-store-ramp { grid-template-columns: minmax(0, 1fr); gap: var(--bf-space-2); }
    }

    @media (prefers-reduced-motion: no-preference) {
      .bf-om-store-vcard__toggle { transition: color var(--bf-transition-fast), border-color var(--bf-transition-fast); }
      .bf-om-store-meter__fill { transition: width var(--bf-transition-slow), background var(--bf-transition-base); }
      .bf-om-store-gauge__badge, .bf-om-store-gauge__ratio { transition: color var(--bf-transition-base), background var(--bf-transition-base); }
      .bf-om-store-shop__bar, .bf-om-store-shop__cta, .bf-om-store-shop__link, .bf-om-store-shop__mark b, .bf-om-store-shop__tag,
      .bf-om-store-shop__thumb, .bf-om-store-hexchip__sw, .bf-om-store-cover__sw, .bf-om-store-gauge__sample,
      .bf-om-store-ramp__step i, .bf-om-store-live__dot { transition: background var(--bf-transition-base), color var(--bf-transition-base), box-shadow var(--bf-transition-base); }
      .bf-om-store-live__dot { animation: bf-om-store-pulse 2.4s ease-in-out infinite; }
      @keyframes bf-om-store-pulse {
        0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bf-om-store-p) 32%, transparent); }
        50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--bf-om-store-p) 8%, transparent); }
      }
    }

/* ==========================================================================
   W35 includes/setup/setup_composition.php - Composition & Templates studio
   (.bf-om-comp) + the reusable page head (.bf-om-pagehead), promoted out of the
   page-scoped .bf-om-store-head so every setup page shares one masthead.
   Three-zone studio: a light typography-primitives palette + a center element
   grid / inline editor beside a dark instrument console (live HnJ/SOAP proof,
   glowing mono readouts, Property Sets inspector). The dark console housing is
   color-mix over var(--bf-brand-secondary); on-dark ink + hairlines are
   color-mix over var(--bf-brand-primary-ink), so the whole console recolors
   with the brand (black / white / transparent keywords are luminance anchors
   only). Token-driven, reduced-motion gated, scoped :is(.bf-home, .bf-om) to
   match the neighboring .bf-om-setup / .bf-om-rate families.
   ========================================================================== */

/* ---- the reusable page head (.bf-om-pagehead), generalized from .bf-om-store-head ---- */
:is(.bf-home, .bf-om) .bf-om-pagehead { display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--bf-space-5); flex-wrap: wrap; margin: var(--bf-space-2) 0 var(--bf-space-5); }
:is(.bf-home, .bf-om) .bf-om-pagehead__lead { min-width: 0; }
:is(.bf-home, .bf-om) .bf-om-pagehead__kicker { font-family: var(--bf-font-mono, monospace); font-size: var(--bf-text-xs);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--bf-color-primary-text);
  font-weight: 700; margin: 0 0 var(--bf-space-2); display: inline-flex; align-items: center;
  gap: var(--bf-space-2); }
:is(.bf-home, .bf-om) .bf-om-pagehead__kicker::before { content: ""; width: 22px; height: 2px; border-radius: 2px;
  background: var(--bf-color-primary); display: inline-block; }
:is(.bf-home, .bf-om) .bf-om-pagehead__title { font-family: var(--bf-font-display); font-weight: 800;
  font-size: var(--bf-text-3xl); line-height: var(--bf-leading-tight); letter-spacing: -0.02em;
  margin: 0; position: relative; padding-bottom: var(--bf-space-3); }
:is(.bf-home, .bf-om) .bf-om-pagehead__title::after { content: ""; position: absolute; left: 0; bottom: 0;
  width: 64px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--bf-color-primary), color-mix(in srgb, var(--bf-color-primary) 30%, transparent)); }
:is(.bf-home, .bf-om) .bf-om-pagehead__sub { margin: var(--bf-space-3) 0 0; color: var(--bf-color-text-muted);
  font-size: var(--bf-text-sm); max-width: 52ch; }
:is(.bf-home, .bf-om) .bf-om-pagehead__status { display: flex; gap: var(--bf-space-4); align-items: stretch; flex-wrap: wrap;
  padding: var(--bf-space-3) var(--bf-space-4); border: 1px solid var(--bf-color-border);
  border-radius: var(--bf-radius-lg); background: var(--bf-color-surface); box-shadow: var(--bf-shadow-sm); }
:is(.bf-home, .bf-om) .bf-om-pagehead__stat { display: flex; flex-direction: column; gap: 2px; }
:is(.bf-home, .bf-om) .bf-om-pagehead__stat + .bf-om-pagehead__stat { padding-left: var(--bf-space-4);
  border-left: 1px solid var(--bf-color-border); }
:is(.bf-home, .bf-om) .bf-om-pagehead__statk { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; color: var(--bf-color-text-muted); }
:is(.bf-home, .bf-om) .bf-om-pagehead__statv { font-family: var(--bf-font-mono, monospace); font-size: var(--bf-text-base);
  font-weight: 700; color: var(--bf-color-text); font-variant-numeric: tabular-nums; }
:is(.bf-home, .bf-om) .bf-om-pagehead__statv .fa { color: var(--bf-color-success); font-size: var(--bf-text-sm); }

/* ===================== compact data-flow legend ===================== */
:is(.bf-home, .bf-om) .comp-flow { display: flex; align-items: center; gap: var(--bf-space-2); flex-wrap: wrap;
  margin: 0 0 var(--bf-space-4); padding: var(--bf-space-2) var(--bf-space-3);
  border: 1px solid var(--bf-color-border); border-radius: var(--bf-radius-pill);
  background: var(--bf-color-surface); width: fit-content; max-width: 100%; }
:is(.bf-home, .bf-om) .comp-flow__lab { font-size: var(--bf-text-xs); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--bf-color-text-muted); }
:is(.bf-home, .bf-om) .comp-flow__node { display: inline-flex; align-items: center; gap: 6px; font-family: var(--bf-font-display);
  font-weight: 700; font-size: var(--bf-text-sm); color: var(--bf-color-text);
  padding: 3px var(--bf-space-2); border-radius: var(--bf-radius-pill);
  background: color-mix(in srgb, var(--bf-brand-primary) 10%, var(--bf-color-surface)); }
:is(.bf-home, .bf-om) .comp-flow__node .fa { color: var(--bf-color-primary-text); }
:is(.bf-home, .bf-om) .comp-flow__node.is-out { background: color-mix(in srgb, var(--bf-brand-secondary) 92%, black);
  color: var(--bf-brand-primary-ink); }
:is(.bf-home, .bf-om) .comp-flow__node.is-out .fa { color: var(--bf-color-primary); }
:is(.bf-home, .bf-om) .comp-flow__arrow { color: var(--bf-color-primary-text); font-weight: 700; }

/* ===================== the three-zone grid ===================== */
:is(.bf-home, .bf-om) .bf-om-comp { display: grid; align-items: start; gap: var(--bf-space-4);
  grid-template-columns: minmax(244px, 296px) minmax(0, 1fr); }
@media (max-width: 820px) {
  :is(.bf-home, .bf-om) .bf-om-comp { grid-template-columns: 1fr; }
}
:is(.bf-home, .bf-om) .bf-om-comp__zone { position: relative; min-width: 0; }
:is(.bf-home, .bf-om) .bf-om-comp__feeds { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 var(--bf-space-2);
  font-size: var(--bf-text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--bf-color-primary-text); }
:is(.bf-home, .bf-om) .bf-om-comp__feeds .fa { font-size: var(--bf-text-sm); }

/* ---- LEFT: typography primitives palette (light) ---- */
:is(.bf-home, .bf-om) .bf-om-comp__palette { display: flex; flex-direction: column; gap: var(--bf-space-3); }
:is(.bf-home, .bf-om) .bf-om-comp__prim { border: 1px solid var(--bf-color-border); border-radius: var(--bf-radius-lg);
  background: var(--bf-color-surface); overflow: hidden; box-shadow: var(--bf-shadow-sm); }
:is(.bf-home, .bf-om) .bf-om-comp__primhd { display: flex; align-items: center; gap: var(--bf-space-2);
  padding: var(--bf-space-2) var(--bf-space-3); background: var(--bf-color-surface-sunken);
  border-bottom: 1px solid var(--bf-color-border); }
:is(.bf-home, .bf-om) .bf-om-comp__primhd .fa { color: var(--bf-color-primary-text); }
:is(.bf-home, .bf-om) .bf-om-comp__primttl { font-family: var(--bf-font-display); font-weight: 700; font-size: var(--bf-text-sm);
  letter-spacing: 0.03em; color: var(--bf-color-text); margin: 0; }
:is(.bf-home, .bf-om) .bf-om-comp__primn { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700;
  font-size: var(--bf-text-xs); color: var(--bf-color-text-muted); }
:is(.bf-home, .bf-om) .bf-om-comp__primadd { appearance: none; cursor: pointer; border: 0; background: transparent; line-height: 1;
  color: var(--bf-color-primary-text); font-size: var(--bf-text-base); padding: 2px 4px; border-radius: var(--bf-radius-sm); }
:is(.bf-home, .bf-om) .bf-om-comp__primadd:hover { color: var(--bf-color-primary); }
:is(.bf-home, .bf-om) .bf-om-comp__primadd:focus-visible { outline: 2px solid var(--bf-color-primary); outline-offset: 1px; }
/* Palette sections are collapsible accordions (details/summary); each list scrolls within a capped height. */
:is(.bf-home, .bf-om) details.bf-om-comp__prim > summary.bf-om-comp__primhd { cursor: pointer; list-style: none; user-select: none; }
:is(.bf-home, .bf-om) details.bf-om-comp__prim > summary.bf-om-comp__primhd::-webkit-details-marker { display: none; }
:is(.bf-home, .bf-om) .bf-om-comp__primhd::before { content: "\f078"; font-family: FontAwesome; font-weight: normal; font-size: 10px; color: var(--bf-color-text-muted); transition: transform var(--bf-transition-fast); flex: 0 0 auto; }
:is(.bf-home, .bf-om) details.bf-om-comp__prim:not([open]) > summary.bf-om-comp__primhd::before { transform: rotate(-90deg); }
:is(.bf-home, .bf-om) .bf-om-comp__prim .bf-om-comp__list { max-height: 320px; overflow-y: auto; }
:is(.bf-home, .bf-om) .bf-om-comp__list { list-style: none; margin: 0; padding: var(--bf-space-2); display: flex;
  flex-direction: column; gap: var(--bf-space-1); }
:is(.bf-home, .bf-om) .bf-om-comp__item { appearance: none; cursor: pointer; width: 100%; text-align: left; display: block;
  border: 1px solid transparent; border-radius: var(--bf-radius-md); background: transparent;
  padding: var(--bf-space-2) var(--bf-space-3); }
:is(.bf-home, .bf-om) .bf-om-comp__item:hover { border-color: var(--bf-color-border); background: var(--bf-color-surface-sunken); }
:is(.bf-home, .bf-om) .bf-om-comp__item.is-selected { border-color: var(--bf-color-primary);
  background: color-mix(in srgb, var(--bf-brand-primary) 8%, var(--bf-color-surface)); }
:is(.bf-home, .bf-om) .bf-om-comp__item:focus-visible { outline: 2px solid var(--bf-color-primary); outline-offset: 1px; }
:is(.bf-home, .bf-om) .bf-om-comp__itemtop { display: flex; align-items: center; gap: var(--bf-space-2); }
:is(.bf-home, .bf-om) .bf-om-comp__itemname { font-weight: 700; font-size: var(--bf-text-sm); color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-comp__swatch { width: 13px; height: 13px; border-radius: 3px; margin-left: auto; flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bf-brand-secondary) 30%, transparent); }
:is(.bf-home, .bf-om) .bf-om-comp__bind { display: block; margin-top: 3px; font-size: var(--bf-text-xs); color: var(--bf-color-text-muted); }
:is(.bf-home, .bf-om) .bf-om-comp__bind code { font-family: var(--bf-font-mono, monospace); font-size: 0.92em;
  background: color-mix(in srgb, var(--bf-brand-primary) 10%, var(--bf-color-surface));
  border: 1px solid color-mix(in srgb, var(--bf-brand-primary) 28%, transparent);
  border-radius: var(--bf-radius-sm); padding: 0 5px; color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-comp__bindarrow { color: var(--bf-color-primary-text); font-weight: 700; }

/* ---- CENTER: element grid + inline editor + checklist (light) ---- */
:is(.bf-home, .bf-om) .bf-om-comp__subhead { font-family: var(--bf-font-display); font-weight: 700; font-size: var(--bf-text-base);
  margin: var(--bf-space-5) 0 var(--bf-space-1); color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-comp__grid { border: 1px solid var(--bf-color-border); border-radius: var(--bf-radius-md); overflow-x: auto; }
:is(.bf-home, .bf-om) .bf-om-comp__gtable { width: 100%; border-collapse: collapse; min-width: 640px; }
:is(.bf-home, .bf-om) .bf-om-comp__gtable th,
:is(.bf-home, .bf-om) .bf-om-comp__gtable td { padding: var(--bf-space-2) var(--bf-space-2);
  border-bottom: 1px solid var(--bf-color-border); text-align: left; vertical-align: middle; }
:is(.bf-home, .bf-om) .bf-om-comp__gtable thead th { background: var(--bf-color-surface-sunken); font-size: var(--bf-text-xs);
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--bf-color-text-muted); font-weight: 700; }
:is(.bf-home, .bf-om) .bf-om-comp__gtable tbody tr:last-child td { border-bottom: 0; }
:is(.bf-home, .bf-om) .bf-om-comp__gtable .bf-input { min-width: 8em; padding-top: 5px; padding-bottom: 5px; }
:is(.bf-home, .bf-om) .bf-om-comp__gfield { font-weight: 700; font-size: var(--bf-text-sm); color: var(--bf-color-text); white-space: nowrap; }
:is(.bf-home, .bf-om) .bf-om-comp__ghandle { color: var(--bf-color-text-muted); cursor: grab; padding: 0 2px; }
:is(.bf-home, .bf-om) .bf-om-comp__flags { display: flex; gap: var(--bf-space-2); white-space: nowrap; }
:is(.bf-home, .bf-om) .bf-om-comp__flag { display: inline-flex; align-items: center; gap: 4px; font-size: var(--bf-text-xs);
  font-weight: 600; color: var(--bf-color-text-muted); cursor: pointer; }
:is(.bf-home, .bf-om) .bf-om-comp__rowbtn { appearance: none; cursor: pointer; border: 0; background: transparent; line-height: 1;
  color: var(--bf-color-text-muted); font-size: var(--bf-text-base); padding: 4px; border-radius: var(--bf-radius-sm); }
:is(.bf-home, .bf-om) .bf-om-comp__rowbtn:hover { color: var(--bf-color-primary); }
:is(.bf-home, .bf-om) .bf-om-comp__rowbtn--del:hover { color: var(--bf-color-danger); }
:is(.bf-home, .bf-om) .bf-om-comp__rowbtn:focus-visible { outline: 2px solid var(--bf-color-primary); outline-offset: 1px; }
:is(.bf-home, .bf-om) .bf-om-comp__addrow { display: flex; padding: var(--bf-space-2); background: var(--bf-color-surface-sunken);
  border-top: 1px solid var(--bf-color-border); }
:is(.bf-home, .bf-om) .bf-om-comp__addbtn { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  border: 1px dashed var(--bf-color-border-strong); background: transparent; color: var(--bf-color-primary-text);
  border-radius: var(--bf-radius-pill); font-size: var(--bf-text-xs); font-weight: 700; padding: 5px 12px; }
:is(.bf-home, .bf-om) .bf-om-comp__addbtn:hover { border-color: var(--bf-color-primary); }
:is(.bf-home, .bf-om) .bf-om-comp__stylepick { display: inline-flex; align-items: center; gap: 5px; font-size: var(--bf-text-xs);
  font-weight: 700; color: var(--bf-color-primary-text); }
:is(.bf-home, .bf-om) .bf-om-comp__stylepick::before { content: "\f0d9"; font-family: FontAwesome; font-size: 10px; }
:is(.bf-home, .bf-om) .bf-om-comp__inline { border: 1px solid var(--bf-color-primary); border-radius: var(--bf-radius-md);
  background: color-mix(in srgb, var(--bf-brand-primary) 5%, var(--bf-color-surface)); padding: var(--bf-space-4); }
:is(.bf-home, .bf-om) .bf-om-comp__inlinehd { display: flex; align-items: center; gap: var(--bf-space-2); margin-bottom: var(--bf-space-3); }
:is(.bf-home, .bf-om) .bf-om-comp__inlinehd .fa { color: var(--bf-color-primary-text); }
:is(.bf-home, .bf-om) .bf-om-comp__inlinettl { font-family: var(--bf-font-display); font-weight: 700; font-size: var(--bf-text-base);
  margin: 0; color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-comp__fseta { font-family: var(--bf-font-mono, monospace); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--bf-color-text-muted);
  margin: var(--bf-space-4) 0 var(--bf-space-2); display: flex; align-items: center; gap: var(--bf-space-2); }
:is(.bf-home, .bf-om) .bf-om-comp__fseta::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--bf-color-border); }
:is(.bf-home, .bf-om) .bf-om-comp__optarea { font-family: var(--bf-font-mono, monospace); min-height: 5em; }

/* =========================================================================
   RIGHT: the DARK INSTRUMENT CONSOLE. All housing is color-mix over
   var(--bf-brand-secondary); all on-dark ink + hairlines are color-mix over
   var(--bf-brand-primary-ink). Only black/white/transparent keywords act as
   luminance anchors, so the whole console recolors with the brand.
   ========================================================================= */
:is(.bf-home, .bf-om) .bf-om-comp__dark {
  --comp-mono: var(--bf-font-mono, ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace);
  /* neutral console housing derived from the text token (never the live brand), matching .bf-om-store */
  --comp-ink-900: color-mix(in srgb, var(--bf-color-text) 82%, black);
  --comp-ink-800: color-mix(in srgb, var(--bf-color-text) 90%, black);
  --comp-ink-deep: color-mix(in srgb, var(--bf-color-text) 70%, black);
  --comp-ink-raise: color-mix(in srgb, var(--bf-color-text) 82%, white);
  --comp-hair: color-mix(in srgb, #ffffff 13%, transparent);
  --comp-hair-soft: color-mix(in srgb, #ffffff 8%, transparent);
  --comp-on: #ffffff;
  --comp-on-dim: color-mix(in srgb, #ffffff 66%, transparent);
  --comp-on-faint: color-mix(in srgb, #ffffff 42%, transparent);
  --comp-glow: var(--bf-brand-primary);
  --comp-cast: color-mix(in srgb, var(--bf-color-text) 66%, transparent);
}

/* select-value editor (Text | Value | Parent) beside the file importer, on dark */
:is(.bf-home, .bf-om) .bf-om-comp__opts { border: 1px solid var(--comp-hair); border-radius: var(--bf-radius-md); overflow: hidden; }
:is(.bf-home, .bf-om) .bf-om-comp__optrow { display: grid; grid-template-columns: 1fr 1fr 1fr 2em; gap: var(--bf-space-2);
  align-items: center; padding: var(--bf-space-2); border-bottom: 1px solid var(--comp-hair); }
:is(.bf-home, .bf-om) .bf-om-comp__optrow:last-child { border-bottom: 0; }
:is(.bf-home, .bf-om) .bf-om-comp__optrow--head { background: color-mix(in srgb, #ffffff 5%, transparent);
  font-family: var(--comp-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
:is(.bf-home, .bf-om) .bf-om-comp__optrow .bf-input { min-width: 0; padding-top: 4px; padding-bottom: 4px; font-size: var(--bf-text-xs); }
:is(.bf-home, .bf-om) .bf-om-comp__optrow .bf-om-comp__rowbtn { color: var(--comp-on-faint); }
:is(.bf-home, .bf-om) .bf-om-comp__optrow .bf-om-comp__rowbtn:hover { color: var(--bf-brand-accent); }
:is(.bf-home, .bf-om) .bf-om-comp__import { display: flex; align-items: center; gap: var(--bf-space-2); flex-wrap: wrap;
  padding: var(--bf-space-2) var(--bf-space-3); border: 1px dashed var(--comp-hair); border-radius: var(--bf-radius-md);
  background: color-mix(in srgb, #ffffff 3%, transparent); }
:is(.bf-home, .bf-om) .bf-om-comp__import .fa { color: var(--comp-glow); }
:is(.bf-home, .bf-om) .bf-om-comp__importtxt { font-size: var(--bf-text-xs); color: var(--comp-on-dim); }
:is(.bf-home, .bf-om) .bf-om-comp__darkbtn { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--comp-hair); background: color-mix(in srgb, #ffffff 6%, transparent);
  color: var(--comp-on); border-radius: var(--bf-radius-pill); font-size: var(--bf-text-xs); font-weight: 700;
  padding: 5px 12px; }
:is(.bf-home, .bf-om) .bf-om-comp__darkbtn:hover { border-color: var(--comp-glow); color: var(--comp-glow); }
:is(.bf-home, .bf-om) .bf-om-comp__darkbtn--go { background: var(--comp-glow); color: var(--bf-brand-primary-ink);
  border-color: transparent; box-shadow: 0 0 18px color-mix(in srgb, var(--comp-glow) 45%, transparent); }
:is(.bf-home, .bf-om) .bf-om-comp__darkbtn:focus-visible { outline: 2px solid var(--comp-glow); outline-offset: 2px; }
:is(.bf-home, .bf-om) .bf-om-comp__instfoot { display: flex; align-items: center; gap: var(--bf-space-2); flex-wrap: wrap; }

@media (prefers-reduced-motion: no-preference) {
  :is(.bf-home, .bf-om) .bf-om-comp__item,
  :is(.bf-home, .bf-om) .bf-om-comp__addbtn,
  :is(.bf-home, .bf-om) .bf-om-comp__darkbtn,
  :is(.bf-home, .bf-om) .bf-om-comp__propedit,
  :is(.bf-home, .bf-om) .bf-om-comp__rowbtn { transition: border-color var(--bf-transition-fast), background var(--bf-transition-fast), color var(--bf-transition-fast), box-shadow var(--bf-transition-fast); }
  :is(.bf-home, .bf-om) .bf-om-comp__livedot { animation: comp-pulse 2.4s ease-in-out infinite; }
  @keyframes comp-pulse {
    0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--comp-glow) 30%, transparent), 0 0 10px color-mix(in srgb, var(--comp-glow) 55%, transparent); }
    50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--comp-glow) 12%, transparent), 0 0 18px color-mix(in srgb, var(--comp-glow) 80%, transparent); }
  }
}

/* ============================================================
   W36 - setup_graphics "Attention Getters" asset gallery.
   A visual thumbnail card grid (the graphics library, each card
   showing its uploaded web_url image over a checkerboard) beside a
   docked editor panel. Chrome recolors from --bf-brand-*; the sample
   art keeps its own colors (it is arbitrary uploaded clip art).
   Reuses .bf-om-setup__field / __hint / __search / __note + .bf-input
   / .bf-select / .bf-btn for the form controls.
   ============================================================ */
:is(.bf-home, .bf-om) .bf-om-gfx { display: grid; grid-template-columns: minmax(0, 1fr) 366px; gap: var(--bf-space-5); align-items: start; }
:is(.bf-home, .bf-om) .bf-om-gfx__libhead { display: flex; align-items: center; gap: var(--bf-space-3); margin-bottom: var(--bf-space-4); flex-wrap: wrap; }
:is(.bf-home, .bf-om) .bf-om-gfx__libtitle { font-family: var(--bf-om-font-display, sans-serif); font-weight: 700; font-size: var(--bf-text-lg); }
:is(.bf-home, .bf-om) .bf-om-gfx__count { font-size: var(--bf-text-sm); color: var(--bf-color-text-muted); }
:is(.bf-home, .bf-om) .bf-om-gfx__libsearch { margin-left: auto; max-width: 240px; flex: 1 1 180px; }

/* grid + cards */
:is(.bf-home, .bf-om) .bf-om-gfx__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: var(--bf-space-4); }
:is(.bf-home, .bf-om) .bf-om-gfx__card { display: flex; flex-direction: column; border: 1px solid var(--bf-color-border); border-radius: var(--bf-radius-lg); background: var(--bf-color-surface); overflow: hidden; cursor: pointer; text-align: left; padding: 0; width: 100%; color: inherit; text-decoration: none; }
:is(.bf-home, .bf-om) .bf-om-gfx__card:hover { border-color: var(--bf-color-border-strong); box-shadow: var(--bf-shadow-sm); text-decoration: none; }
:is(.bf-home, .bf-om) .bf-om-gfx__card.is-selected { border-color: var(--bf-brand-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bf-brand-primary) 45%, transparent); }
:is(.bf-home, .bf-om) .bf-om-gfx__card:focus-visible { outline: 2px solid var(--bf-color-focus-ring); outline-offset: 2px; }
:is(.bf-home, .bf-om) .bf-om-gfx__media { display: grid; place-items: center; min-height: 128px; padding: var(--bf-space-4); background: repeating-conic-gradient(var(--bf-color-surface) 0 25%, color-mix(in srgb, var(--bf-color-text) 4%, var(--bf-color-surface)) 0 50%) 0 0 / 18px 18px; }
:is(.bf-home, .bf-om) .bf-om-gfx__img { max-width: 92px; max-height: 92px; width: auto; height: auto; filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .18)); }
:is(.bf-home, .bf-om) .bf-om-gfx__ph { font-size: 1.9rem; color: var(--bf-color-text-muted); opacity: .5; }
:is(.bf-home, .bf-om) .bf-om-gfx__plate { padding: var(--bf-space-3); border-top: 1px solid var(--bf-color-border); display: flex; flex-direction: column; gap: 5px; }
:is(.bf-home, .bf-om) .bf-om-gfx__name { font-weight: 600; font-size: var(--bf-text-sm); line-height: 1.2; color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-gfx__cat { font-size: var(--bf-text-xs); color: var(--bf-color-text-muted); display: inline-flex; align-items: center; gap: 5px; }
:is(.bf-home, .bf-om) .bf-om-gfx__cat .fa { color: var(--bf-color-primary-text); font-size: 0.72em; }
:is(.bf-home, .bf-om) .bf-om-gfx__card--add { align-items: center; justify-content: center; min-height: 190px; gap: var(--bf-space-2); border-style: dashed; border-color: var(--bf-color-border-strong); color: var(--bf-color-primary-text); background: color-mix(in srgb, var(--bf-brand-primary) 4%, var(--bf-color-surface)); font-weight: 600; }
:is(.bf-home, .bf-om) .bf-om-gfx__card--add .fa { font-size: 1.4rem; }

/* docked editor panel */
:is(.bf-home, .bf-om) .bf-om-gfx__panel { position: sticky; top: var(--bf-space-4); border: 1px solid var(--bf-color-border); border-radius: var(--bf-radius-lg); background: var(--bf-color-surface); overflow: hidden; box-shadow: var(--bf-shadow-sm); }
:is(.bf-home, .bf-om) .bf-om-gfx__phead { display: flex; align-items: center; gap: var(--bf-space-3); padding: var(--bf-space-4); background: linear-gradient(135deg, color-mix(in srgb, var(--bf-brand-primary) 10%, var(--bf-color-surface)), var(--bf-color-surface-sunken)); border-bottom: 1px solid var(--bf-color-border); }
:is(.bf-home, .bf-om) .bf-om-gfx__pthumb { flex: 0 0 54px; width: 54px; height: 54px; display: grid; place-items: center; border-radius: var(--bf-radius-md); overflow: hidden; background: var(--bf-color-surface); border: 1px solid var(--bf-color-border); }
:is(.bf-home, .bf-om) .bf-om-gfx__pthumb img { max-width: 100%; max-height: 100%; }
:is(.bf-home, .bf-om) .bf-om-gfx__pthumb .fa { color: var(--bf-color-text-muted); opacity: .55; }
:is(.bf-home, .bf-om) .bf-om-gfx__pcrumb { font-size: var(--bf-text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--bf-color-text-muted); font-weight: 700; }
:is(.bf-home, .bf-om) .bf-om-gfx__ptitle { font-family: var(--bf-om-font-display, sans-serif); font-weight: 700; font-size: var(--bf-text-md); line-height: 1.1; }
:is(.bf-home, .bf-om) .bf-om-gfx__pbody { padding: var(--bf-space-4); display: flex; flex-direction: column; gap: var(--bf-space-4); }
:is(.bf-home, .bf-om) .bf-om-gfx__drop { display: flex; align-items: center; gap: var(--bf-space-2); padding: var(--bf-space-2) var(--bf-space-3); border: 1.5px dashed var(--bf-color-border-strong); border-radius: var(--bf-radius-md); background: var(--bf-color-surface-sunken); font-size: var(--bf-text-xs); color: var(--bf-color-text-muted); flex-wrap: wrap; }
:is(.bf-home, .bf-om) .bf-om-gfx__drop b { color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-gfx__pactions { display: flex; align-items: center; gap: var(--bf-space-2); flex-wrap: wrap; padding-top: var(--bf-space-2); border-top: 1px solid var(--bf-color-border); }
:is(.bf-home, .bf-om) .bf-om-gfx__pspacer { flex: 1; }

@media (max-width: 860px) {
  :is(.bf-home, .bf-om) .bf-om-gfx { grid-template-columns: 1fr; }
  :is(.bf-home, .bf-om) .bf-om-gfx__panel { position: static; }
}
@media (prefers-reduced-motion: no-preference) {
  :is(.bf-home, .bf-om) .bf-om-gfx__card { transition: border-color var(--bf-transition-fast), box-shadow var(--bf-transition-fast); }
}

/* ---- the proof bar: the running price, pinned, when the proof box is not in view ----
   Two jobs, one element:
   - Under 900px the studio is single-column, so the proof stacks below the compose
     column and the price/preview are simply gone while the advertiser types. The bar
     is always on there.
   - At 900px and up the proof box is a capped float that the form wraps under, so it
     scrolls away too once the form runs past it. There the bar is hidden until
     scripts.js sees the proof card leave the viewport and adds .is-detached.
   position:fixed, not sticky: .bf-wizard-frame.bf-om-wizard is overflow:hidden, which
   would trap a sticky child. A fixed child escapes that clip because no ancestor has a
   transform/filter, so the viewport stays its containing block (see the bf-pane-in
   keyframe note in components.css: it must stay fade-only, or the pane becomes the
   containing block and this unpins). It sits inside the #build .tab-pane, so Bootstrap
   hides it with the pane on every other step, and its z-index stays under the dialogs
   (z-index:9999) and their backdrop. */
:is(.bf-home, .bf-om) .bf-om-studio__proofbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--bf-space-3);
  padding: var(--bf-space-3) var(--bf-space-4);
  padding-bottom: max(var(--bf-space-3), env(safe-area-inset-bottom));
  background: var(--bf-color-surface);
  border-top: 1px solid var(--bf-color-border);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.14);
}
:is(.bf-home, .bf-om) .bf-om-studio__proofbarprice {
  margin: 0;
  min-width: 0;
  font-size: var(--bf-text-sm);
  color: var(--bf-color-text-muted);
}
:is(.bf-home, .bf-om) .bf-om-studio__proofbarprice .place_ad-running-total {
  display: block;
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-2xl);
  font-weight: var(--bf-weight-bold);
  line-height: 1.1;
  color: var(--bf-color-text);
}
:is(.bf-home, .bf-om) .bf-om-studio__proofbarlink { flex: 0 0 auto; }
/* the preview lands clear of the wizard chrome when the bar's link jumps to it */
:is(.bf-home, .bf-om) #full-summary-preview-div { scroll-margin-top: var(--bf-space-4); }

/* mobile: always on, the proof is far below */
@media (max-width: 899px) {
  :is(.bf-home, .bf-om) .bf-om-studio__proofbar { display: flex; }
  /* keep the bar from covering the end of the step (the proof card and Back/Next) */
  :is(.bf-home, .bf-om) #build .bf-om-studio { padding-bottom: 92px; }
}
/* desktop: only once the proof box has scrolled out of view */
@media (min-width: 900px) {
  :is(.bf-home, .bf-om) .bf-om-studio__proofbar.is-detached { display: flex; }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  :is(.bf-home, .bf-om) .bf-om-studio__proofbar.is-detached { animation: bf-proofbar-in 160ms ease-out; }
  @keyframes bf-proofbar-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

/* ============================================================================
   Place-ad detail forms: the field vocabulary + .bf-om-fieldgroup
   ----------------------------------------------------------------------------
   The print form does not exist in the PHP. selectStyleTemplate() builds it from the
   DB style template as HTML strings in scripts.js, and it used to carry its own look
   INLINE: a hardcoded #31708f box around the composite widgets, per-input
   border/padding/width, labels pinned to 125px, and <br> tags for layout. None of it
   touched the design system, so the most important form in the app rendered as raw
   Bootstrap with a legacy box-shadow on top.

   The generator now emits the design system (bf-field / bf-input / bf-select /
   bf-textarea / bf-check / bf-label__required) and a real <fieldset> for the two
   composite widgets, so their styling lives HERE instead of in JS string literals.
   The static placeholder fields in placead_builder_tab.php already used the same
   .form-group + bf-* vocabulary, so styling both from one place is what finally makes
   the print half and the online half of the step match.
   ============================================================================ */

/* The generated fields wrap in .form-group (a Bootstrap class nothing in the JS
   selects; it is kept only so the legacy markup stays recognizable). Give them the
   same field rhythm and label treatment .bf-field gets. */
:is(.bf-home, .bf-om) :is(.place_ad-print-details, .place_ad-online-details) .form-group {
  display: block;
  margin-bottom: var(--bf-space-5);
}
:is(.bf-home, .bf-om) :is(.place_ad-print-details, .place_ad-online-details) .form-group > label {
  display: block;
  margin-bottom: var(--bf-space-1);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-medium);
  color: var(--bf-color-text);
}
/* the required marker rides inside its label now, not as a black star hanging off it */
:is(.bf-home, .bf-om) .bf-label__required {
  margin-left: 2px;
  font-weight: var(--bf-weight-bold);
  color: var(--bf-color-danger);
}
/* a long_description under a field is help text, not a bare <br> trailer */
:is(.bf-home, .bf-om) :is(.place_ad-print-details, .place_ad-online-details) .bf-help {
  display: block;
  margin: calc(var(--bf-space-1) * -1) 0 var(--bf-space-3);
  font-weight: var(--bf-weight-normal);
}

/* ---- the digital (online) panel ----
   Same vocabulary as the print half. It was carrying its own dialect: a heading nobody
   needed, a required marker sitting OUTSIDE its label (so it rendered as a black star on
   a line of its own), notes shouting in bold, a bare checkbox floating in a frame, and a
   package NARRATIVE styled as if it were a price chip. */
:is(.bf-home, .bf-om) .bf-om-studio__editing {
  margin: 0 0 var(--bf-space-3);
  font-family: var(--bf-om-font-display);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bf-color-text-muted);
}

/* ---- sections ----
   The digital panel is three distinct things (the map, the description, the photos), but
   it read as one undifferentiated stack: each block was a weak field label followed by a
   box with prose floating loose inside it, so the headers blended into the copy and
   nothing announced where one thing ended and the next began.
   Each is a titled section now, and the help text sits WITH its title instead of drifting
   inside the frame. So: what this is, what you should know about it, then the control. */
:is(.bf-home, .bf-om) #build .bf-om-section {
  margin-bottom: var(--bf-space-6);
}
:is(.bf-home, .bf-om) #build .bf-om-section:last-child {
  margin-bottom: 0;
}
:is(.bf-home, .bf-om) #build .bf-om-section__head {
  margin-bottom: var(--bf-space-3);
}
:is(.bf-home, .bf-om) #build .bf-om-section__title {
  display: block;
  margin: 0;
  font-family: var(--bf-om-font-display);
  font-size: var(--bf-text-lg);
  font-weight: var(--bf-weight-bold);
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--bf-color-text);
}
:is(.bf-home, .bf-om) #build .bf-om-section__sub {
  display: block;
  margin: var(--bf-space-1) 0 0;
  max-width: 62ch;
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-normal);
  line-height: var(--bf-leading-normal);
  color: var(--bf-color-text-muted);
}

/* an upsell is a decision: a checkbox, what it does, what it costs */
:is(.bf-home, .bf-om) .bf-om-upsell {
  margin: 0 0 var(--bf-space-3);
}
:is(.bf-home, .bf-om) .bf-om-upsell__row {
  display: flex;
  align-items: center;
  gap: var(--bf-space-2);
  margin: 0;
  padding: var(--bf-space-3);
  border: 1px solid var(--bf-color-border);
  border-radius: var(--bf-radius-md);
  background: var(--bf-color-surface-sunken);
  font-weight: var(--bf-weight-normal);
  cursor: pointer;
}
:is(.bf-home, .bf-om) .bf-om-upsell__row:hover { border-color: var(--bf-brand-primary); }
:is(.bf-home, .bf-om) .bf-om-upsell__text { flex: 1 1 auto; min-width: 0; }
:is(.bf-home, .bf-om) .bf-om-upsell__price {
  flex: 0 0 auto;
  margin-left: auto;
  font-family: var(--bf-om-font-display);
  font-weight: var(--bf-weight-bold);
  white-space: nowrap;
  color: var(--bf-color-primary-text);
}

/* the character counter sits under the field it counts */
:is(.bf-home, .bf-om) .bf-om-fieldmeta {
  margin: var(--bf-space-2) 0 0;
  min-height: 1em;
  font-size: var(--bf-text-xs);
  color: var(--bf-color-text-muted);
}

/* The upload row: the action, then what the package actually gives you, UNDER it.
   Sitting the narrative beside the button made it wrap around the button and break
   mid-sentence, which is what it looked like: a broken paragraph. It is a sentence,
   so it gets its own line. */
:is(.bf-home, .bf-om) .bf-om-uploadrow {
  display: block;
  margin-bottom: 0;
}
/* #photo_upsell_price is handed a whole narrative by scripts.js ("1 logo/image is
   included in your package. Add up to 7 additional images for $5 each."), not a price,
   so it must not be styled as a bold brand-colored price chip. It is help text. */
:is(.bf-home, .bf-om) #build .bf-om-uploadrow #photo_upsell_price {
  display: block;
  margin-top: var(--bf-space-2);
  max-width: 60ch;
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-normal);
  line-height: var(--bf-leading-normal);
  color: var(--bf-color-text-muted);
}
/* scripts.js builds that narrative with a leading <br> (it used to trail the button on
   the same line); the line break is the layout's job now. */
:is(.bf-home, .bf-om) #build .bf-om-uploadrow #photo_upsell_price br { display: none; }

/* ---- the build error ----
   .place_ad-build-error is the form-level error for the whole Build step ("You must
   select an ad style...", "You have exceeded the maximum allowed words", "We could not
   map that address"). It was a <label> carrying Bootstrap's .pull-right, i.e.
   float:right !important, so the moment it un-hid it floated up and sat INSIDE the first
   field group, jammed against the "Event Location" legend, looking like a caption on it.
   It is a banner now: full width, in flow, at the top of the thing it is complaining
   about. (The float is removed in the markup, not overridden: !important cannot be
   out-specified cleanly.) */
:is(.bf-home, .bf-om) #build .place_ad-build-error:not(.hide) {
  display: flex;
  align-items: flex-start;
  gap: var(--bf-space-2);
  float: none;
  width: 100%;
  margin: 0 0 var(--bf-space-4);
  padding: var(--bf-space-3) var(--bf-space-4);
  border: 1px solid color-mix(in srgb, var(--bf-color-danger) 35%, transparent);
  border-left: 3px solid var(--bf-color-danger);
  border-radius: var(--bf-radius-md);
  background: var(--bf-color-danger-bg);
  color: var(--bf-color-danger);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-medium);
  line-height: var(--bf-leading-normal);
  text-align: left;
}
:is(.bf-home, .bf-om) #build .place_ad-build-error:not(.hide)::before {
  content: "!";
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-color-danger);
  color: #fff;
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-bold);
  line-height: 1;
}

/* ---- the location map ----
   The same Aurora "Dusk" console as the browse and ad-view maps (.bf-map-frame, promoted
   from .bf-browse to a shared component). The map itself used to be a Google Maps EMBED
   iframe, hardcoded to 600x450, sitting under a bare line of text with no frame at all;
   the Embed API takes no style parameter, so it was the one map in the product still in
   Google's default light tiles. It is a real google.maps.Map now (see
   includes/modules/map-style.js). */
:is(.bf-home, .bf-om) #google_map {
  width: 100%;
  height: 300px;
}

/* ---- .bf-om-fieldgroup: a set of controls that answer one question ----
   (Event Location = 3 address fields; Date and Time = date + start + stop + the
   add/remove-day actions). A real fieldset/legend, so it is a group semantically and
   not just visually, on a sunken surface with a hairline rather than a blue box. */
/* The <fieldset> is only the semantic wrapper now: no border, no padding. Two reasons.
   A <legend> renders INSIDE a fieldset's border, notching the rule, which reads as an
   accident; with no border there is no notch, and the legend is just a clean label
   above the group. And a fieldset defaults to min-width:min-content, so it REFUSES to
   shrink: squeezed into the compose column it shoved its own fields out through the
   side. min-width:0 is what lets it behave like any other box. */
:is(.bf-home, .bf-om) .bf-om-fieldgroup {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
:is(.bf-home, .bf-om) .bf-om-fieldgroup__legend {
  display: block;
  width: 100%;
  margin: 0 0 var(--bf-space-2);
  padding: 0;
  border: 0;
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-base);
  font-weight: var(--bf-weight-bold);
  line-height: 1.2;
  color: var(--bf-color-text);
}
/* the visible group: the fields sit together on their own surface, under the label */
:is(.bf-home, .bf-om) .bf-om-fieldgroup__body {
  padding: var(--bf-space-4);
  border: 1px solid var(--bf-color-border);
  border-radius: var(--bf-radius-lg);
  background: var(--bf-color-surface-sunken);
}

/* The fields inside. auto-fit, NOT a viewport media query: this group lives in the
   compose column, which is only ~400px wide next to the floated proof even on a wide
   screen, so keying the column count off the viewport squeezed two columns into a slot
   that could not hold them. auto-fit keys off the space actually available. */
:is(.bf-home, .bf-om) .bf-om-fieldgroup__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--bf-space-4);
}
/* A cell holding a whole time control (hour + separator + minutes + AM/PM) needs more
   room than one holding a single input; at 200px the AM/PM dropped to its own line.
   Only the Date and Time group has those, so only it pays for the wider track. */
:is(.bf-home, .bf-om) .bf-om-fieldgroup__grid:has(.bf-om-timerow) {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
:is(.bf-home, .bf-om) .bf-om-fieldgroup__grid .bf-field { margin-bottom: 0; min-width: 0; }
:is(.bf-home, .bf-om) .bf-om-fieldgroup__grid .bf-input { width: 100%; }

/* Date + time controls. They must WRAP, never shrink: a flex item with min-width:0
   happily squeezes below its own content, and a <select> that does that clips the
   month name. flex:0 0 auto keeps each control at its natural width and lets the row
   wrap instead. */
:is(.bf-home, .bf-om) .bf-om-timerow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bf-space-1);
}
:is(.bf-home, .bf-om) .bf-om-timerow .bf-select {
  width: auto;
  flex: 0 0 auto;
  max-width: 100%;
}
:is(.bf-home, .bf-om) .bf-om-timerow__sep {
  color: var(--bf-color-text-muted);
  font-weight: var(--bf-weight-bold);
}

:is(.bf-home, .bf-om) .bf-om-fieldgroup__pills {
  margin: 0 0 var(--bf-space-4);
}
:is(.bf-home, .bf-om) .bf-om-fieldgroup__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bf-space-2);
  margin-top: var(--bf-space-4);
  padding-top: var(--bf-space-4);
  border-top: 1px solid var(--bf-color-border);
}

/* ============================================================================
   Place-ad dialogs  .bf-om-dlg   (the secondary place-ad modals)
   ----------------------------------------------------------------------------
   Open Market skin for #category_dialog, #graphics_dialog, #event_dialog,
   #region_dialog, #crop-photo-dialog, #confirm-delete, #placead_offline and
   #session_dialog. Bootstrap .modal mechanics are untouched: the JS still opens
   each one by id ($('#x').modal('show')) and every button keeps its data-dismiss
   and onclick, so this is chrome only. Opt-in via the .bf-om-dlg class on the
   modal root (the same pattern .bf-om-sched-modal uses) rather than a blanket
   .modal-content rule, so dialogs on other pages are never touched, and it holds
   even if a modal is ever reparented out of .bf-om.

   The family: an Aurora band over a paper working surface, which is the stacked
   expression of the .bf-om-sched scheduler's calendar|rail split. The band is a
   NEUTRAL ink housing with the brand only as an accent wash (matching the
   composition console), so a per-storefront recolor tints the accent, not the
   whole chrome. Its kicker names the decision being made, which is what makes a
   dialog legible at a glance in a four-step wizard.

   Four expressions:
     --guide  pick something and continue   (category, graphics, event, region)
     --studio a darkroom stage for photos   (crop-photo-dialog, confirm-delete)
     --notice a short system message        (placead_offline, session_dialog)
     --danger confirm something destructive (stop-ad on ad_listing, orders_history)
   ============================================================================ */
.bf-om-dlg {
  --dlg-ink: color-mix(in srgb, var(--bf-color-text) 82%, black);
  --dlg-hair: color-mix(in srgb, #ffffff 14%, transparent);
}
.bf-om-dlg .modal-dialog {
  width: auto;
  max-width: 640px;
  margin: var(--bf-space-5) auto;
}
.bf-om-dlg.bf-om-dlg--wide .modal-dialog { max-width: 900px; }
.bf-om-dlg.bf-om-dlg--tall .modal-dialog { max-width: 760px; }
.bf-om-dlg.bf-om-dlg--notice .modal-dialog { max-width: 520px; }
.bf-om-dlg .modal-content {
  border: 0;
  border-radius: var(--bf-radius-lg);
  overflow: hidden;
  background: var(--bf-color-surface);
  box-shadow: var(--bf-shadow-lg);
}

/* ---- the Aurora band ---- */
.bf-om-dlg .modal-header {
  padding: var(--bf-space-5);
  border-bottom: 0;
  text-align: left;
  color: var(--bf-color-text-inverse);
  background:
    radial-gradient(
      120% 130% at 100% 0%,
      color-mix(in srgb, var(--bf-brand-accent) 20%, var(--dlg-ink)) 0%,
      var(--dlg-ink) 58%
    );
}
.bf-om-dlg .modal-header .bf-om-dlg__kicker {
  margin: 0 0 var(--bf-space-1);
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-bold);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--bf-brand-accent) 82%, #fff);
}
/* (0,2,1) so it outranks the .bf-scope h1..h6 light-surface color at (0,1,1) */
.bf-om-dlg .modal-header h3 {
  margin: 0;
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-2xl);
  font-weight: var(--bf-weight-bold);
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: #fff;
}

/* ---- paper working surface ---- */
.bf-om-dlg .modal-body {
  padding: var(--bf-space-5);
  color: var(--bf-color-text);
  font-size: var(--bf-text-base);
  line-height: var(--bf-leading-normal);
}
.bf-om-dlg .modal-body h4 {
  margin: 0 0 var(--bf-space-3);
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-lg);
  font-weight: var(--bf-weight-bold);
  color: var(--bf-color-text);
}
.bf-om-dlg .modal-body .bf-select,
.bf-om-dlg .modal-body select {
  width: 100%;
}
/* #place-ad_choose-cat is a native <select size="5">, so it is a list box, not a
   dropdown. Leave the height to auto so size="5" renders five WHOLE rows: pinning a
   px height lands mid-row and the last option reads as clipped rather than scrollable. */
.bf-om-dlg .modal-body select[size] {
  height: auto;
  padding: var(--bf-space-2);
}
.bf-om-dlg .modal-body select[size] option {
  padding: var(--bf-space-1) var(--bf-space-2);
}
.bf-om-dlg .modal-body hr {
  margin: var(--bf-space-4) 0;
  border: 0;
  border-top: 1px solid var(--bf-color-border);
}
/* #event_dialog's body carries Bootstrap's .alert-info; the injected form reads
   better on paper, so neutralize the tint but keep an info edge. */
.bf-om-dlg .modal-body.alert-info {
  border: 0;
  border-left: 3px solid var(--bf-color-info);
  border-radius: 0;
  background: var(--bf-color-info-bg);
  color: var(--bf-color-text);
}
/* #graphics-library was an inline max-height + overflow:scroll (always-on bars) */
.bf-om-dlg .bf-om-dlg__scroll {
  max-height: 60vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ---- action rail ---- */
.bf-om-dlg .modal-footer {
  padding: var(--bf-space-4) var(--bf-space-5);
  border-top: 1px solid var(--bf-color-border);
  background: var(--bf-color-surface-alt);
}
.bf-om-dlg--guide .modal-footer > div,
.bf-om-dlg--notice .modal-footer > div {
  margin-top: 0 !important; /* beats the legacy inline margin-top:10px */
  display: flex;
  flex-wrap: wrap;
  gap: var(--bf-space-2);
  justify-content: flex-end;
}
.bf-om-dlg--notice .modal-footer > div { justify-content: center; }

/* ---- --notice: a short system message ---- */
.bf-om-dlg--notice .modal-body { text-align: center; }
/* both notice bodies wrap their copy in an <h4>, which the rule above would set as a
   bold display heading; a sentence of prose is prose, so read it back down. */
.bf-om-dlg--notice .modal-body h4 {
  margin: 0;
  font-family: var(--bf-font-body);
  font-size: var(--bf-text-base);
  font-weight: var(--bf-weight-normal);
  line-height: var(--bf-leading-normal);
  color: var(--bf-color-text-muted);
}
.bf-om-dlg--notice #session-counter {
  font-family: var(--bf-font-display);
  font-size: var(--bf-text-3xl);
  font-weight: var(--bf-weight-bold);
  line-height: 1.1;
  color: var(--bf-color-text);
}

/* ---- --danger: confirm something destructive ----
   A fourth expression of the family, for a step the advertiser cannot undo
   (the stop-ad confirm on ad_listing.php and orders_history.php). Same neutral
   ink housing, but the band's accent wash turns red so the stakes read before
   the copy does, and the body stays left-aligned because this one carries a
   form (the optional reason) rather than a one-line message. */
/* The layout bits are gated off --notice because the acknowledgement dialog
   reuses --danger for its failure state (scripts.js cancelOrderRequest) and
   must keep the notice width and centered action. Only the band chroma is
   shared. */
.bf-om-dlg.bf-om-dlg--danger:not(.bf-om-dlg--notice) .modal-dialog { max-width: 560px; }
.bf-om-dlg--danger .modal-header {
  background:
    radial-gradient(
      120% 130% at 100% 0%,
      color-mix(in srgb, var(--bf-color-danger) 38%, var(--dlg-ink)) 0%,
      var(--dlg-ink) 62%
    );
}
.bf-om-dlg--danger .modal-header .bf-om-dlg__kicker {
  color: color-mix(in srgb, var(--bf-color-danger) 38%, #fff);
}
.bf-om-dlg--danger:not(.bf-om-dlg--notice) .modal-footer > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bf-space-2);
  justify-content: flex-end;
}
@media (max-width: 560px) {
  /* column, not column-reverse: keep DOM order so the destructive button stays
     at the bottom of the stack rather than under the thumb, and so the stacked
     order still reads the way the desktop rail does. */
  .bf-om-dlg--danger:not(.bf-om-dlg--notice) .modal-footer > div { flex-direction: column; }
  .bf-om-dlg--danger:not(.bf-om-dlg--notice) .modal-footer > div .bf-btn { width: 100%; }
}

/* what is being stopped, called out so it is scannable before the click.
   Both of these are <p> inside .bf-scope, so they need (0,2,0) to beat
   base.css's `.bf-scope p { margin: 0 0 var(--bf-space-4) }` at (0,1,1);
   authored bare, the note lost its top margin and gained a bottom one. */
.bf-om-dlg .bf-om-dlg__ref {
  display: flex;
  align-items: baseline;
  gap: var(--bf-space-2);
  margin: 0 0 var(--bf-space-4);
  font-size: var(--bf-text-sm);
  color: var(--bf-color-text-muted);
}
.bf-om-dlg__chip {
  display: inline-block;
  padding: var(--bf-space-1) var(--bf-space-3);
  border-radius: var(--bf-radius-pill);
  background: var(--bf-color-surface-sunken);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--bf-color-text);
}
.bf-om-dlg__label {
  display: block;
  margin-bottom: var(--bf-space-2);
  font-size: var(--bf-text-sm);
  font-weight: var(--bf-weight-medium);
  color: var(--bf-color-text);
}
/* the word that had been lying: it says optional, and now it is */
.bf-om-dlg__opt {
  font-weight: var(--bf-weight-normal);
  color: var(--bf-color-text-muted);
}
.bf-om-dlg .bf-om-dlg__field {
  display: block;
  width: 100%;
  min-height: 88px;
  resize: vertical;
}
.bf-om-dlg .bf-om-dlg__note {
  margin: var(--bf-space-4) 0 0;
  padding-top: var(--bf-space-3);
  border-top: 1px solid var(--bf-color-border);
  font-size: var(--bf-text-sm);
  line-height: 1.45;
  color: var(--bf-color-text-muted);
}

/* ---- --studio: the darkroom stage ----
   The photo is the subject, so it sits on the same ink as the band and the tools
   sit below it on paper. .img-container is the cropper's binding selector
   (.img-container > img in scripts.js), so it is left alone; only the surface
   around it is restyled. The legacy .container/.row inside #crop-photo-dialog
   would otherwise impose Bootstrap's fixed grid width inside the dialog. */
.bf-om-dlg--studio .modal-body {
  padding: var(--bf-space-4);
  background: var(--dlg-ink);
}
.bf-om-dlg--studio .modal-body .container,
.bf-om-dlg--studio .modal-body .row {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}
.bf-om-dlg--studio .modal-body > div { text-align: center; }
.bf-om-dlg--studio .modal-footer label {
  display: inline-block;
  margin: 0 var(--bf-space-2);
  font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bf-color-text-muted);
  vertical-align: middle;
}

/* Both studio footers are legacy float + .col-md action rows, which strand the
   buttons mid-width. Re-lay them as: a centered tool cluster, a rule, then a
   right-aligned action rail (cancel first, confirming action last). Presentation
   only, so every button keeps its id, onclick and data-dismiss. */
.bf-om-dlg--studio .modal-footer .docs-actions {
  margin: 0 0 var(--bf-space-4);
  padding-bottom: var(--bf-space-4);
  border-bottom: 1px solid var(--bf-color-border);
}
.bf-om-dlg--studio .modal-footer #photo-rotate-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--bf-space-2);
  margin-bottom: var(--bf-space-4);
  padding-bottom: var(--bf-space-4);
  border-bottom: 1px solid var(--bf-color-border);
}
/* the action rail: the last child of either studio footer */
.bf-om-dlg--studio .modal-footer > div:last-child {
  margin: 0 !important; /* beats the legacy inline margin-top / margin-bottom */
  padding: 0;
  border-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--bf-space-2);
}
.bf-om-dlg--studio .modal-footer > div:last-child > .col-md-3 { display: none; }
.bf-om-dlg--studio .modal-footer > div:last-child > .col-md-6 {
  width: auto;
  float: none;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--bf-space-2);
}
.bf-om-dlg--studio .modal-footer > div:last-child span {
  float: none !important; /* beats the legacy inline float/margin on the button spans */
  margin: 0 !important;
}

/* =============================================================================
   W38  reports.php per-report views: the Case Files result surface (queue archetype)
   -----------------------------------------------------------------------------
   Reports search / 7 / 7a / 5 / 911 / 911b / 4 / 4x / 3 render as RECORDS rather
   than table rows. A queue report is casework, not a spreadsheet: the CSR is
   hunting for the one order that needs them and then acting on it.

   What each part is doing:
     __spine    the state of the case, in the same place on every record, read
                before anything else and without reading anything.
     __ref      the order number as the anchor, because that is the one thing a
                CSR actually carries between screens.
     __fact     every column the record's anatomy did not claim, LABELLED. The old
                table made you count across 13 unlabelled columns to identify one.
     __history  the notes. These used to be a full-width yellow block wedged
                between every pair of rows (a <tr> nested inside a <td>, which the
                browser hoisted straight back out). They now belong to a record.
     __tally    the total, which follows the records you are LOOKING AT.

   Tokens only. Note --bf-space-7 and --bf-text-md DO NOT EXIST: an undefined token
   silently zeroes the whole declaration, not just the missing value.
   ============================================================================= */

:is(.bf-home, .bf-om) .bf-om-rep { margin: var(--bf-space-5) 0 0; }

/* the rail: narrowing, because these reports have no LIMIT and no pagination */
:is(.bf-home, .bf-om) .bf-om-rep__rail {
  display: flex; align-items: center; gap: var(--bf-space-2); flex-wrap: wrap;
  padding: var(--bf-space-3); margin-bottom: var(--bf-space-4);
  background: var(--bf-color-surface); border: 1px solid var(--bf-color-border);
  border-radius: var(--bf-radius-lg);
}
:is(.bf-home, .bf-om) .bf-om-rep__find { flex: 1; min-width: 220px; position: relative; }
:is(.bf-home, .bf-om) .bf-om-rep__findin {
  width: 100%; border: 1px solid var(--bf-color-border-strong);
  border-radius: var(--bf-radius-pill); padding: var(--bf-space-2) var(--bf-space-4);
  font-family: var(--bf-font-body); font-size: var(--bf-text-sm); color: var(--bf-color-text);
  background: var(--bf-color-surface); outline: none;
}
:is(.bf-home, .bf-om) .bf-om-rep__findin:focus {
  border-color: var(--bf-brand-primary);
  box-shadow: 0 0 0 3px var(--bf-color-focus-ring);
}
:is(.bf-home, .bf-om) .bf-om-rep__count {
  font-size: var(--bf-text-xs); font-weight: var(--bf-weight-bold); color: var(--bf-color-text-muted);
  white-space: nowrap; letter-spacing: 0.04em; text-transform: uppercase;
}
:is(.bf-home, .bf-om) .bf-om-rep__rbtn {
  border: 1px solid var(--bf-color-border-strong); background: var(--bf-color-surface);
  border-radius: var(--bf-radius-pill); padding: var(--bf-space-2) var(--bf-space-3);
  font-family: var(--bf-font-body); font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-medium); color: var(--bf-color-text);
  cursor: pointer; white-space: nowrap;
}
:is(.bf-home, .bf-om) .bf-om-rep__rbtn:hover { border-color: var(--bf-color-text); }

/* the record */
:is(.bf-home, .bf-om) .bf-om-rep__rec {
  display: grid; grid-template-columns: 6px 1fr auto;
  background: var(--bf-color-surface); border: 1px solid var(--bf-color-border);
  border-radius: var(--bf-radius-lg); margin-bottom: var(--bf-space-3);
  overflow: hidden; transition: box-shadow var(--bf-transition-fast);
}
:is(.bf-home, .bf-om) .bf-om-rep__rec:hover,
:is(.bf-home, .bf-om) .bf-om-rep__rec.is-open { box-shadow: var(--bf-shadow-md); }
:is(.bf-home, .bf-om) .bf-om-rep__rec.is-filtered { display: none; }

/* the spine: full record height, always the same place, colored by state */
:is(.bf-home, .bf-om) .bf-om-rep__spine { background: var(--bf-color-border-strong); }
:is(.bf-home, .bf-om) .bf-om-rep__rec.is-ok   .bf-om-rep__spine { background: var(--bf-color-success); }
:is(.bf-home, .bf-om) .bf-om-rep__rec.is-wait .bf-om-rep__spine { background: var(--bf-color-info); }
:is(.bf-home, .bf-om) .bf-om-rep__rec.is-hold .bf-om-rep__spine { background: var(--bf-color-warning); }
:is(.bf-home, .bf-om) .bf-om-rep__rec.is-bad  .bf-om-rep__spine { background: var(--bf-color-danger); }
:is(.bf-home, .bf-om) .bf-om-rep__rec.is-off  .bf-om-rep__spine { background: var(--bf-color-border-strong); }

:is(.bf-home, .bf-om) .bf-om-rep__main { padding: var(--bf-space-4) var(--bf-space-5); min-width: 0; }
:is(.bf-home, .bf-om) .bf-om-rep__top {
  display: flex; align-items: center; gap: var(--bf-space-3);
  flex-wrap: wrap; margin-bottom: var(--bf-space-2);
}
:is(.bf-home, .bf-om) .bf-om-rep__check { margin: 0; }
:is(.bf-home, .bf-om) .bf-om-rep__ref {
  font-family: var(--bf-om-font-display, var(--bf-font-display));
  font-weight: var(--bf-weight-bold); font-size: var(--bf-text-xl);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  text-decoration: none; color: var(--bf-color-text);
}
:is(.bf-home, .bf-om) .bf-om-rep__ref:hover { color: var(--bf-color-primary-text); }
:is(.bf-home, .bf-om) .bf-om-rep__who { font-weight: var(--bf-weight-medium); color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-rep__sep { color: var(--bf-color-border-strong); }
:is(.bf-home, .bf-om) .bf-om-rep__contact { color: var(--bf-color-text-muted); font-size: var(--bf-text-sm); }
:is(.bf-home, .bf-om) .bf-om-rep__contact a { color: var(--bf-color-primary-text); }

/* the status pill: the word CSRs already know, in the tone of its state */
:is(.bf-home, .bf-om) .bf-om-rep__pill {
  font-size: 11px; font-weight: var(--bf-weight-bold); padding: 3px 10px;
  border-radius: var(--bf-radius-pill); white-space: nowrap;
  background: var(--bf-color-surface-sunken); color: var(--bf-color-text-muted);
}
:is(.bf-home, .bf-om) .bf-om-rep__pill.is-ok   { background: var(--bf-color-success-bg); color: #00694a; }
:is(.bf-home, .bf-om) .bf-om-rep__pill.is-wait { background: var(--bf-color-info-bg);    color: #005a94; }
:is(.bf-home, .bf-om) .bf-om-rep__pill.is-hold { background: var(--bf-color-warning-bg); color: #8a5400; }
:is(.bf-home, .bf-om) .bf-om-rep__pill.is-bad  { background: var(--bf-color-danger-bg);  color: #a41436; }
:is(.bf-home, .bf-om) .bf-om-rep__pill.is-off  { background: var(--bf-color-surface-sunken); color: var(--bf-color-text-muted); }

/* the ad: one line until the record is opened. It is a preview, not the ad. */
:is(.bf-home, .bf-om) .bf-om-rep__ad {
  color: var(--bf-color-text-muted); font-size: var(--bf-text-sm);
  line-height: var(--bf-leading-normal); margin: 0 0 var(--bf-space-3);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
:is(.bf-home, .bf-om) .bf-om-rep__rec.is-open .bf-om-rep__ad { -webkit-line-clamp: unset; }

/* the labelled facts: no more counting across unlabelled columns */
:is(.bf-home, .bf-om) .bf-om-rep__meta { display: flex; gap: var(--bf-space-5); flex-wrap: wrap; }
:is(.bf-home, .bf-om) .bf-om-rep__fact { min-width: 0; }
:is(.bf-home, .bf-om) .bf-om-rep__factk {
  display: block; font-size: 10px; font-weight: var(--bf-weight-bold);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bf-color-text-muted); margin-bottom: 2px;
}
:is(.bf-home, .bf-om) .bf-om-rep__factv {
  font-size: var(--bf-text-sm); font-weight: var(--bf-weight-medium);
  font-variant-numeric: tabular-nums; color: var(--bf-color-text);
}
:is(.bf-home, .bf-om) .bf-om-rep__factv--none { color: var(--bf-color-text-muted); font-weight: var(--bf-weight-normal); }
:is(.bf-home, .bf-om) .bf-om-rep__notes {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font-family: var(--bf-font-body); font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-bold); color: var(--bf-color-primary-text);
  text-decoration: underline; text-underline-offset: 3px;
}
:is(.bf-home, .bf-om) .bf-om-rep__notes:hover { color: var(--bf-color-text); }

/* the money and the actions */
:is(.bf-home, .bf-om) .bf-om-rep__side {
  padding: var(--bf-space-4) var(--bf-space-5);
  border-left: 1px solid var(--bf-color-border);
  background: color-mix(in srgb, var(--bf-color-surface-alt) 40%, var(--bf-color-surface));
  display: flex; flex-direction: column; align-items: flex-end;
  justify-content: space-between; gap: var(--bf-space-3); min-width: 190px;
}
:is(.bf-home, .bf-om) .bf-om-rep__money {
  font-family: var(--bf-om-font-display, var(--bf-font-display));
  font-weight: var(--bf-weight-bold); font-size: var(--bf-text-2xl);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; white-space: nowrap;
  color: var(--bf-color-text);
}
:is(.bf-home, .bf-om) .bf-om-rep__acts { display: flex; gap: var(--bf-space-2); }
:is(.bf-home, .bf-om) .bf-om-rep__act {
  font-family: var(--bf-font-body); font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-medium); padding: 7px var(--bf-space-3);
  border-radius: var(--bf-radius-sm); cursor: pointer; white-space: nowrap;
  border: 1px solid var(--bf-color-border-strong); background: var(--bf-color-surface);
  color: var(--bf-color-text); text-decoration: none; display: inline-block;
}
:is(.bf-home, .bf-om) .bf-om-rep__act:hover { border-color: var(--bf-color-text); color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-rep__act--ok {
  background: var(--bf-color-success); border-color: var(--bf-color-success);
  color: var(--bf-color-text-inverse);
}
:is(.bf-home, .bf-om) .bf-om-rep__act--ok:hover { background: #009a5c; border-color: #009a5c; color: var(--bf-color-text-inverse); }

/* the case history */
:is(.bf-home, .bf-om) .bf-om-rep__history {
  grid-column: 2 / -1; border-top: 1px solid var(--bf-color-border);
  background: var(--bf-color-paper); padding: var(--bf-space-4) var(--bf-space-5);
}
:is(.bf-home, .bf-om) .bf-om-rep__history.is-hidden { display: none; }
:is(.bf-home, .bf-om) .bf-om-rep__histk {
  font-size: 10px; font-weight: var(--bf-weight-bold); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--bf-color-text-muted);
  margin: 0 0 var(--bf-space-2);
}
:is(.bf-home, .bf-om) .bf-om-rep__histk + .bf-om-rep__tl { margin-bottom: var(--bf-space-4); }
:is(.bf-home, .bf-om) .bf-om-rep__tl { list-style: none; margin: 0; padding: 0; }
:is(.bf-home, .bf-om) .bf-om-rep__ev {
  display: grid; grid-template-columns: 12px 1fr; gap: var(--bf-space-3);
  padding: var(--bf-space-2) 0; font-size: var(--bf-text-sm);
  line-height: var(--bf-leading-normal);
}
:is(.bf-home, .bf-om) .bf-om-rep__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bf-brand-accent); margin-top: 7px;
}
:is(.bf-home, .bf-om) .bf-om-rep__evwho {
  font-weight: var(--bf-weight-medium); font-size: var(--bf-text-xs); color: var(--bf-color-text);
}
:is(.bf-home, .bf-om) .bf-om-rep__evwhen {
  color: var(--bf-color-text-muted); font-size: var(--bf-text-xs);
  font-variant-numeric: tabular-nums; margin-left: var(--bf-space-2);
}
:is(.bf-home, .bf-om) .bf-om-rep__evwhat { display: block; margin-top: 1px; color: var(--bf-color-text); }

/* the tally: the number a manager came for, under the casework a CSR came for */
:is(.bf-home, .bf-om) .bf-om-rep__tally {
  display: flex; align-items: baseline; gap: var(--bf-space-6); flex-wrap: wrap;
  background: var(--bf-color-surface); border: 1px solid var(--bf-color-border);
  border-top: 3px solid var(--bf-color-text); border-radius: var(--bf-radius-lg);
  padding: var(--bf-space-4) var(--bf-space-5); margin-top: var(--bf-space-4);
}
:is(.bf-home, .bf-om) .bf-om-rep__tallyk {
  display: block; font-size: 10px; font-weight: var(--bf-weight-bold);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bf-color-text-muted); margin-bottom: 2px;
}
:is(.bf-home, .bf-om) .bf-om-rep__tallyv {
  font-family: var(--bf-om-font-display, var(--bf-font-display));
  font-weight: var(--bf-weight-bold); font-size: var(--bf-text-2xl);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--bf-color-text);
}
:is(.bf-home, .bf-om) .bf-om-rep__tallyn {
  margin-left: auto; align-self: center; font-size: var(--bf-text-xs);
  color: var(--bf-color-text-muted); font-style: italic;
}
:is(.bf-home, .bf-om) .bf-om-rep__empty {
  padding: var(--bf-space-8) var(--bf-space-5); text-align: center;
  color: var(--bf-color-text-muted); font-size: var(--bf-text-sm);
  background: var(--bf-color-surface); border: 1px dashed var(--bf-color-border-strong);
  border-radius: var(--bf-radius-lg);
}
:is(.bf-home, .bf-om) .bf-om-rep__empty.is-hidden { display: none; }

@media (max-width: 820px) {
  :is(.bf-home, .bf-om) .bf-om-rep__rec { grid-template-columns: 6px 1fr; }
  :is(.bf-home, .bf-om) .bf-om-rep__side {
    border-left: 0; border-top: 1px solid var(--bf-color-border);
    flex-direction: row; align-items: center; justify-content: space-between; min-width: 0;
  }
  :is(.bf-home, .bf-om) .bf-om-rep__history { grid-column: 2 / -1; }
}

@media print {
  :is(.bf-home, .bf-om) .bf-om-rep__rail,
  :is(.bf-home, .bf-om) .bf-om-rep__acts { display: none; }
  :is(.bf-home, .bf-om) .bf-om-rep__rec { break-inside: avoid; box-shadow: none; }
  :is(.bf-home, .bf-om) .bf-om-rep__history.is-hidden { display: block; }
}

/* =============================================================================
   W38b  reports.php: the Statement result surface (ledger archetype)
   -----------------------------------------------------------------------------
   Reports 9 / 9a / 9b / revenue_percentage / 1 / 2 / 2a. A money report has the
   opposite need to a queue: nobody is hunting for a row to act on, they are
   reading DOWN a column and they have to trust what it adds up to.

   So: lines grouped by the report's own grouping column, a subtotal per group, a
   RUNNING BALANCE down the right (the column a manager actually reads), and a
   double-ruled closing total. Numbers are tabular so the digits line up in a
   column; that is the whole job.
   ============================================================================= */

:is(.bf-home, .bf-om) .bf-om-stmt {
  margin: var(--bf-space-5) 0 0; background: var(--bf-color-surface);
  border: 1px solid var(--bf-color-border); border-radius: var(--bf-radius-lg);
  overflow: hidden;
}

:is(.bf-home, .bf-om) .bf-om-stmt__head,
:is(.bf-home, .bf-om) .bf-om-stmt__line {
  display: grid; grid-template-columns: 140px 1fr 110px 130px 130px;
  gap: var(--bf-space-4); align-items: center;
  padding: var(--bf-space-3) var(--bf-space-5);
}
:is(.bf-home, .bf-om) .bf-om-stmt__head {
  border-bottom: 2px solid var(--bf-color-text);
  font-size: 10px; font-weight: var(--bf-weight-bold); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--bf-color-text-muted);
}
:is(.bf-home, .bf-om) .bf-om-stmt__hc--r { text-align: right; }

:is(.bf-home, .bf-om) .bf-om-stmt__line {
  border-bottom: 1px solid var(--bf-color-border); font-size: var(--bf-text-sm);
}
:is(.bf-home, .bf-om) .bf-om-stmt__line:hover {
  background: color-mix(in srgb, var(--bf-brand-primary) 5%, transparent);
}
:is(.bf-home, .bf-om) .bf-om-stmt__tx {
  font-variant-numeric: tabular-nums; color: var(--bf-color-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
:is(.bf-home, .bf-om) .bf-om-stmt__who {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--bf-color-text);
}
:is(.bf-home, .bf-om) .bf-om-stmt__who small {
  display: block; color: var(--bf-color-text-muted); font-size: var(--bf-text-xs);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
:is(.bf-home, .bf-om) .bf-om-stmt__ord a {
  font-weight: var(--bf-weight-medium); color: var(--bf-color-text); text-decoration: none;
  font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--bf-color-border-strong);
}
:is(.bf-home, .bf-om) .bf-om-stmt__ord a:hover { color: var(--bf-color-primary-text); }
:is(.bf-home, .bf-om) .bf-om-stmt__amt {
  text-align: right; font-variant-numeric: tabular-nums;
  font-weight: var(--bf-weight-bold); color: var(--bf-color-text); white-space: nowrap;
}
/* the running balance: the column a manager reads down */
:is(.bf-home, .bf-om) .bf-om-stmt__bal {
  text-align: right; font-variant-numeric: tabular-nums;
  color: var(--bf-color-text-muted); font-size: var(--bf-text-xs); white-space: nowrap;
}

/* the group header and its subtotal */
:is(.bf-home, .bf-om) .bf-om-stmt__day {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: var(--bf-space-3) var(--bf-space-5);
  background: var(--bf-color-surface-sunken);
  border-bottom: 1px solid var(--bf-color-border-strong);
  border-top: 1px solid var(--bf-color-border-strong);
}
:is(.bf-home, .bf-om) .bf-om-stmt__dayk {
  font-size: 11px; font-weight: var(--bf-weight-bold); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--bf-color-text);
}
:is(.bf-home, .bf-om) .bf-om-stmt__dayv {
  font-size: var(--bf-text-sm); font-weight: var(--bf-weight-medium);
  font-variant-numeric: tabular-nums; color: var(--bf-color-text-muted);
}

/* the close: an accountant's double rule, not a grey box */
:is(.bf-home, .bf-om) .bf-om-stmt__close {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--bf-space-5); flex-wrap: wrap;
  padding: var(--bf-space-5); background: var(--bf-color-paper);
  border-top: 3px double var(--bf-color-text);
}
:is(.bf-home, .bf-om) .bf-om-stmt__closek {
  font-size: 11px; font-weight: var(--bf-weight-bold); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--bf-color-text-muted);
}
:is(.bf-home, .bf-om) .bf-om-stmt__closen {
  margin: var(--bf-space-1) 0 0; font-size: var(--bf-text-xs);
  color: var(--bf-color-text-muted); font-style: italic;
}
:is(.bf-home, .bf-om) .bf-om-stmt__closev {
  font-family: var(--bf-om-font-display, var(--bf-font-display));
  font-weight: var(--bf-weight-bold); font-size: var(--bf-text-3xl);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  color: var(--bf-color-text); white-space: nowrap;
}
:is(.bf-home, .bf-om) .bf-om-stmt__empty {
  padding: var(--bf-space-8) var(--bf-space-5); text-align: center;
  color: var(--bf-color-text-muted); font-size: var(--bf-text-sm); margin: 0;
}

@media (max-width: 820px) {
  :is(.bf-home, .bf-om) .bf-om-stmt__head,
  :is(.bf-home, .bf-om) .bf-om-stmt__line { grid-template-columns: 1fr auto; }
  :is(.bf-home, .bf-om) .bf-om-stmt__tx,
  :is(.bf-home, .bf-om) .bf-om-stmt__bal,
  :is(.bf-home, .bf-om) .bf-om-stmt__hc:nth-child(1),
  :is(.bf-home, .bf-om) .bf-om-stmt__hc:nth-child(5) { display: none; }
}

@media print {
  :is(.bf-home, .bf-om) .bf-om-stmt { border: 0; }
  :is(.bf-home, .bf-om) .bf-om-stmt__line { break-inside: avoid; }
}

/* Report-level closing notes (the 9 / 9a "what this total means" lines). They belong
   to the report, not to a surface, so they render under all three. */
:is(.bf-home, .bf-om) .bf-om-stmt__foot {
  margin: var(--bf-space-3) 0 0; font-size: var(--bf-text-sm);
  color: var(--bf-color-text-muted); max-width: 80ch;
}

/* =============================================================================
   W38c  reports.php: the Grid result surface (roster / ops / fallback)
   -----------------------------------------------------------------------------
   Every report that is neither casework nor money: rosters (8, 8a, 8b, SURVEY),
   ops (6b, QUERIES), rate config (10, 10a, 9c) and anything unrecognized. These
   are reports you READ, so no spine, no actions, no drawer. Just a table that is
   legible, which the one it replaces was not: the old fallback cell was
   <td valign=top size="100" align="center"><font size=2>.

   The difference is that this one knows what its columns ARE. Money and numbers
   align right with tabular figures so the digits line up in a column; ids get
   tabular figures too; a status is a word in the tone of its state; free text is
   allowed to wrap rather than forcing the table wider than the screen.
   ============================================================================= */

:is(.bf-home, .bf-om) .bf-om-grid { margin: var(--bf-space-5) 0 0; }
:is(.bf-home, .bf-om) .bf-om-grid__scroll {
  overflow-x: auto; background: var(--bf-color-surface);
  border: 1px solid var(--bf-color-border); border-radius: var(--bf-radius-lg);
}
:is(.bf-home, .bf-om) .bf-om-grid__t { width: 100%; border-collapse: collapse; }
:is(.bf-home, .bf-om) .bf-om-grid__t thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bf-color-surface-sunken); color: var(--bf-color-text);
  text-align: left; white-space: nowrap;
  font-size: 10px; font-weight: var(--bf-weight-bold); letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--bf-space-3);
  border-bottom: 2px solid var(--bf-color-border-strong);
}
:is(.bf-home, .bf-om) .bf-om-grid__t thead th.is-num { text-align: right; }
:is(.bf-home, .bf-om) .bf-om-grid__t tbody td {
  padding: var(--bf-space-3);
  border-bottom: 1px solid var(--bf-color-border);
  font-size: var(--bf-text-sm); color: var(--bf-color-text); vertical-align: top;
}
:is(.bf-home, .bf-om) .bf-om-grid__t tbody tr:nth-child(odd) td {
  background: color-mix(in srgb, var(--bf-color-surface-alt) 50%, transparent);
}
:is(.bf-home, .bf-om) .bf-om-grid__t tbody tr:hover td {
  background: color-mix(in srgb, var(--bf-brand-primary) 6%, transparent);
}
/* the whole point: a number is a number */
:is(.bf-home, .bf-om) .bf-om-grid__t td.is-num {
  text-align: right; font-variant-numeric: tabular-nums;
  font-weight: var(--bf-weight-medium); white-space: nowrap;
}
:is(.bf-home, .bf-om) .bf-om-grid__t td.is-id {
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
:is(.bf-home, .bf-om) .bf-om-grid__t td.is-text {
  max-width: 42ch; white-space: normal; color: var(--bf-color-text-muted);
}
:is(.bf-home, .bf-om) .bf-om-grid__group td {
  background: var(--bf-color-paper); font-size: 11px;
  font-weight: var(--bf-weight-bold); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bf-color-text); border-bottom: 1px solid var(--bf-color-border-strong);
}
:is(.bf-home, .bf-om) .bf-om-grid__pill {
  display: inline-block; font-size: 11px; font-weight: var(--bf-weight-bold);
  padding: 2px 9px; border-radius: var(--bf-radius-pill); white-space: nowrap;
  background: var(--bf-color-surface-sunken); color: var(--bf-color-text-muted);
}
:is(.bf-home, .bf-om) .bf-om-grid__pill.is-ok   { background: var(--bf-color-success-bg); color: #00694a; }
:is(.bf-home, .bf-om) .bf-om-grid__pill.is-wait { background: var(--bf-color-info-bg);    color: #005a94; }
:is(.bf-home, .bf-om) .bf-om-grid__pill.is-hold { background: var(--bf-color-warning-bg); color: #8a5400; }
:is(.bf-home, .bf-om) .bf-om-grid__pill.is-bad  { background: var(--bf-color-danger-bg);  color: #a41436; }
:is(.bf-home, .bf-om) .bf-om-grid__count {
  margin: var(--bf-space-3) 0 0; font-size: var(--bf-text-xs);
  color: var(--bf-color-text-muted); font-variant-numeric: tabular-nums;
}
:is(.bf-home, .bf-om) .bf-om-grid__empty {
  padding: var(--bf-space-8) var(--bf-space-5); text-align: center; margin: 0;
  color: var(--bf-color-text-muted); font-size: var(--bf-text-sm);
}

/* =============================================================================
   W38d  reports.php: the page head + criteria bar
   -----------------------------------------------------------------------------
   Replaces a bare <h2> with a button floated beside it, plus a Bootstrap-3 tab
   strip whose tabs were "Preset Dates" / "Custom Dates" / "Report Actions" -- so
   Refresh, CSV and Email were hidden BEHIND A TAB, and the email field was a
   full-width input with its Send button dragged back on top of it via
   position:relative;top:-34px. On a report with no date filter the strip
   collapsed to a single orphaned tab labelled "Report Actions".

   Now: one head that says what you are looking at and what produced it, and one
   bar that carries every control in a single row. The date controls only exist
   when the report's query actually has a date clause, and the custom-date fields
   are native <input type="date"> (the old ones opened a POPUP WINDOW to draw a
   calendar in it).
   ============================================================================= */

:is(.bf-home, .bf-om) .bf-om-rephead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--bf-space-5); flex-wrap: wrap;
  padding-bottom: var(--bf-space-4); margin-bottom: var(--bf-space-4);
  border-bottom: 2px solid var(--bf-color-text);
}
:is(.bf-home, .bf-om) .bf-om-rephead__lead { min-width: 0; }
:is(.bf-home, .bf-om) .bf-om-rephead__kicker {
  display: flex; align-items: center; gap: var(--bf-space-2);
  margin: 0 0 var(--bf-space-2);
  font-size: 11px; font-weight: var(--bf-weight-bold); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--bf-color-text-muted);
}
:is(.bf-home, .bf-om) .bf-om-rephead__kicker::before {
  content: ""; width: 18px; height: 2px; background: var(--bf-brand-accent); flex: none;
}
:is(.bf-home, .bf-om) .bf-om-rephead__title {
  font-family: var(--bf-om-font-display, var(--bf-font-display));
  font-weight: 800; font-size: var(--bf-text-3xl); line-height: var(--bf-leading-tight);
  letter-spacing: -0.02em; margin: 0; color: var(--bf-color-text);
}
:is(.bf-home, .bf-om) .bf-om-rephead__sub {
  margin: var(--bf-space-2) 0 0; font-size: var(--bf-text-sm);
  color: var(--bf-color-text-muted);
}
:is(.bf-home, .bf-om) .bf-om-rephead__dot { color: var(--bf-color-border-strong); }
:is(.bf-home, .bf-om) .bf-om-rephead__back {
  flex: none; display: inline-flex; align-items: center; gap: var(--bf-space-2);
  padding: var(--bf-space-2) var(--bf-space-4);
  border: 1px solid var(--bf-color-border-strong); border-radius: var(--bf-radius-pill);
  background: var(--bf-color-surface); color: var(--bf-color-text);
  font-size: var(--bf-text-xs); font-weight: var(--bf-weight-medium);
  text-decoration: none; white-space: nowrap;
}
:is(.bf-home, .bf-om) .bf-om-rephead__back:hover {
  border-color: var(--bf-color-text); color: var(--bf-color-text);
  background: var(--bf-color-surface-alt);
}

/* the criteria bar: every control the report honors, in one row */
:is(.bf-home, .bf-om) .bf-om-repbar {
  display: flex; align-items: center; gap: var(--bf-space-4); flex-wrap: wrap;
  padding: var(--bf-space-3) var(--bf-space-4);
  background: var(--bf-color-surface); border: 1px solid var(--bf-color-border);
  border-radius: var(--bf-radius-lg);
}
:is(.bf-home, .bf-om) .bf-om-repbar__grp {
  display: flex; align-items: center; gap: var(--bf-space-2); flex-wrap: wrap;
}
:is(.bf-home, .bf-om) .bf-om-repbar__lab {
  margin: 0; font-size: 10px; font-weight: var(--bf-weight-bold);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--bf-color-text-muted);
  white-space: nowrap;
}
:is(.bf-home, .bf-om) .bf-om-repbar__sel,
:is(.bf-home, .bf-om) .bf-om-repbar__date,
:is(.bf-home, .bf-om) .bf-om-repbar__input {
  height: 36px; padding: 0 var(--bf-space-3);
  border: 1px solid var(--bf-color-border-strong); border-radius: var(--bf-radius-sm);
  background: var(--bf-color-surface); color: var(--bf-color-text);
  font-family: var(--bf-font-body); font-size: var(--bf-text-sm);
  font-variant-numeric: tabular-nums; outline: none;
}
:is(.bf-home, .bf-om) .bf-om-repbar__sel:focus,
:is(.bf-home, .bf-om) .bf-om-repbar__date:focus,
:is(.bf-home, .bf-om) .bf-om-repbar__input:focus {
  border-color: var(--bf-brand-primary); box-shadow: 0 0 0 3px var(--bf-color-focus-ring);
}
/* the native picker's own indicator: make it look like it belongs here */
:is(.bf-home, .bf-om) .bf-om-repbar__date::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: 0.55;
}
:is(.bf-home, .bf-om) .bf-om-repbar__date::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* actions sit right; the bar stays one row */
:is(.bf-home, .bf-om) .bf-om-repbar__acts {
  display: flex; align-items: center; gap: var(--bf-space-2);
  margin-left: auto; flex-wrap: wrap;
}
:is(.bf-home, .bf-om) .bf-om-repbar__btn {
  display: inline-flex; align-items: center; gap: var(--bf-space-2);
  height: 36px; padding: 0 var(--bf-space-4);
  border: 1px solid var(--bf-color-border-strong); border-radius: var(--bf-radius-sm);
  background: var(--bf-color-surface); color: var(--bf-color-text);
  font-family: var(--bf-font-body); font-size: var(--bf-text-xs);
  font-weight: var(--bf-weight-medium); cursor: pointer; white-space: nowrap;
}
:is(.bf-home, .bf-om) .bf-om-repbar__btn:hover { border-color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-repbar__btn[aria-expanded="true"] {
  background: var(--bf-color-text); border-color: var(--bf-color-text);
  color: var(--bf-color-text-inverse);
}
:is(.bf-home, .bf-om) .bf-om-repbar__btn--go {
  background: var(--bf-color-primary); border-color: var(--bf-color-primary);
  color: var(--bf-color-on-primary);
}
:is(.bf-home, .bf-om) .bf-om-repbar__btn--go:hover {
  background: var(--bf-color-primary-hover); border-color: var(--bf-color-primary-hover);
  color: var(--bf-color-on-primary);
}

/* the recipients field only exists once you ask to email */
:is(.bf-home, .bf-om) .bf-om-repbar__email {
  display: flex; align-items: center; gap: var(--bf-space-2);
  flex-basis: 100%; padding-top: var(--bf-space-3);
  border-top: 1px solid var(--bf-color-border);
}
:is(.bf-home, .bf-om) .bf-om-repbar__email.is-hidden { display: none; }
:is(.bf-home, .bf-om) .bf-om-repbar__input { flex: 1; min-width: 0; }

@media (max-width: 700px) {
  :is(.bf-home, .bf-om) .bf-om-repbar__acts { margin-left: 0; }
}

@media print {
  :is(.bf-home, .bf-om) .bf-om-repbar,
  :is(.bf-home, .bf-om) .bf-om-rephead__back { display: none; }
}

/* A report with no date filter has only actions in its bar: sit them left, so the bar
   does not read as an empty box with three buttons stranded on the far side. */
:is(.bf-home, .bf-om) .bf-om-repbar--acts-only .bf-om-repbar__acts { margin-left: 0; }

/* The report head is now the FIRST thing on a report page: the Reports Desk masthead
   renders only on the desk itself, so the head needs the breathing room the masthead
   used to provide (it carried margin-top: --bf-space-5), or the title butts straight
   into the site header. */
:is(.bf-home, .bf-om) .bf-om-rephead { margin-top: var(--bf-space-5); }

/* "Back to the desk" lives in the crumb line, where the masthead's own CSR Home link
   used to sit. The right slot carries the shared .bf-csr-banner, as on every other page. */
:is(.bf-home, .bf-om) .bf-om-rephead__crumb {
  display: inline-flex; align-items: center; gap: var(--bf-space-1);
  color: var(--bf-color-primary-text); text-decoration: none;
  font-weight: var(--bf-weight-bold); letter-spacing: 0.14em;
}
:is(.bf-home, .bf-om) .bf-om-rephead__crumb:hover {
  color: var(--bf-color-text); text-decoration: underline; text-underline-offset: 3px;
}

/* A report page no longer carries .bf-om-brief (that is the desk's own family), which
   was also what suppressed link underlines inside it. Keep the report surfaces quiet. */
:is(.bf-home, .bf-om) :is(.bf-om-rep, .bf-om-stmt, .bf-om-grid) a { text-decoration: none; }
:is(.bf-home, .bf-om) :is(.bf-om-rep, .bf-om-stmt, .bf-om-grid) a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* A report that carries its own options (Who's Online: sort + hide bots) gets a second
   bar under the main one, in the same vocabulary rather than a run of bare radios. */
:is(.bf-home, .bf-om) .bf-om-repbar--sub { margin-top: var(--bf-space-3); }
:is(.bf-home, .bf-om) .bf-om-repbar__radio,
:is(.bf-home, .bf-om) .bf-om-repbar__check {
  display: inline-flex; align-items: center; gap: var(--bf-space-2);
  margin: 0; padding: 6px var(--bf-space-3);
  border: 1px solid var(--bf-color-border); border-radius: var(--bf-radius-pill);
  font-size: var(--bf-text-xs); color: var(--bf-color-text);
  cursor: pointer; white-space: nowrap;
}
:is(.bf-home, .bf-om) .bf-om-repbar__radio:hover,
:is(.bf-home, .bf-om) .bf-om-repbar__check:hover { border-color: var(--bf-color-text); }
:is(.bf-home, .bf-om) .bf-om-repbar__radio:has(input:checked),
:is(.bf-home, .bf-om) .bf-om-repbar__check:has(input:checked) {
  background: var(--bf-color-text); border-color: var(--bf-color-text);
  color: var(--bf-color-text-inverse);
}
:is(.bf-home, .bf-om) .bf-om-repbar__radio input,
:is(.bf-home, .bf-om) .bf-om-repbar__check input { margin: 0; }

/* No single cell may dictate the width of the table.
   Who's Online was the worst case: a full user-agent string plus a page URL carrying a
   session token are 120+ characters each, and between them they pushed the grid to
   1782px inside a 1150px page, so you had to drag the table sideways to read it. Free
   text is clipped to a readable width with the whole value on the title attribute (and
   whole in the CSV); everything else is allowed to break rather than push. */
:is(.bf-home, .bf-om) .bf-om-grid__clip {
  display: block; max-width: 24ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
:is(.bf-home, .bf-om) .bf-om-grid__t td.is-id .bf-om-grid__clip { max-width: 16ch; }
/* Long values are CLIPPED (above), so nothing needs to break mid-token. An IP rendered as
   "73.44.19.2 / 01" or a timestamp split over two lines reads as corrupt data, which is
   what a blanket overflow-wrap did to them. Short values stay whole. */
:is(.bf-home, .bf-om) .bf-om-grid__t tbody td.is-num,
:is(.bf-home, .bf-om) .bf-om-grid__t tbody td.is-id { white-space: nowrap; }
/* A timestamp may wrap at its SPACE (date over time), which reads fine and keeps the
   column narrow. It must never break mid-token, which is what read as corrupt. */
:is(.bf-home, .bf-om) .bf-om-grid__t tbody td.is-when { white-space: normal; }
:is(.bf-home, .bf-om) .bf-om-grid__t tbody td.is-when span { white-space: nowrap; }
:is(.bf-home, .bf-om) .bf-om-grid__ua { white-space: nowrap; cursor: help; }