/* Wide-mode landing: cap + center the content column (Omni-tight ~1150px) with side padding, rather than sprawling edge-to-edge. Omni caps its docs column at 1152px; matching it keeps the landing focused at 100% zoom. */ html[data-page-mode="wide"] #content-container { max-width: 1150px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 1.5rem !important; padding-right: 1.5rem !important; } /* Anchored headings (from a TOC click or a #hash) must land below the sticky header — banner + navbar measure 152px — not behind it. ONE value for two jobs, and they must stay equal. `scroll-margin-top` is where a clicked heading stops; Mintlify's `--scroll-mt` is the line its TOC uses to decide which section is current (it lights the last heading above scrollY + --scroll-mt + 1). Mintlify sets --scroll-mt inline from JS (6.3rem here), so with our margin at 9rem a clicked heading stopped 40px short of that line and the TOC lit the section BEFORE the one you clicked — on every page (e.g. "Creating a Flow" lit "Actions a Flow can run"). `!important` in the stylesheet beats Mintlify's inline value. 10rem = 160px, just clear of the 152px header; 9rem had clipped 8px of the heading under it. */ html { --scroll-mt: 10rem !important; } #content-container :is(h1, h2, h3, h4, h5) { scroll-margin-top: var(--scroll-mt); } /* The eyebrow / section label above the page title used to be overridden to a lime green (#A1D884, hue 99) with `!important`. It is emitted by Mintlify on EVERY page (it renders the nav section name — "ConnectWise PSA", "End-user verification", "Technician"), and it already ships with `text-primary dark:text-primary-light`, i.e. the docs.json tokens. The override therefore painted one lime element onto all ~1000 pages and, because it was `!important`, beat the `dark:` variant too — so it did not even track the theme. No rule here now: the eyebrow inherits brand teal #00B398 in light and #19D3AB in dark, the same accent as links and the active sidebar row. Don't reintroduce a hardcoded colour here; it would drift from docs.json. */ /* ============================================================ Sidebar hierarchy — two levels only, matching docs.omni.co exactly. Measured on Omni: group headers 12px/600/bright; every collapsible toggle 14px/400/muted, i.e. identical to a page link. Only the header is visually distinct, so the tree reads as sections + items. This replaces an earlier "group-heading parity" rule that lifted collapsible toggles to 12px/600/bright so they matched plain headers. That made sense when most groups were flat page lists. After the no-standalone-links work (#221/#227) nearly every group carries sub-groups, so the rule flattened the hierarchy instead — "Thread Inbox" and "Tour Inbox" rendered identically. Worse, Mintlify gives rooted top-level groups and nested sub-groups the SAME DOM (`ul.sidebar-group > li > button`), so the old selector caught Guides' sub-groups but not By role's, leaving those at the browser default 16px — larger than every other item in the sidebar. Hence: style every toggle the same and let the header carry the distinction. ============================================================ */ #sidebar-content button.group, #sidebar-content button.group * { font-size: 14px !important; font-weight: 400 !important; } /* Toggle icons are masked elements colored via `background-color`, so `color` never reaches them; match them to the muted toggle text. Group-header icons are recolored separately below. Never target the chevron. */ #sidebar-content button.group svg[class*="bg-gray"] { background-color: rgb(107, 114, 112) !important; } .dark #sidebar-content button.group svg[class*="bg-gray"] { background-color: rgb(158, 163, 163) !important; } /* Group headers stay bright, and their icon matches the label. */ .sidebar-group-header svg[class*="bg-gray"] { background-color: rgb(22, 28, 27) !important; } .dark .sidebar-group-header svg[class*="bg-gray"] { background-color: rgb(222, 227, 227) !important; } /* ============================================================ Compact sidebar + group dividers — match docs.omni.co density. Omni's docs are also Mintlify; their sidebar runs smaller nav text (14px) and group labels (12px) with a hairline between top-level section groups. Content/prose is left at the default size — only the sidebar is tightened. (Our Mintlify build doesn't emit Mintlify's native `.sidebar-nav-group-divider`, so the divider is drawn here.) ============================================================ */ #sidebar-content a { font-size: 14px !important; } /* 12px is the GROUP HEADER size only. Collapsible toggles are deliberately excluded — they take 14px above, matching page links, per Omni. Adding `ul.sidebar-group > li > button` back here would out-specify that rule and silently reintroduce the flattened hierarchy. */ #sidebar-content .sidebar-group-header { font-size: 12px !important; } /* Hairline above each non-first top-level section group. Two selectors cover Mintlify's differing dev vs production DOM without ever doubling up: - PRODUCTION wraps every group in its own `div.mt-6` (so the header is always its wrapper's :first-child — a `.sidebar-group-header:first-child` rule hid ALL dividers). The divider goes on the non-first wrappers, which carry `mt-6`. - DEV renders the headers as siblings, where `:not(:first-child)` correctly skips the first. In production every header IS a first-child, so that rule matches nothing there and can't collide with the wrapper rule. */ #sidebar-content div.mt-6:has(> .sidebar-group-header), #sidebar-content .sidebar-group-header:not(:first-child) { border-top: 1px solid rgba(22, 28, 27, 0.1); /* Balanced hairline: the link above ends with 6px of its own padding + ~3.5px of line-height leading, the group label below carries none — so the margin runs 6px shorter than the padding to land 17.5px of visible space on both sides. Overrides the wrapper's native `mt-6 lg:mt-8` (24/32px), which put ~41px above the line and ~25px below it. */ margin-top: 0.5rem !important; padding-top: 0.75rem !important; } .dark #sidebar-content div.mt-6:has(> .sidebar-group-header), .dark #sidebar-content .sidebar-group-header:not(:first-child) { border-top-color: rgba(222, 227, 227, 0.14); } /* One divider between a group's overview/landing link and its collapsible sub-groups when they share a single list — e.g. the "By role" tab, where "Guides by Role" (a plain link) is followed by the collapsible role guides. `:has()` places it only at that boundary (the first collapsible item right after a plain link), not between every sub-group. */ #sidebar-content ul.sidebar-group > li:has(> a) + li:has(> button) { border-top: 1px solid rgba(22, 28, 27, 0.1); /* Same 17.5px-each-side balance as the top-level hairline; here the button below has 6px of its own padding, so margin and padding differ by 2px. */ margin-top: 0.5rem !important; padding-top: 0.375rem !important; } .dark #sidebar-content ul.sidebar-group > li:has(> a) + li:has(> button) { border-top-color: rgba(222, 227, 227, 0.14); } /* Magic Library: one divider between the overview link ("Magic Library") and the first facet dropdown ("Verified"). There each facet is its own `mt-6` list, so `:not()` keeps the hairline on the first such list only — every later facet has an `mt-6` list before it and is skipped, and it leaves the later facets' native spacing untouched. Expanding a facet is safe: its nested lists live in a different parent, and don't carry `sidebar-group mt-6`. Spacing matches the other two hairlines — 17.5px of visible space above and below. */ #sidebar-content ul.sidebar-group.mt-6:not(ul.sidebar-group.mt-6 ~ ul.sidebar-group.mt-6) { border-top: 1px solid rgba(22, 28, 27, 0.1); margin-top: 0.5rem !important; padding-top: 0.375rem !important; } .dark #sidebar-content ul.sidebar-group.mt-6:not(ul.sidebar-group.mt-6 ~ ul.sidebar-group.mt-6) { border-top-color: rgba(222, 227, 227, 0.14); } /* ============================================================ Top-right navbar — Omni-style: plain secondary link + one fully-rounded filled primary pill. ============================================================ */ /* "Community" navbar link — plain text, no pill. */ #navbar a[href="https://www.getthread.com/aisu-community"], a[href="https://www.getthread.com/aisu-community"] { font-weight: 500 !important; } /* Primary "Thread Inbox" CTA — solid mint, 8px button (Merlin sm radius). The first-child is Mintlify's own absolutely-positioned background-fill overlay (inset:0, no content) — only fill-related properties belong on it. padding/font-size/line-height used to target that empty overlay too, which had zero visible effect: the real content box is the itself. That mattered in practice, not just in theory — Mintlify's own default classes on the turned out to be pl-3 pr-2 (12px/8px, asymmetric) on the live site, so the button's padding was never actually equal on both sides until this targeted the right element. */ #topbar-cta-button a { border-radius: 8px !important; padding: 0.45rem 0.9rem !important; font-size: 0.82rem !important; line-height: 1 !important; } #topbar-cta-button a > span:first-child { background-color: #008E78 !important; /* darker teal so white label passes AA */ background-image: none !important; border: 1px solid #008E78 !important; border-radius: 8px !important; transition: filter 0.15s ease; } #topbar-cta-button a:hover > span:first-child { filter: brightness(0.94); opacity: 1 !important; } /* Dark-green label on the mint fill (the label span is .text-white by default, so target the content wrapper + its children, not span.z-10). */ #topbar-cta-button a .z-10, #topbar-cta-button a .z-10 * { color: #ffffff !important; } /* No arrow in the CTA — hide the chevron AND clear the spacing that was reserved for it (Tailwind space-x / mr-0.5) so the label sits centered. */ #topbar-cta-button a svg { display: none !important; } #topbar-cta-button a > div { margin: 0 !important; } #topbar-cta-button a > div > span { margin: 0 !important; } /* ============================================================ Magic spark on the active table-of-contents item. Mintlify sets aria-current="location" on the current heading and updates it on scroll, so the spark follows the reader down the page. ============================================================ */ [id*="table-of-contents"] a[href^="#"] { position: relative; padding-left: 1.4em; } /* Active-TOC marker: three filled stars of different sizes that twinkle (fade in and out) IN PLACE. Only opacity animates — no rotation, no translation, so the marker never swirls or bobs. Painted via CSS mask so the stars take the theme teal. The stars are split across ::before (big + small) and ::after (medium) so the two groups fade out of phase for a livelier twinkle. */ [id*="table-of-contents"] a[aria-current="location"]::before, [id*="table-of-contents"] a[aria-current="location"]::after { content: ""; position: absolute; left: 0.02em; top: 50%; width: 1.05em; height: 1.05em; margin-top: -0.525em; background-color: #008E78; } [id*="table-of-contents"] a[aria-current="location"]::before { -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M8%202.5%20L10.1%206.9%20L14.5%209%20L10.1%2011.1%20L8%2015.5%20L5.9%2011.1%20L1.5%209%20L5.9%206.9%20Z'/%3E%3Cpath%20d='M16.5%202.2%20L17.4%204.1%20L19.3%205%20L17.4%205.9%20L16.5%207.8%20L15.6%205.9%20L13.7%205%20L15.6%204.1%20Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M8%202.5%20L10.1%206.9%20L14.5%209%20L10.1%2011.1%20L8%2015.5%20L5.9%2011.1%20L1.5%209%20L5.9%206.9%20Z'/%3E%3Cpath%20d='M16.5%202.2%20L17.4%204.1%20L19.3%205%20L17.4%205.9%20L16.5%207.8%20L15.6%205.9%20L13.7%205%20L15.6%204.1%20Z'/%3E%3C/svg%3E") center / contain no-repeat; animation: toc-star-in 0.4s ease both, toc-star-twinkle-a 2.6s ease-in-out 0.4s infinite; } [id*="table-of-contents"] a[aria-current="location"]::after { -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M17%2012%20L18.3%2014.7%20L21%2016%20L18.3%2017.3%20L17%2020%20L15.7%2017.3%20L13%2016%20L15.7%2014.7%20Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M17%2012%20L18.3%2014.7%20L21%2016%20L18.3%2017.3%20L17%2020%20L15.7%2017.3%20L13%2016%20L15.7%2014.7%20Z'/%3E%3C/svg%3E") center / contain no-repeat; animation: toc-star-in 0.4s ease both, toc-star-twinkle-b 2.15s ease-in-out 0.55s infinite; } .dark [id*="table-of-contents"] a[aria-current="location"]::before, .dark [id*="table-of-contents"] a[aria-current="location"]::after { background-color: #19D3AB; } /* Pure fade-in on activation (replays as the active heading changes). */ @keyframes toc-star-in { from { opacity: 0; } to { opacity: 1; } } /* Twinkle = opacity only, so the stars never move. Two phases, out of sync. */ @keyframes toc-star-twinkle-a { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } @keyframes toc-star-twinkle-b { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.5; } } /* Respect reduced-motion — hold the stars still and fully visible. */ @media (prefers-reduced-motion: reduce) { [id*="table-of-contents"] a[aria-current="location"]::before, [id*="table-of-contents"] a[aria-current="location"]::after { animation: none !important; } } /* ============================================================ Standardize interactive controls to Merlin's current sm radius (8px) — buttons, inputs, and the search field (frontend-stack merlin theme/shape/borderRadius.ts: xs 4 / sm 8 / md 12 / lg 16 / full 9999). Bring the search bar and the Copy-page / more-actions group in line with the CTA so radii match everywhere. Mintlify cards/callouts render 16. ============================================================ */ #search-bar-entry { border-radius: 8px !important; } #page-context-menu .rounded-l-xl { border-radius: 8px 0 0 8px !important; } #page-context-menu .rounded-r-xl { border-radius: 0 8px 8px 0 !important; } /* Hide the "Powered by Mintlify" footer badge. */ a[href*="utm_campaign=poweredBy"] { display: none !important; } /* ============================================================ Landing page — standard Mintlify layout + native components. Only the integration chips carry light custom styling. ============================================================ */ /* Connector tags on skill pages — static labels, styled to match the Changelog filter chips: square 4px, 12px Inter, 20px min-height, inset hairline border. No hover state — these are labels, not controls. */ .thread-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0.5rem 0; } .thread-chip { display: inline-flex; align-items: center; min-height: 20px; padding: 0 8px; border-radius: 9999px; font-size: 12px; font-weight: 500; line-height: 1.66; text-decoration: none !important; color: #008E78 !important; background: rgba(0, 179, 152, 0.06); box-shadow: inset 0 0 0 0.5px rgba(0, 179, 152, 0.35); } .dark .thread-chip { color: #19D3AB !important; background: rgba(25, 211, 171, 0.08); box-shadow: inset 0 0 0 0.5px rgba(25, 211, 171, 0.3); } /* Native "Thread" chip renders identically to connector chips (the `.thread-chip` base above) — no filled variant, so every connector tag reads the same. */ /* Magic Library tier chips ("Runs as: Agent / Agent + Skill / Skill"), emitted by scripts/sync_skills.py. Two tones, following BRAND.md §9's tag mapping: the Flow-triggerable tiers are the notable capability, so they keep the brand tint at weight 600; a person-run Skill is the ordinary case and takes the neutral chip (tan fill, neutral text, hairline, weight 500). Tint-only — no colored borders. rgba families match the hairlines already used in this file. */ /* The tier chip sits mid-sentence ("Runs as: [Agent] — a Flow can run it…"), so unlike the Connectors row it flows inline instead of taking its own line. The base `.thread-chips` is a block-level flex row with vertical margin; scope the override to the tier wrapper so the connector chips keep their own layout. */ .thread-chips[data-skill-tier] { display: inline-flex; vertical-align: baseline; margin: 0; } .thread-chip-tier-agent { font-weight: 600; } .thread-chip-tier-skill { color: rgba(22, 28, 27, 0.72) !important; background: #faf9f6; box-shadow: inset 0 0 0 0.5px rgba(22, 28, 27, 0.14); } .dark .thread-chip-tier-skill { color: rgba(222, 227, 227, 0.8) !important; background: rgba(222, 227, 227, 0.06); box-shadow: inset 0 0 0 0.5px rgba(222, 227, 227, 0.16); } .thread-chips[data-skill-tier] { gap: 0.3rem; } /* ============================================================ Changelog highlight-on-filter chips. Mintlify's native tag filter has no documented hook to detect its active state from custom code, so this is an independent, self-contained layer (see scripts/CHANGELOG-AUTOMATION.md). Background-tint only, no colored border — BRAND.md §19 explicitly rules out colored left-border accent cards as "not a Merlin pattern". Chip spec follows BRAND.md §9 (badges and chips): 20px min-height, 4px radius, 12px Inter. ============================================================ */ .changelog-filter-bar { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0.5rem; margin: 1rem 0 1.75rem; } /* Rail placement (≥1280px, Mintlify's "xl" breakpoint): changelog-filter.js clones the bar into ".changelog-filter-rail-panel", inserted into the same sticky column the table-of-contents occupies on every other page. Both the heading and the cloned bar sit inside that ONE panel so they share a single padding-left/width source — giving each its own copy of those values invited them drifting out of alignment with each other. w-19rem + pl-10 mirror #table-of-contents-layout's own sizing exactly, since the panel is a sibling of that column's wrapper, not a descendant of it — nothing else supplies that width/indent for it. */ .changelog-filter-rail-panel { width: 19rem; padding-left: 2.5rem; margin: 0 0 1.5rem; } .changelog-filter-bar.changelog-filter-bar--rail { /* display:flex + flex-wrap:wrap + justify-content:flex-start are all inherited from .changelog-filter-bar above — chips still wrap left-to-right as a tag cloud, just narrower. */ margin: 0; } .changelog-filter-rail-heading { /* Matches #table-of-contents-layout's "On this page" button exactly: text-gray-700/dark:text-gray-300, font-medium, text-sm. */ color: rgb(55, 65, 81); font-weight: 500; font-size: 0.875rem; line-height: 1.5rem; margin-bottom: 0.5rem; } .dark .changelog-filter-rail-heading { color: rgb(209, 213, 219); } /* Only one bar is ever meant to be visible at a time — the rail clone above 1280px (matched by Mintlify's own "xl" breakpoint, which is also what makes the rail column itself exist at all), the inline one below it. changelog-filter.js keeps both in sync regardless of which is shown, so a resize across this line never loses filter state. */ @media (min-width: 1280px) { .changelog-filter-bar:not(.changelog-filter-bar--rail) { display: none; } } .changelog-filter-chip { display: inline-flex; align-items: center; min-height: 20px; padding: 0 6px; border-radius: 8px; border: none; font-family: inherit; font-size: 12px; font-weight: 500; line-height: 1.66; cursor: pointer; color: #008E78; background: rgba(0, 179, 152, 0.06); box-shadow: inset 0 0 0 0.5px rgba(0, 179, 152, 0.35); transition: background 0.15s ease, box-shadow 0.15s ease; } .changelog-filter-chip:hover { background: rgba(0, 179, 152, 0.12); } .changelog-filter-chip.is-active { font-weight: 600; background: rgba(0, 179, 152, 0.16); box-shadow: inset 0 0 0 0.5px rgba(0, 179, 152, 0.6); } .dark .changelog-filter-chip { color: #19D3AB; background: rgba(25, 211, 171, 0.08); box-shadow: inset 0 0 0 0.5px rgba(25, 211, 171, 0.3); } .dark .changelog-filter-chip:hover { background: rgba(25, 211, 171, 0.14); } .dark .changelog-filter-chip.is-active { background: rgba(25, 211, 171, 0.2); box-shadow: inset 0 0 0 0.5px rgba(25, 211, 171, 0.6); } /* Highlighted matching subsection when a chip is active. A boxed background tint read as heavy chrome, not a Merlin pattern — so instead this colors the subsection's own heading text and bullet markers, the same teal used everywhere else on this page. Nothing about layout changes, only color, so there's no shift to guard against. */ [data-changelog-tag] { scroll-margin-top: 11rem; /* the sticky banner + navbar together measure ~9.5rem (152px) tall, so the 9rem used for anchored headings elsewhere on this site left a heading's top sliver clipped behind them — confirmed by clicking a filter chip and finding the target heading partially hidden. 11rem clears that with comfortable room to spare, even with the banner showing. */ } [data-changelog-tag].changelog-highlight > span[data-as="p"]:first-child strong { color: #00B398; transition: color 0.18s ease; } [data-changelog-tag].changelog-highlight ul li::marker { color: #00B398; transition: color 0.18s ease; } .dark [data-changelog-tag].changelog-highlight > span[data-as="p"]:first-child strong { color: #19D3AB; } .dark [data-changelog-tag].changelog-highlight ul li::marker { color: #19D3AB; } /* Same twinkling magic-spark used for the active table-of-contents item (see the [id*="table-of-contents"] rules above) — reused here rather than invented fresh, so "this section matched your filter" reads as the same visual language as "you're here" elsewhere on the site. */ [data-changelog-tag].changelog-highlight > span[data-as="p"]:first-child { position: relative; padding-left: 1.4em; } [data-changelog-tag].changelog-highlight > span[data-as="p"]:first-child::before, [data-changelog-tag].changelog-highlight > span[data-as="p"]:first-child::after { content: ""; position: absolute; left: 0.02em; top: 50%; width: 1.05em; height: 1.05em; margin-top: -0.525em; background-color: #008E78; } [data-changelog-tag].changelog-highlight > span[data-as="p"]:first-child::before { -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M8%202.5%20L10.1%206.9%20L14.5%209%20L10.1%2011.1%20L8%2015.5%20L5.9%2011.1%20L1.5%209%20L5.9%206.9%20Z'/%3E%3Cpath%20d='M16.5%202.2%20L17.4%204.1%20L19.3%205%20L17.4%205.9%20L16.5%207.8%20L15.6%205.9%20L13.7%205%20L15.6%204.1%20Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M8%202.5%20L10.1%206.9%20L14.5%209%20L10.1%2011.1%20L8%2015.5%20L5.9%2011.1%20L1.5%209%20L5.9%206.9%20Z'/%3E%3Cpath%20d='M16.5%202.2%20L17.4%204.1%20L19.3%205%20L17.4%205.9%20L16.5%207.8%20L15.6%205.9%20L13.7%205%20L15.6%204.1%20Z'/%3E%3C/svg%3E") center / contain no-repeat; animation: toc-star-in 0.4s ease both, toc-star-twinkle-a 2.6s ease-in-out 0.4s infinite; } [data-changelog-tag].changelog-highlight > span[data-as="p"]:first-child::after { -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M17%2012%20L18.3%2014.7%20L21%2016%20L18.3%2017.3%20L17%2020%20L15.7%2017.3%20L13%2016%20L15.7%2014.7%20Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M17%2012%20L18.3%2014.7%20L21%2016%20L18.3%2017.3%20L17%2020%20L15.7%2017.3%20L13%2016%20L15.7%2014.7%20Z'/%3E%3C/svg%3E") center / contain no-repeat; animation: toc-star-in 0.4s ease both, toc-star-twinkle-b 2.15s ease-in-out 0.55s infinite; } .dark [data-changelog-tag].changelog-highlight > span[data-as="p"]:first-child::before, .dark [data-changelog-tag].changelog-highlight > span[data-as="p"]:first-child::after { background-color: #19D3AB; } @media (prefers-reduced-motion: reduce) { [data-changelog-tag].changelog-highlight > span[data-as="p"]:first-child::before, [data-changelog-tag].changelog-highlight > span[data-as="p"]:first-child::after { animation: none !important; } } /* Real filtering, not just highlighting: a week with no subsection matching any active tag is hidden entirely rather than left fully visible next to the ones that do match. */ .update-container.changelog-week-hidden { display: none !important; } /* Voice AI changelog (ai-agents/voice-ai-changelog): Mintlify renders an 's tags twice — as the filter panel in the right rail (keep: it is the page's one control) and as a plain-text list under each date pill (hide: each entry already shows New / Improved / Fixed as subheads, so the list just repeats them). Scoped to .update-container so it cannot match anything outside a changelog entry. Sticky date labels keep the theme's own offset. */ .update-container .flex.flex-wrap.gap-2.text-secondary.mt-3.text-sm { display: none !important; } /* Magic Library tab icon — theme the custom stars SVG like the other (Font Awesome) tab icons. Mintlify renders a custom SVG icon (`icon: /logo/stars.svg`) as a plain with a fixed fill, so it can't follow the nav's gray→teal color the way FA icons (a masked to the same masked treatment: drop its bitmap (content:""), paint a background in currentColor (which the nav sets to gray when inactive, teal when active/hover), and mask it with the three-star shape. Result: the stars inherit the theme exactly like every other tab. */ /* Hide the raw (an shows its own SVG pixels — which rendered as a solid black sparkle — and `content:""` to drop that bitmap isn't reliable across browsers), then paint a themed sparkle with a MASKED pseudo-element: the exact technique the Font Awesome tab icons use (a masked box whose background-color = currentColor, so it is gray when the tab is inactive and teal when it's active/hovered). MUST stay scoped to `.nav-tabs-item`. An unscoped `a[href$="/skill-library/overview"]` also matches the ~20 prose links and Cards that point at the library, injecting a stray sparkle into body copy — and because the box is `1lh` tall, on 16px/28px prose it renders 8px above the text instead of on it. The tab bar is the only place this icon belongs. */ .nav-tabs-item[href$="/skill-library/overview"] img { display: none !important; } .nav-tabs-item[href$="/skill-library/overview"]::before { content: ""; display: inline-block; flex: 0 0 auto; width: 1rem; /* Match Mintlify's own icon metric: it wraps every nav icon in a `h-[1lh] flex items-center shrink-0` box, so a 1rem glyph ends up centred on the first line of the label. A 1lh box with a centred mask reproduces that wrapper on the `items-center` tab row. */ height: 1lh; background-color: currentColor; -webkit-mask: url("/logo/stars.svg") center / 1rem 1rem no-repeat; mask: url("/logo/stars.svg") center / 1rem 1rem no-repeat; } /* ============================================================ Calendly booking modal — a custom overlay + inline embed we fully control (see snippets/calendly-popup.jsx), instead of Calendly's own popup widget. The embed keeps Calendly's event header (logo/title/duration/details) above the calendar. We size the modal compact (580px) — far tighter than Calendly's ~1000px popup; the booking area scrolls within the modal if it needs to. Docs-dark blurred backdrop, 8px corners (matching cards), card-like depth with a subtle teal ring. The booking iframe is themed via the URL color params. Kept light (warm-tan) in both themes to match those params. ============================================================ */ .thread-cal-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(10, 10, 11, 0.72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .thread-cal-modal { position: relative; width: 580px; max-width: 100%; height: 620px; max-height: 88vh; background: #faf9f6; border-radius: 8px; overflow: hidden; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(0, 179, 152, 0.28); } .thread-cal-embed, .thread-cal-embed iframe { width: 100% !important; height: 100% !important; border: 0; } .thread-cal-close { position: absolute; top: 10px; right: 12px; z-index: 3; width: 28px; height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1; color: rgba(10, 10, 11, 0.5); transition: color 0.15s ease; } .thread-cal-close:hover { color: #0a0a0b; } /* Loading state shown while Calendly's booking page loads — a single calm brand spinner in place of Calendly's default loader. */ .thread-cal-embed .calendly-spinner { display: none !important; } .thread-cal-skeleton { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; background: #faf9f6; transition: opacity 0.35s ease; } .thread-cal-skeleton.is-hidden { opacity: 0; } .thread-cal-spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(10, 10, 11, 0.13); border-top-color: #008e78; animation: thread-cal-spin 0.8s linear infinite; } @keyframes thread-cal-spin { 100% { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .thread-cal-spinner { animation: none; } } /* ============================================================ Divider between top-level sidebar groups — matches docs.omni.co. Omni's Mintlify build emits its own `div.sidebar-nav-group-divider.h-px.w-full` (`bg-gray-100` / `dark:bg-white/10`) between top-level groups; our build emits none, so the groups run together. Recreated here on the group wrapper — the one div with a `.sidebar-group-header` as a direct child, which avoids keying on Tailwind classes. The `:not(:has(.sidebar-nav-group-divider))` guard is deliberate and load-bearing: the moment our Mintlify build starts emitting the native divider, this fallback switches itself off, so we can never paint two hairlines. Light uses a warm `rgba(0,0,0,.07)` rather than Omni's cool `#f3f4f6`, which is almost invisible against our tan `#FAF9F6`; dark matches Omni's `white/10` exactly. No line above a group that starts the list — this separates groups, it doesn't cap them. ============================================================ */ #sidebar-content:not(:has(.sidebar-nav-group-divider)) div:has(> .sidebar-group-header) { border-top: 1px solid rgba(0, 0, 0, 0.07); padding-top: 12px; } .dark #sidebar-content:not(:has(.sidebar-nav-group-divider)) div:has(> .sidebar-group-header) { border-top-color: rgba(255, 255, 255, 0.1); } #sidebar-content:not(:has(.sidebar-nav-group-divider)) div:has(> .sidebar-group-header):first-child { border-top: 0; padding-top: 0; } /* ============================================================ Site-wide sizing for body images and wrappers. Screenshots dropped into MDX carry no explicit width — no page in the repo sets one — so they render at their intrinsic pixel size. Two failures followed, both measured on production: 1. The previous flat `max-width: 720px` was WIDER than the prose column (`#content` measures 514px in default page mode), so every large screenshot overflowed it. Mintlify's inner wrapper is `flex justify-center` + `overflow-hidden`, so it silently CLIPPED about 110px off each side of the image rather than scaling it. 2. Nothing capped height, so portrait captures rendered enormous — the 1320x2868 phone shots on `inbox/verify.mdx` came out ~1560px tall and swamped the page. So: fit the column, and cap the height so a tall capture reads as a phone screenshot instead of a wall. Width and height are both `auto`, so the browser scales the image down inside the max box and preserves its aspect ratio (CSS replaced-element sizing). Images already narrower than the column keep their natural size — nothing is ever upscaled. Mintlify makes every content image click-to-zoom, so capping costs the reader no detail. Removed with the 720px cap: a heuristic that shrank any image whose alt text contained "icon", "thumb" or "button" to 360px. It matched 27 images, and they were almost all full-window screenshots that merely *described* a control — e.g. alt="System > Security Roles with the add button in ConnectWise" on a 744x943 capture. Alt text describes content, not size; don't reintroduce it. ============================================================ */ #content-container img, #content-area img { max-width: 100% !important; max-height: 520px !important; width: auto !important; height: auto !important; margin-inline: auto; display: block; } /* Keep the Frame panel inside the prose column too, so its tinted background and rounded border track the image rather than the viewport. */ #content-container figure, #content-area figure, #content-container .frame, #content-area .frame { max-width: 100% !important; margin-inline: auto; } /* An image used as inline chrome — a badge or a linked logo — is not a body screenshot: leave it inline and unconstrained in height (still capped to the column so it can never overflow and get clipped). */ #content-container a img, #content-container [class*="logo" i] img, #content-area a img, #content-area [class*="logo" i] img { max-height: none !important; margin-inline: 0; display: inline-block; } /* ============================================================ Magic Library widget (snippets/magic-library.jsx) — skill-library/overview. Merlin, as Thread Inbox renders it (frontend-stack packages/merlin + apps/inbox-web View/): semantic tokens from theme/colors/{light,dark}Semantic.ts; filter chips from merlin FilterBar (13/20, 2px 6px, 1px #ddd/#323537, 4px outer corners); text-small buttons for Filter / Display / Clear (600, #706f78, #F2F1EF hover); PopoverSelect popovers (256px, borderless search row, 4px radius, L-popover shadow, trailing FiCheck on single-select); antd-Table-style tan header strips; BRAND.md §9 tags (20px, 0 6px, 12/1.66, 4px). Spacing on the 4/8/12/16/24 grid. Teal behind small text is #007A68 (AA on white/tan; Merlin's #00BB99 is ~2.4:1), #00BB99 stays for checkbox fills and the focus ring. ============================================================ */ .ml { --ml-ink: #161618; /* content.primary */ --ml-2: #706f78; /* content.secondary */ --ml-3: #7e7d86; /* content.tertiary */ --ml-ph: #a09fa6; /* content.placeholder */ --ml-bg: #ffffff; /* bg.primary */ --ml-bg-2: #faf9f6; /* bg.secondary (tan) */ --ml-hover: #f2f1ef; /* bg.secondaryHover */ --ml-line: #dad9dd; /* border.primary */ --ml-line-2: #cfced4; /* border.secondary */ --ml-line-3: #e9e9eb; /* border.tertiary */ --ml-chip-line: #dddddd; /* legacy border.hover — FilterBar segments */ --ml-chip-hover: #f5f5f5; /* action.variant2 */ --ml-pop: #ffffff; /* surface.l4 */ --ml-brand: #00bb99; /* content.brand — fills, rings */ --ml-brand-ink: #007a68; /* AA teal for text and small fills */ --ml-brand-ink-hover: #005c55; --ml-brand-light: #e6faf6; /* bg.brandLight */ --ml-ok-bg: #e4fcee; /* success */ --ml-ok: #145a32; --ml-shadow: 0 0 4px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.2); --ml-ring: 0 0 0 3px #e6faf6, inset 0 0 0 1.5px #00bb99; --ml-ease: 120ms cubic-bezier(0.2, 0, 0, 1); margin: 24px 0 48px; color: var(--ml-ink); font-size: 13px; } .dark .ml { --ml-ink: #ffffff; --ml-2: #b3b2b8; --ml-3: #7e7d86; --ml-ph: #706f78; --ml-bg: #0c0c0e; --ml-bg-2: #161618; --ml-hover: #1c1c1f; --ml-line: #34343a; --ml-line-2: #3e3e44; --ml-line-3: #2e2e32; --ml-chip-line: #323537; --ml-chip-hover: #2a2c32; --ml-pop: #232326; --ml-brand-ink: #19d3ab; --ml-brand-ink-hover: #33c9ad; --ml-brand-light: #00251f; --ml-ok-bg: #0f2a1a; --ml-ok: #6fdc9c; --ml-shadow: 0 0 4px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.6); --ml-ring: 0 0 0 3px #00251f, inset 0 0 0 1.5px #00bb99; } .ml button { font-family: inherit; cursor: pointer; } .ml a { color: var(--ml-brand-ink); font-weight: 600; text-decoration: none; } .ml a:hover { color: var(--ml-brand-ink-hover); text-decoration: underline; } .ml-icon { flex: none; } /* Search — Merlin input: 1px border.secondary, brand border on hover/focus, no ring. */ .ml-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 8px; background: var(--ml-bg); box-shadow: inset 0 0 0 1px var(--ml-line-2); color: var(--ml-3); transition: box-shadow var(--ml-ease); } .ml-search:hover, .ml-search:focus-within { box-shadow: inset 0 0 0 1px var(--ml-brand); } .ml-search-idle { color: var(--ml-2); } .ml-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--ml-ink); font: inherit; font-size: 14px; } .ml-search input::placeholder { color: var(--ml-ph); } /* The shortcut hint, styled like Mintlify's own ⌘K in the header search: plain muted text, no keycap outline. */ .ml-kbd { flex: none; font: 600 12px/1 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: 0; color: var(--ml-3); padding: 0; background: none; box-shadow: none; border: 0; } /* Current value of an already-applied attribute, right-aligned on its menu row. */ .ml-opt-hint { margin-left: auto; padding-left: 12px; overflow: hidden; max-width: 55%; white-space: nowrap; text-overflow: ellipsis; color: var(--ml-3); font-size: 13px; } /* Merlin text button, size small. */ .ml-btn { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ml-2); font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: -0.1px; white-space: nowrap; transition: background var(--ml-ease), color var(--ml-ease); } .ml-btn:hover, .ml-btn[aria-expanded="true"] { background: var(--ml-hover); color: var(--ml-ink); } /* Merlin outlined button (default variant). */ .ml-btn-outline, .ml-more { color: var(--ml-brand-ink); box-shadow: inset 0 0 0 1px var(--ml-brand-ink); background: var(--ml-bg); } .ml-btn-outline:hover, .ml-more:hover { background: var(--ml-brand-light); color: var(--ml-brand-ink); } /* Segmented chip — merlin FilterBar / Inbox SelectedFiltersList. */ .ml-chip { display: inline-flex; align-items: stretch; } .ml-seg { display: inline-flex; align-items: center; gap: 6px; max-width: 170px; padding: 1px 6px; margin: 0 0 0 -1px; border: 1px solid var(--ml-chip-line); border-radius: 0; background: var(--ml-bg); color: var(--ml-ink); font-size: 13px; font-weight: 400; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background 0.2s ease; } button.ml-seg:hover { background: var(--ml-chip-hover); } .ml-seg-field { margin-left: 0; border-radius: 8px 0 0 8px; } .ml-seg-field .ml-icon { color: var(--ml-2); } .ml-seg-x { border-radius: 0 8px 8px 0; padding: 2px 4px; color: var(--ml-2); } /* Popover — merlin PopoverSelect. */ .ml-pop { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; width: 256px; max-width: calc(100vw - 32px); border-radius: 8px; background: var(--ml-pop); box-shadow: var(--ml-shadow); padding: 4px 0; } .ml-pop-sm { width: 160px; } .ml-pop-right { left: auto; right: 0; } .ml-pop-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; margin-bottom: 4px; border-bottom: 1px solid var(--ml-line-3); color: var(--ml-3); } .ml-pop-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ml-ink); font: inherit; font-size: 13px; } .ml-pop-search input::placeholder { color: var(--ml-ph); } .ml-pop-list { max-height: 320px; overflow-y: auto; padding: 0 4px; } .ml-pop-section { padding: 8px 12px 4px; color: var(--ml-2); font-size: 12px; font-weight: 600; } .ml-opt { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 0 8px; margin: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ml-ink); font-size: 13px; text-align: left; cursor: pointer; transition: background var(--ml-ease); } .ml-pop > .ml-opt { width: calc(100% - 8px); margin: 0 4px; } .ml-opt:hover { background: var(--ml-hover); } .ml-opt .ml-icon { color: var(--ml-2); } .ml-opt.is-on .ml-icon:last-child { color: var(--ml-brand); } .ml-opt input { width: 16px; height: 16px; margin: 0; border-radius: 8px; accent-color: var(--ml-brand); } .ml-opt-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ml-opt-n { color: var(--ml-3); font-size: 12px; font-variant-numeric: tabular-nums; } .ml-opt.is-empty { color: var(--ml-ph); } .ml-opt-none { padding: 8px; color: var(--ml-3); } /* Layout — ClickHouse Support Center's shape: a featured shelf, then a filter rail beside the results. Fits wide mode's ~770px column next to the docs sidebar. */ .ml-dd { position: relative; } .ml-shelf { margin-top: 24px; } .ml-shelf-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--ml-ink); font-size: 14px; font-weight: 600; } .ml-shelf-h .ml-icon { color: var(--ml-brand); } .ml-shelf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } /* Card — Merlin card (8px, L1 hairline + soft drop), brand border on hover. */ .ml-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; border: 0; border-radius: 8px; background: var(--ml-bg); box-shadow: inset 0 0 0 0.5px var(--ml-line), 0 0 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08); color: inherit; text-align: left; transition: box-shadow var(--ml-ease); } .ml-card:hover { box-shadow: inset 0 0 0 1px var(--ml-brand), 0 0 1px rgba(0, 0, 0, 0.12); } .ml-card-title { font-size: 14px; font-weight: 600; line-height: 20px; } .ml-card-desc { max-height: 40px; color: var(--ml-2); font-size: 13px; line-height: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ml-card .ml-tags { justify-content: flex-start; max-width: none; margin-top: auto; padding-top: 4px; } /* Filter bar — Inbox ViewFiltersBar: applied chips, then Filter (F), then Clear. */ .ml-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 24px 0 8px; } .ml-filter-btn { box-shadow: inset 0 0 0 1px var(--ml-line-2); } .ml-filter-btn:hover, .ml-filter-btn[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--ml-brand); } .ml-pop-filter { width: 288px; } .ml-pop-back { display: flex; align-items: center; gap: 4px; width: 100%; height: 28px; padding: 0 8px; margin-bottom: 4px; border: 0; border-radius: 8px; background: transparent; color: var(--ml-2); font-size: 12px; font-weight: 600; text-align: left; } .ml-pop-back:hover, .ml-pop-back:focus-visible { background: var(--ml-hover); color: var(--ml-ink); } .ml-pop-section { display: flex; align-items: center; gap: 4px; } .ml-pop-section .ml-icon { color: var(--ml-3); } /* Merlin/antd checkbox: 16px, 4px radius, brand fill when checked. */ .ml-box { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 16px; height: 16px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--ml-line-2); background: var(--ml-bg); color: #ffffff; } .ml-box.is-on { background: var(--ml-brand); box-shadow: none; } .ml-opt:hover .ml-box:not(.is-on) { box-shadow: inset 0 0 0 1px var(--ml-brand); } .ml-opt:focus-visible { outline: 0; background: var(--ml-hover); box-shadow: inset 0 0 0 1.5px var(--ml-brand); } .ml-results { min-width: 0; } .ml-list-head .ml-btn { height: 24px; color: var(--ml-2); } .ml-row-top { display: flex; align-items: flex-start; gap: 12px; width: 100%; } .ml-row-top .ml-title { flex: 1; min-width: 0; } /* List — Inbox ThreadListView rows under an antd-Table-style tan header. */ .ml-list-head, .ml-group-h { display: flex; justify-content: space-between; align-items: center; padding: 4px 12px; background: var(--ml-bg-2); color: var(--ml-2); font-size: 13px; font-weight: 500; line-height: 20px; } .ml-list-head { margin-top: 0; border-radius: 0; box-shadow: inset 0 -1px 0 var(--ml-line-3); } .ml-group-h { box-shadow: inset 0 -1px 0 var(--ml-line-3); } .ml-count { color: var(--ml-3); font-weight: 400; white-space: nowrap; } .ml-row { box-shadow: inset 0 -1px 0 var(--ml-line-3); } .ml-row-head { display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: 100%; padding: 8px 12px; border: 0; border-radius: 0; background: transparent; color: inherit; text-align: left; transition: background var(--ml-ease); } .ml-row-head:hover { background: var(--ml-hover); } .ml-title { font-size: 14px; font-weight: 600; line-height: 20px; color: var(--ml-ink); } .ml-row-desc { color: var(--ml-2); font-size: 13px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ml-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 50%; } /* Tags — BRAND.md §9 badge spec. */ .ml-tag { display: inline-flex; align-items: center; gap: 4px; min-height: 20px; padding: 0 6px; border-radius: 8px; background: var(--ml-bg-2); box-shadow: inset 0 0 0 0.5px var(--ml-line); color: var(--ml-2); font-size: 12px; font-weight: 500; line-height: 1.66; white-space: nowrap; } .ml-tag-accent { background: var(--ml-brand-light); box-shadow: none; color: var(--ml-brand-ink); font-weight: 600; } .ml-tag-ok { background: var(--ml-ok-bg); box-shadow: none; color: var(--ml-ok); font-weight: 600; } .ml mark { background: rgba(0, 187, 153, 0.22); color: inherit; border-radius: 2px; padding: 0 2px; } /* Expanded row */ .ml-desc, .ml-teaches { color: var(--ml-2); font-size: 14px; line-height: 1.6; } .ml-desc { margin-top: 8px; } .ml-label { margin: 16px 0 8px; color: var(--ml-2); font-size: 12px; font-weight: 600; } .ml-prompt-box { position: relative; padding: 12px 16px; border-radius: 8px; background: var(--ml-bg-2); box-shadow: inset 0 0 0 0.5px var(--ml-line); } .ml-prompt { margin: 0; padding: 0 72px 0 0; background: none; color: var(--ml-ink); font: 400 13px/1.6 "Roboto Mono", ui-monospace, Menlo, monospace; white-space: pre-wrap; word-break: break-word; } /* Merlin primary (filled) button, size small, on the AA teal. */ .ml-copy { position: absolute; top: 8px; right: 8px; height: 28px; padding: 0 8px; border: 0; border-radius: 8px; background: var(--ml-brand-ink); color: #ffffff; font-size: 12px; font-weight: 600; line-height: 1; transition: background var(--ml-ease); } .ml-copy:hover { background: var(--ml-brand-ink-hover); } .dark .ml-copy { color: #0a0a0b; } .ml-next { margin-top: 16px; padding: 12px 16px; border-radius: 8px; background: var(--ml-brand-light); font-size: 14px; line-height: 1.5; } .ml-next-label { margin-right: 4px; color: var(--ml-brand-ink); font-weight: 600; } .ml-src { margin-top: 12px; color: var(--ml-3); font-size: 13px; } .ml-more { display: block; margin: 16px auto 0; height: 32px; padding: 0 12px; border: 0; border-radius: 8px; font-size: 13px; font-weight: 600; transition: background var(--ml-ease); } .ml-empty { padding: 24px 12px; color: var(--ml-2); } .ml-empty p { margin: 0 0 12px; } .ml-empty-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } /* Merlin focus ring. */ .ml button:focus-visible, .ml a:focus-visible, .ml-opt:focus-within { outline: 0; box-shadow: var(--ml-ring); } .ml-seg:focus-visible { position: relative; z-index: 1; } .ml-search input:focus-visible, .ml-pop-search input:focus-visible, .ml-opt input:focus-visible { outline: 0; box-shadow: none; } @media (max-width: 900px) { .ml-shelf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .ml-search .ml-kbd { display: none; } .ml-pop-filter { width: calc(100vw - 32px); } .ml-shelf-grid { grid-template-columns: minmax(0, 1fr); } .ml-row-top { flex-direction: column; gap: 4px; } .ml-tags { justify-content: flex-start; max-width: none; } .ml-row-desc { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .ml-btn { height: 32px; } } @media (prefers-reduced-motion: reduce) { .ml * { transition: none !important; } } /* Skill page header — a Merlin properties block (label left, value right), so a skill page reads as the detail view of the finder row it came from. */ .ml-props { display: grid; grid-template-columns: 112px minmax(0, 1fr); margin: 8px 0 24px; border-radius: 8px; background: #ffffff; box-shadow: inset 0 0 0 0.5px #dad9dd; font-size: 14px; line-height: 20px; } .dark .ml-props { background: #0c0c0e; box-shadow: inset 0 0 0 0.5px #34343a; } .ml-prop { display: contents; } .ml-prop-k, .ml-prop-v { padding: 8px 12px; box-shadow: inset 0 -1px 0 #e9e9eb; } .dark .ml-prop-k, .dark .ml-prop-v { box-shadow: inset 0 -1px 0 #2e2e32; } .ml-prop:last-child .ml-prop-k, .ml-prop:last-child .ml-prop-v { box-shadow: none; } .ml-prop-k { color: #706f78; font-size: 13px; font-weight: 500; } .dark .ml-prop-k { color: #b3b2b8; } .ml-prop-v { color: inherit; min-width: 0; } .ml-prop-v .thread-chips { display: inline-flex; margin: 0; vertical-align: middle; } .ml-prop-v a { color: #007a68; font-weight: 600; text-decoration: none; } .ml-prop-v a:hover { text-decoration: underline; } .dark .ml-prop-v a { color: #19d3ab; } @media (max-width: 640px) { .ml-props { grid-template-columns: minmax(0, 1fr); } .ml-prop-k { padding-bottom: 0; box-shadow: none; } } /* Skill popup — Thread Inbox's ticket popup from a list view: a large card over the dimmed page, spanning the docs' grid (the JS sets top/left/width/height from the header). Main column white, properties rail tan with white cards; each scrolls on its own so the header and the prompt's context stay put. Merlin Card lg (16px), l4 shadow. */ .ml-panel { position: fixed; z-index: 60; display: flex; flex-direction: column; max-width: 100vw; overflow: hidden; border-radius: 16px; background: var(--ml-bg); color: var(--ml-ink); outline: none; container: ml-popup / inline-size; /* The 100vmax spread is the backdrop: it dims everything outside the card without a second fixed element to place. Clicking outside closes (the outside-mousedown hook). */ box-shadow: 0 0 0 100vmax rgba(10, 10, 11, 0.32), inset 0 0 0 0.5px var(--ml-line-3), var(--ml-shadow); animation: ml-panel-in 160ms cubic-bezier(0.2, 0, 0, 1); } .dark .ml-panel { box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.6), inset 0 0 0 0.5px var(--ml-line-3), var(--ml-shadow); } /* Opacity only: a transform would skew the rect the JS measures to place the popup. */ @keyframes ml-panel-in { from { opacity: 0; } to { opacity: 1; } } .ml-panel-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: none; min-height: 56px; padding: 0 12px 0 24px; background: var(--ml-bg); box-shadow: inset 0 -1px 0 var(--ml-line-3); } .ml-panel-title { margin: 0; min-width: 0; overflow: hidden; font-size: 18px; font-weight: 600; line-height: 26px; letter-spacing: -0.2px; white-space: nowrap; text-overflow: ellipsis; color: var(--ml-ink); } .ml-panel-nav { display: inline-flex; flex: none; align-items: center; gap: 4px; } .ml-panel-nav .ml-count { margin-right: 4px; font-size: 12px; } .ml-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--ml-2); transition: background var(--ml-ease), color var(--ml-ease); } .ml-icon-btn:hover:not(:disabled) { background: var(--ml-hover); color: var(--ml-ink); } .ml-icon-btn:disabled { opacity: 0.4; cursor: default; } .ml-panel-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; flex: 1; min-height: 0; } .ml-panel-main, .ml-panel-side { min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .ml-panel-main { padding: 20px 24px 32px; } .ml-panel-main > .ml-desc { margin: 0; font-size: 14px; line-height: 22px; } .ml-panel-side { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--ml-bg-2); box-shadow: inset 1px 0 0 var(--ml-line-3); } .ml-side-card { padding: 16px; border-radius: 12px; background: var(--ml-bg); box-shadow: inset 0 0 0 1px var(--ml-line-3); } .ml-side-card.ml-next { margin: 0; border-radius: 12px; background: var(--ml-brand-light); box-shadow: none; } .ml-side-props { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px 12px; align-items: start; margin: 0; font-size: 13px; line-height: 20px; } /* Mintlify's prose styles give dt/dd their own margins and padding; zero them so each label sits on the same line as its value. */ .ml-side-props dt, .ml-side-props dd { margin: 0 !important; padding: 0 !important; } .ml-side-props dt { min-height: 24px; display: flex; align-items: center; color: var(--ml-2); font-weight: 400; } .ml-side-props dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 24px; margin: 0; color: var(--ml-ink); } .ml-side-props dd a { border: 0; color: var(--ml-brand-ink); font-weight: 500; text-decoration: none; } .ml-side-props dd a:hover { text-decoration: underline; } .ml-side-props dd .ml-tag { margin: 0; } .ml-row.is-sel > .ml-row-head { background: var(--ml-brand-light); } .ml-row.is-sel .ml-title { color: var(--ml-ink); } /* Narrow popup (small laptop, tablet, phone): one column, properties under the prompt. Keyed to the popup's own width, not the window's — the sidebar takes a varying share. */ @container ml-popup (max-width: 820px) { .ml-panel-cols { display: block; overflow-y: auto; overscroll-behavior: contain; } .ml-panel-main, .ml-panel-side { overflow: visible; } .ml-panel-side { box-shadow: inset 0 1px 0 var(--ml-line-3); } } @media (max-width: 640px) { .ml-panel { border-radius: 16px 16px 0 0; } .ml-panel-bar { padding-left: 16px; } .ml-panel-main { padding: 16px; } } @media (prefers-reduced-motion: reduce) { .ml-panel { animation: none; } } /* While the popup is open. Mintlify's #content is a CSS container, so it forms its own stacking layer and the footer (later in the page) paints over anything inside it; lift the layer above the footer and sidebar (z 20), still under the header. And lock page scroll like Inbox's popup — the gutter stays reserved so the layout doesn't shift. */ html.ml-popup-open { overflow: hidden; scrollbar-gutter: stable; } html.ml-popup-open #content { z-index: 25; } /* ============================================================ Merlin, current master (frontend-stack packages/merlin theme/shape/borderRadius.ts: xs 4 / sm 8 / md 12 / lg 16 / full 9999; antdTheme Button/Input/Select 8, Popover 8, Card 12–16, Tag pill). Overrides the earlier 4px widget styles above. ============================================================ */ /* The list module — Inbox's ModuleContainer card (merlin Card lg: 16px, 0.5px tertiary hairline, L1 shadow) holding search, the filter toolbar and the list. */ .ml-module { margin-top: 24px; border-radius: 16px; background: var(--ml-bg); box-shadow: inset 0 0 0 0.5px var(--ml-line-3), 0 0 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.18); overflow: hidden; } .dark .ml-module { box-shadow: inset 0 0 0 0.5px #3e3e44; } .ml-module-head { padding: 4px 8px; box-shadow: inset 0 -0.5px 0 var(--ml-line); } .ml-module .ml-search { height: 40px; padding: 0 8px; background: transparent; box-shadow: none; border-radius: 8px; } .ml-module .ml-search:hover, .ml-module .ml-search:focus-within { box-shadow: none; background: transparent; } .ml-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 4px 8px; box-shadow: inset 0 -0.5px 0 var(--ml-line); } .ml-toolbar .ml-bar { margin: 0; flex: 1; min-width: 0; } /* Filter / Clear / Display — Inbox's view toolbar: plain muted text buttons with no box at rest, a grey fill only on hover or while their menu is open (Bryan, 2026-10-01: the always-on grey fill didn't match Inbox). */ .ml-toolbar .ml-btn, .ml-filter-btn { height: 28px; padding: 0 8px; border-radius: 8px; background: transparent; box-shadow: none; color: var(--ml-2); font-size: 13px; font-weight: 500; } .ml-toolbar .ml-btn:hover, .ml-toolbar .ml-btn[aria-expanded="true"], .ml-filter-btn:hover, .ml-filter-btn[aria-expanded="true"] { background: rgba(229, 228, 224, 0.65); box-shadow: none; color: var(--ml-ink); } .dark .ml-toolbar .ml-btn:hover, .dark .ml-toolbar .ml-btn[aria-expanded="true"], .dark .ml-filter-btn:hover, .dark .ml-filter-btn[aria-expanded="true"] { background: #2e2e32; } .ml-display .ml-btn { height: 28px; font-size: 13px; border-radius: 8px; } .ml-btn { border-radius: 8px; } /* Group/count strip — Inbox's tan group header. */ .ml-list-head, .ml-group-h { padding: 4px 16px 4px 12px; font-weight: 600; box-shadow: inset 0 -0.5px 0 var(--ml-line); } .ml-list .ml-row:last-child { box-shadow: none; } /* Rows — Inbox ThreadListView: hover overlay, background.selected when open. */ .ml-row-head { padding: 10px 16px 10px 12px; } .ml-row-head:hover { background: rgba(22, 22, 24, 0.05); } .dark .ml-row-head:hover { background: #232326; } .ml-row.is-sel > .ml-row-head { background: rgba(236, 236, 237, 0.6); } .dark .ml-row.is-sel > .ml-row-head { background: #232326; } /* Tags — merlin Tag: pill, 0 6px, 12/20, weight 600. */ .ml-tag { border-radius: 9999px; padding: 0 8px; line-height: 20px; } /* Popovers — merlin PopoverSelect on antd Popover: 8px, l4 shadow, borderless search row over a 0.5px divider, 14px option rows with a 6px hover pill, 16px tertiary icons. */ .ml-pop { border-radius: 8px; padding: 4px 0; } .ml-pop-search { height: 40px; padding: 0 12px; margin-bottom: 4px; box-shadow: inset 0 -0.5px 0 var(--ml-line); border-bottom: 0; } .ml-pop-search input { font-size: 14px; } .ml-opt { min-height: 34px; padding: 0 8px; border-radius: 6px; font-size: 14px; } .ml-opt:hover { background: rgba(236, 236, 237, 0.6); } .dark .ml-opt:hover { background: #1c1c1f; } .ml-opt .ml-icon { color: var(--ml-3); } .ml-pop-section { padding: 8px 12px 4px; font-size: 11px; font-weight: 600; color: var(--ml-3); } .ml-pop-display { width: 256px; } .ml-pop-list, .ml-panel-main, .ml-panel-side, .ml-panel-cols { scrollbar-width: thin; scrollbar-color: #c4c4c4 transparent; } .ml-pop-list::-webkit-scrollbar, .ml-panel-main::-webkit-scrollbar, .ml-panel-side::-webkit-scrollbar, .ml-panel-cols::-webkit-scrollbar { width: 12px; } .ml-pop-list::-webkit-scrollbar-thumb, .ml-panel-main::-webkit-scrollbar-thumb, .ml-panel-side::-webkit-scrollbar-thumb, .ml-panel-cols::-webkit-scrollbar-thumb { background: #c4c4c4; border: 3px solid transparent; border-radius: 12px; background-clip: padding-box; } .ml-pop-list::-webkit-scrollbar-thumb:hover, .ml-panel-main::-webkit-scrollbar-thumb:hover, .ml-panel-side::-webkit-scrollbar-thumb:hover, .ml-panel-cols::-webkit-scrollbar-thumb:hover { background-color: #7e7d86; } /* Shelf cards — merlin Card (12px). Prompt box 12px, callout 8px. */ .ml-card { border-radius: 12px; } .ml-prompt-box { border-radius: 12px; } .ml-next { border-radius: 8px; } .ml-copy, .ml-more, .ml-search, .ml-icon-btn { border-radius: 8px; } .ml-box { border-radius: 4px; } /* Skill page properties block — card radius. */ .ml-props { border-radius: 12px; overflow: hidden; } @media (max-width: 640px) { .ml-toolbar { flex-wrap: wrap; } } /* Panel top bar actions: count, prev/next | open page, close — icon-only, grouped. */ .ml-panel-sep { width: 1px; height: 16px; margin: 0 4px; background: var(--ml-line); } a.ml-icon-btn { text-decoration: none !important; color: var(--ml-2); font-weight: 400; } a.ml-icon-btn:hover { color: var(--ml-ink); } /* Reserve the library's height while its data loads. A short page puts the footer in view, and Mintlify then pins its sidebar up and out from under the header. */ .ml[aria-busy="true"] { min-height: 100vh; } /* Popup rail: Related card — rows like Inbox's list items, compact. */ .ml-side-head { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--ml-2); } .ml-related { padding: 12px 8px 8px; } .ml-related .ml-side-head { padding: 0 8px; } .ml-related-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 32px; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ml-ink); font: inherit; font-size: 13px; line-height: 18px; text-align: left; cursor: pointer; transition: background var(--ml-ease); } .ml-related-row:hover { background: var(--ml-hover); } .ml-related-row:focus-visible { outline: none; box-shadow: var(--ml-ring); } .ml-related-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ml-related-row .ml-tag { flex: none; margin: 0; }

Open the full guide — Magic Sentiment