/*
 * Brandagy global chrome — header bar, nav mega-panels, account panel, drawer.
 *
 * Ported literally from the site-chrome spec: the .bgc-* class names and raw
 * hex values are the spec's own. Everything is written with logical properties
 * so the identical stylesheet mirrors for RTL and LTR with no direction
 * overrides.
 *
 * --bgc-header-h is the single source of truth for the bar's height. Panels and
 * the curtain both read it; never hard-code an offset, or a panel detaches from
 * the bar and leaves an undimmed strip between the two.
 */

:root {
  --bgc-header-h: 68px;
  /* WordPress pushes the page down by the admin bar; the panels have to follow. */
  --bgc-header-top: 0px;

  --bgc-ink: #163300;
  --bgc-ink-2: #4A5A3C;
  --bgc-surface: #FFFFFF;
  /* The ground under the round tools and the account pill. It is a token, not
     a literal, because the blog's green editorial bar re-points it below. */
  --bgc-chip: #FFFFFF;
  --bgc-chip-hover: #F2F4EF;
  --bgc-hairline: #E6E8E0;
  --bgc-hairline-strong: #D6DCCB;
  --bgc-hairline-2: #E1E2DD;
  --bgc-panel-edge: #EFF0EC;
  --bgc-row-hover: #F4F7EE;
  --bgc-accent-tint: #EAF3D8;
  --bgc-active: #9FE870;
  --bgc-ico-ring: #DDE3D5;
  --bgc-shot: #F1F4EA;
  --bgc-curtain: rgba(11, 20, 8, 0.42);
  --bgc-panel-shadow: 0 24px 48px -30px rgba(22, 51, 0, 0.22);
  --bgc-font: system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;
}

/* Shared desktop height also keeps sticky content and open panels aligned. */
@media (min-width: 760px) {
  :root {
    --bgc-header-h: 75px;
    --header-h: var(--bgc-header-h);
  }
}

/* Scoped reset. Every width and height below is stated as the outer box, so
   the chrome measures the same whether or not the page's own reset loaded. */
.bgc-h, .bgc-h *,
.bgc-mm, .bgc-mm *,
.bgc-drawer, .bgc-drawer *,
.bgc-scrim,
.bgc-bm, .bgc-bm *,
.bgc-um, .bgc-um *,
.bgc-curtain { box-sizing: border-box; }

body.admin-bar { --bgc-header-top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar { --bgc-header-top: 46px; }
}

/* ---------------------------------------------------------------- header bar */

.bgc-h {
  position: sticky;
  inset-block-start: var(--bgc-header-top);
  z-index: 100;
  background: var(--bgc-surface);
  font-family: var(--bgc-font);
}

/* Individual blog articles use the green editorial header. Keep these tokens
   on the bar so account panels and navigation drawers retain their surfaces. */
.single-post .bgc-h {
  --bgc-surface: var(--color-brand-green);
  --bgc-ink: var(--color-brand-forest);
  --bgc-ink-2: var(--color-brand-forest);
  --bgc-chip: transparent;
  --bgc-chip-hover: var(--color-green-hover);
  --bgc-hairline: transparent;
  --bgc-hairline-strong: transparent;
  --bgc-row-hover: var(--color-green-hover);
  --bgc-active: var(--color-green-hover);
}

.single-post .bgc-h:has([aria-expanded="true"]) {
  --bgc-surface: var(--color-white);
}

.single-post .bgc-h .bgc-burger:hover {
  background: var(--color-green-hover);
}

/*
 * On the blog's green bar the tools would otherwise be outlines on a colour
 * strong enough to swallow them: --bgc-hairline goes transparent there, so a
 * ring is not available to hold them either. White discs give them back their
 * own ground — the one shape in the bar that is not the header's colour — and
 * the ink glyph reads at full contrast on it. The account pill stays flush
 * with the bar: it already carries a name and an avatar, so it needs no disc
 * to be found.
 */
.single-post .bgc-h .bgc-round {
  background: #FFFFFF;
  border-color: transparent;
}

