/* App bridge for the Emergent design system. Does not alter preview HTML. */

html.ax,
html.ax body {
  background: var(--ax-canvas);
  color: var(--ax-ink);
}

html.ax .ax-topbar .ax-iconbtn svg,
html.ax .ax-nav__item svg {
  width: 18px;
  height: 18px;
  flex: none;
}

html.ax button.ax-nav__item {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: start;
  cursor: pointer;
  font: inherit;
}

html.ax .ax-nav__item .ax-chev {
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  display: inline-block;
}

html.ax .ax-nav__item.is-open .ax-chev {
  transform: rotate(225deg);
}

html.ax .ax-search--admin {
  background: #fff;
  border-color: #83968e;
  padding-left: 8px;
}

html.ax .ax-search--admin .form-control,
html.ax .ax-search--admin input {
  border: 0;
  background: transparent;
  box-shadow: none;
  height: 36px;
  color: #1a1f1d;
}

html.ax .ax-search--admin .input-group-text,
html.ax .ax-search--admin kbd {
  background: transparent;
  border: 0;
  color: var(--ax-muted);
}

html.ax .page-wrapper,
html.ax .page-body,
html.ax .page-content,
html.ax #vendor-dashboard {
  background: transparent;
  min-width: 0;
}

html.ax .ax-dir--app {
  grid-template-columns: 280px minmax(0, 1fr);
}

html.ax .ax-dir--app .al-facets,
html.ax .ax-rail .al-facets {
  background: var(--ax-surface);
  border: 1px solid var(--ax-line);
  border-radius: var(--ax-r-md);
  font-family: var(--ax-sans);
}

html.ax .ax-content .card,
html.ax .ax-content .bb-card {
  border-radius: var(--ax-r-lg);
  border: 1px solid var(--ax-line);
  box-shadow: var(--ax-sh-1);
}

html.ax .ax-pubnav__label {
  align-self: center;
  padding: 8px 8px 8px 4px;
  font-family: var(--ax-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ax-muted);
}

html.ax .ax-home-card,
html.ax .au-item {
  display: block;
  padding: 20px;
  border-radius: var(--ax-r-lg);
  background: var(--ax-surface);
  border: 1px solid var(--ax-line);
  box-shadow: var(--ax-sh-1);
  color: inherit;
  text-decoration: none;
}

html.ax .ax-home-card:hover,
html.ax .au-item:hover {
  border-color: var(--ax-sage-2);
}

html.ax form.ax-dir-search {
  grid-template-columns: minmax(0, 1fr) auto;
}

html.ax .ax-company {
  padding-top: 28px;
  padding-bottom: 48px;
}

html.ax .al-dcard {
  background: var(--ax-surface);
  border: 1px solid var(--ax-line);
  border-radius: var(--ax-r-lg);
  box-shadow: var(--ax-sh-1);
}

html.ax .pp {
  font-family: var(--ax-sans);
}

html.ax .pp-card,
html.ax .pp-sec,
html.ax .pp-ev {
  border-radius: var(--ax-r-lg);
  border-color: var(--ax-line);
  background: var(--ax-surface);
}

html.ax .pp-name,
html.ax .pp-eyebrow,
html.ax .pp-sec h2,
html.ax .pp-facts dt {
  font-family: var(--ax-mono);
}

html.ax .pp-verified i,
html.ax .pp-ev:hover {
  background: var(--ax-pale);
}

/* Orbit live chat uses the same forest / neon / canvas. Forms and endpoints are unchanged.
   The preview's estimate and invoice builder is not part of this widget. */
#orbit-live-toggle {
  background: #222e2a;
  border-radius: 4px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}

#orbit-live-panel {
  border-radius: 20px;
  border-color: #e2eae8;
  background: #fafafa;
}

.orbit-live-header {
  background: #222e2a;
}

.orbit-live-message.mine {
  background: #e4f890;
}

