@font-face { font-family: 'Lexend'; src: url('https://files.buildwithfern.com/signalwire.docs.buildwithfern.com/docs/0601e0a909219a542cdd581e3f8f1ff8fb208978cbc9bca1c90df02fd8062bb1/assets/fonts/lexend-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Instrument Sans'; src: url('https://files.buildwithfern.com/signalwire.docs.buildwithfern.com/docs/2ee17598a98d8a59e4df8152d015bec9ab8e4d5672cc0ab42bef806b568e3971/assets/fonts/instrument-sans.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Instrument Sans'; src: url('https://files.buildwithfern.com/signalwire.docs.buildwithfern.com/docs/2ee17598a98d8a59e4df8152d015bec9ab8e4d5672cc0ab42bef806b568e3971/assets/fonts/instrument-sans.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('https://files.buildwithfern.com/signalwire.docs.buildwithfern.com/docs/14425ba9c695763c1547f48a206b7aa60350a33ae23de09f0407877f3fcd89eb/assets/fonts/jetbrains-mono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } :root { --header-height: 108px; --header-height-real: 64px; --mobile-header-height-real: 64px; --content-width: 640px; --sidebar-width: 288px; --page-width: 100vw; --logo-height: 25px; --font-body: 'Lexend', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --font-heading: 'Instrument Sans', 'Lexend', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --font-code: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; } :root { /* for backwards compatibility */ --typography-body-font-family: var(--font-body); --typography-heading-font-family: var(--font-heading); --typography-code-font-family: var(--font-code); } .light, :root { --accent-1: #f8f9fa; --accent-2: #f1f5fc; --accent-3: #e5edfd; --accent-4: #d5e5ff; --accent-5: #c2daff; --accent-6: #acccff; --accent-7: #93b9ff; --accent-8: #709ffd; --accent-9: #044ef4; --accent-10: #0544d3; --accent-11: #104edd; --accent-12: #102c68; --accent-a1: #50515203; --accent-a2: #1563fc0a; --accent-a3: #bbd1ff55; --accent-a4: #d5e5ff; --accent-a5: #c2daff; --accent-a6: #acccff; --accent-a7: #93b9ff; --accent-a8: #0000ff55; --accent-a9: #004bf4fb; --accent-a10: #0040d2fa; --accent-a11: #0042dbef; --accent-a12: #001e5eef; --accent-contrast: #fff; --accent-surface: #eff4fdcc; --accent-indicator: #044ef4; --accent-track: #044ef4; } @supports (color: color(display-p3 1 1 1)) { @media (color-gamut: p3) { .light, :root { --accent-1: oklch(98.1% 0.0019 263.1); --accent-2: oklch(96.8% 0.0105 263.1); --accent-3: oklch(94.5% 0.0224 263.1); --accent-4: oklch(91.9% 0.0441 263.1); --accent-5: oklch(88.6% 0.0667 263.1); --accent-6: oklch(84.5% 0.0932 263.1); --accent-7: oklch(78.8% 0.1134 263.1); --accent-8: oklch(71% 0.1478 263.1); --accent-9: oklch(51.1% 0.2539 263.1); --accent-10: oklch(46.2% 0.2255 263.1); --accent-11: oklch(49% 0.2255 263.1); --accent-12: oklch(31.3% 0.1117 263.1); --accent-a1: color(display-p3 0 0.0078 0.0078 / 0.008); --accent-a2: color(display-p3 0 0.251 0.8667 / 0.032); --accent-a3: color(display-p3 0 0.298 0.9412 / 0.08); --accent-a4: color(display-p3 0.5843 0.7176 1 / 0.334); --accent-a5: color(display-p3 0 0.3333 0.9882 / 0.204); --accent-a6: color(display-p3 0 0.3333 0.9765 / 0.288); --accent-a7: color(display-p3 0 0.2902 0.9608 / 0.38); --accent-a8: color(display-p3 0 0.2745 0.9451 / 0.512); --accent-a9: color(display-p3 0 0.2039 0.9137 / 0.872); --accent-a10: color(display-p3 0 0.1725 0.7725 / 0.888); --accent-a11: color(display-p3 0 0.1882 0.8118 / 0.856); --accent-a12: color(display-p3 0 0.0863 0.3333 / 0.908); --accent-contrast: #fff; --accent-surface: color(display-p3 0.9373 0.9529 0.9843 / 0.8); --accent-indicator: oklch(51.1% 0.2539 263.1); --accent-track: oklch(51.1% 0.2539 263.1); } } } .light, :root { --grayscale-1: #fcfcfd; --grayscale-2: #f9f9fb; --grayscale-3: #f0f0f3; --grayscale-4: #e8e8ec; --grayscale-5: #e0e1e6; --grayscale-6: #d9d9e0; --grayscale-7: #cdced6; --grayscale-8: #b9bbc6; --grayscale-9: #8b8d98; --grayscale-10: #80838d; --grayscale-11: #60646c; --grayscale-12: #1c2024; --grayscale-a1: #00005503; --grayscale-a2: #00005506; --grayscale-a3: #0000330f; --grayscale-a4: #00002d17; --grayscale-a5: #0009321f; --grayscale-a6: #00002f26; --grayscale-a7: #00062e32; --grayscale-a8: #00083046; --grayscale-a9: #00051d74; --grayscale-a10: #00071b7f; --grayscale-a11: #0007149f; --grayscale-a12: #000509e3; --grayscale-contrast: #000; --grayscale-surface: #ffffffcc; --grayscale-indicator: #8b8d98; --grayscale-track: #8b8d98; } @supports (color: color(display-p3 1 1 1)) { @media (color-gamut: p3) { .light, :root { --grayscale-1: color(display-p3 0.988 0.988 0.992); --grayscale-2: color(display-p3 0.976 0.976 0.984); --grayscale-3: color(display-p3 0.94 0.941 0.953); --grayscale-4: color(display-p3 0.908 0.909 0.925); --grayscale-5: color(display-p3 0.88 0.881 0.901); --grayscale-6: color(display-p3 0.85 0.852 0.876); --grayscale-7: color(display-p3 0.805 0.808 0.838); --grayscale-8: color(display-p3 0.727 0.733 0.773); --grayscale-9: color(display-p3 0.547 0.553 0.592); --grayscale-10: color(display-p3 0.503 0.512 0.549); --grayscale-11: color(display-p3 0.379 0.392 0.421); --grayscale-12: color(display-p3 0.113 0.125 0.14); --grayscale-a1: #00005503; --grayscale-a2: #00005506; --grayscale-a3: #0000330f; --grayscale-a4: #00002d17; --grayscale-a5: #0009321f; --grayscale-a6: #00002f26; --grayscale-a7: #00062e32; --grayscale-a8: #00083046; --grayscale-a9: #00051d74; --grayscale-a10: #00071b7f; --grayscale-a11: #0007149f; --grayscale-a12: #000509e3; --grayscale-contrast: #000; --grayscale-surface: color(display-p3 1 1 1 / 80%); --grayscale-indicator: color(display-p3 0.547 0.553 0.592); --grayscale-track: color(display-p3 0.547 0.553 0.592); } } } .dark { --accent-1: #091110; --accent-2: #0e1b19; --accent-3: #062c28; --accent-4: #003b35; --accent-5: #004842; --accent-6: #005750; --accent-7: #0e6961; --accent-8: #0d8076; --accent-9: #40e0d0; --accent-10: #2fd5c6; --accent-11: #32d7c7; --accent-12: #b9f6ed; --accent-a1: #00ce0004; --accent-a2: #0ffb2b0e; --accent-a3: #00fe9820; --accent-a4: #00feb330; --accent-a5: #00fcc53e; --accent-a6: #00fdcf4e; --accent-a7: #0efdd861; --accent-a8: #0cffde79; --accent-a9: #47feeadf; --accent-a10: #36ffebd3; --accent-a11: #3affead5; --accent-a12: #c0fff5f6; --accent-contrast: #042824; --accent-surface: #0e281a80; --accent-indicator: #40e0d0; --accent-track: #40e0d0; } @supports (color: color(display-p3 1 1 1)) { @media (color-gamut: p3) { .dark { --accent-1: oklch(16.9% 0.0126 185.1); --accent-2: oklch(20.7% 0.0187 185.1); --accent-3: oklch(26.7% 0.0423 185.1); --accent-4: oklch(31.3% 0.0628 185.1); --accent-5: oklch(35.9% 0.0687 185.1); --accent-6: oklch(41% 0.0723 185.1); --accent-7: oklch(47.1% 0.0793 185.1); --accent-8: oklch(54% 0.0926 185.1); --accent-9: oklch(82.2% 0.1307 185.1); --accent-10: oklch(79% 0.1307 185.1); --accent-11: oklch(79.5% 0.1307 185.1); --accent-12: oklch(92.9% 0.0629 185.1); --accent-a1: color(display-p3 0 0.9608 0 / 0.013); --accent-a2: color(display-p3 0.2745 1 0.2392 / 0.054); --accent-a3: color(display-p3 0.1882 0.9961 0.6431 / 0.121); --accent-a4: color(display-p3 0.2275 1 0.7333 / 0.183); --accent-a5: color(display-p3 0.2863 1 0.8 / 0.237); --accent-a6: color(display-p3 0.3333 1 0.8392 / 0.299); --accent-a7: color(display-p3 0.4078 1 0.8784 / 0.37); --accent-a8: color(display-p3 0.4275 1 0.8941 / 0.465); --accent-a9: color(display-p3 0.5216 1 0.9373 / 0.859); --accent-a10: color(display-p3 0.4902 0.9961 0.9333 / 0.814); --accent-a11: color(display-p3 0.502 1 0.9294 / 0.822); --accent-a12: color(display-p3 0.8078 0.9961 0.9686 / 0.955); --accent-contrast: #042824; --accent-surface: color(display-p3 0.0706 0.149 0.102 / 0.5); --accent-indicator: oklch(82.2% 0.1307 185.1); --accent-track: oklch(82.2% 0.1307 185.1); } } } .dark { --grayscale-1: #111113; --grayscale-2: #18191b; --grayscale-3: #212225; --grayscale-4: #272a2d; --grayscale-5: #2e3135; --grayscale-6: #363a3f; --grayscale-7: #43484e; --grayscale-8: #5a6169; --grayscale-9: #696e77; --grayscale-10: #777b84; --grayscale-11: #b0b4ba; --grayscale-12: #edeef0; --grayscale-a1: #00000000; --grayscale-a2: #d8f4f609; --grayscale-a3: #ddeaf814; --grayscale-a4: #d3edf81d; --grayscale-a5: #d9edfe25; --grayscale-a6: #d6ebfd30; --grayscale-a7: #d9edff40; --grayscale-a8: #d9edff5d; --grayscale-a9: #dfebfd6d; --grayscale-a10: #e5edfd7b; --grayscale-a11: #f1f7feb5; --grayscale-a12: #fcfdffef; --grayscale-contrast: #fff; --grayscale-surface: rgba(0, 0, 0, 0.05); --grayscale-indicator: #696e77; --grayscale-track: #696e77; } @supports (color: color(display-p3 1 1 1)) { @media (color-gamut: p3) { .dark { --grayscale-1: color(display-p3 0.067 0.067 0.074); --grayscale-2: color(display-p3 0.095 0.098 0.105); --grayscale-3: color(display-p3 0.13 0.135 0.145); --grayscale-4: color(display-p3 0.156 0.163 0.176); --grayscale-5: color(display-p3 0.183 0.191 0.206); --grayscale-6: color(display-p3 0.215 0.226 0.244); --grayscale-7: color(display-p3 0.265 0.28 0.302); --grayscale-8: color(display-p3 0.357 0.381 0.409); --grayscale-9: color(display-p3 0.415 0.431 0.463); --grayscale-10: color(display-p3 0.469 0.483 0.514); --grayscale-11: color(display-p3 0.692 0.704 0.728); --grayscale-12: color(display-p3 0.93 0.933 0.94); --grayscale-a1: #00000000; --grayscale-a2: #d8f4f609; --grayscale-a3: #ddeaf814; --grayscale-a4: #d3edf81d; --grayscale-a5: #d9edfe25; --grayscale-a6: #d6ebfd30; --grayscale-a7: #d9edff40; --grayscale-a8: #d9edff5d; --grayscale-a9: #dfebfd6d; --grayscale-a10: #e5edfd7b; --grayscale-a11: #f1f7feb5; --grayscale-a12: #fcfdffef; --grayscale-contrast: #fff; --grayscale-surface: color(display-p3 0 0 0 / 5%); --grayscale-indicator: color(display-p3 0.415 0.431 0.463); --grayscale-track: color(display-p3 0.415 0.431 0.463); } } } .light, :root { color-scheme: light; --accent: rgba(4, 78, 244, 1); --background: rgba(250, 251, 252, 1); --border: initial; --sidebar-background: initial; --header-background: color-mix(in srgb, var(--background), transparent 30%); --card-background: initial; --theme-color: #fafbfc; } .dark { color-scheme: dark; --accent: rgba(64, 224, 208, 1); --background: rgba(14, 14, 24, 1); --border: initial; --sidebar-background: initial; --header-background: color-mix(in srgb, var(--background), transparent 30%); --card-background: initial; --theme-color: #0e0e18; } /* ============================================================================= SIGNALWIRE BRAND TOKENS Source: temp/signalwire-tokens.css (extracted from the brand style guide) ============================================================================= */ /* --- Brand palette (locked, mode-independent) --- */ :root { --sw-blue: #044EF4; --sw-fuchsia: #F72A72; --sw-turquoise: #40E0D0; --sw-gold: #FFD700; --sw-purple: #601BE6; /* RGB channels for alpha compositing */ --sw-blue-rgb: 4, 78, 244; --sw-fuchsia-rgb: 247, 42, 114; --sw-turquoise-rgb: 64, 224, 208; --sw-gold-rgb: 255, 215, 0; --sw-purple-rgb: 96, 27, 230; /* Fixed light background (stays light in both themes) */ --sw-light-bg: #FAFBFC; /* Typography (mode-independent) */ --type-line-height-body: 1.7; --type-line-height-heading: 1.2; --type-letter-spacing-eyebrow: 0.14em; --type-size-code: 14px; /* Radius */ --radius-sm: 4px; --radius-xl: 12px; } /* --- Dark mode tokens --- */ .dark { /* Surfaces */ --bg-page: #0e0e18; --bg-surface: #181a28; --bg-surface-raised: #222436; /* Foreground */ --fg-default: #f0f0f4; --fg-secondary: #e8e8ec; --fg-muted: #a0a0aa; --fg-subtle: #73737e; --fg-headings: var(--fg-default); --fg-emphasis: var(--sw-turquoise); --fg-emphasis-small: var(--sw-turquoise); /* Borders */ --border-default: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.15); /* Inline code */ --code-bg: rgba(255, 255, 255, 0.06); --code-fg: var(--sw-turquoise); /* Links */ --interactive-link-default: var(--sw-turquoise); --interactive-link-hover: var(--sw-fuchsia); --interactive-link-visited: var(--fg-muted); /* Callouts */ --callout-info-bg: rgba(var(--sw-blue-rgb), 0.06); --callout-info-border: rgba(var(--sw-blue-rgb), 0.18); --callout-warn-bg: rgba(var(--sw-gold-rgb), 0.04); --callout-warn-border: rgba(var(--sw-gold-rgb), 0.16); --callout-danger-bg: rgba(var(--sw-fuchsia-rgb), 0.06); --callout-danger-border: rgba(var(--sw-fuchsia-rgb), 0.18); --callout-success-bg: rgba(var(--sw-turquoise-rgb), 0.06); --callout-success-border: rgba(var(--sw-turquoise-rgb), 0.18); /* Tables */ --table-header-bg: transparent; --table-header-text: var(--sw-fuchsia); --table-row-hover: rgba(255, 255, 255, 0.03); --table-border: rgba(255, 255, 255, 0.07); /* Card */ --card-hover-border: var(--fg-default); --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); --card-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04); --card-inset-hover: inset 0 1px 0 rgba(255, 255, 255, 0.06); --card-hover-shadow: 0 16px 40px rgba(0, 0, 0, 0.25); /* Status */ --status-success: #22c55e; --status-error: #ef4444; --status-neutral: #a0a0aa; } /* --- Light mode tokens --- */ :root:not(.dark) { /* Surfaces */ --bg-page: #FAFBFC; --bg-surface: #F3F4F6; --bg-surface-raised: #E8EAF0; /* Foreground */ --fg-default: #1A1A18; --fg-secondary: #3A3A38; --fg-muted: #737371; --fg-subtle: #A8A8A6; --fg-headings: #070c2d; --fg-emphasis: var(--sw-fuchsia); --fg-emphasis-small: #AB0A42; /* Darkened fuchsia — AAA on light bg (7.1:1) */ /* Borders */ --border-default: rgba(0, 0, 0, 0.1); --border-strong: rgba(0, 0, 0, 0.18); /* Inline code */ --code-bg: rgba(0, 0, 0, 0.06); --code-fg: var(--sw-blue); /* Links */ --interactive-link-default: var(--sw-blue); --interactive-link-hover: var(--sw-fuchsia); --interactive-link-visited: var(--fg-muted); /* Callouts */ --callout-info-bg: rgba(var(--sw-blue-rgb), 0.06); --callout-info-border: rgba(var(--sw-blue-rgb), 0.18); --callout-warn-bg: rgba(var(--sw-gold-rgb), 0.04); --callout-warn-border: rgba(var(--sw-gold-rgb), 0.16); --callout-danger-bg: rgba(var(--sw-fuchsia-rgb), 0.06); --callout-danger-border: rgba(var(--sw-fuchsia-rgb), 0.18); --callout-success-bg: rgba(var(--sw-turquoise-rgb), 0.06); --callout-success-border: rgba(var(--sw-turquoise-rgb), 0.18); /* Tables */ --table-header-bg: var(--sw-blue); --table-header-text: #ffffff; --table-row-hover: rgba(0, 0, 0, 0.02); --table-border: rgba(0, 0, 0, 0.1); /* Card */ --card-hover-border: var(--sw-blue); --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); --card-inset: 0 0 0 0 transparent; --card-inset-hover: 0 0 0 0 transparent; --card-hover-shadow: 0 16px 40px rgba(0, 0, 0, 0.1); /* Status */ --status-success: #16a34a; --status-error: #dc2626; --status-neutral: #737371; } /* ============================================================================= SIGNALWIRE BRAND OVERRIDES Applies brand tokens to Fern components. Requires brand-tokens.css. ============================================================================= */ /* --- Headings: neutral color, not accent (brand rule: colored headings = violation) --- */ h1, h2, h3, h4, h5, h6, .fern-page-heading { color: var(--fg-headings); letter-spacing: -0.02em; line-height: var(--type-line-height-heading); } /* --- Body: DTCG line-height --- */ body { line-height: var(--type-line-height-body); } /* --- Links: brand link colors with fuchsia hover --- */ .fern-mdx-link, .fern-markdown a:not([class]) { transition: color 0.15s ease; } .fern-mdx-link:hover, .fern-markdown a:not([class]):hover, .fern-mdx-link:hover code, .fern-markdown a:not([class]):hover code { color: var(--interactive-link-hover); } .fern-mdx-link:focus-visible, .fern-markdown a:not([class]):focus-visible, .fern-mdx-link:focus-within code, .fern-markdown a:not([class]):focus-within code { color: var(--interactive-link-hover); outline: none; } /* --- Inline code: brand code colors per mode --- */ :not(pre) > code { background: var(--code-bg); color: var(--code-fg); border-radius: var(--radius-sm); padding: 0.125em 0.375em; font-size: var(--type-size-code); } /* --- Sidebar: brand surface color --- */ .fern-sidebar-container { background: var(--bg-surface); } /* --- Tables: brand-aligned header and borders --- */ .fern-markdown table th { background: var(--table-header-bg); color: var(--table-header-text); border-bottom: 2px solid var(--table-border); } .fern-markdown table td { border-bottom: 1px solid var(--table-border); } .fern-markdown table tr:hover td { background: var(--table-row-hover); } .fern-markdown table tr:focus-within td { background: var(--table-row-hover); outline: none; } /* --- Callouts: brand colors via Fern's data-intent attributes --- */ .fern-callout[data-intent="note"] { background: var(--callout-info-bg); border-color: var(--callout-info-border); } .fern-callout[data-intent="warning"] { background: var(--callout-warn-bg); border-color: var(--callout-warn-border); } .fern-callout[data-intent="error"] { background: var(--callout-danger-bg); border-color: var(--callout-danger-border); } .fern-callout[data-intent="success"], .fern-callout[data-intent="tip"], .fern-callout[data-intent="check"] { background: var(--callout-success-bg); border-color: var(--callout-success-border); } /* --- Cards: matches .lp-feature from style guide. Raised bg, depth shadow, inset highlight, fuchsia ring on hover. No colored borders on any state (brand rule). --- */ .fern-card { background: var(--bg-surface-raised) !important; border: none !important; border-radius: var(--radius-xl); box-shadow: var(--card-shadow), var(--card-inset) !important; transition: transform 0.3s ease, box-shadow 0.3s ease; } .fern-card.interactive:hover { transform: translateY(-3px); box-shadow: 0 0 0 1.5px rgba(var(--sw-fuchsia-rgb), 0.15), var(--card-hover-shadow), var(--card-inset-hover), inset 0 -1px 0 var(--card-hover-border) !important; } .fern-card.interactive:focus-visible { transform: translateY(-3px); box-shadow: 0 0 0 1.5px rgba(var(--sw-fuchsia-rgb), 0.15), var(--card-hover-shadow), var(--card-inset-hover), inset 0 -1px 0 var(--card-hover-border) !important; outline: none; } /* --- API property keys: brand specifies code at weight 400 only. Fern defaults to 600 which causes faux-bold blur with our single-weight woff2. --- */ .fern-api-property-key { font-weight: 400; } /* --- Touch targets: 48px minimum on mobile (DTCG/WCAG) --- */ @media (max-width: 768px) { .fern-button { min-height: 48px; } } /* ============================================================================= SIGNALWIRE DOCS — SITE-SPECIFIC STYLES Layout, components, and overrides specific to the docs site. Brand tokens live in brand-tokens.css; Fern overrides in brand-overrides.css. ============================================================================= */ /* * Diagram images: solid background + color inversion for dark mode. * * Usage: Add class="diagram" to the img element and include "diagram" * in the filename (e.g., my_diagram.webp). Fern's zoom library (rmiz) * strips classes when cloning images, so zoomed diagrams use a * path-based selector [src*="diagram"] instead. */ /* Diagram image: solid background (light mode only) */ img.diagram { background-color: var(--sw-light-bg); } /* Diagram image: invert colors in dark mode (no background) */ .dark img.diagram { background-color: transparent; filter: invert(1) hue-rotate(180deg); } /* Zoomed image: solid background */ [data-rmiz-modal-content] img { background-color: var(--sw-light-bg) !important; } .dark [data-rmiz-modal-content] img { background-color: var(--bg-page) !important; } /* Zoomed diagram: dark bg on container, invert only the image */ .dark [data-rmiz-modal-content]:has(img[src*="diagram"]) { background-color: var(--bg-page) !important; } .dark [data-rmiz-modal-content] img[src*="diagram"] { background-color: transparent !important; filter: invert(1) hue-rotate(180deg); } /* Logo right-text branding */ .fern-logo-text { font-family: var(--typography-heading-font-family), sans-serif; font-weight: 500; font-size: 1.25rem !important; color: var(--grayscale-12) !important; letter-spacing: -0.01em; position: relative; top: -1px; } /* Status dropdown link — pulsing gray dot indicator */ @keyframes status-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } } a[href*="status.signalwire.com"]::after { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-left: 0.375rem; border-radius: 50%; background-color: var(--status-neutral); vertical-align: middle; animation: status-pulse 2s ease-in-out infinite; } /* "Run in Postman" button — Fern wraps external link images with `mx-auto` (block-centered) and appends an external-link icon. Both look out of place for a small, inline-feeling CTA, so override them. On hover the image itself scales up slightly (no surrounding box) for clear, in-place feedback. */ a[href*="god.gw.postman.com"] { display: inline-block; transition: transform 0.15s ease; } a[href*="god.gw.postman.com"]:hover { transform: scale(1.05); } a[href*="god.gw.postman.com"]:focus-visible { transform: scale(1.05); outline: none; } a[href*="god.gw.postman.com"] > svg.external-link-icon { display: none; } a[href*="god.gw.postman.com"] > img { margin-inline: 0 !important; } /* Required/Optional indicator colors */ .required-yes { color: var(--status-success); font-weight: 600; } .required-no { color: var(--status-error); font-weight: 600; } /* ============================================================================= LANDING PAGE STYLING ============================================================================= */ .lp-page-container { min-height: 100vh; position: relative; .dashed-pattern { position: absolute; top: -50vh; height: calc(100% + 50vh); width: 1rem; opacity: 1; pointer-events: none; mask: linear-gradient( to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 90%, transparent 100% ); -webkit-mask: linear-gradient( to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 90%, transparent 100% ); } .dashed-pattern-left { left: -1rem; border-right: 1px solid var(--grayscale-5); } .dashed-pattern-right { right: -1rem; border-left: 1px solid var(--grayscale-5); } .main-content { max-width: 60rem; margin: 0 auto; position: relative; padding: 4rem 0 3rem; } /* --- Hero Section --- */ .hero-section { margin-bottom: 4rem; position: relative; overflow: clip; } .hero-content { position: relative; padding: 0 2rem; } /* --- Products Section --- */ .products-section { border-top: 1px solid var(--grayscale-5); padding: 3.5rem 2rem; } .products-section h2 { font-size: 1.25rem; font-weight: 700; color: var(--grayscale-12); margin-bottom: 0.25rem; } .section-header { margin-bottom: 2rem; } .section-header p { font-size: 0.875rem; color: var(--text-body); } /* --- Homepage Callout --- */ .hp-callout { display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem 2rem; margin: 2rem 2rem 3rem; border-radius: 0.75rem; background: var(--grayscale-a2); font-size: 0.875rem; } .hp-callout-desc { color: var(--grayscale-a11); flex: 1; line-height: 1.5; } .hp-callout-desc strong { color: var(--grayscale-12); font-weight: 700; } /* --- Responsive Design --- */ @media (max-width: 640px) { .main-content { padding: 2rem 0; } .dashed-pattern-left, .dashed-pattern-right { display: none; } .hero-section { margin-bottom: 2.5rem; } .hero-content { padding: 0 1rem; } .products-section { padding: 2.5rem 1rem; } .hp-callout { flex-direction: column; align-items: flex-start; padding: 1rem; margin: 0 1rem; gap: 0.25rem; } } } /* ============================================================================= PRODUCT SELECTOR STYLING ============================================================================= * * 3-column grouped layout for the product dropdown. * * Column 1 (Products): Platform, Call Flow Builder * Column 2 (SDKs): Server SDKs, Browser SDK * Column 3 (APIs): APIs, SWML * * Home is hidden. Compatibility API appears as a footer link. */ /* Custom SVG product icons — match Font Awesome icon sizing. FA icons render at ~23px inside the 56px container. Fern wraps custom SVGs in span.fern-file-icon.size-5 (Tailwind 1.25rem = 20px). */ .fern-selection-item-icon .fern-file-icon { width: 23px !important; height: 23px !important; } .fern-selection-item-icon .fern-file-icon svg { width: 100%; height: 100%; } /* --- Desktop (≥ 1024 px) --- */ @media (min-width: 1024px) { /* Dropdown panel — rounded corners, scroll when content exceeds viewport */ div[data-testid="product-dropdown-content"] { border-radius: 1.5rem !important; max-height: 70vh; overflow-y: auto; } div:has(> .fern-product-selector-radio-group) { margin-top: 0.5rem; } /* 3-column grouped grid */ .fern-product-selector-radio-group { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 1.5rem; row-gap: 0.5rem; padding: 3rem 1.25rem 0.4rem; /* Hide Home */ > a[href="/docs"] { display: none; } /* Anchor base styling */ > a { max-width: 320px; position: relative; .fern-selection-item { border-radius: 1rem; height: 100%; } } /* --- Column 1: Products --- */ > a[href*="platform"] { grid-column: 1; grid-row: 1; } > a[href*="call-flow-builder"] { grid-column: 1; grid-row: 2; } /* --- Column 2: SDKs --- */ > a[href*="server-sdks"] { grid-column: 2; grid-row: 1; } > a[href*="browser-sdk"] { grid-column: 2; grid-row: 2; } /* --- Column 3: APIs --- */ > a[href$="/apis"] { grid-column: 3; grid-row: 1; } > a[href*="swml"] { grid-column: 3; grid-row: 2; } /* Full-width separator line above the footer row */ &::after { content: ""; grid-column: 1 / -1; grid-row: 3; align-self: start; border-top: 1px solid var(--grayscale-a5); pointer-events: none; } /* Compatibility API — text-only link, right-aligned */ > a[href*="compatibility-api"] { grid-column: 1 / -1; grid-row: 3; max-width: none; width: fit-content; margin-left: auto; display: flex; align-items: center; padding: 0.5rem 0.25rem 0; .fern-selection-item { display: none; } &::after { content: "Migrating from Twilio™? See Compatibility API \2192"; font-size: 0.8rem; color: var(--grayscale-a9); } &:hover::after { color: var(--accent-a11); } &:focus-visible::after { color: var(--accent-a11); } } /* Group header labels — shared style */ > a[href*="platform"]::before, > a[href*="server-sdks"]::before, > a[href$="/apis"]::before { position: absolute; top: -2rem; left: 0.5rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grayscale-a9); pointer-events: none; } > a[href*="platform"]::before { content: "Explore SignalWire"; color: var(--text-primary); } > a[href*="server-sdks"]::before { content: "SDKs"; } > a[href$="/apis"]::before { content: "APIs"; } } } /* --- Mobile (< 1024 px) --- */ @media (max-width: 1023px) { /* Hide Home */ .fern-product-selector-radio-group > a[href="/docs"] { display: none !important; } /* Top padding for first group label, margin for subsequent group labels */ .fern-product-selector-radio-group { padding-top: 2rem; } .fern-product-selector-radio-group > a[href*="server-sdks"], .fern-product-selector-radio-group > a[href$="/apis"] { margin-top: 2rem; } /* position: relative + overflow: visible so ::before isn't clipped by the anchor */ .fern-product-selector-radio-group > a[href*="platform"], .fern-product-selector-radio-group > a[href*="server-sdks"], .fern-product-selector-radio-group > a[href$="/apis"] { position: relative; overflow: visible !important; } /* Group labels — repositioned for vertical list */ .fern-product-selector-radio-group > a[href*="platform"]::before, .fern-product-selector-radio-group > a[href*="server-sdks"]::before, .fern-product-selector-radio-group > a[href$="/apis"]::before { position: absolute; top: -1.5rem; left: 0.5rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grayscale-a9); pointer-events: none; } .fern-product-selector-radio-group > a[href*="platform"]::before { content: "Explore SignalWire"; color: var(--text-primary); } .fern-product-selector-radio-group > a[href*="server-sdks"]::before { content: "SDKs"; } .fern-product-selector-radio-group > a[href$="/apis"]::before { content: "APIs"; } /* Compatibility API — same footer treatment as desktop */ .fern-product-selector-radio-group > a[href*="compatibility-api"] { display: flex !important; justify-content: flex-end; align-items: center; padding: 0.5rem 0.25rem 0; border-top: 1px solid var(--grayscale-a5); margin-top: 0.25rem; } .fern-product-selector-radio-group > a[href*="compatibility-api"] .fern-selection-item { display: none; } .fern-product-selector-radio-group > a[href*="compatibility-api"]::after { content: "Migrating from Twilio™? See Compatibility API \2192"; font-size: 0.8rem; color: var(--grayscale-a9); margin-bottom: 2px; } .fern-product-selector-radio-group > a[href*="compatibility-api"]:hover::after { color: var(--accent-a11); } .fern-product-selector-radio-group > a[href*="compatibility-api"]:focus-visible::after { color: var(--accent-a11); } } /* ============================================================================= TABS AFTER PARAMFIELD — SPACING FIX When a component immediately follows a , the tab bar's negative first-child margin (-12px) causes it to overlap the ParamField's bottom border. This adds breathing room so tabs render naturally as sub-content of the field above. ============================================================================= */ .fern-api-property + div[data-orientation="horizontal"] { margin-top: 1.25rem; padding-left: 0.75rem; } /* ============================================================================= VARIANT SIDEBAR SECTIONS — SPACING FIX Match the 24px section gap from non-variant sidebars (e.g. Server SDK v4). V4 uses `ul.space-y-6` which gives each

margin-bottom: 24px. V2 with `collapsed: false` uses `ul.fern-sidebar-group-level-1.mt-2` where

elements only get margin-bottom: 1px by default. ========================================================================== */ .fern-sidebar-group-level-1.mt-2 > li { margin-bottom: 24px; } .fern-sidebar-group-level-1.mt-2 > li:last-child { margin-bottom: 0; } /* Reusable loading-skeleton (shimmer) for custom MDX components, ported from the SignalWire components design reference. The original drove it with --skeleton-base / --skeleton-shimmer design tokens; here those map onto Fern's theme-aware grayscale vars so it follows light/dark. Loaded globally via docs.yml `css:`. Markup comes from this folder's index.tsx (`.sw-skeleton`). */ .sw-skeleton { background: var(--grayscale-a3); border-radius: 8px; position: relative; overflow: hidden; flex: none; /* keep its size in flex layouts */ } .sw-skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--grayscale-a4), transparent); animation: sw-shimmer 1.5s infinite; } @keyframes sw-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .sw-skeleton::after { animation: none; } } /* Non-Latin voice-name fallback. The catalog carries ~190 names across ~24 scripts (Arabic, CJK, Devanagari, Ethiopic, Hangul, …) and the docs body font (Lexend, Latin-only subset) can't render them — Firefox then walks the SYSTEM font list and tofu's on any script the OS lacks. Fix: serve Noto via the Google Fonts CSS API, which returns one @font-face per script EACH WITH ITS OWN unicode-range, so the browser downloads only the slices whose glyphs actually appear (CJK is the only heavy one and is itself range-sliced). Needs no build-time knowledge of the glyph set — right for a runtime CDN catalog. Wired into --vw-i18n-font below, used per-character after the body font (Latin stays Lexend). If a CSP ever blocks fonts.googleapis.com/gstatic.com, self-host range-subsetted Noto instead. */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&family=Noto+Sans+Arabic:wght@400;700&family=Noto+Sans+Hebrew:wght@400;700&family=Noto+Sans+Devanagari:wght@400;700&family=Noto+Sans+Bengali:wght@400;700&family=Noto+Sans+Tamil:wght@400;700&family=Noto+Sans+Telugu:wght@400;700&family=Noto+Sans+Kannada:wght@400;700&family=Noto+Sans+Malayalam:wght@400;700&family=Noto+Sans+Gujarati:wght@400;700&family=Noto+Sans+Gurmukhi:wght@400;700&family=Noto+Sans+Oriya:wght@400;700&family=Noto+Sans+Sinhala:wght@400;700&family=Noto+Sans+Thai:wght@400;700&family=Noto+Sans+Lao:wght@400;700&family=Noto+Sans+Khmer:wght@400;700&family=Noto+Sans+Myanmar:wght@400;700&family=Noto+Sans+Ethiopic:wght@400;700&family=Noto+Sans+Armenian:wght@400;700&family=Noto+Sans+Georgian:wght@400;700&family=Noto+Sans+Canadian+Aboriginal:wght@400;700&family=Noto+Sans+SC:wght@400;700&family=Noto+Sans+JP:wght@400;700&family=Noto+Sans+KR:wght@400;700&display=swap'); /* Voice widget — compact rows. Ported from the design mockups in docs/superpowers/specs/2026-06-14-voice-widget-rows-assets/ (vw-rows-theme.html / vw-rows.html / vw-rows-skeleton.html), with their hardcoded hex mapped to the docs' theme-aware brand tokens (fern/brand-tokens.css) so the widget follows light/dark automatically: mockup --page → --bg-page --surface/--card → --bg-surface-raised --ink → --fg-default --meta/--ink2/--codefg → --fg-secondary --muted → --fg-muted --line → --border-default --line2 → --grayscale-a4 (lighter hairline) --hover → --table-row-hover --accent → --accent --accon → --accent-contrast --codebg → --code-bg --good → --status-success Self-contained and scoped under .vw.vw-rows (the widget's root className). The model code is deliberately NEUTRAL (--fg-secondary), NOT --code-fg: the docs inline-

 --code-fg equals
   --accent in both themes (blue/turquoise), so a default  would render the model the same
   color as Copy and read as clickable. */
.vw.vw-rows {
  --vw-bg: var(--bg-page);
  --vw-card: var(--bg-surface-raised);
  --vw-line: var(--border-default);
  /* Lighter than the container border — used only for the row dividers. Grayscale alpha so it stays
     subtle on both the light (#E8EAF0) and dark (#222436) surfaces. */
  --vw-line2: var(--grayscale-a4);
  --vw-fg: var(--fg-default);
  --vw-fg2: var(--fg-secondary);
  --vw-muted: var(--fg-muted);
  --vw-accent: var(--accent);
  /* i18n name stack: the docs body font FIRST (Latin names stay Lexend), then the Noto script
     families (loaded by the @import above) for per-character fallback on non-Latin glyphs. Applied
     only to the text that comes from the catalog (.vw-name, .vw-tooltip) — meta/provider/model are
     always Latin. CJK order is SC→JP→KR: the catalog's Han names are mostly Chinese (zh/wuu/yue), so
     SC first gives the majority correct glyph shapes; Japanese kanji render with SC Han forms
     (legible, a hair off — Han unification), Korean Hangul resolves to KR regardless. */
  --vw-i18n-font: var(--typography-body-font-family), "Noto Sans", "Noto Sans Arabic",
    "Noto Sans Hebrew", "Noto Sans Devanagari", "Noto Sans Bengali", "Noto Sans Tamil",
    "Noto Sans Telugu", "Noto Sans Kannada", "Noto Sans Malayalam", "Noto Sans Gujarati",
    "Noto Sans Gurmukhi", "Noto Sans Oriya", "Noto Sans Sinhala", "Noto Sans Thai", "Noto Sans Lao",
    "Noto Sans Khmer", "Noto Sans Myanmar", "Noto Sans Ethiopic", "Noto Sans Armenian",
    "Noto Sans Georgian", "Noto Sans Canadian Aboriginal", "Noto Sans SC", "Noto Sans JP",
    "Noto Sans KR", sans-serif;
  /* Size/line-height only — DON'T override font-family here: inherit the docs body font (Lexend) for
     the chrome; the non-Latin fallback is scoped to .vw-name/.vw-tooltip via --vw-i18n-font. The
     earlier `system-ui` override tofu'd non-Latin names on Firefox (system fallback misses scripts). */
  color: var(--vw-fg); font-size: 14px; line-height: 1.45;
}
.vw.vw-rows.vw-error { padding: 2rem; color: var(--error-text); }

/* ── Header (title + live count) ─────────────────────────────────────────────────────────────── */
.vw-rows .vw-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: .6rem; }
.vw-rows .vw-title { font-size: 1.1rem; font-weight: 700; }
/* --fg-secondary (not --fg-muted): small text, --fg-muted (#737371) is only ~3.95:1 on the light
   surface — below the AA 4.5:1 floor. */
