.rr-shell-ready body { margin: 0; }
.site-bar {
  anchor-name: --rr-shell-bar;
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--rr-theme-line);
  background: var(--rr-theme-surface);
  color: var(--rr-theme-ink-strong);
}

/* One physical order on every surface, including Arabic shell strings:
   theme picker (internal/demo only), light/system/night, account.
   PM polish 2026-10-08: one quiet control cluster. Every control keeps a 44px
   hit box; only a 30px pill and a 24px active segment are painted, so the bar
   stays one slim row while touch targets stay full size. */
.site-bar-shared-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
  max-width: 100%;
  direction: ltr;
}
/* The bar contains popup widths; fixed positioning also bounds their height
   to the zoom-adjusted viewport when a wrapped bar leaves little room below. */
.site-bar .site-bar-menu { position: static; }
.site-bar-shared-controls > * { min-width: 0; max-width: 100%; }
.site-bar-shared-controls > *,
.site-bar-shared-controls .rr-theme-control-shell { flex: 0 0 auto; }
.site-shell-content { min-width: 0; overflow-wrap: anywhere; box-sizing: border-box; }

/* The pill: the internal theme picker and the central
   light/system/night group share one shape. The pill is painted by ::before so
   the 44px buttons inside remain the real, unclipped hit areas. */

.site-bar-shared-controls .rr-theme-group {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  padding-inline: 0;
  max-width: 100%;
}

.site-bar-shared-controls .rr-theme-group::before {
  content: "";
  position: absolute;
  inset-block: 7px;
  inset-inline: 3px;
  z-index: -1;
  border: 1px solid var(--rr-theme-line);
  border-radius: 8px;
  background: var(--rr-theme-surface);
  box-sizing: border-box;
}

/* Segments: 44px hit box, 24px painted chip, quiet ink until chosen. */

.site-bar-shared-controls .rr-theme-group .rr-theme-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--rr-theme-ink-soft);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}

.site-bar-shared-controls .rr-theme-group .rr-theme-btn::before {
  content: "";
  position: absolute;
  inset-block: 10px;
  inset-inline: 6px;
  width: auto;
  height: auto;
  z-index: -1;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  box-sizing: border-box;
}
.site-bar-shared-controls .rr-theme-group .rr-theme-btn,
.site-bar-shared-controls .rr-theme-group .rr-theme-btn:hover,
.site-bar-shared-controls .rr-theme-group .rr-theme-btn.is-active,
.site-bar-shared-controls .rr-theme-group .rr-theme-btn[aria-pressed="true"] { background: transparent; }

.site-bar-shared-controls .rr-theme-group .rr-theme-btn:hover { color: var(--rr-theme-ink-strong); }

.site-bar-shared-controls .rr-theme-group .rr-theme-btn:hover::before {
  background: var(--rr-theme-surface-raised);
  border-color: transparent;
}
/* Chosen: a filled chip with a hairline and strong ink. Clear in every theme,
   including POP night where raised and surface share one value. */

.site-bar-shared-controls .rr-theme-group .rr-theme-btn.is-active,
.site-bar-shared-controls .rr-theme-group .rr-theme-btn[aria-pressed="true"] {
  color: var(--rr-theme-ink-strong);
  font-weight: 650;
}

.site-bar-shared-controls .rr-theme-group .rr-theme-btn.is-active::before,
.site-bar-shared-controls .rr-theme-group .rr-theme-btn[aria-pressed="true"]::before {
  background: var(--rr-theme-surface-raised);
  border-color: var(--rr-theme-line-strong);
}
/* Theme picker (internal and demo pages). Desktop: one pill naming the
   current theme, opening a short list; each choice is a 44px row. */
.site-bar-styles { position: relative; display: inline-flex; }
.site-bar-styles-trigger {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: var(--rr-theme-ink-strong);
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  line-height: 1;
  cursor: pointer;
}
.site-bar-styles-trigger::before {
  content: "";
  position: absolute;
  inset-block: 7px;
  inset-inline: 3px;
  z-index: -1;
  border: 1px solid var(--rr-theme-line);
  border-radius: 8px;
  background: var(--rr-theme-surface);
  box-sizing: border-box;
}
.site-bar-styles-trigger:hover::before,
.site-bar-styles-trigger[aria-expanded="true"]::before {
  background: var(--rr-theme-surface-raised);
  border-color: var(--rr-theme-line-strong);
}
.site-bar-styles-chevron {
  width: 5px;
  height: 5px;
  margin-block-start: -3px;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.site-bar-styles-trigger[aria-expanded="true"] .site-bar-styles-chevron { margin-block-start: 3px; transform: rotate(-135deg); }
.site-bar-styles-list {
  position: absolute;
  top: calc(100% - 2px);
  left: 3px;
  z-index: 32;
  display: flex;
  flex-direction: column;
  min-width: 9.5rem;
  padding: 4px;
  border: 1px solid var(--rr-theme-line);
  border-radius: 10px;
  background: var(--rr-theme-surface);
  box-shadow: var(--rr-theme-shadow-md);
  box-sizing: border-box;
}
.site-bar-styles-list[hidden] { display: none; }
.site-bar-styles-list button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--rr-theme-ink-soft);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: start;
  cursor: pointer;
}
.site-bar-styles-list button:hover { background: var(--rr-theme-surface-raised); color: var(--rr-theme-ink-strong); }
.site-bar-styles-list button[aria-pressed="true"] { color: var(--rr-theme-ink-strong); font-weight: 700; }
.site-bar-styles-list button[aria-pressed="true"]::after {
  content: "";
  width: 4px;
  height: 9px;
  margin-inline-end: 3px;
  margin-block-start: -3px;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg);
}
.site-bar .site-bar-styles-list button:focus-visible { outline-offset: -2px; box-shadow: none; }
/* Shared controls keep readable disabled text when consumer component sheets
   dim their own buttons. Native disabled behavior and the cursor remain. */
