, 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(--payer-employee-border)); background: var(--payer-badge-bg, var(--payer-employee-bg)); color: var(--payer-badge-fg, var(--payer-employee-fg)); } .payer-badge--employee { --payer-badge-bg: var(--payer-employee-bg); --payer-badge-fg: var(--payer-employee-fg); --payer-badge-border: var(--payer-employee-border); } .payer-badge--employer { --payer-badge-bg: var(--payer-employer-bg); --payer-badge-fg: var(--payer-employer-fg); --payer-badge-border: var(--payer-employer-border); } .payer-badge--both { --payer-badge-bg: var(--payer-both-bg); --payer-badge-fg: var(--payer-both-fg); --payer-badge-border: var(--payer-both-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 — rules use these (avoid raw pad px in selectors). */ --sidebar-indent: 5px; /* parent→child text step */ --sidebar-pad-category-x: var(--space-3); /* 12 — category label */ --sidebar-pad-item-x: calc(var(--sidebar-pad-category-x) + var(--sidebar-indent)); /* 17 */ --sidebar-pad-item-nested-x: calc(var(--sidebar-pad-item-x) + var(--sidebar-indent)); /* 22 */ --sidebar-pad-item-deep-x: calc(var(--sidebar-pad-item-x) + var(--sidebar-indent) * 2); /* 27 */ --sidebar-pad-item-y: 6px; --sidebar-link-pad-right: calc(var(--sidebar-hover-inset-right) + var(--space-3)); /* clear active/hover ::before inset */ /* Active leaf pill: left inset; right matches group/category hover edge. A fixed inset against a per-depth padding-left means the text-to-pill-edge gap isn't uniform across depths — it's whatever's left after the inset. 4px keeps every depth's gap comfortable: 8px at the shallowest level (top-level articles like Overview, padding-left 12px) up through 23px at the deepest (27px). --space-2 (8px) left only 4px at the shallowest. */ --sidebar-active-inset-x: var(--space-1); /* 4 */ /* Carets: absolute slot at `right: caret-right`; glyphs flex-end in slot. 28px clears ≤17px classic/overlay scrollbar + gap, plus 2px more breathing room before the edge. Parent ≥ nested. */ --sidebar-caret-right: 28px; --sidebar-caret-slot: var(--space-3); /* 12 */ --sidebar-caret-pad-x: calc(var(--sidebar-caret-right) + var(--sidebar-caret-slot)); /* 40 — text clear of slot */ /* Group/category hover tint right edge: include caret + 4px pad; not caret-pad-x (that stops at slot left and leaves the caret on white). */ --sidebar-hover-inset-right: calc(var(--sidebar-caret-right) - var(--space-1)); /* 24 */ --sidebar-caret-parent-size: 11px; --sidebar-caret-nested-size: 9px; --sidebar-caret-stroke: 1.5; --sidebar-caret-color: #5B6470; /* API method chips — fixed slot width ≈ POST so titles share one left edge; badge stays content-sized inside the slot (GET smaller than POST). */ --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.75em; /* ≈ POST 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: 500 !important; color: var(--brand-navy) !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 `right: var(--sidebar-caret-right)` so parent + nested share one far-right edge even when icon sizes differ. Category header must be full-width — otherwise absolute `right` is relative to a shrink-wrapped box and sits left of nested group carets. */ #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; /* Reserve room for the absolutely positioned caret slot. Equal Y pad so labels sit centered in the hover tint (not cramped on bottom). */ padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; padding-right: var(--sidebar-caret-pad-x) !important; margin-bottom: 6px !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: 5px !important; } /* Category hover tint via ::before (include caret; stop before scrollbar). Categories never get an active state. */ #sidebar .nav-category::before { content: ""; position: absolute; inset: 0 var(--sidebar-hover-inset-right) 0 0; border-radius: 6px; background: transparent; z-index: -1; pointer-events: none; transition: background-color 150ms; } #sidebar .nav-category:hover { background: transparent !important; } #sidebar .nav-category:hover::before { background: var(--sidebar-hover-tint); } #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; right: var(--sidebar-caret-right) !important; /* Symmetric category pad — geometric 50% matches label middle. */ top: 50% !important; bottom: auto !important; width: var(--sidebar-caret-slot) !important; height: var(--sidebar-caret-slot) !important; margin: calc(var(--sidebar-caret-slot) / -2) 0 0 0 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; /* same far-right edge as nested when glyph ≤ slot */ 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 150ms; } #sidebar .nav-category[aria-expanded="true"] .nav-category-chevron svg { transform: rotate(90deg); } #sidebar .nav-category:hover .nav-category-chevron svg { color: var(--brand-blue); } /* Kill nest-wrapper / scroll-viewport right inset so absolute caret `right` shares one edge with top-level .nav-category (indent stays on padding-left only). Mintlify's scroll viewport ships pr-8, which otherwise shifts the nested caret column relative to category carets. Re-enable a classic gutter/thin bar so Windows non-overlay scrollbars reserve track space; carets still clear overlay bars via --sidebar-caret-right. */ #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. */ #sidebar 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-caret-pad-x) var(--sidebar-pad-item-y) var(--sidebar-pad-item-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 as .nav-category-chevron. Guide groups use a direct svg child; OpenAPI tag/endpoint groups wrap the caret in a trailing div/span (h-[1lh] flex…). Nested glyphs are SLIGHTLY SMALLER than parent .nav-category carets — do not invert. Kill Mintlify -mr-0.5 / w-2 / size-3 so right edges match parent. */ #sidebar li[data-group-tag] > button > svg:last-child, #sidebar li[data-group-tag] > button > div:last-child:has(> svg), #sidebar li[data-group-tag] > button > span:last-child:has(> svg), #sidebar li[data-group-tag] > button [class*="h-[1lh]"]:has(> svg) { position: absolute !important; right: var(--sidebar-caret-right) !important; /* Nested button pad is symmetric (6px) — geometric 50% matches label middle. */ top: 50% !important; bottom: auto !important; width: var(--sidebar-caret-slot) !important; height: var(--sidebar-caret-slot) !important; min-width: 0 !important; min-height: 0 !important; margin: calc(var(--sidebar-caret-slot) / -2) 0 0 0 !important; padding: 0 !important; flex-shrink: 0; color: var(--sidebar-caret-color) !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; /* same far-right edge when glyph < slot */ pointer-events: none; } #sidebar li[data-group-tag] > button > svg:last-child { /* Direct svg sits in the slot — nested size (slightly smaller than parent). */ width: var(--sidebar-caret-nested-size) !important; height: var(--sidebar-caret-nested-size) !important; max-width: var(--sidebar-caret-nested-size) !important; max-height: var(--sidebar-caret-nested-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; } #sidebar li[data-group-tag] > button > div:last-child:has(> svg) > svg, #sidebar li[data-group-tag] > button > span:last-child:has(> svg) > svg, #sidebar li[data-group-tag] > button [class*="h-[1lh]"]:has(> svg) > svg { width: var(--sidebar-caret-nested-size) !important; height: var(--sidebar-caret-nested-size) !important; max-width: var(--sidebar-caret-nested-size) !important; max-height: var(--sidebar-caret-nested-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; } #sidebar li[data-group-tag] > button svg path { stroke-width: var(--sidebar-caret-stroke) !important; } #sidebar li[data-group-tag] > button svg { color: var(--sidebar-caret-color) !important; } /* Group hover/active tint — same inset as .nav-category (caret inside pill). */ #sidebar li[data-group-tag] > button::before { content: ""; position: absolute; inset: 0 var(--sidebar-hover-inset-right) 0 0; border-radius: 6px; background: transparent; z-index: -1; pointer-events: none; transition: background-color 150ms; } #sidebar li[data-group-tag] > button:hover, #sidebar li[data-group-tag] > button:active { background: transparent !important; } #sidebar li[data-group-tag] > button:hover::before, #sidebar li[data-group-tag] > button:active::before { background: var(--sidebar-hover-tint); } #sidebar li[data-group-tag] > button:hover svg { color: var(--brand-blue) !important; } #sidebar 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 (e.g. "State Income Tax (SIT)" under "State Taxes") — one indent step deeper */ #sidebar li[data-group-tag] > ul > li[data-group-tag] > button { padding-left: var(--sidebar-pad-item-nested-x) !important; } /* Sidebar article links — depth via pad tokens only. Active pill: left inset + right pad clears the ::before highlight edge. */ #sidebar 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-item-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 get the same nested-item indent (--sidebar-pad-item-x) as items that actually are. */ #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. */ #sidebar 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 (native hover:bg-gray-600/5 needs explicitly clearing) */ #sidebar a:hover { background: transparent !important; text-decoration: underline !important; } #sidebar 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; position: relative; z-index: 0; } #sidebar a[aria-current="page"]::before, #navigation-items a[aria-current="page"]::before { content: ""; position: absolute; /* Same right inset as .nav-category / group-button hover — do not full-bleed past caret column. */ inset: 0 var(--sidebar-hover-inset-right) 0 var(--sidebar-active-inset-x); background: var(--brand-light-blue); border-radius: 6px; z-index: -1; pointer-events: none; } #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) — ~5px past group label. */ #sidebar li[data-group-tag] > ul > li > a { padding-left: var(--sidebar-pad-item-nested-x) !important; } /* 2nd nesting level (group nested inside another group) */ #sidebar li[data-group-tag] > ul > li[data-group-tag] > ul > li > a { padding-left: var(--sidebar-pad-item-deep-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: #FFF6E3 !important; border-left: 2px solid #FFAD0D !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: #916000 !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; } /* Mintlify steals `ste-tc-table` onto its padding/scroll WRAPPER (flex DIV with [--page-padding], my/py, overflow-y-hidden). The real <table> keeps Mintlify table classes only. Scope under .ste-tax-catalog — other docs tables stay Mintlify default. Border must be on the real <table>, NOT the 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. */ .ste-tax-catalog .ste-tc-table table { width: 100%; 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 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 content's readable 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). */ .ste-tax-catalog .ste-tc-table { display: block !important; 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 payer/status/brand */ .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(--payer-both-fg); background: var(--payer-both-bg); border-color: var(--payer-both-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(--payer-employer-fg); background: var(--payer-employer-bg); border-color: var(--payer-employer-border); } .ste-tc-badge-province { color: var(--status-fg); background: var(--status-bg); border-color: var(--status-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%; } } /* ── 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: flex-start; 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; color: var(--rn-muted); border: 1px solid var(--rn-border); border-radius: 6px; padding: 2px 6px; white-space: nowrap; } /* Upcoming releases — future-dated cells from ROWS, above the year table */ .rn-upcoming { margin: 0 0 20px; } .rn-upcoming-heading { margin: 0 0 10px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--rn-fg); } .rn-upcoming-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rn-border); border-radius: 2px; background: var(--rn-surface); overflow: hidden; } .rn-upcoming-list > li + li { border-top: 1px solid var(--rn-border); } .rn-upcoming-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; text-decoration: none; color: inherit; transition: background-color 150ms ease; } .rn-upcoming-row:hover { background: var(--rn-hover); } .rn-upcoming-row:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: -2px; } .rn-upcoming-product { font-size: 13px; font-weight: 500; color: var(--rn-muted); white-space: nowrap; } .rn-upcoming-version { font-size: 14px; font-weight: 500; color: var(--rn-fg); transition: color 150ms ease; } .rn-upcoming-row:hover .rn-upcoming-version { color: var(--brand-blue); } .rn-upcoming-date { margin-left: auto; font-size: 13px; color: var(--rn-muted); white-space: nowrap; } .dark .rn-upcoming-list { background: #111827; border-color: #374151; } .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 label pill — native ships bg-primary/10 (a computed oklab blend, reads as a washed-out pastel) + rounded-lg (a bigger radius than any other pill on the site) + no border. Every comparable standalone pill on the site (.hub-footer .statuspage, .ste-tc-badge-state) pairs a light fill with a matching-tint border and sits fully rounded — .badge-new isn't the right reference here, it's a tiny 10px uppercase corner-tag, not a standalone primary label at this pill's scale. */ [data-component-part="update-label"] { background: var(--brand-light-blue) !important; color: var(--brand-blue) !important; border: 1px solid color-mix(in srgb, var(--brand-blue) 28%, white) !important; border-radius: 9999px !important; padding: 2px 11px !important; font-size: 13px !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; } /* "Upcoming Release" only — site-header.js's markUpcomingUpdateLabel() adds this class by text content (no DOM attribute distinguishes it from a numbered release). Same warm-yellow wash already used by the Warning callout on this exact page ("Release note preview" — #FFF6E3/#FFAD0D/ #916000), so the "preview" semantic reads consistently. */ [data-component-part="update-label"].sym-update-label-upcoming { background: #FFF6E3 !important; color: #916000 !important; border-color: color-mix(in srgb, #FFAD0D 40%, white) !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: 13px !important; color: var(--muted-fg) !important; margin-top: 6px !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; } </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); --sidebar-hover-tint: rgba(232, 247, 255, 0.5); /* 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); /* STE tax-article payer badges (see snippets/ste/payer-badge.jsx) */ --payer-employee-bg: #EFF6FF; --payer-employee-fg: #1D4ED8; --payer-employee-border: #BFDBFE; --payer-employer-bg: #FFF7ED; --payer-employer-fg: #C2410C; --payer-employer-border: #FED7AA; --payer-both-bg: #F5F3FF; --payer-both-fg: #6D28D9; --payer-both-border: #DDD6FE; } /* 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; } /* 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 Logout 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; } /* 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; } /* 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~="enable_my_download"]) #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; } /* 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(--payer-employee-border)); background: var(--payer-badge-bg, var(--payer-employee-bg)); color: var(--payer-badge-fg, var(--payer-employee-fg)); } .payer-badge--employee { --payer-badge-bg: var(--payer-employee-bg); --payer-badge-fg: var(--payer-employee-fg); --payer-badge-border: var(--payer-employee-border); } .payer-badge--employer { --payer-badge-bg: var(--payer-employer-bg); --payer-badge-fg: var(--payer-employer-fg); --payer-badge-border: var(--payer-employer-border); } .payer-badge--both { --payer-badge-bg: var(--payer-both-bg); --payer-badge-fg: var(--payer-both-fg); --payer-badge-border: var(--payer-both-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 — rules use these (avoid raw pad px in selectors). */ --sidebar-indent: 5px; /* parent→child text step */ --sidebar-pad-category-x: var(--space-3); /* 12 — category label */ --sidebar-pad-item-x: calc(var(--sidebar-pad-category-x) + var(--sidebar-indent)); /* 17 */ --sidebar-pad-item-nested-x: calc(var(--sidebar-pad-item-x) + var(--sidebar-indent)); /* 22 */ --sidebar-pad-item-deep-x: calc(var(--sidebar-pad-item-x) + var(--sidebar-indent) * 2); /* 27 */ --sidebar-pad-item-y: 6px; --sidebar-link-pad-right: calc(var(--sidebar-hover-inset-right) + var(--space-3)); /* clear active/hover ::before inset */ /* Active leaf pill: left inset; right matches group/category hover edge. A fixed inset against a per-depth padding-left means the text-to-pill-edge gap isn't uniform across depths — it's whatever's left after the inset. 4px keeps every depth's gap comfortable: 8px at the shallowest level (top-level articles like Overview, padding-left 12px) up through 23px at the deepest (27px). --space-2 (8px) left only 4px at the shallowest. */ --sidebar-active-inset-x: var(--space-1); /* 4 */ /* Carets: absolute slot at `right: caret-right`; glyphs flex-end in slot. 28px clears ≤17px classic/overlay scrollbar + gap, plus 2px more breathing room before the edge. Parent ≥ nested. */ --sidebar-caret-right: 28px; --sidebar-caret-slot: var(--space-3); /* 12 */ --sidebar-caret-pad-x: calc(var(--sidebar-caret-right) + var(--sidebar-caret-slot)); /* 40 — text clear of slot */ /* Group/category hover tint right edge: include caret + 4px pad; not caret-pad-x (that stops at slot left and leaves the caret on white). */ --sidebar-hover-inset-right: calc(var(--sidebar-caret-right) - var(--space-1)); /* 24 */ --sidebar-caret-parent-size: 11px; --sidebar-caret-nested-size: 9px; --sidebar-caret-stroke: 1.5; --sidebar-caret-color: #5B6470; /* API method chips — fixed slot width ≈ POST so titles share one left edge; badge stays content-sized inside the slot (GET smaller than POST). */ --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.75em; /* ≈ POST 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: 500 !important; color: var(--brand-navy) !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 `right: var(--sidebar-caret-right)` so parent + nested share one far-right edge even when icon sizes differ. Category header must be full-width — otherwise absolute `right` is relative to a shrink-wrapped box and sits left of nested group carets. */ #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; /* Reserve room for the absolutely positioned caret slot. Equal Y pad so labels sit centered in the hover tint (not cramped on bottom). */ padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; padding-right: var(--sidebar-caret-pad-x) !important; margin-bottom: 6px !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: 5px !important; } /* Category hover tint via ::before (include caret; stop before scrollbar). Categories never get an active state. */ #sidebar .nav-category::before { content: ""; position: absolute; inset: 0 var(--sidebar-hover-inset-right) 0 0; border-radius: 6px; background: transparent; z-index: -1; pointer-events: none; transition: background-color 150ms; } #sidebar .nav-category:hover { background: transparent !important; } #sidebar .nav-category:hover::before { background: var(--sidebar-hover-tint); } #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; right: var(--sidebar-caret-right) !important; /* Symmetric category pad — geometric 50% matches label middle. */ top: 50% !important; bottom: auto !important; width: var(--sidebar-caret-slot) !important; height: var(--sidebar-caret-slot) !important; margin: calc(var(--sidebar-caret-slot) / -2) 0 0 0 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; /* same far-right edge as nested when glyph ≤ slot */ 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 150ms; } #sidebar .nav-category[aria-expanded="true"] .nav-category-chevron svg { transform: rotate(90deg); } #sidebar .nav-category:hover .nav-category-chevron svg { color: var(--brand-blue); } /* Kill nest-wrapper / scroll-viewport right inset so absolute caret `right` shares one edge with top-level .nav-category (indent stays on padding-left only). Mintlify's scroll viewport ships pr-8, which otherwise shifts the nested caret column relative to category carets. Re-enable a classic gutter/thin bar so Windows non-overlay scrollbars reserve track space; carets still clear overlay bars via --sidebar-caret-right. */ #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. */ #sidebar 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-caret-pad-x) var(--sidebar-pad-item-y) var(--sidebar-pad-item-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 as .nav-category-chevron. Guide groups use a direct svg child; OpenAPI tag/endpoint groups wrap the caret in a trailing div/span (h-[1lh] flex…). Nested glyphs are SLIGHTLY SMALLER than parent .nav-category carets — do not invert. Kill Mintlify -mr-0.5 / w-2 / size-3 so right edges match parent. */ #sidebar li[data-group-tag] > button > svg:last-child, #sidebar li[data-group-tag] > button > div:last-child:has(> svg), #sidebar li[data-group-tag] > button > span:last-child:has(> svg), #sidebar li[data-group-tag] > button [class*="h-[1lh]"]:has(> svg) { position: absolute !important; right: var(--sidebar-caret-right) !important; /* Nested button pad is symmetric (6px) — geometric 50% matches label middle. */ top: 50% !important; bottom: auto !important; width: var(--sidebar-caret-slot) !important; height: var(--sidebar-caret-slot) !important; min-width: 0 !important; min-height: 0 !important; margin: calc(var(--sidebar-caret-slot) / -2) 0 0 0 !important; padding: 0 !important; flex-shrink: 0; color: var(--sidebar-caret-color) !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; /* same far-right edge when glyph < slot */ pointer-events: none; } #sidebar li[data-group-tag] > button > svg:last-child { /* Direct svg sits in the slot — nested size (slightly smaller than parent). */ width: var(--sidebar-caret-nested-size) !important; height: var(--sidebar-caret-nested-size) !important; max-width: var(--sidebar-caret-nested-size) !important; max-height: var(--sidebar-caret-nested-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; } #sidebar li[data-group-tag] > button > div:last-child:has(> svg) > svg, #sidebar li[data-group-tag] > button > span:last-child:has(> svg) > svg, #sidebar li[data-group-tag] > button [class*="h-[1lh]"]:has(> svg) > svg { width: var(--sidebar-caret-nested-size) !important; height: var(--sidebar-caret-nested-size) !important; max-width: var(--sidebar-caret-nested-size) !important; max-height: var(--sidebar-caret-nested-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; } #sidebar li[data-group-tag] > button svg path { stroke-width: var(--sidebar-caret-stroke) !important; } #sidebar li[data-group-tag] > button svg { color: var(--sidebar-caret-color) !important; } /* Group hover/active tint — same inset as .nav-category (caret inside pill). */ #sidebar li[data-group-tag] > button::before { content: ""; position: absolute; inset: 0 var(--sidebar-hover-inset-right) 0 0; border-radius: 6px; background: transparent; z-index: -1; pointer-events: none; transition: background-color 150ms; } #sidebar li[data-group-tag] > button:hover, #sidebar li[data-group-tag] > button:active { background: transparent !important; } #sidebar li[data-group-tag] > button:hover::before, #sidebar li[data-group-tag] > button:active::before { background: var(--sidebar-hover-tint); } #sidebar li[data-group-tag] > button:hover svg { color: var(--brand-blue) !important; } #sidebar 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 (e.g. "State Income Tax (SIT)" under "State Taxes") — one indent step deeper */ #sidebar li[data-group-tag] > ul > li[data-group-tag] > button { padding-left: var(--sidebar-pad-item-nested-x) !important; } /* Sidebar article links — depth via pad tokens only. Active pill: left inset + right pad clears the ::before highlight edge. */ #sidebar 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-item-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 get the same nested-item indent (--sidebar-pad-item-x) as items that actually are. */ #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. */ #sidebar 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 (native hover:bg-gray-600/5 needs explicitly clearing) */ #sidebar a:hover { background: transparent !important; text-decoration: underline !important; } #sidebar 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; position: relative; z-index: 0; } #sidebar a[aria-current="page"]::before, #navigation-items a[aria-current="page"]::before { content: ""; position: absolute; /* Same right inset as .nav-category / group-button hover — do not full-bleed past caret column. */ inset: 0 var(--sidebar-hover-inset-right) 0 var(--sidebar-active-inset-x); background: var(--brand-light-blue); border-radius: 6px; z-index: -1; pointer-events: none; } #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) — ~5px past group label. */ #sidebar li[data-group-tag] > ul > li > a { padding-left: var(--sidebar-pad-item-nested-x) !important; } /* 2nd nesting level (group nested inside another group) */ #sidebar li[data-group-tag] > ul > li[data-group-tag] > ul > li > a { padding-left: var(--sidebar-pad-item-deep-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: #FFF6E3 !important; border-left: 2px solid #FFAD0D !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: #916000 !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; } /* Mintlify steals `ste-tc-table` onto its padding/scroll WRAPPER (flex DIV with [--page-padding], my/py, overflow-y-hidden). The real <table> keeps Mintlify table classes only. Scope under .ste-tax-catalog — other docs tables stay Mintlify default. Border must be on the real <table>, NOT the 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. */ .ste-tax-catalog .ste-tc-table table { width: 100%; 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 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 content's readable 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). */ .ste-tax-catalog .ste-tc-table { display: block !important; 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 payer/status/brand */ .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(--payer-both-fg); background: var(--payer-both-bg); border-color: var(--payer-both-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(--payer-employer-fg); background: var(--payer-employer-bg); border-color: var(--payer-employer-border); } .ste-tc-badge-province { color: var(--status-fg); background: var(--status-bg); border-color: var(--status-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%; } } /* ── 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: flex-start; 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; color: var(--rn-muted); border: 1px solid var(--rn-border); border-radius: 6px; padding: 2px 6px; white-space: nowrap; } /* Upcoming releases — future-dated cells from ROWS, above the year table */ .rn-upcoming { margin: 0 0 20px; } .rn-upcoming-heading { margin: 0 0 10px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--rn-fg); } .rn-upcoming-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rn-border); border-radius: 2px; background: var(--rn-surface); overflow: hidden; } .rn-upcoming-list > li + li { border-top: 1px solid var(--rn-border); } .rn-upcoming-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; text-decoration: none; color: inherit; transition: background-color 150ms ease; } .rn-upcoming-row:hover { background: var(--rn-hover); } .rn-upcoming-row:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: -2px; } .rn-upcoming-product { font-size: 13px; font-weight: 500; color: var(--rn-muted); white-space: nowrap; } .rn-upcoming-version { font-size: 14px; font-weight: 500; color: var(--rn-fg); transition: color 150ms ease; } .rn-upcoming-row:hover .rn-upcoming-version { color: var(--brand-blue); } .rn-upcoming-date { margin-left: auto; font-size: 13px; color: var(--rn-muted); white-space: nowrap; } .dark .rn-upcoming-list { background: #111827; border-color: #374151; } .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 label pill — native ships bg-primary/10 (a computed oklab blend, reads as a washed-out pastel) + rounded-lg (a bigger radius than any other pill on the site) + no border. Every comparable standalone pill on the site (.hub-footer .statuspage, .ste-tc-badge-state) pairs a light fill with a matching-tint border and sits fully rounded — .badge-new isn't the right reference here, it's a tiny 10px uppercase corner-tag, not a standalone primary label at this pill's scale. */ [data-component-part="update-label"] { background: var(--brand-light-blue) !important; color: var(--brand-blue) !important; border: 1px solid color-mix(in srgb, var(--brand-blue) 28%, white) !important; border-radius: 9999px !important; padding: 2px 11px !important; font-size: 13px !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; } /* "Upcoming Release" only — site-header.js's markUpcomingUpdateLabel() adds this class by text content (no DOM attribute distinguishes it from a numbered release). Same warm-yellow wash already used by the Warning callout on this exact page ("Release note preview" — #FFF6E3/#FFAD0D/ #916000), so the "preview" semantic reads consistently. */ [data-component-part="update-label"].sym-update-label-upcoming { background: #FFF6E3 !important; color: #916000 !important; border-color: color-mix(in srgb, #FFAD0D 40%, white) !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: 13px !important; color: var(--muted-fg) !important; margin-top: 6px !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; } </article></body></html>

Find what you need…