.vw-rows .vw-count { color: var(--vw-fg2); font-weight: 400; font-size: .82rem; margin-left: .4rem; }

/* ── Toolbar: pill controls; sticks below the fixed docs header while the list scrolls. ────────── */
.vw-rows .vw-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem;
  position: sticky; top: var(--header-height, 0px); background: var(--vw-bg); padding: .5rem 8px; z-index: 2; }
/* flex:1 1 auto (NOT 1 1 0): the selects stretch to fill the bar edge-to-edge, but keep their content
   width as the flex-basis so the free space is shared on top of it — final widths track each pill's
   label/value length (Provider wider than Gender) rather than being forced equal. */
.vw-rows .vw-select { display: flex; align-items: center; gap: .35rem; flex: 1 1 auto; min-width: 0;
  font-size: .8rem; color: var(--vw-muted);
  background: var(--vw-card); border: 1px solid var(--vw-line); border-radius: 9px; padding: .4rem .7rem; }
/* flex:1 + min-width:0 so the native control fills the stretched pill (and can shrink to ellipsis). */
.vw-rows .vw-select select { border: none; background: transparent; color: var(--vw-fg); font-weight: 600;
  font-size: .8rem; padding: 0; cursor: pointer; flex: 1; min-width: 0; }
/* Chromium derives the option popup's colors from the select's computed background — transparent
   would yield a white popup with near-white text in dark mode, so pin both explicitly. */