.site-bar button:disabled { opacity: 1; cursor: not-allowed; }
.site-bar button:focus-visible, .site-bar a:focus-visible, .site-bar summary:focus-visible {
  outline: 2px solid var(--rr-theme-ink-strong);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--rr-theme-ink-strong);
}
.site-bar-public > .wrap { width: 100%; padding-inline: 0; }
.site-bar-public .brand { display: inline-flex; flex-wrap: wrap; align-items: center; color: inherit; text-decoration: none; }
.site-bar-public .site-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; min-width: 0; max-width: 100%; }
.site-bar-public .site-nav a { color: inherit; min-height: 44px; display: inline-flex; align-items: center; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.site-bar-public .site-nav details { min-width: 0; max-width: 100%; }
.site-bar-public .site-nav summary { min-height: 44px; cursor: pointer; overflow-wrap: anywhere; }
.site-bar-public .site-nav details > a { display: flex; }
.site-bar-public .nav-toggle { display: none; }
@media (max-width: 600px) {
  .rr-shell-ready .site-shell-content { padding-inline: clamp(8px, 4vw, 32px); }
  .site-bar-public .nav-toggle { display: inline-flex; min-height: 44px; align-items: center; }
  .rr-shell-ready .site-bar-public .site-nav { display: none; width: 100%; }
  .rr-shell-ready .site-bar-public .site-nav.is-open {
    display: flex;
    position: absolute;
    top: calc(100% + 4px);
    inset-inline: 0;
    box-sizing: border-box;
    padding: 12px;
    max-height: 55vh;
    overflow: auto;
    border: 1px solid var(--rr-theme-line);
    background: var(--rr-theme-surface);
    box-shadow: var(--rr-theme-shadow-md);
  }
  .site-bar-public .site-nav-panel { overflow: visible; max-height: none; }
  .site-bar-public .site-bar-shared-controls { margin-inline-start: auto; }
}
@media (max-width: 240px) {
  .site-bar { padding-inline: 4px; gap: 4px; }
  /* Give identity text full lines before the shared controls. Squeezing the
     module beside the mark makes a tall column of single letters at zoom. */
  .site-bar-id { flex-wrap: wrap; }
  .site-bar-wordmark { flex-basis: 100%; overflow-wrap: anywhere; }
  .site-bar-id .site-bar-module { flex-basis: 100%; margin-inline-start: 0; padding-inline-start: 0; border-inline-start: 0; }
  .site-bar-public .wrap { gap: 4px; }
  .site-bar-public .brand .site-bar-module { flex-basis: 100%; margin-inline-start: 0; padding-inline-start: 0; border-inline-start: 0; }
}

.site-bar-id,
.site-bar-actions {
  display: flex;
  align-items: center;
  min-width: 0;
}

.site-bar-id {
  flex: 1 1 auto;
  gap: 8px;
}

.site-bar-wordmark,
.site-bar-account-label {
  color: var(--rr-theme-ink-strong);
  font-weight: 700;
}

.site-bar-module {
  min-width: 0;
  margin-inline-start: 8px;
  padding-inline-start: 8px;
  border-inline-start: 1px solid var(--rr-theme-line);
  color: var(--rr-theme-ink-soft);
  overflow-wrap: anywhere;
}

.site-bar-actions {
  flex-wrap: wrap;
  gap: 8px;
  margin-inline-start: auto;
}

/* Keep the business and account menus adjacent on one flex line. The
   wrapper follows People and theme, preserving visual and keyboard order;
   its automatic start margin keeps the account at the right when it wraps. */
.site-bar-account-cluster {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  margin-inline-start: auto;
}

.site-bar-switch,
.site-bar-signout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--rr-theme-line-strong);
  border-radius: 8px;
  background: var(--rr-theme-surface);
  color: var(--rr-theme-ink-strong);
  font: inherit;
  text-decoration: none;
}

.site-bar-switch:hover,
.site-bar-signout:hover {
  background: var(--rr-theme-surface-raised);
}

/* ---------------------------------------------------------------------
 * G6: Account > Business > Offerings.
 *
 * Right-to-left the bar reads business, then account. The theme control is
 * IN the bar, so no surface needs the floating bottom-right selector that
 * used to overlay page content. Every rule below uses the central tokens
 * only -- no page-local palette, no page-local font, no literal colour.
 * ------------------------------------------------------------------- */