.single-post .bgc-h .bgc-round:hover,
.single-post .bgc-h .bgc-round.is-on {
  background: #F2F4EF;
  border-color: transparent;
}

/* The ring separates the badge from the disc it sits on, so it follows the
   disc's colour rather than the bar's. */
.single-post .bgc-h .bgc-round-badge { border-color: #FFFFFF; }

/* The lime pill is the one warm surface in the bar, so it disappears against
   the blog's green header. There it inverts instead — the call survives, the
   contrast holds. */
.single-post .bgc-h .bgc-signup {
  background: var(--color-brand-forest);
  color: var(--color-brand-green);
}

.single-post .bgc-h .bgc-signup:hover {
  background: #1E4A05;
}

.bgc-h-in {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  height: var(--bgc-header-h);
  display: flex;
  align-items: center;
  gap: 22px;
}

.bgc-h-spacer { flex: 1; }

.bgc-h-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bgc-h button,
.bgc-h a { font-family: inherit; }

.bgc-h :focus-visible,
.bgc-mm :focus-visible {
  outline: 2px solid var(--bgc-ink);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Burger — visible at every width; the drawer is a superset of the bar. */
.bgc-burger {
  flex: none;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--bgc-ink);
  cursor: pointer;
  transition: background .16s;
}

.bgc-burger:hover { background: #F3F3EF; }

/* Logo — the mark alone. The height is also inline on the <img> so the mark
   survives a style-less re-render (print, screenshot capture). */
.bgc-logo {
  flex: none;
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
}

.bgc-logo img {
  height: 52px;
  width: auto;
  display: block;
}

/* Segmented nav — triggers, not links. */
.bgc-seg {
  display: flex;
  align-items: center;
  gap: 4px;
}

.bgc-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--bgc-ink);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s;
}

.bgc-seg-btn:hover { background: var(--bgc-row-hover); }

/* The triggers carry no caret, so the open one has to say so by itself: the
   bright green is the palette's active state, and the fill reads at a glance
   without asking anyone to notice which way a 12px arrow points. */
.bgc-seg-btn.is-on,
.bgc-seg-btn.is-on:hover { background: var(--bgc-active); }

.bgc-chev {
  width: 12px;
  height: 12px;
  flex: none;
  color: currentColor;
  transition: transform .18s ease;
}

.bgc-chip.is-on .bgc-chev { transform: rotate(180deg); }

/* --------------------------------------------------- trailing tool buttons */

/* One shape for every tool in the cluster. Only the account control carries a
   label: the tools are recurring and recognisable, and a row of labelled pills
   would out-shout the three nav labels on the other side of the bar. */
.bgc-round {
  position: relative;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bgc-chip);
  border: 1px solid var(--bgc-hairline);
  color: var(--bgc-ink);
  cursor: pointer;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease;
}

/* The ink never changes on hover — only the ground under it. */
.bgc-round:hover {
  background: var(--bgc-chip-hover);
  border-color: var(--bgc-hairline-strong);
}

.bgc-round svg { display: block; flex: none; }

.bgc-round.is-on {
  background: var(--bgc-chip-hover);
  border-color: var(--bgc-ink);
}

/* Drawn only when the cart holds something. The 2px white ring is what keeps
   the badge off the button's own border. Ink and lime, never red: nothing in
   this product is an alert, and red would be the only warm colour on the page. */
.bgc-round-badge {
  position: absolute;
  top: -2px;
  inset-inline-end: -2px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 999px;
  border: 2px solid var(--bgc-surface);
  background: var(--bgc-ink);
  color: var(--bgc-active);
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}

/* ------------------------------------------------------------ account chip */

.bgc-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  box-sizing: border-box;
  padding: 3px;
  padding-inline-start: 14px;
  border-radius: 999px;
  background: var(--bgc-chip);
  border: 1px solid var(--bgc-hairline);
  color: var(--bgc-ink);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}

.bgc-chip:hover {
  background: var(--bgc-chip-hover);
  border-color: var(--bgc-hairline-strong);
}