.vw-rows .vw-select option { background: var(--vw-card); color: var(--vw-fg); }
.vw-rows .vw-search { padding: .4rem .7rem; min-width: 200px; background: var(--vw-card);
  border: 1px solid var(--vw-line); border-radius: 9px; color: inherit; font-size: .8rem; }

/* Group toggle as a segmented control: gray track, raised active segment. */
.vw-rows .vw-group { display: flex; margin-left: auto; background: var(--grayscale-a3); border-radius: 9px; padding: 2px; }
.vw-rows .vw-group button { padding: .35rem .7rem; background: transparent; color: var(--vw-muted); border: none;
  border-radius: 7px; cursor: pointer; font-size: .78rem; }
.vw-rows .vw-group button.on { background: var(--vw-card); color: var(--vw-fg); font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* Section header between row-groups when grouping by provider/language. */
.vw-rows .vw-rsection { margin-bottom: 1.25rem; }
.vw-rows .vw-section-title { font-size: .85rem; font-weight: 650; margin: .5rem 0 .55rem; text-transform: capitalize; }
.vw-rows .vw-section-title span { color: var(--vw-muted); font-weight: 400; margin-left: .3rem; }

/* ── The list: bordered, rounded container that lifts off the page (like the card). ───────────── */
/* overflow:VISIBLE (not hidden): a row's sample-text popover must be able to escape the list — the
   cards' grid likewise never clips. The rounded corners are instead carried by rounding the first/
   last rows below, so on-hover row backgrounds still follow the container's rounded shape. */
.vw-rows .vw-list { list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--vw-line); border-radius: 14px; overflow: visible; background: var(--vw-card);
  box-shadow: var(--card-shadow), var(--card-inset); }