.site-bar-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.site-bar-account-label {
  color: var(--rr-theme-ink-soft);
  font-size: 0.75rem;
}

.site-bar-person {
  min-width: 0;
  color: var(--rr-theme-ink-strong);
  overflow-wrap: anywhere;
}

.site-bar-person:empty {
  display: none;
}

.site-bar-message {
  flex-basis: 100%;
  margin: 0;
  color: var(--rr-theme-red-ink);
}

.site-bar-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--rr-theme-ink-soft);
  text-decoration: none;
}

.site-bar-nav-link:hover {
  background: var(--rr-theme-surface-raised);
  color: var(--rr-theme-ink-strong);
}

/* The offering currently open is named by colour AND by aria-current, never
 * by colour alone, so the hierarchy survives a screen reader. */
.site-bar-nav-link.is-current {
  color: var(--rr-theme-ink-strong);
  font-weight: 700;
}

.site-bar-menu {
  position: relative;
  display: inline-flex;
}

.site-bar-company-button,
.site-bar-account-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 10px;
  border: 1px solid var(--rr-theme-ink-strong);
  border-radius: 8px;
  background: var(--rr-theme-surface);
  color: var(--rr-theme-ink-strong);
  font: inherit;
  cursor: pointer;
}

/* Switching directly from company to account stays possible on short phones.
   Account content itself must paint above that persistent trigger. */
.site-bar-account-button { position: relative; z-index: 31; }
.site-bar .site-bar-account-panel { z-index: 32; }

.site-bar-company-button:hover,
.site-bar-account-button:hover {
  background: var(--rr-theme-surface-raised);
}

.site-bar-company-button[aria-expanded="true"],
.site-bar-account-button[aria-expanded="true"] {
  background: var(--rr-theme-surface-raised);
}

.site-bar-company-current {
  min-width: 0;
  max-width: 14ch;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* The initials circle: initials in the round, always, at every width. */
.site-bar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--rr-theme-surface-raised);
  color: var(--rr-theme-ink-strong);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.site-bar-initials[hidden] {
  display: none;
}

.site-bar-company-mark-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  overflow: hidden;
  border-radius: 6px;
}

.site-bar-company-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  overflow: hidden;
  border-radius: 4px;
  font-size: 0.5rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  overflow-wrap: anywhere;
}

.site-bar-company-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* No brand mark uploaded: the owner's own placeholder word, in the muted token
 * so it reads as a prompt to send one rather than as a business name. */
.site-bar-company-mark.is-placeholder {
  padding: 1px;
  background: var(--rr-theme-surface-raised);
  color: var(--rr-theme-ink-soft);
}

.site-bar-company-panel,
.site-bar-account-panel {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  max-height: calc(100% - 14px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Ordinary layout uses measured bar/viewport bounds at open and resize.
     Padding and borders stay inside the available width at content zoom. */
  box-sizing: border-box;
  min-width: 0;
  width: min(100%, 340px);
  max-width: 100%;
  padding: 6px;
  padding-block-end: var(--rr-theme-menu-reserve, 60px);
  scroll-padding-block-end: var(--rr-theme-menu-reserve, 60px);
  border: 1px solid var(--rr-theme-line-strong);
  border-radius: 10px;
  background: var(--rr-theme-surface);
  color: var(--rr-theme-ink-strong);
  box-shadow: var(--rr-theme-shadow-md);
  overflow: auto;
}

@supports (top: anchor(bottom)) and (width: anchor-size(width)) {
  .site-bar-company-panel,
  .site-bar-account-panel {
    left: auto;
    top: min(calc(anchor(--rr-shell-bar bottom) + 6px), calc(100% - 160px));
    max-height: max(152px, calc(100% - anchor-size(--rr-shell-bar height) - 14px));
    inset-inline-end: max(0px, anchor(--rr-shell-bar right));
    width: min(anchor-size(--rr-shell-bar width), 100%, 340px);
    max-width: min(anchor-size(--rr-shell-bar width), 100%);
  }
}

.site-bar-company-panel > *,
.site-bar-account-panel > * { flex-shrink: 0; }

.site-bar-company-panel[hidden],
.site-bar-account-panel[hidden] {
  display: none;
}

.site-bar-company-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 60vh;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.site-bar-company-item {
  display: block;
  margin: 0;
  padding: 0;
}

.site-bar-company-item form {
  display: block;
  margin: 0;
}

.site-bar-company-row {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 4px 8px;
  border: 0;
  border-radius: 8px;
  background: var(--rr-theme-surface-raised);
  color: var(--rr-theme-ink-strong);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.site-bar-company-row:hover {
  background: var(--rr-theme-surface-raised);
}

/* The ACTIVE business sits on top on its own background: a step away from the
 * bar's surface in dark mode, and a step toward the page in light mode, so the
 * emphasis reads in both directions without a second palette. */
.site-bar-company-row.is-active {
  background: var(--rr-theme-surface);
  font-weight: 700;
}

.site-bar-company-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.site-bar-company-current-tag {
  flex: 0 0 auto;
  color: var(--rr-theme-ink-soft);
  font-size: 0.75rem;
  font-weight: 400;
}

.site-bar-company-add,
.site-bar-account-item,
.site-bar-account-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 8px;
  border-radius: 8px;
  color: var(--rr-theme-ink-strong);
  text-decoration: none;
}

.site-bar-company-add {
  border-top: 1px solid var(--rr-theme-line);
  border-radius: 0 0 8px 8px;
  font-weight: 600;
}

.site-bar-company-add:hover,
.site-bar-account-item:hover,
.site-bar-account-link:hover {
  background: var(--rr-theme-surface-raised);
}

.site-bar-account-link {
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.site-bar-account-item {
  font: inherit;
}

.site-bar-account-panel .site-bar-signout {
  margin-top: 4px;
  border-top: 1px solid var(--rr-theme-line);
  border-radius: 0 0 8px 8px;
}

.site-bar-menu-status {
  margin: 0;
  padding: 4px 8px;
  color: var(--rr-theme-ink-soft);
  font-size: 0.875rem;
}

.site-bar-menu-status:empty {
  display: none;
}

.site-bar-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
  min-width: 0;
}

.site-bar-mobile-button {
  display: none;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--rr-theme-line-strong);
  border-radius: 8px;
  background: var(--rr-theme-surface);
  color: var(--rr-theme-ink-strong);
  font: inherit;
}