.bgc-chip.is-on {
  background: var(--bgc-chip-hover);
  border-color: var(--bgc-ink);
}

/* The monogram sits underneath; the photo covers it when it loads. A missing
   or un-embeddable image therefore degrades to an initial, not a blank disc —
   which is what keeps signed-in pages correct in PNG and PDF exports. */
.bgc-avatar {
  position: relative;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bgc-ink);
  display: grid;
  place-items: center;
}

.bgc-avatar-mono {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  user-select: none;
}

.bgc-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bgc-chip-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--bgc-ink);
  white-space: nowrap;
}

/* Signed out: a quiet link and the lime pill. The pill is the only lime in the
   bar, so the sign-up call needs no size or weight to be found. */
.bgc-quiet {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--bgc-ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.bgc-quiet:hover { background: var(--bgc-row-hover); }

.bgc-signup {
  display: inline-flex;
  align-items: center;
  height: 46px;
  box-sizing: border-box;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--bgc-active);
  color: var(--bgc-ink);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease;
}

.bgc-signup:hover { background: #8FDD5C; }


/*
 * The chip and its panel appear and disappear in the SAME declaration, so no
 * future breakpoint edit can leave a button reporting aria-expanded="true"
 * with nothing painted. That bug happened twice while this cluster was built —
 * once at tablet width, once at phone width — each time because the two rules
 * were independent. Below 1080px the account route is the drawer's account
 * screen, which is why the pair goes together here.
 */
@media (max-width: 1079px) {
  .bgc-chip,
  .bgc-um { display: none !important; }
  .bgc-seg { display: none; }
}

/*
 * Phones: search (and the cart, when signed in) come down to 42px and the
 * community button goes. It is the one tool in the cluster the drawer already
 * carries by name, so dropping it costs no route; search has no equivalent
 * anywhere else in the bar, so it stays at every width.
 */
@media (max-width: 700px) {
  .bgc-community { display: none; }

  .bgc-round {
    width: 42px;
    height: 42px;
  }
}

/* Phones. Every control in the bar is nowrap and unshrinkable, so the row has
   no give of its own: the gutter and the gaps are what has to come in, or the
   row's min-content pushes the whole page sideways. The auth controls carry
   their own compacting further down this file. */
@media (max-width: 599px) {
  .bgc-h-in {
    padding: 0 16px;
    gap: 12px;
    min-width: 0;
  }

  .bgc-h-right {
    gap: 8px;
    min-width: 0;
  }
}

/* The narrowest phones get one more step in. */
@media (max-width: 399px) {
  .bgc-h-in {
    padding: 0 10px;
    gap: 6px;
  }

  .bgc-h-right { gap: 6px; }
}

/* Never leave a control in the bar whose action is unavailable: at desktop the
   dropdown panels carry the drawer's content, so the burger has nothing to add. */
@media (min-width: 1080px) {
  .bgc-burger,
  .bgc-scrim,
  .bgc-drawer { display: none !important; }
}

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

.bgc-mm,
.bgc-bm,
.bgc-um {
  position: fixed;
  inset-inline: 0;
  inset-block-start: calc(var(--bgc-header-top) + var(--bgc-header-h));
  max-height: calc(100vh - var(--bgc-header-top) - var(--bgc-header-h) - 16px);
  overflow-y: auto;
  background: var(--bgc-surface);
  border-bottom: 1px solid var(--bgc-panel-edge);
  box-shadow: var(--bgc-panel-shadow);
  z-index: 99;
  font-family: var(--bgc-font);
  animation: bgc-bm-in .4s cubic-bezier(.22, .86, .28, 1) both;
  transform-origin: top center;
}

.bgc-um { z-index: 120; }

/*
 * The curtain. The surface unrolls from its top edge while the content stays
 * pinned, so the panel *reveals* what is behind it instead of sliding it in.
 * clip-path runs on the compositor and needs no height measurement, so the
 * same four lines work whatever a panel happens to contain — and the content
 * explicitly does not animate, or the curtain reads as two moving things.
 */
@keyframes bgc-bm-in {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}

.bgc-mm-in,
.bgc-sp-in { animation: none; }

.bgc-mm-in {
  max-width: 1280px;
  margin: 0 auto;
  padding: 30px 40px 38px;
  display: grid;
  grid-template-columns: 300px repeat(3, minmax(0, 1fr));
  gap: 40px;
  align-items: start;
}

@media (max-width: 1199px) {
  /* All four tracks stay in the grid — collapsing one with `1 / -1` pushes the
     last column below the viewport. */
  .bgc-mm-in {
    grid-template-columns: 250px repeat(3, minmax(0, 1fr));
    gap: 26px;
    padding: 22px 26px 32px;
  }
}

/* .bgc-um is NOT listed here: it is hidden with .bgc-chip, in one declaration,
   further up this file. Adding it back would recreate the bug that rule exists
   to prevent. The search panel is not listed either — search answers from every
   width, so its panel outlives the desktop ones. */
@media (max-width: 1079px) {
  .bgc-mm,
  .bgc-bm,
  .bgc-curtain { display: none !important; }

  /* …except when search is what is open. The panel dims the page behind it at
     every width, so the curtain has to survive the breakpoint with it. */
  html[data-bgc-open="search"] .bgc-curtain { display: block !important; }
}

/* ----------------------------------------------------------- search panel */

/*
 * Fixed to the bar's bottom edge and full-bleed, so it reads as the header
 * opening rather than as a menu floating over the page. It shares the curtain
 * entrance with the nav panels above.
 */
.bgc-sp {
  position: fixed;
  inset-inline: 0;
  inset-block-start: calc(var(--bgc-header-top) + var(--bgc-header-h));
  max-height: calc(100vh - var(--bgc-header-top) - var(--bgc-header-h) - 16px);
  overflow-y: auto;
  background: var(--bgc-surface);
  border-bottom: 1px solid var(--bgc-panel-edge);
  box-shadow: var(--bgc-panel-shadow);
  z-index: 110;
  font-family: var(--bgc-font);
  animation: bgc-bm-in .4s cubic-bezier(.22, .86, .28, 1) both;
  transform-origin: top center;
}

/* The deep top padding drops the field clear of the header edge; the
   min-height stops the panel jumping as results appear and disappear. */
.bgc-sp-in {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 20px 64px;
  min-height: 380px;
  box-sizing: border-box;
}

.bgc-sp-form { margin: 0; }

/* 1.5px of full ink: the field is focused the moment the panel opens, so it is
   drawn focused. */
.bgc-sp-field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-inline: 20px;
  border: 1.5px solid var(--bgc-ink);
  border-radius: 999px;
  background: var(--bgc-surface);
}