/* Row: hairline-divided, full-width, uniform height; subtle background on hover. The inner 
   carries the flex layout + the per-row accessible name. overflow:visible on the row so the sample-
   text popover can escape upward.
   margin/padding RESET: the rows are s rendered inside MDX, so Fern's prose styles apply a
   vertical `margin: 7px 0` and a `padding-inline-start` to every 
. The margins open a ~7px gap
   between rows (filled by the list's card background) that the per-row :hover background — painted on
   the 
 border-box — does NOT cover, so the highlight cut off short above/below each row; the
   inline padding also indented the rows. Zero both so the hover fill spans the full row edge-to-edge
   and rows sit flush like the source mockup. */
.vw-rows .vw-row { margin: 0; padding: 0; border-bottom: 1px solid var(--vw-line2); transition: background .12s ease; }
.vw-rows .vw-row:last-child { border-bottom: none; }
/* Round the end rows to ~the list's inner radius (14px border-radius − 1px border) so a hovered
   first/last row's background doesn't square off the container's rounded corners now that the list
   no longer clips. */
.vw-rows .vw-row:first-child { border-top-left-radius: 13px; border-top-right-radius: 13px; }
.vw-rows .vw-row:last-child { border-bottom-left-radius: 13px; border-bottom-right-radius: 13px; }
.vw-rows .vw-row:hover { background: var(--table-row-hover); }
.vw-rows .vw-row:focus-visible { background: var(--table-row-hover); outline: none;
}
.vw-rows .vw-row:focus-within { background: var(--table-row-hover); }
.vw-rows .vw-row-inner { display: flex; align-items: center; gap: 13px; padding: 10px 15px;
  min-height: 58px; position: relative; }