@media (max-width: 520px) {
  .site-bar-mobile-button { display: inline-flex; align-items: center; }
  .site-bar-controls { display: none; width: 100%; flex-wrap: wrap; }
  .site-bar-controls.is-open {
    display: flex;
    /* Long local/company navigation scrolls here rather than pushing the
       central account row below a phone viewport at content zoom. */
    max-height: 88px;
    overflow: auto;
  }
  .site-bar-actions {
    width: 100%;
    margin-inline-start: 0;
  }

  .site-bar .rr-theme-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Phone width: the right-hand cluster keeps its hierarchy but the business
   * name collapses to its mark, so the switcher and the account button stay on
   * one row and never push each other off-screen. The full name is still
   * announced and still in the dropdown. */
  .site-bar-company-current {
    max-width: 9ch;
  }

  .site-bar-nav-link {
    padding: 0 8px;
  }

}

@media print {
  .site-bar {
    display: none;
  }
}

/* Hide on scroll (site-shell-view.js sets data-shell-hidden). The transform
   moves the painted bar only, so nothing in the page reflows. */
.site-bar[data-shell-hidden="true"] { transform: translateY(-100%); }
@media (prefers-reduced-motion: no-preference) {
  .site-bar { transition-property: transform; transition-duration: 0.2s; transition-timing-function: ease; }
}

.site-bar-public {
  position: sticky;
  top: 0;
  z-index: 20;
}

.site-bar-public .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  min-width: 0;
}

.site-bar-public .brand,
.site-bar-public .rr-theme-control-shell {
  max-width: 100%;
  min-width: 0;
}

.site-shell-skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  padding: 8px 14px;
  background: var(--rr-theme-surface);
  color: var(--rr-theme-ink-strong);
  z-index: 30;
}

.site-shell-skip:focus {
  inset-inline-start: 12px;
  top: 8px;
  outline: 3px solid var(--rr-theme-blue-base);
}

.site-shell-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding-block: 16px;
}

.site-shell-footer {
  padding: 16px;
  background: var(--rr-theme-surface);
  color: var(--rr-theme-ink-strong);
}

.site-shell-footer a {
  color: var(--rr-theme-ink-strong);
}

.site-shell-legal a:focus-visible {
  outline: 3px solid var(--rr-theme-blue-base);
  outline-offset: 2px;
}

/* The centre-auth chooser and settings documents carry their own
   site-skip-link (added by mvp1/improve-a11y-20261003t0845z). It targets
   #site-main rather than the public shell's #main, so it is a second
   off-screen-until-focused rule and not a rename of the one above. Both
   survive: site-shell.js still emits .site-shell-skip for the public pages
   and test_public_route_crawl.py pins that class by name. */
.site-skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--rr-theme-surface-raised);
  color: var(--rr-theme-ink-strong);
  z-index: 100;
}

.site-skip-link:focus {
  left: 12px;
}
[data-site-bar-company-menu] { min-width: 0; }
.site-bar-company-button { max-width: 100%; }

/* Shared local navigation disclosures keep the account row outside long lists. */
.site-bar-public .site-nav details { position: static; }
.site-bar-public .site-nav-panel {
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid var(--rr-theme-line);
  background: var(--rr-theme-surface);
  box-shadow: var(--rr-theme-shadow-md);
  overflow: auto;
}
.site-bar-public .site-nav-panel ul { list-style: none; margin: 0; padding: 0; }
.site-bar-public .site-nav-panel li { margin: 0; }
.site-bar-public .site-nav-panel a { display: flex; }
.site-bar-public .site-nav-panel p { margin: 0; }
@media (min-width: 601px) {
  .site-bar-public .site-nav-panel { position: absolute; top: calc(100% + 4px); left: 0; width: 24rem; max-height: 55vh; z-index: 1; }
}

