/* Behavior Handbook (/behavior_handbook). Values from the design handoff
   (tmp/design/design_handoff_behavior_handbook/README.md); everything is
   Soft UI tokens. Two backgrounds only: white and #F8F9FA. The orange tint
   #FDEFEC marks "this one, right now" or "careful". */

.bh-page { --bh-navy: #28333F; --bh-body: #67748E; --bh-muted: #8692A9; --bh-g500: #ADB5BD;
  --bh-g100: #F8F9FA; --bh-g200: #E9ECEF; --bh-g300: #DEE2E6; --bh-orange: #EC6952;
  --bh-purple: #B744B8; --bh-tint: #FDEFEC; --bh-tint-ink: #B8462F; --bh-blue: #85A1EE; --bh-green: #17AD37;
  color: var(--bh-body); font-weight: 500; }
.bh-page a { color: var(--bh-purple); }
.bh-page code { font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: .8125rem; font-weight: 600;
  color: #28333F; background: #fff; border: 1px solid #E9ECEF; border-radius: .25rem; padding: 1px 5px; }
.bh-page ul, .bh-page ol { padding-left: 1.25rem; }
.bh-page table { width: auto; margin: .5rem 0 1rem; border-collapse: collapse; font-size: .9375rem; }
.bh-page th, .bh-page td { border: 1px solid #E9ECEF; padding: 4px 12px; }
.bh-page th { background: #F8F9FA; color: #28333F; font-weight: 700; }
.bh-page img { max-width: 100%; }
.bh-count { font-weight: 700; color: #ADB5BD; }

/* Soft UI sets html { scroll-behavior: smooth }. On a reference page this
   long (about 90,000px) a smooth jump to a deep link crawls or stalls, so
   anchors jump instantly here. */
html:has(.bh-page) { scroll-behavior: auto; }

/* ---- layout ---- */
.bh-layout { display: flex; gap: 48px; align-items: flex-start; }
.bh-main { flex: 1 1 auto; min-width: 0; padding-top: 34px; padding-bottom: 60px; }
/* The search box sits outside the scrolling list so its results dropdown is
   not clipped by the list's overflow. */
/* Own breakpoint rule rather than d-none/d-lg-block: those utilities force
   display:block !important, which would undo the column flex. */
.bh-nav { display: none; flex: 0 0 260px; position: sticky; top: 24px; max-height: calc(100vh - 48px);
  flex-direction: column; padding: 34px 0 0; }
@media (min-width: 992px) { .bh-nav { display: flex; } }
.bh-nav-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 6px 40px 0; scrollbar-width: thin; }
.bh-nav-list::-webkit-scrollbar { width: 3px; }
.bh-nav-list::-webkit-scrollbar-thumb { background: #D2D6DA; border-radius: 3px; }
@media (max-width: 1199.98px) { .bh-nav { flex-basis: 240px; } .bh-layout { gap: 36px; } }

/* ---- page top ---- */
.bh-pagetop { border-bottom: 1px solid #E9ECEF; padding-bottom: 26px; }
.bh-title { font-size: 3rem; font-weight: 400; color: #28333F; line-height: 1.1; margin-bottom: 8px; }
.bh-subtitle { font-size: 1.25rem; font-weight: 500; color: #67748E; max-width: 600px; margin-bottom: 14px; }
.bh-intro { font-size: .9375rem; color: #67748E; margin-bottom: 22px; }
.bh-intro a { font-weight: 700; }
.bh-cat-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.bh-cat-chip { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #E9ECEF;
  border-radius: .5rem; padding: 8px 13px; font-size: .875rem; font-weight: 600; color: #28333F;
  box-shadow: 0 2px 4px -1px rgba(0,0,0,.05); transition: all .15s ease-in; }
.bh-cat-chip:hover { color: #28333F; transform: translateY(-1px); box-shadow: 0 4px 7px -1px rgba(0,0,0,.11); }
.bh-port-legend { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 20px; font-size: .8125rem; color: #8692A9; }
.bh-port-legend-title { font-weight: 700; color: #28333F; }
.bh-port-legend .bh-dot { margin-right: 6px; }

/* ---- category heading ---- */
.bh-cat-head { margin-top: 44px; scroll-margin-top: 24px; }
.bh-category { scroll-margin-top: 24px; }
.bh-eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #EC6952; margin-bottom: 6px; }
.bh-cat-title { font-size: 1.875rem; font-weight: 600; color: #28333F; margin-bottom: 0; }
.bh-cat-title .bh-count { font-size: .875rem; margin-left: 8px; }
.bh-cat-intro { font-size: 1rem; color: #67748E; margin-top: 10px; }
.bh-cat-intro p:last-child { margin-bottom: 0; }
.bh-cat-rule { width: 56px; height: 3px; background: #EC6952; border-radius: 2px; margin-top: 14px; margin-bottom: 20px; }

/* ---- sidebar ---- */
.docs-search-why { display: block; font-size: .75rem; color: #8692A9; }
.docs-search-why b { color: #28333F; font-weight: 600; }
.bh-nav .docs-search-context { display: none; }
.bh-nav .docs-search { margin: 0 0 22px; }
.bh-nav-group { margin-top: 18px; }
.bh-nav-list .bh-nav-group:first-child { margin-top: 0; }
.bh-nav-group-title { display: flex; justify-content: space-between; align-items: baseline; padding: 0 10px; margin-bottom: 7px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #28333F; }
.bh-nav-group-title .bh-count { font-size: .6875rem; }
.bh-nav-link { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: .375rem;
  font-size: .875rem; font-weight: 500; color: #67748E; line-height: 1.35; }
.bh-nav-link:hover { color: #28333F; background: #F8F9FA; }
.bh-nav-link.is-active { background: #FDEFEC; color: #28333F; font-weight: 700; }
.bh-nav-link mark { background: #FDEFEC; color: #28333F; font-weight: 700; padding: 0; }
.bh-paid-star { font-size: .5rem; color: #2152FF; }

/* ---- entry ---- */
.bh-entry { position: relative; border-top: 1px solid #E9ECEF; padding-top: 36px; margin-top: 36px; scroll-margin-top: 24px; }
.bh-entry--first { border-top: 0; padding-top: 0; margin-top: 0; }
.bh-alias { position: absolute; top: 0; }
.bh-entry-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.bh-icon-chip { flex: none; width: 46px; height: 46px; border-radius: .75rem; background: #F8F9FA; border: 1px solid #E9ECEF;
  display: inline-flex; align-items: center; justify-content: center; }
.bh-icon-chip img { width: 32px; height: 32px; image-rendering: -webkit-optimize-contrast; }
.bh-icon-chip--dark { background: #28333F; border: 0; }
.bh-entry-title { flex: 1 1 auto; min-width: 0; }
.bh-entry-name-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.bh-entry-name { font-size: 1.5rem; font-weight: 600; color: #28333F; line-height: 1.2; margin: 0; }
.bh-entry-anchor { font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: .75rem; color: #ADB5BD; opacity: 0; transition: opacity .15s ease-in; }
.bh-entry:hover .bh-entry-anchor, .bh-entry-anchor:focus { opacity: 1; color: #ADB5BD; }
.bh-entry-cat { font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #8692A9; margin-top: 5px; }
.bh-badge-paid { display: inline-block; background: #E8EEFF; color: #1A3FCC; border-radius: .375rem; padding: 2px 8px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.5; }
.bh-badge-layer { display: inline-block; background: #F8F9FA; border: 1px solid #E9ECEF; color: #8692A9; border-radius: .375rem; padding: 2px 8px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: 1.5; }
.bh-entry-body { display: flex; gap: 30px; align-items: flex-start; margin-bottom: 20px; }
.bh-desc { flex: 1 1 auto; min-width: 0; font-size: 1rem; color: #67748E; }
.bh-desc p { margin-bottom: 10px; }
.bh-desc p:last-child { margin-bottom: 0; }
.bh-desc strong, .bh-page strong { color: #28333F; font-weight: 700; }
.bh-extra { margin-bottom: 20px; font-size: .9375rem; }
.bh-extra-title { font-size: 1rem; font-weight: 700; color: #28333F; margin-bottom: 8px; }

/* video poster; JS swaps it for the iframe on click */
.bh-video { flex: none; position: relative; display: block; width: 300px; height: 169px; border-radius: .75rem; overflow: hidden;
  background: #28333F; box-shadow: 0 20px 27px 0 rgba(0,0,0,.05); }
.bh-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bh-video .mask { position: absolute; inset: 0; background: rgba(20,23,39,.42); }
.bh-play { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 7px -1px rgba(0,0,0,.25);
  transition: transform .15s ease-in; }
.bh-play i { color: #EC6952; font-size: .9375rem; margin-left: 3px; }
.bh-video:hover .bh-play { transform: scale(1.06); }
.bh-lightbox { position: fixed; inset: 0; z-index: 1060; background: rgba(20,23,39,.86); display: flex; align-items: center;
  justify-content: center; padding: 24px; }
.bh-lightbox-frame { position: relative; width: min(1100px, 100%); }
.bh-lightbox-video { position: relative; width: 100%; padding-top: 56.25%; border-radius: .75rem; overflow: hidden; background: #000;
  box-shadow: 0 20px 27px 0 rgba(0,0,0,.35); }
.bh-lightbox-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bh-lightbox-title { margin-top: 12px; color: #fff; font-size: .9375rem; font-weight: 600; text-align: center; }
.bh-lightbox-alt { margin-left: 14px; color: rgba(255,255,255,.7); font-weight: 500; font-size: .8125rem; text-decoration: underline; }
.bh-lightbox-alt:hover { color: #fff; }
.bh-lightbox-close { position: absolute; top: -16px; right: -16px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #fff;
  color: #28333F; font-size: 1.5rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 7px -1px rgba(0,0,0,.25); z-index: 1; }
.bh-lightbox-close:hover { background: #F8F9FA; }
body.bh-lightbox-open { overflow: hidden; }
@media (max-width: 991.98px) {
  .bh-lightbox { padding: 12px; }
  .bh-lightbox-close { top: -12px; right: -6px; }
}

/* panels */
.bh-panel { background: #F8F9FA; border-radius: .75rem; padding: 20px 22px; margin-bottom: 16px; font-size: .9375rem; }
.bh-panel-label { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px;
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #28333F; }
.bh-panel-label .bh-count { font-size: .75rem; letter-spacing: 0; }
.bh-panel-prose { color: #67748E; margin-bottom: 8px; }
.bh-panel-prose p:last-child { margin-bottom: 0; }
.bh-panel-prose--after { margin-top: 10px; margin-bottom: 0; }
.bh-prop-row { display: grid; grid-template-columns: 176px 1fr; gap: 18px; padding: 9px 0; border-top: 1px solid #E9ECEF; }
.bh-prop-row:first-of-type { border-top: 0; }
.bh-prop-name { font-weight: 700; color: #28333F; }
.bh-prop-text { color: #67748E; }
.bh-prop-text p { margin-bottom: 6px; }
.bh-prop-text p:last-child { margin-bottom: 0; }
.bh-prop-note { display: inline-flex; align-items: baseline; gap: 5px; margin-left: 6px; vertical-align: baseline;
  background: #fff; border: 1px solid #E9ECEF; border-radius: .375rem; padding: 1px 8px; font-size: .75rem; font-weight: 600; color: #8692A9; }
.bh-prop-note i { font-size: .6875rem; }

.bh-ports { display: flex; gap: 20px; align-items: stretch; margin-bottom: 16px; }
.bh-port-col { flex: 1 1 0; min-width: 0; margin-bottom: 0; }
.bh-port-col--empty { flex: 1 1 0; }
.bh-port-row { display: flex; gap: 12px; align-items: baseline; padding: 7px 0; border-top: 1px solid #E9ECEF; }
.bh-port-row:first-of-type { border-top: 0; }
.bh-port-group { margin: 10px 0 2px; padding-top: 8px; border-top: 1px solid #E9ECEF;
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #67748E; }
.bh-port-group + .bh-port-row { border-top: 0; }
.bh-port-text { color: #67748E; min-width: 0; }
.bh-port-text p { margin-bottom: 4px; }
.bh-port-text p:last-child { margin-bottom: 0; }
.bh-port-text ul { margin: 4px 0 0; }
.bh-port-chip { flex: none; display: inline-flex; align-items: center; gap: 7px; min-width: 74px; background: #fff;
  border: 1px solid #DEE2E6; border-radius: .375rem; padding: 3px 9px; font-family: SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8125rem; font-weight: 600; color: #28333F; line-height: 1.4; }
.bh-port-col--outputs .bh-dot { margin-left: auto; }
.bh-port-chip--mini { min-width: 0; padding: 1px 7px; font-size: .75rem; }
.bh-dot { flex: none; display: inline-block; width: 9px; height: 9px; border-radius: 50%; position: relative; }
.bh-dot--number { background: #fff; border: 1.5px solid #ADB5BD; }
.bh-dot--text { background: #B744B8; }
.bh-dot--list { background: #17AD37; }
.bh-dot--any { background: #fff; border: 1.5px solid #ADB5BD; }
.bh-dot--any::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: 50%; background: #ADB5BD; }

.bh-passthrough { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; background: #fff; border: 1px dashed #DEE2E6;
  border-radius: .75rem; padding: 12px 18px; margin-bottom: 16px; font-size: .9375rem; color: #67748E; }
.bh-passthrough-chips { display: inline-flex; align-items: center; gap: 8px; }
.bh-passthrough-chips i { font-size: .6875rem; color: #ADB5BD; }
.bh-passthrough-text { flex: 1 1 200px; }

.bh-tips { margin-bottom: 0; }
.bh-tip { display: flex; gap: 11px; align-items: flex-start; padding: 6px 0; color: #67748E; }
.bh-tip > i { flex: none; margin-top: 3px; font-size: .875rem; color: #85A1EE; }
.bh-tip--warning { background: #FDEFEC; border-radius: .5rem; padding: 8px 12px; margin: 0 -4px 4px; }
.bh-tip--warning > i { color: #EC6952; }
.bh-tip blockquote { margin: 0; }

/* ---- mobile bar and drawer ---- */
.bh-nav-mobile { position: sticky; top: 0; z-index: 2; background: #fff; padding: 10px 0; box-shadow: 0 2px 12px 0 rgba(0,0,0,.16); }
.bh-nav-mobile .docs-search { flex: 1 1 auto; min-width: 0; margin: 0; }
.bh-nav-mobile .docs-search-box { border-color: #D2D6DA; box-shadow: none; }
.bh-nav-mobile .docs-search-panel { left: 0; right: 0; }
.bh-nav-drawer-toggle { flex: none; height: 38px; padding: 0 13px; border-radius: .5rem; font-size: .75rem; font-weight: 700;
  letter-spacing: -.025rem; color: #fff; white-space: nowrap; box-shadow: 0 4px 7px -1px rgba(0,0,0,.11); }
.bh-drawer { width: 280px; }
.bh-drawer-head { border-bottom: 1px solid #E9ECEF; padding: 13px 16px; }
.bh-drawer-title { font-size: .875rem; font-weight: 700; color: #28333F; }
.bh-drawer-body { padding: 8px 8px 24px; }
.bh-drawer-cat { display: flex; justify-content: space-between; align-items: center; width: 100%; border: 0; background: transparent;
  text-align: left; padding: 9px 10px; border-radius: .375rem; font-size: .8125rem; font-weight: 700; color: #28333F; }
.bh-drawer-cat[aria-expanded="true"] { background: #FDEFEC; }
.bh-drawer-chevron { font-size: .6875rem; color: #ADB5BD; transition: transform .15s ease-in; }
.bh-drawer-cat[aria-expanded="true"] .bh-drawer-chevron { color: #EC6952; transform: rotate(90deg); }
.bh-drawer-links { padding: 2px 0 6px; }
.bh-drawer-links .bh-nav-link { padding-left: 20px; }

@media (max-width: 991.98px) {
  .bh-main { padding-top: 24px; }
  .bh-title { font-size: 1.875rem; }
  .bh-subtitle { font-size: 1rem; }
  .bh-intro { font-size: .875rem; }
  .bh-cat-jump { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
  .bh-cat-chip { justify-content: space-between; font-size: .8125rem; }
  .bh-cat-chip-name { font-size: 0; }
  .bh-cat-chip-name::after { content: attr(data-short); font-size: .8125rem; }
  .bh-eyebrow { font-size: .6875rem; }
  .bh-cat-title { font-size: 1.5rem; }
  .bh-cat-rule { width: 44px; }
  .bh-icon-chip { width: 40px; height: 40px; }
  .bh-icon-chip img { width: 28px; height: 28px; }
  .bh-entry-head { align-items: center; }
  .bh-entry-name { font-size: 1.25rem; }
  .bh-entry-anchor { display: none; }
  .bh-desc { font-size: .9375rem; }
  .bh-entry-body { flex-direction: column; gap: 16px; }
  .bh-video { width: 100%; height: 190px; }
  .bh-play { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
  .bh-panel { padding: 15px 16px; }
  .bh-prop-row { grid-template-columns: 1fr; gap: 4px; }
  .bh-prop-note { white-space: normal; margin-left: 0; margin-top: 4px; display: inline-flex; }
  .bh-ports { flex-direction: column; gap: 10px; }
  .bh-port-col--empty { display: none; }
  .bh-port-row { flex-direction: column; gap: 4px; }
  .bh-port-col--outputs .bh-dot { margin-left: 0; }
}