/* The row deliberately does NOT take a z-index on hover. Lifting it made the whole row a stacking
   context above the sticky toolbar (z-index:2), so a row scrolled partly under the toolbar painted
   OVER it on hover. The row stays at z-index:auto (below the toolbar); only the sample-text popover
   (z-index:30) needs to escape, and it beats the toolbar's z-index on its own — so the popover
   paints above the toolbar while the row body never does. */

/* Ghost play button: 38px outline circle at rest; fills with the accent + equalizer while playing. */
.vw-rows .vw-play { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--vw-fg); border: 1.5px solid var(--vw-line); font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, border-color .15s ease, color .15s ease; }
.vw-rows .vw-play:hover:not(.vw-playing) { border-color: var(--vw-accent); color: var(--vw-accent); }
.vw-rows .vw-play:focus-visible:not(.vw-playing) { border-color: var(--vw-accent); color: var(--vw-accent); outline: none;
}
.vw-rows .vw-play.vw-playing { background: var(--vw-accent); border-color: var(--vw-accent); color: var(--accent-contrast); }
/* Play (rest) + stop (reduced-motion) SVG glyphs, sized to the old "▶"/"■" footprint. */
.vw-rows .vw-play svg { width: 13px; height: 13px; display: block; }

/* Equalizer bars while playing; .vw-stop is the reduced-motion fallback (swapped in below). */
.vw-rows .vw-eq { display: inline-flex; gap: 2.5px; align-items: flex-end; height: 12px; }
.vw-rows .vw-eq i { width: 2.5px; background: currentColor; border-radius: 1px; transform-origin: 50% 100%;
  animation: vw-eqb 1s ease-in-out infinite; }