/* ---------------------------------------------------------------------
 * PM polish 2026-10-08: one calm, compact bar.
 *
 * Desktop: one 52px row -- site name, navigation, then the control cluster
 * and the account circle. Phone (<= 600px): row one is the site name and
 * Menu; row two is light/system/night and the account circle.
 * The internal theme picker moves into the Menu sheet on phones
 * (site-shell-view.js). Colours are central tokens only.
 * ------------------------------------------------------------------- */
.site-bar.site-bar-public { padding-block: 4px; }
.site-bar-public .wrap { gap: 0 24px; }
.site-bar-public .brand { gap: 10px; min-height: 44px; flex: 0 1 auto; }
.site-bar-public .brand .site-bar-module {
  margin-inline-start: 0;
  padding-inline-start: 10px;
  color: var(--rr-theme-ink-strong);
  font-size: 0.9375rem;
  font-weight: 600;
}
.site-bar-public .site-nav { flex: 1 1 auto; justify-content: flex-end; gap: 2px; }

.site-bar-public .site-nav > a,
.site-bar-public .site-nav > details > summary {
  padding-inline: 8px;
  border-radius: 6px;
  color: var(--rr-theme-ink-soft);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}
/* Desktop keeps names and links on one line; narrow and zoomed bars wrap. */
@media (min-width: 601px) {
  .site-bar-public .site-nav > a,
  .site-bar-public .site-nav > details > summary { white-space: nowrap; }
}
.site-bar-public .site-nav > a:hover,
.site-bar-public .site-nav > details > summary:hover,
.site-bar-public .site-nav > details[open] > summary { color: var(--rr-theme-ink-strong); }
.site-bar-public .site-nav > a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
/* The open page is named by weight and a short rule AND by aria-current. */
.site-bar-public .site-nav > a[aria-current="page"] {
  color: var(--rr-theme-ink-strong);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.site-bar-public .site-nav > details > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
}
.site-bar-public .site-nav > details > summary::-webkit-details-marker { display: none; }
.site-bar-public .site-nav > details > summary::after {
  content: "";
  width: 5px;
  height: 5px;
  margin-block-start: -3px;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.site-bar-public .site-nav > details[open] > summary::after { margin-block-start: 3px; transform: rotate(-135deg); }
.site-bar-public .site-nav-panel a {
  min-height: 44px;
  padding-inline: 8px;
  border-radius: 6px;
  color: var(--rr-theme-ink-strong);
  font-size: 0.875rem;
  text-decoration: none;
}
.site-bar-public .site-nav-panel a:hover { background: var(--rr-theme-surface-raised); }
.site-bar-public .site-nav-panel { border-radius: 10px; border-color: var(--rr-theme-line); }

/* Account: one quiet 44px button. Its own boundary keeps 3:1 against the bar
   (ink-muted is the quietest central token that does in every look) and its
   corners stay inside the hit box, as the shared browser suite requires. */
.site-bar-account-button {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--rr-theme-ink-muted);
  border-radius: 12px;
  background: var(--rr-theme-surface);
  color: var(--rr-theme-ink-soft);
}
.site-bar-account-button:hover,
.site-bar-account-button[aria-expanded="true"] {
  background: var(--rr-theme-surface-raised);
  color: var(--rr-theme-ink-strong);
}
.site-bar-account-button .site-bar-account-icon { display: block; width: 16px; height: 16px; }
.site-bar-account-button .site-bar-initials { width: 26px; height: 26px; font-size: 0.6875rem; }

/* Menu (phones): the same 30px pill as the controls. */
.site-bar-public .nav-toggle {
  position: relative;
  isolation: isolate;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--rr-theme-ink-strong);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}
.site-bar-public .nav-toggle::before {
  content: "";
  position: absolute;
  inset-block: 7px;
  inset-inline: 0;
  z-index: -1;
  border: 1px solid var(--rr-theme-line);
  border-radius: 8px;
  background: var(--rr-theme-surface);
  box-sizing: border-box;
}
.site-bar-public .nav-toggle:hover::before,
.site-bar-public .nav-toggle[aria-expanded="true"]::before {
  background: var(--rr-theme-surface-raised);
  border-color: var(--rr-theme-line-strong);
}

