, so drop the whole row rather than relocate it — every other page keeps this row exactly as Mintlify ships it. */ @media (max-width: 1023px) { body:has(.sym-landing) #navbar .flex.items-center.lg\:px-12.h-16 + button { display: none; } /* Mintlify hardcodes pt-[120px] on the mobile content wrapper to clear its own two-row fixed header. Dropping the drawer's second row above shrinks the real header to a single h-16 (4rem) row, so match it. */ body:has(.sym-landing) #content-container > .pt-\[120px\] { padding-top: 4rem; } } /* Docs/Tickets/More, injected by site-header.js. Menus use native <details> (no React state available outside MDX). */ .sym-pill { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--muted-fg); text-decoration: none; white-space: nowrap; cursor: pointer; border: 1px solid transparent; transition: background-color 150ms ease, color 150ms ease; } .sym-pill svg { width: 16px; height: 16px; flex: 0 0 auto; } .sym-pill:hover { color: var(--brand-navy); } .sym-pill.is-current { background: var(--brand-light-blue); color: var(--brand-blue); } .sym-menu { position: relative; } .sym-menu > summary { list-style: none; } .sym-menu > summary::-webkit-details-marker { display: none; } .sym-menu[open] > summary.sym-pill { background: var(--accent-hover); color: var(--muted-fg); border-color: transparent; } .sym-menu__panel { position: absolute; top: calc(100% + 8px); background: var(--panel-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-panel); padding: 8px; z-index: 60; } .sym-more .sym-menu__panel { right: 0; } /* Avatar menu — trigger is the avatar plus a chevron; panel is right-aligned so it hangs under the avatar rather than running off the viewport. */ .sym-user { flex: 0 0 auto; } .sym-user__trigger { display: inline-flex; align-items: center; gap: 2px; cursor: pointer; border-radius: 999px; color: var(--muted-fg); } .sym-user__trigger:hover { color: var(--brand-navy); } .sym-user[open] .sym-user__trigger { color: var(--brand-navy); } .sym-user__trigger > svg { flex: 0 0 auto; transition: transform .15s ease; } .sym-user[open] .sym-user__trigger > svg { transform: rotate(180deg); } .sym-user__panel { right: 0; min-width: 260px; padding: 0; } .sym-user__identity { padding: 16px; border-bottom: 1px solid var(--border); } .sym-user__name { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--brand-navy); } .sym-user__sub { margin: 2px 0 0; font-size: 13px; line-height: 1.35; color: var(--muted-fg); overflow-wrap: anywhere; } .sym-user__logout { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; margin: 0; background: none; border: 0; border-radius: 0 0 var(--radius) var(--radius); font-size: 14px; line-height: 1.25; color: var(--fg); text-align: left; cursor: pointer; } .sym-user__logout > svg { flex: 0 0 auto; color: var(--muted-fg); } .sym-user__logout:hover { background: var(--accent-hover); } .sym-user__logout:hover > svg { color: var(--brand-navy); } .apps-panel { width: 560px; max-width: 92vw; } .apps-mega-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 4px; } .apps-group { padding: 4px; } .apps-group-label { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: rgba(11, 37, 64, .7); padding: 8px 8px 4px; margin: 0; } .apps-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius-sm); text-decoration: none; } .apps-row:hover { background: color-mix(in srgb, var(--brand-light-blue) 55%, transparent); } .apps-row.is-current { background: var(--brand-light-blue); } .apps-row-text { display: flex; flex-direction: column; min-width: 0; } .apps-row-name { font-size: 14px; line-height: 1.25; color: var(--fg); } .apps-row.is-current .apps-row-name { font-weight: 600; } .apps-row-caption { font-size: 12px; line-height: 1.35; color: var(--muted-fg); margin-top: 2px; } /* More-menu app icons: one fixed tile size for every row. Hosted PNGs own their artwork (some are full circles, some are shapes on transparent — never paint a brand-blue disc behind them). Stroke SVGs (rare fallback) still get the blue circle. */ .icon-tile { --icon-tile-size: 40px; width: var(--icon-tile-size); height: var(--icon-tile-size); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: transparent; color: var(--white); overflow: hidden; } .icon-tile:has(> svg) { background: var(--brand-blue); } .icon-tile svg { width: 20px; height: 20px; display: block; } .icon-tile img { width: var(--icon-tile-size); height: var(--icon-tile-size); object-fit: contain; display: block; } .sym-landing { font-family: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--fg); } /* Mintlify's .prose img rule force-adds margin-top/bottom: 2em to every image (`.prose :where(img):not(:where([class~=not-prose],...)))`), which throws off spacing on every custom image component on this page (product card logos, AI tool icons, CTA illustrations, hero art). Neutralize it once here instead of patching each image individually. */ .sym-landing img { margin: 0; } /* White until data-sym-auth resolves to "in" below — avoids flashing the signed-in blue background before auth state is known. */ .sym-hero { background: var(--white); border-bottom: 1px solid var(--border); } html[data-sym-auth="in"] .sym-hero { background: var(--brand-light-blue); } html[data-sym-auth="out"] .sym-hero { background: #F8F8F9; } .sym-hero__inner { max-width: 1408px; margin: 0 auto; padding: 3rem 2rem; } .sym-hero__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; } @media (min-width: 1024px) { .sym-hero__grid { grid-template-columns: 1.1fr 1fr; gap: 3rem; } } .sym-hero__content { min-width: 0; } .sym-hero__title { font-size: 1.5rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); margin: 0 0 1.5rem; } @media (min-width: 768px) { .sym-hero__title { font-size: 1.875rem; } } .sym-hero__caption { font-size: 0.875rem; font-weight: 600; color: var(--fg); margin: 0 0 0.5rem; } .sym-hero__search-row { display: flex; align-items: stretch; gap: 0.75rem; } .sym-searchbox { display: inline-flex; align-items: center; gap: 0.55rem; flex: 1 1 auto; min-width: 0; height: 3rem; background: var(--white); border: 1px solid var(--border); border-radius: var(--rounded-search); padding: 0 1.25rem; color: var(--muted-fg); cursor: pointer; font-size: 0.875rem; text-align: left; transition: border-color 150ms ease; } .sym-searchbox > span:not(.sym-searchbox__kbd) { min-width: 0; flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .sym-searchbox:hover { border-color: color-mix(in srgb, var(--card-border) 60%, white); } .sym-searchbox__kbd { margin-left: auto; flex: 0 0 auto; font-size: 0.72rem; color: var(--muted-fg); border: 1px solid var(--border); border-radius: 0.25rem; padding: 0.05rem 0.4rem; background: var(--surface); } .sym-hero__or { flex: 0 0 auto; display: flex; align-items: center; color: var(--muted-fg); font-size: 0.75rem; font-weight: 500; } .sym-btn-ai { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.5rem; height: 3rem; padding: 0 1.25rem; background: var(--brand-blue); color: var(--white); border: 1px solid transparent; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background 150ms ease; } .sym-btn-ai:hover { background: var(--brand-blue-hover); } .sym-hero__art-wrap { display: none; } @media (min-width: 1024px) { .sym-hero__art-wrap { display: flex; align-items: flex-end; justify-content: center; align-self: stretch; margin-bottom: -3rem; } } .sym-hero__art { width: 100%; max-width: 24rem; height: auto; } /* Mintlify auto-wraps every MDX <img> in its own zoom-on-click viewer (OptimizedImage/rmiz, injected as a <span data-rmiz> around the <img>) — not wanted for this decorative hero graphic. Disable the click trigger without touching the <img> itself, so lazy-loading/optimization stays. */ .sym-hero__art-wrap [data-rmiz] { pointer-events: none; } .sym-section { max-width: 1408px; margin: 0 auto; padding: 2.5rem 2rem calc(var(--space-4) * 3); } /* 48 bottom — clear space before footer */ .sym-section__title { font-size: 1.4rem; font-weight: 600; color: var(--brand-navy); margin: 0 0 2rem; } /* Native <Tabs> restyled as an underline tab bar (icons/switching stay Mintlify's own — only the look changes). Scroll horizontally on overflow instead of wrapping to a second row. Scoped to homepage (.sym-section) and in-article content (.prose) — not navbar .nav-tabs / product subnav. Icons optional (article tabs often omit). */ .sym-section [role="tablist"], .prose [role="tablist"] { flex-wrap: nowrap !important; align-items: flex-end; gap: 32px; border-bottom: 1px solid var(--card-border); margin-bottom: 32px; min-width: 0 !important; width: 100%; max-width: 100%; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .sym-section [role="tablist"] > *, .sym-section [data-component-part="tab-button"], .prose [role="tablist"] > *, .prose [data-component-part="tab-button"] { flex-shrink: 0 !important; } .sym-section [data-component-part="tab-button"], .prose [data-component-part="tab-button"] { padding: 0 4px 12px !important; margin-bottom: -1px !important; border-bottom: 2px solid transparent !important; font-size: 15px !important; font-weight: 600 !important; color: var(--card-muted) !important; transition: color 150ms, border-color 150ms; gap: 0 !important; } .sym-section [data-component-part="tab-button"]:hover, .prose [data-component-part="tab-button"]:hover { color: var(--card-fg) !important; } .sym-section [data-component-part="tab-button"][data-active="true"], .prose [data-component-part="tab-button"][data-active="true"] { color: var(--card-fg) !important; border-bottom-color: var(--brand-blue) !important; } .sym-section [data-component-part="tab-button"] .tab-icon, .prose [data-component-part="tab-button"] .tab-icon { width: 16px !important; height: 16px !important; margin-right: 0.5rem !important; background-color: var(--card-muted) !important; } .sym-section [data-component-part="tab-button"]:hover .tab-icon, .prose [data-component-part="tab-button"]:hover .tab-icon { background-color: var(--card-fg) !important; } .sym-section [data-component-part="tab-button"][data-active="true"] .tab-icon, .prose [data-component-part="tab-button"][data-active="true"] .tab-icon { background-color: var(--brand-blue) !important; } /* AI tools tab reuses the exact sparkle glyph from the hero's Ask AI button (Ico "sparkles"), swapped in over Mintlify's own FA sparkles mask. */ .sym-section [data-testid="tab-AI tools"] .tab-icon { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOSAyOSI+PHBhdGggZD0iTTkuNiA1LjRMNy41IDAuNUw1LjQgNS40TDAuNSA3LjVMNS40IDkuNkw3LjUgMTQuNUw5LjYgOS42TDE0LjUgNy41TDkuNiA1LjRaIiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0yMS44MDAxIDE2LjQwMTZMMTkuMTAwMSAxMC4xMDE2TDE2LjQwMDEgMTYuNDAxNkwxMC4xMDAxIDE5LjEwMTZMMTYuNDAwMSAyMS44MDE2TDE5LjEwMDEgMjguMTAxNkwyMS44MDAxIDIxLjgwMTZMMjguMTAwMSAxOS4xMDE2TDIxLjgwMDEgMTYuNDAxNloiIGZpbGw9Im5vbmUiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+") !important; mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOSAyOSI+PHBhdGggZD0iTTkuNiA1LjRMNy41IDAuNUw1LjQgNS40TDAuNSA3LjVMNS40IDkuNkw3LjUgMTQuNUw5LjYgOS42TDE0LjUgNy41TDkuNiA1LjRaIiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0yMS44MDAxIDE2LjQwMTZMMTkuMTAwMSAxMC4xMDE2TDE2LjQwMDEgMTYuNDAxNkwxMC4xMDAxIDE5LjEwMTZMMTYuNDAwMSAyMS44MDE2TDE5LjEwMDEgMjguMTAxNkwyMS44MDAxIDIxLjgwMTZMMjguMTAwMSAxOS4xMDE2TDIxLjgwMDEgMTYuNDAxNloiIGZpbGw9Im5vbmUiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+") !important; } .product-grid { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 768px) { .product-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(3, 1fr); } } .product-card { display: flex; flex-direction: column; height: 100%; background: var(--white); border: 1px solid var(--card-border); border-radius: 4px; padding: 24px; } .product-card__logo-link { display: block; width: fit-content; margin-bottom: 16px; border: none !important; text-decoration: none !important; transition: opacity 150ms; } .product-card__logo-link:hover { opacity: 0.8; } .product-card__logo-link [data-rmiz] { pointer-events: none; } .product-card__logo { display: block; height: 56px; width: auto; max-width: 85%; object-fit: contain; object-position: left; margin: 0 !important; } .product-card__desc { font-size: 14px; line-height: 1.375; color: var(--card-muted); margin: 0 0 20px; } .product-card__links { border-top: 1px solid var(--card-border); } .product-card__link { display: flex; align-items: center; gap: 10px; padding: 10px 8px; margin: 0 -8px; font-size: 14px !important; font-weight: 600 !important; color: var(--card-fg); text-decoration: none !important; border-bottom: 1px solid var(--card-border); transition: color 150ms, background 150ms; } .product-card__link:last-child { border-bottom: 0; } .product-card__link:hover { color: var(--brand-blue); background: color-mix(in srgb, var(--brand-light-blue) 40%, transparent); border-bottom-width: 1px !important; } .product-card__link-icon { width: 16px; height: 16px; color: var(--card-icon); flex-shrink: 0; } .product-card__link span { flex: 1; } /* order: 1 keeps the chevron last even when a gated link's ::after lock (styles.css §"Gated links on public pages") would otherwise render after it in flex/DOM order — lock then chevron, chevron always flush right. */ .product-card__chevron { order: 1; width: 16px; height: 16px; color: var(--card-muted); transition: color 150ms, transform 150ms; } .product-card__link:hover .product-card__chevron { color: var(--brand-blue); transform: translateX(2px); } .product-card__cta { margin-top: 12px; width: fit-content; display: inline-flex; align-items: center; gap: 6px; font-size: 14px !important; font-weight: 600 !important; color: var(--brand-blue); text-decoration: none !important; border-bottom: none !important; } .product-card__cta:hover { text-decoration: underline !important; border-bottom: none !important; } /* "New" badge on AI tool cards — light-blue pill, matching the zendesk repo's NewBadge (bg-[#E8F7FF] text-primary uppercase). */ .badge-new { display: inline-flex; align-items: center; margin-left: 2px; padding: 2px 8px; border-radius: 9999px; background: var(--brand-light-blue); color: var(--brand-blue); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; white-space: nowrap; } /* STE payer badge — shared pill; title-row placement via PayerBadge JS clone. Writers: <PayerBadge type="employee|employer|both" /> after frontmatter. */ .payer-badge { display: inline-flex; align-items: center; flex-shrink: 0; padding: 5px 12px; border-radius: 9999px; font-size: 13px; font-weight: 500; line-height: 1.25; /* Reset Mintlify h1 tracking (-0.025em) — badge is injected into the title. */ letter-spacing: 0.01em; white-space: nowrap; border: 1px solid var(--payer-badge-border, var(--badge-blue-border)); background: var(--payer-badge-bg, var(--badge-blue-bg)); color: var(--payer-badge-fg, var(--badge-blue-fg)); } .payer-badge--employee { --payer-badge-bg: var(--badge-blue-bg); --payer-badge-fg: var(--badge-blue-fg); --payer-badge-border: var(--badge-blue-border); } .payer-badge--employer { --payer-badge-bg: var(--badge-violet-bg); --payer-badge-fg: var(--badge-violet-fg); --payer-badge-border: var(--badge-violet-border); } .payer-badge--both { --payer-badge-bg: var(--badge-green-bg); --payer-badge-fg: var(--badge-green-fg); --payer-badge-border: var(--badge-green-border); } /* Page title row: badge flows inline after the title text (not far-right). Use inline layout — not flex + width:max-content — so long h1s wrap inside the prose column instead of overflowing into the TOC. */ h1.has-payer-badge { display: block !important; min-width: 0; max-width: 100%; overflow-wrap: break-word; white-space: normal; } h1.has-payer-badge .payer-badge-title { display: inline; min-width: 0; max-width: 100%; overflow-wrap: break-word; white-space: normal; /* Gap before badge when inline — not margin-left on the badge, so a wrapped badge stays flush with the h1 left edge. */ margin-right: 0.75rem; } h1.has-payer-badge > .payer-badge { display: inline-flex; vertical-align: middle; margin-left: 0; } /* Hide in-flow fallback once the title clone is present (no-JS keeps fallback) */ #content-area:has(h1.has-payer-badge) .payer-badge--fallback, main:has(h1.has-payer-badge) .payer-badge--fallback { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .article-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; } @media (min-width: 640px) { .article-grid { grid-template-columns: 1fr 1fr; } } .article-list-card { background: var(--white); border: 1px solid var(--card-border); border-radius: 4px; padding: 16px; } .article-list-card__header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--card-border); } .article-list-card__title { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.25; color: var(--card-fg); } .article-list-card__count { font-size: 12px; color: var(--card-muted); white-space: nowrap; } .article-list-card__list { display: flex; flex-direction: column; } .article-list-card__link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; font-size: 14px; font-weight: 500; line-height: 1.375; color: var(--card-fg); text-decoration: none !important; border-bottom: 1px solid color-mix(in srgb, var(--card-border) 60%, transparent); transition: text-decoration-color 150ms; } .article-list-card__link:last-child { border-bottom: none !important; } .article-list-card__link:hover, .article-list-card__link:focus-visible { text-decoration: underline !important; } .article-list-card__chevron { flex-shrink: 0; color: var(--card-muted); opacity: 0; transition: opacity 150ms; } .article-list-card__link:hover .article-list-card__chevron { opacity: 1; } .article-list-card__link--static { cursor: default; } .article-list-card__link--static:hover, .article-list-card__link--static:focus-visible { text-decoration: none !important; } /* Compliance tab (index.mdx): stacked Tax Radar column + articles card */ .compliance-stack { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; } @media (min-width: 640px) { .compliance-stack { grid-template-columns: 2fr 1fr; } } .radar-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } .radar-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--card-border); border-radius: var(--radius-sm); padding: 18px 20px 16px; text-decoration: none !important; /* Hover chrome via shared a.card / .radar-card rule near .card below. */ } .radar-card__head { display: flex; align-items: center; gap: 10px; } .radar-card__flag { width: 24px; height: 16px; flex-shrink: 0; border-radius: 2px; } .radar-card__title { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.25; color: var(--card-fg); } .radar-card__desc { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--card-muted); } .radar-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .radar-card__tag { padding: 2px 8px; border-radius: 4px; background: var(--tile-bg); font-size: 11px; font-weight: 500; line-height: 1.5; color: var(--muted-fg); } .radar-card__cta { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 16px; font-size: 14px; font-weight: 600; color: var(--brand-blue); } .radar-card:hover .radar-card__cta { text-decoration: underline; } .ai-grid { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 768px) { .ai-grid { grid-template-columns: repeat(2, 1fr); } } .ai-card { display: flex; align-items: flex-start; gap: 16px; background: var(--white); border: 1px solid var(--card-border); border-radius: 4px; padding: 20px 20px 16px; } .ai-card__icon { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; margin-top: 2px; } .ai-card__body { min-width: 0; } .ai-card__name { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--card-fg); margin: 0; } .ai-card__desc { font-size: 14px; line-height: 1.25; color: var(--card-muted); margin: 4px 0 0; } .ai-card__actions { display: flex; align-items: center; gap: 16px; margin-top: 12px; } .ai-card__launch { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; font-size: 12px; font-weight: 500; color: var(--brand-navy); background: var(--white); border: 1px solid color-mix(in srgb, var(--brand-navy) 20%, transparent); border-radius: 6px; text-decoration: none !important; transition: background 150ms, border-color 150ms; } .ai-card__launch:hover { background: color-mix(in srgb, var(--brand-navy) 2%, transparent); border-color: color-mix(in srgb, var(--brand-navy) 25%, transparent); } .ai-card__launch-icon { width: 12px; height: 12px; } .ai-card__docs { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--brand-blue); text-decoration: none !important; border-bottom: none !important; } .ai-card__docs:hover { text-decoration: underline !important; border-bottom: none !important; } .ai-card__arrow { width: 16px; height: 16px; } .help-cta-row { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 24px; } @media (min-width: 1024px) { .help-cta-row { grid-template-columns: 1fr 1fr; } } .help-cta-card { display: flex; min-height: 122px; background: var(--white); border: 1px solid var(--card-border); border-radius: 4px; overflow: hidden; } .cta-img { width: 192px; flex-shrink: 0; } /* STL: natural size, bottom-aligned, slightly inset */ .cta-img-stl { align-self: flex-end; padding-top: 10px; padding-right: 16px; } .cta-img-stl img { width: 100%; height: auto; display: block; } /* Support: fills the column height, bottom-anchored, right edge cropped */ .cta-img-support { align-self: stretch; display: flex; align-items: flex-end; padding-left: 4px; } .cta-img-support img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; clip-path: inset(0 15px 0 0); } .cta-body { flex: 1; min-width: 180px; display: flex; flex-direction: column; justify-content: center; padding: 10px 16px 14px; } .cta-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--brand-navy); } .cta-desc { margin: 4px 0; font-size: 13px; color: var(--card-muted); } .cta-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .cta-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; font-size: 12px; font-weight: 500; color: var(--brand-navy); text-decoration: none !important; background: var(--white); border: 1px solid color-mix(in srgb, var(--brand-navy) 20%, transparent); border-radius: 6px; transition: background-color 150ms, border-color 150ms; cursor: pointer; } .cta-btn:hover { background: color-mix(in srgb, var(--brand-navy) 2%, transparent); border-color: color-mix(in srgb, var(--brand-navy) 25%, transparent); } .cta-btn svg { width: 12px; height: 12px; } .sym-page-wrap { max-width: 72rem; margin: 0 auto; padding: 2.5rem 1.5rem 5rem; } #navbar { z-index: 30; } /* Reused by #sidebar (via Mintlify's --mintlify-slot-header-height) and by #content-side-layout (TOC sticky wrapper — no extension point, overridden). */ :root { /* Gap between sticky TOC top and the second nav (native tabs). */ --toc-sticky-gap: var(--space-4); /* 16px — clears second nav, not touching */ /* * Shared dock point for sticky content headers (RN index thead, * .ste-tc-filters, etc.). Default = navbar height only. Do NOT fold in * --topbar-tabs-height or --mintlify-slot-header-height here — Mintlify * sets --topbar-tabs-height * to 3rem even on pages with no visible tabs (homepage), which left a * large gap under #navbar. product-subnav.js measures the real chrome * bottom (#navbar already includes native tabs when present) and writes * an exact px value. */ --docs-sticky-top: 4rem; /* Left-nav layout tokens (avoid raw pad px in selectors). One label column per depth, shared by a subgroup and its plain-leaf siblings. Each depth nudges only half a caret-width past the previous one; a subgroup's own caret sits a full caret+gap left of its label, one column back. */ --sidebar-caret-slot: 12px; --sidebar-caret-gap: 4px; --sidebar-depth-step: calc(var(--sidebar-caret-slot) + var(--sidebar-caret-gap)); /* 16 */ --sidebar-subgroup-step: calc(var(--sidebar-caret-slot) / 2 + 2px); /* 8 — roughly half a caret-width, per depth */ --sidebar-caret-top-nudge: 2px; /* optical nudge past padding-top, shared by every caret */ --sidebar-caret-left-0: var(--space-3); /* 12 — top-level category caret */ --sidebar-pad-category-x: calc(var(--sidebar-caret-left-0) + var(--sidebar-depth-step)); /* 28 — top-level category label */ --sidebar-pad-subgroup-x: calc(var(--sidebar-pad-category-x) + var(--sidebar-subgroup-step)); /* 36 — depth 1: top-level leaf; first-level subgroup label */ --sidebar-pad-subgroup-nested-x: calc(var(--sidebar-pad-subgroup-x) + var(--sidebar-subgroup-step)); /* 44 — depth 2: leaf under a first-level subgroup; nested subgroup label */ --sidebar-pad-subgroup-nested-2-x: calc(var(--sidebar-pad-subgroup-nested-x) + var(--sidebar-subgroup-step)); /* 52 — depth 3: leaf under a nested subgroup */ --sidebar-pad-item-y: 6px; --sidebar-link-pad-right: calc(var(--space-3) * 2); /* 24 — right pad for link/button text, clears scrollbar gutter */ --sidebar-caret-parent-size: 11px; /* shared by every sidebar-tree caret at every depth — no separate nested-size variant */ --sidebar-caret-stroke: 1.5; --sidebar-caret-color: #5B6470; /* API method chips — slot sized for the common 3-letter verbs (GET/DEL), right-aligned so titles share one edge. Wider badges (POST/PATCH) overflow the slot rather than push every title right for them. */ --sidebar-method-font-size: 10px; --sidebar-method-letter-spacing: 0.4px; --sidebar-method-pad-y: 2px; --sidebar-method-pad-x: 4px; --sidebar-method-radius: 3px; --sidebar-method-gap: 6px; --sidebar-method-slot-width: 2.2em; /* ≈ GET/DEL at 10px + letter-spacing */ } /* Sticky TOC must clear header + second nav. Mintlify hardcodes top-[9.5rem] on #content-side-layout; without --toc-sticky-gap the TOC top edge sits flush against the tabs bottom when sticky. */ #content-side-layout { top: calc(var(--mintlify-slot-header-height, calc(4rem + var(--topbar-tabs-height, 0rem))) + var(--toc-sticky-gap)) !important; height: calc(100dvh - (var(--mintlify-slot-header-height, calc(4rem + var(--topbar-tabs-height, 0rem))) + var(--toc-sticky-gap))) !important; } /* Custom trigger + dropdown (built in product-subnav.js), replacing Mintlify's native product switcher entirely — its real panel is client-rendered only with no stable selectors to restyle from outside. Injected inline into Mintlify's `.nav-tabs` as the first item. */ .product-switcher-slot { flex-shrink: 0; align-self: center; position: relative; } .nav-tabs-switcher-slot { margin-right: 24px; } .product-switcher { align-self: center; display: flex; align-items: center; width: 240px; padding: 6px 12px; font-family: "Work Sans", sans-serif; font-size: 14px; font-weight: 500; color: var(--card-fg); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xs); white-space: nowrap; cursor: pointer; transition: color 150ms, border-color 150ms; } .product-switcher:hover { border-color: color-mix(in srgb, var(--card-border) 60%, white); } .product-switcher:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--brand-blue); } .product-switcher img { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; } .product-switcher-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 1; text-align: left; padding-left: 8px; } /* Product-switcher dropdown chevron — same glyph size as parent sidebar caret (not a sidebar expand caret; shares the size token for visual consistency). */ .product-switcher .chevron { width: var(--sidebar-caret-parent-size); height: var(--sidebar-caret-parent-size); opacity: 0.6; flex-shrink: 0; } .product-menu { position: absolute; top: 100%; left: 0; margin-top: 4px; width: 300px; max-height: 60vh; overflow-y: auto; padding: 4px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xs); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); font-family: "Work Sans", sans-serif; z-index: 50; } .product-menu-label { padding: 6px 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(17, 24, 39, 0.7); } .product-menu-separator { height: 1px; margin: 4px -4px; background: var(--border); } .product-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border-radius: var(--radius-xs); text-decoration: none !important; cursor: pointer; margin-bottom: 2px; color: var(--card-fg); } .product-menu-item:last-child { margin-bottom: 0; } .product-menu-item:hover { background: #f3f4f6; } .product-menu-item:focus-visible { background: #f3f4f6; outline: none; box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--brand-blue); } .product-menu-item.is-active { color: var(--brand-navy); } .product-menu-item.is-active:hover { background: transparent; } .product-menu-item img { width: 23px; height: 23px; object-fit: contain; flex-shrink: 0; } .product-name { font-size: 14px; font-weight: 500; min-width: 0; flex: 1; } .product-menu-item .check { width: 14px; height: 14px; color: var(--brand-blue); flex-shrink: 0; } /* Tax Radar Airtable embeds — cover the Airtable logo/control footer. */ .airtable-embed-wrap { position: relative; } .airtable-embed-wrap .airtable-embed { display: block; border: 0; width: 100%; aspect-ratio: 16 / 9; } .airtable-embed-wrap .airtable-embed-footer-cover { position: absolute; bottom: 0; left: 0; right: 0; height: 25px; background-color: #fafafa; pointer-events: none; } /* Native decorative fade at the top of the scrollable sidebar content. */ #sidebar div.bg-linear-to-b { display: none !important; } /* Kill left borders / nest guide lines in the left nav (Mintlify border-l + leftover ::before rails). Unlayered !important beats @layer utilities border-l; targeted selectors — not #sidebar *. */ #sidebar, #sidebar-content, #sidebar ul, #sidebar li, #sidebar li[data-group-tag], #sidebar li[data-group-tag] > ul, #sidebar .sidebar-group { border-left: none !important; border-left-width: 0 !important; } #sidebar li[data-group-tag] > ul::before, #sidebar li[data-group-tag] > ul::after, #sidebar li[data-group-tag] > ul > li[data-group-tag] > ul::before, #sidebar li[data-group-tag] > ul > li[data-group-tag] > ul::after, #sidebar ul ul::before, #sidebar ul ul::after { content: none !important; display: none !important; background: none !important; width: 0 !important; height: 0 !important; } /* Top-level category — sidebar-manual-expand.js adds this class (plus a .nav-category-chevron span) to the native header div, which already lays out as a flex row via its own classes. Its font-semibold (600) sits inside @layer components — layer order reverses for !important, so this has to sit in @layer utilities too or it loses regardless of specificity. */ @layer utilities { #sidebar .sidebar-group-header, #sidebar .sidebar-group-header .sidebar-title, #sidebar .sidebar-group-header .sidebar-title span { font-weight: 400 !important; color: var(--brand-navy) !important; } #sidebar .sidebar-group-header:hover, #sidebar .sidebar-group-header:hover .sidebar-title, #sidebar .sidebar-group-header:hover .sidebar-title span { color: #000 !important; } /* Beat Mintlify text-xs / 0.75rem (12px) — left-nav cats + links share --sidebar-font-size. Exclude method badges: the INNER chip is also a <span>, and `#sidebar a span:not(.method-nav-pill)` used to win (1,2,2) over `.method-nav-pill *` (1,1,1) — forcing label size on GET/POST. */ #sidebar, #sidebar .nav-category, #sidebar .nav-category .sidebar-title, #sidebar .nav-category .sidebar-title span, #sidebar .sidebar-group-header, #sidebar .sidebar-group-header .sidebar-title, #sidebar .sidebar-group-header .sidebar-title span, #sidebar li[data-group-tag] > button, #sidebar li[data-group-tag] > button > div:first-child, #sidebar a, #sidebar a span:not(.method-nav-pill):not(.method-pill) { font-size: var(--sidebar-font-size) !important; } /* Sidebar method chips — match (1,2,2) of the nav span rule and win by source order. Path-bar / article .method-pill keep Mintlify sizing. */ #sidebar a .method-nav-pill, #sidebar a .method-nav-pill span:not(.method-nav-pill) { font-size: var(--sidebar-method-font-size) !important; line-height: 1.15 !important; letter-spacing: var(--sidebar-method-letter-spacing) !important; font-weight: 400 !important; } /* Category label left inset via --sidebar-pad-category-x (sidebar origin + pad). Native pl-4 needs @layer utilities to win over Mintlify. */ #sidebar .nav-category { padding-left: var(--sidebar-pad-category-x) !important; } } /* Expandable carets: absolute slot at `left: var(--sidebar-caret-left-0)`. Category header must be full-width — otherwise absolute `left` is relative to a shrink-wrapped box, not the sidebar's left edge. */ #sidebar .nav-category { position: relative !important; z-index: 0; display: flex !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; align-items: center; justify-content: space-between; cursor: pointer; border-radius: 6px; background: transparent !important; /* Equal Y pad so labels sit centered in the row (not cramped on bottom). */ padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; padding-right: var(--sidebar-link-pad-right) !important; margin-bottom: 2px !important; font-size: var(--sidebar-font-size) !important; /* 13px — match links, not 12/14 */ line-height: 1.2 !important; transition: background-color 150ms; } /* First top-level block: pull it in line with article eyebrow / TOC. Later blocks stay 10px. In-flow only — do not change --mintlify-slot-header-height (sticky dock point). Space by POSITION under #navigation-items, not by whether a block happens to be a decorated .nav-category. API-reference tabs put bare, undecorated <ul> lists first (Overview, and on most products a lone Postman-setup link) ahead of the first real group (Endpoints) — div:has(> .nav-category) never matched those bare <ul>s, so they sat flush at 0 margin against the tabs above, while the intended "first group" gap landed instead on Endpoints, wherever it fell in the list. Same selector, positional instead of type-based, gives every top-level block — bare or decorated — the same spacing rhythm regardless of page type. */ #sidebar #navigation-items > *:first-child { margin-top: calc(1rem + 6px) !important; } #sidebar #navigation-items > * + * { margin-top: 10px !important; } /* Two bare, unnested single-page articles back to back (e.g. Overview then a lone Postman-setup link) — the 10px above is sized for separating actual groups; between two plain articles it read as an odd gap where a real list has none (items sharing one ul.sidebar-group rely on their own --sidebar-pad-item-y padding alone, no margin). Match that instead. */ #sidebar #navigation-items > ul.sidebar-group + ul.sidebar-group { margin-top: 0 !important; } #sidebar div:has(> .nav-category[aria-expanded="true"]) { margin-bottom: 2px !important; } #sidebar .nav-category:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--brand-blue); } #sidebar .nav-category-chevron { position: absolute !important; left: var(--sidebar-caret-left-0) !important; /* Top-aligned with the label's first line, not centered on the whole (possibly multi-line, wrapped) row. */ top: calc(var(--space-2) + var(--sidebar-caret-top-nudge)) !important; bottom: auto !important; width: var(--sidebar-caret-slot) !important; height: var(--sidebar-caret-slot) !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; /* glyph sits at the slot's label-side edge */ flex-shrink: 0; color: var(--sidebar-caret-color); pointer-events: none; /* clicks hit the full header target */ } #sidebar .nav-category-chevron svg { /* Top-level parent caret — slightly ≥ nested (small optical size is priority). */ width: var(--sidebar-caret-parent-size) !important; height: var(--sidebar-caret-parent-size) !important; max-width: var(--sidebar-caret-parent-size) !important; max-height: var(--sidebar-caret-parent-size) !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; flex-shrink: 0; stroke-width: var(--sidebar-caret-stroke) !important; transform-origin: center center; transition: transform 120ms ease-out; } #sidebar .nav-category[aria-expanded="true"] .nav-category-chevron svg { transform: rotate(90deg); } /* Top-level category on the active page's path — weighted like the active article, above the 400 baseline. Keyed to the active page, not open state. div:has() reaches the header via its wrapper (header + list are sibling children of it), since :has() can't inspect a following sibling directly. Must sit in @layer utilities or it loses to the base rule above despite higher specificity — see the layering note up top. */ @layer utilities { #sidebar div:has(> .nav-category):has(a[aria-current="page"]) > .nav-category, #sidebar div:has(> .nav-category):has(a[aria-current="page"]) > .nav-category .sidebar-title, #sidebar div:has(> .nav-category):has(a[aria-current="page"]) > .nav-category .sidebar-title span { font-weight: var(--weight-medium) !important; } } #sidebar .nav-category:hover .nav-category-chevron svg { color: #000; } /* Kill nest-wrapper / scroll-viewport right inset — Mintlify's scroll viewport ships pr-8, which otherwise shrinks every row's width unevenly. Re-enable a classic gutter/thin bar so Windows non-overlay scrollbars reserve track space. */ #sidebar [data-component-part="scroll-area-viewport"] { padding-right: 0 !important; /* Keep the last nav rows from sitting flush on the page footer / logo band. */ padding-bottom: calc(var(--space-4) * 2 + var(--space-2)) !important; /* 40 */ scrollbar-gutter: stable; scrollbar-width: thin !important; /* override base-ui-disable-scrollbar (none) */ } #sidebar [data-component-part="scroll-area-viewport"]::-webkit-scrollbar { width: 12px; } #sidebar [data-component-part="scroll-area-viewport"]::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--brand-navy) 25%, transparent); border-radius: 6px; } #sidebar [data-component-part="scroll-area-viewport"]::-webkit-scrollbar-track { background: transparent; } #sidebar .sidebar-group, #sidebar .sidebar-group-header, #sidebar li[data-group-tag], #sidebar li[data-group-tag] > ul { padding-right: 0 !important; margin-right: 0 !important; } #sidebar .sidebar-group-header { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Grouping node toggle — article-like row; expands like a category. :is(#sidebar, #navigation-items) so the mobile drawer's nav tree (its own #navigation-items copy, outside #sidebar — see comment below) matches too. */ :is(#sidebar, #navigation-items) li[data-group-tag] > button { position: relative !important; z-index: 0; display: flex; width: 100%; box-sizing: border-box; align-items: center; justify-content: space-between; gap: 8px; padding: var(--sidebar-pad-item-y) var(--sidebar-link-pad-right) var(--sidebar-pad-item-y) var(--sidebar-pad-subgroup-x) !important; border: 0; border-radius: 6px; background: transparent !important; font-family: "Work Sans", sans-serif; font-size: var(--sidebar-font-size) !important; font-weight: 400 !important; line-height: 1.375 !important; color: var(--sidebar-fg) !important; text-align: left; cursor: pointer; transition: background-color 150ms; } /* Native Mintlify caret — same absolute-slot approach as .nav-category-chevron, sitting a full caret+gap left of this button's own label, one column back. Guide groups use a direct svg child; OpenAPI groups wrap it in a trailing div/span (h-[1lh] flex…). Kill Mintlify -mr-0.5 / w-2 / size-3 so slot edges match parent. */ :is(#sidebar, #navigation-items) li[data-group-tag] > button > svg:last-child, :is(#sidebar, #navigation-items) li[data-group-tag] > button > div:last-child:has(> svg), :is(#sidebar, #navigation-items) li[data-group-tag] > button > span:last-child:has(> svg), :is(#sidebar, #navigation-items) li[data-group-tag] > button [class*="h-[1lh]"]:has(> svg) { position: absolute !important; left: calc(var(--sidebar-pad-subgroup-x) - var(--sidebar-depth-step)) !important; /* Top-aligned with the label's first line, not centered on the whole (possibly multi-line, wrapped) row. */ top: calc(var(--sidebar-pad-item-y) + var(--sidebar-caret-top-nudge)) !important; bottom: auto !important; width: var(--sidebar-caret-slot) !important; height: var(--sidebar-caret-slot) !important; margin: 0 !important; padding: 0 !important; flex-shrink: 0; color: var(--sidebar-caret-color) !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; /* glyph's left edge matches a sibling non-group link's text start */ pointer-events: none; } /* Nested group toggle (e.g. a group two levels deep) — same logic one level further: its caret sits a full step left of ITS OWN label column. */ :is(#sidebar, #navigation-items) li[data-group-tag] > ul > li[data-group-tag] > button > svg:last-child, :is(#sidebar, #navigation-items) li[data-group-tag] > ul > li[data-group-tag] > button > div:last-child:has(> svg), :is(#sidebar, #navigation-items) li[data-group-tag] > ul > li[data-group-tag] > button > span:last-child:has(> svg), :is(#sidebar, #navigation-items) li[data-group-tag] > ul > li[data-group-tag] > button [class*="h-[1lh]"]:has(> svg) { left: calc(var(--sidebar-pad-subgroup-nested-x) - var(--sidebar-depth-step)) !important; } :is(#sidebar, #navigation-items) li[data-group-tag] > button > svg:last-child { /* Direct svg sits in the slot — same size at every depth; depth is signaled by indentation (--sidebar-subgroup-step above), not glyph size. */ width: var(--sidebar-caret-parent-size) !important; height: var(--sidebar-caret-parent-size) !important; max-width: var(--sidebar-caret-parent-size) !important; max-height: var(--sidebar-caret-parent-size) !important; min-width: 0 !important; min-height: 0 !important; /* Keep slot's margin-top for vertical center; kill Mintlify -mr-0.5 only. */ margin-right: 0 !important; margin-left: 0 !important; stroke-width: var(--sidebar-caret-stroke) !important; } :is(#sidebar, #navigation-items) li[data-group-tag] > button > div:last-child:has(> svg) > svg, :is(#sidebar, #navigation-items) li[data-group-tag] > button > span:last-child:has(> svg) > svg, :is(#sidebar, #navigation-items) li[data-group-tag] > button [class*="h-[1lh]"]:has(> svg) > svg { width: var(--sidebar-caret-parent-size) !important; height: var(--sidebar-caret-parent-size) !important; max-width: var(--sidebar-caret-parent-size) !important; max-height: var(--sidebar-caret-parent-size) !important; min-width: 0 !important; min-height: 0 !important; margin-right: 0 !important; /* override Mintlify -mr-0.5 */ margin-left: 0 !important; flex-shrink: 0; stroke-width: var(--sidebar-caret-stroke) !important; } :is(#sidebar, #navigation-items) li[data-group-tag] > button svg path { stroke-width: var(--sidebar-caret-stroke) !important; } :is(#sidebar, #navigation-items) li[data-group-tag] > button svg { color: var(--sidebar-caret-color) !important; /* Match .nav-category-chevron's rotation speed — override Mintlify's own (slower, inconsistent-feeling) default transition duration. */ transition: transform 120ms ease-out !important; } :is(#sidebar, #navigation-items) li[data-group-tag] > button:hover, :is(#sidebar, #navigation-items) li[data-group-tag] > button:active { background: transparent !important; color: #000 !important; } :is(#sidebar, #navigation-items) li[data-group-tag] > button:hover svg { color: #000 !important; } :is(#sidebar, #navigation-items) li[data-group-tag] > button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--brand-blue); } /* Nested group toggle — label one column past the first-level group's own label (shared with that group's leaf children, below); its caret sits a full step left, in the first-level group's column. */ :is(#sidebar, #navigation-items) li[data-group-tag] > ul > li[data-group-tag] > button { padding-left: var(--sidebar-pad-subgroup-nested-x) !important; } /* Sidebar article links — depth via pad tokens only. Default column is --sidebar-pad-subgroup-x: a leaf directly under a top category (e.g. "State taxes overview") is a sibling of that category's subgroups (e.g. "State Income Tax (SIT)"), so it aligns with them. Active pill: left inset + right pad clears the ::before highlight edge. :is(#sidebar, #navigation-items) so the mobile drawer's copy matches. */ :is(#sidebar, #navigation-items) a { display: block; min-width: 0; padding: var(--sidebar-pad-item-y) var(--sidebar-link-pad-right) var(--sidebar-pad-item-y) var(--sidebar-pad-subgroup-x) !important; border-radius: 6px; font-family: "Work Sans", sans-serif; font-size: var(--sidebar-font-size) !important; font-weight: 400 !important; line-height: 1.375; color: var(--sidebar-fg) !important; text-decoration: none !important; white-space: normal; overflow-wrap: break-word; hyphens: none; } /* A page can sit directly under #navigation-items (e.g. Overview, or a lone Postman-setup link) instead of nested inside a category — its ul.sidebar-group is a direct child of #navigation-items, unlike nested items whose ul.sidebar-group sits one level deeper inside a category's wrapper div. These aren't indented under anything, so they should align with category labels (--sidebar-pad-category-x), not a nested item's deeper column. */ #navigation-items > ul.sidebar-group > li > a { padding-left: var(--sidebar-pad-category-x) !important; } /* Beat Mintlify nowrap/truncate on nested label spans; keep method badges on one line. */ :is(#sidebar, #navigation-items) a span:not(.method-nav-pill):not(.method-pill) { white-space: normal !important; overflow-wrap: break-word !important; hyphens: none !important; min-width: 0; } /* Underline on hover, no background tint (native hover:bg-gray-600/5 needs explicitly clearing) */ :is(#sidebar, #navigation-items) a:hover { background: transparent !important; color: #000 !important; text-decoration: underline !important; } :is(#sidebar, #navigation-items) a:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--brand-blue); } /* Mobile drawer's nav tree (#navigation-items, inside its own [role="dialog"] portal) duplicates #sidebar's content but not its id, so its active item ships Mintlify's native bg-primary/10 pill instead of ours — same aria-current="page" marker, so it gets the identical treatment here. */ #sidebar a[aria-current="page"], #navigation-items a[aria-current="page"] { background: transparent !important; color: var(--brand-blue) !important; font-weight: var(--weight-medium) !important; } #sidebar a[aria-current="page"]:hover, #navigation-items a[aria-current="page"]:hover { text-decoration: none !important; } /* 1st nesting level (child of a group toggle) — shares its column with a nested subgroup at this depth (above), so leaf and subgroup siblings line up. */ :is(#sidebar, #navigation-items) li[data-group-tag] > ul > li > a { padding-left: var(--sidebar-pad-subgroup-nested-x) !important; } /* 2nd nesting level (child of a group nested inside another group) — same logic, one depth further. */ :is(#sidebar, #navigation-items) li[data-group-tag] > ul > li[data-group-tag] > ul > li > a { padding-left: var(--sidebar-pad-subgroup-nested-2-x) !important; } /* Right-side TOC — match the left nav's font size */ #table-of-contents { font-size: var(--sidebar-font-size); } #table-of-contents h2 { margin-bottom: 8px; } #table-of-contents h2 button { color: var(--card-muted) !important; } /* TOC caption: keep the list icon, hide "On this page" visually (sr-only). */ #table-of-contents h2 button > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Hide h3+ from TOC */ #table-of-contents .toc-item .toc-item { display: none; } /* API operation links — flex row: fixed method slot + wrapping title. */ #sidebar a:has(.method-nav-pill) { display: flex !important; align-items: flex-start !important; gap: var(--sidebar-method-gap) !important; } #sidebar a:has(.method-nav-pill) > div:first-child:has(.method-nav-pill) { height: 1lh !important; min-height: 1lh !important; width: var(--sidebar-method-slot-width) !important; min-width: var(--sidebar-method-slot-width) !important; max-width: var(--sidebar-method-slot-width) !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; flex-shrink: 0 !important; } #sidebar a:has(.method-nav-pill) > div:last-child { flex: 1 1 0%; min-width: 0; } #sidebar a:has(.method-nav-pill) .method-nav-pill, #sidebar a:has(.method-nav-pill) .method-nav-pill.w-8 { display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; width: auto !important; min-width: 0 !important; max-width: none !important; flex-shrink: 0 !important; white-space: nowrap !important; text-align: right !important; } #sidebar a:has(.method-nav-pill) .method-nav-pill > span { display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; padding: var(--sidebar-method-pad-y) var(--sidebar-method-pad-x) !important; border-radius: var(--sidebar-method-radius) !important; font-size: var(--sidebar-method-font-size) !important; line-height: 1.15 !important; letter-spacing: var(--sidebar-method-letter-spacing) !important; font-weight: 400 !important; white-space: nowrap !important; text-align: right !important; } /* Method badges — no underline (type size/weight live in @layer utilities). */ .method-nav-pill, .method-pill { text-decoration: none !important; text-decoration-line: none !important; } /* Inactive sidebar method badges — AA text contrast (≥4.5:1) without changing backgrounds. Mintlify mutes non-current pills via opacity / mid-tone text; restore full opacity and darken the existing hue. */ #sidebar a:not([aria-current="page"]) .method-nav-pill { opacity: 1 !important; color: color-mix(in srgb, currentColor 72%, #000 28%) !important; } /* Method-link hover: underline the title only — never the POST/GET badge (parent `#sidebar a:hover { text-decoration: underline }` would paint through the pill). */ #sidebar a:has(.method-nav-pill):hover, #sidebar a:has(.method-nav-pill):focus-visible { text-decoration: none !important; } #sidebar a:has(.method-nav-pill):hover > div:last-child > :not(.method-nav-pill), #sidebar a:has(.method-nav-pill):focus-visible > div:last-child > :not(.method-nav-pill) { text-decoration: underline !important; } #sidebar a:has(.method-nav-pill):hover .method-nav-pill, #sidebar a:has(.method-nav-pill):focus-visible .method-nav-pill, .method-nav-pill:hover, .method-pill:hover { text-decoration: none !important; text-decoration-line: none !important; } /* API playground — single path-bar frame (method + path + Try it). Mintlify nests border-standard on an outer card (p-1.5) AND an inner path group; keep one frame, drop the inner border, pad the outer. IMPORTANT: scope to div — Mintlify also puts id="api-playground-input" on the modal Bearer <input>, whose inline padding-left clears the absolute "Bearer" prefix. A bare #id { padding:0 } overlays the placeholder ("eBearer earer token"). */ div#api-playground-input { border: none !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; border-radius: 0 !important; margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important; } /* Outer frame: includes Try it. Less outer mt/mb; more inner x/y pad. Scoped to on-page playground cards (not Try it modal). */ [id^="api-playground"] div.flex.flex-col.border-standard:has(> .flex > .tryit-button), div.flex.flex-col.border-standard.rounded-2xl:has(> .flex > .tryit-button):has(.method-pill) { margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important; /* Prefer cascade over Mintlify p-1.5 — no !important so utilities can still win if needed. */ padding: var(--space-2); /* 8 */ border-radius: var(--radius-sm) !important; border: 1px solid var(--card-border) !important; box-sizing: border-box !important; } /* Inner path group only — no second frame. Transparent bg only on on-page playground wrappers. Modal path field keeps gray via Mintlify bg-gray-50 + dialog nth-child(2) tile-bg. */ div#api-playground-input > div:has(.tryit-button) .group:has(> .method-pill), [id^="api-playground"] div.flex.flex-col:has(.tryit-button) > .flex > .group:has(> .method-pill), div.flex.flex-col.border-standard:has(> .flex > .tryit-button) > .flex > .group:has(> .method-pill) { border: none !important; box-shadow: none !important; border-radius: var(--radius-sm) !important; padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; padding-left: var(--space-1) !important; background: transparent !important; } /* Try-it modal's path bar isn't reachable by the more specific selectors above (different dialog-portal ancestry, not the on-page playground wrappers) — its own Mintlify padding (p-1.5, i.e. 6px top/bottom/left, 0 right) shifts the row's alignment when the endpoints-menu-trigger dropdown opens next to it. Only the vertical padding causes the shift; left/right stay as-is. Lower specificity than the rule above, so on-page instances are unaffected. */ .group:has(> .method-pill) { padding-top: 0 !important; padding-bottom: 0 !important; } /* Shared path-row chrome (page + modal): drop nested border, keep radius. */ div:has(> .method-pill):has(+ .tryit-button), div.group:has(> .method-pill):has(+ .tryit-button) { border: none !important; box-shadow: none !important; border-radius: var(--radius-sm) !important; } /* Path text ("/v1/payCalc") sits top-aligned instead of centered — Mintlify's base-ui ScrollArea viewport has no display/align-items of its own, so its content (taller than the text) doesn't center vertically by default. Scoped to the method-pill's own scroll area, not every ScrollArea on the page (code blocks reuse the same [data-component-part], and don't want this). */ .group:has(> .method-pill) [data-component-part="scroll-area-viewport"] { display: flex; align-items: center; } /* Path-bar / op-page method badges — tinted chrome (Mintlify “inactive” pills). Compact type + extra x-pad; not Mintlify text-sm / rounded-lg. */ .method-pill { font-size: 12px !important; font-weight: 600 !important; line-height: 1.25 !important; letter-spacing: 0.02em !important; padding: 2px 8px !important; border-radius: var(--radius-sm) !important; } /* Try-it modal's "switch endpoint" trigger only sets a min-width (Tailwind min-w-80) — the selected operation's label (e.g. "Returns minimum wage rates by location...") can be long enough to grow past it, pushing the path bar next to it and shifting the whole row's alignment whenever the current selection's text length changes. Fix the width instead of just flooring it; the label's own .truncate class handles the overflow once its box can no longer grow. */ #endpoints-menu-trigger > div { width: 20rem !important; max-width: 20rem !important; } /* Force solid “active” pills → same tinted style as the path bar / inactive nav chips (avoids solid + tinted side-by-side in the Try it modal). */ .method-pill.bg-\[\#2AB673\], .method-pill.bg-\[\#2AB673\].text-\[\#FFFFFF\] { background-color: rgb(74 222 128 / 0.2) !important; /* green-400/20 */ color: rgb(21 128 61) !important; /* green-700 */ } .method-pill.bg-\[\#3064E3\], .method-pill.bg-\[\#3064E3\].text-\[\#FFFFFF\] { background-color: rgb(96 165 250 / 0.2) !important; color: rgb(29 78 216) !important; /* blue-700 */ } .method-pill.bg-\[\#C28C30\], .method-pill.bg-\[\#C28C30\].text-\[\#FFFFFF\] { background-color: rgb(250 204 21 / 0.2) !important; color: rgb(161 98 7) !important; /* yellow-700 */ } .method-pill.bg-\[\#CB3A32\], .method-pill.bg-\[\#CB3A32\].text-\[\#FFFFFF\] { background-color: rgb(248 113 113 / 0.2) !important; color: rgb(185 28 28) !important; /* red-700 */ } .method-pill.bg-\[\#9341FB\], .method-pill.bg-\[\#9341FB\].text-\[\#FFFFFF\] { background-color: rgb(192 132 252 / 0.2) !important; color: rgb(126 34 206) !important; /* purple-700 */ } .method-pill.bg-\[\#0e7490\], .method-pill.bg-\[\#0e7490\].text-\[\#FFFFFF\] { background-color: rgb(34 211 238 / 0.2) !important; color: rgb(14 116 144) !important; /* cyan-700 */ } .method-pill.bg-\[\#DA622B\], .method-pill.bg-\[\#DA622B\].text-\[\#FFFFFF\] { background-color: rgb(251 146 60 / 0.2) !important; color: rgb(194 65 12) !important; /* orange-700 */ } .method-pill.bg-\[\#BD30D3\], .method-pill.bg-\[\#BD30D3\].text-\[\#FFFFFF\] { background-color: rgb(232 121 249 / 0.2) !important; color: rgb(162 28 175) !important; /* fuchsia-700 */ } /* OpenAPI schema property rows — Mintlify uses py-6 (24) per field; tighten. */ .object-param-field > div.py-6, .primitive-param-field > div.py-6, .array-param-field > div.py-6, .object-param-field > .py-6, .primitive-param-field > .py-6, .array-param-field > .py-6 { padding-top: var(--space-3) !important; /* 12 */ padding-bottom: var(--space-3) !important; } /* Nested child-attribute panels — denser than top-level fields. */ .expandable-content .object-param-field > div.py-6, .expandable-content .primitive-param-field > div.py-6, .expandable-content .array-param-field > div.py-6, [data-component-part="expandable-content"] .object-param-field > div.py-6, [data-component-part="expandable-content"] .primitive-param-field > div.py-6, [data-component-part="expandable-content"] .array-param-field > div.py-6 { padding-top: var(--space-2) !important; /* 8 */ padding-bottom: var(--space-2) !important; } /* “Show/Hide child attributes” control — less vertical chrome. */ .expandable > details > summary, details:has(+ .expandable-content) > summary, .expandable summary { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; } /* Try it modal — Mintlify sticky + body already share px-4 gutters. Keep dialog padding at 0 (extra pad double-insets the triad vs body). */ [role="dialog"]:has(.method-pill) { border-radius: var(--radius) !important; padding: 0 !important; box-sizing: border-box !important; /* clip horizontal bleed only — overflow:hidden was shaving the dropdown's top border */ overflow-x: clip; overflow-y: auto; } [role="dialog"]:has(.method-pill) .method-pill { font-size: 11px !important; border-radius: var(--radius-sm) !important; padding-top: 4px !important; padding-bottom: 4px !important; } /* Sticky top chrome — Mintlify is sticky + bg-background-light (opaque). Do NOT leave transparent: scrolled Authorization/Body text shows through. Path field can still carry its own --tile-bg chip below. */ [role="dialog"]:has(.method-pill) .sticky.top-0 { background-color: var(--white) !important; background: var(--white) !important; overflow: visible !important; } /* Top request bar — no extra pad/gap; Mintlify owns spacing between controls. */ [role="dialog"]:has(.method-pill) div.flex:has(> button):has(.method-pill) { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; /* do not set gap — restore Mintlify default between dropdown and path */ border-radius: var(--radius-sm) !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; background-color: transparent !important; background: transparent !important; align-items: stretch !important; overflow: visible !important; } /* Header triad — equal h-9 row; Mintlify dropdown ships overflow:hidden + py-0.5 (taller + clips top border). Path chip was shorter (32px vs 36px Send). The :first-child (endpoints-menu-trigger) carries Mintlify's own "hidden lg:block" — it's meant to disappear below lg (1024px), where the path bar's own scroll-area already lets you switch endpoints inline. display:flex !important with no breakpoint gate overrode that native hide, forcing it visible (and overflowing next to the path bar/Send button) on mobile. Gate to lg+ so mobile keeps Mintlify's own behavior. */ @media (min-width: 1024px) { [role="dialog"]:has(.method-pill) div.flex:has(> button):has(.method-pill) > :first-child { height: 2.25rem !important; /* Mintlify h-9 */ min-height: 2.25rem !important; max-height: 2.25rem !important; box-sizing: border-box !important; overflow: visible !important; display: flex !important; align-items: center !important; } } [role="dialog"]:has(.method-pill) div.flex:has(> button):has(.method-pill) > :nth-child(2) { height: 2.25rem !important; /* Mintlify h-9 */ min-height: 2.25rem !important; max-height: 2.25rem !important; box-sizing: border-box !important; overflow: visible !important; display: flex !important; align-items: center !important; } /* 2nd header control = path/endpoint field — gray chip on opaque sticky strip. */ [role="dialog"]:has(.method-pill) div.flex:has(> button):has(.method-pill) > :nth-child(2) { background-color: var(--tile-bg) !important; background: var(--tile-bg) !important; border-radius: var(--radius-sm) !important; } [role="dialog"]:has(.method-pill) [class*="rounded-2xl"], [role="dialog"]:has(.method-pill) [class*="rounded-xl"] { border-radius: var(--radius-sm) !important; } /* Modal accordion sections — Mintlify uses [data-testid^="api-input-section-"] > [role="button"] header + content div (not <details>). Open headers carry rounded-t-2xl / border-b-0!; closed headers carry rounded-2xl. */ [role="dialog"]:has(.method-pill) [data-testid^="api-input-section-"] [role="button"], [role="dialog"]:has(.method-pill) [data-testid^="api-input-section-"] .border-standard { border-color: var(--border) !important; } /* Closed section header — full radius on all corners. */ [role="dialog"]:has(.method-pill) [data-testid^="api-input-section-"] [role="button"].rounded-2xl { border-radius: var(--radius-sm) !important; } /* Open section header — top corners only; square bottom to meet content. */ [role="dialog"]:has(.method-pill) [data-testid^="api-input-section-"] [role="button"][class*="rounded-t-"], [role="dialog"]:has(.method-pill) [data-testid^="api-input-section-"] [role="button"][class*="border-b-0"] { border-top-left-radius: var(--radius-sm) !important; border-top-right-radius: var(--radius-sm) !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } /* Open section content — zero top radius to meet the header above (Mintlify rounded-b-xl left TL/TR=4px → notch); bottom corners match the header's --radius-sm so the section's top and bottom curves agree. */ [role="dialog"]:has(.method-pill) [data-testid^="api-input-section-"] > div:not([role="button"]) { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; border-bottom-left-radius: var(--radius-sm) !important; border-bottom-right-radius: var(--radius-sm) !important; border-color: var(--border) !important; } /* Nested body object cards (e.g. context / homeAddress) — same border as outer, not Mintlify border-gray-50 (too light). */ [role="dialog"]:has(.method-pill) [data-testid^="api-input-"].border, [role="dialog"]:has(.method-pill) [data-testid^="api-input-"][class*="border-gray-50"], [role="dialog"]:has(.method-pill) .border.border-gray-50.rounded-xl, [role="dialog"]:has(.method-pill) [class*="border-gray-50"][class*="rounded-xl"] { border-color: var(--border) !important; border-radius: var(--radius-sm) !important; } /* Nested object JSON editor (e.g. context.payCalc) — card ships py-0 so {} sits flush; add outer + inner inset using --space-* tokens. */ [role="dialog"]:has(.method-pill) [data-testid^="api-input-"]:not([data-testid^="api-input-section-"]):has(textarea) { padding: var(--space-3) !important; } [role="dialog"]:has(.method-pill) [data-testid^="api-input-"]:not([data-testid^="api-input-section-"]) textarea { padding: var(--space-2) var(--space-3) !important; box-sizing: border-box !important; } /* Nested object accordion headers — same open/closed radius rules as outer sections. */ [role="dialog"]:has(.method-pill) [data-testid^="api-input-"]:not([data-testid^="api-input-section-"]) [role="button"][class*="rounded-t-"], [role="dialog"]:has(.method-pill) [data-testid^="api-input-"]:not([data-testid^="api-input-section-"]) [role="button"][class*="border-b-0"] { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } [role="dialog"]:has(.method-pill) [data-testid^="api-input-"]:not([data-testid^="api-input-section-"]) > div:not([role="button"]) { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; border-bottom-left-radius: var(--radius-sm) !important; border-bottom-right-radius: var(--radius-sm) !important; } /* "Add new property" / "Add an item" — secondary (.cta-btn), not primary blue. */ [role="dialog"]:has(.method-pill) button.flex.text-playground-input.w-fit { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 4px 12px !important; font-size: 12px !important; font-weight: 500 !important; color: var(--brand-navy) !important; background: var(--white) !important; border: 1px solid color-mix(in srgb, var(--brand-navy) 20%, transparent) !important; border-radius: var(--radius-sm) !important; box-shadow: none !important; } [role="dialog"]:has(.method-pill) button.flex.text-playground-input.w-fit:hover { background: color-mix(in srgb, var(--brand-navy) 2%, transparent) !important; border-color: color-mix(in srgb, var(--brand-navy) 25%, transparent) !important; } /* Try it — brand blue + radius; compact type/icon to balance path bar. */ .tryit-button, button.tryit-button, tryit-button { background-color: var(--brand-blue) !important; background: var(--brand-blue) !important; color: var(--white) !important; border-radius: var(--radius-sm) !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.25 !important; padding: 5px var(--space-4) !important; gap: 6px !important; /* icon–label gap */ opacity: 1 !important; } .tryit-button svg, button.tryit-button svg, tryit-button svg { width: 11px !important; height: 11px !important; flex-shrink: 0; } .tryit-button:hover, button.tryit-button:hover, tryit-button:hover { background-color: var(--brand-blue-hover) !important; background: var(--brand-blue-hover) !important; opacity: 1 !important; } .tryit-button:focus-visible, button.tryit-button:focus-visible, tryit-button:focus-visible { outline: none !important; box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--brand-blue) !important; } /* Modal Send — x-padding only (size/weight from shared .tryit-button rule). */ [role="dialog"]:has(.method-pill) div.flex:has(> button):has(.method-pill) > button.tryit-button { padding: 0 var(--space-4) !important; } [role="dialog"]:has(.method-pill) div.flex:has(> button):has(.method-pill) > button.tryit-button svg { width: 11px !important; height: 11px !important; } /* Nested (2nd-level) bullet list markers — native bullets are a solid ::before dot (background-color) at every depth; second-level swaps to an outline instead of another solid dot, keeping the same size/position via box-sizing:border-box so a border doesn't grow the box. */ .prose ul ul > li::before { background-color: transparent !important; border: 1.5px solid rgb(var(--gray-600)); box-sizing: border-box; } /* Mono/code text in article content, 1px smaller than the surrounding body copy. */ .prose code { font-size: calc(1em - 2px); } /* Article table column headers — slightly heavier than body (600, not 700). */ .prose table thead th { font-weight: 600 !important; } /* Code block background + radius */ .code-block { border-radius: var(--radius-sm) !important; overflow: hidden; } /* Fix the fade overlay in the top-right */ [data-fade-overlay] { background: var(--code-bg-gray) !important; border-top-right-radius: var(--radius-sm) !important; border-bottom-right-radius: var(--radius-sm) !important; } [data-component-part="code-block-root"] { border-radius: var(--radius-sm) !important; background-color: var(--code-bg-gray) !important; } [data-component-part="code-block-root"] pre.shiki { background-color: var(--code-bg-gray) !important; } [data-floating-buttons] button { background-color: var(--code-bg-gray) !important; } /* API request/response example cards — Mintlify #request-example / #response-example ship rounded-2xl (16px); match code-block / card chrome. */ #request-example, #response-example, .code-group { border-radius: var(--radius-sm) !important; border-color: var(--card-border) !important; background-color: var(--code-bg-gray) !important; overflow: hidden; } /* Article body links — native styling uses border-bottom (not text-decoration) as its underline, widening it on hover. Swapped for a plain underline that doesn't change on hover, with color matching the surrounding text instead of the native blue accent. Excludes .sym-landing (home page) — its custom cards (product cards, AI cards, article-list cards) sit inside the same native .prose wrapper as real article content (confirmed by the .sym-landing img margin reset above needing the same scoping), so this !important rule was winning over those components' own underline-only-on-hover rules by source order and hiding their hover state entirely. */ .prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *, .sym-landing, .sym-landing *)) { color: inherit !important; border-bottom: none !important; text-decoration: underline !important; } /* Native <Card>/<Columns> component — rounded-2xl (16px) is too curvy. */ .card { border-radius: 4px !important; } /* Shared whole-card link hover — Mintlify <Card href> + Tax Radar cards. Homepage shells (.product-card, .article-list-card, .ai-card, .help-cta-card) are not whole-card links; they keep inner-link hover only. */ a.card, .radar-card { transition: border-color 150ms, box-shadow 150ms; } a.card:hover, a.card:focus-visible, .radar-card:hover, .radar-card:focus-visible { border-color: var(--card-hover-border) !important; box-shadow: var(--card-hover-shadow) !important; } /* Accordion — match card/panel chrome (--radius-sm + --border). Items are always square (see below); the group clips them to its own rounded corners, so only the top/bottom edge items appear rounded, automatically, in every open/closed state — no first/last-child or open-state radius rules needed. */ accordion-group, .accordion-group { border-radius: var(--radius-sm) !important; border-color: var(--border) !important; overflow: hidden; } accordion, .accordion { border-radius: 0 !important; border-color: var(--border) !important; } [data-component-part="accordion-button"] { padding: 14px 12px 14px 8px !important; border-radius: inherit !important; } /* Inner hover-bg wrapper ships its own native radius (rounded-xl) that doesn't match our override, peeking out at the corners on hover. */ [data-component-part="accordion-button"] > * { border-radius: inherit !important; } [data-component-part="accordion-title"] { font-size: 15px !important; } /* OpenAPI / API page expandable chrome — Mintlify ships rounded-xl/2xl. */ .object-param-field details, .primitive-param-field details, .array-param-field details, .expandable, [data-component-part="expandable"], .expandable > details, details:has(+ .expandable-content), .api-playground-panel details, [id^="api-playground"] details, /* Excludes Accordion's <details> — same native border/rounded-xl classes, but its own rules (above) handle per-item radius by position in the group. */ .prose details.border:not(.accordion, .accordion-group *, accordion, accordion-group *), .prose details[class*="rounded"]:not(.accordion, .accordion-group *, accordion, accordion-group *) { border-radius: var(--radius-sm) !important; } .object-param-field details > summary, .primitive-param-field details > summary, .array-param-field details > summary, .expandable > details > summary, details:has(+ .expandable-content) > summary { border-radius: var(--radius-sm) !important; } .object-param-field details[open] > summary, .primitive-param-field details[open] > summary, .array-param-field details[open] > summary, .expandable > details[open] > summary, details[open]:has(+ .expandable-content) > summary { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } /* Card icon tile (icon color is background-color, not fill — native uses a mask-image) */ .card [data-component-part="card-icon"] { display: flex !important; align-items: center; justify-content: center; width: 44px !important; height: 44px !important; margin-bottom: 16px; border-radius: 6px; background: var(--brand-light-blue) !important; } .card [data-component-part="card-icon"] svg { width: 20px !important; height: 20px !important; background-color: var(--brand-blue) !important; } /* Release-notes index pages (mode: wide / TOC off) — reclaim the TOC gutter so the table can stretch. Skip embedded homepage instances: Mintlify keeps inactive tab panels in the DOM, so :has(.rn-index) alone would widen the whole homepage whenever a signed-in user has the Release notes tab mounted. Mintlify still applies xl:w-[calc(100%-19rem)] on #content-area and a max-width on #content-container even when the TOC column is absent. */ @media (min-width: 1280px) { html:has(.rn-index:not(.rn-index--embedded)) #content-area { width: 100% !important; max-width: none !important; } html:has(.rn-index:not(.rn-index--embedded)) #content-container { max-width: none !important; width: 100% !important; flex: 1 1 auto !important; } html:has(.rn-index:not(.rn-index--embedded)) #content-side-layout { display: none !important; width: 0 !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; } } html:has(.rn-index:not(.rn-index--embedded)) #content-area, html:has(.rn-index:not(.rn-index--embedded)) #content-area .prose, html:has(.rn-index:not(.rn-index--embedded)) #content-area article, html:has(.rn-index:not(.rn-index--embedded)) #content-area [class*="max-w-"], html:has(.rn-index:not(.rn-index--embedded)) #content-container { max-width: none !important; } /* Callouts (<Info>/<Note>/<Tip>/<Warning>/<Check>/<Danger>) — variant is data-callout-type (not a per-variant class), icon/content are marked with data-component-part (not classes), colors are Tailwind utility classes applied directly on the element, hence !important throughout. */ .callout { display: flex !important; gap: 12px !important; margin: 16px 0 !important; padding: 14px 20px !important; border-radius: 4px !important; border-color: transparent !important; overflow: hidden; max-width: 48rem; font-family: "Work Sans", sans-serif; } .callout [data-component-part="callout-icon"] { flex-shrink: 0; width: 16px; margin-top: 2px; } .callout [data-component-part="callout-content"] { min-width: 0; font-size: 14px; line-height: 1.625; color: rgba(17, 24, 39, 0.85) !important; } .callout [data-component-part="callout-content"] p { margin: 0; } .callout [data-component-part="callout-content"] p + p { margin-top: 8px; } /* Same color as the surrounding text; underline at rest per the content style guide (links in paragraph text must be underlined, not just on hover — color alone isn't a reliable link signal). Letting the global .prose a underline rule apply here instead of overriding it to none. */ .callout [data-component-part="callout-content"] a { color: inherit !important; font-weight: 500; } .callout [data-component-part="callout-content"] code { background: rgba(17, 24, 39, 0.06); padding: 2px 6px; border-radius: 3px; font-family: ui-monospace, monospace; font-size: 0.9em; } .callout[data-callout-type="info"] { background: #E8F7FF !important; } .callout[data-callout-type="info"] [data-component-part="callout-icon"] svg { color: #0056B2 !important; } .callout[data-callout-type="note"] { background: #F8FAFC !important; border-color: #d1d5db !important; } .callout[data-callout-type="note"] [data-component-part="callout-icon"] svg { color: #6b7280 !important; } .callout[data-callout-type="tip"] { background: #E8F7FF !important; } .callout[data-callout-type="tip"] [data-component-part="callout-icon"] svg { color: #09274A !important; } .callout[data-callout-type="warning"] { background: var(--callout-warning-bg) !important; border-left: 2px solid var(--brand-tangerine) !important; border-radius: 0 !important; } /* Icon was #B47500 (~3.6:1) — fine for non-text UI (≥3:1); darken so it also clears AA if treated as text/glyph fill on the warning wash. */ .callout[data-callout-type="warning"] [data-component-part="callout-icon"] svg { color: var(--callout-warning-fg) !important; } .callout[data-callout-type="check"] { background: #F0FDF4 !important; } .callout[data-callout-type="check"] [data-component-part="callout-icon"] svg { color: #15803D !important; } .callout[data-callout-type="danger"] { background: #FEF2F2 !important; border-left: 2px solid #DC2626 !important; border-radius: 0 !important; } .callout[data-callout-type="danger"] [data-component-part="callout-icon"] svg { color: #B91C1C !important; } /* Steps (<Steps>/<Step>) — Symmetry ring badges replace Mintlify's flat gray circles. Prefer data-component-part over Tailwind class chains (live DOM classes drift). */ .steps, .step-container { font-family: inherit; } [data-component-part="step-line"] { width: 2px !important; background-color: var(--brand-sky-25) !important; background-image: none !important; /* last-step gray gradient → brand tint */ } [data-component-part="step-number"] > div { background-color: var(--white) !important; border: 2px solid var(--brand-sky) !important; color: var(--brand-blue) !important; font-weight: 600 !important; border-radius: 9999px !important; box-sizing: border-box; } /* Mintlify default is font-semibold (600) + gap under title; keep brand weight 600 and collapse title→content spacing. */ [data-component-part="step-title"] { font-weight: 600 !important; margin-bottom: 0 !important; } [data-component-part="step-content"] { margin-top: 0.125rem !important; } .dark [data-component-part="step-number"] > div { background-color: transparent !important; border-color: var(--brand-sky) !important; color: var(--white) !important; } .dark [data-component-part="step-line"] { background-color: color-mix(in srgb, var(--brand-sky) 35%, transparent) !important; } /* ─── STE Tax Catalog (Taxes tab landing) ─────────────────────────────── */ /* Spec: ui-spec taxes-page.md — filter bar + leveled tables. Full-width / no-TOC: same as RN index — mode:"wide" + .rn-index on root (shared #content-area / #content-side-layout rules above). */ .ste-tax-catalog { /* Filter chrome only — text/type inherit docs/Mintlify */ --ste-tc-chip-border: color-mix(in srgb, var(--brand-blue) 28%, var(--border)); --ste-tc-muted: var(--muted-fg); /* Table borders — §1 gray token (not chip/blue tints) */ --ste-tc-table-border: var(--border); /* not-prose + .rn-index drop prose table text-sm (~14px); restore it so catalog cells don't inherit body/rn 16px. */ font-size: 14px; margin: 0 0 2rem; } /* Beat .rn-index { max-width: 100% } — same ceiling as .sym-page-wrap so filters + section h2s + tables stay left-aligned on ultra-wide. */ .rn-index.ste-tax-catalog { max-width: 72rem; } .ste-tc-lede { font-size: 15px; color: var(--ste-tc-muted); line-height: 1.5; margin: 0 0 16px; } /* Sticky, condensing filter bar — pins under the docs header (reuses --docs-sticky-top, product-subnav.js's live-measured navbar bottom; see §1's "Reused by #sidebar..." note) and shrinks its controls while stuck, toggled by tax-catalog.jsx's IntersectionObserver. Stays white in both states — only a hairline + shadow announce the stuck state, no tint. */ /* Zero-height, non-sticky — the scroll-into-view target for filter/level changes (tax-catalog.jsx). .ste-tc-filters itself can't be the target: once pinned (position: sticky), its rect already satisfies "in view" at the sticky offset, so scrollIntoView on it becomes a no-op. This sibling always reflects the real, unpinned document position. */ .ste-tc-filters-sentinel { scroll-margin-top: calc(var(--docs-sticky-top) + 12px); } .ste-tc-filters { position: sticky; top: var(--docs-sticky-top); z-index: 20; display: flex; flex-wrap: nowrap; align-items: center; gap: 14px; padding: 12px 0; margin-bottom: 16px; background: var(--white); background-clip: padding-box; border-bottom: 1px solid transparent; transition: border-color 150ms ease, box-shadow 150ms ease; } .ste-tc-filters.is-stuck { border-bottom-color: var(--border); /* spread = -blur cancels bleed on left/right/top entirely (shrink then blur back out lands exactly on the original edge); only the y-offset leaves a visible band, underneath. */ box-shadow: 0 4px 12px -12px rgba(9, 39, 74, 0.4); } .ste-tc-filters-divider { width: 1px; height: 24px; background: var(--ste-tc-chip-border); margin: 0 2px; flex-shrink: 0; } .ste-tc-search { position: relative; display: flex; align-items: center; flex: 1 1 160px; min-width: 120px; max-width: 360px; } .ste-tc-search input { height: 38px; width: 100%; padding: 0 32px 0 12px; border: 1px solid var(--border); background: var(--white); /* Match docs search/form inputs — not medium/bold */ font-weight: 400; font-size: 14px; color: var(--card-fg); outline: none; border-radius: var(--rounded-search); } .ste-tc-search input::placeholder { color: var(--ste-tc-muted); font-weight: 400; opacity: 1; } .ste-tc-search input:focus, .ste-tc-search input:focus-visible { border-color: var(--brand-blue); } .ste-tc-search-clear { position: absolute; right: 8px; width: 22px; height: 22px; border: 0; background: transparent; color: var(--ste-tc-muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0; } .ste-tc-chips { display: flex; flex-wrap: nowrap; flex: 0 0 auto; gap: 6px; } .ste-tc-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 3px 12px; white-space: nowrap; border: 1px solid var(--ste-tc-chip-border); background: var(--white); font-weight: var(--weight-medium); font-size: 13px; color: var(--ste-tc-muted); cursor: pointer; border-radius: var(--radius-sm); } .ste-tc-chip-active { border-color: var(--brand-blue); background: var(--brand-blue); color: var(--white); } .ste-tc-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .ste-tc-section { margin-bottom: 28px; /* Clear full nav chrome (navbar ± tabs/subnav) when jumping to a section */ scroll-margin-top: calc(var(--docs-sticky-top) + 12px); } .ste-tc-empty { padding: 32px 0; color: var(--ste-tc-muted); font-size: 14px; } .ste-tc-empty-clear { padding: 0; font: inherit; font-weight: 500; color: var(--brand-blue); background: none; border: 0; text-decoration: underline; cursor: pointer; } .ste-tc-empty-clear:hover { color: var(--brand-navy); } .ste-tc-section h2 { font-size: 17px; font-weight: 600; margin: 0 0 8px; } /* `ste-tc-table` is on the real <table> itself (see tax-catalog.jsx) — no wrapper steals it. Scope under .ste-tax-catalog — other docs tables stay Mintlify default. Border must be on the real <table>, NOT the scroll wrapper (wrapper border put py/px *inside* the outline). Padding/margin overrides sit in @layer utilities so they beat Mintlify's spacing utilities. */ .ste-tc-col-name { width: 44%; } .ste-tc-col-id { width: 24%; } .ste-tc-col-type { width: 14%; } .ste-tc-col-jur { width: 18%; } /* Real <table> — 1px gray all-around border lives HERE. min-width keeps fixed columns legible (uTaxIDs, badges) instead of squishing on narrow viewports; .ste-tc-table-scroll (a real wrapper div) scrolls horizontally when the table exceeds it. table-layout: fixed only applies to elements with display: table — do NOT force display: block on this element, or fixed columns break and every table sizes itself off its own content. */ .ste-tax-catalog .ste-tc-table { width: 100%; min-width: 640px; table-layout: fixed; border-collapse: separate; border-spacing: 0; margin: 0; border: 1px solid var(--ste-tc-table-border); border-radius: 0; } .ste-tax-catalog .ste-tc-table :is(th, td) { padding: 10px 12px; /* Kill prose/Mintlify cell borders that double with our rules */ border: 0 !important; border-bottom: 1px solid var(--ste-tc-table-border) !important; vertical-align: middle; } .ste-tax-catalog .ste-tc-table :is(th, td):first-child { padding-left: 12px; } .ste-tax-catalog .ste-tc-table :is(th, td):last-child { padding-right: 12px; } /* Slightly tighter thead + group header rows (body cells stay 10px). Not sticky — catalog scrolls with the page; RN index keeps .rn-grid-head. */ .ste-tax-catalog .ste-tc-table thead th { padding-top: 6px; padding-bottom: 6px; /* Browser default centers <th> — match the left-aligned body cells */ text-align: left; /* Match prose table headers (not browser bold / 700+) */ font-weight: 500 !important; /* Catalog surface token */ background-color: var(--surface); background-clip: padding-box; vertical-align: middle !important; } /* Last row: no bottom cell border — outer <table> border already draws it */ .ste-tax-catalog .ste-tc-table tbody tr:last-child > td { border-bottom: 0 !important; } /* Wrapper chrome (must be @layer utilities). Zero shell border — catalog paints the 1px border on the real <table>. Alignment: Mintlify puts [--page-padding:20px], -mx-(--page-padding), w-[calc(100%+…)], and an inner px-(--page-padding) on the wrapper. That insets the real <table> ~20px vs the section h2. Zero --page-padding so table left edge matches the heading (catalog-only). Vertical gap is separate: my-[1em] + py-[1em] (not page-padding). !important is required in @layer utilities to beat those Tailwind utilities; shorthand is enough — no need for six longhands. */ @layer utilities { html:has(.ste-tax-catalog) .ste-tax-catalog .ste-tc-table, html:has(.ste-tax-catalog) .ste-tax-catalog .rn-table-shell { --page-padding: 0px; border: 0 !important; box-shadow: none !important; background: transparent !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding-block: 0 !important; } } /* Narrow viewports: the real <table> can't shrink below its min-width (uTaxIDs, jurisdiction names, non-wrapping badges) — let THIS wrapper scroll horizontally instead of the whole page. Beats .rn-table-shell's shared `overflow: visible` (that rule is for RN index's sticky thead, not the catalog, which isn't sticky — see comment there). This scrolls a dedicated wrapper div (.ste-tc-table-scroll), NOT the <table> itself — forcing display: block on the <table> would strip its table formatting context and silently break table-layout: fixed. */ .ste-tax-catalog .ste-tc-table-scroll { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } /* Belt-and-suspenders if --page-padding zeroing loses to a later utility */ html:has(.ste-tax-catalog) .ste-tax-catalog .ste-tc-table [class*="px-("], html:has(.ste-tax-catalog) .ste-tax-catalog .ste-tc-table .grow { padding-left: 0 !important; padding-right: 0 !important; } } .ste-tc-group-header { scroll-margin-top: calc(var(--docs-sticky-top) + 24px); } .ste-tc-group-header td { font-weight: 600; padding-top: 6px; padding-bottom: 6px; background: color-mix(in srgb, var(--brand-light-blue) 55%, var(--white)); /* Same 1px row separator as body — no 2px stacked edge */ border-top: 0 !important; border-bottom: 1px solid var(--ste-tc-table-border) !important; } .ste-tc-table tbody tr.ste-tc-group-header:hover td { background: color-mix(in srgb, var(--brand-light-blue) 55%, var(--white)); } .ste-tc-cell-name, .ste-tc-cell-jur { overflow: hidden; text-overflow: ellipsis; } /* Name links sit in not-prose / .rn-index, so the global .prose a underline rule does not apply — restore docs-style underline here. Color inherits like prose links; underline alone marks linked vs unlinked names. */ .ste-tax-catalog a { color: inherit; border-bottom: none; text-decoration: underline; } /* Unlinked tax names (parent + child): same text color as linked names — do not mute .ste-tc-no-article. Jurisdiction / placeholders stay muted. */ .ste-tc-no-article { color: inherit; } /* Subrows: └ marker only for hierarchy. Name text matches parent cells. */ .ste-tc-child-name { display: inline-flex; align-items: baseline; gap: 0.4rem; } .ste-tc-child-marker { flex-shrink: 0; white-space: nowrap; /* Tree glyph only — lighter gray; name text matches parent cell */ color: rgb(var(--gray-400)); } .ste-tc-cell-jur, .ste-tc-muted { color: var(--ste-tc-muted); } .ste-tc-cell-id code { /* Keep uTaxIDs readable as plain text — not Mintlify code chips */ white-space: nowrap; background: transparent; padding: 0; border: 0; color: var(--ste-tc-muted); } /* Type badges — match .badge-new chrome; colors from §1 brand + shared badge palette */ .ste-tc-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 9999px; border: 1px solid transparent; font-size: 10px; font-weight: 600; line-height: 1.25; text-transform: uppercase; letter-spacing: 0.025em; white-space: nowrap; } .ste-tc-badge-us-federal { color: var(--brand-navy); background: color-mix(in srgb, var(--brand-navy) 8%, var(--white)); border-color: color-mix(in srgb, var(--brand-navy) 22%, var(--white)); } .ste-tc-badge-state { color: var(--brand-blue); background: var(--brand-light-blue); border-color: color-mix(in srgb, var(--brand-blue) 28%, var(--white)); } .ste-tc-badge-local { color: var(--badge-violet-fg); background: var(--badge-violet-bg); border-color: var(--badge-violet-border); } .ste-tc-badge-territory { color: var(--brand-blue); background: var(--brand-light-blue); border-color: color-mix(in srgb, var(--brand-blue) 28%, var(--white)); } .ste-tc-badge-ca-federal { color: var(--badge-teal-fg); background: var(--badge-teal-bg); border-color: var(--badge-teal-border); } .ste-tc-badge-province { color: var(--badge-green-fg); background: var(--badge-green-bg); border-color: var(--badge-green-border); } /* Yes/No/Method for the multi-state finder's rule table — Yes/No are neutral facts about a state's rules, not a correct/incorrect judgment, so neither reuses success (green) or danger (red) tokens. All three values in this column (Yes, No, and the calc-method badge below) need distinct colors from each other since they can appear in the same table. */ .ste-tc-badge-affirmative { color: var(--brand-blue); background: var(--brand-light-blue); border-color: color-mix(in srgb, var(--brand-blue) 28%, var(--white)); } .ste-tc-badge-neutral { /* No — shared badge-violet role, distinct from Yes (blue) and Method (amber) below in this same column. 6.48:1 contrast. */ color: var(--badge-violet-fg); background: var(--badge-violet-bg); border-color: var(--badge-violet-border); } /* Calc-method value (e.g. "Full") — same rule-table right column as the Yes/No badges above, so it needs its own color, not blue (Yes) or violet (No). Shared badge-amber role. 4.76:1 contrast, clears AA. */ .ste-tc-badge-method { color: var(--badge-amber-fg); background: var(--badge-amber-bg); border-color: var(--badge-amber-border); } .dark .ste-tax-catalog { --ste-tc-muted: rgb(var(--gray-400)); --ste-tc-chip-border: color-mix(in srgb, var(--brand-blue) 40%, rgb(var(--gray-700))); --ste-tc-table-border: rgb(var(--gray-700)); } .dark .ste-tc-filters { background: rgb(var(--gray-900)); } .dark .ste-tc-filters.is-stuck { border-bottom-color: rgb(var(--gray-700)); } .dark .ste-tc-search input, .dark .ste-tc-chip { background: rgb(var(--gray-900)); border-color: rgb(var(--gray-600)); color: rgb(var(--gray-200)); } .dark .ste-tc-chip-active { background: var(--brand-blue); border-color: var(--brand-blue); color: var(--white); } .dark .ste-tc-table thead th { background-color: rgb(var(--gray-900)); } .dark .ste-tc-group-header td, .dark .ste-tc-table tbody tr.ste-tc-group-header:hover td { background: rgb(var(--gray-800)); border-top-color: var(--ste-tc-table-border); border-bottom-color: var(--ste-tc-table-border); } @media (max-width: 1023px) { .ste-tc-section { scroll-margin-top: calc(4rem + 12px); } .ste-tc-group-header { scroll-margin-top: calc(4rem + 24px); } } @media (max-width: 768px) { /* The single-non-wrapping-row treatment targets the catalog's normal (desktop/tablet) content width — on phones, let chips drop to a second line instead of squeezing the search box down to nothing. */ .ste-tc-filters { flex-wrap: wrap; /* Break out of #content-area's fixed 20px gutter (16px offset + 4px own padding, constant through this breakpoint) so the sticky bar spans the full viewport width instead of sitting inset like the prose column above/below it. */ margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; width: calc(100% + 40px); } /* .ste-tc-chips needs both: flex-wrap so its own children (the chip buttons) can drop to new lines, AND flex: 1 1 100% so the row is actually width-constrained to trigger that wrap — flex: 0 0 auto (the desktop single-line sizing) never shrinks below its content's width, so wrap never had anything to act on. */ .ste-tc-chips { flex: 1 1 100%; flex-wrap: wrap; } .ste-tc-filters-divider { display: none; } .ste-tc-search { max-width: none; flex: 1 1 100%; } } /* ── Multi-state scenario finder (snippets/ste/multi-state-scenario-finder.jsx) Brand tokens from §1. Radius: --radius / --radius-sm. */ .ste-msf { margin: 1.5rem 0; /* overflow:visible so the absolute combobox menu isn’t clipped */ overflow: visible; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); font-family: "Work Sans", ui-sans-serif, system-ui, sans-serif; color: var(--card-fg); /* Finder-only accents — One state cyan. The original muted teal (#0C7A8A at low mix opacity) read as grayish rather than a distinct color; this is a more saturated cyan, clearly its own hue next to brand blue (Same state) and status green (No SIT). */ --msf-teal: #0891B2; --msf-teal-bg: #ECFEFF; --msf-teal-border: #A5F3FC; /* Same values as the shared badge-amber role — aliased so there's one source of truth, since this tone's yellow and the tax-catalog method badge's amber were already identical colors. */ --msf-yellow: var(--badge-amber-fg); --msf-yellow-bg: var(--badge-amber-bg); --msf-yellow-border: var(--badge-amber-border); } .ste-msf-header { padding: 16px 20px; border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; background: color-mix(in srgb, var(--brand-light-blue) 45%, var(--white)); } .ste-msf-eyebrow { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-fg); } .ste-msf-title { margin: 4px 0 0; font-size: 1.125rem; font-weight: 600; line-height: 1.35; color: var(--brand-navy); } .ste-msf-lede { margin: 6px 0 0; max-width: 42rem; font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--muted-fg); } .ste-msf-body { display: flex; flex-direction: column; gap: 16px; padding: 20px; overflow: visible; } .ste-msf-fields { display: grid; gap: 12px; overflow: visible; align-items: end; } @media (min-width: 640px) { .ste-msf-fields { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px 10px; } } .ste-msf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .ste-msf-swap-wrap { display: flex; align-items: flex-end; justify-content: center; } .ste-msf-swap { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 9999px; background: var(--white); color: var(--muted-fg); cursor: pointer; padding: 0; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .ste-msf-swap:hover:not(:disabled) { background: color-mix(in srgb, var(--muted-fg) 8%, var(--white)); border-color: color-mix(in srgb, var(--muted-fg) 35%, var(--border)); color: var(--brand-navy); } .ste-msf-swap:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--white), 0 0 0 4px color-mix(in srgb, var(--brand-blue) 35%, transparent); } .ste-msf-swap:disabled { opacity: 0.4; cursor: not-allowed; } .ste-msf-swap svg { display: block; width: 18px; height: 18px; } .ste-msf-label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-fg); } .ste-msf-select-wrap { position: relative; } /* Shared field chrome for the combobox text input (was native <select>). */ .ste-msf-select { display: block; box-sizing: border-box; width: 100%; max-width: 100%; height: 40px; padding: 0 36px 0 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white); font-family: inherit; font-size: 14px; font-weight: 400; line-height: 1.2; color: var(--card-fg); outline: none; } .ste-msf-select:focus { border-color: var(--brand-blue); box-shadow: 0 0 0 2px var(--white), 0 0 0 4px color-mix(in srgb, var(--brand-blue) 35%, transparent); } .ste-msf-combobox { position: relative; overflow: visible; z-index: 1; } .ste-msf-combobox:focus-within { z-index: 40; } .ste-msf-combobox-input { cursor: text; } /* Navy-tinted prompt (~6.2:1 on --white); slightly darker than --muted-fg. */ .ste-msf-combobox-input::placeholder { color: color-mix(in srgb, var(--brand-navy) 25%, var(--muted-fg)); opacity: 1; line-height: 1.2; } .ste-msf-select-caret { position: absolute; top: 50%; right: 12px; width: 10px; height: 6px; margin-top: -3px; pointer-events: none; background: var(--muted-fg); clip-path: polygon(0 0, 100% 0, 50% 100%); } .ste-msf-combobox-toggle { position: absolute; top: 0; right: 0; width: 36px; height: 40px; border: 0; background: transparent; cursor: pointer; padding: 0; } .ste-msf-combobox-menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin-top: 6px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white); box-shadow: var(--shadow-panel); } .ste-msf-combobox-list { margin: 0; padding: 4px 0; list-style: none; max-height: 280px; overflow-y: auto; } .ste-msf-combobox-group, .ste-msf-combobox-group-list { margin: 0; padding: 0; list-style: none; } .ste-msf-combobox-option { display: block; width: 100%; padding: 8px 12px; border: 0; background: transparent; text-align: left; font-family: inherit; font-size: 14px; font-weight: 400; color: var(--card-fg); cursor: pointer; } .ste-msf-combobox-option:hover, .ste-msf-combobox-option--active { background: color-mix(in srgb, var(--brand-light-blue) 55%, transparent); } .ste-msf-combobox-option--selected { font-weight: 600; color: var(--brand-blue); } .ste-msf-combobox-empty { margin: 0; padding: 12px; font-size: 13px; color: var(--muted-fg); } /* Unified result panel: tone wash header + plain Detailed Rules rows */ .ste-msf-results { position: relative; margin-top: 8px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); } .ste-msf-results-clear { position: absolute; top: 6px; right: 6px; z-index: 1; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid transparent; border-radius: 9999px; background: transparent; color: var(--muted-fg); font-size: 28px; line-height: 1; cursor: pointer; padding: 0; transition: border-color 0.15s ease, color 0.15s ease; } .ste-msf-results-clear:hover { color: var(--brand-navy); border-color: var(--muted-fg); } .ste-msf-results-clear:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--brand-blue); } /* Tone-colored header band — one wash per resultType */ .ste-msf-tone { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-bottom: 1px solid transparent; } .ste-msf-tone-success { /* No SIT — green status */ background: var(--status-bg); border-bottom-color: var(--status-border); } .ste-msf-tone-same { /* Same state — brand blue only */ background: var(--brand-light-blue); border-bottom-color: color-mix(in srgb, var(--brand-blue) 28%, transparent); } .ste-msf-tone-reciprocal { /* Reciprocal — amber / tangerine */ background: color-mix(in srgb, var(--brand-tangerine) 14%, var(--white)); border-bottom-color: color-mix(in srgb, var(--brand-tangerine) 40%, transparent); } .ste-msf-tone-one { /* One state — turquoise (more cyan than No SIT green; not brand blue / gray) */ background: var(--msf-teal-bg); border-bottom-color: var(--msf-teal-border); } .ste-msf-tone-dual { /* Both states — violet (payer-both) */ background: var(--payer-both-bg); border-bottom-color: var(--payer-both-border); } .ste-msf-tone-warning { /* Review — yellow caution (lighter than Reciprocal amber) */ background: var(--msf-yellow-bg); border-bottom-color: var(--msf-yellow-border); } .ste-msf-tone-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-right: 28px; } .ste-msf-tone-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 9999px; } .ste-msf-tone-icon svg { display: block; } .ste-msf-tone-icon--success { background: color-mix(in srgb, var(--status-fg) 16%, transparent); color: var(--status-fg); } .ste-msf-tone-icon--same { background: color-mix(in srgb, var(--brand-blue) 16%, transparent); color: var(--brand-blue); } .ste-msf-tone-icon--reciprocal { background: color-mix(in srgb, var(--brand-tangerine) 28%, transparent); color: #9A6400; } .ste-msf-tone-icon--one { /* The old muted teal read as grayish even at a higher mix (raising mix% brings the chip color closer to the stroke color, which lowers contrast, not raises it — the fix was a more saturated base color at 14%, not more of the old one). 14% is the highest mix that still clears the 3:1 non-text contrast minimum against the stroke. */ background: color-mix(in srgb, var(--msf-teal) 14%, transparent); color: var(--msf-teal); } .ste-msf-tone-icon--dual { background: color-mix(in srgb, var(--payer-both-fg) 14%, transparent); color: var(--payer-both-fg); } .ste-msf-tone-icon--warning { background: color-mix(in srgb, var(--msf-yellow) 16%, transparent); color: var(--msf-yellow); } .ste-msf-tone-title { margin: 0; font-size: 1rem; font-weight: 600; color: var(--brand-navy); } .ste-msf-tone-body { margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; color: var(--card-fg); } .ste-msf-tone-lead, .ste-msf-tone-after { margin: 0; font-weight: 400; } .ste-msf-tone-verdict { margin: 0; font-weight: 600; color: var(--brand-navy); } .ste-msf-tone-note { margin: 0; font-size: 13px; font-style: normal; font-weight: var(--weight-medium); line-height: 1.45; color: var(--card-fg); } .ste-msf-results-body { padding: 14px 16px 16px; background: var(--white); } .ste-msf-rules-title { margin: 0 0 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-fg); } .ste-msf-rule-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--border); font-size: 14px; } .ste-msf-rule-row:last-child { border-bottom: 0; } .ste-msf-rule-label { font-weight: 400; color: var(--card-fg); cursor: help; } .ste-msf-footnote { margin: 14px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted-fg); } /* ── Release notes index (snippets/release-notes-index.jsx) ─────────────── Interactive all-product index: year select + product filter + dense table. Tokens from §1 / UI spec (brand-blue, card-fg/muted, border, tile-bg). Not the per-product section layout in the prototype screenshot — that is a separate composition; this styles Laura’s multi-product table. */ .rn-index { --rn-fg: var(--card-fg); --rn-muted: var(--card-muted); --rn-border: var(--card-border); --rn-hover: color-mix(in srgb, var(--tile-bg) 50%, transparent); --rn-surface: var(--surface); /* Sit tight under the page title/description */ margin: 4px 0 24px; font-family: "Work Sans", ui-sans-serif, system-ui, sans-serif; max-width: 100%; } .rn-index--embedded { margin: 0 0 8px; } /* Homepage tabs: avoid an extra scrollport around the index. */ .sym-landing [id^="panel-"]:has(.rn-index), .sym-landing [role="tabpanel"]:has(.rn-index) { overflow: visible !important; } .rn-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; } /* Same anchoring model as .rn-product-filter (relative only; menu uses top:100%). */ .rn-year-wrap { position: relative; } .rn-control { appearance: none; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--rn-border); border-radius: var(--radius-sm); background: var(--white); font: 600 13px "Work Sans", ui-sans-serif, system-ui, sans-serif; color: var(--rn-fg); outline: none; cursor: pointer; transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease; } .rn-control:hover { border-color: color-mix(in srgb, var(--rn-border) 60%, var(--brand-navy)); } .rn-control:focus-visible { border-color: var(--brand-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue) 20%, transparent); } .rn-year-button { padding-right: 10px; } .rn-year-menu { position: absolute; top: 100%; left: 0; right: auto; bottom: auto; z-index: 30; margin-top: 6px; min-width: 100%; overflow: hidden; border: 1px solid var(--rn-border); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-panel); } .rn-year-menu-list { margin: 0; padding: 4px 0; list-style: none; max-height: 288px; overflow-y: auto; } .rn-year-option { display: block; width: 100%; padding: 8px 12px; border: 0; background: transparent; text-align: left; font-family: "Work Sans", ui-sans-serif, system-ui, sans-serif; font-size: 13px; /* Unselected = normal; selected (--active) = bold */ font-weight: 400; color: var(--rn-fg); cursor: pointer; transition: background-color 150ms ease; } .rn-year-option:hover { background: var(--tile-bg); } .rn-year-option--active { font-weight: 600; color: var(--brand-blue); background: color-mix(in srgb, var(--brand-light-blue) 55%, transparent); } .rn-chevron { width: 16px; height: 16px; color: var(--rn-muted); flex-shrink: 0; } .rn-product-filter { position: relative; } .rn-filter-button { padding-right: 10px; } .rn-filter-menu { position: absolute; top: 100%; left: 0; right: auto; bottom: auto; z-index: 30; margin-top: 6px; /* Wide enough for full product names (e.g. Symmetry Minimum Wage Finder) */ width: 320px; overflow: hidden; border: 1px solid var(--rn-border); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-panel); } .rn-filter-select-all { display: block; width: 100%; padding: 8px 12px; font-size: 13px; font-weight: 400; text-align: left; color: var(--rn-muted); background: none; border: none; border-bottom: 1px solid var(--rn-border); cursor: pointer; transition: background-color 150ms ease; } .rn-filter-select-all:hover { background: var(--tile-bg); } .rn-filter-menu-list { margin: 0; padding: 4px 0; list-style: none; max-height: 288px; overflow-y: auto; } .rn-filter-option { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 13px; color: var(--rn-fg); cursor: pointer; transition: background-color 150ms ease; } .rn-filter-option:hover { background: var(--tile-bg); } .rn-filter-checkbox { width: 16px; height: 16px; accent-color: var(--brand-blue); flex-shrink: 0; } .rn-filter-checkbox:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; } .rn-product-icon { width: 16px; height: 16px; flex-shrink: 0; border-radius: 2px; object-fit: contain; } /* Filter menu icons — larger next to full product names */ .rn-filter-option .rn-product-icon { width: 22px; height: 22px; } /* Table header icons — slightly larger alongside full product names */ .rn-product-icon--header { width: 20px; height: 20px; } .rn-table-shell { border: 1px solid var(--rn-border); border-radius: 0; background: var(--white); max-width: 100%; padding: 0; margin: 0; /* visible so thead sticky docks to page scroll (not a nested scroller) */ overflow: visible; } /* * Mintlify steals `rn-grid` onto its scroll/padding WRAPPER (same pattern as * .ste-tc-table). Style the real <table> under .rn-table-shell so * table-layout / borders apply even after class theft. */ .rn-index .rn-table-shell table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 14px; margin: 0; } .rn-col-date { width: 88px; } .rn-col-product { width: auto; } .rn-grid-head { position: sticky; /* * Dock flush under visible fixed/sticky chrome. --docs-sticky-top is * navbar-only in CSS; JS overwrites with measured #navbar bottom so * dual-nav pages clear tabs and single-nav pages do not inherit * Mintlify's phantom --topbar-tabs-height. */ top: var(--docs-sticky-top); z-index: 12; background: var(--white); background-clip: padding-box; box-shadow: none; overflow: visible; } .rn-grid-th { padding: 10px 12px; text-align: left; font-size: 13px; font-weight: 600; color: var(--rn-muted); background: var(--white); border: 0; vertical-align: middle; } /* After .rn-grid-th { border: 0 } — keep a visible header rule (gray token). Reinforce middle align so Mintlify/prose cannot top-align th content. */ .rn-index .rn-table-shell thead th.rn-grid-head { border-bottom: 1px solid var(--border) !important; vertical-align: middle !important; } .rn-grid-th--date { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; } .rn-grid-td { position: relative; z-index: 0; padding: 10px 12px; vertical-align: top; border-bottom: 1px solid color-mix(in srgb, var(--rn-border) 70%, transparent); overflow-wrap: anywhere; } .rn-index .rn-table-shell tbody tr:last-child .rn-grid-td { border-bottom: 0; } .rn-grid-row:hover .rn-grid-td { background: var(--rn-hover); } /* * Mintlify wrapper chrome + sticky containing-block fix (same approach as * catalog .ste-tc-table). --page-padding:0 kills horizontal inset; margin / * padding-block !important zeros my-[1em] py-[1em] so thead sits flush under * the shell border. Scoped to .rn-index only; skip .ste-tax-catalog. * * Overflow MUST stay in @layer utilities: Tailwind's `overflow-y-hidden!` is * also @layer utilities !important. For !important, layered declarations beat * unlayered ones — moving these outside the layer made sticky fail again. */ @layer utilities { html:has(.rn-index:not(.ste-tax-catalog)) .rn-index .rn-table-shell, html:has(.rn-index:not(.ste-tax-catalog)) .rn-index .rn-grid { --page-padding: 0px; overflow: visible !important; contain: none !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding-block: 0 !important; } html:has(.rn-index:not(.ste-tax-catalog)) .rn-index .rn-table-shell > div, html:has(.rn-index:not(.ste-tax-catalog)) .rn-index .rn-table-shell .base-ui-disable-scrollbar, html:has(.rn-index:not(.ste-tax-catalog)) .rn-index .rn-table-shell [data-component-part="scroll-area-viewport"], html:has(.rn-index:not(.ste-tax-catalog)) .rn-index .rn-table-shell [class*="overflow-y-hidden"], html:has(.rn-index:not(.ste-tax-catalog)) .rn-index .rn-table-shell [class*="scroll-area-fade"], html:has(.rn-index:not(.ste-tax-catalog)) .rn-index .rn-grid > div, html:has(.rn-index:not(.ste-tax-catalog)) .rn-index .rn-grid .base-ui-disable-scrollbar, html:has(.rn-index:not(.ste-tax-catalog)) .rn-index .rn-grid [data-component-part="scroll-area-viewport"], html:has(.rn-index:not(.ste-tax-catalog)) .rn-index .rn-grid [class*="overflow-y-hidden"], html:has(.rn-index:not(.ste-tax-catalog)) .rn-index .rn-grid [class*="scroll-area-fade"] { overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; } html:has(.rn-index:not(.ste-tax-catalog)) .rn-index .rn-table-shell [class*="px-("], html:has(.rn-index:not(.ste-tax-catalog)) .rn-index .rn-table-shell .grow, html:has(.rn-index:not(.ste-tax-catalog)) .rn-index .rn-grid [class*="px-("], html:has(.rn-index:not(.ste-tax-catalog)) .rn-index .rn-grid .grow { padding-left: 0 !important; padding-right: 0 !important; } html:has(.rn-index:not(.ste-tax-catalog)) [class*="overflow-x-clip"] { overflow-x: visible !important; overflow: visible !important; } } .rn-product-heading { /* Row stays icon | text — wrap inside the span, not under the icon. */ display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; /* Medium-dark gray — not body/navy black */ color: #5B6B7C; text-decoration: none; } /* Underline product name on hover — do not change text color */ .rn-product-heading:hover { color: #5B6B7C; } .rn-product-heading:hover span { text-decoration: underline; } .rn-product-heading span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; line-height: 1.15; font-size: 13px; font-weight: 600; } .rn-date { white-space: nowrap; font-weight: 500; color: color-mix(in srgb, var(--rn-fg) 85%, var(--rn-muted)); } .rn-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; } .rn-version-link { font-size: 14px; font-weight: 500; color: var(--brand-blue); text-decoration: none; overflow-wrap: anywhere; } .rn-version-link:hover { color: var(--brand-blue); text-decoration: underline; } .rn-version-link:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; border-radius: 2px; } /* Preview chip — UI spec .rn-chip; review asked ~11–12px (was 9px) */ .rn-chip { display: inline-block; font-size: 11px; font-weight: 600; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.05em; /* Same --callout-warning-* role as the <Warning> callout and the changelog preview pill, so all three carry one source of truth for "preview". 5.04:1, clears AA. Borderless like that pill, and like this page's own tinted state (.rn-year-option--active). Shape, uppercase and size stay as they were: 6px and uppercase are the table's vocabulary, and a round sentence-case pill would match the changelog while clashing with the page it sits on. */ background: var(--callout-warning-bg); color: var(--callout-warning-fg); border: none; border-radius: 6px; padding: 2px 6px; white-space: nowrap; } .rn-empty { color: color-mix(in srgb, var(--rn-border) 80%, var(--rn-muted)); } .rn-empty-state { margin: 0; padding: 40px 20px; text-align: center; font-size: 14px; color: var(--rn-muted); } .dark .rn-index { --rn-fg: #f3f4f6; --rn-muted: #9ca3af; --rn-border: #374151; --rn-hover: rgba(255, 255, 255, 0.04); --rn-surface: #111827; } .dark .rn-control, .dark .rn-filter-menu, .dark .rn-year-menu, .dark .rn-table-shell { background: #111827; border-color: #374151; color: #f3f4f6; } .dark .rn-grid-head, .dark .rn-grid-th { background: #111827 !important; } .dark .rn-product-heading, .dark .rn-product-heading:hover { color: #9ca3af; } .dark .rn-filter-option:hover, .dark .rn-year-option:hover { background: #1f2937; } @media (max-width: 767px) { .rn-index .rn-table-shell table { font-size: 13px; } .rn-grid-th, .rn-grid-td { padding: 8px 10px; } .rn-version-link { font-size: 13px; } .rn-product-heading span { font-size: 13px; } } /* ============================================================================ Gated links on public pages ---------------------------------------------------------------------------- 200 of 631 pages are public, and 245 links from them point at pages that require sign-in — 48% of public pages had at least one. The nav is already filtered per session, so this only concerns links inside page bodies. Two treatments, because the two kinds of link make different promises: - <Card> is an invitation to go somewhere. A locked invitation is noise, so gated cards are hidden from logged-out visitors entirely. - An inline link is a reference inside a sentence. Removing it would break the prose, so it stays and gets a lock. site-header.js marks the elements (.sym-gated-card / .sym-gated-link) on every page regardless of auth state; the auth logic lives here. Everything gated FAILS CLOSED — hidden until data-sym-auth resolves to "in" — so a logged-out visitor never sees a card appear and then vanish. Signed-in users see the gap fill in instead, the same trade the .login-banner makes above. Clicking a gated link still works and needs no href rewriting: Mintlify sends it to /login?redirect=<path> and honours the destination after sign-in. ========================================================================== */ /* Hide only while NOT confirmed signed in, rather than hiding always and putting the display value back for signed-in visitors. Restoring it would mean naming what each element is — block for a card, grid for a card group, list-item for a TOC row — and every one of those is a guess about Mintlify's own styling that breaks the day it changes. Never overriding `display` in the signed-in state means there is nothing to guess and nothing to keep in sync. `:not([data-sym-auth="in"])` rather than `="out"` keeps this failing closed: the attribute is "unknown" until site-header.js resolves auth, and a gated card must stay hidden through that window, not flash in and vanish. The TOC row is not scoped to #content-area — the "On this page" list sits outside it. Hiding a heading has to take its entry along, or the entry survives and scrolls to nothing. */ html:not([data-sym-auth="in"]) #content-area .sym-gated-card, html:not([data-sym-auth="in"]) #content-area .sym-gated-group, html:not([data-sym-auth="in"]) #content-area .sym-gated-heading, html:not([data-sym-auth="in"]) li.toc-item.sym-gated-toc { display: none; } /* Inline links keep their place in the sentence and take a trailing lock. A pseudo-element, not an injected node: site-header.js runs under a childList MutationObserver and appending an element there would loop. */ html:not([data-sym-auth="in"]) #content-area a.sym-gated-link::after { content: ""; display: inline-block; width: 0.75em; height: 0.75em; margin-left: 0.28em; vertical-align: -0.02em; background-color: currentColor; opacity: 0.55; /* Lucide "lock", inlined so it costs no request and inherits link colour. */ -webkit-mask: var(--sym-lock) no-repeat center / contain; mask: var(--sym-lock) no-repeat center / contain; } :root { --sym-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); } /* TEMPORARY: hide Mintlify's native RSS button on changelog pages (rss: true in frontmatter) — remove this rule to bring it back. */ button[aria-label="Open RSS feed"] { display: none !important; } /* ─── Changelog (<Update> blocks) ──────────────────────────────────────── */ /* Release version — blue pill, mono text. Brand blue (not the softer badge-blue role), matching State/Territory/Yes elsewhere on the site. */ [data-component-part="update-label"] { background: var(--brand-light-blue) !important; border: none !important; border-radius: 4px !important; padding: 2px 11px !important; color: var(--brand-blue) !important; font-family: ui-monospace, monospace !important; font-size: 12px !important; font-weight: 400 !important; justify-content: flex-start !important; text-align: left !important; } /* Invisible (space still reserved) until site-header.js's markUpdateLabels() has classified it — avoids a visible flash from the blue published pill to the yellow preview one on first paint. */ [data-component-part="update-label"]:not(.sym-label-ready) { visibility: hidden !important; } /* Hairline between releases — not before the first one, regardless of what precedes it (a page intro, etc.). Matches the site's existing divider language instead of introducing a new colored-accent pattern. */ .update-container + .update-container { border-top: 1px solid var(--border); padding-top: 24px; } /* Preview (unreleased) — same warm-yellow wash as the "Release note preview" Warning callout on this exact page, via --callout-warning-*, so the pill and the callout read as one signal. Applied by site-header.js's markUpdateLabels(): no DOM attribute distinguishes a preview from a published release, so the state is derived from the callout's presence and the release date. Mono is kept here — a preview label is normally a real version string ("STE 2026.9.1") and should stay scannable as one. Column, not the base rule's row — site-header.js's ensurePreviewTag() splits the text into a "[Preview]" tag stacked above the version string, only for this variant. */ [data-component-part="update-label"].sym-update-label-preview { background: var(--callout-warning-bg) !important; color: var(--callout-warning-fg) !important; border: none !important; border-radius: 4px !important; padding: 2px 11px !important; font-weight: 500 !important; flex-direction: column !important; align-items: flex-start !important; gap: 1px; } /* The "[Preview]" tag ensurePreviewTag() prepends — sans, not the pill's own mono (that's reserved for the real version string below it). */ .sym-label-preview-tag { font-family: "Work Sans", sans-serif !important; font-weight: 400 !important; font-size: 13px; } /* "Upcoming release" only — the rare no-version-known case. Sans-serif on top of the yellow wash above, because this label is a status to read rather than a version to scan. */ [data-component-part="update-label"].sym-update-label-upcoming { font-family: inherit !important; } /* Release date under the label — one notch smaller and lighter than native text-secondary (14px / rgb(62,65,67)), so it reads as metadata rather than competing with the label pill above it. */ [data-component-part="update-description"] { font-size: 12px !important; color: var(--muted-fg) !important; margin-top: 4px !important; padding-left: 0 !important; } /* Narrower gap between the sticky label/date column and content — native lg:gap-6 (24px) reads as loose next to how tight the rest of the site's two-column layouts (e.g. sidebar/content) sit. */ .update-container { gap: 12px !important; } /* A callout opening a release (e.g. the "preview" Warning) doesn't need its default top margin — nothing above it to clear inside update-content. */ [data-component-part="update-content"] .callout:first-child { margin-top: 0 !important; } /* Release note preview callout stays pinned under the docs header while its (often long) upcoming-release entry scrolls, so the "subject to change" notice stays visible. Scoped to the preview release via site-header.js's markUpdateLabels() class — see the "no DOM attribute distinguishes a preview" note above. Mintlify wraps update-content in a plain `overflow-hidden` flex child (sibling of the sticky label/date column) — an ancestor overflow other than visible breaks position:sticky for anything inside it, same failure mode as the .rn-index fix above. Free just that wrapper, only on the preview release, so its callout can actually stick. Direct-child combinator (`>`) on the callout, not the descendant selector above — every collapsible section's opening callout is also ":first-child" of its own .cl-sec-body wrapper, so the plain descendant form matches all of them, not just the one true first callout. */ .update-container:has([data-component-part="update-label"].sym-update-label-preview) > div:has(> [data-component-part="update-content"]) { overflow: visible !important; } .update-container:has([data-component-part="update-label"].sym-update-label-preview) [data-component-part="update-content"] > .callout:first-child { position: sticky; top: var(--docs-sticky-top); z-index: 20; } /* Zero-height, non-sticky — site-header.js's initPreviewCalloutSticky() IntersectionObserver target. Once it scrolls out from under the header, the callout above is genuinely pinned (not just in its own normal-flow position), so the .is-stuck styles below apply only then. */ .sym-preview-callout-sentinel { height: 0; } /* Stuck-only treatment — same "lifted off the page" shadow language as .ste-tc-filters.is-stuck, so every sticky bar on the site reads as one pattern. Description line drops out so the pinned bar stays compact (just the bold "subject to change" line) instead of shadowing a full two-line callout over the content the whole scroll. Native py-4 is sized for that two-line callout — with only one line left, it reads as far too much air above and below the text once pinned as a slim bar. */ .update-container:has([data-component-part="update-label"].sym-update-label-preview) [data-component-part="update-content"] > .callout:first-child.is-stuck { box-shadow: 0 4px 12px -12px rgba(9, 39, 74, 0.4); padding-top: 10px !important; padding-bottom: 10px !important; } .update-container:has([data-component-part="update-label"].sym-update-label-preview) [data-component-part="update-content"] > .callout:first-child.is-stuck [data-component-part="callout-content"] > span:nth-child(2) { display: none !important; } /* The title span's own prose margin-bottom (~17.5px, spacing it from the description below) becomes trailing space once that description is hidden above — without this the stuck bar reads noticeably bottom-heavy. */ .update-container:has([data-component-part="update-label"].sym-update-label-preview) [data-component-part="update-content"] > .callout:first-child.is-stuck [data-component-part="callout-content"] > span:first-child { margin-bottom: 0 !important; } /* ─── More-menu onboarding popup (more-menu-onboarding.js) ─────────────── */ /* Time-boxed, one-time, signed-in-only callout pointing at the More menu. z-index above #navbar (30) and the More panel itself so it always reads as "in front of" the chrome it's pointing at. */ .sym-more-onboarding { position: fixed; z-index: 60; width: 320px; max-width: calc(100vw - 24px); padding: 20px; background: var(--brand-navy); color: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-panel); font-family: "Work Sans", ui-sans-serif, system-ui, sans-serif; /* Appear a beat after the page settles rather than the instant the menu shows up — backwards fill-mode holds it at the 0% (invisible) keyframe for the full delay instead of flashing visible then hiding. */ animation: sym-more-onboarding-in 200ms ease-out 1s backwards; } @keyframes sym-more-onboarding-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .sym-more-onboarding { animation-duration: 0.01ms; } } /* Fixed offset from the popup's own right edge — an approximation of the trigger's center, not a computed exact match. Good enough at this size; not worth the complexity of measuring the trigger's midpoint in JS. */ .sym-more-onboarding-arrow { position: absolute; top: -7px; right: 28px; width: 14px; height: 14px; background: var(--brand-navy); transform: rotate(45deg); border-radius: 2px; } .sym-more-onboarding-close { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; background: none; border: 0; border-radius: var(--radius-xs); color: rgba(255, 255, 255, 0.7); cursor: pointer; } .sym-more-onboarding-close:hover { color: var(--white); background: rgba(255, 255, 255, 0.1); } .sym-more-onboarding-close:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; } .sym-more-onboarding-title { margin: 0 0 8px; padding-right: 24px; font-size: 15px; font-weight: 700; line-height: 1.3; } .sym-more-onboarding-body { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.75); } .sym-more-onboarding-actions { display: flex; align-items: center; gap: 20px; } .sym-more-onboarding-cta { padding: 8px 18px; background: var(--white); color: var(--brand-navy); border: 0; border-radius: 9999px; font-size: 14px; font-weight: 600; cursor: pointer; } .sym-more-onboarding-cta:hover { background: var(--brand-light-blue); } .sym-more-onboarding-cta:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; } .sym-more-onboarding-link { font-size: 14px; font-weight: 500; color: var(--white); text-decoration: underline; } .sym-more-onboarding-link:hover { color: var(--brand-light-blue); } /* ─── Changelog: stacked collapsible sections ──────────────────────────── */ /* changelog-collapse.js supplies the wrappers — markdown emits a flat h2/h3/content sequence with nothing to collapse otherwise. Headings stay in place so their anchor ids survive; release emails deep-link to them. Sections stack like rows, one hairline between each, caret on the right. */ .cl-sec { border-top: 1px solid var(--border); } .cl-sec:first-child { border-top: 0; } /* Mintlify ships the h2 as display:flex with prose margins; both need taming to read as a stacked row. margin-left:auto on the caret pushes it to the right. */ .cl-sec-head { cursor: pointer; align-items: center; user-select: none; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0.85rem 0; font-size: 0.9375rem !important; font-weight: 500 !important; color: var(--muted-fg) !important; } .cl-sec-head:hover { color: var(--brand-blue); } /* Mintlify's "copy header link" anchor renders a 40px-wide clickable box around a 24px visible icon — the extra 16px is invisible dead space that otherwise steals clicks meant to toggle the section (and jumps/copies the link instead). Restrict the hit target to the icon itself; clicks in the surrounding padding fall through to the row's own toggle handler. */ .cl-sec-head a[aria-label="Navigate to header"] { pointer-events: none; } .cl-sec-head a[aria-label="Navigate to header"] > div { pointer-events: auto; } .cl-sec--open > .cl-sec-head { color: var(--card-fg) !important; } /* .cl-sec-head's own top padding shifts the first heading down; nudge the sticky label/date column (update-container's other flex child) to match. Scoped to releases that actually have a collapsible section — a content-only release (e.g. "Upcoming Release", just a Warning callout) has no .cl-sec-head to align with, so its badge stays flush at the top. */ .update-container:has(.cl-sec-head) > div:first-child { margin-top: 0.65rem; } .cl-caret { flex: 0 0 auto; margin-left: auto; width: 13px; height: 13px; color: var(--muted-fg); transition: transform 140ms ease; } .cl-caret > svg { display: block; width: 100%; height: 100%; } .cl-sec--open > .cl-sec-head .cl-caret { transform: rotate(180deg); } .cl-sec-head:hover .cl-caret { color: var(--brand-blue); } /* No `display` here on purpose: the JS toggles hidden="until-found", and a display rule would defeat the attribute and lose Ctrl-F reveal with it. */ .cl-sec-body { margin: 0 0 0.55rem; padding: 0.15rem 0; } /* hidden="until-found" is content-visibility:hidden, NOT display:none — the element keeps its own box, so its margin still applies while collapsed and showed as a gap above the next hairline. Zero it. Do not switch to display:none — that would defeat until-found and lose Ctrl-F reveal. */ .cl-sec:not(.cl-sec--open) > .cl-sec-body { margin: 0; padding: 0; } /* Zero first/last child margins so they don't compound with .cl-sec-body's own padding/margin. */ .cl-sec-body > *:first-child { margin-top: 0 !important; } .cl-sec-body > *:last-child { margin-bottom: 0 !important; } /* An entry heading is h3 in STE and PRP but h4 in most of I-9, which goes ## > #### with no ###. Both sit at the same level, so both read the same. */ .cl-entry > h3, .cl-entry > h4 { margin-top: 1rem !important; margin-bottom: 0.35rem !important; } .cl-entry:first-child > h3, .cl-entry:first-child > h4 { margin-top: 0 !important; } /* Mintlify zeroes the top margin on a paragraph that directly follows a heading, but the entry heading lives in .cl-entry while the prose lives in a sibling .cl-entry-body, so that rule never matches here. Zero it ourselves. Targets *:first-child rather than p:first-child because a paragraph inside <Update> is a span[data-as="p"] — 308 of those against 2 bare <p> on the STE page. */ .cl-entry-body > *:first-child { margin-top: 0 !important; } .cl-entry-body h4 { margin-top: 0.7rem !important; margin-bottom: 0.25rem !important; } /* ─── Changelog: print a single release ────────────────────────────────── */ /* changelog-print.js adds the control; scoping/cleanup live here. Two entry points: `.cl-print-target` (button) and `:target` (deep link, no JS). */ /* Plain text link, not a pill — still a <button> since it performs an action. No left padding, so the icon lines up with the version/date text above. */ .cl-print-btn { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.85rem; padding: 0; border: 0; background: none; color: var(--muted-fg); font-size: 0.75rem; line-height: 1.4; cursor: pointer; } .cl-print-btn > svg { width: 13px; height: 13px; flex: 0 0 auto; } /* Underline the word only, and only on hover/active. */ .cl-print-btn > span { text-underline-offset: 2px; text-decoration-thickness: 1px; } .cl-print-btn:hover, .cl-print-btn:active { color: var(--card-fg); } .cl-print-btn:hover > span, .cl-print-btn:active > span { text-decoration: underline; } @media print { /* Scope to one release; a plain print is unaffected. Must be two separate rules, not one OR'd selector — combined, a stale hash on release A plus the button targeting release B hides both (blank print). Gating :target on html:not(.cl-print-one) makes the button always win once clicked. */ html.cl-print-one .update-container:not(.cl-print-target) { display: none !important; } html:not(.cl-print-one) body:has(.update-container:target) .update-container:not(:target) { display: none !important; } /* Force-expand collapsed content. Keyed on [hidden], not collapse classes, so it can't silently drop content. Both props needed: plain `hidden` = display:none, "until-found" = content-visibility:hidden. */ .update-container [hidden] { display: block !important; content-visibility: visible !important; } /* Site chrome and our own control. */ #header, #navbar, #navbar-transition, #sidebar, #sidebar-content, #table-of-contents, #table-of-contents-layout, #table-of-contents-content, #search-bar-entry, #search-bar-entry-mobile, #topbar-cta-button, #chat-assistant-textarea, #page-title, #page-context-menu, #rss-feed-button, #navigation-items, #content-side-layout, #background-color, .cl-print-btn, div:has(> .chat-assistant-floating-input) { display: none !important; } } /* #footer is forced visible via @layer utilities elsewhere (defeats Mintlify's own hide-on-custom-mode rule) — layer order reverses for !important, so this needs the same layer to actually win. */ @layer utilities { @media print { #footer { display: none !important; } } } @media print { /* The "On this page" toggle is an h2 with a generated id, so it can only be reached structurally. It is chrome, not content. */ #content-area > h2, #content-area > div:has(> button[aria-expanded]) { display: none !important; } /* Let the release use the full page width. */ #content-area, #content-container, #content-side-layout { max-width: 100% !important; margin: 0 !important; padding: 0 !important; } /* The version rail is sticky on screen; no meaning on paper. Also drops its border and excess bottom margin, both screen-only artifacts. */ .update-container > div:first-child { position: static !important; border: none !important; margin-bottom: 0 !important; } /* Closes the gap left by hidden chrome above #content. Measured against the generated PDF; print-only. border-top: the release-divider hairline is meaningless (and stray-looking) once isolated to one release. */ .cl-print-target, .update-container:target { margin-top: -102pt !important; border-top: none !important; } /* Prev/next-release pagination footer — not relevant to a single release. */ #pagination { display: none !important; } /* More breathing room around the divider between sections — tight on screen, cramped on paper. */ .cl-sec { margin-top: 0.5rem; padding-top: 0.5rem; } /* A touch larger than the screen size for paper legibility. */ .cl-sec-head { font-size: 1.05rem !important; } /* On-screen spacing above the release (#content's mt-8/mb-14 + py-8) has no benefit on paper. */ #content { margin-top: 0 !important; margin-bottom: 0 !important; } .update-container { padding-top: 0 !important; padding-bottom: 0 !important; } /* Keep a release from breaking across pages mid-entry where it can be helped. */ .update-container h2, .update-container h3, .update-container h4 { break-after: avoid; page-break-after: avoid; } .update-container pre, .update-container table { break-inside: avoid; page-break-inside: avoid; } /* Force-expand doesn't add .cl-sec--open, so a collapsed heading stays muted despite visible content. Caret has no meaning on paper — hide it rather than track rotation. */ .cl-print-target .cl-sec-head, .update-container:target .cl-sec-head { color: var(--card-fg) !important; } .cl-caret { display: none !important; } } /* Page box is ours to set; Chrome's default is wider than this needs to be. Note the browser's own header/footer band (date, URL, page number) is a print dialog setting, not something CSS can remove. */ @page { margin: 8mm 12mm; } </article></body></html>

/* ============================================================================ Symmetry docs — global stylesheet (auto-loaded by Mintlify from repo root) §1 Design tokens · §2 Reusable components · §3 Page scopes Brand: blue #0056B2 · sky #0C9BED · navy #09274A · tangerine #FFAD0D · light-blue #E8F7FF. Never use cyan #009DD4. Every reused value is a var(--…) from §1. ========================================================================== */ /* docs.json's fonts config only loads weight 400/600 — supplement 500 here so font-weight:500 has a real face. Brand "bold"/emphasis is 600 everywhere (never 700); Tailwind font-bold maps to 700 — use font-semibold. */ @import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,500;1,500&display=swap'); /* ── §1 Design tokens ──────────────────────────────────────────────────── */ :root { /* Stop Mintlify's body-font-weight override from clobbering our own font-weight rules */ --font-weight-body-custom: inherit !important; --brand-blue: #0056B2; --brand-blue-hover: #004793; --brand-sky: #0C9BED; /* logo / ring-badge accent (not cyan #009DD4) */ --brand-sky-25: color-mix(in srgb, var(--brand-sky) 25%, transparent); --brand-navy: #09274A; --brand-tangerine: #FFAD0D; --brand-tangerine-hover: #E99A00; --brand-light-blue: #E8F7FF; --fg: #0b2540; --fg-70: rgba(11, 37, 64, 0.70); /* Muted chrome text — must clear WCAG AA (≥4.5:1) on white AND --brand-light-blue (#E8F7FF). #6F7679 was ~4.2:1 on light-blue. */ --muted-fg: #5A6164; --border: #d6dbdd; --white: #ffffff; --panel-bg: var(--white); --tile-bg: #F3F4F6; --accent-hover: #f4f4f5; --surface: #f7fafc; --navy-10: rgba(9, 39, 74, 0.10); --navy-50: rgba(9, 39, 74, 0.50); --navy-60: rgba(9, 39, 74, 0.60); --navy-70: rgba(9, 39, 74, 0.70); --footer-bg: #f5f8fb; --status-bg: #f0fdf4; --status-bg-hover: #dcfce7; --status-border: rgba(22, 163, 74, 0.30); --status-fg: #15803d; --status-dot: #22c55e; /* font-medium across the docs surface — nav labels, sidebar category names, active tabs/links, etc. (everything else is 400 body text or 600 headings/micro-labels — never 700). */ --weight-medium: 500; /* Left nav + right TOC share this text size. */ --sidebar-font-size: 13px; --sidebar-fg: rgba(9, 39, 74, 0.8); /* Spacing scale — prefer these over raw px in layout/chrome rules. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; /* Code blocks + API request/response example cards share this background */ --code-bg-gray: color-mix(in srgb, rgb(var(--gray-100)) 50%, white); --radius: 8px; /* More menu panel, shared panel chrome */ --radius-sm: 4px; /* Search, apps-row, cards — less curvy than xl/8px */ --radius-xs: 2px; /* Product switcher trigger + dropdown */ /* Search trigger + modal — --radius-sm (apps-row / cards). Native utility: .rounded-search{border-radius:var(--rounded-search)}. Both ship Mintlify's own bigger radius natively (trigger rounded-xl/12px, modal input container rounded-2xl/16px); overridden on #search-bar-entry and [data-component-part="search-input-container"] respectively. */ --rounded-search: var(--radius-sm); --shadow-panel: 0 4px 12px rgba(9, 39, 74, 0.08); --shadow-card: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* Site z-index scale: #navbar 30, Ask Docs button 40, assistant panel 41, .product-menu 50, .sym-menu__panel 60. */ --z-assistant-sheet: 41; /* Plain (non-navy-tinted) neutral palette for the card components. */ --card-border: #D7DCDF; --card-fg: #111827; --card-muted: #6b7280; --card-icon: #4b5563; /* Whole-card link hover chrome (Mintlify , .radar-card). Soft brand-blue border + resting card shadow — not a lift/glow. */ --card-hover-border: color-mix(in srgb, var(--brand-blue) 40%, transparent); --card-hover-shadow: var(--shadow-card); /* Shared pill/badge palette — role-named, not tied to any one feature, so payer-badge.jsx, the tax-catalog type badges, and the multi-state finder's rule badges can all pick a role instead of borrowing a differently-named token that happens to have the right color. */ --badge-blue-bg: #EFF6FF; --badge-blue-fg: #1D4ED8; --badge-blue-border: #BFDBFE; --badge-violet-bg: #F5F3FF; --badge-violet-fg: #6D28D9; --badge-violet-border: #DDD6FE; --badge-teal-bg: #F0FDFA; --badge-teal-fg: #0F766E; --badge-teal-border: #99F6E4; --badge-amber-bg: #FEFCE8; --badge-amber-fg: #A16207; --badge-amber-border: #FDE047; --badge-green-bg: #F0FDF4; --badge-green-fg: #15803D; --badge-green-border: color-mix(in srgb, #15803D 25%, white); /* Warning role. The callout is one of the most-used components in the docs (361 blocks across 198 files) and its wash and text were the only colours in the callout family with no token at all — so anything wanting to read as "warning" had to copy the hex. Named here so the callout, the changelog preview pill and the release-index preview chip share one source instead of three copies. The border is --brand-tangerine, which already existed. 5.04:1, clears AA. */ --callout-warning-bg: #FFF6E3; --callout-warning-fg: #916000; /* Still consumed directly by the multi-state finder's tone cards (ste-msf-tone-dual / --icon--dual) under their own violet name. */ --payer-both-bg: var(--badge-violet-bg); --payer-both-fg: var(--badge-violet-fg); --payer-both-border: var(--badge-violet-border); } /* Neutralize Mintlify's generated .prose heading letter-spacing (-.025em on h1/h2/h3) — sits in @layer components, so a later @layer utilities rule wins without needing !important. */ @layer utilities { h1, h2, h3 { letter-spacing: normal; } } /* Native :font-bodyWeight rule forces --font-weight-body-custom (inherit, per the token above) onto every non-heading descendant, including / — restore emphasis with a medium weight + darker color. */ strong, b { font-weight: 500 !important; color: var(--card-fg) !important; } /* Mintlify's subpixel text-shadow "faux bold" trick reads as blurry/doubled text at our sizes — turn it off. */ .\[text-shadow\:-0\.2px_0_0_currentColor\,0\.2px_0_0_currentColor\] { text-shadow: none !important; } /* Text selection — brand sky tint; text keeps its own natural color. Semi-transparent, not solid --brand-light-blue: some surfaces (e.g. the signed-in hero) are already --brand-light-blue, and a selection color identical to its own background would be invisible there. */ ::selection { background-color: color-mix(in srgb, #0a9bed 30%, transparent); } ::-moz-selection { background-color: color-mix(in srgb, #0a9bed 30%, transparent); } /* ── §2 Reusable components ────────────────────────────────────────────── */ /* Native nav stays native — Mintlify already flips "Sign in" to "Log Out" for a real auth session; site-header.js just adds the Docs/Tickets/More pills as one
alongside it. Match auth label weight + color to .sym-pill (Tickets) so Sign in / Log Out don't read heavier/darker than Docs/Tickets (Mintlify ships font-medium + text-gray-600). */ .login-link, .logout-link { font-weight: 500 !important; color: var(--muted-fg) !important; } .login-link:hover, .logout-link:hover { color: var(--brand-navy) !important; } /* Log Out now lives in the avatar menu, so hide Mintlify's own copy. Hidden, never removed: site-header.js authState() reads .logout-link presence to tell signed-in from signed-out, and the avatar menu's Log Out clicks this element to run Mintlify's real sign-out. Both need it in the DOM. The
goes rather than the so no empty padded list item is left behind. Conditional on .sym-user existing, which is the point: userMenuHtml() renders nothing when it can't derive initials, and a signed-in user with an empty content claim (preview deployments) is exactly that case. Keying off our menu rather than auth state means those users keep Mintlify's link and are never left with no way out. */ #navbar:has(.sym-user) li:has(> .logout-link) { display: none !important; } /* "Get a demo" is acquisition chrome — drop it once someone is signed in, since they're already a customer. It comes from navbar.primary in docs.json, which has no auth awareness, so site-header.js publishes data-sym-auth on and this reacts to it. Driving it from CSS rather than inline styles means it survives Mintlify re-rendering the navbar. Mintlify renders navbar.primary FOUR times: a plain link and a button in the navbar, then the same pair again inside the narrow-viewport drawer. The drawer is a React portal (`div#_r_p_`) whose id is generated per render, so it can't be targeted directly — but all four are a direct `li > a`, which can. Hence the match is on structure rather than container. `:not(#content-area li)` keeps it out of page prose: two legacy readme pages link to the same URL as "contact us" text, and a future bulleted list could too. Update the href if navbar.primary's URL changes in docs.json. */ html[data-sym-auth="in"] #topbar-cta-button { display: none !important; } /* The plain-link copy is Mintlify's own narrow-viewport fallback for navbar.primary — meant to stand in for #topbar-cta-button, not sit next to it. The button already covers every width the fallback would (the main header's
is hidden below lg, and the "More actions" mobile popover renders both copies together without that exclusivity), so it's always redundant where it appears and shows as a duplicate "Get a demo" in that popover. Hidden regardless of auth state — signed-in already loses the button above, so this keeps neither visible. */ li:has(> a[href*="symmetry.com/demo"]):not(#topbar-cta-button):not(#content-area li) { display: none !important; } #navbar nav[aria-label="Main"] > ul > li.sym-injected { display: flex; align-items: center; flex-shrink: 0; } /* Signed-in avatar. Sits after .sym-pill-group so that group's trailing ::after divider separates it from the More pill. Initials come from the user object (window.mintlify.user); site-header.js renders nothing when it can't derive any, so there is no empty circle to style around. */ .sym-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--brand-blue); color: var(--white); font-size: 12px; font-weight: 600; letter-spacing: 0.5px; line-height: 1; user-select: none; } .sym-pill-group { display: flex; align-items: center; flex-wrap: nowrap; flex-shrink: 0; } .sym-pill-group > * + * { margin-left: 2px; } /* Margin lives entirely on the divider, split evenly — not borrowed from .sym-avatar's own margin, which would silently go lopsided if whatever follows the divider ever changes. */ .sym-pill-group::after { content: ""; display: inline-block; flex: 0 0 auto; width: 1px; height: 20px; margin: 0 12px; background: var(--border); } /* "Get a demo": Mintlify's inside has its own navy fill (.bg-primary-dark) and white label (.text-white) — neutralize both so our tangerine pill on the
doesn't render as two stacked buttons. */ #topbar-cta-button { display: flex; align-items: center; margin-left: 8px; background: var(--brand-tangerine); border: 1px solid var(--brand-navy); border-radius: 57px; box-shadow: 0 3px 0 0 var(--brand-navy); cursor: pointer; transition: background-color 150ms ease; } #topbar-cta-button a { display: flex; align-items: center; justify-content: center; padding: 5px 20px; font-family: "Work Sans", Montserrat, Roboto, Arial, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; line-height: 2; text-align: center; text-decoration: none; } #topbar-cta-button:hover { background: var(--brand-tangerine-hover); } #topbar-cta-button:active { background: #fff; transform: translateY(2px); } #topbar-cta-button:focus-visible, #topbar-cta-button a:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--brand-blue); } #topbar-cta-button .bg-primary-dark { background: transparent !important; box-shadow: none !important; } #topbar-cta-button .text-white { color: var(--brand-navy) !important; font-weight: 600 !important; } #topbar-cta-button svg { display: none !important; } /* The mobile "More actions" popover is its own [role="dialog"] portal (rounded-2xl/16px, p-1/4px natively) that surfaces this same #topbar-cta-button unhidden (bypassing its usual lg:flex gating) rather than duplicating a separate mobile-only link. Scoped via :has() to just this dialog — verified live that the hamburger nav drawer (also a [role="dialog"]) has no #topbar-cta-button inside it, so this doesn't touch that one. */ [role="dialog"]:has(#topbar-cta-button) { border-radius: var(--radius); padding: var(--space-2); } /* Tangerine pill is sized for the header bar and doesn't fit a plain overflow-menu row, so drop back to a plain link look for that instance only — the desktop header's pill is untouched. */ [role="dialog"] #topbar-cta-button { background: transparent; border: none; box-shadow: none; border-radius: 0; margin: 0; /* The dialog's own Close button (30px, absolutely positioned top-right) needs its own clear space — Mintlify's [&_li]:w-full on this dialog's list makes the row span the full dialog width otherwise. margin-right wouldn't shrink a width:100% box (it'd just overflow); override the width itself so the anchor's own w-full computes against less space. */ width: calc(100% - 2.5rem); } [role="dialog"] #topbar-cta-button:hover, [role="dialog"] #topbar-cta-button:active { /* background: transparent already wins here unconditionally — the plain #topbar-cta-button rule above carries too, and ties go to source order, not specificity. Only the actually state-specific part (canceling the base rule's :active press-down) belongs here. */ transform: none; } [role="dialog"] #topbar-cta-button a { justify-content: flex-start; padding: 8px; font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: normal; line-height: 1.5; } [role="dialog"] #topbar-cta-button .text-white { /* color already wins here via the base #topbar-cta-button .text-white rule (line ~257) — this selector is only more specific, not different, so only the actually-changed property (font-weight) belongs here. */ font-weight: 500; } .navbar-link { font-size: 14px; font-weight: 500; color: var(--brand-navy); transition: color 150ms ease; } .navbar-link:hover { color: var(--brand-blue); } #navbar a[aria-current="page"] { color: var(--brand-blue); } :focus-visible { outline-color: var(--brand-blue); } /* Shared keyboard focus ring for custom chrome that clears the native outline (pills, banner link, search/AI CTAs, More menu, tax-catalog). */ .sym-pill:focus-visible, .sym-menu > summary.sym-pill:focus-visible, .sym-user > summary.sym-user__trigger:focus-visible, .sym-user__logout:focus-visible, .login-link:focus-visible, .logout-link:focus-visible, .login-banner a.banner-login-link:focus-visible, .sym-searchbox:focus-visible, .sym-btn-ai:focus-visible, .apps-row:focus-visible, .ste-tc-search input:focus-visible, .ste-tc-search-clear:focus-visible, .ste-tc-chip:focus-visible, .footer-callout__link:focus-visible, .hub-footer a.footer-link:focus-visible, .hub-footer a.legal-link:focus-visible, .hub-footer .statuspage:focus-visible, .advanced-footer a:focus-visible, #search-bar-entry:focus-visible, #search-bar-entry-mobile:focus-visible, [data-component-part="search-filter-content"] [role="menuitemradio"]:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--brand-blue); } /* Mintlify fades the navbar in on scroll (transparent at the top) — always solid white instead. Full-bleed bottom edge of the sticky header bar (logo row + native tabs when present) — #navbar-transition is already viewport-wide (absolute inset of #navbar), unlike the max-w-8xl children. */ #navbar-transition { opacity: 1 !important; background-color: #fff !important; border-bottom: 1px solid var(--card-border) !important; border-color: var(--card-border) !important; } /* Mid-divider under the logo/search row — full viewport width. .h-16 lives inside max-w-8xl (+ mx-4 on small screens), so a border on .h-16 stops short of the edges. Paint via 100vw ::after instead; clear Mintlify's inset border-b on the inner flex. */ #navbar .h-16 { position: relative; border-bottom-width: 0 !important; } #navbar .h-16::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 100vw; margin-left: -50vw; border-bottom: 1px solid var(--card-border); pointer-events: none; z-index: 1; } #navbar .h-16 .border-b { border-bottom-width: 0 !important; } /* Native tabs row sits in the same inset max-w-8xl — don't add a second inset bottom rule; #navbar-transition already draws the full-bleed edge. */ #navbar div:has(> .nav-tabs) { border-bottom-width: 0 !important; } /* Native product tabs — Mintlify gap-x-6 (1.5rem); +2px between tabs. */ #navbar .nav-tabs { column-gap: calc(1.5rem + 2px) !important; gap: calc(1.5rem + 2px) !important; } /* Active tab — Mintlify only fakes bold via text-shadow; add real weight. */ #navbar .nav-tabs > a[data-active="true"] { font-weight: var(--weight-medium) !important; } /* Temporary product-switcher skeleton in the native tabs row (second nav). Shows only while .product-switcher-slot is absent — when product-subnav.js mounts the real switcher, :has(.product-switcher-slot) drops this rule. Does NOT hide .nav-tabs. If JS never runs, the exit animation collapses the skeleton after ~1.8s so native tabs remain fully visible/usable. */ @keyframes product-switcher-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } @keyframes product-switcher-skeleton-exit { 0%, 80% { opacity: 1; max-width: 240px; margin-right: 24px; border-width: 1px; } 100% { opacity: 0; max-width: 0; margin-right: 0; padding: 0; border-width: 0; overflow: hidden; } } #navbar div:has(> .nav-tabs):not(:has(.product-switcher-slot))::before { content: ""; display: block; flex-shrink: 0; align-self: center; width: 240px; max-width: 240px; height: 34px; margin-right: 24px; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--radius-xs); background: linear-gradient( 90deg, var(--tile-bg) 0%, #e8eaed 45%, var(--tile-bg) 90% ); background-size: 200% 100%; animation: product-switcher-shimmer 1.1s ease-in-out infinite, product-switcher-skeleton-exit 1.8s ease-in forwards; pointer-events: none; } #theme-preference-menu-trigger { display: none !important; } #assistant-entry, #assistant-entry-mobile { display: none !important; } /* Floating "Ask Docs" button — Mintlify's recommended hook is the class `.chat-assistant-floating-input` (custom-scripts docs). Newer Mintlify renders a
, not a custom element tag, so tag-only selectors never matched and the default "Ask a question..." bar stayed visible. Mintlify marks the sticky parent with Tailwind `invisible` (and on mode:"custom" pages also `hidden`) — force it visible. */ div:has(> .chat-assistant-floating-input) { position: fixed !important; inset: auto 24px 24px auto !important; left: auto !important; width: auto !important; height: auto !important; z-index: 40 !important; overflow: visible !important; visibility: visible !important; /* overrides Tailwind `invisible` */ display: block !important; /* overrides Tailwind `hidden` on homepage */ pointer-events: none !important; background: transparent !important; } .chat-assistant-floating-input { position: relative !important; bottom: auto !important; right: auto !important; left: auto !important; top: auto !important; width: auto !important; height: 48px !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; border: none !important; border-radius: 9999px !important; padding: 0 20px 0 16px !important; background: #0056B2 !important; color: #FFFFFF !important; font-family: "Work Sans", sans-serif !important; cursor: pointer !important; overflow: hidden !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important; transition: background-color 150ms; pointer-events: auto; /* Kill Mintlify's tall fade ::before (before:h-[200px] …). */ transform: none; opacity: 1; } .chat-assistant-floating-input:hover { background: #004A99 !important; } .chat-assistant-floating-input:focus-visible { outline: 2px solid #0056B2 !important; outline-offset: 2px !important; } /* Homepage only: a brief, subtle fade in, ~1.5s after load — no slide, opacity only. A @keyframes animation, not a JS-toggled class + transition: ask-docs-float.js's reveal function runs synchronously before first paint, so a class it adds never actually renders its "before" state for a transition to animate from — it would just show fully visible from frame one. An animation's delay/fill-mode are computed from the element's first paint regardless of script timing, so this always animates correctly. Neither property is !important on the base rule (verified live neither needs to be), so the animation's keyframe values apply with nothing to fight. */ @keyframes ask-docs-float-in { 0%, 99% { opacity: 0; pointer-events: none; } 100% { opacity: 1; pointer-events: auto; } } body:has(.sym-landing) .chat-assistant-floating-input { animation: ask-docs-float-in 250ms ease 1.5s both; } /* Hide the Ask-a-question card chrome, but keep a full-size invisible textarea as the hit target so Mintlify's native open handler still fires. */ .chat-assistant-floating-input > div { position: absolute !important; inset: 0 !important; margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; max-width: none !important; width: 100% !important; height: 100% !important; display: block !important; opacity: 0 !important; pointer-events: auto !important; cursor: pointer !important; } .chat-assistant-floating-input .chat-assistant-send-button, .chat-assistant-floating-input span, .chat-assistant-floating-input chat-assistant-disclaimer-text { display: none !important; } .chat-assistant-floating-input .chat-assistant-input, .chat-assistant-floating-input textarea { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; border: 0 !important; resize: none !important; cursor: pointer !important; pointer-events: auto !important; z-index: 1 !important; } /* Sparkles icon (overrides Mintlify's fade ::before). */ .chat-assistant-floating-input::before { content: "" !important; display: block !important; position: static !important; inset: auto !important; left: auto !important; right: auto !important; top: auto !important; width: 18px !important; height: 18px !important; margin: 0 !important; background: #FFFFFF !important; background-image: none !important; pointer-events: none !important; flex-shrink: 0 !important; -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOSAyOSI+PHBhdGggZD0iTTkuNiA1LjRMNy41IDAuNUw1LjQgNS40TDAuNSA3LjVMNS40IDkuNkw3LjUgMTQuNUw5LjYgOS42TDE0LjUgNy41TDkuNiA1LjRaIiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0yMS44MDAxIDE2LjQwMTZMMTkuMTAwMSAxMC4xMDE2TDE2LjQwMDEgMTYuNDAxNkwxMC4xMDAxIDE5LjEwMTZMMTYuNDAwMSAyMS44MDE2TDE5LjEwMDEgMjguMTAxNkwyMS44MDAxIDIxLjgwMTZMMjguMTAwMSAxOS4xMDE2TDIxLjgwMDEgMTYuNDAxNloiIGZpbGw9Im5vbmUiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+") !important; mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOSAyOSI+PHBhdGggZD0iTTkuNiA1LjRMNy41IDAuNUw1LjQgNS40TDAuNSA3LjVMNS40IDkuNkw3LjUgMTQuNUw5LjYgOS42TDE0LjUgNy41TDkuNiA1LjRaIiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0yMS44MDAxIDE2LjQwMTZMMTkuMTAwMSAxMC4xMDE2TDE2LjQwMDEgMTYuNDAxNkwxMC4xMDAxIDE5LjEwMTZMMTYuNDAwMSAyMS44MDE2TDE5LjEwMDEgMjguMTAxNkwyMS44MDAxIDIxLjgwMTZMMjguMTAwMSAxOS4xMDE2TDIxLjgwMDEgMTYuNDAxNloiIGZpbGw9Im5vbmUiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+") !important; -webkit-mask-size: contain !important; mask-size: contain !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; -webkit-mask-position: center !important; mask-position: center !important; } .chat-assistant-floating-input::after { content: "Ask Docs" !important; display: block !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1 !important; color: #FFFFFF !important; pointer-events: none !important; white-space: nowrap !important; } /* Assistant sheet header — replace Mintlify's default icon with our sparkles glyph (same as Ask AI / Ask Docs) in brand blue. */ .chat-assistant-sheet-header > div > svg:first-of-type { width: 18px !important; height: 18px !important; flex-shrink: 0 !important; color: transparent !important; fill: none !important; stroke: none !important; background-color: var(--brand-blue) !important; -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOSAyOSI+PHBhdGggZD0iTTkuNiA1LjRMNy41IDAuNUw1LjQgNS40TDAuNSA3LjVMNS40IDkuNkw3LjUgMTQuNUw5LjYgOS42TDE0LjUgNy41TDkuNiA1LjRaIiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0yMS44MDAxIDE2LjQwMTZMMTkuMTAwMSAxMC4xMDE2TDE2LjQwMDEgMTYuNDAxNkwxMC4xMDAxIDE5LjEwMTZMMTYuNDAwMSAyMS44MDE2TDE5LjEwMDEgMjguMTAxNkwyMS44MDAxIDIxLjgwMTZMMjguMTAwMSAxOS4xMDE2TDIxLjgwMDEgMTYuNDAxNloiIGZpbGw9Im5vbmUiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+") !important; mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOSAyOSI+PHBhdGggZD0iTTkuNiA1LjRMNy41IDAuNUw1LjQgNS40TDAuNSA3LjVMNS40IDkuNkw3LjUgMTQuNUw5LjYgOS42TDE0LjUgNy41TDkuNiA1LjRaIiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0yMS44MDAxIDE2LjQwMTZMMTkuMTAwMSAxMC4xMDE2TDE2LjQwMDEgMTYuNDAxNkwxMC4xMDAxIDE5LjEwMTZMMTYuNDAwMSAyMS44MDE2TDE5LjEwMDEgMjguMTAxNkwyMS44MDAxIDIxLjgwMTZMMjguMTAwMSAxOS4xMDE2TDIxLjgwMDEgMTYuNDAxNloiIGZpbGw9Im5vbmUiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+") !important; -webkit-mask-size: contain !important; mask-size: contain !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; -webkit-mask-position: center !important; mask-position: center !important; } .chat-assistant-sheet-header > div > svg:first-of-type * { visibility: hidden !important; } /* Ships below #navbar's z-index, so the navbar border paints over the panel — raise it above navbar + the floating Ask Docs button. */ [data-assistant-sheet-container] { z-index: var(--z-assistant-sheet) !important; } /* Pin vertical centering on the header icon + title. */ .chat-assistant-sheet-header, .chat-assistant-sheet-header > div:first-child { align-items: center !important; } /* "Assistant" title — a touch bolder than Mintlify's font-medium. */ .chat-assistant-sheet-header > div:first-child > span { font-weight: 600 !important; } /* Faded topography band behind the panel header, fading into the panel's normal background before the message list starts. Header needs a transparent bg or its own Mintlify fill would cover the pattern. */ #chat-assistant-sheet { position: relative; z-index: 0; } #chat-assistant-sheet::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 140px; z-index: -1; background-color: var(--brand-light-blue); background-image: url("https://assets.symmetry.com/illustrations/patterns/topography/dark/v1/pattern.svg"); background-repeat: no-repeat; /* One large motif spanning the panel width, not a repeated tile. */ background-size: 100% auto; background-position: top center; opacity: 0.35; /* Hold the graphic fully visible near the top, then a long, gradual fade — a short fade reads as a hard seam once real message content sits right below it. */ -webkit-mask-image: linear-gradient(to bottom, black 0%, black 25%, transparent 100%); mask-image: linear-gradient(to bottom, black 0%, black 25%, transparent 100%); pointer-events: none; } .chat-assistant-sheet-header { background: transparent !important; } /* Search modal — Ask Assistant button (next to the input): gray sparkles to the LEFT of the label via ::before. Do NOT retarget the button's SVGs — those are the Alt/Enter kbd glyphs. */ [data-component-part="search-ask-ai-button"] { padding-left: 12px !important; gap: 6px !important; } [data-component-part="search-ask-ai-button"]::before { content: ""; display: block; width: 14px; height: 14px; flex-shrink: 0; background-color: currentColor; /* inherits gray-500 button text */ -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOSAyOSI+PHBhdGggZD0iTTkuNiA1LjRMNy41IDAuNUw1LjQgNS40TDAuNSA3LjVMNS40IDkuNkw3LjUgMTQuNUw5LjYgOS42TDE0LjUgNy41TDkuNiA1LjRaIiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0yMS44MDAxIDE2LjQwMTZMMTkuMTAwMSAxMC4xMDE2TDE2LjQwMDEgMTYuNDAxNkwxMC4xMDAxIDE5LjEwMTZMMTYuNDAwMSAyMS44MDE2TDE5LjEwMDEgMjguMTAxNkwyMS44MDAxIDIxLjgwMTZMMjguMTAwMSAxOS4xMDE2TDIxLjgwMDEgMTYuNDAxNloiIGZpbGw9Im5vbmUiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+") !important; mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOSAyOSI+PHBhdGggZD0iTTkuNiA1LjRMNy41IDAuNUw1LjQgNS40TDAuNSA3LjVMNS40IDkuNkw3LjUgMTQuNUw5LjYgOS42TDE0LjUgNy41TDkuNiA1LjRaIiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0yMS44MDAxIDE2LjQwMTZMMTkuMTAwMSAxMC4xMDE2TDE2LjQwMDEgMTYuNDAxNkwxMC4xMDAxIDE5LjEwMTZMMTYuNDAwMSAyMS44MDE2TDE5LjEwMDEgMjguMTAxNkwyMS44MDAxIDIxLjgwMTZMMjguMTAwMSAxOS4xMDE2TDIxLjgwMDEgMTYuNDAxNloiIGZpbGw9Im5vbmUiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+") !important; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } /* Search modal — Ask AI suggestion row: sparkles in muted gray, centered with the suggestion text (was brand blue + top-aligned → looked high). */ [data-component-part="search-ask-ai-item"] > svg:first-of-type { width: 16px !important; height: 16px !important; flex-shrink: 0 !important; align-self: center !important; margin-top: 0 !important; color: transparent !important; fill: none !important; stroke: none !important; /* Same muted gray as Ask Assistant button / search chrome. */ background-color: var(--muted-fg) !important; -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOSAyOSI+PHBhdGggZD0iTTkuNiA1LjRMNy41IDAuNUw1LjQgNS40TDAuNSA3LjVMNS40IDkuNkw3LjUgMTQuNUw5LjYgOS42TDE0LjUgNy41TDkuNiA1LjRaIiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0yMS44MDAxIDE2LjQwMTZMMTkuMTAwMSAxMC4xMDE2TDE2LjQwMDEgMTYuNDAxNkwxMC4xMDAxIDE5LjEwMTZMMTYuNDAwMSAyMS44MDE2TDE5LjEwMDEgMjguMTAxNkwyMS44MDAxIDIxLjgwMTZMMjguMTAwMSAxOS4xMDE2TDIxLjgwMDEgMTYuNDAxNloiIGZpbGw9Im5vbmUiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+") !important; mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOSAyOSI+PHBhdGggZD0iTTkuNiA1LjRMNy41IDAuNUw1LjQgNS40TDAuNSA3LjVMNS40IDkuNkw3LjUgMTQuNUw5LjYgOS42TDE0LjUgNy41TDkuNiA1LjRaIiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0yMS44MDAxIDE2LjQwMTZMMTkuMTAwMSAxMC4xMDE2TDE2LjQwMDEgMTYuNDAxNkwxMC4xMDAxIDE5LjEwMTZMMTYuNDAwMSAyMS44MDE2TDE5LjEwMDEgMjguMTAxNkwyMS44MDAxIDIxLjgwMTZMMjguMTAwMSAxOS4xMDE2TDIxLjgwMDEgMTYuNDAxNloiIGZpbGw9Im5vbmUiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+") !important; -webkit-mask-size: contain !important; mask-size: contain !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; -webkit-mask-position: center !important; mask-position: center !important; } [data-component-part="search-ask-ai-item"] > svg:first-of-type * { visibility: hidden !important; } /* Search result rows — Mintlify default glyphs in a 16px slot; shared left edge for icon + label. Ask-AI suggestion row centers on one line. */ [data-component-part="search-item-icon"] { width: 16px !important; min-width: 16px !important; height: 16px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; margin: 0 !important; padding: 0 !important; } [data-component-part="search-item-icon"] svg { width: 16px !important; height: 16px !important; object-fit: contain; display: block; flex-shrink: 0; } [data-component-part="search-item"], [data-component-part="search-ask-ai-item"] { display: flex !important; align-items: flex-start !important; gap: 10px !important; padding-left: 8px !important; padding-right: 8px !important; box-sizing: border-box; } [data-component-part="search-ask-ai-item"] { align-items: center !important; } /* Search modal — Product filter menu icons (CDN). Menu items are menuitemradio under search-filter-content; order matches docs.json navigation.products. "All products" (first row) has no icon. Base ::before uses the generic Symmetry icon as fallback for any unmatched / future product rows; nth-child overrides below cover the known dedicated-icon products. :has(> :nth-child(8)) scopes to the Product list so the Versions filter (few rows, same data-component-part) is left alone. Icons are decorative CSS backgrounds (empty content) — product names remain the accessible name; no SR announcement of the icon. */ [data-component-part="search-filter-content"]:has(> :nth-child(8)) > [role="menuitemradio"]:nth-child(n+2) > span.truncate { display: inline-flex !important; align-items: center !important; gap: 8px !important; min-width: 0; } [data-component-part="search-filter-content"]:has(> :nth-child(8)) > [role="menuitemradio"]:nth-child(n+2) > span.truncate::before { content: ""; width: 16px; height: 16px; flex-shrink: 0; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url("https://assets.symmetry.com/icons/symmetry/v1/icon.png"); } [data-component-part="search-filter-content"]:has(> :nth-child(8)) > [role="menuitemradio"]:nth-child(2) > span.truncate::before { background-image: url("https://assets.symmetry.com/icons/symmetry-tax-engine/v1/icon.png"); } [data-component-part="search-filter-content"]:has(> :nth-child(8)) > [role="menuitemradio"]:nth-child(3) > span.truncate::before { background-image: url("https://assets.symmetry.com/icons/symmetry-guides/v1/icon.png"); } [data-component-part="search-filter-content"]:has(> :nth-child(8)) > [role="menuitemradio"]:nth-child(4) > span.truncate::before { background-image: url("https://assets.symmetry.com/icons/symmetry-payroll-forms/v1/icon.png"); } [data-component-part="search-filter-content"]:has(> :nth-child(8)) > [role="menuitemradio"]:nth-child(5) > span.truncate::before { background-image: url("https://assets.symmetry.com/icons/symmetry-i9/v1/icon.png"); } [data-component-part="search-filter-content"]:has(> :nth-child(8)) > [role="menuitemradio"]:nth-child(6) > span.truncate::before { background-image: url("https://assets.symmetry.com/icons/payroll-point/v1/icon.png"); } [data-component-part="search-filter-content"]:has(> :nth-child(8)) > [role="menuitemradio"]:nth-child(7) > span.truncate::before { background-image: url("https://assets.symmetry.com/icons/minimum-wage-finder/v1/icon.png"); } [data-component-part="search-filter-content"]:has(> :nth-child(8)) > [role="menuitemradio"]:nth-child(8) > span.truncate::before { background-image: url("https://assets.symmetry.com/icons/calculators-by-symmetry/v1/icon.png"); } /* Search modal — less curvy than More menu panel; uses --radius-sm / --rounded-search (apps-row / card chrome). Extra gutters vs Mintlify 6px. */ [data-component-part="search-modal"] { padding: 20px !important; border-radius: var(--rounded-search) !important; /* Caps total height so a long result list can't push the modal off screen — the list itself scrolls internally (see search-list below). */ max-height: 80vh !important; display: flex !important; flex-direction: column !important; } [data-component-part="search-header"] { padding-top: 4px !important; padding-left: 4px !important; padding-right: 4px !important; } /* Modal's own input — match the header search trigger's radius. */ [data-component-part="search-header"] input { border-radius: var(--rounded-search) !important; } /* Product/version filter dropdown — match .product-menu's radius. */ [data-component-part="search-filter-content"] { border-radius: var(--radius-xs) !important; } [data-component-part="search-list"] { padding-left: 4px !important; padding-right: 4px !important; padding-top: 10px !important; /* Grows with result count — scroll internally within the modal's max-height instead of pushing header/footer off screen. */ overflow-y: auto !important; min-height: 0 !important; } [data-component-part="search-footer"] { margin-left: 4px !important; margin-right: 4px !important; margin-bottom: 4px !important; padding-left: 8px !important; padding-right: 8px !important; padding-bottom: 8px !important; } /* Header search trigger — height matches Docs/Tickets/More pills (36px); radius: Mintlify ships rounded-xl (12px); use --rounded-search (--radius-sm). */ #search-bar-entry, #search-bar-entry-mobile { height: 36px !important; border-radius: var(--rounded-search) !important; } /* Search modal's own input container ships the same Mintlify rounded-2xl (16px) the header trigger did — match --rounded-search here too so opening the modal doesn't visibly change the search bar's roundness. */ [data-component-part="search-input-container"] { border-radius: var(--rounded-search) !important; } /* Home is mode:"custom" (frontmatter), which puts is-custom on #navbar — no product context there for product-subnav.js to match, so it never reaches the code that hides the native trigger, leaving it visible in the main header on that one page. Plain CSS instead of relying on JS branching for it. */ /* Fully replaced on desktop by our custom switcher (product-subnav.js), injected inline into Mintlify's .nav-tabs. Hide the native trigger at lg+ only — the mobile nav drawer still uses Mintlify's products-selector (restyled below to match .product-switcher / .product-menu). */ @media (min-width: 1024px) { [data-component-part="products-selector-trigger"] { display: none !important; } } /* Mobile nav drawer — native product trigger + dropdown: match desktop .product-switcher / .product-menu (radius-xs, border, Work Sans, item hover). The tabs dropdown (Product guides / API reference / …) sits right below the product trigger and gets the identical treatment so the two match. It has no data-component-part or other stable hook of its own — verified live via a headless browser — so it's matched structurally: the one aria-haspopup menu trigger inside #navigation-items that isn't the product trigger. Its open panel does carry a real class, `.mobile-nav-tabs-item`, on each row. */ @media (max-width: 1023px) { [role="dialog"] [data-component-part="products-selector-trigger"], [data-component-part="products-selector-trigger"].nav-dropdown-products-selector-trigger:not(.max-lg\:hidden), #navigation-items button[aria-haspopup="menu"]:not([data-component-part="products-selector-trigger"]) { display: flex; align-items: center; gap: 8px; width: 100%; height: auto; min-height: 36px; margin: 0 0 8px; padding: 6px 12px; font-family: "Work Sans", sans-serif; font-size: 14px; font-weight: 500; line-height: 1.25; color: var(--card-fg); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xs); box-shadow: none; } [role="dialog"] [data-component-part="products-selector-trigger"]:hover, [data-component-part="products-selector-trigger"].nav-dropdown-products-selector-trigger:not(.max-lg\:hidden):hover, #navigation-items button[aria-haspopup="menu"]:not([data-component-part="products-selector-trigger"]):hover { background: var(--white); border-color: color-mix(in srgb, var(--card-border) 60%, white); } [role="dialog"] [data-component-part="products-selector-trigger"] img, [data-component-part="products-selector-trigger"].nav-dropdown-products-selector-trigger:not(.max-lg\:hidden) img { width: 20px; height: 20px; flex-shrink: 0; } [role="dialog"] [data-component-part="products-selector-trigger"] > span, [data-component-part="products-selector-trigger"].nav-dropdown-products-selector-trigger:not(.max-lg\:hidden) > span, #navigation-items button[aria-haspopup="menu"]:not([data-component-part="products-selector-trigger"]) > span { flex: 1; min-width: 0; text-align: left; padding-left: 0; max-width: none; font-size: 14px; font-weight: 500; color: var(--card-fg); } /* Mobile native switcher caret — match .product-switcher / parent-size token. */ [role="dialog"] [data-component-part="products-selector-trigger"] > svg, [data-component-part="products-selector-trigger"].nav-dropdown-products-selector-trigger:not(.max-lg\:hidden) > svg, #navigation-items button[aria-haspopup="menu"]:not([data-component-part="products-selector-trigger"]) > svg { width: var(--sidebar-caret-parent-size); height: var(--sidebar-caret-parent-size); opacity: 0.6; flex-shrink: 0; margin-left: auto; transform: none; } /* Tabs dropdown panel — same chrome as the product-selector panel below. Scoped by content (.mobile-nav-tabs-item row class) since the panel itself has only a random base-ui id. */ [role="menu"]:has(.mobile-nav-tabs-item) { padding: 4px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xs); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); font-family: "Work Sans", sans-serif; overflow: hidden; } .mobile-nav-tabs-item { display: flex; align-items: center; width: 100%; padding: 8px; margin-bottom: 0; border-radius: var(--radius-xs); font-family: "Work Sans", sans-serif; font-size: 14px; font-weight: 500; color: var(--card-fg); text-decoration: none; background: transparent; } .mobile-nav-tabs-item:hover { background: #f3f4f6; } .mobile-nav-tabs-item:focus-visible { background: #f3f4f6; outline: none; box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--brand-blue); } .mobile-nav-tabs-item[data-active="true"] { color: var(--brand-navy); } .mobile-nav-tabs-item svg { width: var(--sidebar-caret-parent-size); height: var(--sidebar-caret-parent-size); } /* Drawer-only Symmetry wordmark — redundant with the header logo behind it once the drawer opens; the product trigger below already orients you. Scoped to #mobile-nav (the drawer's own stable id, verified live) so this can't reach into some other [role="dialog"] that also renders the logo — the "More actions" popover doesn't, but nothing enforces that. */ #mobile-nav a:has(> img.nav-logo) { display: none !important; } /* Dropdown panel — same chrome as .product-menu */ [data-component-part="products-selector-content"], [data-radix-menu-content]:has([data-component-part="products-selector-item"]), [role="menu"]:has([data-component-part="products-selector-item"]) { padding: 4px !important; background: var(--white) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-xs) !important; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important; font-family: "Work Sans", sans-serif !important; overflow: hidden !important; } /* Mintlify wraps each item in — zero the anchor chrome so only the inner menuitem carries .product-menu-item padding. */ [data-component-part="products-selector-content"] > a, [role="menu"]:has([data-component-part="products-selector-item"]) > a { display: block !important; padding: 0 !important; margin: 0 0 2px !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; text-decoration: none !important; } [data-component-part="products-selector-content"] > a:last-child, [role="menu"]:has([data-component-part="products-selector-item"]) > a:last-child { margin-bottom: 0 !important; } [data-component-part="products-selector-item"], [data-radix-menu-content]:has([data-component-part="products-selector-item"]) [role="menuitem"], [role="menu"]:has([data-component-part="products-selector-item"]) [role="menuitem"] { display: flex !important; align-items: center !important; gap: 12px !important; width: 100% !important; padding: 8px !important; margin-bottom: 0 !important; border-radius: var(--radius-xs) !important; font-family: "Work Sans", sans-serif !important; font-size: 14px !important; font-weight: 500 !important; color: var(--card-fg) !important; text-decoration: none !important; background: transparent !important; } [data-component-part="products-selector-item"]:hover, [data-component-part="products-selector-content"] a:hover, [data-radix-menu-content]:has([data-component-part="products-selector-item"]) [role="menuitem"]:hover, [role="menu"]:has([data-component-part="products-selector-item"]) [role="menuitem"]:hover { background: #f3f4f6 !important; } [data-component-part="products-selector-item"]:focus-visible, [data-component-part="products-selector-content"] a:focus-visible { background: #f3f4f6 !important; outline: none !important; box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--brand-blue) !important; } [data-component-part="products-selector-item"] img, [data-component-part="products-selector-content"] a img, [role="menu"]:has([data-component-part="products-selector-item"]) img { width: 23px !important; height: 23px !important; object-fit: contain !important; flex-shrink: 0 !important; } [data-component-part="products-selector-item-title"], [data-component-part="products-selector-item"] .product-name { font-size: 14px !important; font-weight: 500 !important; color: var(--card-fg) !important; } /* Hide Mintlify product descriptions — desktop .product-menu is name+icon only. Mintlify uses a class (not data-component-part) for the description line. */ [data-component-part="products-selector-item-description"], .nav-dropdown-products-selector-item-description { display: none !important; } /* Flatten Mintlify's description grid → single-row flex like .product-menu-item */ [data-component-part="products-selector-item"] { display: flex !important; grid-template-columns: none !important; grid-template-rows: none !important; } [data-component-part="products-selector-item"] > .flex.flex-col { flex: 1 1 auto !important; min-width: 0 !important; } .nav-dropdown-products-selector-item-title { font-size: 14px !important; font-weight: 500 !important; color: inherit !important; } [data-component-part="products-selector-item"][data-selected="true"], [data-component-part="products-selector-item"][aria-selected="true"] { color: var(--brand-navy) !important; } [data-component-part="products-selector-item"][data-selected="true"]:hover, [data-component-part="products-selector-item"][aria-selected="true"]:hover { background: transparent !important; } [data-component-part="products-selector-item"][data-selected="true"] > svg:last-child, [data-component-part="products-selector-item"][aria-selected="true"] > svg:last-child { width: 14px !important; height: 14px !important; color: var(--brand-blue) !important; flex-shrink: 0 !important; } } /* Assistant panel's left edge is a 1px resize-handle div (no id of its own) immediately before #chat-assistant-sheet — select it relative to that stable id instead of its own Tailwind utility classes. */ div:has(+ #chat-assistant-sheet) { background: var(--border) !important; } /* Static "Docs" label + divider after the logo — real DOM text (site-header.js) so AT names the link "Symmetry Docs" without CSS ::after concatenation. */ #navbar a:has(img.nav-logo) { display: inline-flex; align-items: center; } #navbar img.nav-logo { height: 32px !important; width: auto !important; max-width: none !important; -webkit-user-drag: none; user-select: none; } #navbar a:has(img.nav-logo) .sym-logo-label { margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--border); font-family: "Work Sans", sans-serif; font-size: 16px; font-weight: 500; line-height: 20px; color: var(--muted-fg); white-space: nowrap; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, var(--muted-fg) 40%, transparent); } /* No hover state on the "Docs" label by design — it's part of the logo link. */ /* Full-bleed bar; inner content aligns to #navbar logo left edge — logo row uses mx-4 ( img.nav-logo (confirmed live 2026-08-10). Keep both: either can show up depending on which markup a given page renders, and dropping either reintroduces a duplicate logo for that case. The footer-brand-logo row above this divider is unrelated custom markup from footer-brand.js and isn't touched by either selector. */ #footer div:has(> a[data-slot="context-menu-trigger"]) { display: none !important; } #footer div:has(> a.select-none > img.nav-logo) { display: none !important; } /* Native footer centers + truncates each column at md+; left-align and let labels wrap instead. */ #footer [class*="md:items-center"] { align-items: flex-start !important; } #footer a[class*="md:truncate"] { max-width: none !important; overflow: visible !important; text-overflow: unset !important; white-space: normal !important; } /* Hide footer links to apps the user isn't entitled to, using the same tags the More menu gates its tiles on. docs.json footer.links has no `requires` field, so the gate keys off the data-sym-tags list site-header.js publishes on . Phrased as "hide unless entitled" so it fails closed: these links are server-rendered, and data-sym-tags is absent until the user resolves. Hiding the drops it from the flex column cleanly. Every column keeps an ungated link, so no heading is left stranded above an empty column. */ html:not([data-sym-tags~="nexus_access"]) #footer a[href*="client-downloads.symmetry.com"], html:not([data-sym-tags~="stf_access"]) #footer a[href*="guides.symmetry.com"], html:not([data-sym-tags~="tax_notification"]) #footer a[href*="app.netsuite.com"], html:not([data-sym-tags~="dae_admin_access"]) #footer a[href*="auth0-delegated-admin"] { display: none !important; } /* Mintlify wraps breadcrumbs + title in `#header > div.mt-0.5.space-y-2.5`. Kill only the top margin (mt-0.5 = 2px); keep space-y-2.5 between crumbs/title. */ #header > div:has(> .breadcrumb-list) { margin-top: 0 !important; } /* Changelog pages' only crumb is the sidebar group name "Release year" — not useful on its own, so hide it rather than show a label with no info. */ [data-breadcrumb-title="Release year"] { display: none; } /* Article pages no longer get the homepage footer callout, which used to buffer last prose from the footer border. Homepage keeps .sym-landing + callout margins — skip padding there so the two don't stack. */ #content-area:not(:has(.sym-landing)) { padding-bottom: 4rem; } /* "Can't find what you need?" callout — homepage only, gated on signed-in user fields in index.mdx (end of .sym-landing). */ .footer-callout { margin-top: 4rem; margin-bottom: 3rem; display: flex; justify-content: center; } .footer-callout__pill { display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px 10px 16px; border-radius: 9999px; background: var(--brand-light-blue); border: 1px solid color-mix(in srgb, var(--brand-blue) 40%, transparent); font-size: 14px; color: var(--brand-navy); } .footer-callout__icon { width: 18px; height: 18px; color: var(--brand-blue); flex-shrink: 0; } .footer-callout__text { margin: 0; line-height: 1.4; } .footer-callout__menu { font-weight: 500; } .footer-callout__link { font-weight: 500; color: var(--brand-blue); text-decoration: underline; text-underline-offset: 2px; } .hub-footer { margin-top: 0; background: var(--footer-bg); border-top: 1px solid var(--navy-10); color: var(--navy-70); font-family: "Work Sans", sans-serif; } /* #footer is a Tailwind `flex flex-col items-center` container, which shrinks non-stretched children to content width and centers them — stretch ours to the full row width instead. */ .hub-footer .footer-brand, .hub-footer .footer-bottom { align-self: stretch; width: 100%; max-width: 1408px; margin: 0 auto; padding-left: 32px; padding-right: 32px; box-sizing: border-box; } @media (max-width: 640px) { .hub-footer .footer-brand, .hub-footer .footer-bottom { padding-left: 16px; padding-right: 16px; } } .hub-footer .footer-brand { padding-top: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--navy-10); } .hub-footer .footer-brand-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .hub-footer .footer-brand-logo { height: 36px !important; width: auto !important; max-width: none !important; } .hub-footer .footer-heart { width: 16px !important; height: 16px !important; fill: var(--brand-navy); flex: 0 0 auto; } .hub-footer .footer-partner { font-size: 24px; font-weight: 600; color: var(--brand-navy); } .hub-footer .footer-tagline { font-size: 16px; font-weight: 600; color: var(--brand-navy); } .hub-footer .footer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 40px; padding: 48px 0; } @media (min-width: 640px) { .hub-footer .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Native footer category titles ("Documentation", "Tax tools", ...) render as a plain
, not an h3 — the old ".footer-grid h3" selector never matched anything real. */ #footer p[class*="font-semibold"] { font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; color: var(--navy-70) !important; margin: 0 !important; } .hub-footer .footer-col { display: flex; flex-direction: column; gap: 12px; } .hub-footer a.footer-link { width: fit-content; font-size: 14px; color: var(--navy-70); text-decoration: none; transition: color 150ms ease; } .hub-footer a.footer-link:hover { color: var(--brand-navy); text-decoration: underline; } .hub-footer .footer-bottom { display: flex; flex-direction: column; gap: 16px; padding-top: 32px; padding-bottom: 32px; border-top: 1px solid var(--navy-10); } .hub-footer .footer-bottom-row { display: flex; flex-direction: column-reverse; gap: 20px; } @media (min-width: 640px) { .hub-footer .footer-bottom-row { flex-direction: row; align-items: center; justify-content: space-between; } } .hub-footer .footer-disclaimer-lines { display: flex; flex-direction: column; gap: 4px; } .hub-footer .footer-disclaimer { margin: 0; font-size: 13px; line-height: 1.5; color: var(--navy-60); } /* Rendered by statuspage-widget.js from status.symmetry.com's live summary API. Indicator classes match Statuspage's own values (none/minor/major/ critical); only "none" (all clear) is styled green — the rest fall back to an amber/red treatment via the shared status tokens. */ .hub-footer .statuspage { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--status-border); border-radius: 9999px; background: var(--status-bg); font-size: 13px; font-weight: 500; color: var(--status-fg); text-decoration: none; } .hub-footer .statuspage:hover { background: var(--status-bg-hover); } .hub-footer .statuspage .status-dot { position: relative; width: 8px; height: 8px; border-radius: 9999px; background: var(--status-dot); flex: 0 0 auto; } /* Pulsing "ping" ring — same mechanics as Tailwind's animate-ping, via a ::before so the widget's markup doesn't need a second dot element. */ .hub-footer .statuspage .status-dot::before { content: ""; position: absolute; inset: 0; border-radius: 9999px; background: inherit; animation: sym-status-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; } @keyframes sym-status-ping { 75%, 100% { transform: scale(2); opacity: 0; } } .hub-footer .statuspage-major, .hub-footer .statuspage-critical { border-color: color-mix(in srgb, #dc2626 30%, transparent); background: #fef2f2; color: #b91c1c; } .hub-footer .statuspage-major .status-dot, .hub-footer .statuspage-critical .status-dot { background: #dc2626; } .hub-footer .statuspage-minor { border-color: color-mix(in srgb, #d97706 30%, transparent); background: #fffbeb; color: #b45309; } .hub-footer .statuspage-minor .status-dot { background: #d97706; } .hub-footer .footer-bottom-left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } /* Copyright + legal use navy-70 (not -50/-60): 13px body needs ≥4.5:1 on --footer-bg; navy-50/60 only clear large-text / non-text thresholds. */ .hub-footer .footer-copyright { margin: 0; font-size: 13px; color: var(--navy-70); } .hub-footer .footer-legal { display: flex; gap: 24px; } .hub-footer a.legal-link { font-size: 13px; color: var(--navy-70); text-decoration: none; transition: color 150ms ease; } .hub-footer a.legal-link:hover { color: var(--brand-navy); text-decoration: underline; } /* Mintlify's native "advanced" footer on doc pages — restyled to match the .hub-footer palette; the brand row/status pill/legal bar above are decorated on separately (and identically) by footer-brand.js. */ .advanced-footer { background: var(--footer-bg); border-top: 1px solid var(--navy-10); } .advanced-footer :is(h3, [class*="title"], [class*="header"]) { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--navy-70); } .advanced-footer a { color: var(--navy-70); text-decoration: none; transition: color 150ms ease; } .advanced-footer a:hover { color: var(--brand-navy); text-decoration: underline; } /* ── §3 Page scopes ────────────────────────────────────────────────────── */ /* Home only: hide the chrome search so the hero owns it. */ body:has(.sym-landing) #search-bar-entry, body:has(.sym-landing) #search-bar-entry-mobile { display: none !important; } /* Home only: hide STE's native Mintlify tabs (Product guides / Release notes / References / Taxes). Mintlify surfaces the first product's tab bar on / even though the landing page has no product context. */ body:has(.sym-landing) #navbar div:has(> .nav-tabs) { display: none !important; } /* Home only, mobile: Mintlify's native mobile nav toggle (hamburger + page title) ships as its own h-14 row below the logo row, keyed off adjacency to Mintlify's row-1 wrapper since there's no docs.json hook to hide it. The homepage has no per-page sidebar worth opening and the title there just echoes the page's long SEO , so drop the whole row rather than relocate it — every other page keeps this row exactly as Mintlify ships it. */ @media (max-width: 1023px) { body:has(.sym-landing) #navbar .flex.items-center.lg\:px-12.h-16 + button { display: none; } /* Mintlify hardcodes pt-[120px] on the mobile content wrapper to clear its own two-row fixed header. Dropping the drawer's second row above shrinks the real header to a single h-16 (4rem) row, so match it. */ body:has(.sym-landing) #content-container > .pt-\[120px\] { padding-top: 4rem; } } /* Docs/Tickets/More, injected by site-header.js. Menus use native <details> (no React state available outside MDX). */ .sym-pill { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--muted-fg); text-decoration: none; white-space: nowrap; cursor: pointer; border: 1px solid transparent; transition: background-color 150ms ease, color 150ms ease; } .sym-pill svg { width: 16px; height: 16px; flex: 0 0 auto; } .sym-pill:hover { color: var(--brand-navy); } .sym-pill.is-current { background: var(--brand-light-blue); color: var(--brand-blue); } .sym-menu { position: relative; } .sym-menu > summary { list-style: none; } .sym-menu > summary::-webkit-details-marker { display: none; } .sym-menu[open] > summary.sym-pill { background: var(--accent-hover); color: var(--muted-fg); border-color: transparent; } .sym-menu__panel { position: absolute; top: calc(100% + 8px); background: var(--panel-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-panel); padding: 8px; z-index: 60; } .sym-more .sym-menu__panel { right: 0; } /* Avatar menu — trigger is the avatar plus a chevron; panel is right-aligned so it hangs under the avatar rather than running off the viewport. */ .sym-user { flex: 0 0 auto; } .sym-user__trigger { display: inline-flex; align-items: center; gap: 2px; cursor: pointer; border-radius: 999px; color: var(--muted-fg); } .sym-user__trigger:hover { color: var(--brand-navy); } .sym-user[open] .sym-user__trigger { color: var(--brand-navy); } .sym-user__trigger > svg { flex: 0 0 auto; transition: transform .15s ease; } .sym-user[open] .sym-user__trigger > svg { transform: rotate(180deg); } .sym-user__panel { right: 0; min-width: 260px; padding: 0; } .sym-user__identity { padding: 16px; border-bottom: 1px solid var(--border); } .sym-user__name { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--brand-navy); } .sym-user__sub { margin: 2px 0 0; font-size: 13px; line-height: 1.35; color: var(--muted-fg); overflow-wrap: anywhere; } .sym-user__logout { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; margin: 0; background: none; border: 0; border-radius: 0 0 var(--radius) var(--radius); font-size: 14px; line-height: 1.25; color: var(--fg); text-align: left; cursor: pointer; } .sym-user__logout > svg { flex: 0 0 auto; color: var(--muted-fg); } .sym-user__logout:hover { background: var(--accent-hover); } .sym-user__logout:hover > svg { color: var(--brand-navy); } .apps-panel { width: 560px; max-width: 92vw; } .apps-mega-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 4px; } .apps-group { padding: 4px; } .apps-group-label { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: rgba(11, 37, 64, .7); padding: 8px 8px 4px; margin: 0; } .apps-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius-sm); text-decoration: none; } .apps-row:hover { background: color-mix(in srgb, var(--brand-light-blue) 55%, transparent); } .apps-row.is-current { background: var(--brand-light-blue); } .apps-row-text { display: flex; flex-direction: column; min-width: 0; } .apps-row-name { font-size: 14px; line-height: 1.25; color: var(--fg); } .apps-row.is-current .apps-row-name { font-weight: 600; } .apps-row-caption { font-size: 12px; line-height: 1.35; color: var(--muted-fg); margin-top: 2px; } /* More-menu app icons: one fixed tile size for every row. Hosted PNGs own their artwork (some are full circles, some are shapes on transparent — never paint a brand-blue disc behind them). Stroke SVGs (rare fallback) still get the blue circle. */ .icon-tile { --icon-tile-size: 40px; width: var(--icon-tile-size); height: var(--icon-tile-size); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: transparent; color: var(--white); overflow: hidden; } .icon-tile:has(> svg) { background: var(--brand-blue); } .icon-tile svg { width: 20px; height: 20px; display: block; } .icon-tile img { width: var(--icon-tile-size); height: var(--icon-tile-size); object-fit: contain; display: block; } .sym-landing { font-family: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--fg); } /* Mintlify's .prose img rule force-adds margin-top/bottom: 2em to every image (`.prose :where(img):not(:where([class~=not-prose],...)))`), which throws off spacing on every custom image component on this page (product card logos, AI tool icons, CTA illustrations, hero art). Neutralize it once here instead of patching each image individually. */ .sym-landing img { margin: 0; } /* White until data-sym-auth resolves to "in" below — avoids flashing the signed-in blue background before auth state is known. */ .sym-hero { background: var(--white); border-bottom: 1px solid var(--border); } html[data-sym-auth="in"] .sym-hero { background: var(--brand-light-blue); } html[data-sym-auth="out"] .sym-hero { background: #F8F8F9; } .sym-hero__inner { max-width: 1408px; margin: 0 auto; padding: 3rem 2rem; } .sym-hero__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; } @media (min-width: 1024px) { .sym-hero__grid { grid-template-columns: 1.1fr 1fr; gap: 3rem; } } .sym-hero__content { min-width: 0; } .sym-hero__title { font-size: 1.5rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); margin: 0 0 1.5rem; } @media (min-width: 768px) { .sym-hero__title { font-size: 1.875rem; } } .sym-hero__caption { font-size: 0.875rem; font-weight: 600; color: var(--fg); margin: 0 0 0.5rem; } .sym-hero__search-row { display: flex; align-items: stretch; gap: 0.75rem; } .sym-searchbox { display: inline-flex; align-items: center; gap: 0.55rem; flex: 1 1 auto; min-width: 0; height: 3rem; background: var(--white); border: 1px solid var(--border); border-radius: var(--rounded-search); padding: 0 1.25rem; color: var(--muted-fg); cursor: pointer; font-size: 0.875rem; text-align: left; transition: border-color 150ms ease; } .sym-searchbox > span:not(.sym-searchbox__kbd) { min-width: 0; flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .sym-searchbox:hover { border-color: color-mix(in srgb, var(--card-border) 60%, white); } .sym-searchbox__kbd { margin-left: auto; flex: 0 0 auto; font-size: 0.72rem; color: var(--muted-fg); border: 1px solid var(--border); border-radius: 0.25rem; padding: 0.05rem 0.4rem; background: var(--surface); } .sym-hero__or { flex: 0 0 auto; display: flex; align-items: center; color: var(--muted-fg); font-size: 0.75rem; font-weight: 500; } .sym-btn-ai { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.5rem; height: 3rem; padding: 0 1.25rem; background: var(--brand-blue); color: var(--white); border: 1px solid transparent; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background 150ms ease; } .sym-btn-ai:hover { background: var(--brand-blue-hover); } .sym-hero__art-wrap { display: none; } @media (min-width: 1024px) { .sym-hero__art-wrap { display: flex; align-items: flex-end; justify-content: center; align-self: stretch; margin-bottom: -3rem; } } .sym-hero__art { width: 100%; max-width: 24rem; height: auto; } /* Mintlify auto-wraps every MDX <img> in its own zoom-on-click viewer (OptimizedImage/rmiz, injected as a <span data-rmiz> around the <img>) — not wanted for this decorative hero graphic. Disable the click trigger without touching the <img> itself, so lazy-loading/optimization stays. */ .sym-hero__art-wrap [data-rmiz] { pointer-events: none; } .sym-section { max-width: 1408px; margin: 0 auto; padding: 2.5rem 2rem calc(var(--space-4) * 3); } /* 48 bottom — clear space before footer */ .sym-section__title { font-size: 1.4rem; font-weight: 600; color: var(--brand-navy); margin: 0 0 2rem; } /* Native <Tabs> restyled as an underline tab bar (icons/switching stay Mintlify's own — only the look changes). Scroll horizontally on overflow instead of wrapping to a second row. Scoped to homepage (.sym-section) and in-article content (.prose) — not navbar .nav-tabs / product subnav. Icons optional (article tabs often omit). */ .sym-section [role="tablist"], .prose [role="tablist"] { flex-wrap: nowrap !important; align-items: flex-end; gap: 32px; border-bottom: 1px solid var(--card-border); margin-bottom: 32px; min-width: 0 !important; width: 100%; max-width: 100%; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .sym-section [role="tablist"] > *, .sym-section [data-component-part="tab-button"], .prose [role="tablist"] > *, .prose [data-component-part="tab-button"] { flex-shrink: 0 !important; } .sym-section [data-component-part="tab-button"], .prose [data-component-part="tab-button"] { padding: 0 4px 12px !important; margin-bottom: -1px !important; border-bottom: 2px solid transparent !important; font-size: 15px !important; font-weight: 600 !important; color: var(--card-muted) !important; transition: color 150ms, border-color 150ms; gap: 0 !important; } .sym-section [data-component-part="tab-button"]:hover, .prose [data-component-part="tab-button"]:hover { color: var(--card-fg) !important; } .sym-section [data-component-part="tab-button"][data-active="true"], .prose [data-component-part="tab-button"][data-active="true"] { color: var(--card-fg) !important; border-bottom-color: var(--brand-blue) !important; } .sym-section [data-component-part="tab-button"] .tab-icon, .prose [data-component-part="tab-button"] .tab-icon { width: 16px !important; height: 16px !important; margin-right: 0.5rem !important; background-color: var(--card-muted) !important; } .sym-section [data-component-part="tab-button"]:hover .tab-icon, .prose [data-component-part="tab-button"]:hover .tab-icon { background-color: var(--card-fg) !important; } .sym-section [data-component-part="tab-button"][data-active="true"] .tab-icon, .prose [data-component-part="tab-button"][data-active="true"] .tab-icon { background-color: var(--brand-blue) !important; } /* AI tools tab reuses the exact sparkle glyph from the hero's Ask AI button (Ico "sparkles"), swapped in over Mintlify's own FA sparkles mask. */ .sym-section [data-testid="tab-AI tools"] .tab-icon { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOSAyOSI+PHBhdGggZD0iTTkuNiA1LjRMNy41IDAuNUw1LjQgNS40TDAuNSA3LjVMNS40IDkuNkw3LjUgMTQuNUw5LjYgOS42TDE0LjUgNy41TDkuNiA1LjRaIiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0yMS44MDAxIDE2LjQwMTZMMTkuMTAwMSAxMC4xMDE2TDE2LjQwMDEgMTYuNDAxNkwxMC4xMDAxIDE5LjEwMTZMMTYuNDAwMSAyMS44MDE2TDE5LjEwMDEgMjguMTAxNkwyMS44MDAxIDIxLjgwMTZMMjguMTAwMSAxOS4xMDE2TDIxLjgwMDEgMTYuNDAxNloiIGZpbGw9Im5vbmUiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+") !important; mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOSAyOSI+PHBhdGggZD0iTTkuNiA1LjRMNy41IDAuNUw1LjQgNS40TDAuNSA3LjVMNS40IDkuNkw3LjUgMTQuNUw5LjYgOS42TDE0LjUgNy41TDkuNiA1LjRaIiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0yMS44MDAxIDE2LjQwMTZMMTkuMTAwMSAxMC4xMDE2TDE2LjQwMDEgMTYuNDAxNkwxMC4xMDAxIDE5LjEwMTZMMTYuNDAwMSAyMS44MDE2TDE5LjEwMDEgMjguMTAxNkwyMS44MDAxIDIxLjgwMTZMMjguMTAwMSAxOS4xMDE2TDIxLjgwMDEgMTYuNDAxNloiIGZpbGw9Im5vbmUiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+") !important; } .product-grid { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 768px) { .product-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(3, 1fr); } } .product-card { display: flex; flex-direction: column; height: 100%; background: var(--white); border: 1px solid var(--card-border); border-radius: 4px; padding: 24px; } .product-card__logo-link { display: block; width: fit-content; margin-bottom: 16px; border: none !important; text-decoration: none !important; transition: opacity 150ms; } .product-card__logo-link:hover { opacity: 0.8; } .product-card__logo-link [data-rmiz] { pointer-events: none; } .product-card__logo { display: block; height: 56px; width: auto; max-width: 85%; object-fit: contain; object-position: left; margin: 0 !important; } .product-card__desc { font-size: 14px; line-height: 1.375; color: var(--card-muted); margin: 0 0 20px; } .product-card__links { border-top: 1px solid var(--card-border); } .product-card__link { display: flex; align-items: center; gap: 10px; padding: 10px 8px; margin: 0 -8px; font-size: 14px !important; font-weight: 600 !important; color: var(--card-fg); text-decoration: none !important; border-bottom: 1px solid var(--card-border); transition: color 150ms, background 150ms; } .product-card__link:last-child { border-bottom: 0; } .product-card__link:hover { color: var(--brand-blue); background: color-mix(in srgb, var(--brand-light-blue) 40%, transparent); border-bottom-width: 1px !important; } .product-card__link-icon { width: 16px; height: 16px; color: var(--card-icon); flex-shrink: 0; } .product-card__link span { flex: 1; } /* order: 1 keeps the chevron last even when a gated link's ::after lock (styles.css §"Gated links on public pages") would otherwise render after it in flex/DOM order — lock then chevron, chevron always flush right. */ .product-card__chevron { order: 1; width: 16px; height: 16px; color: var(--card-muted); transition: color 150ms, transform 150ms; } .product-card__link:hover .product-card__chevron { color: var(--brand-blue); transform: translateX(2px); } .product-card__cta { margin-top: 12px; width: fit-content; display: inline-flex; align-items: center; gap: 6px; font-size: 14px !important; font-weight: 600 !important; color: var(--brand-blue); text-decoration: none !important; border-bottom: none !important; } .product-card__cta:hover { text-decoration: underline !important; border-bottom: none !important; } /* "New" badge on AI tool cards — light-blue pill, matching the zendesk repo's NewBadge (bg-[#E8F7FF] text-primary uppercase). */ .badge-new { display: inline-flex; align-items: center; margin-left: 2px; padding: 2px 8px; border-radius: 9999px; background: var(--brand-light-blue); color: var(--brand-blue); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; white-space: nowrap; } /* STE payer badge — shared pill; title-row placement via PayerBadge JS clone. Writers: <PayerBadge type="employee|employer|both" /> after frontmatter. */ .payer-badge { display: inline-flex; align-items: center; flex-shrink: 0; padding: 5px 12px; border-radius: 9999px; font-size: 13px; font-weight: 500; line-height: 1.25; /* Reset Mintlify h1 tracking (-0.025em) — badge is injected into the title. */ letter-spacing: 0.01em; white-space: nowrap; border: 1px solid var(--payer-badge-border, var(--badge-blue-border)); background: var(--payer-badge-bg, var(--badge-blue-bg)); color: var(--payer-badge-fg, var(--badge-blue-fg)); } .payer-badge--employee { --payer-badge-bg: var(--badge-blue-bg); --payer-badge-fg: var(--badge-blue-fg); --payer-badge-border: var(--badge-blue-border); } .payer-badge--employer { --payer-badge-bg: var(--badge-violet-bg); --payer-badge-fg: var(--badge-violet-fg); --payer-badge-border: var(--badge-violet-border); } .payer-badge--both { --payer-badge-bg: var(--badge-green-bg); --payer-badge-fg: var(--badge-green-fg); --payer-badge-border: var(--badge-green-border); } /* Page title row: badge flows inline after the title text (not far-right). Use inline layout — not flex + width:max-content — so long h1s wrap inside the prose column instead of overflowing into the TOC. */ h1.has-payer-badge { display: block !important; min-width: 0; max-width: 100%; overflow-wrap: break-word; white-space: normal; } h1.has-payer-badge .payer-badge-title { display: inline; min-width: 0; max-width: 100%; overflow-wrap: break-word; white-space: normal; /* Gap before badge when inline — not margin-left on the badge, so a wrapped badge stays flush with the h1 left edge. */ margin-right: 0.75rem; } h1.has-payer-badge > .payer-badge { display: inline-flex; vertical-align: middle; margin-left: 0; } /* Hide in-flow fallback once the title clone is present (no-JS keeps fallback) */ #content-area:has(h1.has-payer-badge) .payer-badge--fallback, main:has(h1.has-payer-badge) .payer-badge--fallback { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .article-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; } @media (min-width: 640px) { .article-grid { grid-template-columns: 1fr 1fr; } } .article-list-card { background: var(--white); border: 1px solid var(--card-border); border-radius: 4px; padding: 16px; } .article-list-card__header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--card-border); } .article-list-card__title { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.25; color: var(--card-fg); } .article-list-card__count { font-size: 12px; color: var(--card-muted); white-space: nowrap; } .article-list-card__list { display: flex; flex-direction: column; } .article-list-card__link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; font-size: 14px; font-weight: 500; line-height: 1.375; color: var(--card-fg); text-decoration: none !important; border-bottom: 1px solid color-mix(in srgb, var(--card-border) 60%, transparent); transition: text-decoration-color 150ms; } .article-list-card__link:last-child { border-bottom: none !important; } .article-list-card__link:hover, .article-list-card__link:focus-visible { text-decoration: underline !important; } .article-list-card__chevron { flex-shrink: 0; color: var(--card-muted); opacity: 0; transition: opacity 150ms; } .article-list-card__link:hover .article-list-card__chevron { opacity: 1; } .article-list-card__link--static { cursor: default; } .article-list-card__link--static:hover, .article-list-card__link--static:focus-visible { text-decoration: none !important; } /* Compliance tab (index.mdx): stacked Tax Radar column + articles card */ .compliance-stack { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; } @media (min-width: 640px) { .compliance-stack { grid-template-columns: 2fr 1fr; } } .radar-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } .radar-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--card-border); border-radius: var(--radius-sm); padding: 18px 20px 16px; text-decoration: none !important; /* Hover chrome via shared a.card / .radar-card rule near .card below. */ } .radar-card__head { display: flex; align-items: center; gap: 10px; } .radar-card__flag { width: 24px; height: 16px; flex-shrink: 0; border-radius: 2px; } .radar-card__title { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.25; color: var(--card-fg); } .radar-card__desc { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--card-muted); } .radar-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .radar-card__tag { padding: 2px 8px; border-radius: 4px; background: var(--tile-bg); font-size: 11px; font-weight: 500; line-height: 1.5; color: var(--muted-fg); } .radar-card__cta { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 16px; font-size: 14px; font-weight: 600; color: var(--brand-blue); } .radar-card:hover .radar-card__cta { text-decoration: underline; } .ai-grid { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 768px) { .ai-grid { grid-template-columns: repeat(2, 1fr); } } .ai-card { display: flex; align-items: flex-start; gap: 16px; background: var(--white); border: 1px solid var(--card-border); border-radius: 4px; padding: 20px 20px 16px; } .ai-card__icon { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; margin-top: 2px; } .ai-card__body { min-width: 0; } .ai-card__name { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--card-fg); margin: 0; } .ai-card__desc { font-size: 14px; line-height: 1.25; color: var(--card-muted); margin: 4px 0 0; } .ai-card__actions { display: flex; align-items: center; gap: 16px; margin-top: 12px; } .ai-card__launch { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; font-size: 12px; font-weight: 500; color: var(--brand-navy); background: var(--white); border: 1px solid color-mix(in srgb, var(--brand-navy) 20%, transparent); border-radius: 6px; text-decoration: none !important; transition: background 150ms, border-color 150ms; } .ai-card__launch:hover { background: color-mix(in srgb, var(--brand-navy) 2%, transparent); border-color: color-mix(in srgb, var(--brand-navy) 25%, transparent); } .ai-card__launch-icon { width: 12px; height: 12px; } .ai-card__docs { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--brand-blue); text-decoration: none !important; border-bottom: none !important; } .ai-card__docs:hover { text-decoration: underline !important; border-bottom: none !important; } .ai-card__arrow { width: 16px; height: 16px; } .help-cta-row { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 24px; } @media (min-width: 1024px) { .help-cta-row { grid-template-columns: 1fr 1fr; } } .help-cta-card { display: flex; min-height: 122px; background: var(--white); border: 1px solid var(--card-border); border-radius: 4px; overflow: hidden; } .cta-img { width: 192px; flex-shrink: 0; } /* STL: natural size, bottom-aligned, slightly inset */ .cta-img-stl { align-self: flex-end; padding-top: 10px; padding-right: 16px; } .cta-img-stl img { width: 100%; height: auto; display: block; } /* Support: fills the column height, bottom-anchored, right edge cropped */ .cta-img-support { align-self: stretch; display: flex; align-items: flex-end; padding-left: 4px; } .cta-img-support img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; clip-path: inset(0 15px 0 0); } .cta-body { flex: 1; min-width: 180px; display: flex; flex-direction: column; justify-content: center; padding: 10px 16px 14px; } .cta-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--brand-navy); } .cta-desc { margin: 4px 0; font-size: 13px; color: var(--card-muted); } .cta-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .cta-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; font-size: 12px; font-weight: 500; color: var(--brand-navy); text-decoration: none !important; background: var(--white); border: 1px solid color-mix(in srgb, var(--brand-navy) 20%, transparent); border-radius: 6px; transition: background-color 150ms, border-color 150ms; cursor: pointer; } .cta-btn:hover { background: color-mix(in srgb, var(--brand-navy) 2%, transparent); border-color: color-mix(in srgb, var(--brand-navy) 25%, transparent); } .cta-btn svg { width: 12px; height: 12px; } .sym-page-wrap { max-width: 72rem; margin: 0 auto; padding: 2.5rem 1.5rem 5rem; } #navbar { z-index: 30; } /* Reused by #sidebar (via Mintlify's --mintlify-slot-header-height) and by #content-side-layout (TOC sticky wrapper — no extension point, overridden). */ :root { /* Gap between sticky TOC top and the second nav (native tabs). */ --toc-sticky-gap: var(--space-4); /* 16px — clears second nav, not touching */ /* * Shared dock point for sticky content headers (RN index thead, * .ste-tc-filters, etc.). Default = navbar height only. Do NOT fold in * --topbar-tabs-height or --mintlify-slot-header-height here — Mintlify * sets --topbar-tabs-height * to 3rem even on pages with no visible tabs (homepage), which left a * large gap under #navbar. product-subnav.js measures the real chrome * bottom (#navbar already includes native tabs when present) and writes * an exact px value. */ --docs-sticky-top: 4rem; /* Left-nav layout tokens (avoid raw pad px in selectors). One label column per depth, shared by a subgroup and its plain-leaf siblings. Each depth nudges only half a caret-width past the previous one; a subgroup's own caret sits a full caret+gap left of its label, one column back. */ --sidebar-caret-slot: 12px; --sidebar-caret-gap: 4px; --sidebar-depth-step: calc(var(--sidebar-caret-slot) + var(--sidebar-caret-gap)); /* 16 */ --sidebar-subgroup-step: calc(var(--sidebar-caret-slot) / 2 + 2px); /* 8 — roughly half a caret-width, per depth */ --sidebar-caret-top-nudge: 2px; /* optical nudge past padding-top, shared by every caret */ --sidebar-caret-left-0: var(--space-3); /* 12 — top-level category caret */ --sidebar-pad-category-x: calc(var(--sidebar-caret-left-0) + var(--sidebar-depth-step)); /* 28 — top-level category label */ --sidebar-pad-subgroup-x: calc(var(--sidebar-pad-category-x) + var(--sidebar-subgroup-step)); /* 36 — depth 1: top-level leaf; first-level subgroup label */ --sidebar-pad-subgroup-nested-x: calc(var(--sidebar-pad-subgroup-x) + var(--sidebar-subgroup-step)); /* 44 — depth 2: leaf under a first-level subgroup; nested subgroup label */ --sidebar-pad-subgroup-nested-2-x: calc(var(--sidebar-pad-subgroup-nested-x) + var(--sidebar-subgroup-step)); /* 52 — depth 3: leaf under a nested subgroup */ --sidebar-pad-item-y: 6px; --sidebar-link-pad-right: calc(var(--space-3) * 2); /* 24 — right pad for link/button text, clears scrollbar gutter */ --sidebar-caret-parent-size: 11px; /* shared by every sidebar-tree caret at every depth — no separate nested-size variant */ --sidebar-caret-stroke: 1.5; --sidebar-caret-color: #5B6470; /* API method chips — slot sized for the common 3-letter verbs (GET/DEL), right-aligned so titles share one edge. Wider badges (POST/PATCH) overflow the slot rather than push every title right for them. */ --sidebar-method-font-size: 10px; --sidebar-method-letter-spacing: 0.4px; --sidebar-method-pad-y: 2px; --sidebar-method-pad-x: 4px; --sidebar-method-radius: 3px; --sidebar-method-gap: 6px; --sidebar-method-slot-width: 2.2em; /* ≈ GET/DEL at 10px + letter-spacing */ } /* Sticky TOC must clear header + second nav. Mintlify hardcodes top-[9.5rem] on #content-side-layout; without --toc-sticky-gap the TOC top edge sits flush against the tabs bottom when sticky. */ #content-side-layout { top: calc(var(--mintlify-slot-header-height, calc(4rem + var(--topbar-tabs-height, 0rem))) + var(--toc-sticky-gap)) !important; height: calc(100dvh - (var(--mintlify-slot-header-height, calc(4rem + var(--topbar-tabs-height, 0rem))) + var(--toc-sticky-gap))) !important; } /* Custom trigger + dropdown (built in product-subnav.js), replacing Mintlify's native product switcher entirely — its real panel is client-rendered only with no stable selectors to restyle from outside. Injected inline into Mintlify's `.nav-tabs` as the first item. */ .product-switcher-slot { flex-shrink: 0; align-self: center; position: relative; } .nav-tabs-switcher-slot { margin-right: 24px; } .product-switcher { align-self: center; display: flex; align-items: center; width: 240px; padding: 6px 12px; font-family: "Work Sans", sans-serif; font-size: 14px; font-weight: 500; color: var(--card-fg); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xs); white-space: nowrap; cursor: pointer; transition: color 150ms, border-color 150ms; } .product-switcher:hover { border-color: color-mix(in srgb, var(--card-border) 60%, white); } .product-switcher:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--brand-blue); } .product-switcher img { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; } .product-switcher-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 1; text-align: left; padding-left: 8px; } /* Product-switcher dropdown chevron — same glyph size as parent sidebar caret (not a sidebar expand caret; shares the size token for visual consistency). */ .product-switcher .chevron { width: var(--sidebar-caret-parent-size); height: var(--sidebar-caret-parent-size); opacity: 0.6; flex-shrink: 0; } .product-menu { position: absolute; top: 100%; left: 0; margin-top: 4px; width: 300px; max-height: 60vh; overflow-y: auto; padding: 4px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xs); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); font-family: "Work Sans", sans-serif; z-index: 50; } .product-menu-label { padding: 6px 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(17, 24, 39, 0.7); } .product-menu-separator { height: 1px; margin: 4px -4px; background: var(--border); } .product-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border-radius: var(--radius-xs); text-decoration: none !important; cursor: pointer; margin-bottom: 2px; color: var(--card-fg); } .product-menu-item:last-child { margin-bottom: 0; } .product-menu-item:hover { background: #f3f4f6; } .product-menu-item:focus-visible { background: #f3f4f6; outline: none; box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--brand-blue); } .product-menu-item.is-active { color: var(--brand-navy); } .product-menu-item.is-active:hover { background: transparent; } .product-menu-item img { width: 23px; height: 23px; object-fit: contain; flex-shrink: 0; } .product-name { font-size: 14px; font-weight: 500; min-width: 0; flex: 1; } .product-menu-item .check { width: 14px; height: 14px; color: var(--brand-blue); flex-shrink: 0; } /* Tax Radar Airtable embeds — cover the Airtable logo/control footer. */ .airtable-embed-wrap { position: relative; } .airtable-embed-wrap .airtable-embed { display: block; border: 0; width: 100%; aspect-ratio: 16 / 9; } .airtable-embed-wrap .airtable-embed-footer-cover { position: absolute; bottom: 0; left: 0; right: 0; height: 25px; background-color: #fafafa; pointer-events: none; } /* Native decorative fade at the top of the scrollable sidebar content. */ #sidebar div.bg-linear-to-b { display: none !important; } /* Kill left borders / nest guide lines in the left nav (Mintlify border-l + leftover ::before rails). Unlayered !important beats @layer utilities border-l; targeted selectors — not #sidebar *. */ #sidebar, #sidebar-content, #sidebar ul, #sidebar li, #sidebar li[data-group-tag], #sidebar li[data-group-tag] > ul, #sidebar .sidebar-group { border-left: none !important; border-left-width: 0 !important; } #sidebar li[data-group-tag] > ul::before, #sidebar li[data-group-tag] > ul::after, #sidebar li[data-group-tag] > ul > li[data-group-tag] > ul::before, #sidebar li[data-group-tag] > ul > li[data-group-tag] > ul::after, #sidebar ul ul::before, #sidebar ul ul::after { content: none !important; display: none !important; background: none !important; width: 0 !important; height: 0 !important; } /* Top-level category — sidebar-manual-expand.js adds this class (plus a .nav-category-chevron span) to the native header div, which already lays out as a flex row via its own classes. Its font-semibold (600) sits inside @layer components — layer order reverses for !important, so this has to sit in @layer utilities too or it loses regardless of specificity. */ @layer utilities { #sidebar .sidebar-group-header, #sidebar .sidebar-group-header .sidebar-title, #sidebar .sidebar-group-header .sidebar-title span { font-weight: 400 !important; color: var(--brand-navy) !important; } #sidebar .sidebar-group-header:hover, #sidebar .sidebar-group-header:hover .sidebar-title, #sidebar .sidebar-group-header:hover .sidebar-title span { color: #000 !important; } /* Beat Mintlify text-xs / 0.75rem (12px) — left-nav cats + links share --sidebar-font-size. Exclude method badges: the INNER chip is also a <span>, and `#sidebar a span:not(.method-nav-pill)` used to win (1,2,2) over `.method-nav-pill *` (1,1,1) — forcing label size on GET/POST. */ #sidebar, #sidebar .nav-category, #sidebar .nav-category .sidebar-title, #sidebar .nav-category .sidebar-title span, #sidebar .sidebar-group-header, #sidebar .sidebar-group-header .sidebar-title, #sidebar .sidebar-group-header .sidebar-title span, #sidebar li[data-group-tag] > button, #sidebar li[data-group-tag] > button > div:first-child, #sidebar a, #sidebar a span:not(.method-nav-pill):not(.method-pill) { font-size: var(--sidebar-font-size) !important; } /* Sidebar method chips — match (1,2,2) of the nav span rule and win by source order. Path-bar / article .method-pill keep Mintlify sizing. */ #sidebar a .method-nav-pill, #sidebar a .method-nav-pill span:not(.method-nav-pill) { font-size: var(--sidebar-method-font-size) !important; line-height: 1.15 !important; letter-spacing: var(--sidebar-method-letter-spacing) !important; font-weight: 400 !important; } /* Category label left inset via --sidebar-pad-category-x (sidebar origin + pad). Native pl-4 needs @layer utilities to win over Mintlify. */ #sidebar .nav-category { padding-left: var(--sidebar-pad-category-x) !important; } } /* Expandable carets: absolute slot at `left: var(--sidebar-caret-left-0)`. Category header must be full-width — otherwise absolute `left` is relative to a shrink-wrapped box, not the sidebar's left edge. */ #sidebar .nav-category { position: relative !important; z-index: 0; display: flex !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; align-items: center; justify-content: space-between; cursor: pointer; border-radius: 6px; background: transparent !important; /* Equal Y pad so labels sit centered in the row (not cramped on bottom). */ padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; padding-right: var(--sidebar-link-pad-right) !important; margin-bottom: 2px !important; font-size: var(--sidebar-font-size) !important; /* 13px — match links, not 12/14 */ line-height: 1.2 !important; transition: background-color 150ms; } /* First top-level block: pull it in line with article eyebrow / TOC. Later blocks stay 10px. In-flow only — do not change --mintlify-slot-header-height (sticky dock point). Space by POSITION under #navigation-items, not by whether a block happens to be a decorated .nav-category. API-reference tabs put bare, undecorated <ul> lists first (Overview, and on most products a lone Postman-setup link) ahead of the first real group (Endpoints) — div:has(> .nav-category) never matched those bare <ul>s, so they sat flush at 0 margin against the tabs above, while the intended "first group" gap landed instead on Endpoints, wherever it fell in the list. Same selector, positional instead of type-based, gives every top-level block — bare or decorated — the same spacing rhythm regardless of page type. */ #sidebar #navigation-items > *:first-child { margin-top: calc(1rem + 6px) !important; } #sidebar #navigation-items > * + * { margin-top: 10px !important; } /* Two bare, unnested single-page articles back to back (e.g. Overview then a lone Postman-setup link) — the 10px above is sized for separating actual groups; between two plain articles it read as an odd gap where a real list has none (items sharing one ul.sidebar-group rely on their own --sidebar-pad-item-y padding alone, no margin). Match that instead. */ #sidebar #navigation-items > ul.sidebar-group + ul.sidebar-group { margin-top: 0 !important; } #sidebar div:has(> .nav-category[aria-expanded="true"]) { margin-bottom: 2px !important; } #sidebar .nav-category:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--brand-blue); } #sidebar .nav-category-chevron { position: absolute !important; left: var(--sidebar-caret-left-0) !important; /* Top-aligned with the label's first line, not centered on the whole (possibly multi-line, wrapped) row. */ top: calc(var(--space-2) + var(--sidebar-caret-top-nudge)) !important; bottom: auto !important; width: var(--sidebar-caret-slot) !important; height: var(--sidebar-caret-slot) !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; /* glyph sits at the slot's label-side edge */ flex-shrink: 0; color: var(--sidebar-caret-color); pointer-events: none; /* clicks hit the full header target */ } #sidebar .nav-category-chevron svg { /* Top-level parent caret — slightly ≥ nested (small optical size is priority). */ width: var(--sidebar-caret-parent-size) !important; height: var(--sidebar-caret-parent-size) !important; max-width: var(--sidebar-caret-parent-size) !important; max-height: var(--sidebar-caret-parent-size) !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; flex-shrink: 0; stroke-width: var(--sidebar-caret-stroke) !important; transform-origin: center center; transition: transform 120ms ease-out; } #sidebar .nav-category[aria-expanded="true"] .nav-category-chevron svg { transform: rotate(90deg); } /* Top-level category on the active page's path — weighted like the active article, above the 400 baseline. Keyed to the active page, not open state. div:has() reaches the header via its wrapper (header + list are sibling children of it), since :has() can't inspect a following sibling directly. Must sit in @layer utilities or it loses to the base rule above despite higher specificity — see the layering note up top. */ @layer utilities { #sidebar div:has(> .nav-category):has(a[aria-current="page"]) > .nav-category, #sidebar div:has(> .nav-category):has(a[aria-current="page"]) > .nav-category .sidebar-title, #sidebar div:has(> .nav-category):has(a[aria-current="page"]) > .nav-category .sidebar-title span { font-weight: var(--weight-medium) !important; } } #sidebar .nav-category:hover .nav-category-chevron svg { color: #000; } /* Kill nest-wrapper / scroll-viewport right inset — Mintlify's scroll viewport ships pr-8, which otherwise shrinks every row's width unevenly. Re-enable a classic gutter/thin bar so Windows non-overlay scrollbars reserve track space. */ #sidebar [data-component-part="scroll-area-viewport"] { padding-right: 0 !important; /* Keep the last nav rows from sitting flush on the page footer / logo band. */ padding-bottom: calc(var(--space-4) * 2 + var(--space-2)) !important; /* 40 */ scrollbar-gutter: stable; scrollbar-width: thin !important; /* override base-ui-disable-scrollbar (none) */ } #sidebar [data-component-part="scroll-area-viewport"]::-webkit-scrollbar { width: 12px; } #sidebar [data-component-part="scroll-area-viewport"]::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--brand-navy) 25%, transparent); border-radius: 6px; } #sidebar [data-component-part="scroll-area-viewport"]::-webkit-scrollbar-track { background: transparent; } #sidebar .sidebar-group, #sidebar .sidebar-group-header, #sidebar li[data-group-tag], #sidebar li[data-group-tag] > ul { padding-right: 0 !important; margin-right: 0 !important; } #sidebar .sidebar-group-header { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Grouping node toggle — article-like row; expands like a category. :is(#sidebar, #navigation-items) so the mobile drawer's nav tree (its own #navigation-items copy, outside #sidebar — see comment below) matches too. */ :is(#sidebar, #navigation-items) li[data-group-tag] > button { position: relative !important; z-index: 0; display: flex; width: 100%; box-sizing: border-box; align-items: center; justify-content: space-between; gap: 8px; padding: var(--sidebar-pad-item-y) var(--sidebar-link-pad-right) var(--sidebar-pad-item-y) var(--sidebar-pad-subgroup-x) !important; border: 0; border-radius: 6px; background: transparent !important; font-family: "Work Sans", sans-serif; font-size: var(--sidebar-font-size) !important; font-weight: 400 !important; line-height: 1.375 !important; color: var(--sidebar-fg) !important; text-align: left; cursor: pointer; transition: background-color 150ms; } /* Native Mintlify caret — same absolute-slot approach as .nav-category-chevron, sitting a full caret+gap left of this button's own label, one column back. Guide groups use a direct svg child; OpenAPI groups wrap it in a trailing div/span (h-[1lh] flex…). Kill Mintlify -mr-0.5 / w-2 / size-3 so slot edges match parent. */ :is(#sidebar, #navigation-items) li[data-group-tag] > button > svg:last-child, :is(#sidebar, #navigation-items) li[data-group-tag] > button > div:last-child:has(> svg), :is(#sidebar, #navigation-items) li[data-group-tag] > button > span:last-child:has(> svg), :is(#sidebar, #navigation-items) li[data-group-tag] > button [class*="h-[1lh]"]:has(> svg) { position: absolute !important; left: calc(var(--sidebar-pad-subgroup-x) - var(--sidebar-depth-step)) !important; /* Top-aligned with the label's first line, not centered on the whole (possibly multi-line, wrapped) row. */ top: calc(var(--sidebar-pad-item-y) + var(--sidebar-caret-top-nudge)) !important; bottom: auto !important; width: var(--sidebar-caret-slot) !important; height: var(--sidebar-caret-slot) !important; margin: 0 !important; padding: 0 !important; flex-shrink: 0; color: var(--sidebar-caret-color) !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; /* glyph's left edge matches a sibling non-group link's text start */ pointer-events: none; } /* Nested group toggle (e.g. a group two levels deep) — same logic one level further: its caret sits a full step left of ITS OWN label column. */ :is(#sidebar, #navigation-items) li[data-group-tag] > ul > li[data-group-tag] > button > svg:last-child, :is(#sidebar, #navigation-items) li[data-group-tag] > ul > li[data-group-tag] > button > div:last-child:has(> svg), :is(#sidebar, #navigation-items) li[data-group-tag] > ul > li[data-group-tag] > button > span:last-child:has(> svg), :is(#sidebar, #navigation-items) li[data-group-tag] > ul > li[data-group-tag] > button [class*="h-[1lh]"]:has(> svg) { left: calc(var(--sidebar-pad-subgroup-nested-x) - var(--sidebar-depth-step)) !important; } :is(#sidebar, #navigation-items) li[data-group-tag] > button > svg:last-child { /* Direct svg sits in the slot — same size at every depth; depth is signaled by indentation (--sidebar-subgroup-step above), not glyph size. */ width: var(--sidebar-caret-parent-size) !important; height: var(--sidebar-caret-parent-size) !important; max-width: var(--sidebar-caret-parent-size) !important; max-height: var(--sidebar-caret-parent-size) !important; min-width: 0 !important; min-height: 0 !important; /* Keep slot's margin-top for vertical center; kill Mintlify -mr-0.5 only. */ margin-right: 0 !important; margin-left: 0 !important; stroke-width: var(--sidebar-caret-stroke) !important; } :is(#sidebar, #navigation-items) li[data-group-tag] > button > div:last-child:has(> svg) > svg, :is(#sidebar, #navigation-items) li[data-group-tag] > button > span:last-child:has(> svg) > svg, :is(#sidebar, #navigation-items) li[data-group-tag] > button [class*="h-[1lh]"]:has(> svg) > svg { width: var(--sidebar-caret-parent-size) !important; height: var(--sidebar-caret-parent-size) !important; max-width: var(--sidebar-caret-parent-size) !important; max-height: var(--sidebar-caret-parent-size) !important; min-width: 0 !important; min-height: 0 !important; margin-right: 0 !important; /* override Mintlify -mr-0.5 */ margin-left: 0 !important; flex-shrink: 0; stroke-width: var(--sidebar-caret-stroke) !important; } :is(#sidebar, #navigation-items) li[data-group-tag] > button svg path { stroke-width: var(--sidebar-caret-stroke) !important; } :is(#sidebar, #navigation-items) li[data-group-tag] > button svg { color: var(--sidebar-caret-color) !important; /* Match .nav-category-chevron's rotation speed — override Mintlify's own (slower, inconsistent-feeling) default transition duration. */ transition: transform 120ms ease-out !important; } :is(#sidebar, #navigation-items) li[data-group-tag] > button:hover, :is(#sidebar, #navigation-items) li[data-group-tag] > button:active { background: transparent !important; color: #000 !important; } :is(#sidebar, #navigation-items) li[data-group-tag] > button:hover svg { color: #000 !important; } :is(#sidebar, #navigation-items) li[data-group-tag] > button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--brand-blue); } /* Nested group toggle — label one column past the first-level group's own label (shared with that group's leaf children, below); its caret sits a full step left, in the first-level group's column. */ :is(#sidebar, #navigation-items) li[data-group-tag] > ul > li[data-group-tag] > button { padding-left: var(--sidebar-pad-subgroup-nested-x) !important; } /* Sidebar article links — depth via pad tokens only. Default column is --sidebar-pad-subgroup-x: a leaf directly under a top category (e.g. "State taxes overview") is a sibling of that category's subgroups (e.g. "State Income Tax (SIT)"), so it aligns with them. Active pill: left inset + right pad clears the ::before highlight edge. :is(#sidebar, #navigation-items) so the mobile drawer's copy matches. */ :is(#sidebar, #navigation-items) a { display: block; min-width: 0; padding: var(--sidebar-pad-item-y) var(--sidebar-link-pad-right) var(--sidebar-pad-item-y) var(--sidebar-pad-subgroup-x) !important; border-radius: 6px; font-family: "Work Sans", sans-serif; font-size: var(--sidebar-font-size) !important; font-weight: 400 !important; line-height: 1.375; color: var(--sidebar-fg) !important; text-decoration: none !important; white-space: normal; overflow-wrap: break-word; hyphens: none; } /* A page can sit directly under #navigation-items (e.g. Overview, or a lone Postman-setup link) instead of nested inside a category — its ul.sidebar-group is a direct child of #navigation-items, unlike nested items whose ul.sidebar-group sits one level deeper inside a category's wrapper div. These aren't indented under anything, so they should align with category labels (--sidebar-pad-category-x), not a nested item's deeper column. */ #navigation-items > ul.sidebar-group > li > a { padding-left: var(--sidebar-pad-category-x) !important; } /* Beat Mintlify nowrap/truncate on nested label spans; keep method badges on one line. */ :is(#sidebar, #navigation-items) a span:not(.method-nav-pill):not(.method-pill) { white-space: normal !important; overflow-wrap: break-word !important; hyphens: none !important; min-width: 0; } /* Underline on hover, no background tint (native hover:bg-gray-600/5 needs explicitly clearing) */ :is(#sidebar, #navigation-items) a:hover { background: transparent !important; color: #000 !important; text-decoration: underline !important; } :is(#sidebar, #navigation-items) a:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--brand-blue); } /* Mobile drawer's nav tree (#navigation-items, inside its own [role="dialog"] portal) duplicates #sidebar's content but not its id, so its active item ships Mintlify's native bg-primary/10 pill instead of ours — same aria-current="page" marker, so it gets the identical treatment here. */ #sidebar a[aria-current="page"], #navigation-items a[aria-current="page"] { background: transparent !important; color: var(--brand-blue) !important; font-weight: var(--weight-medium) !important; } #sidebar a[aria-current="page"]:hover, #navigation-items a[aria-current="page"]:hover { text-decoration: none !important; } /* 1st nesting level (child of a group toggle) — shares its column with a nested subgroup at this depth (above), so leaf and subgroup siblings line up. */ :is(#sidebar, #navigation-items) li[data-group-tag] > ul > li > a { padding-left: var(--sidebar-pad-subgroup-nested-x) !important; } /* 2nd nesting level (child of a group nested inside another group) — same logic, one depth further. */ :is(#sidebar, #navigation-items) li[data-group-tag] > ul > li[data-group-tag] > ul > li > a { padding-left: var(--sidebar-pad-subgroup-nested-2-x) !important; } /* Right-side TOC — match the left nav's font size */ #table-of-contents { font-size: var(--sidebar-font-size); } #table-of-contents h2 { margin-bottom: 8px; } #table-of-contents h2 button { color: var(--card-muted) !important; } /* TOC caption: keep the list icon, hide "On this page" visually (sr-only). */ #table-of-contents h2 button > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Hide h3+ from TOC */ #table-of-contents .toc-item .toc-item { display: none; } /* API operation links — flex row: fixed method slot + wrapping title. */ #sidebar a:has(.method-nav-pill) { display: flex !important; align-items: flex-start !important; gap: var(--sidebar-method-gap) !important; } #sidebar a:has(.method-nav-pill) > div:first-child:has(.method-nav-pill) { height: 1lh !important; min-height: 1lh !important; width: var(--sidebar-method-slot-width) !important; min-width: var(--sidebar-method-slot-width) !important; max-width: var(--sidebar-method-slot-width) !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; flex-shrink: 0 !important; } #sidebar a:has(.method-nav-pill) > div:last-child { flex: 1 1 0%; min-width: 0; } #sidebar a:has(.method-nav-pill) .method-nav-pill, #sidebar a:has(.method-nav-pill) .method-nav-pill.w-8 { display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; width: auto !important; min-width: 0 !important; max-width: none !important; flex-shrink: 0 !important; white-space: nowrap !important; text-align: right !important; } #sidebar a:has(.method-nav-pill) .method-nav-pill > span { display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; padding: var(--sidebar-method-pad-y) var(--sidebar-method-pad-x) !important; border-radius: var(--sidebar-method-radius) !important; font-size: var(--sidebar-method-font-size) !important; line-height: 1.15 !important; letter-spacing: var(--sidebar-method-letter-spacing) !important; font-weight: 400 !important; white-space: nowrap !important; text-align: right !important; } /* Method badges — no underline (type size/weight live in @layer utilities). */ .method-nav-pill, .method-pill { text-decoration: none !important; text-decoration-line: none !important; } /* Inactive sidebar method badges — AA text contrast (≥4.5:1) without changing backgrounds. Mintlify mutes non-current pills via opacity / mid-tone text; restore full opacity and darken the existing hue. */ #sidebar a:not([aria-current="page"]) .method-nav-pill { opacity: 1 !important; color: color-mix(in srgb, currentColor 72%, #000 28%) !important; } /* Method-link hover: underline the title only — never the POST/GET badge (parent `#sidebar a:hover { text-decoration: underline }` would paint through the pill). */ #sidebar a:has(.method-nav-pill):hover, #sidebar a:has(.method-nav-pill):focus-visible { text-decoration: none !important; } #sidebar a:has(.method-nav-pill):hover > div:last-child > :not(.method-nav-pill), #sidebar a:has(.method-nav-pill):focus-visible > div:last-child > :not(.method-nav-pill) { text-decoration: underline !important; } #sidebar a:has(.method-nav-pill):hover .method-nav-pill, #sidebar a:has(.method-nav-pill):focus-visible .method-nav-pill, .method-nav-pill:hover, .method-pill:hover { text-decoration: none !important; text-decoration-line: none !important; } /* API playground — single path-bar frame (method + path + Try it). Mintlify nests border-standard on an outer card (p-1.5) AND an inner path group; keep one frame, drop the inner border, pad the outer. IMPORTANT: scope to div — Mintlify also puts id="api-playground-input" on the modal Bearer <input>, whose inline padding-left clears the absolute "Bearer" prefix. A bare #id { padding:0 } overlays the placeholder ("eBearer earer token"). */ div#api-playground-input { border: none !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; border-radius: 0 !important; margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important; } /* Outer frame: includes Try it. Less outer mt/mb; more inner x/y pad. Scoped to on-page playground cards (not Try it modal). */ [id^="api-playground"] div.flex.flex-col.border-standard:has(> .flex > .tryit-button), div.flex.flex-col.border-standard.rounded-2xl:has(> .flex > .tryit-button):has(.method-pill) { margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important; /* Prefer cascade over Mintlify p-1.5 — no !important so utilities can still win if needed. */ padding: var(--space-2); /* 8 */ border-radius: var(--radius-sm) !important; border: 1px solid var(--card-border) !important; box-sizing: border-box !important; } /* Inner path group only — no second frame. Transparent bg only on on-page playground wrappers. Modal path field keeps gray via Mintlify bg-gray-50 + dialog nth-child(2) tile-bg. */ div#api-playground-input > div:has(.tryit-button) .group:has(> .method-pill), [id^="api-playground"] div.flex.flex-col:has(.tryit-button) > .flex > .group:has(> .method-pill), div.flex.flex-col.border-standard:has(> .flex > .tryit-button) > .flex > .group:has(> .method-pill) { border: none !important; box-shadow: none !important; border-radius: var(--radius-sm) !important; padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; padding-left: var(--space-1) !important; background: transparent !important; } /* Try-it modal's path bar isn't reachable by the more specific selectors above (different dialog-portal ancestry, not the on-page playground wrappers) — its own Mintlify padding (p-1.5, i.e. 6px top/bottom/left, 0 right) shifts the row's alignment when the endpoints-menu-trigger dropdown opens next to it. Only the vertical padding causes the shift; left/right stay as-is. Lower specificity than the rule above, so on-page instances are unaffected. */ .group:has(> .method-pill) { padding-top: 0 !important; padding-bottom: 0 !important; } /* Shared path-row chrome (page + modal): drop nested border, keep radius. */ div:has(> .method-pill):has(+ .tryit-button), div.group:has(> .method-pill):has(+ .tryit-button) { border: none !important; box-shadow: none !important; border-radius: var(--radius-sm) !important; } /* Path text ("/v1/payCalc") sits top-aligned instead of centered — Mintlify's base-ui ScrollArea viewport has no display/align-items of its own, so its content (taller than the text) doesn't center vertically by default. Scoped to the method-pill's own scroll area, not every ScrollArea on the page (code blocks reuse the same [data-component-part], and don't want this). */ .group:has(> .method-pill) [data-component-part="scroll-area-viewport"] { display: flex; align-items: center; } /* Path-bar / op-page method badges — tinted chrome (Mintlify “inactive” pills). Compact type + extra x-pad; not Mintlify text-sm / rounded-lg. */ .method-pill { font-size: 12px !important; font-weight: 600 !important; line-height: 1.25 !important; letter-spacing: 0.02em !important; padding: 2px 8px !important; border-radius: var(--radius-sm) !important; } /* Try-it modal's "switch endpoint" trigger only sets a min-width (Tailwind min-w-80) — the selected operation's label (e.g. "Returns minimum wage rates by location...") can be long enough to grow past it, pushing the path bar next to it and shifting the whole row's alignment whenever the current selection's text length changes. Fix the width instead of just flooring it; the label's own .truncate class handles the overflow once its box can no longer grow. */ #endpoints-menu-trigger > div { width: 20rem !important; max-width: 20rem !important; } /* Force solid “active” pills → same tinted style as the path bar / inactive nav chips (avoids solid + tinted side-by-side in the Try it modal). */ .method-pill.bg-\[\#2AB673\], .method-pill.bg-\[\#2AB673\].text-\[\#FFFFFF\] { background-color: rgb(74 222 128 / 0.2) !important; /* green-400/20 */ color: rgb(21 128 61) !important; /* green-700 */ } .method-pill.bg-\[\#3064E3\], .method-pill.bg-\[\#3064E3\].text-\[\#FFFFFF\] { background-color: rgb(96 165 250 / 0.2) !important; color: rgb(29 78 216) !important; /* blue-700 */ } .method-pill.bg-\[\#C28C30\], .method-pill.bg-\[\#C28C30\].text-\[\#FFFFFF\] { background-color: rgb(250 204 21 / 0.2) !important; color: rgb(161 98 7) !important; /* yellow-700 */ } .method-pill.bg-\[\#CB3A32\], .method-pill.bg-\[\#CB3A32\].text-\[\#FFFFFF\] { background-color: rgb(248 113 113 / 0.2) !important; color: rgb(185 28 28) !important; /* red-700 */ } .method-pill.bg-\[\#9341FB\], .method-pill.bg-\[\#9341FB\].text-\[\#FFFFFF\] { background-color: rgb(192 132 252 / 0.2) !important; color: rgb(126 34 206) !important; /* purple-700 */ } .method-pill.bg-\[\#0e7490\], .method-pill.bg-\[\#0e7490\].text-\[\#FFFFFF\] { background-color: rgb(34 211 238 / 0.2) !important; color: rgb(14 116 144) !important; /* cyan-700 */ } .method-pill.bg-\[\#DA622B\], .method-pill.bg-\[\#DA622B\].text-\[\#FFFFFF\] { background-color: rgb(251 146 60 / 0.2) !important; color: rgb(194 65 12) !important; /* orange-700 */ } .method-pill.bg-\[\#BD30D3\], .method-pill.bg-\[\#BD30D3\].text-\[\#FFFFFF\] { background-color: rgb(232 121 249 / 0.2) !important; color: rgb(162 28 175) !important; /* fuchsia-700 */ } /* OpenAPI schema property rows — Mintlify uses py-6 (24) per field; tighten. */ .object-param-field > div.py-6, .primitive-param-field > div.py-6, .array-param-field > div.py-6, .object-param-field > .py-6, .primitive-param-field > .py-6, .array-param-field > .py-6 { padding-top: var(--space-3) !important; /* 12 */ padding-bottom: var(--space-3) !important; } /* Nested child-attribute panels — denser than top-level fields. */ .expandable-content .object-param-field > div.py-6, .expandable-content .primitive-param-field > div.py-6, .expandable-content .array-param-field > div.py-6, [data-component-part="expandable-content"] .object-param-field > div.py-6, [data-component-part="expandable-content"] .primitive-param-field > div.py-6, [data-component-part="expandable-content"] .array-param-field > div.py-6 { padding-top: var(--space-2) !important; /* 8 */ padding-bottom: var(--space-2) !important; } /* “Show/Hide child attributes” control — less vertical chrome. */ .expandable > details > summary, details:has(+ .expandable-content) > summary, .expandable summary { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; } /* Try it modal — Mintlify sticky + body already share px-4 gutters. Keep dialog padding at 0 (extra pad double-insets the triad vs body). */ [role="dialog"]:has(.method-pill) { border-radius: var(--radius) !important; padding: 0 !important; box-sizing: border-box !important; /* clip horizontal bleed only — overflow:hidden was shaving the dropdown's top border */ overflow-x: clip; overflow-y: auto; } [role="dialog"]:has(.method-pill) .method-pill { font-size: 11px !important; border-radius: var(--radius-sm) !important; padding-top: 4px !important; padding-bottom: 4px !important; } /* Sticky top chrome — Mintlify is sticky + bg-background-light (opaque). Do NOT leave transparent: scrolled Authorization/Body text shows through. Path field can still carry its own --tile-bg chip below. */ [role="dialog"]:has(.method-pill) .sticky.top-0 { background-color: var(--white) !important; background: var(--white) !important; overflow: visible !important; } /* Top request bar — no extra pad/gap; Mintlify owns spacing between controls. */ [role="dialog"]:has(.method-pill) div.flex:has(> button):has(.method-pill) { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; /* do not set gap — restore Mintlify default between dropdown and path */ border-radius: var(--radius-sm) !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; background-color: transparent !important; background: transparent !important; align-items: stretch !important; overflow: visible !important; } /* Header triad — equal h-9 row; Mintlify dropdown ships overflow:hidden + py-0.5 (taller + clips top border). Path chip was shorter (32px vs 36px Send). The :first-child (endpoints-menu-trigger) carries Mintlify's own "hidden lg:block" — it's meant to disappear below lg (1024px), where the path bar's own scroll-area already lets you switch endpoints inline. display:flex !important with no breakpoint gate overrode that native hide, forcing it visible (and overflowing next to the path bar/Send button) on mobile. Gate to lg+ so mobile keeps Mintlify's own behavior. */ @media (min-width: 1024px) { [role="dialog"]:has(.method-pill) div.flex:has(> button):has(.method-pill) > :first-child { height: 2.25rem !important; /* Mintlify h-9 */ min-height: 2.25rem !important; max-height: 2.25rem !important; box-sizing: border-box !important; overflow: visible !important; display: flex !important; align-items: center !important; } } [role="dialog"]:has(.method-pill) div.flex:has(> button):has(.method-pill) > :nth-child(2) { height: 2.25rem !important; /* Mintlify h-9 */ min-height: 2.25rem !important; max-height: 2.25rem !important; box-sizing: border-box !important; overflow: visible !important; display: flex !important; align-items: center !important; } /* 2nd header control = path/endpoint field — gray chip on opaque sticky strip. */ [role="dialog"]:has(.method-pill) div.flex:has(> button):has(.method-pill) > :nth-child(2) { background-color: var(--tile-bg) !important; background: var(--tile-bg) !important; border-radius: var(--radius-sm) !important; } [role="dialog"]:has(.method-pill) [class*="rounded-2xl"], [role="dialog"]:has(.method-pill) [class*="rounded-xl"] { border-radius: var(--radius-sm) !important; } /* Modal accordion sections — Mintlify uses [data-testid^="api-input-section-"] > [role="button"] header + content div (not <details>). Open headers carry rounded-t-2xl / border-b-0!; closed headers carry rounded-2xl. */ [role="dialog"]:has(.method-pill) [data-testid^="api-input-section-"] [role="button"], [role="dialog"]:has(.method-pill) [data-testid^="api-input-section-"] .border-standard { border-color: var(--border) !important; } /* Closed section header — full radius on all corners. */ [role="dialog"]:has(.method-pill) [data-testid^="api-input-section-"] [role="button"].rounded-2xl { border-radius: var(--radius-sm) !important; } /* Open section header — top corners only; square bottom to meet content. */ [role="dialog"]:has(.method-pill) [data-testid^="api-input-section-"] [role="button"][class*="rounded-t-"], [role="dialog"]:has(.method-pill) [data-testid^="api-input-section-"] [role="button"][class*="border-b-0"] { border-top-left-radius: var(--radius-sm) !important; border-top-right-radius: var(--radius-sm) !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } /* Open section content — zero top radius to meet the header above (Mintlify rounded-b-xl left TL/TR=4px → notch); bottom corners match the header's --radius-sm so the section's top and bottom curves agree. */ [role="dialog"]:has(.method-pill) [data-testid^="api-input-section-"] > div:not([role="button"]) { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; border-bottom-left-radius: var(--radius-sm) !important; border-bottom-right-radius: var(--radius-sm) !important; border-color: var(--border) !important; } /* Nested body object cards (e.g. context / homeAddress) — same border as outer, not Mintlify border-gray-50 (too light). */ [role="dialog"]:has(.method-pill) [data-testid^="api-input-"].border, [role="dialog"]:has(.method-pill) [data-testid^="api-input-"][class*="border-gray-50"], [role="dialog"]:has(.method-pill) .border.border-gray-50.rounded-xl, [role="dialog"]:has(.method-pill) [class*="border-gray-50"][class*="rounded-xl"] { border-color: var(--border) !important; border-radius: var(--radius-sm) !important; } /* Nested object JSON editor (e.g. context.payCalc) — card ships py-0 so {} sits flush; add outer + inner inset using --space-* tokens. */ [role="dialog"]:has(.method-pill) [data-testid^="api-input-"]:not([data-testid^="api-input-section-"]):has(textarea) { padding: var(--space-3) !important; } [role="dialog"]:has(.method-pill) [data-testid^="api-input-"]:not([data-testid^="api-input-section-"]) textarea { padding: var(--space-2) var(--space-3) !important; box-sizing: border-box !important; } /* Nested object accordion headers — same open/closed radius rules as outer sections. */ [role="dialog"]:has(.method-pill) [data-testid^="api-input-"]:not([data-testid^="api-input-section-"]) [role="button"][class*="rounded-t-"], [role="dialog"]:has(.method-pill) [data-testid^="api-input-"]:not([data-testid^="api-input-section-"]) [role="button"][class*="border-b-0"] { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } [role="dialog"]:has(.method-pill) [data-testid^="api-input-"]:not([data-testid^="api-input-section-"]) > div:not([role="button"]) { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; border-bottom-left-radius: var(--radius-sm) !important; border-bottom-right-radius: var(--radius-sm) !important; } /* "Add new property" / "Add an item" — secondary (.cta-btn), not primary blue. */ [role="dialog"]:has(.method-pill) button.flex.text-playground-input.w-fit { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 4px 12px !important; font-size: 12px !important; font-weight: 500 !important; color: var(--brand-navy) !important; background: var(--white) !important; border: 1px solid color-mix(in srgb, var(--brand-navy) 20%, transparent) !important; border-radius: var(--radius-sm) !important; box-shadow: none !important; } [role="dialog"]:has(.method-pill) button.flex.text-playground-input.w-fit:hover { background: color-mix(in srgb, var(--brand-navy) 2%, transparent) !important; border-color: color-mix(in srgb, var(--brand-navy) 25%, transparent) !important; } /* Try it — brand blue + radius; compact type/icon to balance path bar. */ .tryit-button, button.tryit-button, tryit-button { background-color: var(--brand-blue) !important; background: var(--brand-blue) !important; color: var(--white) !important; border-radius: var(--radius-sm) !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.25 !important; padding: 5px var(--space-4) !important; gap: 6px !important; /* icon–label gap */ opacity: 1 !important; } .tryit-button svg, button.tryit-button svg, tryit-button svg { width: 11px !important; height: 11px !important; flex-shrink: 0; } .tryit-button:hover, button.tryit-button:hover, tryit-button:hover { background-color: var(--brand-blue-hover) !important; background: var(--brand-blue-hover) !important; opacity: 1 !important; } .tryit-button:focus-visible, button.tryit-button:focus-visible, tryit-button:focus-visible { outline: none !important; box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--brand-blue) !important; } /* Modal Send — x-padding only (size/weight from shared .tryit-button rule). */ [role="dialog"]:has(.method-pill) div.flex:has(> button):has(.method-pill) > button.tryit-button { padding: 0 var(--space-4) !important; } [role="dialog"]:has(.method-pill) div.flex:has(> button):has(.method-pill) > button.tryit-button svg { width: 11px !important; height: 11px !important; } /* Nested (2nd-level) bullet list markers — native bullets are a solid ::before dot (background-color) at every depth; second-level swaps to an outline instead of another solid dot, keeping the same size/position via box-sizing:border-box so a border doesn't grow the box. */ .prose ul ul > li::before { background-color: transparent !important; border: 1.5px solid rgb(var(--gray-600)); box-sizing: border-box; } /* Mono/code text in article content, 1px smaller than the surrounding body copy. */ .prose code { font-size: calc(1em - 2px); } /* Article table column headers — slightly heavier than body (600, not 700). */ .prose table thead th { font-weight: 600 !important; } /* Code block background + radius */ .code-block { border-radius: var(--radius-sm) !important; overflow: hidden; } /* Fix the fade overlay in the top-right */ [data-fade-overlay] { background: var(--code-bg-gray) !important; border-top-right-radius: var(--radius-sm) !important; border-bottom-right-radius: var(--radius-sm) !important; } [data-component-part="code-block-root"] { border-radius: var(--radius-sm) !important; background-color: var(--code-bg-gray) !important; } [data-component-part="code-block-root"] pre.shiki { background-color: var(--code-bg-gray) !important; } [data-floating-buttons] button { background-color: var(--code-bg-gray) !important; } /* API request/response example cards — Mintlify #request-example / #response-example ship rounded-2xl (16px); match code-block / card chrome. */ #request-example, #response-example, .code-group { border-radius: var(--radius-sm) !important; border-color: var(--card-border) !important; background-color: var(--code-bg-gray) !important; overflow: hidden; } /* Article body links — native styling uses border-bottom (not text-decoration) as its underline, widening it on hover. Swapped for a plain underline that doesn't change on hover, with color matching the surrounding text instead of the native blue accent. Excludes .sym-landing (home page) — its custom cards (product cards, AI cards, article-list cards) sit inside the same native .prose wrapper as real article content (confirmed by the .sym-landing img margin reset above needing the same scoping), so this !important rule was winning over those components' own underline-only-on-hover rules by source order and hiding their hover state entirely. */ .prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *, .sym-landing, .sym-landing *)) { color: inherit !important; border-bottom: none !important; text-decoration: underline !important; } /* Native <Card>/<Columns> component — rounded-2xl (16px) is too curvy. */ .card { border-radius: 4px !important; } /* Shared whole-card link hover — Mintlify <Card href> + Tax Radar cards. Homepage shells (.product-card, .article-list-card, .ai-card, .help-cta-card) are not whole-card links; they keep inner-link hover only. */ a.card, .radar-card { transition: border-color 150ms, box-shadow 150ms; } a.card:hover, a.card:focus-visible, .radar-card:hover, .radar-card:focus-visible { border-color: var(--card-hover-border) !important; box-shadow: var(--card-hover-shadow) !important; } /* Accordion — match card/panel chrome (--radius-sm + --border). Items are always square (see below); the group clips them to its own rounded corners, so only the top/bottom edge items appear rounded, automatically, in every open/closed state — no first/last-child or open-state radius rules needed. */ accordion-group, .accordion-group { border-radius: var(--radius-sm) !important; border-color: var(--border) !important; overflow: hidden; } accordion, .accordion { border-radius: 0 !important; border-color: var(--border) !important; } [data-component-part="accordion-button"] { padding: 14px 12px 14px 8px !important; border-radius: inherit !important; } /* Inner hover-bg wrapper ships its own native radius (rounded-xl) that doesn't match our override, peeking out at the corners on hover. */ [data-component-part="accordion-button"] > * { border-radius: inherit !important; } [data-component-part="accordion-title"] { font-size: 15px !important; } /* OpenAPI / API page expandable chrome — Mintlify ships rounded-xl/2xl. */ .object-param-field details, .primitive-param-field details, .array-param-field details, .expandable, [data-component-part="expandable"], .expandable > details, details:has(+ .expandable-content), .api-playground-panel details, [id^="api-playground"] details, /* Excludes Accordion's <details> — same native border/rounded-xl classes, but its own rules (above) handle per-item radius by position in the group. */ .prose details.border:not(.accordion, .accordion-group *, accordion, accordion-group *), .prose details[class*="rounded"]:not(.accordion, .accordion-group *, accordion, accordion-group *) { border-radius: var(--radius-sm) !important; } .object-param-field details > summary, .primitive-param-field details > summary, .array-param-field details > summary, .expandable > details > summary, details:has(+ .expandable-content) > summary { border-radius: var(--radius-sm) !important; } .object-param-field details[open] > summary, .primitive-param-field details[open] > summary, .array-param-field details[open] > summary, .expandable > details[open] > summary, details[open]:has(+ .expandable-content) > summary { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } /* Card icon tile (icon color is background-color, not fill — native uses a mask-image) */ .card [data-component-part="card-icon"] { display: flex !important; align-items: center; justify-content: center; width: 44px !important; height: 44px !important; margin-bottom: 16px; border-radius: 6px; background: var(--brand-light-blue) !important; } .card [data-component-part="card-icon"] svg { width: 20px !important; height: 20px !important; background-color: var(--brand-blue) !important; } /* Release-notes index pages (mode: wide / TOC off) — reclaim the TOC gutter so the table can stretch. Skip embedded homepage instances: Mintlify keeps inactive tab panels in the DOM, so :has(.rn-index) alone would widen the whole homepage whenever a signed-in user has the Release notes tab mounted. Mintlify still applies xl:w-[calc(100%-19rem)] on #content-area and a max-width on #content-container even when the TOC column is absent. */ @media (min-width: 1280px) { html:has(.rn-index:not(.rn-index--embedded)) #content-area { width: 100% !important; max-width: none !important; } html:has(.rn-index:not(.rn-index--embedded)) #content-container { max-width: none !important; width: 100% !important; flex: 1 1 auto !important; } html:has(.rn-index:not(.rn-index--embedded)) #content-side-layout { display: none !important; width: 0 !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; } } html:has(.rn-index:not(.rn-index--embedded)) #content-area, html:has(.rn-index:not(.rn-index--embedded)) #content-area .prose, html:has(.rn-index:not(.rn-index--embedded)) #content-area article, html:has(.rn-index:not(.rn-index--embedded)) #content-area [class*="max-w-"], html:has(.rn-index:not(.rn-index--embedded)) #content-container { max-width: none !important; } /* Callouts (<Info>/<Note>/<Tip>/<Warning>/<Check>/<Danger>) — variant is data-callout-type (not a per-variant class), icon/content are marked with data-component-part (not classes), colors are Tailwind utility classes applied directly on the element, hence !important throughout. */ .callout { display: flex !important; gap: 12px !important; margin: 16px 0 !important; padding: 14px 20px !important; border-radius: 4px !important; border-color: transparent !important; overflow: hidden; max-width: 48rem; font-family: "Work Sans", sans-serif; } .callout [data-component-part="callout-icon"] { flex-shrink: 0; width: 16px; margin-top: 2px; } .callout [data-component-part="callout-content"] { min-width: 0; font-size: 14px; line-height: 1.625; color: rgba(17, 24, 39, 0.85) !important; } .callout [data-component-part="callout-content"] p { margin: 0; } .callout [data-component-part="callout-content"] p + p { margin-top: 8px; } /* Same color as the surrounding text; underline at rest per the content style guide (links in paragraph text must be underlined, not just on hover — color alone isn't a reliable link signal). Letting the global .prose a underline rule apply here instead of overriding it to none. */ .callout [data-component-part="callout-content"] a { color: inherit !important; font-weight: 500; } .callout [data-component-part="callout-content"] code { background: rgba(17, 24, 39, 0.06); padding: 2px 6px; border-radius: 3px; font-family: ui-monospace, monospace; font-size: 0.9em; } .callout[data-callout-type="info"] { background: #E8F7FF !important; } .callout[data-callout-type="info"] [data-component-part="callout-icon"] svg { color: #0056B2 !important; } .callout[data-callout-type="note"] { background: #F8FAFC !important; border-color: #d1d5db !important; } .callout[data-callout-type="note"] [data-component-part="callout-icon"] svg { color: #6b7280 !important; } .callout[data-callout-type="tip"] { background: #E8F7FF !important; } .callout[data-callout-type="tip"] [data-component-part="callout-icon"] svg { color: #09274A !important; } .callout[data-callout-type="warning"] { background: var(--callout-warning-bg) !important; border-left: 2px solid var(--brand-tangerine) !important; border-radius: 0 !important; } /* Icon was #B47500 (~3.6:1) — fine for non-text UI (≥3:1); darken so it also clears AA if treated as text/glyph fill on the warning wash. */ .callout[data-callout-type="warning"] [data-component-part="callout-icon"] svg { color: var(--callout-warning-fg) !important; } .callout[data-callout-type="check"] { background: #F0FDF4 !important; } .callout[data-callout-type="check"] [data-component-part="callout-icon"] svg { color: #15803D !important; } .callout[data-callout-type="danger"] { background: #FEF2F2 !important; border-left: 2px solid #DC2626 !important; border-radius: 0 !important; } .callout[data-callout-type="danger"] [data-component-part="callout-icon"] svg { color: #B91C1C !important; } /* Steps (<Steps>/<Step>) — Symmetry ring badges replace Mintlify's flat gray circles. Prefer data-component-part over Tailwind class chains (live DOM classes drift). */ .steps, .step-container { font-family: inherit; } [data-component-part="step-line"] { width: 2px !important; background-color: var(--brand-sky-25) !important; background-image: none !important; /* last-step gray gradient → brand tint */ } [data-component-part="step-number"] > div { background-color: var(--white) !important; border: 2px solid var(--brand-sky) !important; color: var(--brand-blue) !important; font-weight: 600 !important; border-radius: 9999px !important; box-sizing: border-box; } /* Mintlify default is font-semibold (600) + gap under title; keep brand weight 600 and collapse title→content spacing. */ [data-component-part="step-title"] { font-weight: 600 !important; margin-bottom: 0 !important; } [data-component-part="step-content"] { margin-top: 0.125rem !important; } .dark [data-component-part="step-number"] > div { background-color: transparent !important; border-color: var(--brand-sky) !important; color: var(--white) !important; } .dark [data-component-part="step-line"] { background-color: color-mix(in srgb, var(--brand-sky) 35%, transparent) !important; } /* ─── STE Tax Catalog (Taxes tab landing) ─────────────────────────────── */ /* Spec: ui-spec taxes-page.md — filter bar + leveled tables. Full-width / no-TOC: same as RN index — mode:"wide" + .rn-index on root (shared #content-area / #content-side-layout rules above). */ .ste-tax-catalog { /* Filter chrome only — text/type inherit docs/Mintlify */ --ste-tc-chip-border: color-mix(in srgb, var(--brand-blue) 28%, var(--border)); --ste-tc-muted: var(--muted-fg); /* Table borders — §1 gray token (not chip/blue tints) */ --ste-tc-table-border: var(--border); /* not-prose + .rn-index drop prose table text-sm (~14px); restore it so catalog cells don't inherit body/rn 16px. */ font-size: 14px; margin: 0 0 2rem; } /* Beat .rn-index { max-width: 100% } — same ceiling as .sym-page-wrap so filters + section h2s + tables stay left-aligned on ultra-wide. */ .rn-index.ste-tax-catalog { max-width: 72rem; } .ste-tc-lede { font-size: 15px; color: var(--ste-tc-muted); line-height: 1.5; margin: 0 0 16px; } /* Sticky, condensing filter bar — pins under the docs header (reuses --docs-sticky-top, product-subnav.js's live-measured navbar bottom; see §1's "Reused by #sidebar..." note) and shrinks its controls while stuck, toggled by tax-catalog.jsx's IntersectionObserver. Stays white in both states — only a hairline + shadow announce the stuck state, no tint. */ /* Zero-height, non-sticky — the scroll-into-view target for filter/level changes (tax-catalog.jsx). .ste-tc-filters itself can't be the target: once pinned (position: sticky), its rect already satisfies "in view" at the sticky offset, so scrollIntoView on it becomes a no-op. This sibling always reflects the real, unpinned document position. */ .ste-tc-filters-sentinel { scroll-margin-top: calc(var(--docs-sticky-top) + 12px); } .ste-tc-filters { position: sticky; top: var(--docs-sticky-top); z-index: 20; display: flex; flex-wrap: nowrap; align-items: center; gap: 14px; padding: 12px 0; margin-bottom: 16px; background: var(--white); background-clip: padding-box; border-bottom: 1px solid transparent; transition: border-color 150ms ease, box-shadow 150ms ease; } .ste-tc-filters.is-stuck { border-bottom-color: var(--border); /* spread = -blur cancels bleed on left/right/top entirely (shrink then blur back out lands exactly on the original edge); only the y-offset leaves a visible band, underneath. */ box-shadow: 0 4px 12px -12px rgba(9, 39, 74, 0.4); } .ste-tc-filters-divider { width: 1px; height: 24px; background: var(--ste-tc-chip-border); margin: 0 2px; flex-shrink: 0; } .ste-tc-search { position: relative; display: flex; align-items: center; flex: 1 1 160px; min-width: 120px; max-width: 360px; } .ste-tc-search input { height: 38px; width: 100%; padding: 0 32px 0 12px; border: 1px solid var(--border); background: var(--white); /* Match docs search/form inputs — not medium/bold */ font-weight: 400; font-size: 14px; color: var(--card-fg); outline: none; border-radius: var(--rounded-search); } .ste-tc-search input::placeholder { color: var(--ste-tc-muted); font-weight: 400; opacity: 1; } .ste-tc-search input:focus, .ste-tc-search input:focus-visible { border-color: var(--brand-blue); } .ste-tc-search-clear { position: absolute; right: 8px; width: 22px; height: 22px; border: 0; background: transparent; color: var(--ste-tc-muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0; } .ste-tc-chips { display: flex; flex-wrap: nowrap; flex: 0 0 auto; gap: 6px; } .ste-tc-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 3px 12px; white-space: nowrap; border: 1px solid var(--ste-tc-chip-border); background: var(--white); font-weight: var(--weight-medium); font-size: 13px; color: var(--ste-tc-muted); cursor: pointer; border-radius: var(--radius-sm); } .ste-tc-chip-active { border-color: var(--brand-blue); background: var(--brand-blue); color: var(--white); } .ste-tc-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .ste-tc-section { margin-bottom: 28px; /* Clear full nav chrome (navbar ± tabs/subnav) when jumping to a section */ scroll-margin-top: calc(var(--docs-sticky-top) + 12px); } .ste-tc-empty { padding: 32px 0; color: var(--ste-tc-muted); font-size: 14px; } .ste-tc-empty-clear { padding: 0; font: inherit; font-weight: 500; color: var(--brand-blue); background: none; border: 0; text-decoration: underline; cursor: pointer; } .ste-tc-empty-clear:hover { color: var(--brand-navy); } .ste-tc-section h2 { font-size: 17px; font-weight: 600; margin: 0 0 8px; } /* `ste-tc-table` is on the real <table> itself (see tax-catalog.jsx) — no wrapper steals it. Scope under .ste-tax-catalog — other docs tables stay Mintlify default. Border must be on the real <table>, NOT the scroll wrapper (wrapper border put py/px *inside* the outline). Padding/margin overrides sit in @layer utilities so they beat Mintlify's spacing utilities. */ .ste-tc-col-name { width: 44%; } .ste-tc-col-id { width: 24%; } .ste-tc-col-type { width: 14%; } .ste-tc-col-jur { width: 18%; } /* Real <table> — 1px gray all-around border lives HERE. min-width keeps fixed columns legible (uTaxIDs, badges) instead of squishing on narrow viewports; .ste-tc-table-scroll (a real wrapper div) scrolls horizontally when the table exceeds it. table-layout: fixed only applies to elements with display: table — do NOT force display: block on this element, or fixed columns break and every table sizes itself off its own content. */ .ste-tax-catalog .ste-tc-table { width: 100%; min-width: 640px; table-layout: fixed; border-collapse: separate; border-spacing: 0; margin: 0; border: 1px solid var(--ste-tc-table-border); border-radius: 0; } .ste-tax-catalog .ste-tc-table :is(th, td) { padding: 10px 12px; /* Kill prose/Mintlify cell borders that double with our rules */ border: 0 !important; border-bottom: 1px solid var(--ste-tc-table-border) !important; vertical-align: middle; } .ste-tax-catalog .ste-tc-table :is(th, td):first-child { padding-left: 12px; } .ste-tax-catalog .ste-tc-table :is(th, td):last-child { padding-right: 12px; } /* Slightly tighter thead + group header rows (body cells stay 10px). Not sticky — catalog scrolls with the page; RN index keeps .rn-grid-head. */ .ste-tax-catalog .ste-tc-table thead th { padding-top: 6px; padding-bottom: 6px; /* Browser default centers <th> — match the left-aligned body cells */ text-align: left; /* Match prose table headers (not browser bold / 700+) */ font-weight: 500 !important; /* Catalog surface token */ background-color: var(--surface); background-clip: padding-box; vertical-align: middle !important; } /* Last row: no bottom cell border — outer <table> border already draws it */ .ste-tax-catalog .ste-tc-table tbody tr:last-child > td { border-bottom: 0 !important; } /* Wrapper chrome (must be @layer utilities). Zero shell border — catalog paints the 1px border on the real <table>. Alignment: Mintlify puts [--page-padding:20px], -mx-(--page-padding), w-[calc(100%+…)], and an inner px-(--page-padding) on the wrapper. That insets the real <table> ~20px vs the section h2. Zero --page-padding so table left edge matches the heading (catalog-only). Vertical gap is separate: my-[1em] + py-[1em] (not page-padding). !important is required in @layer utilities to beat those Tailwind utilities; shorthand is enough — no need for six longhands. */ @layer utilities { html:has(.ste-tax-catalog) .ste-tax-catalog .ste-tc-table, html:has(.ste-tax-catalog) .ste-tax-catalog .rn-table-shell { --page-padding: 0px; border: 0 !important; box-shadow: none !important; background: transparent !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding-block: 0 !important; } } /* Narrow viewports: the real <table> can't shrink below its min-width (uTaxIDs, jurisdiction names, non-wrapping badges) — let THIS wrapper scroll horizontally instead of the whole page. Beats .rn-table-shell's shared `overflow: visible` (that rule is for RN index's sticky thead, not the catalog, which isn't sticky — see comment there). This scrolls a dedicated wrapper div (.ste-tc-table-scroll), NOT the <table> itself — forcing display: block on the <table> would strip its table formatting context and silently break table-layout: fixed. */ .ste-tax-catalog .ste-tc-table-scroll { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } /* Belt-and-suspenders if --page-padding zeroing loses to a later utility */ html:has(.ste-tax-catalog) .ste-tax-catalog .ste-tc-table [class*="px-("], html:has(.ste-tax-catalog) .ste-tax-catalog .ste-tc-table .grow { padding-left: 0 !important; padding-right: 0 !important; } } .ste-tc-group-header { scroll-margin-top: calc(var(--docs-sticky-top) + 24px); } .ste-tc-group-header td { font-weight: 600; padding-top: 6px; padding-bottom: 6px; background: color-mix(in srgb, var(--brand-light-blue) 55%, var(--white)); /* Same 1px row separator as body — no 2px stacked edge */ border-top: 0 !important; border-bottom: 1px solid var(--ste-tc-table-border) !important; } .ste-tc-table tbody tr.ste-tc-group-header:hover td { background: color-mix(in srgb, var(--brand-light-blue) 55%, var(--white)); } .ste-tc-cell-name, .ste-tc-cell-jur { overflow: hidden; text-overflow: ellipsis; } /* Name links sit in not-prose / .rn-index, so the global .prose a underline rule does not apply — restore docs-style underline here. Color inherits like prose links; underline alone marks linked vs unlinked names. */ .ste-tax-catalog a { color: inherit; border-bottom: none; text-decoration: underline; } /* Unlinked tax names (parent + child): same text color as linked names — do not mute .ste-tc-no-article. Jurisdiction / placeholders stay muted. */ .ste-tc-no-article { color: inherit; } /* Subrows: └ marker only for hierarchy. Name text matches parent cells. */ .ste-tc-child-name { display: inline-flex; align-items: baseline; gap: 0.4rem; } .ste-tc-child-marker { flex-shrink: 0; white-space: nowrap; /* Tree glyph only — lighter gray; name text matches parent cell */ color: rgb(var(--gray-400)); } .ste-tc-cell-jur, .ste-tc-muted { color: var(--ste-tc-muted); } .ste-tc-cell-id code { /* Keep uTaxIDs readable as plain text — not Mintlify code chips */ white-space: nowrap; background: transparent; padding: 0; border: 0; color: var(--ste-tc-muted); } /* Type badges — match .badge-new chrome; colors from §1 brand + shared badge palette */ .ste-tc-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 9999px; border: 1px solid transparent; font-size: 10px; font-weight: 600; line-height: 1.25; text-transform: uppercase; letter-spacing: 0.025em; white-space: nowrap; } .ste-tc-badge-us-federal { color: var(--brand-navy); background: color-mix(in srgb, var(--brand-navy) 8%, var(--white)); border-color: color-mix(in srgb, var(--brand-navy) 22%, var(--white)); } .ste-tc-badge-state { color: var(--brand-blue); background: var(--brand-light-blue); border-color: color-mix(in srgb, var(--brand-blue) 28%, var(--white)); } .ste-tc-badge-local { color: var(--badge-violet-fg); background: var(--badge-violet-bg); border-color: var(--badge-violet-border); } .ste-tc-badge-territory { color: var(--brand-blue); background: var(--brand-light-blue); border-color: color-mix(in srgb, var(--brand-blue) 28%, var(--white)); } .ste-tc-badge-ca-federal { color: var(--badge-teal-fg); background: var(--badge-teal-bg); border-color: var(--badge-teal-border); } .ste-tc-badge-province { color: var(--badge-green-fg); background: var(--badge-green-bg); border-color: var(--badge-green-border); } /* Yes/No/Method for the multi-state finder's rule table — Yes/No are neutral facts about a state's rules, not a correct/incorrect judgment, so neither reuses success (green) or danger (red) tokens. All three values in this column (Yes, No, and the calc-method badge below) need distinct colors from each other since they can appear in the same table. */ .ste-tc-badge-affirmative { color: var(--brand-blue); background: var(--brand-light-blue); border-color: color-mix(in srgb, var(--brand-blue) 28%, var(--white)); } .ste-tc-badge-neutral { /* No — shared badge-violet role, distinct from Yes (blue) and Method (amber) below in this same column. 6.48:1 contrast. */ color: var(--badge-violet-fg); background: var(--badge-violet-bg); border-color: var(--badge-violet-border); } /* Calc-method value (e.g. "Full") — same rule-table right column as the Yes/No badges above, so it needs its own color, not blue (Yes) or violet (No). Shared badge-amber role. 4.76:1 contrast, clears AA. */ .ste-tc-badge-method { color: var(--badge-amber-fg); background: var(--badge-amber-bg); border-color: var(--badge-amber-border); } .dark .ste-tax-catalog { --ste-tc-muted: rgb(var(--gray-400)); --ste-tc-chip-border: color-mix(in srgb, var(--brand-blue) 40%, rgb(var(--gray-700))); --ste-tc-table-border: rgb(var(--gray-700)); } .dark .ste-tc-filters { background: rgb(var(--gray-900)); } .dark .ste-tc-filters.is-stuck { border-bottom-color: rgb(var(--gray-700)); } .dark .ste-tc-search input, .dark .ste-tc-chip { background: rgb(var(--gray-900)); border-color: rgb(var(--gray-600)); color: rgb(var(--gray-200)); } .dark .ste-tc-chip-active { background: var(--brand-blue); border-color: var(--brand-blue); color: var(--white); } .dark .ste-tc-table thead th { background-color: rgb(var(--gray-900)); } .dark .ste-tc-group-header td, .dark .ste-tc-table tbody tr.ste-tc-group-header:hover td { background: rgb(var(--gray-800)); border-top-color: var(--ste-tc-table-border); border-bottom-color: var(--ste-tc-table-border); } @media (max-width: 1023px) { .ste-tc-section { scroll-margin-top: calc(4rem + 12px); } .ste-tc-group-header { scroll-margin-top: calc(4rem + 24px); } } @media (max-width: 768px) { /* The single-non-wrapping-row treatment targets the catalog's normal (desktop/tablet) content width — on phones, let chips drop to a second line instead of squeezing the search box down to nothing. */ .ste-tc-filters { flex-wrap: wrap; /* Break out of #content-area's fixed 20px gutter (16px offset + 4px own padding, constant through this breakpoint) so the sticky bar spans the full viewport width instead of sitting inset like the prose column above/below it. */ margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; width: calc(100% + 40px); } /* .ste-tc-chips needs both: flex-wrap so its own children (the chip buttons) can drop to new lines, AND flex: 1 1 100% so the row is actually width-constrained to trigger that wrap — flex: 0 0 auto (the desktop single-line sizing) never shrinks below its content's width, so wrap never had anything to act on. */ .ste-tc-chips { flex: 1 1 100%; flex-wrap: wrap; } .ste-tc-filters-divider { display: none; } .ste-tc-search { max-width: none; flex: 1 1 100%; } } /* ── Multi-state scenario finder (snippets/ste/multi-state-scenario-finder.jsx) Brand tokens from §1. Radius: --radius / --radius-sm. */ .ste-msf { margin: 1.5rem 0; /* overflow:visible so the absolute combobox menu isn’t clipped */ overflow: visible; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); font-family: "Work Sans", ui-sans-serif, system-ui, sans-serif; color: var(--card-fg); /* Finder-only accents — One state cyan. The original muted teal (#0C7A8A at low mix opacity) read as grayish rather than a distinct color; this is a more saturated cyan, clearly its own hue next to brand blue (Same state) and status green (No SIT). */ --msf-teal: #0891B2; --msf-teal-bg: #ECFEFF; --msf-teal-border: #A5F3FC; /* Same values as the shared badge-amber role — aliased so there's one source of truth, since this tone's yellow and the tax-catalog method badge's amber were already identical colors. */ --msf-yellow: var(--badge-amber-fg); --msf-yellow-bg: var(--badge-amber-bg); --msf-yellow-border: var(--badge-amber-border); } .ste-msf-header { padding: 16px 20px; border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; background: color-mix(in srgb, var(--brand-light-blue) 45%, var(--white)); } .ste-msf-eyebrow { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-fg); } .ste-msf-title { margin: 4px 0 0; font-size: 1.125rem; font-weight: 600; line-height: 1.35; color: var(--brand-navy); } .ste-msf-lede { margin: 6px 0 0; max-width: 42rem; font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--muted-fg); } .ste-msf-body { display: flex; flex-direction: column; gap: 16px; padding: 20px; overflow: visible; } .ste-msf-fields { display: grid; gap: 12px; overflow: visible; align-items: end; } @media (min-width: 640px) { .ste-msf-fields { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px 10px; } } .ste-msf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .ste-msf-swap-wrap { display: flex; align-items: flex-end; justify-content: center; } .ste-msf-swap { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 9999px; background: var(--white); color: var(--muted-fg); cursor: pointer; padding: 0; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .ste-msf-swap:hover:not(:disabled) { background: color-mix(in srgb, var(--muted-fg) 8%, var(--white)); border-color: color-mix(in srgb, var(--muted-fg) 35%, var(--border)); color: var(--brand-navy); } .ste-msf-swap:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--white), 0 0 0 4px color-mix(in srgb, var(--brand-blue) 35%, transparent); } .ste-msf-swap:disabled { opacity: 0.4; cursor: not-allowed; } .ste-msf-swap svg { display: block; width: 18px; height: 18px; } .ste-msf-label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-fg); } .ste-msf-select-wrap { position: relative; } /* Shared field chrome for the combobox text input (was native <select>). */ .ste-msf-select { display: block; box-sizing: border-box; width: 100%; max-width: 100%; height: 40px; padding: 0 36px 0 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white); font-family: inherit; font-size: 14px; font-weight: 400; line-height: 1.2; color: var(--card-fg); outline: none; } .ste-msf-select:focus { border-color: var(--brand-blue); box-shadow: 0 0 0 2px var(--white), 0 0 0 4px color-mix(in srgb, var(--brand-blue) 35%, transparent); } .ste-msf-combobox { position: relative; overflow: visible; z-index: 1; } .ste-msf-combobox:focus-within { z-index: 40; } .ste-msf-combobox-input { cursor: text; } /* Navy-tinted prompt (~6.2:1 on --white); slightly darker than --muted-fg. */ .ste-msf-combobox-input::placeholder { color: color-mix(in srgb, var(--brand-navy) 25%, var(--muted-fg)); opacity: 1; line-height: 1.2; } .ste-msf-select-caret { position: absolute; top: 50%; right: 12px; width: 10px; height: 6px; margin-top: -3px; pointer-events: none; background: var(--muted-fg); clip-path: polygon(0 0, 100% 0, 50% 100%); } .ste-msf-combobox-toggle { position: absolute; top: 0; right: 0; width: 36px; height: 40px; border: 0; background: transparent; cursor: pointer; padding: 0; } .ste-msf-combobox-menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin-top: 6px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white); box-shadow: var(--shadow-panel); } .ste-msf-combobox-list { margin: 0; padding: 4px 0; list-style: none; max-height: 280px; overflow-y: auto; } .ste-msf-combobox-group, .ste-msf-combobox-group-list { margin: 0; padding: 0; list-style: none; } .ste-msf-combobox-option { display: block; width: 100%; padding: 8px 12px; border: 0; background: transparent; text-align: left; font-family: inherit; font-size: 14px; font-weight: 400; color: var(--card-fg); cursor: pointer; } .ste-msf-combobox-option:hover, .ste-msf-combobox-option--active { background: color-mix(in srgb, var(--brand-light-blue) 55%, transparent); } .ste-msf-combobox-option--selected { font-weight: 600; color: var(--brand-blue); } .ste-msf-combobox-empty { margin: 0; padding: 12px; font-size: 13px; color: var(--muted-fg); } /* Unified result panel: tone wash header + plain Detailed Rules rows */ .ste-msf-results { position: relative; margin-top: 8px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); } .ste-msf-results-clear { position: absolute; top: 6px; right: 6px; z-index: 1; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid transparent; border-radius: 9999px; background: transparent; color: var(--muted-fg); font-size: 28px; line-height: 1; cursor: pointer; padding: 0; transition: border-color 0.15s ease, color 0.15s ease; } .ste-msf-results-clear:hover { color: var(--brand-navy); border-color: var(--muted-fg); } .ste-msf-results-clear:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--brand-blue); } /* Tone-colored header band — one wash per resultType */ .ste-msf-tone { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-bottom: 1px solid transparent; } .ste-msf-tone-success { /* No SIT — green status */ background: var(--status-bg); border-bottom-color: var(--status-border); } .ste-msf-tone-same { /* Same state — brand blue only */ background: var(--brand-light-blue); border-bottom-color: color-mix(in srgb, var(--brand-blue) 28%, transparent); } .ste-msf-tone-reciprocal { /* Reciprocal — amber / tangerine */ background: color-mix(in srgb, var(--brand-tangerine) 14%, var(--white)); border-bottom-color: color-mix(in srgb, var(--brand-tangerine) 40%, transparent); } .ste-msf-tone-one { /* One state — turquoise (more cyan than No SIT green; not brand blue / gray) */ background: var(--msf-teal-bg); border-bottom-color: var(--msf-teal-border); } .ste-msf-tone-dual { /* Both states — violet (payer-both) */ background: var(--payer-both-bg); border-bottom-color: var(--payer-both-border); } .ste-msf-tone-warning { /* Review — yellow caution (lighter than Reciprocal amber) */ background: var(--msf-yellow-bg); border-bottom-color: var(--msf-yellow-border); } .ste-msf-tone-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-right: 28px; } .ste-msf-tone-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 9999px; } .ste-msf-tone-icon svg { display: block; } .ste-msf-tone-icon--success { background: color-mix(in srgb, var(--status-fg) 16%, transparent); color: var(--status-fg); } .ste-msf-tone-icon--same { background: color-mix(in srgb, var(--brand-blue) 16%, transparent); color: var(--brand-blue); } .ste-msf-tone-icon--reciprocal { background: color-mix(in srgb, var(--brand-tangerine) 28%, transparent); color: #9A6400; } .ste-msf-tone-icon--one { /* The old muted teal read as grayish even at a higher mix (raising mix% brings the chip color closer to the stroke color, which lowers contrast, not raises it — the fix was a more saturated base color at 14%, not more of the old one). 14% is the highest mix that still clears the 3:1 non-text contrast minimum against the stroke. */ background: color-mix(in srgb, var(--msf-teal) 14%, transparent); color: var(--msf-teal); } .ste-msf-tone-icon--dual { background: color-mix(in srgb, var(--payer-both-fg) 14%, transparent); color: var(--payer-both-fg); } .ste-msf-tone-icon--warning { background: color-mix(in srgb, var(--msf-yellow) 16%, transparent); color: var(--msf-yellow); } .ste-msf-tone-title { margin: 0; font-size: 1rem; font-weight: 600; color: var(--brand-navy); } .ste-msf-tone-body { margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; color: var(--card-fg); } .ste-msf-tone-lead, .ste-msf-tone-after { margin: 0; font-weight: 400; } .ste-msf-tone-verdict { margin: 0; font-weight: 600; color: var(--brand-navy); } .ste-msf-tone-note { margin: 0; font-size: 13px; font-style: normal; font-weight: var(--weight-medium); line-height: 1.45; color: var(--card-fg); } .ste-msf-results-body { padding: 14px 16px 16px; background: var(--white); } .ste-msf-rules-title { margin: 0 0 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-fg); } .ste-msf-rule-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--border); font-size: 14px; } .ste-msf-rule-row:last-child { border-bottom: 0; } .ste-msf-rule-label { font-weight: 400; color: var(--card-fg); cursor: help; } .ste-msf-footnote { margin: 14px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted-fg); } /* ── Release notes index (snippets/release-notes-index.jsx) ─────────────── Interactive all-product index: year select + product filter + dense table. Tokens from §1 / UI spec (brand-blue, card-fg/muted, border, tile-bg). Not the per-product section layout in the prototype screenshot — that is a separate composition; this styles Laura’s multi-product table. */ .rn-index { --rn-fg: var(--card-fg); --rn-muted: var(--card-muted); --rn-border: var(--card-border); --rn-hover: color-mix(in srgb, var(--tile-bg) 50%, transparent); --rn-surface: var(--surface); /* Sit tight under the page title/description */ margin: 4px 0 24px; font-family: "Work Sans", ui-sans-serif, system-ui, sans-serif; max-width: 100%; } .rn-index--embedded { margin: 0 0 8px; } /* Homepage tabs: avoid an extra scrollport around the index. */ .sym-landing [id^="panel-"]:has(.rn-index), .sym-landing [role="tabpanel"]:has(.rn-index) { overflow: visible !important; } .rn-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; } /* Same anchoring model as .rn-product-filter (relative only; menu uses top:100%). */ .rn-year-wrap { position: relative; } .rn-control { appearance: none; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--rn-border); border-radius: var(--radius-sm); background: var(--white); font: 600 13px "Work Sans", ui-sans-serif, system-ui, sans-serif; color: var(--rn-fg); outline: none; cursor: pointer; transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease; } .rn-control:hover { border-color: color-mix(in srgb, var(--rn-border) 60%, var(--brand-navy)); } .rn-control:focus-visible { border-color: var(--brand-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue) 20%, transparent); } .rn-year-button { padding-right: 10px; } .rn-year-menu { position: absolute; top: 100%; left: 0; right: auto; bottom: auto; z-index: 30; margin-top: 6px; min-width: 100%; overflow: hidden; border: 1px solid var(--rn-border); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-panel); } .rn-year-menu-list { margin: 0; padding: 4px 0; list-style: none; max-height: 288px; overflow-y: auto; } .rn-year-option { display: block; width: 100%; padding: 8px 12px; border: 0; background: transparent; text-align: left; font-family: "Work Sans", ui-sans-serif, system-ui, sans-serif; font-size: 13px; /* Unselected = normal; selected (--active) = bold */ font-weight: 400; color: var(--rn-fg); cursor: pointer; transition: background-color 150ms ease; } .rn-year-option:hover { background: var(--tile-bg); } .rn-year-option--active { font-weight: 600; color: var(--brand-blue); background: color-mix(in srgb, var(--brand-light-blue) 55%, transparent); } .rn-chevron { width: 16px; height: 16px; color: var(--rn-muted); flex-shrink: 0; } .rn-product-filter { position: relative; } .rn-filter-button { padding-right: 10px; } .rn-filter-menu { position: absolute; top: 100%; left: 0; right: auto; bottom: auto; z-index: 30; margin-top: 6px; /* Wide enough for full product names (e.g. Symmetry Minimum Wage Finder) */ width: 320px; overflow: hidden; border: 1px solid var(--rn-border); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-panel); } .rn-filter-select-all { display: block; width: 100%; padding: 8px 12px; font-size: 13px; font-weight: 400; text-align: left; color: var(--rn-muted); background: none; border: none; border-bottom: 1px solid var(--rn-border); cursor: pointer; transition: background-color 150ms ease; } .rn-filter-select-all:hover { background: var(--tile-bg); } .rn-filter-menu-list { margin: 0; padding: 4px 0; list-style: none; max-height: 288px; overflow-y: auto; } .rn-filter-option { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 13px; color: var(--rn-fg); cursor: pointer; transition: background-color 150ms ease; } .rn-filter-option:hover { background: var(--tile-bg); } .rn-filter-checkbox { width: 16px; height: 16px; accent-color: var(--brand-blue); flex-shrink: 0; } .rn-filter-checkbox:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; } .rn-product-icon { width: 16px; height: 16px; flex-shrink: 0; border-radius: 2px; object-fit: contain; } /* Filter menu icons — larger next to full product names */ .rn-filter-option .rn-product-icon { width: 22px; height: 22px; } /* Table header icons — slightly larger alongside full product names */ .rn-product-icon--header { width: 20px; height: 20px; } .rn-table-shell { border: 1px solid var(--rn-border); border-radius: 0; background: var(--white); max-width: 100%; padding: 0; margin: 0; /* visible so thead sticky docks to page scroll (not a nested scroller) */ overflow: visible; } /* * Mintlify steals `rn-grid` onto its scroll/padding WRAPPER (same pattern as * .ste-tc-table). Style the real <table> under .rn-table-shell so * table-layout / borders apply even after class theft. */ .rn-index .rn-table-shell table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 14px; margin: 0; } .rn-col-date { width: 88px; } .rn-col-product { width: auto; } .rn-grid-head { position: sticky; /* * Dock flush under visible fixed/sticky chrome. --docs-sticky-top is * navbar-only in CSS; JS overwrites with measured #navbar bottom so * dual-nav pages clear tabs and single-nav pages do not inherit * Mintlify's phantom --topbar-tabs-height. */ top: var(--docs-sticky-top); z-index: 12; background: var(--white); background-clip: padding-box; box-shadow: none; overflow: visible; } .rn-grid-th { padding: 10px 12px; text-align: left; font-size: 13px; font-weight: 600; color: var(--rn-muted); background: var(--white); border: 0; vertical-align: middle; } /* After .rn-grid-th { border: 0 } — keep a visible header rule (gray token). Reinforce middle align so Mintlify/prose cannot top-align th content. */ .rn-index .rn-table-shell thead th.rn-grid-head { border-bottom: 1px solid var(--border) !important; vertical-align: middle !important; } .rn-grid-th--date { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; } .rn-grid-td { position: relative; z-index: 0; padding: 10px 12px; vertical-align: top; border-bottom: 1px solid color-mix(in srgb, var(--rn-border) 70%, transparent); overflow-wrap: anywhere; } .rn-index .rn-table-shell tbody tr:last-child .rn-grid-td { border-bottom: 0; } .rn-grid-row:hover .rn-grid-td { background: var(--rn-hover); } /* * Mintlify wrapper chrome + sticky containing-block fix (same approach as * catalog .ste-tc-table). --page-padding:0 kills horizontal inset; margin / * padding-block !important zeros my-[1em] py-[1em] so thead sits flush under * the shell border. Scoped to .rn-index only; skip .ste-tax-catalog. * * Overflow MUST stay in @layer utilities: Tailwind's `overflow-y-hidden!` is * also @layer utilities !important. For !important, layered declarations beat * unlayered ones — moving these outside the layer made sticky fail again. */ @layer utilities { html:has(.rn-index:not(.ste-tax-catalog)) .rn-index .rn-table-shell, html:has(.rn-index:not(.ste-tax-catalog)) .rn-index .rn-grid { --page-padding: 0px; overflow: visible !important; contain: none !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding-block: 0 !important; } html:has(.rn-index:not(.ste-tax-catalog)) .rn-index .rn-table-shell > div, html:has(.rn-index:not(.ste-tax-catalog)) .rn-index .rn-table-shell .base-ui-disable-scrollbar, html:has(.rn-index:not(.ste-tax-catalog)) .rn-index .rn-table-shell [data-component-part="scroll-area-viewport"], html:has(.rn-index:not(.ste-tax-catalog)) .rn-index .rn-table-shell [class*="overflow-y-hidden"], html:has(.rn-index:not(.ste-tax-catalog)) .rn-index .rn-table-shell [class*="scroll-area-fade"], html:has(.rn-index:not(.ste-tax-catalog)) .rn-index .rn-grid > div, html:has(.rn-index:not(.ste-tax-catalog)) .rn-index .rn-grid .base-ui-disable-scrollbar, html:has(.rn-index:not(.ste-tax-catalog)) .rn-index .rn-grid [data-component-part="scroll-area-viewport"], html:has(.rn-index:not(.ste-tax-catalog)) .rn-index .rn-grid [class*="overflow-y-hidden"], html:has(.rn-index:not(.ste-tax-catalog)) .rn-index .rn-grid [class*="scroll-area-fade"] { overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; } html:has(.rn-index:not(.ste-tax-catalog)) .rn-index .rn-table-shell [class*="px-("], html:has(.rn-index:not(.ste-tax-catalog)) .rn-index .rn-table-shell .grow, html:has(.rn-index:not(.ste-tax-catalog)) .rn-index .rn-grid [class*="px-("], html:has(.rn-index:not(.ste-tax-catalog)) .rn-index .rn-grid .grow { padding-left: 0 !important; padding-right: 0 !important; } html:has(.rn-index:not(.ste-tax-catalog)) [class*="overflow-x-clip"] { overflow-x: visible !important; overflow: visible !important; } } .rn-product-heading { /* Row stays icon | text — wrap inside the span, not under the icon. */ display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; /* Medium-dark gray — not body/navy black */ color: #5B6B7C; text-decoration: none; } /* Underline product name on hover — do not change text color */ .rn-product-heading:hover { color: #5B6B7C; } .rn-product-heading:hover span { text-decoration: underline; } .rn-product-heading span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; line-height: 1.15; font-size: 13px; font-weight: 600; } .rn-date { white-space: nowrap; font-weight: 500; color: color-mix(in srgb, var(--rn-fg) 85%, var(--rn-muted)); } .rn-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; } .rn-version-link { font-size: 14px; font-weight: 500; color: var(--brand-blue); text-decoration: none; overflow-wrap: anywhere; } .rn-version-link:hover { color: var(--brand-blue); text-decoration: underline; } .rn-version-link:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; border-radius: 2px; } /* Preview chip — UI spec .rn-chip; review asked ~11–12px (was 9px) */ .rn-chip { display: inline-block; font-size: 11px; font-weight: 600; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.05em; /* Same --callout-warning-* role as the <Warning> callout and the changelog preview pill, so all three carry one source of truth for "preview". 5.04:1, clears AA. Borderless like that pill, and like this page's own tinted state (.rn-year-option--active). Shape, uppercase and size stay as they were: 6px and uppercase are the table's vocabulary, and a round sentence-case pill would match the changelog while clashing with the page it sits on. */ background: var(--callout-warning-bg); color: var(--callout-warning-fg); border: none; border-radius: 6px; padding: 2px 6px; white-space: nowrap; } .rn-empty { color: color-mix(in srgb, var(--rn-border) 80%, var(--rn-muted)); } .rn-empty-state { margin: 0; padding: 40px 20px; text-align: center; font-size: 14px; color: var(--rn-muted); } .dark .rn-index { --rn-fg: #f3f4f6; --rn-muted: #9ca3af; --rn-border: #374151; --rn-hover: rgba(255, 255, 255, 0.04); --rn-surface: #111827; } .dark .rn-control, .dark .rn-filter-menu, .dark .rn-year-menu, .dark .rn-table-shell { background: #111827; border-color: #374151; color: #f3f4f6; } .dark .rn-grid-head, .dark .rn-grid-th { background: #111827 !important; } .dark .rn-product-heading, .dark .rn-product-heading:hover { color: #9ca3af; } .dark .rn-filter-option:hover, .dark .rn-year-option:hover { background: #1f2937; } @media (max-width: 767px) { .rn-index .rn-table-shell table { font-size: 13px; } .rn-grid-th, .rn-grid-td { padding: 8px 10px; } .rn-version-link { font-size: 13px; } .rn-product-heading span { font-size: 13px; } } /* ============================================================================ Gated links on public pages ---------------------------------------------------------------------------- 200 of 631 pages are public, and 245 links from them point at pages that require sign-in — 48% of public pages had at least one. The nav is already filtered per session, so this only concerns links inside page bodies. Two treatments, because the two kinds of link make different promises: - <Card> is an invitation to go somewhere. A locked invitation is noise, so gated cards are hidden from logged-out visitors entirely. - An inline link is a reference inside a sentence. Removing it would break the prose, so it stays and gets a lock. site-header.js marks the elements (.sym-gated-card / .sym-gated-link) on every page regardless of auth state; the auth logic lives here. Everything gated FAILS CLOSED — hidden until data-sym-auth resolves to "in" — so a logged-out visitor never sees a card appear and then vanish. Signed-in users see the gap fill in instead, the same trade the .login-banner makes above. Clicking a gated link still works and needs no href rewriting: Mintlify sends it to /login?redirect=<path> and honours the destination after sign-in. ========================================================================== */ /* Hide only while NOT confirmed signed in, rather than hiding always and putting the display value back for signed-in visitors. Restoring it would mean naming what each element is — block for a card, grid for a card group, list-item for a TOC row — and every one of those is a guess about Mintlify's own styling that breaks the day it changes. Never overriding `display` in the signed-in state means there is nothing to guess and nothing to keep in sync. `:not([data-sym-auth="in"])` rather than `="out"` keeps this failing closed: the attribute is "unknown" until site-header.js resolves auth, and a gated card must stay hidden through that window, not flash in and vanish. The TOC row is not scoped to #content-area — the "On this page" list sits outside it. Hiding a heading has to take its entry along, or the entry survives and scrolls to nothing. */ html:not([data-sym-auth="in"]) #content-area .sym-gated-card, html:not([data-sym-auth="in"]) #content-area .sym-gated-group, html:not([data-sym-auth="in"]) #content-area .sym-gated-heading, html:not([data-sym-auth="in"]) li.toc-item.sym-gated-toc { display: none; } /* Inline links keep their place in the sentence and take a trailing lock. A pseudo-element, not an injected node: site-header.js runs under a childList MutationObserver and appending an element there would loop. */ html:not([data-sym-auth="in"]) #content-area a.sym-gated-link::after { content: ""; display: inline-block; width: 0.75em; height: 0.75em; margin-left: 0.28em; vertical-align: -0.02em; background-color: currentColor; opacity: 0.55; /* Lucide "lock", inlined so it costs no request and inherits link colour. */ -webkit-mask: var(--sym-lock) no-repeat center / contain; mask: var(--sym-lock) no-repeat center / contain; } :root { --sym-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); } /* TEMPORARY: hide Mintlify's native RSS button on changelog pages (rss: true in frontmatter) — remove this rule to bring it back. */ button[aria-label="Open RSS feed"] { display: none !important; } /* ─── Changelog (<Update> blocks) ──────────────────────────────────────── */ /* Release version — blue pill, mono text. Brand blue (not the softer badge-blue role), matching State/Territory/Yes elsewhere on the site. */ [data-component-part="update-label"] { background: var(--brand-light-blue) !important; border: none !important; border-radius: 4px !important; padding: 2px 11px !important; color: var(--brand-blue) !important; font-family: ui-monospace, monospace !important; font-size: 12px !important; font-weight: 400 !important; justify-content: flex-start !important; text-align: left !important; } /* Invisible (space still reserved) until site-header.js's markUpdateLabels() has classified it — avoids a visible flash from the blue published pill to the yellow preview one on first paint. */ [data-component-part="update-label"]:not(.sym-label-ready) { visibility: hidden !important; } /* Hairline between releases — not before the first one, regardless of what precedes it (a page intro, etc.). Matches the site's existing divider language instead of introducing a new colored-accent pattern. */ .update-container + .update-container { border-top: 1px solid var(--border); padding-top: 24px; } /* Preview (unreleased) — same warm-yellow wash as the "Release note preview" Warning callout on this exact page, via --callout-warning-*, so the pill and the callout read as one signal. Applied by site-header.js's markUpdateLabels(): no DOM attribute distinguishes a preview from a published release, so the state is derived from the callout's presence and the release date. Mono is kept here — a preview label is normally a real version string ("STE 2026.9.1") and should stay scannable as one. Column, not the base rule's row — site-header.js's ensurePreviewTag() splits the text into a "[Preview]" tag stacked above the version string, only for this variant. */ [data-component-part="update-label"].sym-update-label-preview { background: var(--callout-warning-bg) !important; color: var(--callout-warning-fg) !important; border: none !important; border-radius: 4px !important; padding: 2px 11px !important; font-weight: 500 !important; flex-direction: column !important; align-items: flex-start !important; gap: 1px; } /* The "[Preview]" tag ensurePreviewTag() prepends — sans, not the pill's own mono (that's reserved for the real version string below it). */ .sym-label-preview-tag { font-family: "Work Sans", sans-serif !important; font-weight: 400 !important; font-size: 13px; } /* "Upcoming release" only — the rare no-version-known case. Sans-serif on top of the yellow wash above, because this label is a status to read rather than a version to scan. */ [data-component-part="update-label"].sym-update-label-upcoming { font-family: inherit !important; } /* Release date under the label — one notch smaller and lighter than native text-secondary (14px / rgb(62,65,67)), so it reads as metadata rather than competing with the label pill above it. */ [data-component-part="update-description"] { font-size: 12px !important; color: var(--muted-fg) !important; margin-top: 4px !important; padding-left: 0 !important; } /* Narrower gap between the sticky label/date column and content — native lg:gap-6 (24px) reads as loose next to how tight the rest of the site's two-column layouts (e.g. sidebar/content) sit. */ .update-container { gap: 12px !important; } /* A callout opening a release (e.g. the "preview" Warning) doesn't need its default top margin — nothing above it to clear inside update-content. */ [data-component-part="update-content"] .callout:first-child { margin-top: 0 !important; } /* Release note preview callout stays pinned under the docs header while its (often long) upcoming-release entry scrolls, so the "subject to change" notice stays visible. Scoped to the preview release via site-header.js's markUpdateLabels() class — see the "no DOM attribute distinguishes a preview" note above. Mintlify wraps update-content in a plain `overflow-hidden` flex child (sibling of the sticky label/date column) — an ancestor overflow other than visible breaks position:sticky for anything inside it, same failure mode as the .rn-index fix above. Free just that wrapper, only on the preview release, so its callout can actually stick. Direct-child combinator (`>`) on the callout, not the descendant selector above — every collapsible section's opening callout is also ":first-child" of its own .cl-sec-body wrapper, so the plain descendant form matches all of them, not just the one true first callout. */ .update-container:has([data-component-part="update-label"].sym-update-label-preview) > div:has(> [data-component-part="update-content"]) { overflow: visible !important; } .update-container:has([data-component-part="update-label"].sym-update-label-preview) [data-component-part="update-content"] > .callout:first-child { position: sticky; top: var(--docs-sticky-top); z-index: 20; } /* Zero-height, non-sticky — site-header.js's initPreviewCalloutSticky() IntersectionObserver target. Once it scrolls out from under the header, the callout above is genuinely pinned (not just in its own normal-flow position), so the .is-stuck styles below apply only then. */ .sym-preview-callout-sentinel { height: 0; } /* Stuck-only treatment — same "lifted off the page" shadow language as .ste-tc-filters.is-stuck, so every sticky bar on the site reads as one pattern. Description line drops out so the pinned bar stays compact (just the bold "subject to change" line) instead of shadowing a full two-line callout over the content the whole scroll. Native py-4 is sized for that two-line callout — with only one line left, it reads as far too much air above and below the text once pinned as a slim bar. */ .update-container:has([data-component-part="update-label"].sym-update-label-preview) [data-component-part="update-content"] > .callout:first-child.is-stuck { box-shadow: 0 4px 12px -12px rgba(9, 39, 74, 0.4); padding-top: 10px !important; padding-bottom: 10px !important; } .update-container:has([data-component-part="update-label"].sym-update-label-preview) [data-component-part="update-content"] > .callout:first-child.is-stuck [data-component-part="callout-content"] > span:nth-child(2) { display: none !important; } /* The title span's own prose margin-bottom (~17.5px, spacing it from the description below) becomes trailing space once that description is hidden above — without this the stuck bar reads noticeably bottom-heavy. */ .update-container:has([data-component-part="update-label"].sym-update-label-preview) [data-component-part="update-content"] > .callout:first-child.is-stuck [data-component-part="callout-content"] > span:first-child { margin-bottom: 0 !important; } /* ─── More-menu onboarding popup (more-menu-onboarding.js) ─────────────── */ /* Time-boxed, one-time, signed-in-only callout pointing at the More menu. z-index above #navbar (30) and the More panel itself so it always reads as "in front of" the chrome it's pointing at. */ .sym-more-onboarding { position: fixed; z-index: 60; width: 320px; max-width: calc(100vw - 24px); padding: 20px; background: var(--brand-navy); color: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-panel); font-family: "Work Sans", ui-sans-serif, system-ui, sans-serif; /* Appear a beat after the page settles rather than the instant the menu shows up — backwards fill-mode holds it at the 0% (invisible) keyframe for the full delay instead of flashing visible then hiding. */ animation: sym-more-onboarding-in 200ms ease-out 1s backwards; } @keyframes sym-more-onboarding-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .sym-more-onboarding { animation-duration: 0.01ms; } } /* Fixed offset from the popup's own right edge — an approximation of the trigger's center, not a computed exact match. Good enough at this size; not worth the complexity of measuring the trigger's midpoint in JS. */ .sym-more-onboarding-arrow { position: absolute; top: -7px; right: 28px; width: 14px; height: 14px; background: var(--brand-navy); transform: rotate(45deg); border-radius: 2px; } .sym-more-onboarding-close { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; background: none; border: 0; border-radius: var(--radius-xs); color: rgba(255, 255, 255, 0.7); cursor: pointer; } .sym-more-onboarding-close:hover { color: var(--white); background: rgba(255, 255, 255, 0.1); } .sym-more-onboarding-close:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; } .sym-more-onboarding-title { margin: 0 0 8px; padding-right: 24px; font-size: 15px; font-weight: 700; line-height: 1.3; } .sym-more-onboarding-body { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.75); } .sym-more-onboarding-actions { display: flex; align-items: center; gap: 20px; } .sym-more-onboarding-cta { padding: 8px 18px; background: var(--white); color: var(--brand-navy); border: 0; border-radius: 9999px; font-size: 14px; font-weight: 600; cursor: pointer; } .sym-more-onboarding-cta:hover { background: var(--brand-light-blue); } .sym-more-onboarding-cta:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; } .sym-more-onboarding-link { font-size: 14px; font-weight: 500; color: var(--white); text-decoration: underline; } .sym-more-onboarding-link:hover { color: var(--brand-light-blue); } /* ─── Changelog: stacked collapsible sections ──────────────────────────── */ /* changelog-collapse.js supplies the wrappers — markdown emits a flat h2/h3/content sequence with nothing to collapse otherwise. Headings stay in place so their anchor ids survive; release emails deep-link to them. Sections stack like rows, one hairline between each, caret on the right. */ .cl-sec { border-top: 1px solid var(--border); } .cl-sec:first-child { border-top: 0; } /* Mintlify ships the h2 as display:flex with prose margins; both need taming to read as a stacked row. margin-left:auto on the caret pushes it to the right. */ .cl-sec-head { cursor: pointer; align-items: center; user-select: none; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0.85rem 0; font-size: 0.9375rem !important; font-weight: 500 !important; color: var(--muted-fg) !important; } .cl-sec-head:hover { color: var(--brand-blue); } /* Mintlify's "copy header link" anchor renders a 40px-wide clickable box around a 24px visible icon — the extra 16px is invisible dead space that otherwise steals clicks meant to toggle the section (and jumps/copies the link instead). Restrict the hit target to the icon itself; clicks in the surrounding padding fall through to the row's own toggle handler. */ .cl-sec-head a[aria-label="Navigate to header"] { pointer-events: none; } .cl-sec-head a[aria-label="Navigate to header"] > div { pointer-events: auto; } .cl-sec--open > .cl-sec-head { color: var(--card-fg) !important; } /* .cl-sec-head's own top padding shifts the first heading down; nudge the sticky label/date column (update-container's other flex child) to match. Scoped to releases that actually have a collapsible section — a content-only release (e.g. "Upcoming Release", just a Warning callout) has no .cl-sec-head to align with, so its badge stays flush at the top. */ .update-container:has(.cl-sec-head) > div:first-child { margin-top: 0.65rem; } .cl-caret { flex: 0 0 auto; margin-left: auto; width: 13px; height: 13px; color: var(--muted-fg); transition: transform 140ms ease; } .cl-caret > svg { display: block; width: 100%; height: 100%; } .cl-sec--open > .cl-sec-head .cl-caret { transform: rotate(180deg); } .cl-sec-head:hover .cl-caret { color: var(--brand-blue); } /* No `display` here on purpose: the JS toggles hidden="until-found", and a display rule would defeat the attribute and lose Ctrl-F reveal with it. */ .cl-sec-body { margin: 0 0 0.55rem; padding: 0.15rem 0; } /* hidden="until-found" is content-visibility:hidden, NOT display:none — the element keeps its own box, so its margin still applies while collapsed and showed as a gap above the next hairline. Zero it. Do not switch to display:none — that would defeat until-found and lose Ctrl-F reveal. */ .cl-sec:not(.cl-sec--open) > .cl-sec-body { margin: 0; padding: 0; } /* Zero first/last child margins so they don't compound with .cl-sec-body's own padding/margin. */ .cl-sec-body > *:first-child { margin-top: 0 !important; } .cl-sec-body > *:last-child { margin-bottom: 0 !important; } /* An entry heading is h3 in STE and PRP but h4 in most of I-9, which goes ## > #### with no ###. Both sit at the same level, so both read the same. */ .cl-entry > h3, .cl-entry > h4 { margin-top: 1rem !important; margin-bottom: 0.35rem !important; } .cl-entry:first-child > h3, .cl-entry:first-child > h4 { margin-top: 0 !important; } /* Mintlify zeroes the top margin on a paragraph that directly follows a heading, but the entry heading lives in .cl-entry while the prose lives in a sibling .cl-entry-body, so that rule never matches here. Zero it ourselves. Targets *:first-child rather than p:first-child because a paragraph inside <Update> is a span[data-as="p"] — 308 of those against 2 bare <p> on the STE page. */ .cl-entry-body > *:first-child { margin-top: 0 !important; } .cl-entry-body h4 { margin-top: 0.7rem !important; margin-bottom: 0.25rem !important; } /* ─── Changelog: print a single release ────────────────────────────────── */ /* changelog-print.js adds the control; scoping/cleanup live here. Two entry points: `.cl-print-target` (button) and `:target` (deep link, no JS). */ /* Plain text link, not a pill — still a <button> since it performs an action. No left padding, so the icon lines up with the version/date text above. */ .cl-print-btn { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.85rem; padding: 0; border: 0; background: none; color: var(--muted-fg); font-size: 0.75rem; line-height: 1.4; cursor: pointer; } .cl-print-btn > svg { width: 13px; height: 13px; flex: 0 0 auto; } /* Underline the word only, and only on hover/active. */ .cl-print-btn > span { text-underline-offset: 2px; text-decoration-thickness: 1px; } .cl-print-btn:hover, .cl-print-btn:active { color: var(--card-fg); } .cl-print-btn:hover > span, .cl-print-btn:active > span { text-decoration: underline; } @media print { /* Scope to one release; a plain print is unaffected. Must be two separate rules, not one OR'd selector — combined, a stale hash on release A plus the button targeting release B hides both (blank print). Gating :target on html:not(.cl-print-one) makes the button always win once clicked. */ html.cl-print-one .update-container:not(.cl-print-target) { display: none !important; } html:not(.cl-print-one) body:has(.update-container:target) .update-container:not(:target) { display: none !important; } /* Force-expand collapsed content. Keyed on [hidden], not collapse classes, so it can't silently drop content. Both props needed: plain `hidden` = display:none, "until-found" = content-visibility:hidden. */ .update-container [hidden] { display: block !important; content-visibility: visible !important; } /* Site chrome and our own control. */ #header, #navbar, #navbar-transition, #sidebar, #sidebar-content, #table-of-contents, #table-of-contents-layout, #table-of-contents-content, #search-bar-entry, #search-bar-entry-mobile, #topbar-cta-button, #chat-assistant-textarea, #page-title, #page-context-menu, #rss-feed-button, #navigation-items, #content-side-layout, #background-color, .cl-print-btn, div:has(> .chat-assistant-floating-input) { display: none !important; } } /* #footer is forced visible via @layer utilities elsewhere (defeats Mintlify's own hide-on-custom-mode rule) — layer order reverses for !important, so this needs the same layer to actually win. */ @layer utilities { @media print { #footer { display: none !important; } } } @media print { /* The "On this page" toggle is an h2 with a generated id, so it can only be reached structurally. It is chrome, not content. */ #content-area > h2, #content-area > div:has(> button[aria-expanded]) { display: none !important; } /* Let the release use the full page width. */ #content-area, #content-container, #content-side-layout { max-width: 100% !important; margin: 0 !important; padding: 0 !important; } /* The version rail is sticky on screen; no meaning on paper. Also drops its border and excess bottom margin, both screen-only artifacts. */ .update-container > div:first-child { position: static !important; border: none !important; margin-bottom: 0 !important; } /* Closes the gap left by hidden chrome above #content. Measured against the generated PDF; print-only. border-top: the release-divider hairline is meaningless (and stray-looking) once isolated to one release. */ .cl-print-target, .update-container:target { margin-top: -102pt !important; border-top: none !important; } /* Prev/next-release pagination footer — not relevant to a single release. */ #pagination { display: none !important; } /* More breathing room around the divider between sections — tight on screen, cramped on paper. */ .cl-sec { margin-top: 0.5rem; padding-top: 0.5rem; } /* A touch larger than the screen size for paper legibility. */ .cl-sec-head { font-size: 1.05rem !important; } /* On-screen spacing above the release (#content's mt-8/mb-14 + py-8) has no benefit on paper. */ #content { margin-top: 0 !important; margin-bottom: 0 !important; } .update-container { padding-top: 0 !important; padding-bottom: 0 !important; } /* Keep a release from breaking across pages mid-entry where it can be helped. */ .update-container h2, .update-container h3, .update-container h4 { break-after: avoid; page-break-after: avoid; } .update-container pre, .update-container table { break-inside: avoid; page-break-inside: avoid; } /* Force-expand doesn't add .cl-sec--open, so a collapsed heading stays muted despite visible content. Caret has no meaning on paper — hide it rather than track rotation. */ .cl-print-target .cl-sec-head, .update-container:target .cl-sec-head { color: var(--card-fg) !important; } .cl-caret { display: none !important; } } /* Page box is ours to set; Chrome's default is wider than this needs to be. Note the browser's own header/footer band (date, URL, page number) is a print dialog setting, not something CSS can remove. */ @page { margin: 8mm 12mm; } </article></body></html>

​Hosted network diagram

​Key elements of SPF hosted

Hosted network diagram

Key elements of SPF hosted