.vw-rows .vw-eq i:nth-child(1) { height: 60%; }
.vw-rows .vw-eq i:nth-child(2) { height: 100%; animation-delay: .2s; }
.vw-rows .vw-eq i:nth-child(3) { height: 45%; animation-delay: .4s; }
@keyframes vw-eqb { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1); } }
.vw-rows .vw-stop { display: none; }

/* Name + meta block — min-width:0 so the name/meta ellipsize instead of widening the row. The two
   lines carry FIXED line-heights (18px + 16px + the 2px gap = 36px) so the block is shorter than the
   38px play circle: the play circle is then the tallest cell in every row, which (with the row's
   min-height:58px and 10px top/bottom padding → 58px) keeps every loaded row EXACTLY the same height
   as a skeleton row (whose 38px play placeholder is likewise the tallest) → zero layout shift. */
.vw-rows .vw-row-mid { flex: 1; min-width: 0; }
.vw-rows .vw-row-nm { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* Name: cleaned display name, single line, ellipsis if absurdly long (cleaned names fit). The full
   original lives in title=/the icon tooltip. The display:block + word-break/line-clamp resets
   override the cards' bare `.vw-name` (which sets -webkit-box + -webkit-line-clamp:2 for the cards'
   2-line wrap; it also matches here because the rows root carries the `vw` class) so the row name
   stays strictly single-line with a tail ellipsis. */