@media (min-width: 241px) and (max-width: 600px) {
  .site-bar.site-bar-public { padding-inline: 12px; }
  .site-bar-public .wrap { gap: 0 8px; }
  .site-bar-public .brand { flex: 1 1 0; flex-wrap: nowrap; min-width: 0; }
  /* One line with an ellipsis. Inline-size containment keeps the full name
     out of the bar's min-content width, so content zoom never widens it. */
  .site-bar-public .brand .site-bar-module {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    contain: inline-size;
  }
  .site-bar-public .site-bar-shared-controls {
    flex: 1 0 100%;
    justify-content: flex-start;
    margin-inline-start: 0;
    /* Pull the pills' invisible 3px hit margin back so the painted pill
       starts on the same gutter line as the site mark. */
    margin-inline-start: -3px;
  }
  .site-bar-public .site-bar-shared-controls > [data-site-bar-account-menu] { margin-inline-start: auto; }
  /* The theme picker sits at the top of the Menu sheet as a full-width row. */
  .rr-shell-ready .site-bar-public .site-nav.is-open { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 8px; }
  .site-bar-public .site-nav > .site-bar-styles {
    align-self: stretch;
    margin-block-end: 6px;
    padding-block-end: 6px;
    border-block-end: 1px solid var(--rr-theme-line);
  }
  .site-bar-public .site-nav > .site-bar-styles > .site-bar-styles-trigger { display: none; }
  .site-bar-public .site-nav > .site-bar-styles > .site-bar-styles-list,
  .site-bar-public .site-nav > .site-bar-styles > .site-bar-styles-list[hidden] {
    position: relative;
    left: auto;
    isolation: isolate;
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .site-bar-public .site-nav > .site-bar-styles > .site-bar-styles-list::before {
    content: "";
    position: absolute;
    inset-block: 7px;
    inset-inline: 0;
    z-index: -1;
    border: 1px solid var(--rr-theme-line);
    border-radius: 8px;
    background: var(--rr-theme-surface);
    box-sizing: border-box;
  }
  .site-bar-public .site-nav > .site-bar-styles > .site-bar-styles-list button {
    flex: 1 1 0;
    justify-content: center;
    min-width: 44px;
    padding: 0 4px;
    background: transparent;
    font-size: 0.6875rem;
  }
  .site-bar-public .site-nav > .site-bar-styles > .site-bar-styles-list button::before {
    content: "";
    position: absolute;
    inset-block: 10px;
    inset-inline: 3px;
    z-index: -1;
    border: 1px solid transparent;
    border-radius: 5px;
    box-sizing: border-box;
  }
  .site-bar-public .site-nav > .site-bar-styles > .site-bar-styles-list button:hover::before { background: var(--rr-theme-surface-raised); }
  .site-bar-public .site-nav > .site-bar-styles > .site-bar-styles-list button[aria-pressed="true"]::before {
    background: var(--rr-theme-surface-raised);
    border-color: var(--rr-theme-line-strong);
  }
  .site-bar-public .site-nav > .site-bar-styles > .site-bar-styles-list button::after { display: none; }
  .site-bar-public .site-nav > a,
  .site-bar-public .site-nav > details > summary { font-size: 0.9375rem; color: var(--rr-theme-ink-strong); }
}

/* ===================================================================
 * SHELL V2 (2026-10-08): one global bar, identical structure everywhere.
 *
 * Owner ruling R-1008-OWNER-GLOBAL-SHELL-GEMINI-WIDTH: the
 * light/system/dark and skin pickers all take the compact Gemini form from
 * owner-preview/theme-modern -- a tight segmented group whose segments paint
 * 28px by 28px. Each segment keeps a 44px-tall hit box and is 28px wide
 * (WCAG 2.2 AA target size is 24px). A skin restyles the SURFACE only, through
 * its tokens: PRO flat, CLASS hairlines, POP ink, MODERN diagonal shadows.
 *
 * The selectors lead with ":root .site-bar" so a page's own header, nav or
 * link rules cannot reshape the global bar (the audit's top cause). Colours
 * are central tokens only; every token has a light and a dark value.
 * ================================================================= */
:root .site-bar[data-site-bar] {
  box-sizing: border-box;
  width: auto;
  max-width: none;
  margin: 0;
  min-height: 52px;
  font-family: var(--rr-theme-skin-font-ui, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: normal;
  text-align: start;
  color: var(--rr-theme-ink-strong);
}
:root .site-bar.site-bar-public { padding: 4px 16px; }
:root .site-bar.site-bar-public > .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 20px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
:root .site-bar-public .brand { flex: 0 1 auto; min-width: 0; gap: 10px; }
:root .site-bar-public .brand .site-bar-module {
  min-width: 0;
  max-width: 30ch;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--rr-theme-ink-strong);
}
:root .site-bar-public .site-nav { flex: 1 1 auto; justify-content: flex-end; gap: 2px; margin: 0; padding: 0; }
:root .site-bar-public .site-nav > a,
:root .site-bar-public .site-nav > details > summary {
  color: var(--rr-theme-ink-soft);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  background: transparent;
  border: 0;
  margin: 0;
}
:root .site-bar-public .site-nav > a[aria-current="page"] { color: var(--rr-theme-ink-strong); font-weight: 650; }
:root .site-bar-public .site-nav > a:hover,
:root .site-bar-public .site-nav > details > summary:hover { color: var(--rr-theme-ink-strong); }

/* One control cluster: skin | mode | account, 6px apart. */
:root .site-bar .site-bar-shared-controls { gap: 6px; align-items: center; }

/* The group: a 32px painted pill with 2px padding, as theme-modern. */

:root .site-bar .site-bar-shared-controls .rr-theme-group,
:root .site-bar .site-bar-styles-list {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  flex-direction: row;
  /* One row at every real width; only an extreme zoom (195px at 2x) that
     leaves less room than the group wraps it instead of overflowing. */
  flex-wrap: wrap;
  align-items: center;
  gap: 0 2px;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

:root .site-bar .site-bar-shared-controls .rr-theme-group::before,
:root .site-bar .site-bar-styles-list::before {
  content: "";
  position: absolute;
  inset: 6px 0;
  z-index: -1;
  border: var(--rr-theme-skin-box-border, 1px solid var(--rr-theme-line));
  border-radius: var(--rr-theme-skin-box-radius, 8px);
  background: var(--rr-theme-skin-box-bg, var(--rr-theme-surface));
  box-shadow: var(--rr-theme-skin-box-shadow, none);
  box-sizing: border-box;
}

/* The segment: 28px wide, 44px tall hit box; a 28px by 28px painted chip. */

:root .site-bar .site-bar-shared-controls .rr-theme-group .rr-theme-btn,
:root .site-bar .site-bar-styles-list button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 28px;
  min-width: 28px;
  height: 44px;
  min-height: 44px;
  flex: 0 0 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--rr-theme-ink-soft);
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  cursor: pointer;
}