.bgc-sp-glass {
  flex: none;
  color: var(--bgc-ink);
}

.bgc-sp-input {
  flex: 1;
  min-width: 0;
  padding: 16px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--bgc-ink);
  font-family: inherit;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
  appearance: none;
}

.bgc-sp-input::placeholder { color: var(--bgc-ink-2); }

/* Safari paints its own clear button inside a type=search; it lands on the
   keycap and reads as a second control. */
.bgc-sp-input::-webkit-search-decoration,
.bgc-sp-input::-webkit-search-cancel-button { appearance: none; }

.bgc-sp-esc {
  flex: none;
  padding: 3px 8px;
  border: 1px solid var(--bgc-hairline-2);
  border-radius: 6px;
  color: var(--bgc-ink-2);
  font-size: 12px;
  line-height: 1.4;
}

.bgc-sp-body { margin-block-start: 30px; }

/* A hairline under every group heading, so two groups never run together. */
.bgc-sp-label {
  margin: 0 0 10px;
  padding-block-end: 8px;
  border-bottom: 1px solid var(--bgc-panel-edge);
  font-size: 13px;
  font-weight: 400;
  color: var(--bgc-ink-2);
}

.bgc-sp-group + .bgc-sp-group { margin-block-start: 26px; }

.bgc-sp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* A chip fills the field rather than navigating, so the user sees results
   before committing to them. */