.vw-rows .vw-name { display: block; flex: 0 1 auto; font-family: var(--vw-i18n-font); font-weight: 650;
  font-size: 14.5px; line-height: 18px;
  letter-spacing: -.01em; color: var(--vw-fg); white-space: nowrap; word-break: normal;
  -webkit-line-clamp: none; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* Meta — muted plain-middot: language · gender · provider · model. Single line; truncates with
   ellipsis (never wraps → uniform row height). */
.vw-rows .vw-row-meta { display: flex; align-items: center; gap: 6px; margin-top: 2px;
  font-size: 12px; line-height: 16px; color: var(--vw-fg2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-rows .vw-row-meta > span { flex: 0 0 auto; }
.vw-rows .vw-dot { opacity: .5; }
.vw-rows .vw-gender { text-transform: capitalize; }
/* Provider in the meta is plain text (NOT the uppercase chip the cards use in their footer) — it
   reads as one of the middot-separated meta facts. The text-transform/letter-spacing/font-* resets
   override the cards' bare `.vw-prov` rule (loaded globally; it also matches because the rows root
   carries the `vw` class). Shrink-safe so a long provider truncates. */
.vw-rows .vw-prov { min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto;
  text-transform: none; letter-spacing: normal; font-size: inherit; font-weight: inherit;
  color: inherit; white-space: nowrap; }
/* Model: the real (normalized) model as NEUTRAL inline-code — mono + --code-bg + --fg-secondary fg
   (NOT --code-fg, which equals --accent and would read as clickable). Single-line; ellipsizes at the
   tail if unusually long; the raw model stays in title=/copy. */
.vw-rows .vw-model { font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--vw-fg2);
  background: var(--code-bg); border-radius: 5px; padding: 1px 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }

/* Sample-text popover: a fixed-width (220px), icon-anchored disclosure on the right of the row (left
   of Copy). Opens upward and is RIGHT-anchored so it extends leftward into the row and never spills
   off the right edge. Revealed on hover/focus-within; the trigger carries aria-describedby → .vw-tooltip. */
.vw-rows .vw-tooltip-wrap { flex: 0 0 auto; position: relative; display: inline-flex; align-items: center;
  color: var(--vw-muted); cursor: help; transition: color .15s ease; }
.vw-rows .vw-tooltip-wrap:hover, .vw-rows .vw-tooltip-wrap:focus-within { color: var(--vw-accent); }
.vw-rows .vw-tooltip-icon { display: inline-flex; opacity: .75; }
.vw-rows .vw-tooltip-wrap:hover .vw-tooltip-icon,
.vw-rows .vw-tooltip-wrap:focus-within .vw-tooltip-icon { opacity: 1; }
.vw-rows .vw-tooltip-wrap:focus-within .vw-tooltip-icon { opacity: 1; outline: none;
}
.vw-rows .vw-tooltip-icon svg { width: 14px; height: 14px; }
.vw-rows .vw-tooltip { display: none; position: absolute; bottom: calc(100% + 9px); right: -8px; width: 220px;
  background: var(--vw-card); color: var(--vw-fg2);
  border: 1px solid var(--vw-line); border-radius: 9px; padding: 8px 11px;
  font-family: var(--vw-i18n-font); font-size: 11.5px; font-style: italic; line-height: 1.45;
  box-shadow: var(--card-hover-shadow); z-index: 30; pointer-events: none; white-space: normal; }
.vw-rows .vw-tooltip::after { content: ""; position: absolute; top: 100%; right: 14px;
  border: 6px solid transparent; border-top-color: var(--vw-card); }
.vw-rows .vw-tooltip-wrap:hover .vw-tooltip,
.vw-rows .vw-tooltip-wrap:focus-within .vw-tooltip { display: block; }
.vw-rows .vw-tooltip-wrap:focus-within .vw-tooltip { display: block; outline: none;
}

/* Copy — always labeled (rows have the room; no icon-only variant). Copied → --status-success. */
.vw-rows .vw-copy-t { flex: 0 0 auto; font-size: 12.5px; color: var(--vw-accent); background: none; border: none;
  font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 0;
  white-space: nowrap; }
.vw-rows .vw-copy-t svg { width: 13px; height: 13px; }
.vw-rows .vw-copy-t.vw-copied { color: var(--status-success); }

/* Smooth resolve: the loaded list fades/rises into the slot the skeleton list held. Reduced-motion-
   gated below. */
.vw-rows .vw-list.vw-fadein { animation: vw-in .45s cubic-bezier(.2,.7,.2,1) both; }
@keyframes vw-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Numbered pager: ghost number buttons, inverted current page, bordered Prev/Next. */
.vw-rows .vw-pager { display: flex; align-items: center; justify-content: center; gap: .3rem;
  margin: 1.1rem 0 .25rem; flex-wrap: wrap; }
.vw-rows .vw-page { min-width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 .35rem; border-radius: 8px; font-size: .8rem; color: var(--vw-fg); background: transparent;
  border: 1px solid transparent; cursor: pointer; }
.vw-rows .vw-page:hover:not(:disabled):not(.vw-page-on) { border-color: var(--vw-line); }
.vw-rows .vw-page:focus-visible:not(:disabled):not(.vw-page-on) { border-color: var(--vw-line); outline: none;
}
.vw-rows .vw-page-on { background: var(--vw-fg); color: var(--vw-bg); font-weight: 600; }
.vw-rows .vw-page-nav { border-color: var(--vw-line); background: var(--vw-card); padding: 0 .65rem; }
.vw-rows .vw-page-nav:hover:not(:disabled) { border-color: var(--vw-accent); color: var(--vw-accent); }
.vw-rows .vw-page-nav:focus-visible:not(:disabled) { border-color: var(--vw-accent); color: var(--vw-accent); outline: none;
}
.vw-rows .vw-page-nav:disabled { opacity: .45; cursor: not-allowed; }
.vw-rows .vw-page-gap { color: var(--vw-muted); padding: 0 .2rem; }
.vw-rows .vw-perpage { margin-left: .6rem; }
.vw-rows .vw-perpage select { font-size: .75rem; color: var(--vw-muted); background: transparent;
  border: none; cursor: pointer; }
.vw-rows .vw-perpage option { background: var(--vw-card); color: var(--vw-fg); }
.vw-rows .vw-empty { padding: 2rem 0; color: var(--vw-fg2); font-size: .9rem; }

/* Reduced motion: static stop glyph instead of animated bars, no transitions, no fade-in. (The
   shimmer primitive disables its own animation in components/skeleton/styles.css.) */
@media (prefers-reduced-motion: reduce) {

  .vw-rows .vw-eq { display: none; }
  .vw-rows .vw-stop { display: inline; }
  .vw-rows .vw-row, .vw-rows .vw-play, .vw-rows .vw-tooltip-wrap { transition: none; }
  .vw-rows .vw-list.vw-fadein { animation: none; }

}

/* Visible focus rings on every interactive control, both themes (2px accent outline + offset). */
.vw-rows .vw-play:focus-visible, .vw-rows .vw-copy-t:focus-visible,
.vw-rows .vw-tooltip-wrap:focus-visible, .vw-rows .vw-page:focus-visible,
.vw-rows .vw-select select:focus-visible, .vw-rows .vw-search:focus-visible,
.vw-rows .vw-group button:focus-visible, .vw-rows .vw-perpage select:focus-visible {
  outline: 2px solid var(--vw-accent); outline-offset: 2px; border-radius: 8px;
}
.vw-rows .vw-play:focus-visible { border-radius: 50%; }

/* Mobile: rows stay single-column full-width; the name+meta block shrinks (meta truncates). Copy
   stays labeled (it fits). */
@media (max-width: 640px) {

  .vw-rows .vw-filters { gap: .4rem; }
  .vw-rows .vw-search { min-width: 0; flex: 1; }
  .vw-rows .vw-group { margin-left: 0; }
  .vw-rows .vw-perpage { margin-left: 0; }
  .vw-rows .vw-row-inner { gap: 11px; padding: 10px 13px; }

}

Returns

Examples

See