:root .site-bar .site-bar-shared-controls .rr-theme-group .rr-theme-btn::before,
:root .site-bar .site-bar-styles-list button::before {
  content: "";
  position: absolute;
  inset: 8px 0;
  z-index: -1;
  border: 1px solid transparent;
  border-radius: var(--rr-theme-skin-seg-radius, 5px);
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
}

:root .site-bar .site-bar-shared-controls .rr-theme-group .rr-theme-btn:hover,
:root .site-bar .site-bar-styles-list button:hover { color: var(--rr-theme-ink-strong); background: transparent; }

:root .site-bar .site-bar-shared-controls .rr-theme-group .rr-theme-btn:hover::before,
:root .site-bar .site-bar-styles-list button:hover::before { background: var(--rr-theme-skin-seg-hover-bg, var(--rr-theme-surface-raised)); }

:root .site-bar .site-bar-shared-controls .rr-theme-group .rr-theme-btn[aria-pressed="true"],
:root .site-bar .site-bar-shared-controls .rr-theme-group .rr-theme-btn.is-active,
:root .site-bar .site-bar-styles-list button[aria-pressed="true"] {
  color: var(--rr-theme-skin-seg-active-ink, var(--rr-theme-ink-strong));
  font-weight: 700;
  background: transparent;
}

:root .site-bar .site-bar-shared-controls .rr-theme-group .rr-theme-btn[aria-pressed="true"]::before,
:root .site-bar .site-bar-shared-controls .rr-theme-group .rr-theme-btn.is-active::before,
:root .site-bar .site-bar-styles-list button[aria-pressed="true"]::before {
  background: var(--rr-theme-skin-seg-active-bg, var(--rr-theme-surface-raised));
  border: var(--rr-theme-skin-seg-active-border, 1px solid var(--rr-theme-line-strong));
  box-shadow: var(--rr-theme-skin-seg-active-shadow, none);
}

:root .site-bar .site-bar-shared-controls .rr-theme-group .rr-theme-icon { width: 14px; height: 14px; }
:root .site-bar .site-bar-styles-list button[aria-pressed="true"]::after { content: none; }
:root .site-bar .site-bar-styles-list[hidden] { display: inline-flex; }
/* Keyboard focus keeps the shell's opaque 3:1 ring (outline plus a solid
   ring) on every segment; the transparent segment reset above must not hide it. */

:root .site-bar .site-bar-shared-controls .rr-theme-group .rr-theme-btn:focus-visible,
:root .site-bar .site-bar-styles-list button:focus-visible {
  z-index: 1;
  outline: 2px solid var(--rr-theme-ink-strong);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--rr-theme-ink-strong);
}

/* Skin segments show "Aa" in their own type face; the name is the label. */
:root .site-bar .site-bar-style-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
:root .site-bar .site-bar-style-glyph { font-size: 0.8125rem; line-height: 1; }
:root .site-bar [data-shell-style="PRO"] .site-bar-style-glyph { font-family: "Inter", system-ui, sans-serif; font-weight: 700; }
:root .site-bar [data-shell-style="CLASS"] .site-bar-style-glyph { font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; font-size: 0.9375rem; }
:root .site-bar [data-shell-style="POP"] .site-bar-style-glyph { font-family: "Fredoka", "Nunito", "Arial Rounded MT Bold", system-ui, sans-serif; font-weight: 700; }
:root .site-bar [data-shell-style="MODERN"] .site-bar-style-glyph { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-weight: 800; letter-spacing: -0.04em; }

/* Account keeps its own 44px by 44px box and 3:1 border (shared suite);
   skinned pages paint it through the skin tokens (section 2 above). */
:root .site-bar .site-bar-account-button .site-bar-account-icon { width: 15px; height: 15px; }

/* Menu toggle (phones) uses the same 32px painted box. */
:root .site-bar-public .nav-toggle::before { inset-block: 6px; border-radius: var(--rr-theme-skin-box-radius, 8px); }

