.rasrouting-shell-ready body { margin: 0; }
.site-bar {
  anchor-name: --rasrouting-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(--rasrouting-theme-line);
  background: var(--rasrouting-theme-surface);
  color: var(--rasrouting-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 .rasrouting-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 .rasrouting-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 .rasrouting-theme-group::before {
  content: "";
  position: absolute;
  inset-block: 7px;
  inset-inline: 3px;
  z-index: -1;
  border: 1px solid var(--rasrouting-theme-line);
  border-radius: 8px;
  background: var(--rasrouting-theme-surface);
  box-sizing: border-box;
}

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

.site-bar-shared-controls .rasrouting-theme-group .rasrouting-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(--rasrouting-theme-ink-soft);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}

.site-bar-shared-controls .rasrouting-theme-group .rasrouting-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 .rasrouting-theme-group .rasrouting-theme-btn,
.site-bar-shared-controls .rasrouting-theme-group .rasrouting-theme-btn:hover,
.site-bar-shared-controls .rasrouting-theme-group .rasrouting-theme-btn.is-active,
.site-bar-shared-controls .rasrouting-theme-group .rasrouting-theme-btn[aria-pressed="true"] { background: transparent; }

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

.site-bar-shared-controls .rasrouting-theme-group .rasrouting-theme-btn:hover::before {
  background: var(--rasrouting-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 .rasrouting-theme-group .rasrouting-theme-btn.is-active,
.site-bar-shared-controls .rasrouting-theme-group .rasrouting-theme-btn[aria-pressed="true"] {
  color: var(--rasrouting-theme-ink-strong);
  font-weight: 650;
}

.site-bar-shared-controls .rasrouting-theme-group .rasrouting-theme-btn.is-active::before,
.site-bar-shared-controls .rasrouting-theme-group .rasrouting-theme-btn[aria-pressed="true"]::before {
  background: var(--rasrouting-theme-surface-raised);
  border-color: var(--rasrouting-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(--rasrouting-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(--rasrouting-theme-line);
  border-radius: 8px;
  background: var(--rasrouting-theme-surface);
  box-sizing: border-box;
}
.site-bar-styles-trigger:hover::before,
.site-bar-styles-trigger[aria-expanded="true"]::before {
  background: var(--rasrouting-theme-surface-raised);
  border-color: var(--rasrouting-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(--rasrouting-theme-line);
  border-radius: 10px;
  background: var(--rasrouting-theme-surface);
  box-shadow: var(--rasrouting-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(--rasrouting-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(--rasrouting-theme-surface-raised); color: var(--rasrouting-theme-ink-strong); }
.site-bar-styles-list button[aria-pressed="true"] { color: var(--rasrouting-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; }
.site-bar button:focus-visible, .site-bar a:focus-visible, .site-bar summary:focus-visible {
  outline: 2px solid var(--rasrouting-theme-ink-strong);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--rasrouting-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; }
/* The current Business beside the account (owner 10-22): one line; a long name ends in an ellipsis (its full name is the title). */
.site-bar-public [data-site-identity] {
  flex: 1 1 0;
  min-width: 0;
  max-width: max-content;
  margin-inline-start: auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.875rem;
  color: var(--rasrouting-theme-ink-strong);
}
@media (min-width: 601px) {
  :root .site-bar.site-bar-public > .wrap:has(> [data-site-identity]):not(:has(> .site-nav[data-site-tabs])) { flex-wrap: nowrap; }
  :root .site-bar-public .wrap:has(> [data-site-identity]) > .brand { flex: 1 1 0; flex-wrap: nowrap; min-width: 44px; max-width: max-content; }
  :root .site-bar-public .wrap:has(> [data-site-identity]) > .site-nav:not([data-site-tabs]) { flex-grow: 0; }
  :root .site-bar-public .wrap:has(> [data-site-identity]) > .site-bar-shared-controls { flex-shrink: 0; }
  .site-bar-public [data-site-identity] { min-width: 4.5em; }
}
@media (max-width: 600px) {
  .rasrouting-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; }
  .rasrouting-shell-ready .site-bar-public .site-nav { display: none; width: 100%; }
  .rasrouting-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(--rasrouting-theme-line);
    background: var(--rasrouting-theme-surface);
    box-shadow: var(--rasrouting-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(--rasrouting-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(--rasrouting-theme-line);
  color: var(--rasrouting-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-signout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--rasrouting-theme-line-strong);
  border-radius: 8px;
  background: var(--rasrouting-theme-surface);
  color: var(--rasrouting-theme-ink-strong);
  font: inherit;
  text-decoration: none;
}

.site-bar-signout:hover {
  background: var(--rasrouting-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(--rasrouting-theme-ink-soft);
  font-size: 0.75rem;
}

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

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

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

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

.site-bar-nav-link:hover {
  background: var(--rasrouting-theme-surface-raised);
  color: var(--rasrouting-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(--rasrouting-theme-ink-strong);
  font-weight: 700;
}

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

.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(--rasrouting-theme-ink-strong);
  border-radius: 8px;
  background: var(--rasrouting-theme-surface);
  color: var(--rasrouting-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-account-button:hover {
  background: var(--rasrouting-theme-surface-raised);
}

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

/* 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(--rasrouting-theme-surface-raised);
  color: var(--rasrouting-theme-ink-strong);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

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

.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(--rasrouting-theme-menu-reserve);
  scroll-padding-block-end: var(--rasrouting-theme-menu-reserve);
  border: 1px solid var(--rasrouting-theme-line-strong);
  border-radius: 10px;
  background: var(--rasrouting-theme-surface);
  color: var(--rasrouting-theme-ink-strong);
  box-shadow: var(--rasrouting-theme-shadow-md);
  overflow: auto;
}

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

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

.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(--rasrouting-theme-surface-raised);
  color: var(--rasrouting-theme-ink-strong);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.site-bar-company-row:hover {
  background: var(--rasrouting-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(--rasrouting-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(--rasrouting-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(--rasrouting-theme-ink-strong);
  text-decoration: none;
}

.site-bar-company-add {
  border-top: 1px solid var(--rasrouting-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(--rasrouting-theme-surface-raised);
}

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

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

/* Sign out is a row like Account settings and Security: the form fills the panel and the button fills the form. */
.site-bar-account-panel .site-bar-signout-form {
  display: block;
  margin: 0;
}

.site-bar-account-panel .site-bar-signout {
  box-sizing: border-box;
  width: 100%;
  padding: 4px 8px;
  justify-content: flex-start;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.site-bar-account-panel .site-bar-signout:hover {
  background: var(--rasrouting-theme-surface-raised);
}

.site-bar-menu-status {
  margin: 0;
  padding: 4px 8px;
  color: var(--rasrouting-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(--rasrouting-theme-line-strong);
  border-radius: 8px;
  background: var(--rasrouting-theme-surface);
  color: var(--rasrouting-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 .rasrouting-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;
  }

  .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 .rasrouting-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(--rasrouting-theme-surface);
  color: var(--rasrouting-theme-ink-strong);
  z-index: 30;
}

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

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

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

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

.site-shell-legal a:focus-visible {
  outline: 3px solid var(--rasrouting-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(--rasrouting-theme-surface-raised);
  color: var(--rasrouting-theme-ink-strong);
  z-index: 100;
}

.site-skip-link:focus {
  left: 12px;
}

/* 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(--rasrouting-theme-line);
  background: var(--rasrouting-theme-surface);
  box-shadow: var(--rasrouting-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) {
  /* The tab itself is the panel's anchor (left: 0 = the trigger's left edge), so a later reflow of the bar (the account control
     finishing its load, a late font) moves the open panel with its trigger instead of leaving it where the trigger used to be. */
  .site-bar-public .site-nav > details { position: relative; }
  .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(--rasrouting-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(--rasrouting-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(--rasrouting-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(--rasrouting-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(--rasrouting-theme-ink-strong);
  font-size: 0.875rem;
  text-decoration: none;
}
.site-bar-public .site-nav-panel a:hover { background: var(--rasrouting-theme-surface-raised); }
.site-bar-public .site-nav-panel { border-radius: 10px; border-color: var(--rasrouting-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(--rasrouting-theme-ink-muted);
  border-radius: 12px;
  background: var(--rasrouting-theme-surface);
  color: var(--rasrouting-theme-ink-soft);
}
.site-bar-account-button:hover,
.site-bar-account-button[aria-expanded="true"] {
  background: var(--rasrouting-theme-surface-raised);
  color: var(--rasrouting-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(--rasrouting-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(--rasrouting-theme-line);
  border-radius: 8px;
  background: var(--rasrouting-theme-surface);
  box-sizing: border-box;
}
.site-bar-public .nav-toggle:hover::before,
.site-bar-public .nav-toggle[aria-expanded="true"]::before {
  background: var(--rasrouting-theme-surface-raised);
  border-color: var(--rasrouting-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. */
  .rasrouting-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(--rasrouting-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(--rasrouting-theme-line);
    border-radius: 8px;
    background: var(--rasrouting-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(--rasrouting-theme-surface-raised); }
  .site-bar-public .site-nav > .site-bar-styles > .site-bar-styles-list button[aria-pressed="true"]::before {
    background: var(--rasrouting-theme-surface-raised);
    border-color: var(--rasrouting-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(--rasrouting-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(--rasrouting-theme-skin-font-ui);
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: normal;
  text-align: start;
  color: var(--rasrouting-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(--rasrouting-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(--rasrouting-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(--rasrouting-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(--rasrouting-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 .rasrouting-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 .rasrouting-theme-group::before,
:root .site-bar .site-bar-styles-list::before {
  content: "";
  position: absolute;
  inset: 6px 0;
  z-index: -1;
  border: var(--rasrouting-theme-skin-box-border);
  border-radius: var(--rasrouting-theme-skin-box-radius);
  background: var(--rasrouting-theme-skin-box-bg);
  box-shadow: var(--rasrouting-theme-skin-box-shadow);
  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 .rasrouting-theme-group .rasrouting-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(--rasrouting-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 .rasrouting-theme-group .rasrouting-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(--rasrouting-theme-skin-seg-radius);
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
}

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

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

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

:root .site-bar .site-bar-shared-controls .rasrouting-theme-group .rasrouting-theme-btn[aria-pressed="true"]::before,
:root .site-bar .site-bar-shared-controls .rasrouting-theme-group .rasrouting-theme-btn.is-active::before,
:root .site-bar .site-bar-styles-list button[aria-pressed="true"]::before {
  background: var(--rasrouting-theme-skin-seg-active-bg);
  border: var(--rasrouting-theme-skin-seg-active-border);
  box-shadow: var(--rasrouting-theme-skin-seg-active-shadow);
}

:root .site-bar .site-bar-shared-controls .rasrouting-theme-group .rasrouting-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 .rasrouting-theme-group .rasrouting-theme-btn:focus-visible,
:root .site-bar .site-bar-styles-list button:focus-visible {
  z-index: 1;
  outline: 2px solid var(--rasrouting-theme-ink-strong);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--rasrouting-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; }
/* Each look's "Aa" letters are drawn in that look's own face, so the four faces are tokens here (the picker shows all four at once). Named as theme roles (the shell test requires it); the real home is platform/shell/config/central-theme.v1.json. */
:root {
  --rasrouting-theme-glyph-font-pro: "Inter", system-ui, sans-serif;
  --rasrouting-theme-glyph-font-class: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --rasrouting-theme-glyph-font-pop: "Fredoka", "Nunito", "Arial Rounded MT Bold", system-ui, sans-serif;
  --rasrouting-theme-glyph-font-modern: "Plus Jakarta Sans", system-ui, sans-serif;
}
:root .site-bar [data-shell-style="PRO"] .site-bar-style-glyph { font-family: var(--rasrouting-theme-glyph-font-pro); font-weight: 700; }
:root .site-bar [data-shell-style="CLASS"] .site-bar-style-glyph { font-family: var(--rasrouting-theme-glyph-font-class); font-style: italic; font-weight: 700; font-size: 0.9375rem; }
:root .site-bar [data-shell-style="POP"] .site-bar-style-glyph { font-family: var(--rasrouting-theme-glyph-font-pop); font-weight: 700; }
:root .site-bar [data-shell-style="MODERN"] .site-bar-style-glyph { font-family: var(--rasrouting-theme-glyph-font-modern); 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(--rasrouting-theme-skin-box-radius); }

/* 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(--rasrouting-theme-line);
  background: var(--rasrouting-theme-surface-raised);
  color: var(--rasrouting-theme-ink-strong);
  font-size: 0.875rem;
}
.site-shell-announce[data-tone="warn"] { background: var(--rasrouting-theme-warning-subtle); }
.site-shell-announce a { color: var(--rasrouting-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(--rasrouting-theme-ink-soft);
  font: inherit;
  font-size: 1.125rem;
  cursor: pointer;
}

/* A one-sentence notice a page left for the next one (site-shell.js showNotice): a quiet box at the top of the main area. */
.site-page-notice {
  margin: 0 0 16px;
  padding: 10px 14px;
  border: 1px solid var(--rasrouting-theme-line);
  border-radius: 8px;
  background: var(--rasrouting-theme-surface-raised);
  color: var(--rasrouting-theme-ink-strong);
}

/* 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(--rasrouting-theme-line);
  background: var(--rasrouting-theme-surface);
  color: var(--rasrouting-theme-ink-soft);
  font-family: var(--rasrouting-theme-skin-font-ui);
  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-rasrouting-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-rasrouting-powered-by] > a { flex-wrap: wrap; max-width: 100%; }
:root [data-shell-footer="global"] .site-shell-legal a { color: var(--rasrouting-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(--rasrouting-theme-ink-strong); text-decoration: underline; }

/* Footer floor (owner 10-12, every page, internal and external): the footer's bottom edge is max(window height, content height).
   A short page's footer touches the bottom of the window; a long page's footer follows the content and is reached by scrolling.
   Never fixed or sticky (it must not cover content). The body is a column at least one window tall; the spacer after the content
   grows to take the free room (and is never less than the gap the footer always had above it: 32px, 16px for the compact footer),
   and the footer comes last. */
.rasrouting-shell-ready body {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.rasrouting-shell-ready body::after { content: ""; order: 1; flex: 1 0 32px; }
.rasrouting-shell-ready body:has(> [data-site-footer][data-shell-footer-size="compact"])::after { flex-basis: 16px; }
:root .site-shell-footer[data-site-footer] { order: 2; flex: 0 0 auto; margin-block-start: 0; }
/* In a flex column an auto-width child with auto side margins (every page's centred, max-width <main>) would shrink to its content
   instead of filling the row as it does in a plain block. Zero specificity: a page that sets its own <main> width keeps it. */
:where(.rasrouting-shell-ready body > main) { width: 100%; width: -webkit-fill-available; width: -moz-available; width: stretch; }

/* ---- Sign-up pass (owner 10-10) -------------------------------------------------------------------------------- */

/* The brand mark in the top bar: the approved tile at a legible size.  The tile carries its own rounded edge and stroke, so
   the 26px framed box (a second border and a second shadow around it) is dropped and the artwork gets the room. */
.site-bar-public .brand [data-rasrouting-platform-mark="small"] {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-size: 100% 100%;
  box-shadow: none;
}

/* Menu: the ring belongs to keyboard focus only (:focus-visible), never to a tap or a click that leaves focus on the button. */
.site-bar button:focus:not(:focus-visible),
.site-bar-public .nav-toggle:focus:not(:focus-visible) {
  outline: 0;
  box-shadow: none;
}

/* The account menu is as tall as its items.  The 60px reserve under them was only for a trigger painted inside the panel's
   box (site-shell-view.js sets a larger reserve itself in that case); otherwise it was a blank slab laid over the page. */
.site-bar .site-bar-account-panel {
  padding-block-end: calc(var(--rasrouting-theme-menu-reserve) - 54px);
  scroll-padding-block-end: calc(var(--rasrouting-theme-menu-reserve) - 54px);
}

/* ---- rasheedrouting.com: ONE top bar on every public and customer page (R-1011-OWNER-TOP-BAR-STABLE) ------------------
   The theme segments (Aa, light/system/dark) are 44px tap targets on every page of the site, home, sign-in and account
   screens included. The rule used to live in the buying pages' own sheet (pages.css) and the sign-in sheet, so the bar
   was a different width on the home page than on /website/. Scoped to the site's own surface: no other site changes. */
:root[data-rasrouting-theme-surface="rasheedrouting-com"] .site-bar .site-bar-shared-controls .rasrouting-theme-group .rasrouting-theme-btn,
:root[data-rasrouting-theme-surface="rasheedrouting-com"] .site-bar .site-bar-styles-list button { width: 44px; min-width: 44px; flex: 0 0 44px; }
:root[data-rasrouting-theme-surface="rasheedrouting-com"] .site-bar .site-bar-shared-controls .rasrouting-theme-group .rasrouting-theme-btn::before,
:root[data-rasrouting-theme-surface="rasheedrouting-com"] .site-bar .site-bar-styles-list button::before { inset: 8px 8px; }

/* Account button with a visible word beside the icon ("Sign in" / "Account"). The shell adds the class only for a site whose
   local config gives accountLabels (today rasheedrouting.com), so every other site keeps the 44px square. */
:root .site-bar .site-bar-account-button.rasrouting-account-labelled {
  display: inline-flex; align-items: center; gap: 6px;
  width: auto; padding-inline: 10px;
}
.rasrouting-account-word { font-size: 0.875rem; font-weight: 600; line-height: 1; }

/* ---------------------------------------------------------------------
 * Tabs (owner 10-14). A tab may carry children: a dropdown. Its label opens the menu;
 * an item with a note and no address is a muted, non-link line ("(coming soon)").
 * Phones (600px and under): the tabs sit behind the one three-line Menu button (the one-row phone bar below; owner 10-22:
 * every site, every phone width). The 600px rules here are the base that one-row block builds on.
 * ------------------------------------------------------------------- */
.site-bar-public .site-nav > details[data-current] > summary { color: var(--rasrouting-theme-ink-strong); font-weight: 650; }
.site-bar-public .site-nav-panel a[aria-current="page"] { font-weight: 650; background: var(--rasrouting-theme-surface-raised); }
.site-bar-public .site-nav-soon {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 8px;
  color: var(--rasrouting-theme-ink-muted);
  font-size: 0.875rem;
  cursor: default;
}
.site-bar-public .site-nav-note { margin-inline-start: 0.35em; }
@media (min-width: 601px) {
  .site-bar-public .site-nav-panel { width: max-content; min-width: 12rem; max-width: 24rem; }
  /* A module page's own screen tabs (<nav data-site-tabs>, e.g. Police Book's nine screens) take the bar's second row under the
     name and the account; on a phone they sit behind the one menu button like every site's tabs. */
  .site-bar-public > .wrap:has(> .site-nav[data-site-tabs]) { flex-wrap: wrap; }
  .site-bar-public .site-nav[data-site-tabs] { order: 1; flex: 1 0 100%; justify-content: flex-start; column-gap: 2px; }
  .site-bar-public .site-nav[data-site-tabs] > a { padding-inline: 6px; }
  .site-bar-public > .wrap:has(> .site-nav[data-site-tabs]) [data-site-identity] + .site-bar-shared-controls { margin-inline-start: 12px; }
}
@media (max-width: 600px) {
  :root .site-bar-public .nav-toggle { display: none; }
  .rasrouting-shell-ready .site-bar-public .site-nav {
    display: flex;
    flex: 1 0 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0;
  }
  /* The two wrapped tab rows read as one bar: each item keeps its 44px box but its margin pulls the next row up 12px (the overlap is
     empty padding, never text), and the nav's own padding gives that back at the top and bottom so nothing else in the bar moves. */
  :root .site-bar-public .site-nav { padding-block: 6px; }
  .site-bar-public .site-nav > a,
  .site-bar-public .site-nav > details { flex: 0 0 auto; }
  :root:root .site-bar-public .site-nav > a,
  :root:root .site-bar-public .site-nav > details { margin-block: -6px; }
  :root .site-bar-public .site-nav > a,
  :root .site-bar-public .site-nav > details > summary { padding-inline: 5px; font-size: 0.875rem; }
  :root:root .site-bar.site-bar-public { padding-inline: 12px; }
  /* Row three: theme picker, brightness, sign in. The picker segments are 32px wide (the hit box keeps the 44px height)
     (the approved 28px, as on desktop) so the three fit one row from 360px; the narrowest phones wrap sign in below. */
  :root:root .site-bar.site-bar-public .site-bar-shared-controls { display: flex; flex: 1 0 100%; margin-inline-start: -3px; }
  :root:root .site-bar.site-bar-public .site-bar-shared-controls > [data-rasrouting-theme-control] { order: 0; flex: 0 0 auto; margin-inline-start: 0; }
  :root:root .site-bar[data-site-bar] .site-bar-styles-list button { width: 28px; min-width: 28px; flex: 0 0 28px; }
  :root:root .site-bar[data-site-bar] .site-bar-styles-list button::before { inset: 8px 0; }
  :root:root .site-bar .site-bar-styles-list .site-bar-style-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .site-bar-public .site-nav-panel {
    position: fixed;
    inset-inline: 8px;
    top: 0;
    width: auto;
    max-height: none;
    overflow: auto;
    z-index: 30;
  }
  .site-bar-public .site-bar-shared-controls { flex: 1 0 100%; justify-content: flex-start; }
}
@media (max-width: 380px) {
  :root .site-bar-public .site-nav > a,
  :root .site-bar-public .site-nav > details > summary { font-size: 0.8125rem; }
}

/* ---- Phones, 600px and under: the bar is ONE row (walk 10-15 #2; owner R-1017-OWNER-TOPBAR-MENU-ORDER; owner 10-22: every phone) ----
   Left: mark, then the site name. Right-aligned (owner 10-17, "right align for the 3 lines"): the three-line Menu button (the tabs open from it), one Theme-and-brightness
   button (the four themes and light/system/dark open from it, site-shell-view.js bindCompactDisplay), then the account button.
   The DOM is in this order too (no CSS `order`), so Tab and screen readers follow what is drawn. Every control keeps its 44px hit
   box; the bar is the same 53px tall as on a desktop. The four themes and all three brightness choices stay (R-1009-OWNER-KEEP-FOUR-STYLES).
   The site name is the ONLY thing that gives (R-1017-OWNER-TITLE-TRUNCATES): it shrinks and ends in an ellipsis before Menu is
   squeezed or pushed, and the name grows only up to Menu; Menu, Aa and the account never move or shrink.
   Above 600px nothing here applies. */
@media (max-width: 600px) {
  :root:root .site-bar.site-bar-public { padding-block: 4px; }
  :root:root .site-bar.site-bar-public > .wrap { flex-wrap: nowrap; gap: 0 4px; }
  :root:root .site-bar.site-bar-public .brand { flex: 0 1 auto; flex-wrap: nowrap; min-width: 0; gap: 8px; }
  :root:root .site-bar.site-bar-public .brand [data-rasrouting-platform-mark] { flex: none; }
  :root:root .site-bar.site-bar-public .brand .site-bar-module {
    flex: 0 1 auto;
    min-width: 0;
    max-width: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    contain: none;
  }
  :root:root .site-bar.site-bar-public .nav-toggle { display: inline-flex; flex: none; justify-content: center; width: 44px; min-width: 44px; padding: 0; margin-inline-start: auto; }
  /* No tabs, no Menu button (site-shell-view.js bindPublicNavigation); the controls keep the right edge. */
  :root:root .site-bar.site-bar-public .nav-toggle[hidden] { display: none; }
  :root:root .site-bar.site-bar-public .nav-toggle[hidden] + .site-nav + .site-bar-shared-controls { margin-inline-start: auto; }
  :root:root .site-bar.site-bar-public[data-site-bar] .site-bar-shared-controls { display: flex; flex: none; margin-inline-start: 0; gap: 4px; }
  /* A signed-in page's current Business gives first (down to a few letters), then the site name. */
  :root:root .site-bar.site-bar-public [data-site-identity] { flex: 0 1000 auto; min-width: 4.5em; margin-inline-start: auto; padding-inline-start: 8px; font-size: 0.8125rem; }
  :root:root .site-bar.site-bar-public [data-site-identity] + .site-bar-shared-controls { margin-inline-start: 4px; }
  :root:root .site-bar.site-bar-public .site-bar-display { position: static; flex: none; }
  :root:root .site-bar.site-bar-public .site-bar-shared-controls > [data-site-bar-account-menu] { margin-inline-start: 0; flex: none; }
  /* The account button is the person icon here; "Sign in" / "Account" stays its accessible name so the name and Menu have room. */
  :root:root .site-bar .site-bar-account-button.rasrouting-account-labelled { width: 44px; padding-inline: 0; justify-content: center; }
  :root:root .site-bar .site-bar-account-button.rasrouting-account-labelled .rasrouting-account-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  /* Narrower than any phone (content zoomed far in, so the screen is a few hundred px wide at most): the mark, Menu, Aa and account
     alone need about 210px, so below 240px the controls wrap to the next row instead of running off the screen and squeezing the
     account popup. Every phone, 320px and up, stays one row with the name giving first. */
  @media (max-width: 240px) {
    :root:root .site-bar.site-bar-public > .wrap { flex-wrap: wrap; }
    :root:root .site-bar.site-bar-public .brand { flex-basis: 5rem; }
  }
  .site-bar-display-toggle {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--rasrouting-theme-ink-strong);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
  }
  .site-bar-display-toggle::before {
    content: "";
    position: absolute;
    inset-block: 6px;
    inset-inline: 0;
    z-index: -1;
    border: 1px solid var(--rasrouting-theme-line);
    border-radius: var(--rasrouting-theme-skin-box-radius, 8px);
    background: var(--rasrouting-theme-surface);
    box-sizing: border-box;
  }
  .site-bar-display-toggle:hover::before,
  .site-bar-display-toggle[aria-expanded="true"]::before {
    background: var(--rasrouting-theme-surface-raised);
    border-color: var(--rasrouting-theme-line-strong);
  }
  .site-bar-display-icon { display: block; width: 14px; height: 14px; }
  /* The Menu sheet and the Theme-and-brightness panel hang under the bar, the full width of the screen. */
  .site-bar-display-panel[hidden] { display: none; }
  :root:root .site-bar.site-bar-public .site-bar-display-panel,
  :root:root.rasrouting-shell-ready .site-bar.site-bar-public .site-nav.is-open {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    box-sizing: border-box;
    padding: 8px 12px 12px;
    max-height: 75vh;
    overflow: auto;
    border: 0;
    border-block-end: 1px solid var(--rasrouting-theme-line);
    background: var(--rasrouting-theme-surface);
    box-shadow: var(--rasrouting-theme-shadow-md);
  }
  :root:root .site-bar.site-bar-public .site-bar-display-panel { display: flex; flex-direction: column; gap: 4px; }
  :root:root .site-bar.site-bar-public .site-bar-display-panel[hidden] { display: none; }
  /* Each choice is one line: its word at the start, its 28px segments at the end (the approved segment size is unchanged). */
  :root:root .site-bar.site-bar-public .site-bar-display-panel .site-bar-styles,
  :root:root .site-bar-display-panel .rasrouting-theme-control-shell { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin: 0; padding: 0; box-sizing: border-box; }
  :root:root .site-bar-display-panel .site-bar-styles::before,
  :root:root .site-bar-display-panel [data-rasrouting-theme-control]::before {
    color: var(--rasrouting-theme-ink-strong);
    font-size: 0.9375rem;
    font-weight: 600;
  }
  :root:root .site-bar-display-panel .site-bar-styles::before { content: "Theme"; }
  :root:root .site-bar-display-panel [data-rasrouting-theme-control]::before { content: "Brightness"; }
  :root:root .site-bar[data-site-bar] .site-bar-display-panel .site-bar-styles-list { position: relative; display: flex; flex: 0 0 auto; }
  /* Menu: the tabs stack, one per line; a dropdown's links open in place. */
  :root:root.rasrouting-shell-ready .site-bar.site-bar-public .site-nav { display: none; padding-block: 0; }
  :root:root.rasrouting-shell-ready .site-bar.site-bar-public .site-nav.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  :root:root.rasrouting-shell-ready .site-bar.site-bar-public .site-nav > a,
  :root:root.rasrouting-shell-ready .site-bar.site-bar-public .site-nav > details { margin-block: 0; width: 100%; }
  :root:root.rasrouting-shell-ready .site-bar.site-bar-public .site-nav > a,
  :root:root.rasrouting-shell-ready .site-bar.site-bar-public .site-nav > details > summary { padding-inline: 8px; font-size: 1rem; justify-content: flex-start; text-align: start; }
  :root:root .site-bar.site-bar-public .site-nav-panel {
    position: static;
    inset: auto;
    width: auto;
    max-height: none;
    overflow: visible;
    border: 0;
    box-shadow: none;
    padding-inline-start: 12px;
  }
}

/* ---- Phones under 400px: the whole name, "Rasheed Routing", shows (PM 10-15) ------------------------------------------------
   At 15px the name needs 152px; the one-row bar leaves it 122px at 360px and 82px at 320px, so it read "Rasheed R…" and "Rashe…".
   Under 400px the name is 13px (102px) and the bar's side padding and gaps are tighter, which fits 320px and up on one line. A longer
   name is cut with an ellipsis (the 600px one-row block above), never wrapped. The mark, Menu, Aa and account button all stay, each with
   its 44px hit box. */
@media (max-width: 399px) {
  :root:root .site-bar.site-bar-public { padding-inline: 8px; }
  :root:root .site-bar.site-bar-public > .wrap { gap: 0 2px; }
  :root:root .site-bar.site-bar-public .brand { gap: 6px; }
  :root:root .site-bar.site-bar-public .brand .site-bar-module { font-size: 0.8125rem; }
}

/* ---- Paste blocks and their one Copy button (owner 10-15: "On dark mode I legit can't see them") ---------------------------
   Every <pre> and every non-button element marked data-copy is a paste block: sunken ground, strong ink and a strong line, so
   it reads in light and dark in all four themes (tests pin the contrast). copy-button.js adds the .rasrouting-copy-row after it. Tokens
   only; no page writes its own colours for either. */
pre,
[data-copy]:not(button) {
  background: var(--rasrouting-theme-surface-sunken);
  color: var(--rasrouting-theme-ink-strong);
  border: 1px solid var(--rasrouting-theme-line-strong);
  border-radius: 8px;
  padding: 12px;
  max-width: 100%;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.rasrouting-copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0 14px; }
.rasrouting-copy-btn {
  min-height: 44px;
  padding: 0 18px;
  font: inherit;
  font-weight: 700;
  color: var(--rasrouting-theme-ink-strong);
  background: var(--rasrouting-theme-surface-raised);
  border: 1px solid var(--rasrouting-theme-line-strong);
  border-radius: 8px;
  cursor: pointer;
}
.rasrouting-copy-btn:hover { border-color: var(--rasrouting-theme-blue-ink); }
.rasrouting-copy-btn:focus-visible { outline: 2px solid var(--rasrouting-theme-blue-ink); outline-offset: 2px; }
.rasrouting-copy-btn[data-copied="true"] { border-color: var(--rasrouting-theme-green-ink); color: var(--rasrouting-theme-green-ink); }
/* The spoken "Copied": the button's own label shows it, so this one is for screen readers only. */
.rasrouting-copy-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Theme control back to the Gemini MODERN v2 size (R-1012-OWNER-THEME-CONTROL-WIDE-AGAIN) ------------------------
   The two 44px-wide segment rules above (this sheet's rasheedrouting-com block and pages.css's walk-r3 copy) painted
   the light/system/dark control wide again, against R-1008-OWNER-SHELL-CONTROLS-MATCH-MODERN-V2 and
   R-1008-OWNER-GLOBAL-SHELL-GEMINI-WIDTH: segments are 28px wide, 44px tall (the hit area is the 44px height;
   WCAG 2.2 AA target size is 24px). This block comes last and is more specific than both, so the control is one
   28px-segment row on every page; the earlier rules are inert and stay only because tests pin their text. */
:root:root .site-bar[data-site-bar] .site-bar-shared-controls .rasrouting-theme-group .rasrouting-theme-btn { width: 28px; min-width: 28px; flex: 0 0 28px; }
:root:root .site-bar[data-site-bar] .site-bar-shared-controls .rasrouting-theme-group .rasrouting-theme-btn::before { inset: 8px 0; }
/* The skin row is 28px segments in the bar only; at 600px and under it lives in the Menu sheet as a full-width row with
   names beside the glyphs (section above), which keeps its own widths. */
@media (min-width: 601px) {
  :root:root .site-bar[data-site-bar] .site-bar-styles-list button { width: 28px; min-width: 28px; flex: 0 0 28px; }
  :root:root .site-bar[data-site-bar] .site-bar-styles-list button::before { inset: 8px 0; }
}