.orbit-live-actions button {
  background: #00ec6c;
  color: #222e2a;
  border-radius: 4px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Shared admin/seller account dropdown: visible only when intentionally opened. */
html.ax .ax-account-menu { position: relative; flex: none; }
html.ax .ax-account-toggle {
  cursor: pointer; padding: 5px 7px; background: transparent; border: 1px solid transparent;
  border-radius: var(--ax-r-sm, 6px); font: inherit; color: #fff;
}
html.ax .ax-account-toggle:hover,
html.ax .ax-account-toggle[aria-expanded="true"] { background: rgba(255,255,255,.12); }
html.ax .ax-account-dropdown {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 110;
  width: min(260px, calc(100vw - 22px)); padding: 9px; background: var(--ax-surface, #fff);
  color: var(--ax-ink, #182322); border: 1px solid var(--ax-line, #dee5e1);
  border-radius: var(--ax-r-md, 9px); box-shadow: 0 12px 35px rgba(0,0,0,.17);
}
html.ax .ax-account-dropdown[hidden] { display: none !important; }
html.ax .ax-account-dropdown__label { font-size: 12px; font-weight: 650; padding: 9px 11px; }
html.ax .ax-account-dropdown a {
  display: flex; align-items: center; gap: 10px; padding: 10px 11px;
  border-radius: 6px; color: inherit; text-decoration: none; font-size: 13px;
}
html.ax .ax-account-dropdown a:hover { background: var(--ax-pale, #f1f6f2); }
html.ax .ax-account-dropdown__divider { border-top: 1px solid var(--ax-line, #dee5e1); margin: 5px 0; }
html.ax .ax-account-toggle svg { width: 14px; height: 14px; }
html.ax .ax-side .ax-nav__item { cursor: pointer; }
html.ax .ax-side a.ax-nav__item { text-decoration: none; }
html.ax .ax-side .ax-nav__sub { display: none; }
html.ax .ax-side .ax-nav__item.is-open + .ax-nav__sub { display: block; }
@media (max-width: 760px) {
  html.ax .ax-account-toggle .ax-account-name { display: none; }
}


/* Keep mobile navigation names inside the drawer without clipping its content. */
html.ax .ax-side .ax-nav__item {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  line-height: 1.45;
}
html.ax .ax-side .ax-nav__item > span:not(.ax-chev) {
  min-width: 0;
  overflow-wrap: break-word;
}
html.ax .ax-side .ax-nav__sub .ax-nav__item {
  padding-right: 12px;
}
html.ax .ax-side .ax-nav__item .ax-chev {
  flex: 0 0 auto;
}

/* Admin global search: one field, no nested Botble input group or shortcut chip. */
html.ax .ax-topbar .ax-search--admin {
  display: flex;
  align-items: center;
  flex: 1 1 180px;
  min-width: 0;
  max-width: 360px;
  height: 40px;
  padding: 0 12px;
  overflow: hidden;
  box-sizing: border-box;
}
html.ax .ax-topbar .ax-search--admin .ax-admin-search-input {
  display: block;
  width: 100%;
  min-width: 0;
  height: 38px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
  color: #1a1f1d;
  font-size: 14px;
  line-height: normal;
  appearance: none;
}
html.ax .ax-topbar .ax-search--admin .ax-admin-search-input:focus { box-shadow: none; }
@media (max-width: 720px) {
  html.ax .ax-topbar .ax-search--admin { flex: 1 1 100px; width: auto; min-width: 0; }
  html.ax .ax-topbar .ax-search--admin .ax-admin-search-input { font-size: 13px; }
}

/* Central design. The public theme already paints most pages from body.alsett-ds
   and the --al-* / --bs-* / Shofy variables. Point those variables at the Emergent
   tokens so buttons, type, surfaces, and lines follow alsett-ds.css without a second system. */
html.ax {
  --bb-primary: #222e2a;
  --bb-primary-rgb: 34, 46, 42;
  --bs-primary: #00ec6c;
  --bs-primary-rgb: 0, 236, 108;
  --bs-body-bg: var(--ax-canvas);
  --bs-body-color: var(--ax-ink);
  --bs-body-font-family: var(--ax-sans);
  --bs-border-color: var(--ax-line);
  --bs-link-color: var(--ax-forest);
  --bs-link-hover-color: var(--ax-forest);
  --bs-border-radius: var(--ax-r-sm);
  --bs-emphasis-color: var(--ax-ink);
  --bs-secondary-color: var(--ax-ink-2);
}

html.ax body.alsett-ds {
  --al-bg: var(--ax-canvas);
  --al-surface: var(--ax-pale);
  --al-fg: var(--ax-ink);
  --al-muted-fg: var(--ax-ink-2);
  --al-line: var(--ax-line-2);
  --al-line-strong: var(--ax-line);
  --al-hover: rgba(34, 46, 42, .05);
  --al-btn-bg: var(--ax-neon);
  --al-btn-fg: var(--ax-forest);
  --al-btn-hover: var(--ax-neon-2);
  --al-focus: var(--ax-neon);
  --al-accent: var(--ax-neon);
  --al-font-heading: var(--ax-sans);
  --al-font-body: var(--ax-sans);
  --al-font-mono: var(--ax-mono);
  --al-radius: var(--ax-r-xs);
  --al-radius-card: var(--ax-r-md);

  --primary-color: var(--ax-forest);
  --primary-color-rgb: 34, 46, 42;
  --secondary-color: var(--ax-forest);
  --secondary-color-rgb: 34, 46, 42;
  --heading-color: var(--ax-ink);
  --text-color: var(--ax-ink);
  --primary-font: var(--ax-sans);
  --heading-font: var(--ax-sans);
  --tp-ff-body: var(--ax-sans);
  --tp-ff-heading: var(--ax-sans);
  --tp-ff-p: var(--ax-sans);
  --tp-ff-jost: var(--ax-sans);
  --tp-ff-roboto: var(--ax-sans);
  --tp-ff-oregano: var(--ax-sans);
  --tp-ff-charm: var(--ax-sans);
  --tp-theme-primary: var(--ax-forest);
  --tp-theme-secondary: var(--ax-forest);
  --tp-theme-green: var(--ax-forest);
  --tp-theme-brown: var(--ax-forest);
  --tp-common-black: var(--ax-forest);
  --tp-common-black-solid: var(--ax-forest);
  --tp-heading-primary: var(--ax-ink);
  --tp-heading-secondary: var(--ax-ink);
  --tp-text-body: var(--ax-ink-2);
  --tp-text-1: var(--ax-ink-2);
  --tp-text-2: var(--ax-ink-2);
  --tp-text-3: var(--ax-ink-2);
  --tp-text-4: var(--ax-ink-2);
  --tp-text-5: var(--ax-ink-2);
  --tp-text-6: var(--ax-ink-2);
  --tp-border-primary: var(--ax-line);
  --tp-border-secondary: var(--ax-line);
  --tp-pink-1: var(--ax-forest);
  --tp-pink-2: var(--ax-forest);
  --tp-pink-3: var(--ax-forest);
  --tp-pink-4: var(--ax-forest);
  --tp-green-1: var(--ax-forest);
  --tp-green-dark: var(--ax-forest);
  --tp-blue-1: var(--ax-forest);
  --tp-orange-1: var(--ax-forest);
  --tp-yellow-1: var(--ax-forest);
  --tp-yellow-2: var(--ax-forest);
  --tp-yellow-3: var(--ax-forest);
  --tp-khaki-1: var(--ax-forest);
  --tp-grey-1: var(--ax-pale);
  --tp-grey-2: var(--ax-pale);
  --tp-grey-7: var(--ax-pale);
  --bs-primary: var(--ax-neon);
  --bs-primary-rgb: 0, 236, 108;
  --bs-secondary: var(--ax-ink-2);
  --bs-secondary-rgb: 74, 85, 82;
  --bs-success: var(--ax-forest);
  --bs-success-rgb: 34, 46, 42;
  --bs-info: var(--ax-teal);
  --bs-info-rgb: 20, 112, 120;
  --bs-warning: var(--ax-orange);
  --bs-warning-rgb: 252, 60, 0;
  --bs-primary-text-emphasis: var(--ax-forest);
  --bs-primary-bg-subtle: var(--ax-lime-pale);
  --bs-primary-border-subtle: var(--ax-neon);
  --bs-link-color: var(--ax-ink);
  --bs-link-hover-color: var(--ax-forest);
  --bs-link-color-rgb: 26, 31, 29;
  --bs-link-hover-color-rgb: 34, 46, 42;
  --bs-focus-ring-color: rgba(0, 236, 108, .35);
  --header-sticky-background-color: var(--ax-surface);
  --header-sticky-text-color: var(--ax-ink);
  background: var(--ax-canvas);
  color: var(--ax-ink);
  font-family: var(--ax-sans);
}

html.ax body.alsett-ds ::selection {
  background: var(--ax-neon);
  color: var(--ax-forest);
}

html.ax .btn-primary,
html.ax body.alsett-ds .al-btn--primary,
html.ax body.alsett-ds .btn-primary {
  background: var(--ax-neon);
  border-color: var(--ax-neon);
  color: var(--ax-forest);
}

html.ax .btn-primary:hover,
html.ax .btn-primary:focus,
html.ax body.alsett-ds .al-btn--primary:hover,
html.ax body.alsett-ds .btn-primary:hover {
  background: var(--ax-neon-2);
  border-color: var(--ax-neon-2);
  color: var(--ax-forest);
}

html.ax .card,
html.ax .bb-card,
html.ax .auth-card {
  background: var(--ax-surface);
  border: 1px solid var(--ax-line);
  border-radius: var(--ax-r-lg);
  box-shadow: var(--ax-sh-1);
  color: var(--ax-ink);
}

html.ax .form-control,
html.ax .form-select,
html.ax textarea.form-control {
  border-radius: var(--ax-r-sm);
  border-color: var(--ax-ink-2);
  background: var(--ax-surface);
  color: var(--ax-ink);
  font-family: var(--ax-sans);
}

html.ax .form-control:focus,
html.ax .form-select:focus,
html.ax textarea.form-control:focus {
  border-color: var(--ax-neon);
  box-shadow: 0 0 0 3px rgba(0, 236, 108, .25);
}

html.ax .table {
  --bs-table-color: var(--ax-ink);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--ax-line-2);
  color: var(--ax-ink);
}

html.ax .table thead th,
html.ax .table thead td {
  font-family: var(--ax-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ax-ink-2);
  background: var(--ax-pale);
}

/* Footer. body.alsett-ds paints headings and links with the page ink, which
   disappears on the forest footer. These rules load last and restore the
   Emergent footer: forest ground, white column labels, sage links. */
html.ax body.alsett-ds .ax-footer {
  background: var(--ax-forest) !important;
  color: #fff !important;
}

html.ax body.alsett-ds .ax-footer a.ax-brand,
html.ax body.alsett-ds .ax-footer h6 {
  font-family: var(--ax-mono);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff !important;
}

html.ax body.alsett-ds .ax-footer a.ax-brand {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .12em;
}

html.ax body.alsett-ds .ax-footer h6 {
  font-size: 11px;
}

html.ax body.alsett-ds .ax-footer p,
html.ax body.alsett-ds .ax-footer li,
html.ax body.alsett-ds .ax-footer span,
html.ax body.alsett-ds .ax-footer a,
html.ax body.alsett-ds .ax-footer h6 {
  color: #fff !important;
}

html.ax body.alsett-ds .ax-footer p,
html.ax body.alsett-ds .ax-footer__grid a:not(.ax-brand) {
  font-family: var(--ax-sans);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

html.ax body.alsett-ds .ax-footer a:hover {
  color: var(--ax-neon) !important;
  text-decoration: none;
}

/* Builder homepage. ardo-home.css still paints the hero and several bands
   white-on-dark. The light canvas makes that copy disappear, which is the
   blank page with a few leftover numbers. */
html.ax body.alsett-ds .di-home,
html.ax body.alsett-ds .di-home .di-hero,
html.ax body.alsett-ds .di-home .di-band-dark,
html.ax body.alsett-ds .di-home .di-band-lime,
html.ax body.alsett-ds .di-home .di-band-white,
html.ax body.alsett-ds .di-home .di-band-grey {
  background: var(--ax-canvas);
  color: var(--ax-ink);
}

html.ax body.alsett-ds .di-home .di-hero-title,
html.ax body.alsett-ds .di-home .di-block-title,
html.ax body.alsett-ds .di-home .di-block-title em,
html.ax body.alsett-ds .di-home .di-card-title,
html.ax body.alsett-ds .di-home .di-card-title a,
html.ax body.alsett-ds .di-home .di-live-title,
html.ax body.alsett-ds .di-home .di-live-title a,
html.ax body.alsett-ds .di-home .di-market-title,
html.ax body.alsett-ds .di-home .di-market-title a,
html.ax body.alsett-ds .di-home .di-totals dd,
html.ax body.alsett-ds .di-home .di-stats dd,
html.ax body.alsett-ds .di-home h1,
html.ax body.alsett-ds .di-home h2,
html.ax body.alsett-ds .di-home h3,
html.ax body.alsett-ds .di-home h3 a {
  color: var(--ax-ink) !important;
}

html.ax body.alsett-ds .di-home .di-eyebrow,
html.ax body.alsett-ds .di-home .di-eyebrow-on-dark,
html.ax body.alsett-ds .di-home .di-hero-intro,
html.ax body.alsett-ds .di-home .di-block-intro,
html.ax body.alsett-ds .di-home .di-card-sub,
html.ax body.alsett-ds .di-home .di-card-text,
html.ax body.alsett-ds .di-home .di-totals dt,
html.ax body.alsett-ds .di-home .di-stats dt,
html.ax body.alsett-ds .di-home .di-live-loc,
html.ax body.alsett-ds .di-home .di-date,
html.ax body.alsett-ds .di-home .di-float-sub {
  color: var(--ax-ink-2) !important;
}

html.ax body.alsett-ds .di-home .di-card,
html.ax body.alsett-ds .di-home .di-tile,
html.ax body.alsett-ds .di-home .di-float,
html.ax body.alsett-ds .di-home .di-live-card,
html.ax body.alsett-ds .di-home .di-market {
  background: var(--ax-surface);
  color: var(--ax-ink);
  border: 1px solid var(--ax-line);
}

html.ax body.alsett-ds .di-home .di-btn-primary,
html.ax body.alsett-ds .di-home .di-search-btn {
  background: var(--ax-neon) !important;
  color: var(--ax-forest) !important;
  border-color: var(--ax-neon) !important;
}

html.ax body.alsett-ds .di-home .di-btn-secondary {
  background: var(--ax-surface) !important;
  color: var(--ax-ink) !important;
  border-color: var(--ax-forest) !important;
}

html.ax body.alsett-ds .ax-lead h1,
html.ax body.alsett-ds .ax-lead p,
html.ax body.alsett-ds .ax-section__title,
html.ax body.alsett-ds .ax-mini h5,
html.ax body.alsett-ds .ax-story h3,
html.ax body.alsett-ds .ax-article-card h3,
html.ax body.alsett-ds .ax-rank b {
  color: var(--ax-ink);
}

html.ax body.alsett-ds .ax-databand,
html.ax body.alsett-ds .ax-databand .ax-num {
  color: #fff;
}

html.ax body.alsett-ds .ax-databand small {
  color: var(--ax-on-dark-2);
}

html.ax body.alsett-ds .ax-footer__bottom,
html.ax body.alsett-ds .ax-footer__bottom a,
html.ax body.alsett-ds .ax-footer__bottom span {
  font-family: var(--ax-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff !important;
}