/* Phones: the skin row inside the Menu sheet shows names beside the glyph. */
@media (max-width: 600px) {
  :root .site-bar .site-bar-shared-controls { gap: 4px; }
  :root .site-bar-public .brand { flex: 1 1 0; }
  :root .site-bar-public .brand .site-bar-module { max-width: none; }
  :root .site-bar-public .site-nav > .site-bar-styles { display: flex; }
  :root .site-bar-public .site-nav > .site-bar-styles > .site-bar-styles-list { position: relative; display: flex; width: 100%; padding: 0 2px; }
  :root .site-bar-public .site-nav > .site-bar-styles > .site-bar-styles-list button { flex: 1 1 0; width: auto; gap: 6px; }
  :root .site-bar-public .site-nav > .site-bar-styles .site-bar-style-name {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
  }
}

/* Announcement slot (global): one quiet line under the bar. */
.site-shell-announce {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 6px 16px;
  border-bottom: 1px solid var(--rr-theme-line);
  background: var(--rr-theme-surface-raised);
  color: var(--rr-theme-ink-strong);
  font-size: 0.875rem;
}
.site-shell-announce[data-tone="warn"] { background: var(--rr-theme-warning-subtle, var(--rr-theme-surface-raised)); }
.site-shell-announce a { color: var(--rr-theme-ink-strong); text-decoration: underline; min-height: 24px; display: inline-flex; align-items: center; }
.site-shell-announce-close {
  margin-inline-start: auto;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--rr-theme-ink-soft);
  font: inherit;
  font-size: 1.125rem;
  cursor: pointer;
}

/* Global footer: Powered by Rasheed Routing and the legal/support links. */
:root .site-shell-footer[data-shell-footer="global"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  box-sizing: border-box;
  margin: 32px 0 0;
  padding: 12px 16px;
  border-top: 1px solid var(--rr-theme-line);
  background: var(--rr-theme-surface);
  color: var(--rr-theme-ink-soft);
  font-family: var(--rr-theme-skin-font-ui, inherit);
  font-size: 0.8125rem;
}
/* App pages with a session bar: the same footer, compact. */
:root .site-shell-footer[data-shell-footer-size="compact"] { margin-block-start: 16px; padding-block: 6px; gap: 4px 16px; }
:root [data-shell-footer="global"] .site-shell-legal { padding-block: 0; gap: 4px 16px; }
:root [data-shell-footer="global"] > [data-rr-powered-by] { min-width: 0; max-width: 100%; margin: 0; padding: 0; border: 0; text-align: start; }
/* At very narrow or zoomed widths the mark sits above the words rather than overflowing. */
:root [data-shell-footer="global"] > [data-rr-powered-by] > a { flex-wrap: wrap; max-width: 100%; }
:root [data-shell-footer="global"] .site-shell-legal a { color: var(--rr-theme-ink-soft); min-height: 24px; display: inline-flex; align-items: center; text-decoration: none; }
:root [data-shell-footer="global"] .site-shell-legal a:hover { color: var(--rr-theme-ink-strong); text-decoration: underline; }

/* ---------------------------------------------------------------------
 * Phone tabs (owner 2026-10-09): on phones the page tabs stay VISIBLE.
 * They are one horizontally scrollable row at the bottom of the bar,
 * under the brand row, edge to edge. Only that row scrolls sideways; the
 * page never does. The Menu button had nothing else to hold, so it is
 * hidden. The theme and account controls sit beside the brand when they
 * fit and wrap to their own row when they do not. site-shell-view.js
 * (revealCurrentTab) scrolls the current tab into view.
 * ------------------------------------------------------------------- */
@media (max-width: 600px) {
  :root .site-bar.site-bar-public .nav-toggle { display: none; }
  :root .site-bar.site-bar-public .brand { flex: 0 1 auto; min-width: 0; }
  :root .site-bar.site-bar-public .brand .site-bar-module { flex: 0 1 auto; contain: none; max-width: none; }
  :root .site-bar.site-bar-public .site-bar-shared-controls { flex: 0 0 auto; margin-inline-start: auto; }
  :root .rr-shell-ready .site-bar.site-bar-public .site-nav,
  :root .site-bar.site-bar-public .site-nav {
    order: 3;
    display: flex;
    flex: 0 0 calc(100% + 32px);
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 2px;
    box-sizing: border-box;
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: none;
    position: static;
    margin: 4px -16px -4px;
    padding: 0 0 0 16px;
    border: 0;
    border-block-start: 1px solid var(--rr-theme-line);
    background: transparent;
    box-shadow: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  :root .site-bar.site-bar-public .site-nav::-webkit-scrollbar { display: none; }
  /* End gutter as a spacer: Chrome leaves a flex scroller's end padding out of its scroll range. */
  :root .site-bar.site-bar-public .site-nav::after { content: ""; flex: 0 0 16px; }
  :root .site-bar.site-bar-public .site-nav > a {
    flex: 0 0 auto;
    min-height: 44px;
    max-width: none;
    padding-inline: 10px;
    white-space: nowrap;
    overflow-wrap: normal;
    font-size: 0.9375rem;
  }
  :root .site-bar.site-bar-public .site-nav > a[aria-current="page"] {
    color: var(--rr-theme-ink-strong);
    font-weight: 650;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }
}