.bgc-sp-chip {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--bgc-hairline-2);
  border-radius: 999px;
  background: var(--bgc-surface);
  color: var(--bgc-ink);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s, border-color .16s;
}

.bgc-sp-chip:hover {
  background: var(--bgc-row-hover);
  border-color: var(--bgc-ink);
}

.bgc-sp-row {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 60px;
  padding-inline: 10px;
  border-radius: 13px;
  color: inherit;
  text-decoration: none;
  transition: background .16s;
}

.bgc-sp-row:hover { background: var(--bgc-row-hover); }

/* Ink on lime for a standard listing, inverted for a premium one — the tile is
   the only place the two are told apart, so the inversion has to be total. */
.bgc-sp-tile {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--bgc-active);
  color: var(--bgc-ink);
  font-size: 16px;
  font-weight: 700;
}

.bgc-sp-tile.is-premium {
  background: var(--bgc-ink);
  color: var(--bgc-active);
}

/* The children hug their text rather than stretching: the domain carries
   dir="ltr", and a stretched box would align it to the row's far edge, leaving
   it stranded a column away from the name it belongs to. */
.bgc-sp-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.bgc-sp-text > * { max-width: 100%; }

.bgc-sp-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--bgc-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bgc-sp-domain {
  font-size: 13px;
  font-weight: 400;
  color: var(--bgc-ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bgc-sp-price {
  flex: none;
  font-size: 15px;
  font-weight: 700;
  color: var(--bgc-ink);
  white-space: nowrap;
}

/* No match is not a dead end: the line states the fact, and the two chips under
   it carry the query on to the two places that can still answer it. */
.bgc-sp-none {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 600;
  color: var(--bgc-ink);
}

.bgc-sp-note {
  margin: 0;
  font-size: 14px;
  color: var(--bgc-ink-2);
}

@media (max-width: 700px) {
  .bgc-sp-in {
    padding: 34px 18px 44px;
    min-height: 320px;
  }

  /* Anything under 16px makes iOS Safari zoom the page on focus. */
  .bgc-sp-input { font-size: 16px; }

  .bgc-sp-esc { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bgc-sp { animation: none; }
}

@media print {
  .bgc-sp { display: none !important; }
}

/* ---------------------------------------------------------------- curtain */

.bgc-curtain {
  position: fixed;
  inset: 0;
  inset-block-start: calc(var(--bgc-header-top) + var(--bgc-header-h));
  background: var(--bgc-curtain);
  z-index: 90;
  border: 0;
  padding: 0;
  animation: bgc-curtain-in .3s cubic-bezier(.22, .86, .28, 1);
}

@keyframes bgc-curtain-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ------------------------------------------------------------- promo card */

.bgc-mm-promo {
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  border: 1px solid var(--bgc-hairline);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .18s, box-shadow .18s;
}

.bgc-mm-promo:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -22px rgba(22, 51, 0, 0.34);
}

.bgc-mm-shot,
.bgc-mm-face {
  height: 190px;
  background: var(--bgc-shot) center / cover no-repeat;
  overflow: hidden;
}

.bgc-mm-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1199px) {
  .bgc-mm-shot,
  .bgc-mm-face { height: 150px; }
  .bgc-mm-ptitle { font-size: 22px; }
}

.bgc-mm-promo-body { padding: 18px 20px 20px; }

.bgc-mm-ptitle {
  display: block;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--bgc-ink);
  margin: 0 0 8px;
}

.bgc-mm-pdesc {
  display: block;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--bgc-ink-2);
  margin: 0 0 14px;
}

.bgc-mm-pcta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--bgc-ink);
}

/*
 * Glyph orientation is the one thing logical properties cannot express: an SVG
 * path does not mirror with `dir`. These three rules are the whole extent of
 * direction-specific CSS in the file, and each flips a chevron, never a layout.
 */
.bgc-arrow {
  width: 17px;
  height: 17px;
  flex: none;
}

[dir="ltr"] .bgc-arrow { transform: scaleX(-1); }

/* ------------------------------------------------------------ link columns */

.bgc-mm-col { min-width: 0; }

.bgc-mm-label {
  font-size: 13px;
  font-weight: 400;
  color: var(--bgc-ink-2);
  padding-inline-start: 2px;
  margin: 0 0 8px;
}

.bgc-mm-rule {
  height: 1px;
  background: var(--bgc-hairline);
  margin-bottom: 6px;
}

.bgc-mm-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 46px;
  padding: 0 2px;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: background .16s;
}

.bgc-mm-row:hover { background: var(--bgc-row-hover); }

/*
 * Logout is the one row in the panel that ends a session rather than going
 * somewhere, so it is the one row that leaves the ink palette. The ring goes
 * with the glyph — a red label beside a neutral icon reads as a styling slip,
 * not as a warning. Same red the drawer's logout already uses.
 */
.bgc-mm-row.is-danger,
.bgc-mm-row.is-danger .bgc-mm-ico { color: #A32A1F; }

.bgc-mm-row.is-danger .bgc-mm-ico { border-color: #E8C9C5; }

.bgc-mm-row.is-danger:hover { background: #FBF2F1; }

.bgc-mm-row.is-danger:hover .bgc-mm-ico { border-color: #D9A9A3; }

.bgc-mm-row.has-ico {
  padding: 0 10px;
  margin-inline: -10px;
}

.bgc-mm-ico {
  width: 40px;
  height: 40px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--bgc-ico-ring);
  border-radius: 50%;
  color: var(--bgc-ink);
}

.bgc-mm-t {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: var(--bgc-ink);
}

/* --------------------------------------------------------- footer strip */

.bgc-mm-foot {
  border-top: 1px solid var(--bgc-hairline);
  background: var(--bgc-surface);
}

.bgc-mm-foot-in {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 40px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.bgc-mm-foot-spacer { flex: 1; }

.bgc-mm-footcta {
  font-size: 15px;
  font-weight: 700;
  color: var(--bgc-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .16s;
}

.bgc-mm-footcta:hover { border-bottom-color: var(--bgc-ink); }

.bgc-mm-stat {
  font-size: 14px;
  font-weight: 400;
  color: var(--bgc-ink-2);
}

/* Numbers stay Latin, matching the rest of the site. */
.bgc-mm-stat b {
  font-weight: 700;
  color: var(--bgc-ink);
  unicode-bidi: isolate;
}

.bgc-mm-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #C9D2BE;
}

/* --------------------------------------------------------- account states */

.bgc-mm-states {
  margin-top: 10px;
  padding-top: 4px;
  border-top: 1px solid var(--bgc-hairline);
}

.bgc-mm-state {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 46px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 400;
  color: var(--bgc-ink-2);
  text-align: start;
}

.bgc-mm-state .bgc-spacer { flex: 1; }

.bgc-mm-state .bgc-tag {
  font-size: 13px;
  font-weight: 700;
  color: var(--bgc-ink);
  background: var(--bgc-accent-tint);
  border-radius: 999px;
  padding: 3px 11px;
}

.bgc-mm-state.is-action {
  cursor: pointer;
  color: var(--bgc-ink);
  font-weight: 500;
  text-decoration: none;
}

.bgc-mm-state.is-action:hover { background: var(--bgc-row-hover); }

/* ------------------------------------------------------- account footer */

.bgc-um-mail {
  font-weight: 700;
  color: var(--bgc-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .16s;
}

.bgc-um-mail:hover { border-bottom-color: var(--bgc-ink); }

.bgc-um-socials {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bgc-um-so {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--bgc-ico-ring);
  border-radius: 50%;
  color: var(--bgc-ink);
  transition: background .16s, border-color .16s;
}

.bgc-um-so:hover {
  background: var(--bgc-row-hover);
  border-color: var(--bgc-ink);
}


html.bgc-locked, html.bgc-locked body { overflow: hidden; }

/* ================================================================= drawer ==
 * Phone and tablet only. Two levels — root and one sub-screen; no third level
 * and no accordions, so every row either navigates or pushes exactly once.
 */

.bgc-scrim {
  position: fixed;
  inset: 0;
  z-index: 200;
  /* The exact ink of the dropdown curtain, so the site's two dimming layers
     match. No backdrop-filter. */
  background: rgba(11, 20, 8, 0.42);
  border: 0;
  padding: 0;
  animation: bgc-fade .2s ease;
}

@keyframes bgc-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.bgc-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  /* Which way "outside the inline-start edge" points: start is the left in
     LTR and the right in RTL, so only the sign flips between them. */
  --bgc-slide-from: -24px;
  z-index: 201;
  width: 100vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  font-family: var(--bgc-font);
  animation: bgc-slide .28s cubic-bezier(.2, .7, .2, 1);
}

/* Author display rules must never override the closed drawer state. */
.bgc-drawer[hidden],
.bgc-scrim[hidden] { display: none !important; }

/* The nudge rides on a transform, never on the logical inset. An inset in the
   keyframes makes the open drawer's geometry depend on the animation reaching
   its last frame: for the whole active phase the box really sits 24px past the
   inline-start edge, and any state that stalls the clock — a throttled or
   background tab, an interrupted restart — leaves it parked there. A transform
   offset is painted, not laid out, so the box stays flush at
   inset-inline-start: 0 from the first frame and the resting state needs no
   fill-mode to be correct. */
@keyframes bgc-slide {
  from { opacity: 0; transform: translateX(var(--bgc-slide-from)); }
  to { opacity: 1; transform: none; }
}

[dir="rtl"] .bgc-drawer { --bgc-slide-from: 24px; }

@media (min-width: 700px) {
  .bgc-drawer {
    width: 420px;
    max-width: 420px;
    box-shadow: 20px 0 60px -20px rgba(22, 51, 0, 0.28);
  }

  [dir="rtl"] .bgc-drawer { box-shadow: -20px 0 60px -20px rgba(22, 51, 0, 0.28); }
}

.bgc-dl,
.bgc-ds {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.bgc-dl[hidden],
.bgc-ds[hidden] { display: none; }

.bgc-dl-spacer { flex: 1; }

/* --------------------------------------------------------- root: top bar */

.bgc-dl-top {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  background: var(--bgc-ink);
  border-bottom: 0;
}

.bgc-x {
  width: 44px;
  height: 44px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  cursor: pointer;
}

.bgc-dl-mark {
  display: inline-flex;
  line-height: 0;
}

.bgc-dl-mark img {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  object-fit: cover;
  /* One mark asset exists in the project; on the dark bar it is inverted here
     rather than shipping a second file. */
  filter: invert(1) grayscale(1) brightness(2);
}

/* ------------------------------------------------------------ root: list */

.bgc-dl-body,
.bgc-ds-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.bgc-ds-body { padding: 8px 20px 28px; }

.bgc-dl-row {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 66px;
  padding: 0 20px;
  border: 0;
  border-bottom: 1px solid #EAEBE5;
  background: transparent;
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  color: var(--bgc-ink);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.bgc-dl-row:hover,
.bgc-dl-row:active { background: #F7F9F3; }

.bgc-dl-ico {
  flex: none;
  display: inline-flex;
  color: var(--bgc-ink);
}

.bgc-dl-label { flex: 1; }

.bgc-dl-chev {
  flex: none;
  color: var(--bgc-ink);
}

/* 7.22:1 on white — the one place a second colour is allowed. */
.bgc-dl-row.is-danger,
.bgc-dl-row.is-danger .bgc-dl-ico { color: #A32A1F; }
.bgc-dl-row.is-danger:hover { background: #FBF2F1; }

/* ------------------------------------------------ actions, in the scroll */

/* Rides inside the scrolling body, never pinned to the sheet's bottom edge. */
.bgc-drawer-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--bgc-hairline);
  padding: 18px 0 6px;
  margin: 8px 20px 0;
}

.bgc-df-ask,
.bgc-df-touch {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  text-decoration: none;
  transition: background .16s, border-color .16s;
}

.bgc-df-ask {
  background: #fff;
  border: 1px solid #E6E8E0;
  color: var(--bgc-ink);
  font-weight: 600;
}

.bgc-df-ask:hover { background: #F4F7EE; border-color: #D6DCCB; }

.bgc-df-touch {
  background: var(--bgc-ink);
  border: 1px solid transparent;
  color: #fff;
  font-weight: 700;
}

.bgc-df-touch:hover { background: #1E4A05; }

/* ------------------------------------------------- sub-screen: top bar */

.bgc-ds-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  background: #fff;
  border-bottom: 1px solid var(--bgc-hairline-2);
}

.bgc-ds-top .bgc-x {
  background: transparent;
  color: var(--bgc-ink);
}

/* The back chevron always points toward the root, in either direction. */
.bgc-x.is-back svg { transform: rotate(90deg); }
[dir="rtl"] .bgc-x.is-back svg { transform: rotate(-90deg); }

.bgc-ds-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--bgc-ink);
}

/* ------------------------------------------------ sub-screen: promo card */

.bgc-ds-promo {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bgc-hairline-2);
  border-radius: 18px;
  overflow: hidden;
  margin: 12px 0 26px;
  text-decoration: none;
  color: inherit;
}

.bgc-ds-shot {
  height: 170px;
  background: #EFF3E7 center / cover no-repeat;
}

.bgc-ds-promo-body {
  padding: 20px;
  background: #F1F7E4;
}

.bgc-ds-ptitle {
  display: block;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.24;
  color: var(--bgc-ink);
  margin-bottom: 10px;
}

.bgc-ds-pdesc {
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  color: var(--bgc-ink);
  text-wrap: pretty;
  margin-bottom: 14px;
}

.bgc-ds-pcta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--bgc-ink);
}

/* --------------------------------------------- sub-screen: row groups */

.bgc-ds-label {
  font-size: 15px;
  font-weight: 400;
  color: var(--bgc-ink-2);
  margin: 22px 0 8px;
}

.bgc-ds-rule {
  height: 1px;
  background: var(--bgc-hairline-2);
  margin-bottom: 4px;
}

.bgc-ds-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  text-decoration: none;
  color: inherit;
}

.bgc-ds-t {
  font-size: 17px;
  font-weight: 700;
  line-height: 25px;
  color: var(--bgc-ink);
}

/* Only the first group of each screen carries icons — the same hierarchy the
   desktop panel draws between "what you buy" and "before buying". */
.bgc-ds-ico {
  width: 34px;
  height: 34px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #EFF6E4;
  color: var(--bgc-ink);
}

/* ------------------------------------------- account screen: identity */

.bgc-ds-me {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  margin: 12px 0 22px;
  background: #F7F9F3;
  border: 1px solid #E6E8E0;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
}

.bgc-ds-me-av {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
}

.bgc-ds-me-av img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bgc-ds-me-text { display: flex; flex-direction: column; }

.bgc-ds-me-name { font-size: 18px; font-weight: 700; color: var(--bgc-ink); }

.bgc-ds-me-sub { font-size: 14px; font-weight: 400; color: var(--bgc-ink-2); }

@media (prefers-reduced-motion: reduce) {
  .bgc-scrim,
  .bgc-drawer { animation: none; }
}

@media print {
  .bgc-scrim,
  .bgc-drawer,
  .bgc-curtain,
  .bgc-mm,
  .bgc-bm,
  .bgc-um,
  .bgc-curtain { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .bgc-mm,
  .bgc-bm,
  .bgc-um,
  .bgc-curtain { animation: none; }
  .bgc-mm-promo:hover { transform: none; }
}

/* Below 1080px the lime pill carries the whole guest affordance on its own: the
   quiet link beside it is the first thing to go when the row runs out of room,
   and losing it costs no route — the drawer still lists Log in by name. */
@media (max-width: 1079px) {
  .bgc-quiet { display: none; }
}