@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/source-sans-3-400.woff2?v=0f73f35e08cd") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/source-sans-3-600.woff2?v=14527d193b0e") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/source-sans-3-700.woff2?v=ae35266f2ab0") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Geist Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/geist-sans-400.woff2?v=83ec0913490b") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { color-scheme: light; --color-bg: #c6cec7; --color-hero-bg: #161614; --card-fill: #f6f3ee; --color-bg-alt: #f6f7f9; --color-surface: #ffffff; --color-border: #e6e3dd; --color-border-strong: #d5d1c9; --color-rule: #f1eee9; --color-text: #1a1a19; --color-text-muted: #6b6862; --color-text-faint: #757169; --color-accent: #1f6f5c; --smart-ring: linear-gradient(90deg, #5CC1BD 0%, #7D9FE0 52%, #9484EC 100%); --smart-spark: #3FA9A4; --smart-glow: rgba(125, 159, 224, 0.28); --color-on-accent: var(--color-surface); --color-accent-soft: #e7f0ec; --chip-sheen: #7fd6b8; --cat-foundation-bg: #e8eefb; --cat-foundation-fg: #2c4a8a; --cat-infrastructure-bg: #ece9f7; --cat-infrastructure-fg: #4f428f; --cat-application-bg: #e7f0ec; --cat-application-fg: #1f6f5c; --cat-hardware-bg: #f8ecdf; --cat-hardware-fg: #8a5a24; --cat-default-bg: #eeece8; --cat-default-fg: #5c5952; --chip-active-text: #ffffff; --dir-page: #c6cec7; --dir-card: #fcfcf9; --dir-text-faint: #757169; --dir-card-hover-bg: #e8f0eb; --dir-card-hover-border: #d5d1c9; --dir-panel: #fcfcf9; --dir-border-strong: #d5d1c9; --dir-panel-shadow: -8px 0 20px -8px rgb(28 35 30 / 0.10); --dir-cat-foundation: #2c4a8a; --dir-cat-infrastructure: #4f428f; --dir-cat-application: #1f6f5c; --dir-cat-hardware: #8a5a24; --dir-sheet-border: #b5c0b6; --dir-sheet: #fcfcf9; --home-mark-coral: #ef8d74; --home-mark-gold: #e3b543; --home-mark-mint: #62cf95; --home-mark-aqua: #16bfc8; --home-glow: rgb(239 141 116 / 0.17); --home-glow-2: rgb(22 191 200 / 0.17); --dir-rail: #f1f2ed; --dir-text: #202622; --dir-text-2: #505952; --dir-border: #d9ded6; --dir-accent: #2f6b5b; --dir-selected: #e8f0eb; --dir-sheet-shadow: 0 2px 6px rgba(28, 35, 30, 0.08), 0 18px 44px rgba(28, 35, 30, 0.14); --dir-pin-shadow: 0 2px 4px rgba(28, 35, 30, 0.03); --text-meta: 0.75rem; --browse-pin-gap: var(--space-6); --logo-plate: #ffffff; --logo-radius: 8px; --logo-edge: rgb(26 26 25 / 8%); --logo-backing: transparent; --flag-hairline: rgb(0 0 0 / 12%); --color-scrim: rgba(26, 26, 25, 0.32); --color-danger: #b4462f; --scroll-shadow: rgb(26 26 25 / 16%); --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-sans-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-brand: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --text-xs: 0.6875rem; --text-sm: 0.8125rem; --text-base: 0.9375rem; --text-lg: 1.0625rem; --text-xl: 1.375rem; --text-2xl: 2rem; --leading-tight: 1.25; --leading-normal: 1.6; --tracking-wide: 0.06em; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem; --radius-sm: 4px; --radius-md: 10px; --radius-lg: 14px; --shadow-sheet: 0 1px 2px rgb(26 26 25 / 5%), 0 12px 32px rgb(26 26 25 / 8%); --shadow-card: 0 1px 2px rgba(26, 26, 25, 0.04); --shadow-card-hover: 0 4px 14px rgba(26, 26, 25, 0.09); --shadow-lift: 0 1px 2px rgba(26, 26, 25, 0.04), 0 10px 28px rgba(26, 26, 25, 0.07); --shadow-dialog: 0 24px 60px rgba(26, 26, 25, 0.22); --browse-head-rule: #c6c3bd; --scrollbar-track: #2c2c29; --scrollbar-thumb: #67675f; --container-max: 1240px; --card-min: 216px; --logo-sm: 36px; --logo-lg: 52px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --color-bg: #101418; --card-fill: #191817; --color-bg-alt: #1c1b19; --color-surface: #1f1e1b; --color-border: #302e29; --color-border-strong: #454239; --browse-head-rule: #504d47; --browse-head-rule: #504d47; --color-rule: #262520; --color-text: #f2f0eb; --color-text-muted: #a8a49a; --color-text-faint: #949086; --color-accent: #5cbfa1; --smart-spark: #5CC1BD; --smart-glow: rgba(148, 132, 236, 0.32); --color-accent-soft: #17332c; --chip-sheen: #7fe6c4; --chip-sheen: #7fe6c4; --cat-foundation-bg: #1a2338; --cat-foundation-fg: #8fb2ef; --cat-infrastructure-bg: #221e36; --cat-infrastructure-fg: #a99cf0; --cat-application-bg: #143029; --cat-application-fg: #5cbfa1; --cat-hardware-bg: #33251a; --cat-hardware-fg: #db9d5f; --cat-default-bg: #2a2825; --cat-default-fg: #a6a199; --chip-active-text: #161614; --dir-page: #101418; --dir-sheet-border: #2B3742; --dir-sheet: #151B21; --home-mark-coral: #f7ad95; --home-mark-gold: #f6d77c; --home-mark-mint: #a8efc5; --home-mark-aqua: #4fe6ea; --home-glow: rgb(247 173 149 / 0.22); --home-glow-2: rgb(79 230 234 / 0.24); --dir-rail: #141B21; --dir-card: #1B242D; --dir-text: #EDF2F5; --dir-text-2: #A8B5C2; --dir-text-faint: #94A3B3; --dir-border: #2B3742; --dir-accent: #79D8BB; --dir-selected: #203B34; --dir-card-hover-bg: #212B35; --dir-card-hover-border: #3A4A58; --dir-panel: #202A34; --dir-border-strong: #364350; --dir-panel-shadow: -10px 0 24px -8px rgb(0 0 0 / 0.35); --dir-cat-foundation: #A6B5FF; --dir-cat-infrastructure: #C3A6EF; --dir-cat-application: #79D8BB; --dir-cat-hardware: #E8B77B; --dir-sheet-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 18px 44px rgba(0, 0, 0, 0.5); --dir-pin-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); --logo-edge: rgb(255 255 255 / 10%); --logo-backing: var(--logo-plate); --flag-hairline: rgb(255 255 255 / 22%); --color-scrim: rgba(0, 0, 0, 0.6); --color-danger: #e8846a; --scroll-shadow: rgb(0 0 0 / 45%); --shadow-sheet: 0 1px 2px rgb(0 0 0 / 40%), 0 12px 32px rgb(0 0 0 / 45%); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-card-hover: 0 4px 14px rgba(0, 0, 0, 0.55); --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.55); --shadow-dialog: 0 24px 60px rgba(0, 0, 0, 0.7); } } :root[data-theme="dark"] { color-scheme: dark; --color-bg: #101418; --card-fill: #191817; --color-bg-alt: #1c1b19; --color-surface: #1f1e1b; --color-border: #302e29; --color-border-strong: #454239; --color-rule: #262520; --color-text: #f2f0eb; --color-text-muted: #a8a49a; --color-text-faint: #949086; --color-accent: #5cbfa1; --smart-spark: #5CC1BD; --smart-glow: rgba(148, 132, 236, 0.32); --color-accent-soft: #17332c; --cat-foundation-bg: #1a2338; --cat-foundation-fg: #8fb2ef; --cat-infrastructure-bg: #221e36; --cat-infrastructure-fg: #a99cf0; --cat-application-bg: #143029; --cat-application-fg: #5cbfa1; --cat-hardware-bg: #33251a; --cat-hardware-fg: #db9d5f; --cat-default-bg: #2a2825; --cat-default-fg: #a6a199; --chip-active-text: #161614; --dir-page: #101418; --dir-sheet-border: #2B3742; --dir-sheet: #151B21; --home-mark-coral: #f7ad95; --home-mark-gold: #f6d77c; --home-mark-mint: #a8efc5; --home-mark-aqua: #4fe6ea; --home-glow: rgb(247 173 149 / 0.22); --home-glow-2: rgb(79 230 234 / 0.24); --dir-rail: #141B21; --dir-card: #1B242D; --dir-text: #EDF2F5; --dir-text-2: #A8B5C2; --dir-text-faint: #94A3B3; --dir-border: #2B3742; --dir-accent: #79D8BB; --dir-selected: #203B34; --dir-card-hover-bg: #212B35; --dir-card-hover-border: #3A4A58; --dir-panel: #202A34; --dir-border-strong: #364350; --dir-panel-shadow: -10px 0 24px -8px rgb(0 0 0 / 0.35); --dir-cat-foundation: #A6B5FF; --dir-cat-infrastructure: #C3A6EF; --dir-cat-application: #79D8BB; --dir-cat-hardware: #E8B77B; --dir-sheet-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 18px 44px rgba(0, 0, 0, 0.5); --dir-pin-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); --logo-edge: rgb(255 255 255 / 10%); --logo-backing: var(--logo-plate); --flag-hairline: rgb(255 255 255 / 22%); --color-scrim: rgba(0, 0, 0, 0.6); --color-danger: #e8846a; --scroll-shadow: rgb(0 0 0 / 45%); --shadow-sheet: 0 1px 2px rgb(0 0 0 / 40%), 0 12px 32px rgb(0 0 0 / 45%); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-card-hover: 0 4px 14px rgba(0, 0, 0, 0.55); --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.55); --shadow-dialog: 0 24px 60px rgba(0, 0, 0, 0.7); } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; background-color: var(--color-bg); } body { margin: 0; background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, p, ul { margin: 0; } a { color: inherit; } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .container { width: 100%; max-width: none; margin-inline: 0; padding-inline: var(--page-inset, 42px); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -3rem; left: var(--space-2); z-index: 100; padding: var(--space-2) var(--space-4); background-color: var(--color-accent); color: var(--color-surface); border-radius: 4px; text-decoration: none; font-weight: 600; } .skip-link:focus { top: var(--space-2); } .hero { --color-bg: #161614; --color-surface: #1f1e1b; --color-border: #302e29; --color-text: #f2f0eb; --color-text-faint: #949086; position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center; background: var(--color-bg); color: var(--color-text); margin-bottom: var(--space-6); margin-top: calc(-1 * (var(--nav-inset) + var(--nav-height))); padding-top: calc(var(--nav-inset) + var(--nav-height)); } html.has-drift { background-color: var(--color-hero-bg); } html.has-drift body { background-color: transparent; } html.has-drift main { background-color: var(--color-bg); } .hero__bg { position: fixed; inset: -6%; pointer-events: none; -webkit-user-select: none; user-select: none; mask-image: radial-gradient(118% 86% at 50% 46%, rgba(0, 0, 0, 0) 18%, #000 66%), linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 6%, #000 17%, #000 88%, rgba(0, 0, 0, 0) 94.6%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 14.3%, #000 25%, #000 75%, rgba(0, 0, 0, 0) 85.7%); -webkit-mask-image: radial-gradient(118% 86% at 50% 46%, rgba(0, 0, 0, 0) 18%, #000 66%), linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 6%, #000 17%, #000 88%, rgba(0, 0, 0, 0) 94.6%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 14.3%, #000 25%, #000 75%, rgba(0, 0, 0, 0) 85.7%); mask-composite: intersect; -webkit-mask-composite: source-in; } .hero__drift { position: absolute; inset: 0; display: block; width: 100%; height: 100%; } .hero__inner { position: relative; z-index: auto; max-width: 50rem; text-align: center; padding-inline: var(--space-5); } .hero h1 { margin: 0; font-family: "Geist Sans", var(--font-sans-system); font-weight: 400; line-height: 1.06; letter-spacing: -0.02em; font-size: clamp(2.2rem, 5.2vw, 3.9rem); } .hero__cue { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 2; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: var(--text-xs); letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-text-faint); } .deck { background: var(--color-bg-alt); position: relative; display: flex; flex-direction: column; padding-block: clamp(2.5rem, 5vw, 4.5rem); scroll-margin-top: var(--nav-stack, 82px); } .hero:has(+ .deck) { margin-block-end: 0; } .deck::before, .deck::after { content: ""; position: absolute; left: var(--page-inset, 42px); right: var(--page-inset, 42px); height: 1px; background-color: var(--color-border); pointer-events: none; } .deck::before { top: 0; } .deck::after { display: none; } .hero + .deck::before { display: none; } .deck__inner { display: flex; flex-direction: column; align-items: flex-start; --deck-gap: 2.5rem; gap: var(--deck-gap); } .deck__inner > * { width: 100%; } .deck__ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .deck__ask { max-width: 820px; } .deck__heading { margin: 0 0 var(--space-3); font-family: "Geist Sans", var(--font-sans-system); font-weight: 400; font-size: clamp(1.875rem, 2.2vw + 0.875rem, 2.75rem); letter-spacing: -0.02em; line-height: 1.1; color: var(--color-text); text-wrap: balance; } .deck__lede { margin: 0 0 22px; max-width: 640px; font-size: 1.0625rem; line-height: 1.5; color: var(--color-text-muted); text-wrap: pretty; } .deck__lede strong { color: var(--color-text); font-weight: 600; } .deck__form { margin: 0; } .deck__box { position: relative; display: flex; align-items: center; gap: var(--space-3); height: 60px; padding: 0 8px 0 18px; border-radius: 14px; background: var(--color-surface); box-shadow: 0 0 0 5px color-mix(in srgb, var(--smart-glow) 45%, transparent), 0 18px 50px -20px var(--smart-glow); } .deck__box::before { content: ""; position: absolute; inset: -1.5px; padding: 1.5px; border-radius: 15px; background: var(--smart-ring); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .deck__box:focus-within { box-shadow: 0 0 0 6px color-mix(in srgb, var(--smart-glow) 80%, transparent), 0 18px 50px -20px var(--smart-glow); } .deck__box-spark { color: #5CC1BD; } .deck__input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; color: var(--color-text); font: inherit; font-size: 1.03rem; } .deck__input::placeholder { color: var(--color-text-faint); opacity: 1; } .deck__submit { flex: none; display: inline-flex; align-items: center; gap: var(--space-2); height: 44px; padding: 0 18px 0 20px; border: 0; border-radius: 10px; background: var(--color-accent); color: var(--color-on-accent); font: inherit; font-size: 0.906rem; font-weight: 600; cursor: pointer; } .deck__submit .deck__ico { width: 16px; height: 16px; } .deck__submit:hover { background: color-mix(in srgb, var(--color-accent) 88%, var(--color-text)); } .deck__hint { margin: var(--space-3) 4px 0; font-size: 0.78rem; color: var(--color-text-faint); } .deck__eyebrow { margin: 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-faint); } .deck__section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: 14px; } .deck__chip--toggle { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--color-accent); font: inherit; font-size: 0.844rem; font-weight: 500; cursor: pointer; } .deck__chip--toggle::after { content: "\2192"; } .deck__chip--toggle[aria-expanded="true"]::after { content: "\2191"; } .deck__chip--toggle:hover { text-decoration: underline; text-underline-offset: 3px; } .deck__nav--tasks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .deck__chip { color: var(--color-text); text-decoration: none; } .deck__chip--task { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-3); row-gap: 2px; align-items: center; padding: 16px 18px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); transition: border-color 150ms ease, background-color 150ms ease; } .deck__chip--task .deck__ico { grid-row: 1 / span 2; width: 22px; height: 22px; color: var(--color-accent); } .deck__chip-label { font-size: 1rem; font-weight: 500; letter-spacing: -0.005em; } .deck__chip-meta { font-size: 0.78rem; color: var(--color-text-faint); } .deck__chip-meta strong { color: var(--color-text-muted); font-weight: 600; font-variant-numeric: tabular-nums; } .deck__chip--more { padding: 11px 18px; } .deck__chip--task:hover, .deck__chip--task:focus-visible { border-color: var(--color-accent); background: var(--color-accent-soft); } .deck__nav--tasks.is-collapsed .deck__chip--more { display: none; } .deck__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding-top: 28px; border-top: 1px solid var(--color-border); } .deck__nav--category { display: flex; flex-wrap: wrap; gap: var(--space-2); } .deck__chip--category { display: inline-flex; align-items: center; gap: var(--space-2); height: 38px; padding: 0 14px 0 12px; border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-text-muted); font-size: 0.875rem; transition: border-color 150ms ease, color 150ms ease; } .deck__chip--category .deck__ico { width: 16px; height: 16px; } .deck__chip--category strong { color: var(--color-text-faint); font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; font-variant-numeric: tabular-nums; } .deck__chip--category[data-cat="application"] .deck__ico { color: var(--cat-application-fg); } .deck__chip--category[data-cat="infrastructure"] .deck__ico { color: var(--cat-infrastructure-fg); } .deck__chip--category[data-cat="foundation-models"] .deck__ico { color: var(--cat-foundation-fg); } .deck__chip--category[data-cat="hardware"] .deck__ico { color: var(--cat-hardware-fg); } .deck__chip--category[data-type="ai-agent"] .deck__ico { color: var(--color-accent); } .deck__chip--category:hover, .deck__chip--category:focus-visible { border-color: var(--color-border-strong); color: var(--color-text); } .deck__cta { flex: none; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; border: 1px solid var(--color-border-strong); border-radius: 10px; color: var(--color-text); font-size: 0.906rem; font-weight: 500; text-decoration: none; white-space: nowrap; transition: border-color 150ms ease; } .deck__cta strong { font-weight: inherit; } .deck__cta .deck__ico { width: 16px; height: 16px; } .deck__cta:hover, .deck__cta:focus-visible { border-color: var(--color-text); } .deck__coverage { margin: calc(18px - var(--deck-gap)) 0 0; font-size: 0.78rem; line-height: 1.6; color: var(--color-text-faint); } .deck__coverage strong { color: var(--color-text-muted); font-weight: 600; font-variant-numeric: tabular-nums; } .deck__methodology-link { color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 3px; } .deck__methodology-link:hover { color: var(--color-text); } @media (max-width: 900px) { .deck__nav--tasks { grid-template-columns: 1fr; } .deck__box { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; height: auto; padding: 14px 12px 12px 16px; } .deck__input { height: 30px; } .deck__submit { grid-column: 1 / -1; justify-content: center; } .deck__foot { flex-direction: column; align-items: stretch; } .deck__cta { justify-content: center; } } @keyframes deck-chip-sweep { from { background-position: 100% 0; } to { background-position: 0% 0; } } .taskpanel { position: relative; padding-block: var(--space-6); background: var(--color-accent-soft); scroll-margin-top: var(--nav-stack, 82px); } .taskpanel::before, .taskpanel::after { content: ""; position: absolute; left: var(--page-inset, 42px); right: var(--page-inset, 42px); height: 1px; background-color: var(--color-border); pointer-events: none; } .taskpanel::before { top: 0; } .taskpanel::after { display: none; } .taskpanel__inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); } .taskpanel__eyebrow { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); } .taskpanel__title { margin: 0; font-size: clamp(1.5rem, 1rem + 1.4vw, 2.125rem); line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; } .taskpanel__def { margin: 0; max-width: 52rem; color: var(--color-text); line-height: 1.55; text-wrap: pretty; } .taskpanel__count { margin: 0; font-size: 0.8125rem; color: var(--color-text-faint); } .taskpanel__list { width: 100%; margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); } .taskrow { color: var(--color-text-faint); } .taskrow__name { font-weight: 600; color: var(--color-text); } .taskrow__company { margin-left: var(--space-2); padding: 0; border: 0; background: none; font: inherit; color: var(--color-text-faint); cursor: pointer; } .taskrow__company:hover { color: var(--color-text); text-decoration: underline; } .taskrow__access { margin-left: var(--space-2); padding: 0.15em 0.45em; border-radius: 2px; background: color-mix(in srgb, var(--color-text) 8%, transparent); font-size: 0.75rem; color: var(--color-text-faint); white-space: nowrap; } .taskrow__desc { margin: var(--space-1) 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--color-text-faint); text-wrap: pretty; } .taskpanel__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); } .taskpanel__more, .taskpanel__clear { padding: 0.45em 0.8em; border: 1px solid var(--color-border-strong); border-radius: 2px; background: var(--color-bg); font: inherit; font-size: 0.875rem; color: var(--color-text); cursor: pointer; transition: background-color 140ms ease; } .taskpanel__more:hover, .taskpanel__clear:hover { background: var(--color-bg-alt); } @media (max-width: 640px) { .taskrow__access { display: block; width: fit-content; margin: var(--space-1) 0 0; } } @media (max-width: 640px) { .deck__inner { --deck-gap: 2rem; } } main { padding-block: var(--space-6) var(--space-8); } #company-grid, .browse-main__head { scroll-margin-top: calc(var(--browse-pin-gap) + var(--browse-top)); } .company-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--card-min), 100%), 1fr)); gap: 14px; } @media (min-width: 901px), (min-width: 481px) and (not (pointer: coarse)) { :root:not([data-cols]) .browse:has(.company-dialog[data-mode="inline"][open]) .company-grid { --card-min: 280px; } @container grid-col (max-width: 619.98px) { :root:not([data-cols]) .browse:has(.company-dialog[data-mode="inline"][open]) .company-grid { --card-min: 190px; } } :root[data-cols="1"] .company-grid { grid-template-columns: minmax(0, 1fr); } :root[data-cols="2"] .company-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } :root[data-cols="3"] .company-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } :root[data-cols="4"] .company-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } :root[data-cols="5"] .company-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .company-grid[data-cols-rendered="5"] .company-card--logo .card-top { padding: var(--space-4); } :root[data-cols="6"] .company-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } :root[data-cols="7"] .company-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } } .browse { background: var(--color-bg); position: relative; isolation: isolate; display: flex; align-items: stretch; gap: var(--space-5); --browse-head-h: calc(20px + var(--space-4) + var(--space-4) + 1px); --sheet-gutter: var(--space-6); --rail-inset: 20px; --rail-row-bleed: 12px; --rail-ico: 20px; --rail-gap: 12px; --rail-group-gap: var(--space-4); --rail-ico-size: 18px; --color-surface: var(--dir-sheet); --card-fill: var(--dir-card); --color-border: var(--dir-border); --color-border-strong: var(--dir-border-strong); --color-text: var(--dir-text); --color-text-muted: var(--dir-text-2); --color-text-faint: var(--dir-text-faint); --color-accent: var(--dir-accent); --color-accent-soft: var(--dir-selected); --cat-foundation-fg: var(--dir-cat-foundation); --cat-infrastructure-fg: var(--dir-cat-infrastructure); --cat-application-fg: var(--dir-cat-application); --cat-hardware-fg: var(--dir-cat-hardware); --browse-head-top: 0px; --browse-top: var(--nav-stack, 82px); margin-top: var(--browse-pin-gap); margin-bottom: var(--space-6); background-color: var(--dir-rail); --sheet-radius: 0px; border: 1px solid var(--dir-sheet-border); border-radius: var(--sheet-radius); box-shadow: none; padding: 0 var(--sheet-gutter) 0 0; --browse-gutter-w: calc(var(--space-5) + 9px); scroll-margin-top: var(--browse-top); } :root.rail-collapsed .browse { --browse-gutter-w: var(--space-5); } .browse::before { content: ""; position: sticky; top: calc(var(--browse-top) + var(--browse-pin-gap)); z-index: 6; flex: 0 0 var(--sheet-w, 0px); min-width: 0; align-self: flex-start; width: var(--sheet-w, 0px); height: min(var(--sheet-h, 0px), calc(100dvh - var(--browse-top) - var(--browse-pin-gap))); margin-top: -1px; margin-left: -1px; margin-right: calc(-1 * var(--sheet-w, 0px) + 1px - var(--space-5)); box-shadow: var(--dir-sheet-shadow); clip-path: inset(0 -80px -80px -80px); pointer-events: none; } .browse::after { display: none; } @media (min-width: 901px), (min-width: 481px) and (not (pointer: coarse)) { .browse::after { content: ""; display: block; position: sticky; top: var(--browse-top); z-index: 7; --stripe-fade: 44px; flex: 0 0 calc(var(--sheet-w, 0px) + 2 * var(--page-inset)); min-width: 0; width: calc(var(--sheet-w, 0px) + 2 * var(--page-inset)); height: calc(var(--browse-pin-gap) + var(--stripe-fade)); align-self: flex-start; margin-top: calc(-1 * var(--browse-pin-gap)); order: -1; margin-left: calc(-1px - var(--page-inset)); margin-right: calc(-1 * var(--sheet-w, 0px) + 1px - var(--space-5) - var(--page-inset)); background: linear-gradient(to bottom, var(--color-bg) 0, var(--color-bg) var(--browse-pin-gap), transparent 100%); clip-path: polygon( 0 0, 100% 0, 100% 100%, calc(100% - var(--page-inset)) 100%, calc(100% - var(--page-inset)) var(--browse-pin-gap), var(--page-inset) var(--browse-pin-gap), var(--page-inset) 100%, 0 100%); pointer-events: none; } } .browse-col { padding-top: var(--browse-head-top); flex: 0 0 calc(var(--rail-w, 200px) + var(--rail-inset)); padding-left: 0; min-width: 0; position: relative; background-color: var(--dir-rail); display: flex; flex-direction: column; } .browse-col::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background-color: var(--color-border); pointer-events: none; } :root[data-rail-presentation="expanded"] #rail-compact, :root[data-rail-presentation="drawer"] #rail-compact { display: none; } :root[data-rail-presentation="compact"] .browse-side { display: contents; } :root[data-rail-presentation="compact"] .browse-head { width: var(--rail-compact-w); padding: 0 0 0 1px; justify-content: center; gap: 0; box-shadow: inset 1px 0 0 var(--dir-sheet-border); } :root[data-rail-presentation="compact"] .browse.is-stuck .browse-head { box-shadow: inset 1px 0 0 var(--dir-sheet-border), inset 0 1px 0 var(--dir-sheet-border); } :root[data-rail-presentation="compact"] .browse-head__label, :root[data-rail-presentation="compact"] .browse-head__count, :root[data-rail-presentation="compact"] .browse-head__reset, :root[data-rail-presentation="compact"] .browse-head__end, :root[data-rail-presentation="compact"] .browse-head__home { display: none !important; } :root[data-rail-presentation="compact"] #toolbar-root { display: none; } :root[data-rail-presentation="compact"] #toolbar-root[data-open] { display: block; } :root[data-rail-presentation="compact"] .browse-col { flex: 0 0 var(--rail-compact-w); width: var(--rail-compact-w); min-width: var(--rail-compact-w); max-width: var(--rail-compact-w); } :root[data-rail-presentation="compact"] .rail-resizer { display: none; } :root { --rail-compact-w: 56px; } .rail-compact { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); width: var(--rail-compact-w); padding: var(--space-3) 0 var(--space-2); border-right: 1px solid var(--color-border); overflow-y: auto; overflow-x: visible; scrollbar-width: thin; scrollbar-color: transparent transparent; position: sticky; top: var(--browse-top, 0); max-height: calc(100dvh - var(--browse-top, 0px)); } :root[data-rail-presentation="compact"] .rail-compact { display: flex; } :root[data-rail-presentation="compact"] .browse-head > .browse-head__toggle { margin-inline: auto; } :root[data-rail-presentation="compact"] .browse-head__toggle-text, :root[data-rail-presentation="compact"] .browse-head__toggle-count { display: none !important; } .rail-compact__group { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); width: 100%; } .rail-compact__sep { width: 24px; height: 0; margin: var(--space-2) 0; border: 0; border-top: 1px solid var(--color-border); } .rail-compact__btn { display: grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-text-muted); cursor: pointer; transition: background-color 140ms ease, color 140ms ease; } .rail-compact__btn .rail-opt-ico { width: 20px; height: 20px; } .rail-compact__btn:hover { background-color: var(--color-border); color: var(--color-text); } .rail-compact__btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; } .rail-compact__btn[aria-pressed="true"], .rail-compact__btn[data-set] { color: var(--color-accent); background-color: var(--color-accent-soft); } .rail-compact__btn[aria-pressed="true"]::before, .rail-compact__btn[data-set]::before { content: ""; position: absolute; left: 0; width: 3px; height: 22px; border-radius: 0 3px 3px 0; background-color: var(--color-accent); } .rail-compact__btn { position: relative; } .rail-compact__reset { margin-top: auto; } .rail-pop { position: absolute; z-index: 92; min-width: 200px; max-width: 280px; max-height: min(var(--rail-pop-max, 420px), 60dvh, 420px); overflow-y: auto; padding: var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background-color: var(--color-surface); box-shadow: 0 8px 28px rgb(0 0 0 / 22%); } .rail-pop__head { margin: 0 0 var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .rail-pop__sub { margin: var(--space-3) 0 var(--space-1); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 600; } .rail-pop__sub:first-of-type { margin-top: 0; } .rail-pop__opt[aria-disabled="true"] { opacity: 0.45; cursor: default; } .rail-tip { position: absolute; z-index: 93; padding: var(--space-1) var(--space-2); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background-color: var(--color-surface); color: var(--color-text); font-size: var(--text-xs); white-space: nowrap; pointer-events: none; box-shadow: 0 4px 14px rgb(0 0 0 / 18%); } .rail-pop__list { display: flex; flex-direction: column; gap: 1px; } .rail-pop__opt { padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-text); font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; } .rail-pop__opt:hover { background-color: var(--color-border); } .rail-pop__opt:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; } .rail-pop__opt[aria-pressed="true"] { color: var(--color-accent); font-weight: 600; } .rail-pop__opt[aria-pressed="true"]::after { content: " \2713"; } @media (prefers-reduced-motion: reduce) { .rail-compact__btn { transition: none; } } :root[data-rail-presentation="drawer"].rail-collapsed .browse-main { padding-left: calc(var(--sheet-gutter) + var(--grid-gutter, 0px)); } :root[data-rail-presentation="drawer"].rail-collapsed .browse-main__head { margin-left: calc(-1 * (var(--sheet-gutter) + var(--grid-gutter, 0px))); padding-left: calc(var(--sheet-gutter) + var(--grid-gutter, 0px)); } .browse-side { display: block; flex: 1 1 auto; min-height: 0; font-family: var(--font-brand); font-size: var(--text-base); font-weight: 600; } .browse-head { flex: none; display: flex; align-items: center; gap: var(--space-2); height: var(--browse-head-h); padding-block: 0; padding-right: var(--rail-inset); position: sticky; top: calc(var(--browse-top) + var(--browse-pin-gap)); z-index: 4; border-bottom: 1px solid var(--color-border); margin-left: -1px; padding-left: calc(var(--rail-inset) + 1px); box-shadow: inset 1px 0 0 var(--dir-sheet-border), inset -1px 0 0 var(--color-border); background-color: var(--dir-rail); } .browse.is-stuck .browse-head { box-shadow: inset 1px 0 0 var(--dir-sheet-border), inset -1px 0 0 var(--color-border), inset 0 1px 0 var(--dir-sheet-border); } :root[data-rail-presentation="drawer"].rail-collapsed .browse-head { padding-right: var(--space-4); border-bottom: 1px solid var(--color-border); background-color: transparent; } :root[data-rail-presentation="drawer"].rail-collapsed .browse.is-stuck .browse-head { border-bottom-color: transparent; } :root[data-rail-presentation="drawer"].rail-collapsed .browse-head { box-shadow: inset -1px 0 0 var(--color-border); } :root[data-rail-presentation="drawer"].rail-collapsed .browse.is-stuck .browse-head { box-shadow: inset -1px 0 0 var(--color-border), inset 0 1px 0 var(--dir-sheet-border); } :root[data-rail-presentation="drawer"].rail-collapsed .browse-head .browse-head__label { display: none; } .browse-main__mark { width: 20px; height: 20px; stroke-width: 2; flex: none; } .head-mark-a { stop-color: #6d5bd0; } .head-mark-b { stop-color: #2f9c8f; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .head-mark-a { stop-color: #9b8bf5; } :root:not([data-theme="light"]) .head-mark-b { stop-color: #4fd6bf; } } :root[data-theme="dark"] .head-mark-a { stop-color: #9b8bf5; } :root[data-theme="dark"] .head-mark-b { stop-color: #4fd6bf; } .head-mark-c { stop-color: var(--home-mark-coral); } .head-mark-e { stop-color: var(--home-mark-gold); } .head-mark-f { stop-color: var(--home-mark-mint); } .head-mark-d { stop-color: var(--home-mark-aqua); } .browse-main__head { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-2); height: var(--browse-head-h); padding-block: var(--space-4); margin-bottom: 0; position: sticky; top: calc(var(--browse-top) + var(--browse-pin-gap)); z-index: 4; background-color: var(--dir-rail); border-bottom: 1px solid var(--color-border); margin-left: calc(-1 * (var(--browse-gutter-w) + var(--grid-gutter, var(--space-1)))); padding-left: calc(var(--browse-gutter-w) + var(--grid-gutter, var(--space-1))); --head-bleed-right: var(--sheet-gutter); --head-edge: 1px; margin-right: calc(-1 * (var(--head-bleed-right) + var(--head-edge))); padding-right: calc(var(--head-bleed-right) + var(--head-edge) + var(--grid-gutter, 0px)); box-shadow: inset calc(-1 * var(--head-edge)) 0 0 var(--dir-sheet-border); } .browse.is-stuck .browse-main__head { box-shadow: inset calc(-1 * var(--head-edge)) 0 0 var(--dir-sheet-border), inset 0 1px 0 var(--dir-sheet-border); } .browse-main .company-card { scroll-margin-top: calc(var(--browse-top) + var(--browse-pin-gap) + var(--browse-head-h) + var(--space-2)); } @media (min-width: 901px), (min-width: 481px) and (not (pointer: coarse)) { .browse .browse-head, .browse.is-stuck .browse-head { box-shadow: inset 1px 0 0 var(--dir-sheet-border), inset -1px 0 0 var(--color-border), inset 0 1px 0 var(--dir-sheet-border), 0 calc(-1 * var(--browse-pin-gap)) 0 0 var(--color-bg); } :root[data-rail-presentation="drawer"].rail-collapsed .browse .browse-head, :root[data-rail-presentation="drawer"].rail-collapsed .browse.is-stuck .browse-head { box-shadow: inset -1px 0 0 var(--color-border), inset 0 1px 0 var(--dir-sheet-border), 0 calc(-1 * var(--browse-pin-gap)) 0 0 var(--color-bg); } .browse .browse-main__head, .browse.is-stuck .browse-main__head { box-shadow: inset calc(-1 * var(--head-edge)) 0 0 var(--dir-sheet-border), inset 0 1px 0 var(--dir-sheet-border), 0 calc(-1 * var(--browse-pin-gap)) 0 0 var(--color-bg); } } .browse:has(.company-dialog[open]) .browse-main__head { --head-bleed-right: var(--sheet-gutter); --head-edge: 0px; } @media (min-width: 901px), (min-width: 481px) and (not (pointer: coarse)) { .browse .company-dialog[data-mode="inline"] { box-shadow: 0 calc(-1 * (var(--browse-pin-gap) + var(--detail-inset))) 0 var(--detail-inset) var(--color-bg), calc(var(--detail-inset) + 1px) calc(-1 * (var(--browse-pin-gap) + var(--detail-inset))) 0 var(--detail-inset) var(--color-bg), inset 0 1px 0 var(--dir-sheet-border), var(--dir-panel-shadow); clip-path: polygon( calc(-1 * (var(--detail-inset) + 1px)) calc(-1 * (var(--browse-pin-gap) + var(--detail-inset))), calc(100% + var(--detail-inset) + 1px) calc(-1 * (var(--browse-pin-gap) + var(--detail-inset))), calc(100% + var(--detail-inset) + 1px) 0, 100% 0, 100% 100%, -28px 100%, -28px 0, calc(-1 * (var(--detail-inset) + 1px)) 0); } .browse .company-dialog[data-mode="inline"] .detail-head { box-shadow: inset 0 1px 0 var(--dir-sheet-border); } } .browse-main__search { margin-left: auto; flex: 0 1 360px; min-width: 200px; } .search-control { position: relative; display: block; } .search-control__ico { position: absolute; left: 10px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; fill: none; color: var(--color-text-muted); pointer-events: none; } .browse-main__search .rail-search { min-height: 36px; height: 36px; border-radius: var(--radius-sm); padding-left: 36px; font-size: var(--text-sm); font-weight: 500; } .sort-control { position: relative; display: inline-flex; align-items: center; gap: 6px; width: 132px; height: 36px; padding: 0 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background-color: var(--color-surface); color: var(--color-text); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; } .sort-control .rail-opt-ico { width: 18px; height: 18px; stroke-width: 1.75; color: var(--color-text-muted); flex: none; } .sort-control__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .sort-control__chev { width: 14px; height: 14px; } .sort-control select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; font: inherit; } .sort-control:focus-within { outline: 2px solid var(--color-accent); outline-offset: 2px; } .browse-main__controls { display: contents; } .browse-main__tools { display: flex; align-items: center; gap: var(--space-2); flex: none; } .browse-main > .rail-interpreted { margin: var(--space-2) 0 0; } .browse-toolbar__sort { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); } .browse-toolbar__sort .rail-select { width: auto; min-height: 32px; padding-right: var(--space-2); } .view-toggle { display: inline-flex; height: 36px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background-color: var(--color-surface); overflow: hidden; } .view-toggle .rail-opt { width: 36px; height: 34px; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 0; justify-content: center; box-shadow: none; background-color: var(--color-surface); color: var(--color-text-muted); } .view-toggle .rail-opt + .rail-opt { border-left: 1px solid var(--color-border); } .view-toggle .rail-opt svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; fill: none; color: inherit; } .view-toggle .rail-opt:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; } .view-toggle .rail-opt[aria-pressed="true"] { background-color: var(--color-accent-soft); color: var(--color-accent); } .browse-head__label { font-size: 1rem; line-height: 20px; font-family: var(--font-brand); letter-spacing: -0.005em; color: var(--color-text); font-weight: 600; white-space: nowrap; } .browse-head__count { font-size: var(--text-sm); line-height: 20px; color: var(--color-text-muted); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; } .browse-head__toggle { display: grid; place-items: center; width: 28px; height: 28px; flex: none; padding: 0; border: 0; border-radius: var(--radius-sm); background-color: transparent; color: var(--color-text); cursor: pointer; transition: background-color 120ms ease; } .browse-head__toggle svg { width: 20px; height: 20px; stroke-width: 2; } .browse-head__toggle .filters-mark__funnel { display: none; } .browse-head__toggle[data-active="true"] .filters-mark__sliders { display: none; } .browse-head__toggle[data-active="true"] .filters-mark__funnel { display: inline; } .browse-head__toggle[data-active="true"] .browse-head__toggle-text { color: var(--color-accent); } :root[data-rail-mode="drawer"] .browse-head__toggle[aria-expanded="true"]:not([data-active="true"]) { background-color: var(--color-border); } .browse-head > .browse-head__toggle { margin-left: -4px; } .browse-head__toggle-text, .browse-head__toggle-count { display: none; } .browse-head__toggle:hover { background-color: var(--color-border); } .browse-head__reset { display: inline-flex; align-items: center; height: 28px; flex: none; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-sm); background-color: transparent; color: var(--color-text-muted); font: inherit; font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: background-color 120ms ease, color 120ms ease; } .browse-head__reset:hover { background-color: var(--color-border); color: var(--color-text); } .browse-head__reset:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } :root[data-rail-presentation="drawer"].rail-collapsed .browse-head__reset { display: none; } .browse.is-stuck { --browse-top: 0px; } .browse-head__home { display: none; place-items: center; width: 32px; height: 28px; flex: none; padding: 0; margin-left: -2px; border: 0; border-radius: var(--radius-sm); background-color: transparent; color: var(--color-text); cursor: pointer; transition: background-color 120ms ease; } .browse.is-stuck .browse-head__home { display: grid; animation: browse-head-home-in 180ms ease both; } .browse-head__home:hover { background-color: var(--color-border); } .browse-head__home:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .browse-head__home-mark { width: 28px; height: 17.5px; filter: drop-shadow(0 0 1.5px var(--home-glow)) drop-shadow(0 0 1.5px var(--home-glow-2)); } @keyframes browse-head-home-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .browse.is-stuck .browse-head > .browse-head__toggle { order: 2; margin-left: auto; } .browse-head__end { display: inline-flex; align-items: center; gap: var(--space-1); margin-left: auto; order: 3; } .browse.is-stuck .browse-head__end { margin-left: 0; } .browse.is-stuck .browse-head { padding-right: calc(var(--rail-inset) - 4px + var(--rail-row-bleed) - 1px); } .browse-head__end:not(:has(:not([hidden]))) { display: none; } .browse-head__count { display: inline-grid; place-items: center; flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background-color: var(--color-accent-soft); color: var(--color-accent); font-size: 11px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; } .browse-head__count[hidden], .browse-head__reset[hidden] { display: none; } :root[data-rail-presentation="drawer"].rail-collapsed .browse-head__count { display: none; } :root[data-rail-presentation="drawer"].rail-collapsed .browse.is-stuck .browse-head > .browse-head__home { display: none; } :root[data-rail-presentation="drawer"].rail-collapsed .browse.is-stuck .browse-head > .browse-head__toggle { margin-left: -4px; } @media (prefers-reduced-motion: reduce) { .browse.is-stuck .browse-head__home { animation: none; } } .rail-presets { position: absolute; top: calc(100% - var(--space-2)); right: var(--space-3); z-index: 5; min-width: 220px; padding: var(--space-1); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lift); } .rail-presets__item { display: flex; flex-direction: column; gap: 2px; width: 100%; margin: 0; padding: var(--space-2) var(--space-3); text-align: left; font: inherit; color: var(--color-text); background-color: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer; } .rail-presets__item:hover, .rail-presets__item:focus-visible { background-color: var(--color-accent-soft); outline: none; } .rail-presets__label { font-size: var(--text-sm); font-weight: 600; } .rail-presets__hint { font-size: var(--text-xs); color: var(--color-text-muted); } #toolbar-root { position: sticky; top: calc(var(--browse-top) + var(--browse-pin-gap) + var(--browse-head-h)); max-height: calc(100vh - var(--browse-top) - var(--browse-pin-gap) - var(--browse-head-h) - var(--space-4)); max-height: calc(100dvh - var(--browse-top) - var(--browse-pin-gap) - var(--browse-head-h) - var(--space-4)); padding-top: var(--space-3); padding-bottom: var(--space-4); padding-inline: var(--rail-inset); margin-left: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: transparent transparent; transition: scrollbar-color 160ms ease; } .browse-side:hover #toolbar-root, #toolbar-root:focus-within { scrollbar-color: var(--color-border-strong) transparent; } #toolbar-root[data-collapsed] { display: none; } .rail-group { margin-bottom: var(--rail-group-gap); } .rail-group:last-child { margin-bottom: var(--space-3); } #toolbar-root .rail-group > .rail-opt, #toolbar-root .rail-cardgroup .pref-row { display: grid; grid-template-columns: var(--rail-ico) minmax(0, 1fr) auto; align-items: center; column-gap: var(--rail-gap); } #toolbar-root .rail-fold { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--rail-gap); } #toolbar-root .rail-group > .rail-opt:not(:has(.rail-opt-ico))::before { content: ""; } #toolbar-root .rail-group > .rail-opt > .rail-opt-ico { justify-self: center; margin: 0; } #toolbar-root .rail-heading:has(> .rail-fold) { display: block; } #toolbar-root .rail-cardgroup .pref-group-heading { display: block; } #toolbar-root .rail-group > .rail-opt, #toolbar-root .rail-select-wrap, #toolbar-root .rail-seg { margin-inline: calc(-1 * var(--rail-row-bleed)); } #toolbar-root .rail-group > .rail-opt { width: calc(100% + 2 * var(--rail-row-bleed)); padding-inline: calc(var(--rail-row-bleed) - 1px); } #toolbar-root .rail-select-wrap .rail-select { padding-left: calc(var(--rail-row-bleed) + var(--rail-ico) + var(--rail-gap) - 1px); padding-right: calc(var(--rail-row-bleed) + var(--rail-gap) + 14px); } #toolbar-root .rail-group > .rail-opt > .rail-opt-ico, #toolbar-root .rail-select-wrap .rail-opt-ico { width: var(--rail-ico-size); height: var(--rail-ico-size); } #toolbar-root .rail-select-wrap .rail-opt-ico { left: calc(var(--rail-row-bleed) + (var(--rail-ico) - var(--rail-ico-size)) / 2); } #toolbar-root .rail-select-wrap .rail-select-chev { right: var(--rail-row-bleed); } .rail-heading { margin: 0 0 6px; font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-faint); font-weight: 600; } .rail-select-wrap { position: relative; display: block; } .rail-select-wrap .rail-select { -webkit-appearance: none; appearance: none; padding-left: 34px; padding-right: 30px; text-align: left; } .rail-select-wrap .rail-opt-ico, .rail-select-wrap .rail-select-chev { position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--color-text-muted); } .rail-select-wrap .rail-opt-ico { left: 11px; width: 15px; height: 15px; } .rail-select-wrap .rail-select-chev { right: calc(var(--rail-row-bleed) - 1px); width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; } .rail-select.rail-select--country { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23757169' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18 9 9 0 1 0 0-18zM3 12h18M12 3c-3.5 3.2-3.5 14.8 0 18M12 3c3.5 3.2 3.5 14.8 0 18'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23757169' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } .rail-select.rail-select--listing { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23757169' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-5 9 5H3zM5 9v9M10 9v9M14 9v9M19 9v9M3 18h18v2H3z'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23757169' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } .rail-fold { all: unset; width: 100%; min-height: 30px; cursor: pointer; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; } .rail-fold::after { content: ''; width: 6px; height: 6px; justify-self: end; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-1px, -1px); transition: transform 120ms ease; } .rail-fold[aria-expanded="false"]::after { transform: rotate(-45deg) translate(-1px, 1px); } .rail-fold:hover { color: var(--color-text); } .rail-fold:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .rail-fold::after { transition: none; } } .rail-opt { width: 100%; min-height: 34px; display: flex; align-items: center; gap: var(--space-2); padding: 0; margin-bottom: 2px; border: 1px solid transparent; border-radius: 6px; background-color: transparent; color: var(--color-text); font: inherit; text-align: left; cursor: pointer; transition: background-color 120ms ease, color 120ms ease; } .rail-opt:hover { background-color: var(--color-border); } .rail-opt--apart { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--color-border); } .rail-opt[aria-pressed="true"] { background-color: var(--color-accent-soft); color: var(--color-text); } .rail-opt-ico { flex: none; width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; fill: none; color: var(--color-text-muted); } .rail-opt[aria-pressed="true"] .rail-opt-ico { color: var(--color-accent); } .rail-opt-label { min-width: 0; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rail-opt-n { min-width: 3ch; text-align: right; font-size: var(--text-meta); color: var(--color-text-muted); font-variant-numeric: tabular-nums; } .rail-opt[aria-pressed="true"] .rail-opt-n { color: var(--color-text); } .rail-seg { display: grid; grid-template-columns: minmax(max-content, 1.3fr) repeat(5, minmax(0, 1fr)); gap: 4px; } .rail-seg .rail-opt { justify-content: center; min-height: 28px; padding: 0 6px; margin-bottom: 0; border-color: transparent; border-radius: var(--radius-sm); background-color: transparent; color: var(--color-text-muted); font-variant-numeric: tabular-nums; } .rail-cols-actual { margin: var(--space-1) 0 0; font-size: var(--text-xs); color: var(--color-text-muted); } .rail-cols-actual[hidden] { display: none; } .rail-seg .rail-opt-label { flex: none; text-align: center; overflow: visible; } .rail-seg .rail-opt:hover { background-color: var(--color-border); } .rail-seg .rail-opt[aria-pressed="true"] { border-color: var(--color-accent); background-color: var(--color-accent-soft); color: var(--color-accent); font-weight: 600; box-shadow: none; } .rail-search { width: 100%; min-height: 38px; padding: 0 var(--space-3); border: 1px solid var(--color-border); border-radius: 999px; background-color: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--text-sm); -webkit-appearance: none; appearance: none; } .search-control--smart .rail-search { border-color: transparent; background-image: linear-gradient(var(--color-surface), var(--color-surface)), var(--smart-ring); background-origin: border-box; background-clip: padding-box, border-box; } .search-control--smart:focus-within .rail-search, .search-control--smart .rail-search:focus { outline: none; box-shadow: 0 0 0 3px var(--smart-glow); } .search-control--smart .search-control__ico { color: var(--smart-spark); } .search-control__key { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); padding: 1px 5px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background-color: var(--color-bg-alt); color: var(--color-text-faint); font-family: inherit; font-size: var(--text-xs); line-height: 1.4; letter-spacing: 0.02em; pointer-events: none; white-space: nowrap; } .search-control--smart .rail-search { padding-right: 46px; } .smart-search__panel { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40; padding: var(--space-2); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background-color: var(--color-surface); box-shadow: var(--dir-sheet-shadow); } .smart-search__panel[hidden] { display: none; } .smart-search__eyebrow { margin: 0 0 var(--space-1); padding: 4px var(--space-2) 2px; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-faint); } .smart-search__opt { display: grid; grid-template-columns: 20px 1fr 16px; align-items: center; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-sm); cursor: pointer; } .smart-search__opt:hover, .smart-search__opt.is-active { background-color: var(--color-bg-alt); } .smart-search__opt-ico { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; fill: none; color: var(--smart-spark); } .smart-search__opt-text { display: block; min-width: 0; } .smart-search__opt-title { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--color-text); } .smart-search__opt-sub { display: block; margin-top: 1px; font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .smart-search__opt-arrow { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; fill: none; color: var(--color-text-faint); opacity: 0; } .smart-search__opt:hover .smart-search__opt-arrow, .smart-search__opt.is-active .smart-search__opt-arrow { opacity: 1; } .smart-search__rule { margin: var(--space-1) var(--space-2); border-top: 1px solid var(--color-rule); } .rail-search::placeholder { color: var(--color-text-faint); } .rail-search:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; } .rail-interpreted { margin: var(--space-2) 0 0; padding: 0 var(--space-1); font-size: var(--text-xs); line-height: 1.5; color: var(--color-text-muted); overflow-wrap: anywhere; } .rail-interpreted-chip { color: var(--color-text); font-weight: 600; } .rail-interpreted-x { margin-left: var(--space-2); padding: 0 6px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-text-muted); font: inherit; line-height: 1.3; cursor: pointer; } .rail-interpreted-x:hover, .rail-interpreted-x:focus-visible { color: var(--color-text); border-color: var(--color-accent); outline: none; } .company-card.is-jump-target { outline: 2px solid var(--color-accent); outline-offset: 2px; } .rail-select { width: 100%; min-height: 38px; padding: 0 var(--space-2); border: 1px solid transparent; border-radius: var(--radius-sm); background-color: transparent; color: inherit; font: inherit; } .rail-cardgroup { display: block; } .rail-cardgroup.pref-panel { position: static; border: 0; padding: 0; box-shadow: none; background: none; width: auto; max-height: none; overflow-y: visible; } .rail-drawer-close, .rail-apply { display: none; } .rail-foot { margin: 0; padding: var(--space-3) 0 0; border-top: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-faint); } .rail-resizer { flex: 0 0 9px; align-self: stretch; position: relative; cursor: col-resize; margin-left: calc(-1 * var(--space-5) - 4.5px); margin-right: calc(4.5px - var(--space-5) * 0); touch-action: none; } .rail-resizer::before { content: ""; position: absolute; inset-block: 0; left: 50%; width: 1px; background-color: transparent; transition: background-color 120ms ease; } .rail-resizer:hover::before, .rail-resizer:focus-visible::before, .rail-resizer[data-dragging]::before { background-color: var(--color-accent); width: 2px; } .rail-resizer:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .browse[data-resizing] { user-select: none; } :root.rail-collapsed .rail-resizer { display: none; } .browse-main { position: relative; flex: 1 1 0; min-width: 0; padding-top: var(--browse-head-top); padding-left: var(--grid-gutter, var(--space-1)); container-type: inline-size; container-name: grid-col; } @media (min-width: 901px), (min-width: 481px) and (not (pointer: coarse)) { .browse { --workspace-foot: 20px; --workspace-top: var(--workspace-foot); margin-top: calc(var(--workspace-top) - var(--space-6)); --browse-pin-gap: var(--workspace-top); scroll-margin-top: var(--workspace-top); height: calc(100dvh - var(--browse-top) - var(--workspace-top) - var(--workspace-foot)); min-height: 420px; } .browse > * { min-height: 0; } .browse-main { display: flex; flex-direction: column; min-height: 0; } .browse-main__head, .browse-main > .pagination--top, .browse-main > .pagination--foot { flex: none; } .browse-main > .pagination--top { display: none; } .browse-main__lead { flex: none; margin-top: var(--space-3); margin-bottom: var(--space-3); font-size: var(--text-sm); line-height: 1.4; color: var(--color-text-muted); } .browse-main > .pagination--foot { margin-top: 0; padding-top: var(--space-5); } .browse-main > #company-grid.company-grid:has(+ .pagination--foot:not([hidden])) { margin-top: 0; margin-bottom: auto; } .browse-main:not([style*="--grid-fit-max"]) > #company-grid { mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent); } .browse-main > #company-grid { margin-top: 0; max-height: var(--grid-fit-max, none); flex: 1 1 auto; min-height: 0; align-content: start; grid-auto-rows: min-content; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: transparent transparent; transition: scrollbar-color 160ms ease; scrollbar-gutter: stable; padding: 2px 8px 0; margin-inline: -8px; } .browse-main:hover .company-grid, .company-grid:focus-within, .company-grid:hover { scrollbar-color: var(--color-border-strong) transparent; } .browse-main > #company-grid.company-table-wrap { overflow: visible; display: flex; flex-direction: column; min-height: 0; } .browse-main > #company-grid.company-table-wrap > .table-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; width: auto; } .browse-col, .browse-side { display: flex; flex-direction: column; min-height: 0; } .browse-side { flex: 1 1 auto; } .browse-side > .browse-head { flex: none; } .browse-side > #toolbar-root { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-gutter: stable; position: static; top: auto; max-height: none; padding-bottom: var(--space-6); } .browse-main__head, .browse-side, .browse-side > .browse-head, .browse::before { position: static; } .browse::before { height: calc(100% + 2px); align-self: stretch; } } @media (min-width: 901px) and (max-height: 640px), (min-width: 481px) and (not (pointer: coarse)) and (max-height: 640px) { .browse-main > .pagination--top { display: none; } .browse-main > .pagination--foot { margin-top: var(--space-2); padding: var(--space-2) var(--space-3); gap: var(--space-2); margin-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px)); } :root.has-tray .browse-main > .pagination--foot { margin-bottom: calc(var(--space-2) + 72px + env(safe-area-inset-bottom, 0px)); } .browse-main__head { padding-block: var(--space-2); } .browse-side > .browse-head { padding-block: var(--space-2); } .browse-main .company-grid { margin-top: var(--space-1); } .company-dialog .detail-head { padding-top: var(--space-2); } .browse-main > .pagination--foot .pagination__size { display: flex; } } @media (min-width: 901px), (min-width: 481px) and (not (pointer: coarse)) { .browse:has(.company-dialog[data-mode="inline"][open]) .browse-main { min-width: 280px; } :root[data-rail-mode="column"]:not(.rail-collapsed) .browse:has(.company-dialog[data-mode="inline"][open]) .browse-main { min-width: 442px; } .browse .company-dialog[data-mode="inline"] { z-index: 5; position: sticky; --detail-inset: 0px; top: calc(var(--browse-top) + var(--browse-pin-gap) + var(--detail-inset)); align-self: flex-start; --detail-min-w: 300px; container-type: inline-size; container-name: detail; flex: 0 1 var(--detail-w, var(--detail-w-normal)); width: var(--detail-w, var(--detail-w-normal)); min-width: var(--detail-min-w); max-width: calc(var(--detail-cap-normal) * 1%); height: min( calc(100dvh - var(--browse-top) - var(--browse-pin-gap) - var(--detail-inset) - var(--space-4)), var(--detail-max-h, 100dvh)); max-height: min( calc(100dvh - var(--browse-top) - var(--browse-pin-gap) - var(--detail-inset) - var(--space-4)), var(--detail-max-h, 100dvh)); margin: var(--detail-inset) calc(-1 * (var(--sheet-gutter) - var(--detail-inset))) var(--sheet-gutter) calc(var(--sheet-gutter) - var(--space-5)); --panel-pad: var(--space-5); padding: var(--panel-pad); border: 1px solid var(--color-border); border-right: 0; border-top: 0; border-radius: 0; --panel-bg: var(--dir-panel); background-color: var(--panel-bg); overflow: hidden; animation: compare-in 160ms ease-out; } .browse .company-dialog[data-mode="inline"][open] { display: flex; flex-direction: column; } .browse .company-dialog[data-mode="inline"] > .dialog-content { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .browse .company-dialog[data-mode="inline"] .detail-head { position: static; flex: none; } .browse .company-dialog[data-mode="inline"] .detail-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 calc(-1 * var(--panel-pad)) calc(-1 * var(--panel-pad)); padding: var(--space-4) var(--panel-pad) var(--panel-pad); scrollbar-width: thin; scrollbar-color: transparent transparent; transition: scrollbar-color 160ms ease; } .browse .company-dialog[data-mode="inline"]:hover .detail-body, .browse .company-dialog[data-mode="inline"] .detail-body:focus-within { scrollbar-color: var(--color-border-strong) transparent; } .browse .company-dialog[data-mode="inline"]:not(:has(.detail-body)) > .dialog-content { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: transparent transparent; } .browse .company-dialog[data-mode="inline"]:not(:has(.detail-body)):hover > .dialog-content { scrollbar-color: var(--color-border-strong) transparent; } .browse .company-dialog--comparing[data-mode="inline"] { flex-basis: min(var(--detail-w-wide), calc(var(--detail-cap-wide) * 1%)); width: min(var(--detail-w-wide), calc(var(--detail-cap-wide) * 1%)); max-width: calc(var(--detail-cap-wide) * 1%); } :root.has-tray .browse .company-dialog[data-mode="inline"] { height: min( calc(100dvh - var(--browse-top) - var(--browse-pin-gap) - var(--detail-inset) - var(--space-4) - 64px), calc(var(--detail-max-h, 100dvh) - 64px)); max-height: min( calc(100dvh - var(--browse-top) - var(--browse-pin-gap) - var(--detail-inset) - var(--space-4) - 64px), calc(var(--detail-max-h, 100dvh) - 64px)); } .browse .company-dialog[data-mode="inline"] .compare-layout { grid-template-columns: minmax(0, 1fr); } .browse .company-dialog[data-mode="inline"] .compare-context { position: static; border-right: 0; padding-right: 0; padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); } .browse .company-dialog[data-mode="inline"] .compare-back { display: inline-block; } .browse .company-dialog[data-mode="inline"] .dialog-close-form { display: none; } } .company-dialog .dialog-close-form { display: none; } .detail-nav { display: flex; align-items: center; gap: var(--space-1); margin: 0 0 var(--space-4); } .detail-nav__label { font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); margin-right: auto; } .detail-nav__btn { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background-color: var(--color-surface); color: var(--color-text); font: inherit; cursor: pointer; } .detail-nav__btn svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; fill: none; } .detail-nav__btn:hover:not(:disabled) { color: var(--color-accent); border-color: var(--color-accent); background-color: var(--color-accent-soft); } .detail-nav__btn:disabled { opacity: 0.35; cursor: default; } .detail-nav__btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .company-dialog[data-mode="modal"] .detail-nav__btn { width: 44px; height: 44px; } .company-dialog[data-mode="modal"] .detail-nav__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .company-dialog[data-mode="modal"] .detail-nav { justify-content: flex-end; } .dialog-types { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); } .detail-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); row-gap: 0; margin: var(--space-5) 0 var(--space-4); border-bottom: 1px solid var(--color-border); } .detail-tab { margin: 0 0 -1px; padding: var(--space-2) 10px 10px; border: 0; border-bottom: 2px solid transparent; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: none; color: var(--color-text-muted); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: background-color 140ms ease, color 140ms ease; white-space: nowrap; } .detail-tab:hover:not(:disabled):not([aria-selected="true"]) { color: var(--color-text); background-color: var(--color-bg); } .detail-tab[aria-selected="true"] { color: var(--color-accent); background-color: transparent; border-bottom-color: var(--color-accent); } .detail-tab:disabled { opacity: 0.45; cursor: default; } .detail-tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 2px; } .detail-tab__n { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background-color: var(--color-surface); font-size: var(--text-xs); font-weight: 600; line-height: 18px; text-align: center; color: var(--color-text-muted); font-variant-numeric: tabular-nums; } .detail-tab[aria-selected="true"] .detail-tab__n { background-color: var(--color-accent-soft); color: var(--color-accent); } .detail-panel[hidden] { display: none; } .detail-panel > .dialog-stats:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .detail-panel > .dialog-section-title:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .company-dialog .detail-head { position: sticky; top: calc(-1 * var(--panel-pad)); z-index: 3; margin: calc(-1 * var(--panel-pad)) calc(-1 * var(--panel-pad)) 0; padding: var(--space-3) var(--panel-pad) 0; background-color: var(--panel-bg, var(--color-surface)); border-bottom: 1px solid var(--color-border); } .company-dialog .detail-head .detail-nav { margin-bottom: var(--space-3); } .company-dialog .detail-head .dialog-header { gap: var(--space-3); } .company-dialog .detail-head .dialog-types { margin-top: var(--space-1); } .company-dialog .detail-head .detail-tabs { margin: var(--space-3) 0 0; border-bottom: 0; } .company-dialog .detail-body { padding-top: var(--space-4); } .detail-panel > .dialog-description:first-child, .detail-panel > .product-tasks:first-child, .detail-panel > .product-groups:first-child > .product-list:first-child, .detail-panel > .source-list:first-child { margin-top: 0; } .company-dialog { --detail-w-normal: 540px; --detail-w-wide: 680px; --detail-cap-normal: 30; --detail-cap-wide: 56; } .company-dialog { --text-xs: 0.75rem; } .company-dialog a.stat-source { color: var(--color-text-muted); text-decoration: underline; text-decoration-color: var(--color-border-strong); text-decoration-thickness: 1px; text-underline-offset: 2px; } .company-dialog a.stat-source:hover, .company-dialog a.stat-source:focus-visible { color: var(--color-accent); text-decoration-color: currentColor; } .company-dialog .product-list > .product-item + .product-item { padding-top: var(--space-3); border-top: 1px solid var(--color-border); } .company-dialog .dialog-stats { margin-top: var(--space-5); padding-top: 0; border-top: 0; } .company-dialog .dialog-section-title { margin-top: var(--space-6); padding-top: 0; border-top: 0; } .detail-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); font-size: var(--text-sm); } .detail-link { color: var(--color-accent); font-weight: 500; text-decoration: none; } .detail-link:hover, .detail-link:focus-visible { text-decoration: underline; text-underline-offset: 2px; } .detail-summary { margin: 0; font-size: var(--text-base); line-height: 1.5; color: var(--color-text); } .detail-more, .detail-missing, .detail-caps { margin-top: var(--space-3); font-size: var(--text-sm); } .detail-more > summary, .detail-missing > summary, .detail-caps > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; color: var(--color-text-muted); } .detail-more > summary::-webkit-details-marker, .detail-missing > summary::-webkit-details-marker, .detail-caps > summary::-webkit-details-marker { display: none; } .detail-more > summary::before, .detail-missing > summary::before, .detail-caps > summary::before { content: ''; width: 6px; height: 6px; margin: 0 2px 2px 1px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform 120ms ease; } .detail-more[open] > summary::before, .detail-missing[open] > summary::before, .detail-caps[open] > summary::before { transform: rotate(45deg); margin-bottom: 4px; } .detail-more > summary:hover, .detail-missing > summary:hover, .detail-caps > summary:hover { color: var(--color-text); } .detail-more > summary:focus-visible, .detail-missing > summary:focus-visible, .detail-caps > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 2px; } .detail-caps__list { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-2) 0 0; } .detail-caps__tag { padding: 2px var(--space-2); border-radius: var(--radius-sm); background-color: var(--color-bg); border: 1px solid var(--color-border); font-size: var(--text-xs); color: var(--color-text-muted); } .detail-more > .dialog-description { margin-top: var(--space-2); font-size: var(--text-sm); line-height: 1.55; } .detail-missing__list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px var(--space-3); margin: var(--space-2) 0 0; } .detail-missing__list > dt { font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-faint); line-height: 1.6; } .detail-missing__list > dd { margin: 0; color: var(--color-text-faint); } .detail-missing__state--checked { font-style: italic; } .company-dialog .stat-source { font-family: inherit; letter-spacing: 0; } .company-dialog a.stat-source { text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); } .company-dialog .stat-sources { margin-top: var(--space-3); } .company-dialog :is(.dialog-stats, .detail-missing, .stat-sources) + :is(.entity-absorbed, .entity-acquired, .entity-origin) { margin-top: var(--space-5); } .company-dialog .rail-card { background-color: var(--card-fill); border-color: var(--color-border); border-radius: 8px; } .company-dialog .rail-card:hover:not(:disabled) { background-color: var(--dir-card-hover-bg); border-color: var(--dir-card-hover-border); } .company-dialog .rail-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .rail-cta { align-self: flex-start; margin-top: 2px; font-size: var(--text-xs); font-weight: 600; color: var(--color-accent); } .rail-cta::after { content: ' \2192'; } .rail-card:hover .rail-cta { text-decoration: underline; text-underline-offset: 2px; } .rail-method { margin: calc(-1 * var(--space-2)) 0 var(--space-3); font-size: var(--text-sm); } .rail-method > a { color: var(--color-accent); text-decoration: none; } .rail-method > a:hover, .rail-method > a:focus-visible { text-decoration: underline; text-underline-offset: 2px; } .product-discover { flex: none; margin-left: auto; padding: 3px var(--space-3); border: 1px solid var(--color-accent); border-radius: 999px; background-color: var(--color-accent); color: var(--color-on-accent); font: inherit; font-size: var(--text-xs); font-weight: 600; cursor: pointer; white-space: nowrap; } .product-discover:hover { filter: brightness(1.08); } .product-discover:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .product-discover + .product-compare { margin-left: var(--space-2); } .product-compare { flex: none; padding: 2px var(--space-2); border: 1px solid var(--color-border); border-radius: 999px; background-color: var(--color-surface); color: var(--color-text-muted); font: inherit; font-size: var(--text-xs); font-weight: 600; cursor: pointer; white-space: nowrap; } .product-compare:hover { color: var(--color-text); border-color: var(--color-border-strong); } .product-compare[aria-pressed="true"] { background-color: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-accent); } .product-compare:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .compare-tray { position: fixed; left: 50%; bottom: var(--space-4); z-index: 90; transform: translateX(-50%); display: flex; flex-direction: column; gap: var(--space-2); width: max-content; max-width: min(960px, calc(100vw - 2 * var(--space-4))); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4); border: 1px solid var(--dir-border); border-radius: 12px; background-color: var(--dir-sheet); color: var(--dir-text); box-shadow: var(--dir-sheet-shadow); font-family: var(--font-brand); font-size: var(--text-sm); } .compare-tray[hidden] { display: none; } :root.has-tray main { padding-bottom: calc(var(--space-8) + 64px); } .compare-tray__bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); } .compare-tray__count { font-weight: 600; white-space: nowrap; } .compare-tray__hint { color: var(--dir-text-2); white-space: nowrap; } .compare-tray__more { color: var(--dir-text-2); white-space: nowrap; } .compare-tray__chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px 4px 2px var(--space-2); border: 1px solid var(--dir-border); border-radius: 999px; background-color: var(--dir-rail); white-space: nowrap; } .compare-tray__chip .logo { width: 18px; height: 18px; font-size: 9px; } .compare-tray__x { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--dir-text-2); font: inherit; font-size: 14px; line-height: 1; cursor: pointer; } .compare-tray__x:hover { background-color: var(--dir-border); color: var(--dir-text); } .compare-tray__go { margin-left: var(--space-2); padding: 6px var(--space-3); border: 1px solid var(--dir-accent); border-radius: 8px; background-color: var(--dir-accent); color: #ffffff; font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; white-space: nowrap; } .compare-tray__go:disabled { background-color: transparent; border-color: var(--dir-border); color: var(--dir-text-2); cursor: default; } .compare-tray__clear { padding: 6px var(--space-2); border: 0; background: none; color: var(--dir-text-2); font: inherit; font-size: var(--text-sm); cursor: pointer; } .compare-tray__clear:hover, .compare-tray__x:focus-visible, .compare-tray__go:focus-visible, .compare-tray__clear:focus-visible { color: var(--dir-text); outline: 2px solid var(--dir-accent); outline-offset: 2px; } .compare-tray__clear:hover { outline: none; } .compare-tray__share, .compare-tray__panel-toggle { padding: 6px var(--space-2); border: 1px solid var(--dir-border); border-radius: 8px; background: none; color: var(--dir-text); font: inherit; font-size: var(--text-sm); cursor: pointer; white-space: nowrap; } .compare-tray__share:hover, .compare-tray__panel-toggle:hover, .compare-tray__share:focus-visible, .compare-tray__panel-toggle:focus-visible { border-color: var(--dir-accent); outline: none; } .compare-tray__note { max-width: 100%; white-space: normal; color: var(--dir-text-2); font-size: var(--text-xs, 0.8em); } .compare-tray__note--warn { color: var(--dir-warn, #b45309); } .compare-tray__shared { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); margin-bottom: var(--space-2); background-color: var(--color-accent-soft); border: 1px solid var(--color-accent); border-radius: var(--radius-md); } .compare-tray__shared-title { margin: 0; font-weight: 600; font-size: var(--text-sm); color: var(--color-text); } .compare-tray__shared-names, .compare-tray__shared-context, .compare-tray__shared-missing { margin: 0; font-size: var(--text-xs, 0.8em); color: var(--dir-text-2, var(--color-text-muted)); white-space: normal; } .compare-tray__shared-missing { color: var(--dir-warn, #b45309); } .compare-tray__shared-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); } .compare-tray__shared-actions button { font: inherit; font-size: var(--text-sm); font-weight: 600; padding: 5px var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--color-border-strong); background-color: var(--color-surface); color: var(--color-text); cursor: pointer; } .compare-tray__shared-open { background-color: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); } .compare-tray__shared-actions button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .compare-tray__panel { display: flex; flex-direction: column; gap: var(--space-1); max-width: 100%; } .compare-tray__panel-label { color: var(--dir-text-2); font-size: var(--text-xs, 0.8em); } .compare-tray__export, .compare-tray__import { width: min(480px, calc(100vw - 4 * var(--space-4))); min-height: 4.5em; padding: var(--space-1) var(--space-2); border: 1px solid var(--dir-border); border-radius: 8px; background-color: var(--dir-rail); color: var(--dir-text); font: inherit; font-size: var(--text-xs, 0.8em); resize: vertical; } .compare-tray__import-result { color: var(--dir-text-2); font-size: var(--text-xs, 0.8em); } .product-compare-note { margin: 0 0 var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); } .product-compare-note a { color: var(--color-accent); } .discovery-head h2 { margin: 0 0 var(--space-3); font-size: var(--text-lg); font-weight: 600; } .discovery-note { margin: 0 0 var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); } .discovery-task-ask, .discovery-task-line { margin: 0 0 var(--space-4); font-size: var(--text-sm); } .discovery-task-options { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0; } .discovery-task-option, .discovery-task-help, .discovery-task-change { padding: 6px var(--space-3); border: 1px solid var(--color-border); border-radius: 999px; background-color: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--text-sm); cursor: pointer; } .discovery-task-change { padding: 2px var(--space-2); font-size: var(--text-xs); } .discovery-task-option:hover, .discovery-task-help:hover, .discovery-task-change:hover { border-color: var(--color-accent); } .discovery-task-help-text { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); } .discovery-groups { display: flex; flex-direction: column; gap: var(--space-5); } .discovery-group__title { margin: 0 0 var(--space-1); font-size: var(--text-sm); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; } .discovery-group__blurb { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); } .discovery-group__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); } .discovery-card { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: 10px; background-color: var(--color-surface); } .discovery-card__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); } .discovery-card__name { font-weight: 600; color: var(--color-text); text-decoration: none; } .discovery-card__name:hover { text-decoration: underline; } .discovery-card__company { font-size: var(--text-xs); color: var(--color-text-muted); } .discovery-card__caveat { align-self: flex-start; padding: 1px var(--space-2); border-radius: 999px; background-color: var(--color-warn-soft, #fef3c7); color: var(--color-warn-text, #92400e); font-size: var(--text-xs); font-weight: 600; } .discovery-card__reason, .discovery-card__diff { margin: 0; font-size: var(--text-sm); } .discovery-card__unknowns { margin: 0; font-size: var(--text-xs); color: var(--color-text-faint); } .discovery-card__source { font-size: var(--text-xs); } .discovery-card__source summary { cursor: pointer; color: var(--color-accent); } .product-head .product-choose { align-self: center; margin-left: var(--space-2); } .product-head .product-choose[aria-pressed="true"] { background-color: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); } .discovery-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); } .discovery-chip { display: inline-flex; align-items: center; gap: 2px; padding: 0 var(--space-1) 0 0; border: 1px solid var(--color-border); border-radius: 999px; background-color: var(--color-surface); } .discovery-chip.is-current { border-color: var(--color-accent); background-color: var(--color-accent-soft); } .discovery-chip__name { padding: 4px var(--space-2) 4px var(--space-3); border: 0; border-radius: 999px; background: none; color: var(--color-text); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; } .discovery-chip__x { padding: 2px 6px; border: 0; border-radius: 999px; background: none; color: var(--color-text-muted); font: inherit; cursor: pointer; } .discovery-chip__x:hover, .discovery-chip__name:hover { color: var(--color-accent); } .discovery-chip__name:focus-visible, .discovery-chip__x:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .discovery-head__count { margin-left: var(--space-2); color: var(--color-text-faint); font-weight: 400; } .alt-list { display: flex; flex-direction: column; } .alt-tier { display: flex; gap: var(--space-2); align-items: baseline; margin: var(--space-4) 0 var(--space-1); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; } .alt-tier__n { font-weight: 400; } .alt-row { display: grid; grid-template-columns: 20px auto minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-2) 0; border-top: 1px solid var(--color-rule); } .alt-row > .logo { width: 28px; height: 28px; margin-top: 2px; } .alt-check { display: grid; place-items: center; width: 18px; height: 18px; margin-top: 4px; padding: 0; border-radius: 4px; font-size: 12px; line-height: 1; } .alt-check[aria-pressed="true"] { background-color: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); } .alt-row__name { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; font-weight: 600; } .alt-row__name a { color: var(--color-text); text-decoration: none; } .alt-row__name a:hover { text-decoration: underline; } .alt-row__company { color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 400; } .alt-row__blurb { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 2px 0 0; color: var(--color-text-muted); font-size: var(--text-sm); } .alt-row__facts { margin: 2px 0 0; color: var(--color-text-faint); font-size: var(--text-xs); } .alt-row__facts a, .alt-row__src { color: var(--color-accent); font-weight: 600; } .alt-note { margin-top: var(--space-3); font-size: var(--text-xs); } .discovery-selection { top: auto; bottom: 0; margin: var(--space-4) 0 0; } .browse-main__head .browse-head__chosen { display: none; } :root[data-rail-presentation="compact"] .browse-head .browse-head__chosen, :root[data-rail-presentation="drawer"] .browse-head .browse-head__chosen { display: none; } :root[data-rail-presentation="compact"] .browse-main__head .browse-head__chosen:not([hidden]), :root[data-rail-presentation="drawer"] .browse-main__head .browse-head__chosen:not([hidden]) { display: inline-flex; } @media (max-width: 480px) { .browse-head__chosen { padding: 4px 8px; } .browse-head__chosen-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } } .browse-head__chosen { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid var(--color-accent); border-radius: 999px; background-color: var(--color-accent); color: var(--color-on-accent); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; white-space: nowrap; } .browse-head__chosen:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .browse-head__chosen-n { padding: 0 7px; border-radius: 999px; background-color: var(--color-on-accent); color: var(--color-accent); font-size: var(--text-xs); } .discovery-card__add { align-self: flex-start; margin-top: var(--space-1); } .discovery-more { align-self: flex-start; padding: 6px var(--space-3); border: 1px solid var(--color-border); border-radius: 8px; background: none; color: var(--color-text); font: inherit; font-size: var(--text-sm); cursor: pointer; } .discovery-more:hover { border-color: var(--color-accent); } .discovery-selection { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: var(--space-3) 0 var(--space-4); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: 10px; background-color: var(--panel-bg, var(--color-surface)); } .discovery-selection__go { padding: 6px var(--space-4); border: 1px solid var(--color-accent); border-radius: 8px; background-color: var(--color-accent); color: var(--color-on-accent); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; } .discovery-selection__go:disabled { border-color: var(--color-border); background-color: transparent; color: var(--color-text-muted); cursor: not-allowed; } .discovery-selection__hint { flex: 1 1 200px; margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); } .discovery-bulk { margin-top: var(--space-4); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: 10px; background-color: var(--color-surface); } .discovery-bulk__names { margin: 0 0 var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); } .discovery-bulk__go { padding: 6px var(--space-4); border: 1px solid var(--color-accent); border-radius: 8px; background-color: var(--color-accent); color: var(--color-on-accent); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; } .discovery-search { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border); } .discovery-search__input { width: 100%; max-width: 360px; padding: 6px var(--space-3); border: 1px solid var(--color-border); border-radius: 8px; background-color: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--text-sm); } .discovery-search__results { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-2); } .discovery-search__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) 0; font-size: var(--text-sm); border-bottom: 1px solid var(--color-border); } .workspace-head h2 { margin: 0 0 var(--space-3); font-size: var(--text-lg); font-weight: 600; } .workspace-tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); } .workspace-tab { padding: var(--space-2) var(--space-3); border: 0; border-bottom: 2px solid transparent; background: none; color: var(--color-text-muted); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; } .workspace-tab.is-active { color: var(--color-text); border-bottom-color: var(--color-accent); } .workspace-tab:hover { color: var(--color-text); } .workspace-overview { overflow-x: auto; } .workspace-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .workspace-table th, .workspace-table td { padding: var(--space-2) var(--space-3); text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: top; } .workspace-table tr.is-starting { background-color: var(--color-accent-soft); } .workspace-table__name { display: flex; flex-direction: column; gap: 2px; } .workspace-table__name a { color: var(--color-text); font-weight: 600; text-decoration: none; } .workspace-table__name a:hover { text-decoration: underline; } .workspace-table__company { font-size: var(--text-xs); color: var(--color-text-muted); } .workspace-table__starting-badge { align-self: flex-start; padding: 1px var(--space-2); border-radius: 999px; background-color: var(--color-accent); color: var(--color-on-accent); font-size: var(--text-xs); font-weight: 600; } .workspace-table td.is-missing { color: var(--color-text-faint); font-style: italic; } .workspace-table__actions-cell { white-space: nowrap; text-align: right; } .workspace-table__actions { display: inline-flex; gap: var(--space-2); white-space: nowrap; } .workspace-table__caveat { align-self: flex-start; padding: 1px var(--space-2); border-radius: 999px; background-color: var(--color-warn-soft, #fef3c7); color: var(--color-warn-text, #92400e); font-size: var(--text-xs); font-weight: 600; } .workspace-table__set-start, .workspace-table__remove { padding: 2px var(--space-2); border: 1px solid var(--color-border); border-radius: 999px; background-color: var(--color-surface); color: var(--color-text-muted); font: inherit; font-size: var(--text-xs); cursor: pointer; } .workspace-table__set-start:hover, .workspace-table__remove:hover { color: var(--color-text); border-color: var(--color-border-strong); } .workspace-detailed__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-bottom: var(--space-3); } .workspace-detailed__diff { padding: 6px var(--space-3); border: 1px solid var(--color-border); border-radius: 8px; background: none; color: var(--color-text); font: inherit; font-size: var(--text-sm); cursor: pointer; } .workspace-detailed__diff.is-active { border-color: var(--color-accent); color: var(--color-accent); } .workspace-detailed__pin { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); } .workspace-detailed__scroll { overflow-x: auto; max-width: 100%; border: 1px solid var(--color-border); border-radius: 10px; } .workspace-detailed__table { border-collapse: collapse; font-size: var(--text-sm); width: max-content; min-width: 100%; } .workspace-detailed__table th, .workspace-detailed__table td { padding: var(--space-2) var(--space-3); text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: top; min-width: 160px; } .workspace-detailed__label-col { position: sticky; left: 0; z-index: 1; min-width: 140px; background-color: var(--color-surface); font-weight: 600; box-shadow: 1px 0 0 var(--color-border); } .workspace-detailed__product-col a { color: var(--color-text); font-weight: 600; text-decoration: none; } .workspace-detailed__product-col a:hover { text-decoration: underline; } .workspace-detailed__product-col.is-pinned, .workspace-detailed__table td.is-pinned { position: sticky; left: 140px; z-index: 1; background-color: var(--color-surface); box-shadow: 1px 0 0 var(--color-border); } .workspace-detailed__table td.is-missing { color: var(--color-text-faint); font-style: italic; } @media (max-width: 640px) { .discovery-group__list { grid-template-columns: 1fr; } .discovery-task-options { flex-direction: column; align-items: stretch; } .workspace-table, .workspace-table thead, .workspace-table tbody, .workspace-table th, .workspace-table tr { display: block; } .workspace-table thead { display: none; } .workspace-table tr { margin-bottom: var(--space-3); border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; } .workspace-table td { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); border-bottom: 1px solid var(--color-border); } .workspace-table td:last-child { border-bottom: 0; } .workspace-table td[data-label]::before { content: attr(data-label); flex: none; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-faint); } .workspace-table__actions-cell { text-align: right; } .workspace-table__actions { justify-content: flex-end; } .workspace-detailed__scroll { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .workspace-detailed__label-col { min-width: 108px; } .workspace-detailed__product-col:not(.is-pinned), .workspace-detailed__table td:not(.workspace-detailed__label-col):not(.is-pinned) { scroll-snap-align: start; min-width: calc(100vw - 2 * var(--space-4) - 108px - 1rem); } } .browse-main .company-grid { margin-block: var(--space-3) var(--sheet-gutter); padding: 0; } .browse-main > #company-grid:has(+ .pagination--foot:not([hidden])) { margin-bottom: 0; } .browse-main .sort-claim { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--color-text-faint); } :root[data-rail-mode="drawer"] #toolbar-root[data-collapsed], :root[data-rail-overlay="open"] #toolbar-root[data-collapsed] { display: block; } :root[data-rail-mode="drawer"] #toolbar-root, :root[data-rail-overlay="open"] #toolbar-root { position: fixed; inset: 0 auto 0 0; z-index: 95; margin-left: 0; width: min(300px, 86vw); max-height: none; padding: calc(var(--nav-stack, 74px) + 12px) var(--rail-inset) var(--space-5); background-color: var(--dir-rail); border-right: 1px solid var(--color-border); scrollbar-color: var(--color-border-strong) transparent; transform: translateX(-100%); transition: transform 180ms ease; } .browse.is-stuck #toolbar-root { padding-top: var(--space-5); } :root[data-rail-mode="drawer"] #toolbar-root[data-open], :root[data-rail-overlay="open"] #toolbar-root[data-open] { transform: none; } :root[data-rail-mode="drawer"] .rail-drawer-close, :root[data-rail-overlay="open"] .rail-drawer-close { display: grid; place-items: center; position: sticky; top: calc(-1 * var(--space-2)); z-index: 2; justify-self: end; margin: calc(-1 * var(--space-2)) calc(-1 * var(--rail-inset)) var(--space-2) auto; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-sm); background-color: var(--dir-rail); color: var(--color-text-muted); cursor: pointer; } :root[data-rail-mode="drawer"] .rail-drawer-close svg, :root[data-rail-overlay="open"] .rail-drawer-close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; } :root[data-rail-mode="drawer"] .rail-drawer-close:hover, :root[data-rail-overlay="open"] .rail-drawer-close:hover { color: var(--color-text); } :root[data-rail-mode="drawer"] .rail-drawer-close:focus-visible, :root[data-rail-overlay="open"] .rail-drawer-close:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; } :root[data-rail-mode="drawer"] .rail-apply, :root[data-rail-overlay="open"] .rail-apply { display: block; position: sticky; bottom: calc(-1 * var(--space-5)); z-index: 2; width: calc(100% + 2 * var(--rail-inset)); min-height: 48px; margin: var(--space-4) calc(-1 * var(--rail-inset)) calc(-1 * var(--space-5)); padding: var(--space-3) var(--rail-inset); border: 0; border-top: 1px solid var(--color-border); background-color: var(--color-accent); color: var(--chip-active-text); font: inherit; font-weight: 600; cursor: pointer; } :root[data-rail-mode="drawer"] .rail-apply:focus-visible, :root[data-rail-overlay="open"] .rail-apply:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -4px; } :root[data-rail-mode="drawer"] .rail-scrim, :root[data-rail-overlay="open"] .rail-scrim { position: fixed; inset: 0; z-index: 94; background-color: rgb(0 0 0 / 42%); } :root[data-rail-mode="drawer"] .rail-scrim[hidden], :root[data-rail-overlay="open"] .rail-scrim[hidden] { display: none; } .rail-interpreted-chip--or { font-weight: 600; } .rail-interpreted-conflict { display: inline; color: var(--dir-warn, #b45309); } .rail-interpreted-context { display: inline; color: var(--color-text-muted); } .rail-interpreted-fix { font: inherit; font-size: inherit; font-weight: 600; color: var(--color-accent); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; } .rail-interpreted-fix:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); } .filter-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3) 0 0; } .filter-summary[hidden] { display: none; } .filter-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 28px; padding: 3px var(--space-2) 3px var(--space-3); border: 1px solid var(--color-border-strong); border-radius: 14px; background-color: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--text-sm); cursor: pointer; } .filter-chip__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .filter-chip__x { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 9px; color: var(--color-text-muted); font-size: 15px; line-height: 1; } .filter-chip:hover { border-color: var(--color-text-muted); } .filter-chip:hover .filter-chip__x { background-color: var(--color-border); color: var(--color-text); } .filter-chip:focus-visible, .filter-summary__clear:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .filter-chip--more { padding-right: var(--space-3); } .filter-summary__clear { margin-left: auto; padding: 3px var(--space-2); border: 0; border-radius: var(--radius-sm); background-color: transparent; color: var(--color-text-muted); font: inherit; font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .filter-summary__clear:hover { color: var(--color-text); } @media (min-width: 901px), (min-width: 481px) and (not (pointer: coarse)) { :root[data-rail-mode="drawer"] .browse-col { position: absolute; top: 0; left: 0; width: 0; height: 0; padding: 0; background-color: transparent; overflow: visible; } :root[data-rail-mode="drawer"] .browse-col::after { display: none; } :root[data-rail-mode="drawer"] .browse-side { position: static; display: block; max-height: none; } :root[data-rail-mode="drawer"] .browse-head { display: none; } :root[data-rail-mode="drawer"] .rail-resizer { display: none; } :root[data-rail-mode="drawer"] .browse-main { padding-left: calc(var(--sheet-gutter) + var(--grid-gutter, 0px)); } :root[data-rail-mode="drawer"] .browse-main__head { margin-left: calc(-1 * (var(--sheet-gutter) + var(--grid-gutter, 0px))); padding-left: calc(var(--sheet-gutter) + var(--grid-gutter, 0px)); } :root[data-rail-mode="drawer"] .browse-main__head, :root[data-rail-presentation="drawer"].rail-collapsed .browse-main__head { flex-wrap: wrap; height: auto; min-height: var(--browse-head-h); row-gap: var(--space-2); } :root[data-rail-mode="drawer"] .browse-main__head > .browse-head__label, :root.rail-collapsed .browse-main__head > .browse-head__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } :root[data-rail-mode="drawer"] .browse-main__head > .browse-main__mark, :root.rail-collapsed .browse-main__head > .browse-main__mark { display: block; flex: none; } :root[data-rail-mode="drawer"] .browse-main__search, :root.rail-collapsed .browse-main__search { flex: 1 1 160px; margin-left: 0; } :root[data-rail-mode="drawer"].rail-collapsed .browse-col { flex: none; } :root[data-rail-mode="drawer"].rail-collapsed .browse-main { padding-left: calc(var(--sheet-gutter) + var(--grid-gutter, 0px)); } :root[data-rail-mode="drawer"] .browse-main__search { display: flex; align-items: center; gap: var(--space-2); } :root[data-rail-mode="drawer"] .browse-main__search > .search-control { flex: 1 1 auto; min-width: 0; } :root[data-rail-mode="drawer"] .browse-main__head > .browse-head__toggle, :root[data-rail-mode="drawer"] .browse.is-stuck .browse-main__head > .browse-head__toggle, :root.rail-collapsed .browse-main__head > .browse-head__toggle, :root.rail-collapsed .browse.is-stuck .browse-main__head > .browse-head__toggle { grid-auto-flow: column; align-items: center; justify-content: center; gap: 6px; flex: none; order: 0; width: auto; height: 36px; margin-left: 0; padding: 0 var(--space-3) 0 10px; border: 1px solid var(--color-border-strong); font: inherit; font-size: var(--text-sm); font-weight: 600; } :root[data-rail-mode="drawer"] .browse-head__toggle-text, :root[data-rail-presentation="drawer"].rail-collapsed .browse-head__toggle-text { display: block; } :root[data-rail-mode="drawer"] .browse-head__toggle-count, :root[data-rail-presentation="drawer"].rail-collapsed .browse-head__toggle-count { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background-color: var(--color-accent); color: var(--chip-active-text); font-size: var(--text-xs); font-variant-numeric: tabular-nums; } :root[data-rail-mode="drawer"] .browse-head__toggle-count[hidden], :root[data-rail-presentation="drawer"].rail-collapsed .browse-head__toggle-count[hidden] { display: none; } :root[data-rail-mode="drawer"] .browse.is-stuck .browse-main__mark { display: none; } } @media (max-width: 900px) and (pointer: coarse), (max-width: 480px) { .search-control__key { display: none; } .search-control--smart .rail-search { padding-right: var(--space-3); } .browse { display: block; } .browse-col { margin-left: 0; padding-left: 0; background-color: transparent; } .browse-col::after { display: none; } .browse { --sheet-gutter: var(--space-4); --rail-inset: var(--space-4); padding: 0 var(--sheet-gutter); } .browse-main__head { height: auto; min-height: var(--browse-head-h); flex-wrap: wrap; padding-bottom: var(--space-3); margin-left: 0; padding-left: 0; margin-right: 0; padding-right: 0; --head-edge: 0px; top: calc(var(--browse-top) + var(--browse-pin-gap)); } .browse-main .company-card { scroll-margin-top: calc(var(--browse-top) + var(--browse-pin-gap) + var(--browse-head-h) + var(--space-2)); } .browse-main__search { flex: 1 1 100%; margin-left: 0; min-width: 0; display: flex; align-items: center; gap: 6px; } .browse-main__search > .search-control { flex: 1 1 auto; min-width: 0; } .browse-main__head > .browse-head__toggle, .browse.is-stuck .browse-main__head > .browse-head__toggle { flex: none; order: 0; width: 44px; height: 44px; margin-left: 0; } .browse-main__tools { flex: 1 1 100%; min-width: 0; gap: 6px; } .browse-main__tools .theme-switch { grid-template-columns: 30px 30px; } .browse-main__tools .sort-control { flex: 0 1 auto; min-width: 0; } .browse-main__tools .view-toggle { flex: none; } .browse-main__search .rail-search, .sort-control, .view-toggle { height: 44px; } .browse-main__search .rail-search { min-height: 44px; } .view-toggle .rail-opt { height: 42px; width: 44px; } .browse-side { position: static; max-height: none; display: block; } .browse::before { display: block; position: sticky; top: var(--browse-top); z-index: 3; width: 0; height: var(--browse-pin-gap); margin: calc(-1 * var(--browse-pin-gap)) 0 0 calc(-1 * var(--sheet-gutter)); box-shadow: 0 0 0 100vw var(--color-bg); clip-path: inset(0 calc(-1 * (var(--sheet-w, 100vw) - 1px)) 0 -1px); } .browse::after { content: ""; display: block; position: absolute; inset: -1px; z-index: -1; box-shadow: var(--dir-sheet-shadow); pointer-events: none; } .browse .browse-main__head::before { content: ""; position: absolute; top: -1px; left: calc(-1 * (var(--sheet-gutter) + 1px)); right: calc(-1 * (var(--sheet-gutter) + 1px)); height: 1px; background: var(--dir-sheet-border); pointer-events: none; } .browse-head { position: static; } .browse-head { height: auto; min-height: 0; padding-bottom: 0; margin-left: 0; padding-left: 0; background-color: transparent; border-bottom: 0; box-shadow: none; } .browse.is-stuck .browse-head { box-shadow: none; } .browse.is-stuck .browse-head > .browse-head__home { display: none; } .browse-main__head > .browse-head__home, .browse.is-stuck .browse-main__head > .browse-head__home { display: grid; animation: none; order: -1; } .browse-main__mark { display: none; } .browse.is-stuck { --browse-pin-gap: var(--space-2); } .browse-main__head { border-bottom: 1px solid var(--color-border); } .browse-main { padding-left: 0; } .rail-resizer { display: none; } :root.rail-collapsed .browse-col { flex: none; } :root[data-rail-presentation="drawer"].rail-collapsed .browse-head { padding-right: 0; } :root[data-rail-presentation="drawer"].rail-collapsed .browse-head .browse-head__label { display: revert; } } @media (prefers-reduced-motion: reduce) { #toolbar-root { transition: none; } } @media (max-width: 560px) { .compare-tray { left: var(--space-3); right: var(--space-3); bottom: var(--space-3); transform: none; width: auto; max-width: none; } .compare-tray__go { margin-left: 0; } } .sort-claim { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-text-faint); } .toolbar { display: flex; flex-direction: column; gap: var(--space-3); padding-block: var(--space-4); border-bottom: 1px solid var(--color-border); } .toolbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); } .toolbar-row--search .toolbar-search { flex: 1 1 220px; } .toolbar-search { min-width: 160px; font: inherit; font-size: var(--text-sm); padding: 7px var(--space-3); color: var(--color-text); background-color: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); } .toolbar-search::placeholder { color: var(--color-text-faint); } .toolbar-count { margin-left: auto; font-size: var(--text-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .pref-wrap { position: relative; flex: none; } .toolbar-panel-btn { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); font: inherit; font-size: var(--text-sm); color: var(--color-text); background-color: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); padding: 7px var(--space-3); cursor: pointer; white-space: nowrap; } .toolbar-panel-btn:hover { border-color: var(--color-text-faint); } .toolbar-panel-btn[aria-expanded="true"] { border-color: var(--color-accent); } .pref-caret { font-size: 0.7em; color: var(--color-text-faint); } .toolbar-panel-btn__badge { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding-inline: 4px; display: grid; place-items: center; font-size: 0.65rem; font-weight: 700; line-height: 1; color: var(--color-surface); background-color: var(--color-accent); border-radius: 999px; } .pref-panel { position: absolute; top: calc(100% + var(--space-2)); right: 0; z-index: 30; width: 252px; max-height: min(74vh, 560px); overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); background-color: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-dialog); } .pref-panel[hidden] { display: none; } .pref-group-heading { margin: 0; font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-faint); } .pref-group { display: flex; flex-direction: column; gap: 2px; margin-top: calc(-1 * var(--space-2)); } .pref-row { display: flex; align-items: center; gap: var(--space-2); padding-block: 6px; font-size: inherit; color: var(--color-text); cursor: pointer; } .pref-row input[type="radio"], .pref-row input[type="checkbox"] { flex: none; accent-color: var(--color-accent); } .pref-n { margin-left: auto; font-size: var(--text-xs); color: var(--color-text-faint); font-variant-numeric: tabular-nums; } #toolbar-root .rail-cardgroup .pref-row { position: relative; min-height: 34px; padding-block: 0; padding-inline: var(--rail-row-bleed); margin-inline: calc(-1 * var(--rail-row-bleed)); width: calc(100% + 2 * var(--rail-row-bleed)); border-radius: 6px; transition: background-color 120ms ease, color 120ms ease; } #toolbar-root .rail-cardgroup .pref-row:hover { background-color: var(--color-border); } #toolbar-root .rail-cardgroup .pref-row:has(input:checked) { background-color: var(--color-accent-soft); color: var(--color-text); } #toolbar-root .rail-cardgroup .pref-row > input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; pointer-events: none; } #toolbar-root .rail-cardgroup .pref-row:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; } #toolbar-root .rail-cardgroup .pref-row > .rail-opt-ico { justify-self: center; width: var(--rail-ico-size); height: var(--rail-ico-size); } #toolbar-root .rail-cardgroup .pref-row:has(input:checked) > .rail-opt-ico { color: var(--color-accent); } #toolbar-root .rail-cardgroup .pref-row:not(:has(.rail-opt-ico))::before { content: ""; } #toolbar-root .rail-cardgroup .pref-row__label { min-width: 0; line-height: 1.25; } #toolbar-root .rail-cardgroup .pref-n { margin-left: 0; } #toolbar-root .rail-cardgroup .pref-row:has(input:checked) .pref-n { color: var(--color-text); } .pref-select { width: 100%; font: inherit; font-size: var(--text-sm); color: var(--color-text); background-color: var(--color-bg); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); padding: 7px var(--space-2); cursor: pointer; } .toolbar-theme { flex: none; width: 30px; height: 30px; display: grid; place-items: center; font: inherit; font-size: var(--text-base); line-height: 1; color: var(--color-text-muted); background-color: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); cursor: pointer; transition: color 150ms ease, border-color 150ms ease; } .toolbar-theme:hover { color: var(--color-text); border-color: var(--color-text-faint); } .theme-switch { position: relative; flex: none; display: inline-grid; grid-template-columns: 34px 34px; height: 36px; padding: 0; border: 1px solid var(--color-border); border-radius: 18px; background-color: var(--color-surface); cursor: pointer; overflow: hidden; } .theme-switch__end { position: relative; z-index: 1; display: grid; place-items: center; height: 34px; color: var(--color-text-muted); transition: color 150ms ease; } .theme-switch__end svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; fill: none; } .theme-switch__knob { position: absolute; top: 2px; left: 2px; width: 30px; height: 30px; border-radius: 50%; background-color: var(--color-accent-soft); transition: transform 180ms ease; } .theme-switch[data-theme="dark"] .theme-switch__knob { transform: translateX(34px); } .theme-switch[data-theme="light"] .theme-switch__end--light, .theme-switch[data-theme="dark"] .theme-switch__end--dark { color: var(--color-accent); } .theme-switch:hover .theme-switch__end { color: var(--color-text); } .theme-switch:hover[data-theme="light"] .theme-switch__end--light, .theme-switch:hover[data-theme="dark"] .theme-switch__end--dark { color: var(--color-accent); } .theme-switch:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .theme-switch__knob, .theme-switch__end { transition: none; } } .view-options, .view-options__panel { display: contents; } .view-options__btn { display: none; } @media (min-width: 901px), (min-width: 481px) and (not (pointer: coarse)) { .browse-main__search .rail-search { min-height: 24px; height: 24px; padding-left: 28px; padding-right: 8px; font-size: 12px; } .search-control__ico { left: 8px; width: 15px; height: 15px; } .sort-control { width: 116px; height: 24px; padding: 0 8px; gap: 5px; font-size: 12px; } .sort-control .rail-opt-ico { width: 15px; height: 15px; } .sort-control .sort-control__chev { width: 12px; height: 12px; } .view-toggle { height: 24px; } .view-toggle .rail-opt { width: 26px; height: 22px; } .view-toggle .rail-opt svg { width: 15px; height: 15px; } .theme-switch { grid-template-columns: 24px 24px; height: 24px; border-radius: 12px; } .theme-switch__end { height: 22px; } .theme-switch__end svg { width: 14px; height: 14px; } .theme-switch__knob { top: 1px; left: 2px; width: 20px; height: 20px; } .theme-switch[data-theme="dark"] .theme-switch__knob { transform: translateX(24px); } .browse-main__search { flex: 0 1 360px; min-width: 120px; } @container grid-col (max-width: 520px) { .browse-main__search { min-width: 88px; } .sort-control { width: 28px; padding: 0; justify-content: center; gap: 0; } .sort-control__text, .sort-control__chev { display: none; } } @container grid-col (max-width: 440px) { .browse-head__count { display: none; } } @container grid-col (max-width: 380px) { .browse-main__head { flex-wrap: wrap; height: auto; min-height: var(--browse-head-h); padding-block: var(--space-3); row-gap: var(--space-2); } .browse-main__tools { margin-left: auto; } .browse-main__search { order: 1; flex: 1 1 100%; min-width: 0; margin-left: 0; } } @container grid-col (max-width: 240px) { .browse-main__tools { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-end; row-gap: var(--space-2); } } @container grid-col (max-width: 450px) { :root[data-rail-mode="drawer"] .browse-main__controls, :root[data-rail-presentation="drawer"].rail-collapsed .browse-main__controls { display: flex; align-items: center; gap: var(--space-2); flex: 1 1 100%; min-width: 0; } :root[data-rail-mode="drawer"] .browse-main__controls > .browse-main__search, :root.rail-collapsed .browse-main__controls > .browse-main__search { order: 0; flex: 1 1 auto; min-width: 0; margin-left: 0; } :root[data-rail-mode="drawer"] .browse-main__controls > .browse-main__tools, :root.rail-collapsed .browse-main__controls > .browse-main__tools { order: 0; flex: none; margin-left: 0; } } @container grid-col (max-width: 640px) { .view-options { position: relative; display: block; flex: none; } .view-options__btn { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background-color: var(--color-surface); color: var(--color-text-muted); cursor: pointer; } .view-options__btn:hover { color: var(--color-text); } .view-options__btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .view-options__btn .rail-opt-ico { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; } .view-options[data-open] .view-options__btn { color: var(--color-text); border-color: var(--color-text-muted); } .view-options__panel { display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background-color: var(--color-surface); box-shadow: var(--dir-sheet-shadow); } .view-options[data-open] .view-options__panel { display: flex; } } :root[data-rail-mode="drawer"] .browse-main__search { min-width: 160px; } @container grid-col (max-width: 640px) { :root[data-rail-mode="drawer"] .browse-head__count { display: none; } :root[data-rail-mode="drawer"] .sort-control { width: 28px; padding: 0; justify-content: center; gap: 0; } :root[data-rail-mode="drawer"] .sort-control__text, :root[data-rail-mode="drawer"] .sort-control__chev { display: none; } } @container grid-col (max-width: 480px) { :root[data-rail-mode="drawer"] .browse-main__head { flex-wrap: wrap; height: auto; min-height: var(--browse-head-h); padding-block: var(--space-3); row-gap: var(--space-2); } :root[data-rail-mode="drawer"] .browse-main__tools { margin-left: auto; } } } .toolbar-view { flex: none; display: flex; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); overflow: hidden; } .view-button { font: inherit; font-size: var(--text-base); line-height: 1; width: 30px; height: 30px; display: grid; place-items: center; color: var(--color-text-faint); background-color: var(--color-surface); border: none; cursor: pointer; transition: color 150ms ease, background-color 150ms ease; } .view-button + .view-button { border-left: 1px solid var(--color-border-strong); } .view-button:hover { color: var(--color-text); } .view-button.is-active { color: var(--color-bg); background-color: var(--color-text); } .table-scroll { width: fit-content; max-width: 100%; overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-surface); background-image: linear-gradient(to right, var(--color-surface), transparent 28px), linear-gradient(to left, var(--color-surface), transparent 28px), linear-gradient(to right, var(--scroll-shadow), transparent 18px), linear-gradient(to left, var(--scroll-shadow), transparent 18px); background-position: left center, right center, left center, right center; background-repeat: no-repeat; background-size: 28px 100%, 28px 100%, 18px 100%, 18px 100%; background-attachment: local, local, scroll, scroll; } .company-table { border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; } .company-table thead th { text-align: left; font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); background-color: var(--color-surface); border-bottom: 1px solid var(--color-border-strong); padding: var(--space-3); white-space: nowrap; } .company-table td, .company-table tbody th { padding: var(--space-3); border-bottom: 1px solid var(--color-border); vertical-align: middle; white-space: nowrap; } .company-table tbody th { text-align: left; font-weight: 400; } .company-table thead th:first-child, .company-table tbody th { position: sticky; left: 0; z-index: 1; background-color: var(--color-surface); } .company-table thead th { position: sticky; top: 0; z-index: 2; } .company-table thead th:first-child { z-index: 3; } .company-row:hover > th, .company-row:has(.table-open:focus-visible) > th { background-color: var(--color-bg); } .company-table th:first-child { border-right: 1px solid var(--color-border); } .company-table tbody tr:last-child td, .company-table tbody tr:last-child th { border-bottom: none; } .table-num { text-align: right; } .company-table thead th.table-num { text-align: right; } .table-sort { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); } .table-sort:hover { color: var(--color-text); } .table-sort.is-active { color: var(--color-text); } .table-sort-arrow { display: inline-block; min-width: 0.75em; font-size: 0.9em; } .table-num .table-sort { flex-direction: row-reverse; } .company-row { cursor: pointer; transition: background-color 120ms ease; } .company-row:hover { background-color: var(--color-bg); } .table-open:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 2px; } .company-row:has(.table-open:focus-visible) { background-color: var(--color-bg); } .company-row.is-selected > th, .company-row.is-selected > td, .company-row.is-selected:hover > th, .company-row.is-selected:hover > td { background-color: var(--color-accent-soft); box-shadow: inset 0 1px 0 var(--color-accent), inset 0 -1px 0 var(--color-accent); } .company-row.is-selected > :first-child { box-shadow: inset 0 1px 0 var(--color-accent), inset 0 -1px 0 var(--color-accent), inset 1px 0 0 var(--color-accent); } .company-row.is-selected > :last-child { box-shadow: inset 0 1px 0 var(--color-accent), inset 0 -1px 0 var(--color-accent), inset -1px 0 0 var(--color-accent); } .company-row.is-selected:has(.table-open:focus-visible) > th, .company-row.is-selected:has(.table-open:focus-visible) > td { background-color: var(--color-accent-soft); } .table-name { display: inline-flex; align-items: center; gap: var(--space-3); } .table-name-text { font: inherit; font-weight: 600; color: var(--color-text); } .table-open { background: none; border: none; padding: 0; text-align: left; cursor: pointer; } .table-category-inner { display: inline-flex; align-items: center; gap: var(--space-2); } .table-category { color: var(--color-text-muted); } .table-hq .flag { margin-right: var(--space-2); vertical-align: -2px; } .table-empty { color: var(--color-text-faint); } .company-card { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; margin: 0; padding: 0; overflow: hidden; text-align: left; container-type: inline-size; container-name: card; text-decoration: none; font: inherit; font-family: var(--font-brand); color: inherit; background-color: var(--card-fill); border: 1px solid var(--color-border); border-radius: 10px; box-shadow: none; cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease, box-shadow 200ms ease; } .card-top { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 12px 12px 6px; } .card-caps { margin-top: 4px; margin-bottom: 10px; padding-inline: 12px; font-size: var(--text-meta); line-height: 1.35; --card-caps-lh: 1.35; min-height: calc(2 * var(--card-caps-lh) * 1em); color: var(--color-text-faint); } .card-caps__text { -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .card-caps__text--compact { display: -webkit-box; } .card-caps__text--roomy { display: none; } .card-foot { margin-top: auto; display: flex; align-items: center; gap: var(--space-2); margin-inline: 12px; padding: var(--card-foot-pt) 0 var(--card-foot-pb); border-top: 1px solid var(--color-border); font-size: var(--text-meta); line-height: 1.3; --card-foot-pt: 8px; --card-foot-pb: 10px; color: var(--color-text-muted); } .card-foot-cat { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card-foot-chevron { flex: none; width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; fill: none; color: var(--color-text-faint); } .company-card--logo .card-top { justify-content: center; padding: var(--space-4); } .company-card:hover, .company-card:focus-visible { position: relative; z-index: 2; background-color: var(--dir-card-hover-bg); border-color: var(--dir-card-hover-border); outline: none; } .company-card:focus-visible { box-shadow: inset 0 0 0 2px var(--color-accent); } .company-card { --card-selected-bg: color-mix(in srgb, var(--dir-accent) 5%, var(--dir-card)); --card-selected-edge: var(--dir-accent); --card-selected-halo: color-mix(in srgb, var(--dir-accent) 30%, transparent); } .company-card.is-selected, .company-card.is-selected:hover { background-color: var(--card-selected-bg); border-color: var(--card-selected-edge); background-image: linear-gradient( 100deg, transparent 38%, color-mix(in srgb, var(--chip-sheen) 16%, transparent) 46%, color-mix(in srgb, var(--chip-sheen) 44%, transparent) 50%, color-mix(in srgb, var(--chip-sheen) 16%, transparent) 54%, transparent 62%); background-size: 300% 100%; background-repeat: no-repeat; background-position: 0 0; box-shadow: 0 0 8px var(--card-selected-halo); } @media (prefers-reduced-motion: no-preference) { .company-card.is-selected { animation: deck-chip-sweep 620ms cubic-bezier(0.22, 0.61, 0.36, 1); } } .company-card { position: relative; } .card-viewing-check { position: absolute; top: 10px; right: 10px; width: 16px; height: 16px; border-radius: 50%; background-color: var(--color-accent); pointer-events: none; } .card-viewing-check::after { content: ""; position: absolute; left: 5px; top: 3px; width: 4px; height: 8px; border: solid var(--color-on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); } .company-card .logo .logo-img { border-radius: inherit; } .company-card.is-selected:focus-visible { background-color: var(--card-selected-bg); border-color: var(--card-selected-edge); box-shadow: inset 0 0 0 2px var(--color-accent), inset 0 0 0 4px var(--dir-card), 0 0 8px var(--card-selected-halo); } .card-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .card-name-row { display: flex; padding-right: 12px; align-items: center; gap: var(--space-1); min-width: 0; --card-name-lines: 2; min-height: calc(var(--card-name-lines) * var(--leading-tight) * var(--text-base)); max-height: calc(var(--card-name-lines) * var(--leading-tight) * var(--text-base)); line-height: var(--leading-tight); overflow: hidden; } .card-name-row > .company-name { flex: 1 1 auto; min-width: 0; overflow: hidden; } .company-name__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .card-name-row > .ticker-badge { flex: none; } .card-name-row .flag { vertical-align: -2px; margin-right: var(--space-2); } .card-name-row .ticker-badge { margin-left: var(--space-2); } @container card (max-width: 199.98px) { .company-grid[data-ticker="on"] .card-name-row { flex-wrap: wrap; --card-name-lines: 3; } .company-grid[data-ticker="on"] .card-name-row > .company-name { flex: 1 1 100%; } .company-grid[data-ticker="on"] .card-name-row .ticker-badge { margin-left: 0; } } .flag { flex: none; width: 20px; height: 15px; border-radius: 2px; object-fit: cover; box-shadow: inset 0 0 0 1px var(--flag-hairline); } .company-name { font-size: var(--text-base); font-weight: 600; letter-spacing: -0.01em; overflow-wrap: break-word; } .card-metric-row { display: flex; align-items: center; gap: var(--space-2); } .card-metric { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .card-metric--empty { color: var(--color-text-faint); font-size: var(--text-xs); font-weight: 400; letter-spacing: normal; } .card-basis { color: var(--color-text-faint); font-size: var(--text-xs); } .card-unsourced { color: var(--color-text-faint); font-size: var(--text-xs); font-style: italic; } .card-country { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--color-text-faint); } .card-country .flag { width: 14px; height: 11px; } .card-description__text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-description { margin-top: var(--space-2); font-size: var(--text-sm); --card-desc-lh: 1.35; line-height: var(--card-desc-lh); min-height: calc(2 * var(--card-desc-lh) * 1em); color: var(--color-text-muted); } .company-card > .card-description { padding: 0 12px; } .company-card > .card-description { margin-top: 0; } .company-card:not(:has(> .card-foot)) > .card-description { margin-bottom: 10px; } .company-card:not(:has(> .card-foot)):not(:has(> .card-description)) > .card-top { padding-bottom: 12px; } @container card (max-width: 93.98px) { .company-card--logo .card-viewing-check { display: none; } } @container card (min-width: 240px) { .card-top { padding: 18px 18px 8px; gap: 12px; align-items: center; } .company-card > .card-description { padding-inline: 18px; margin-top: 16px; } .card-caps { margin-top: 6px; margin-bottom: 14px; padding-inline: 18px; } .card-caps__text--compact { display: none; } .card-caps__text--roomy { display: -webkit-box; } .card-foot { --card-foot-pt: 10px; --card-foot-pb: 16px; margin-inline: 18px; } .company-card:not(:has(> .card-foot)) > .card-description { margin-bottom: 16px; } .company-card:not(:has(> .card-foot)):not(:has(> .card-description)) > .card-top { padding-bottom: 18px; } .company-name { font-size: 1rem; } .card-name-row { font-size: 1rem; min-height: calc(var(--card-name-lines) * var(--leading-tight) * 1rem); max-height: calc(var(--card-name-lines) * var(--leading-tight) * 1rem); } .card-description { font-size: 0.875rem; --card-desc-lh: 1.45; } .card-foot { font-size: 0.8125rem; } .company-card .logo--sm { width: 48px; height: 48px; font-size: var(--text-base); } } :root[data-panel-claim="column"] .company-card > .card-top { padding: 14px 18px 6px; } :root[data-panel-claim="column"] .company-card > .card-description { margin-top: 10px; } :root[data-panel-claim="column"] .company-card > .card-caps { margin-bottom: 8px; } :root[data-panel-claim="column"] .company-card > .card-foot { --card-foot-pt: 8px; --card-foot-pb: 8px; } :root[data-panel-claim="column"] .company-card:not(:has(> .card-foot)) > .card-description { margin-bottom: 10px; } :root[data-panel-claim="column"] .company-grid { gap: 12px; } @container card (min-width: 340px) { .card-top { padding: 20px 20px 8px; gap: 16px; } .company-card .logo--sm { width: 52px; height: 52px; } .company-name { font-size: 1.25rem; } .card-name-row { font-size: 1.25rem; min-height: calc(var(--card-name-lines) * var(--leading-tight) * 1.25rem); max-height: calc(var(--card-name-lines) * var(--leading-tight) * 1.25rem); } .company-card > .card-description { padding-inline: 20px; margin-top: 18px; font-size: 0.9375rem; --card-desc-lh: 1.5; } .card-caps { margin-top: 8px; margin-bottom: 16px; padding-inline: 20px; font-size: 0.8125rem; } .card-foot { --card-foot-pt: 12px; --card-foot-pb: 18px; margin-inline: 20px; gap: var(--space-2); } .company-card:not(:has(> .card-foot)) > .card-description { margin-bottom: 18px; } .company-card:not(:has(> .card-foot)):not(:has(> .card-description)) > .card-top { padding-bottom: 20px; } } .grid-divider { grid-column: 1 / -1; margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border-strong); } .grid-divider-title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); } .grid-divider-title .flag { width: 18px; height: 13.5px; } .grid-divider-note { margin-top: var(--space-1); max-width: 62ch; color: var(--color-text-faint); font-size: var(--text-sm); } .category-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background-color: var(--cat-default-fg); } .logo { display: grid; place-items: center; flex: none; color: var(--cat-default-fg); border-radius: var(--logo-radius); } .logo--sm { width: var(--logo-sm); height: var(--logo-sm); font-size: var(--text-sm); } .logo--lg { width: var(--logo-lg); height: var(--logo-lg); font-size: var(--text-lg); } .logo > * { grid-area: 1 / 1; } .logo-initials { font-weight: 700; letter-spacing: 0.02em; user-select: none; visibility: hidden; } html:not(.js) .logo-initials, .logo--tint .logo-initials { visibility: visible; } .logo--tint { background-color: var(--cat-default-bg); border: 1px solid var(--logo-edge); } .logo-img { width: 100%; height: 100%; object-fit: contain; opacity: 0; } .logo--has-image .logo-initials { visibility: hidden; } .category-dot[data-category="foundation-models"] { background-color: var(--cat-foundation-fg); } .category-dot[data-category="infrastructure"] { background-color: var(--cat-infrastructure-fg); } .category-dot[data-category="application"] { background-color: var(--cat-application-fg); } .category-dot[data-category="hardware"] { background-color: var(--cat-hardware-fg); } .logo--tint[data-category="foundation-models"] { background-color: var(--cat-foundation-bg); color: var(--cat-foundation-fg); } .logo--tint[data-category="infrastructure"] { background-color: var(--cat-infrastructure-bg); color: var(--cat-infrastructure-fg); } .logo--tint[data-category="application"] { background-color: var(--cat-application-bg); color: var(--cat-application-fg); } .logo--tint[data-category="hardware"] { background-color: var(--cat-hardware-bg); color: var(--cat-hardware-fg); } .logo--has-image .logo-img { opacity: 1; } .logo--backing { background-color: var(--logo-backing); } .category-badge { align-self: flex-start; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.02em; padding: 3px var(--space-2); border-radius: var(--radius-sm); background-color: var(--cat-default-bg); color: var(--cat-default-fg); } .category-badge[data-category="foundation-models"] { background-color: var(--cat-foundation-bg); color: var(--cat-foundation-fg); } .category-badge[data-category="infrastructure"] { background-color: var(--cat-infrastructure-bg); color: var(--cat-infrastructure-fg); } .category-badge[data-category="application"] { background-color: var(--cat-application-bg); color: var(--cat-application-fg); } .category-badge[data-category="hardware"] { background-color: var(--cat-hardware-bg); color: var(--cat-hardware-fg); } .ticker-badge { display: inline-block; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-wide); color: var(--color-accent); background-color: var(--color-accent-soft); border-radius: var(--radius-sm); padding: 1px var(--space-1); white-space: nowrap; } body:has(.company-dialog[open][data-mode="modal"]) { overflow: hidden; } html { scrollbar-gutter: stable; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } .company-dialog { --panel-pad: var(--space-6); --panel-bg: var(--dir-panel); width: min(480px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; padding: var(--panel-pad); overflow-y: auto; border: none; border-left: 1px solid var(--color-border); border-radius: 0; background-color: var(--panel-bg); color: var(--color-text); box-shadow: var(--shadow-dialog); animation: drawer-in 220ms cubic-bezier(0.32, 0.72, 0, 1); } .company-dialog::backdrop { background-color: var(--color-scrim); backdrop-filter: blur(2px); animation: drawer-backdrop-in 220ms ease-out; } @media (min-width: 901px), (min-width: 481px) and (not (pointer: coarse)) { .company-dialog[data-mode="modal"] { width: min(560px, calc(100vw - 2 * var(--space-5))); max-width: calc(100vw - 2 * var(--space-5)); } .company-dialog--comparing[data-mode="modal"] { width: min(760px, calc(100vw - 2 * var(--space-5))); max-width: calc(100vw - 2 * var(--space-5)); } } .company-dialog[data-mode="modal"].company-dialog--discovery, .company-dialog[data-mode="modal"].company-dialog--workspace { width: min(1400px, calc(100vw - 2 * var(--space-4))); max-width: calc(100vw - 2 * var(--space-4)); } @keyframes drawer-in { from { transform: translateX(100%); } } @keyframes drawer-backdrop-in { from { opacity: 0; } } .dialog-close-form { float: right; margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) 0 0; } .dialog-close { display: grid; place-items: center; width: 32px; height: 32px; font-size: 1.25rem; line-height: 1; color: var(--color-text-faint); background: none; border: none; border-radius: var(--radius-sm); cursor: pointer; } .dialog-close:hover { color: var(--color-text); background-color: var(--color-bg); } .dialog-header { display: flex; align-items: center; gap: var(--space-4); } .dialog-header-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); min-width: 0; } .dialog-title-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .dialog-title { font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.015em; line-height: var(--leading-tight); } .dialog-description { margin-top: var(--space-4); color: var(--color-text-muted); } .dialog-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-border); } .stat-label { display: block; font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-faint); } .stat-value { display: block; margin-top: 2px; font-variant-numeric: tabular-nums; } .stat-value:has(.flag) { display: inline-flex; align-items: flex-start; gap: var(--space-2); } .stat-value:has(.flag) > .flag { margin-top: 0.3em; } .stat-value--empty { color: var(--color-text-faint); } .stat-estimate { color: var(--color-text-faint); font-size: var(--text-xs); font-style: italic; } .stat-source { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.35; color: var(--color-text-faint); text-decoration: none; overflow-wrap: anywhere; } a.stat-source:hover, a.stat-source:focus-visible { color: var(--color-accent); text-decoration: underline; } .stat-source--none { font-style: italic; } .stat-history { font-style: italic; } .stat-sources { margin-top: var(--space-3); } .source-list { margin: var(--space-3) 0 0; } .source-field { font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-faint); } .source-field + .source-detail { margin: 2px 0 0; } .source-detail + .source-field { margin-top: var(--space-4); } .source-head { margin: 0; } .source-note { margin: 4px 0 0; font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-muted); overflow-wrap: anywhere; } .entity-absorbed { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); } .entity-absorbed-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .entity-absorbed-link:hover, .entity-absorbed-link:focus-visible { color: var(--color-accent); } .entity-acquired, .entity-origin { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); } .entity-acquired a, .entity-origin a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .entity-acquired a:hover, .entity-acquired a:focus-visible, .entity-origin a:hover, .entity-origin a:focus-visible { color: var(--color-accent); } .compare-shared-model { margin: 0 0 var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); } .compare-shared-model a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .compare-shared-model a:hover, .compare-shared-model a:focus-visible { color: var(--color-accent); } .catalog-scope { margin: var(--space-2) 0 var(--space-4); font-size: var(--text-xs); line-height: 1.5; color: var(--color-text-muted); } .catalog-scope a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .catalog-scope a:hover, .catalog-scope a:focus-visible { color: var(--color-accent); } .dialog-section-title { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-border); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-faint); } .related-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-2); margin-top: var(--space-3); } .related-row:has(> :nth-child(4)) { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); } .related-row--collapsed > :nth-child(n + 7) { display: none; } .peer-toggle { display: inline-block; margin: var(--space-3) 0 0; padding: 0; font: inherit; font-size: var(--text-sm); color: var(--color-accent); background: none; border: none; border-bottom: 1px solid currentColor; cursor: pointer; } .peer-toggle:hover { opacity: 0.75; } .peer-expand { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .peer-expand:checked + .related-row > :nth-child(n + 7) { display: flex; } .peer-toggle-less { display: none; } .peer-expand:checked + .related-row + .peer-toggle .peer-toggle-more { display: none; } .peer-expand:checked + .related-row + .peer-toggle .peer-toggle-less { display: inline; } .peer-expand:focus-visible + .related-row + .peer-toggle { outline: 2px solid var(--color-accent); outline-offset: 2px; } .rail-count { color: var(--color-text-faint); font-variant-numeric: tabular-nums; } .rail-note { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); } .rail-pivot { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); } .rail-chip { display: none; align-items: center; gap: var(--space-1); margin: 0 var(--space-2) var(--space-2) 0; font-size: var(--text-sm); color: var(--color-text-muted); background-color: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: 999px; padding: 4px var(--space-3); cursor: pointer; } .rail-chip:has(~ .rail-expand:checked) { display: inline-flex; } .rail-chip-count { color: var(--color-text-faint); font-variant-numeric: tabular-nums; } .rail-chip:hover { border-color: var(--color-text-faint); } .rail-pivot:checked + .rail-chip { color: var(--chip-active-text); background-color: var(--color-accent); border-color: var(--color-accent); } .rail-pivot:checked + .rail-chip .rail-chip-count { color: inherit; opacity: 0.75; } .rail-pivot:focus-visible + .rail-chip { outline: 2px solid var(--color-accent); outline-offset: 2px; } .rail { margin-top: var(--space-2); display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3); } .rail-card { text-align: left; font: inherit; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-surface); text-decoration: none; color: inherit; transition: border-color 120ms ease, background-color 120ms ease; } .rail-card:hover { border-color: var(--color-text-faint); background-color: var(--color-bg); } .rail-head { display: flex; align-items: center; gap: var(--space-2); } .rail-name { font-weight: 600; color: var(--color-text); } .rail-figure { margin-left: auto; font-size: var(--text-sm); color: var(--color-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; } .rail-reason { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--color-text-muted); } .rail-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); } .rail-badge { font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; border-radius: var(--radius-sm); padding: 2px 6px; background-color: var(--cat-default-bg); color: var(--cat-default-fg); } .rail-badge--filing { background-color: var(--cat-application-bg); color: var(--cat-application-fg); } .rail-badge--partner { background-color: var(--color-accent-soft); color: var(--color-accent); } .rail-badge--supplier { background-color: var(--color-accent-soft); color: var(--color-accent); } .rail-badge--scope { background-color: var(--cat-foundation-bg); color: var(--cat-foundation-fg); } .rail-badge--curated { background-color: var(--cat-application-bg); color: var(--cat-application-fg); } .rail-badge--capability { background-color: var(--cat-infrastructure-bg); color: var(--cat-infrastructure-fg); } .rail-badge--scale { background-color: var(--cat-hardware-bg); color: var(--cat-hardware-fg); } .rail-badge--layer { background-color: var(--cat-foundation-bg); color: var(--cat-foundation-fg); } .rail-pivot[value="capability_overlap"]:checked ~ .rail .rail-card:not([data-axes~="capability_overlap"]), .rail-pivot[value="same_stack_layer"]:checked ~ .rail .rail-card:not([data-axes~="same_stack_layer"]), .rail-pivot[value="comparable_scale"]:checked ~ .rail .rail-card:not([data-axes~="comparable_scale"]), .rail-pivot[value="named_in_filings"]:checked ~ .rail .rail-card:not([data-axes~="named_in_filings"]), .rail-pivot[value="same_stage"]:checked ~ .rail .rail-card:not([data-axes~="same_stage"]) { display: none; } .rail-pivot[value="scope:buy-ai-compute"]:checked ~ .rail .rail-card:not([data-axes~="scope:buy-ai-compute"]), .rail-pivot[value="scope:program-gpu-accelerators"]:checked ~ .rail .rail-card:not([data-axes~="scope:program-gpu-accelerators"]), .rail-pivot[value="scope:source-custom-ai-silicon"]:checked ~ .rail .rail-card:not([data-axes~="scope:source-custom-ai-silicon"]), .rail-pivot[value="scope:connect-ai-clusters"]:checked ~ .rail .rail-card:not([data-axes~="scope:connect-ai-clusters"]), .rail-pivot[value="scope:buy-hbm"]:checked ~ .rail .rail-card:not([data-axes~="scope:buy-hbm"]), .rail-pivot[value="scope:use-ai-assistant"]:checked ~ .rail .rail-card:not([data-axes~="scope:use-ai-assistant"]), .rail-pivot[value="scope:build-on-llm-api"]:checked ~ .rail .rail-card:not([data-axes~="scope:build-on-llm-api"]), .rail-pivot[value="scope:ai-assisted-coding"]:checked ~ .rail .rail-card:not([data-axes~="scope:ai-assisted-coding"]), .rail-pivot[value="scope:automate-a-process"]:checked ~ .rail .rail-card:not([data-axes~="scope:automate-a-process"]), .rail-pivot[value="scope:build-ai-agents"]:checked ~ .rail .rail-card:not([data-axes~="scope:build-ai-agents"]), .rail-pivot[value="scope:query-my-own-data"]:checked ~ .rail .rail-card:not([data-axes~="scope:query-my-own-data"]), .rail-pivot[value="scope:serve-a-model"]:checked ~ .rail .rail-card:not([data-axes~="scope:serve-a-model"]), .rail-pivot[value="scope:search-internal-documents"]:checked ~ .rail .rail-card:not([data-axes~="scope:search-internal-documents"]), .rail-pivot[value="scope:train-a-model"]:checked ~ .rail .rail-card:not([data-axes~="scope:train-a-model"]), .rail-pivot[value="scope:draft-written-content"]:checked ~ .rail .rail-card:not([data-axes~="scope:draft-written-content"]), .rail-pivot[value="scope:handle-support-conversations"]:checked ~ .rail .rail-card:not([data-axes~="scope:handle-support-conversations"]), .rail-pivot[value="scope:detect-security-threats"]:checked ~ .rail .rail-card:not([data-axes~="scope:detect-security-threats"]), .rail-pivot[value="scope:transcribe-speech"]:checked ~ .rail .rail-card:not([data-axes~="scope:transcribe-speech"]), .rail-pivot[value="scope:generate-visual-media"]:checked ~ .rail .rail-card:not([data-axes~="scope:generate-visual-media"]), .rail-pivot[value="scope:generate-speech-audio"]:checked ~ .rail .rail-card:not([data-axes~="scope:generate-speech-audio"]), .rail-pivot[value="scope:document-clinical-encounter"]:checked ~ .rail .rail-card:not([data-axes~="scope:document-clinical-encounter"]), .rail-pivot[value="scope:extract-facts-from-text"]:checked ~ .rail .rail-card:not([data-axes~="scope:extract-facts-from-text"]), .rail-pivot[value="scope:recreate-visual-style"]:checked ~ .rail .rail-card:not([data-axes~="scope:recreate-visual-style"]), .rail-pivot[value="scope:pick-a-coding-model"]:checked ~ .rail .rail-card:not([data-axes~="scope:pick-a-coding-model"]), .rail-pivot[value="scope:tailor-job-application"]:checked ~ .rail .rail-card:not([data-axes~="scope:tailor-job-application"]), .rail-pivot[value="scope:draft-and-vary-a-message"]:checked ~ .rail .rail-card:not([data-axes~="scope:draft-and-vary-a-message"]), .rail-pivot[value="scope:extract-what-matters-from-a-document"]:checked ~ .rail .rail-card:not([data-axes~="scope:extract-what-matters-from-a-document"]), .rail-pivot[value="scope:use-ai-as-emotional-companion"]:checked ~ .rail .rail-card:not([data-axes~="scope:use-ai-as-emotional-companion"]), .rail-pivot[value="scope:automate-a-web-form-and-desktop"]:checked ~ .rail .rail-card:not([data-axes~="scope:automate-a-web-form-and-desktop"]), .rail-pivot[value="scope:rough-cut-my-footage"]:checked ~ .rail .rail-card:not([data-axes~="scope:rough-cut-my-footage"]), .rail-pivot[value="scope:monitor-an-ai-agent"]:checked ~ .rail .rail-card:not([data-axes~="scope:monitor-an-ai-agent"]), .rail-pivot[value="scope:build-a-trading-research-playbook"]:checked ~ .rail .rail-card:not([data-axes~="scope:build-a-trading-research-playbook"]), .rail-pivot[value="scope:integrate-a-weather-model"]:checked ~ .rail .rail-card:not([data-axes~="scope:integrate-a-weather-model"]), .rail-pivot[value="scope:delegate-personal-chores-to-agent"]:checked ~ .rail .rail-card:not([data-axes~="scope:delegate-personal-chores-to-agent"]), .rail-pivot[value="scope:audit-resume-for-ats"]:checked ~ .rail .rail-card:not([data-axes~="scope:audit-resume-for-ats"]), .rail-pivot[value="scope:summarize-a-meeting-into-actions"]:checked ~ .rail .rail-card:not([data-axes~="scope:summarize-a-meeting-into-actions"]), .rail-pivot[value="scope:run-an-interview-copilot"]:checked ~ .rail .rail-card:not([data-axes~="scope:run-an-interview-copilot"]), .rail-pivot[value="scope:triage-my-inbox"]:checked ~ .rail .rail-card:not([data-axes~="scope:triage-my-inbox"]), .rail-pivot[value="scope:clean-a-transcript-without-rewriting"]:checked ~ .rail .rail-card:not([data-axes~="scope:clean-a-transcript-without-rewriting"]), .rail-pivot[value="scope:explain-a-spreadsheet-formula"]:checked ~ .rail .rail-card:not([data-axes~="scope:explain-a-spreadsheet-formula"]), .rail-pivot[value="scope:get-a-daily-priority-checklist"]:checked ~ .rail .rail-card:not([data-axes~="scope:get-a-daily-priority-checklist"]), .rail-pivot[value="scope:remember-context-across-sessions"]:checked ~ .rail .rail-card:not([data-axes~="scope:remember-context-across-sessions"]), .rail-pivot[value="scope:produce-editable-office-files"]:checked ~ .rail .rail-card:not([data-axes~="scope:produce-editable-office-files"]), .rail-pivot[value="scope:red-team-our-own-systems"]:checked ~ .rail .rail-card:not([data-axes~="scope:red-team-our-own-systems"]), .rail-pivot[value="scope:make-a-usable-vector-logo"]:checked ~ .rail .rail-card:not([data-axes~="scope:make-a-usable-vector-logo"]), .rail-pivot[value="scope:organize-my-device"]:checked ~ .rail .rail-card:not([data-axes~="scope:organize-my-device"]), .rail-pivot[value="scope:edit-my-own-photo"]:checked ~ .rail .rail-card:not([data-axes~="scope:edit-my-own-photo"]), .rail-pivot[value="scope:drive-autonomously"]:checked ~ .rail .rail-card:not([data-axes~="scope:drive-autonomously"]), .rail-pivot[value="scope:get-recommended-by-ai-search"]:checked ~ .rail .rail-card:not([data-axes~="scope:get-recommended-by-ai-search"]), .rail-pivot[value="scope:discover-drug-candidates"]:checked ~ .rail .rail-card:not([data-axes~="scope:discover-drug-candidates"]) { display: none; } .rail-pivot[value="all"]:checked ~ .rail-expand:not(:checked) ~ .rail > :nth-child(n + 7) { display: none; } .rail-pivot:not([value="all"]):checked ~ .rail-toggle { display: none; } .rail-expand:checked + .rail + .rail-toggle .peer-toggle-more { display: none; } .rail-expand:checked + .rail + .rail-toggle .peer-toggle-less { display: inline; } .rail-expand:focus-visible + .rail + .rail-toggle { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); } .rail-toggle { margin-top: var(--space-3); } .related-card { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; margin: 0; padding: var(--space-3); text-align: left; font: inherit; color: inherit; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; transition: box-shadow 150ms ease, border-color 150ms ease, transform 150ms ease; } .related-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-card-hover); transform: translateY(-1px); } .related-card:active { transform: translateY(0); } .related-name { font-size: var(--text-sm); font-weight: 600; line-height: var(--leading-tight); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: break-word; } .related-metric { font-size: var(--text-xs); line-height: var(--leading-tight); color: var(--color-text-faint); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; overflow-wrap: break-word; } .product-list { margin-top: var(--space-3); padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); } .product-item { min-width: 0; } .product-list--collapsed > :nth-child(n + 7) { display: none; } .product-expand { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .product-expand:checked + .product-list > :nth-child(n + 7) { display: block; } .product-expand:checked + .product-list + .product-toggle .peer-toggle-more { display: none; } .product-expand:checked + .product-list + .product-toggle .peer-toggle-less { display: inline; } .product-expand:focus-visible + .product-list + .product-toggle { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); } .entity-actions { margin: var(--space-3) 0 0; } .entity-action { display: inline-block; padding: var(--space-2) var(--space-3); font-size: var(--text-sm); font-weight: 600; color: var(--color-accent); text-decoration: none; border: 1px solid var(--color-accent); border-radius: var(--radius-sm); } .entity-action:hover { background: var(--color-accent-soft, transparent); } .entity-action:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .product-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); } .product-name { font-size: var(--text-sm); font-weight: 600; line-height: var(--leading-tight); overflow-wrap: break-word; color: var(--color-accent); text-decoration: none; } .product-name:hover { text-decoration: underline; } .product-type { flex: none; padding: 1px var(--space-2); font-size: var(--text-xs); color: var(--color-text-faint); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); white-space: nowrap; } .product-tasks { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); } .product-task { padding: 2px var(--space-2); font: inherit; font-size: var(--text-xs); color: var(--color-text-muted); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; transition: background-color 140ms ease, color 140ms ease; } .product-task:hover { color: var(--color-text); border-color: var(--color-border-strong); } .product-task.is-on { color: var(--color-accent); background-color: var(--color-accent-soft); border-color: var(--color-accent); } .product-task--more { border-style: dashed; color: var(--color-text-faint); } .product-task--more:hover, .product-task--more[aria-expanded="true"] { color: var(--color-text); border-color: var(--color-border-strong); } .catalog-scope--foot { margin-top: var(--space-4); font-size: var(--text-xs); color: var(--color-text-faint); } .product-group-head { margin: var(--space-4) 0 0; font-size: var(--text-xs); color: var(--color-text-muted); } .product-group-label { text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-faint); } .product-group-head + .product-list { margin-top: var(--space-2); } .product-group-none { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-text-faint); } .product-demo, .product-free { flex: none; padding: 1px var(--space-2); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-sm); font-size: var(--text-xs); color: var(--color-text-faint); white-space: nowrap; } .product-access { flex: none; padding: 1px var(--space-2); font-size: var(--text-xs); color: var(--color-accent); background-color: var(--color-accent-soft); border: 1px solid transparent; border-radius: var(--radius-sm); white-space: nowrap; } .product-description { margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); } .dialog-link { display: inline-block; margin-top: var(--space-5); color: var(--color-accent); font-size: var(--text-sm); text-decoration: none; border-bottom: 1px solid currentColor; } .dialog-link:hover { opacity: 0.75; } .dialog-link + .dialog-link { margin-left: var(--space-4); } .state-message { grid-column: 1 / -1; padding: var(--space-6); color: var(--color-text-muted); text-align: center; } .state-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: calc(var(--space-6) * -1); padding: 0 var(--space-6) var(--space-6); } .state-action { font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--color-text); background-color: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); padding: 6px var(--space-3); cursor: pointer; } .state-action:hover { background-color: var(--dir-card-hover-bg); border-color: var(--dir-card-hover-border); } .state-action:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .error-message { grid-column: 1 / -1; padding: var(--space-5); background-color: var(--color-surface); border: 1px solid var(--color-border-strong); border-left: 3px solid var(--color-danger); border-radius: var(--radius-md); } .error-message h3 { font-size: var(--text-lg); font-weight: 600; } .error-message p { margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); } .error-message code { font-family: var(--font-mono); font-size: var(--text-xs); background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 1px 5px; } .site-footer { background: var(--color-bg); padding-block: var(--space-5) var(--space-7); border-top: 1px solid var(--color-border); } .footer-meta, .footer-note { color: var(--color-text-faint); font-size: var(--text-sm); } .footer-note { margin-top: var(--space-1); max-width: 70ch; } .footer-nav { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-bottom: var(--space-3); } .footer-nav a { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); text-decoration: none; } .footer-nav a:hover { color: var(--color-accent); text-decoration: underline; } .footer-nav a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: var(--radius-sm); } @media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; } .company-dialog, .company-dialog::backdrop, .browse .company-dialog[data-mode="inline"] { animation: none; } } @media (max-width: 560px) { :root { --card-min: 100%; --text-2xl: 1.625rem; } .company-dialog { --panel-pad: var(--space-5); padding: var(--panel-pad); border-left: none; } .dialog-stats { gap: var(--space-3) var(--space-4); } .related-row:has(> :nth-child(3)) { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } .toolbar-row--search .toolbar-search { flex-basis: 100%; } .toolbar-count { margin-left: 0; } .pref-panel { position: fixed; top: auto; left: var(--space-3); right: var(--space-3); bottom: var(--space-3); width: auto; max-height: 70vh; } .toolbar-search, .pref-select { font-size: 16px; } } .company-dialog--comparing { width: min(1180px, 100vw); } .company-dialog--comparing .dialog-close-form { display: none; } .compare-layout { display: grid; grid-template-columns: 352px minmax(0, 1fr); gap: var(--space-6); align-items: start; animation: compare-in 160ms ease-out; } @keyframes compare-in { from { opacity: 0; } } .compare-context { position: sticky; top: 0; border-right: 1px solid var(--color-border); padding-right: var(--space-5); } .compare-context > * { opacity: 0.7; } .compare-crumb { margin: 0 0 var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; } .compare-crumb strong { color: var(--color-text); } .compare-crumb-sep { color: var(--color-text-faint); } .compare-depth { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; } .compare-context-name { margin: 0; font-size: var(--text-lg); line-height: 1.2; } .compare-context-desc { margin: var(--space-2) 0 var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.45; } .compare-queue { display: flex; flex-direction: column; gap: var(--space-1); max-height: 60vh; overflow-y: auto; } .compare-queue-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); border: 1px solid transparent; border-radius: var(--radius-sm); background: none; font: inherit; font-size: var(--text-sm); color: var(--color-text); text-align: left; cursor: pointer; } .compare-queue-row:hover:not(:disabled) { background-color: var(--color-accent-soft); } .compare-queue-row--sel { border-color: var(--color-accent); background-color: var(--color-accent-soft); opacity: 1; } .compare-context .compare-queue-row--sel { opacity: 1; } .compare-queue-row--pending { cursor: default; color: var(--color-text-faint); } .compare-queue-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .compare-queue-size { color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .compare-pane { min-width: 0; } .compare-back { display: none; margin-bottom: var(--space-4); padding: var(--space-2) 0; border: none; background: none; font: inherit; font-size: var(--text-sm); color: var(--color-accent); cursor: pointer; } .compare-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); } .compare-title { margin: 0; font-size: var(--text-xl); line-height: 1.2; } .compare-controls { display: flex; gap: var(--space-2); } .compare-control { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background-color: var(--color-surface); font-size: var(--text-base); color: var(--color-text-muted); cursor: pointer; } .compare-control:hover { color: var(--color-text); border-color: var(--color-text-muted); } .compare-meta { margin: var(--space-2) 0 var(--space-5); font-size: var(--text-sm); color: var(--color-text-muted); } .compare-rel { border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-6); } .compare-rel-label { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent); } .compare-rel-reason { margin: 0 0 var(--space-3); font-size: var(--text-base); line-height: 1.5; } .compare-evidence { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--color-border); display: flex; flex-direction: column; gap: var(--space-3); } .compare-ev-claim { margin: 0; font-size: var(--text-sm); line-height: 1.5; } .compare-ev-src { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-faint); text-decoration: none; overflow-wrap: anywhere; } a.compare-ev-src:hover { color: var(--color-accent); text-decoration: underline; } .compare-section-title { margin: var(--space-6) 0 var(--space-3); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); } .compare-task { margin: var(--space-6) 0 0; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-accent-soft); } .compare-task-eyebrow { margin: 0; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent); } .compare-task-title { margin: var(--space-1) 0 var(--space-4); font-size: 1.125rem; line-height: 1.2; } .compare-task-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } @media (max-width: 640px) { .compare-task-cols { grid-template-columns: 1fr; } } .compare-task-col-title { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); } .compare-task-product { margin-bottom: var(--space-2); } .compare-task-name { font-weight: 600; } .compare-task-none { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--color-text-faint); } .compare-diff { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; } .compare-diff-row { display: grid; grid-template-columns: 150px 1fr 1fr; gap: var(--space-3); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); } .compare-diff-row + .compare-diff-row { border-top: 1px solid var(--color-border); } .compare-diff-row--head { background-color: var(--color-bg); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); } .compare-diff-key { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-faint); align-self: center; overflow-wrap: normal; word-break: keep-all; } .compare-diff-row--head .compare-diff-key { color: inherit; } .compare-diff-a { color: var(--color-text-muted); } .compare-diff-b--differs { font-weight: 600; } .compare-match { color: var(--color-accent); font-size: var(--text-xs); font-weight: 600; } .compare-delta { color: var(--cat-hardware-fg); font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums; } .compare-caps { display: flex; flex-wrap: wrap; gap: var(--space-3); } .compare-capbox { flex: 1 1 220px; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); } .compare-capbox--shared { border-color: var(--color-accent); } .compare-capbox--a { border-color: var(--cat-hardware-fg); } .compare-capbox--b { border-color: var(--cat-foundation-fg); } .compare-capbox--unverified { border-style: dashed; border-color: var(--color-border-strong); } .compare-capbox-title { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); } .compare-capbox--shared .compare-capbox-title { color: var(--color-accent); } .compare-capbox--a .compare-capbox-title { color: var(--cat-hardware-fg); } .compare-capbox--b .compare-capbox-title { color: var(--cat-foundation-fg); } .compare-capbox-terms { display: flex; flex-wrap: wrap; gap: var(--space-1); } .compare-cap { padding: 2px var(--space-2); border-radius: var(--radius-sm); background-color: var(--color-bg); border: 1px solid var(--color-border); font-size: var(--text-xs); } .compare-capbox-note { margin: var(--space-2) 0 0; font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--color-text-muted); } .compare-capbox-note a { color: inherit; } .compare-caps-identical { margin: 0; flex: 1 1 100%; font-size: var(--text-sm); color: var(--color-text-muted); font-style: italic; } .compare-caps-none { margin: 0; flex: 1 1 100%; font-size: var(--text-sm); color: var(--color-text-muted); font-style: italic; } .compare-products-provenance { margin: 0 0 var(--space-4); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); display: inline-block; } .compare-products-provenance--written { color: var(--color-accent); border: 1px solid var(--color-accent); } .compare-products-provenance--algorithmic { color: var(--color-text-muted); border: 1px dashed var(--color-border-strong); } .compare-products { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); } .compare-product-col-title { margin: 0 0 var(--space-3); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); } .compare-product-layer { margin: var(--space-4) 0 0; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-faint); } .compare-product-col-title + .compare-product-layer { margin-top: 0; } .compare-product { padding: var(--space-3) 0; border-top: 1px solid var(--color-border); } .compare-product-name { font-weight: 600; font-size: var(--text-sm); } .compare-product-type { margin-left: var(--space-2); font-size: var(--text-xs); color: var(--color-text-faint); text-transform: uppercase; letter-spacing: 0.05em; } .compare-product-desc { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.45; } .compare-product-none { margin: 0; font-size: var(--text-sm); color: var(--color-text-faint); } .compare-products-unpaired { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px dashed var(--color-border-strong); } .compare-products-unpaired-title { margin: 0 0 var(--space-3); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-faint); } .compare-products-unpaired-side + .compare-products-unpaired-side { margin-top: var(--space-4); } .compare-products-unpaired-note { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); font-style: italic; } .compare-footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-border); } .compare-promote { padding: var(--space-2) var(--space-4); border: 1px solid var(--color-accent); border-radius: var(--radius-sm); background-color: var(--color-accent-soft); color: var(--color-accent); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; } .compare-promote:hover { background-color: var(--color-accent); color: var(--chip-active-text); } .compare-hash { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-faint); overflow-wrap: anywhere; } .compare-toast { font-size: var(--text-xs); color: var(--color-accent); font-weight: 600; } .rail-card--pending { cursor: default; background-color: transparent; border-style: dashed; border-color: var(--color-border-strong); } .rail-card--pending .rail-name, .rail-card--pending .rail-figure, .rail-card--pending .rail-reason { color: var(--color-text-faint); } .rail-card--pending .logo { opacity: 0.55; } .rail-card--pending .rail-badge { opacity: 0.6; } .rail-flag { align-self: flex-start; display: inline-flex; align-items: center; font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-faint); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); padding: 1px 6px; } .rail-pending { font-size: var(--text-xs); color: var(--color-text-faint); } @media (max-width: 1100px) { .compare-layout { grid-template-columns: minmax(0, 1fr); } .compare-context { display: none; } .compare-back { display: inline-flex; } } @media (max-width: 720px) { .compare-diff-row { grid-template-columns: 1fr 1fr; } .compare-diff-key { grid-column: 1 / -1; align-self: auto; } .compare-products { grid-template-columns: 1fr; } } .compare-rel-caveat { margin: calc(var(--space-2) * -1) 0 var(--space-3); font-size: var(--text-xs); font-style: italic; color: var(--color-text-faint); line-height: 1.45; } .hero-glass-anchor { position: sticky; top: 0; height: 0; margin-top: calc(-1 * (var(--nav-inset) + var(--nav-height))); z-index: 60; } .hero-glass-anchor::after { content: ""; position: absolute; top: var(--nav-inset); left: var(--nav-inset); right: var(--nav-inset); height: var(--nav-height); pointer-events: none; border-radius: 10px; background: rgba(171, 171, 171, 0.14); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity 220ms ease, height 220ms ease; } .site-nav.is-scrolled ~ .hero-glass-anchor::after { height: var(--nav-height-scrolled); } .site-nav:not(.over-band) ~ .hero-glass-anchor::after { opacity: 0; } .site-nav.over-directory ~ .hero-glass-anchor::after { opacity: 0; visibility: hidden; } @supports not (backdrop-filter: blur(2px)) { .hero-glass-anchor::after { display: none; } } .hero__glow-anchor, .deck__glow-anchor { position: sticky; top: 0; height: 0; margin-top: calc(-1 * (var(--nav-inset) + var(--nav-height))); z-index: 70; } .hero__glow-clip, .deck__glow-clip { position: absolute; top: var(--nav-inset); left: var(--nav-inset); right: var(--nav-inset); height: var(--nav-height); overflow: hidden; pointer-events: none; border-radius: 10px; transition: opacity 220ms ease, height 220ms ease, visibility 0s linear 220ms; } .site-nav.is-scrolled ~ .hero__glow-anchor .hero__glow-clip, .site-nav.is-scrolled ~ .deck__glow-anchor .deck__glow-clip { height: var(--nav-height-scrolled); } .site-nav:not(.hero-in-bar) ~ .hero__glow-anchor .hero__glow-clip { opacity: 0; visibility: hidden; } .site-nav:not(.deck-in-bar) ~ .deck__glow-anchor .deck__glow-clip { opacity: 0; visibility: hidden; } .site-nav.over-directory ~ .hero__glow-anchor .hero__glow-clip, .site-nav.over-directory ~ .deck__glow-anchor .deck__glow-clip { opacity: 0; visibility: hidden; } .hero__glow-stage, .deck__glow-stage { position: absolute; top: 0; left: 0; margin: 0; will-change: transform; --glow: var(--color-text); --glow-rgb: 242, 240, 235; text-shadow: 0 0 4px rgba(var(--glow-rgb), 0.85), 0 0 14px rgba(var(--glow-rgb), 0.6), 0 0 38px rgba(var(--glow-rgb), 0.45), 0 0 85px rgba(var(--glow-rgb), 0.3); text-shadow: 0 0 4px color-mix(in srgb, var(--glow) 85%, transparent), 0 0 14px color-mix(in srgb, var(--glow) 60%, transparent), 0 0 38px color-mix(in srgb, var(--glow) 45%, transparent), 0 0 85px color-mix(in srgb, var(--glow) 30%, transparent); opacity: 0.4; } .deck__glow-stage { background: none; border: 0; min-height: 0; text-shadow: 0 0 4px color-mix(in srgb, var(--glow) 85%, transparent), 0 0 14px color-mix(in srgb, var(--glow) 60%, transparent), 0 0 38px color-mix(in srgb, var(--glow) 45%, transparent); } .company-dialog .detail-tab { display: inline-flex; align-items: center; gap: var(--space-1); } .company-dialog .detail-tab__label { white-space: nowrap; } .company-dialog .dialog-section-title { display: flex; align-items: baseline; gap: var(--space-2); margin: var(--space-5) 0 var(--space-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent); } .company-dialog .detail-panel > .dialog-section-title:first-child { margin-top: 0; } .company-dialog .preview { display: block; } .company-dialog .preview-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); } .company-dialog .preview-head .dialog-section-title { margin-bottom: var(--space-2); } .company-dialog .preview-all, .company-dialog .detail-shortcut__link { padding: 0; border: 0; background: none; font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--color-accent); cursor: pointer; white-space: nowrap; } .company-dialog .preview-all:hover, .company-dialog .detail-shortcut__link:hover { text-decoration: underline; } .company-dialog .preview-all:focus-visible, .company-dialog .detail-shortcut__link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); } .company-dialog .preview-filtered { margin: 0 0 var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); } .company-dialog .preview-list { margin: 0; padding: 0; list-style: none; } .company-dialog .preview-item + .preview-item { border-top: 1px solid var(--color-rule); } .company-dialog .preview-row { display: flex; align-items: baseline; gap: var(--space-3); width: 100%; padding: var(--space-3) 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: inherit; } .company-dialog .preview-row:hover .preview-name { color: var(--color-accent); } .company-dialog .preview-row:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; border-radius: var(--radius-sm); } .company-dialog .preview-name { flex: none; max-width: 45%; font-weight: 650; font-size: var(--text-base); } .company-dialog .preview-blurb { flex: 1 1 auto; min-width: 0; font-size: var(--text-sm); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .company-dialog .dialog-stats--glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); } @media (max-width: 420px) { .company-dialog .dialog-stats--glance { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container detail (max-width: 470px) { .company-dialog .detail-head { padding-inline: var(--space-4); } .company-dialog .detail-body { padding-inline: var(--space-4); } .company-dialog .detail-tab { padding-inline: 6px; } } @container detail (max-width: 440px) { .company-dialog .preview-row { display: block; } .company-dialog .preview-name { display: block; max-width: none; margin-bottom: 2px; } .company-dialog .preview-blurb { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } } @container detail (max-width: 460px) { .company-dialog .dialog-stats--glance { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .company-dialog .detail-shortcut { margin: var(--space-2) 0 0; } .company-dialog .detail-deep, .company-dialog .detail-shortcut-card { display: block; width: 100%; margin-top: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-bg-alt); } .company-dialog .detail-deep__summary, .company-dialog .detail-shortcut-card { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); font: inherit; text-align: left; cursor: pointer; color: inherit; list-style: none; } .company-dialog .detail-deep__summary::-webkit-details-marker { display: none; } .company-dialog .detail-deep__summary::after { content: "\2228"; flex: none; font-size: var(--text-sm); color: var(--color-text-muted); } .company-dialog .detail-deep[open] > .detail-deep__summary::after { content: "\2227"; } .company-dialog .detail-deep__summary:focus-visible, .company-dialog .detail-shortcut-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; border-radius: var(--radius-md); } .company-dialog .detail-deep__title, .company-dialog .detail-shortcut-card__title { display: block; font-weight: 650; font-size: var(--text-base); } .company-dialog .detail-deep__hint, .company-dialog .detail-shortcut-card__hint { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--color-text-muted); } .company-dialog .detail-deep__body { padding: 0 var(--space-4) var(--space-4); border-top: 1px solid var(--color-rule); padding-top: var(--space-4); } .company-dialog .detail-deep__heading { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); } .company-dialog .detail-deep__empty { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); } .company-dialog .detail-shortcut-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-bg-alt); } .company-dialog .detail-shortcut-card:hover { border-color: var(--color-border-strong); } .company-dialog .detail-shortcut-card__chevron { flex: none; color: var(--color-accent); font-size: var(--text-lg); } .company-dialog .product-lead { margin-bottom: var(--space-3); } .company-dialog .product-lead__count { margin: 0; font-size: var(--text-lg); font-weight: 650; } .company-dialog .product-lead__hint { margin: 2px 0 0; font-size: var(--text-sm); color: var(--color-text-muted); } .company-dialog .product-controls, .company-dialog .related-controls { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); } .company-dialog .related-controls[hidden] { display: none; } .company-dialog .product-search, .company-dialog .related-search { width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--text-sm); } .company-dialog .product-search::placeholder, .company-dialog .related-search::placeholder { color: var(--color-text-faint); } .company-dialog .product-search:focus-visible, .company-dialog .related-search:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -1px; } .company-dialog .product-selects { display: flex; flex-wrap: wrap; gap: var(--space-2); } .company-dialog .product-select { flex: 1 1 140px; min-width: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--text-sm); cursor: pointer; } .company-dialog .product-select:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -1px; } .company-dialog .product-list { margin: 0; padding: 0; list-style: none; } .company-dialog .product-item { padding: var(--space-3) 0; } .company-dialog .product-head { display: flex; align-items: flex-start; flex-wrap: nowrap; gap: var(--space-3); } .company-dialog .product-headtext { flex: 1 1 auto; min-width: 0; } .company-dialog .product-titlerow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); min-width: 0; } .company-dialog .product-titlerow .product-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .company-dialog .product-name { font-weight: 650; font-size: var(--text-base); color: var(--color-text); text-decoration: none; } .company-dialog .product-name:hover, .company-dialog .product-name:focus-visible { color: var(--color-accent); text-decoration: underline; } .company-dialog .product-titlerow .product-type { flex: none; font-size: var(--text-xs); color: var(--color-text-muted); background: none; border: 0; padding: 0; } .company-dialog .product-blurb { margin: 2px 0 0; font-size: var(--text-sm); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .company-dialog .is-open > .product-head .product-blurb { display: none; } .company-dialog .product-marks { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); } .company-dialog .product-toggle { flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid transparent; border-radius: var(--radius-sm); background: none; color: var(--color-text-muted); font: inherit; cursor: pointer; } .company-dialog .product-toggle:hover { border-color: var(--color-border); color: var(--color-text); } .company-dialog .product-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; } .company-dialog .product-detail { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background-color: var(--color-bg-alt); } .company-dialog .product-detail > .product-description { margin: 0 0 var(--space-3); font-size: var(--text-sm); } .company-dialog .product-fields { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-3); font-size: var(--text-sm); } .company-dialog .product-fields dt { color: var(--color-text-muted); font-size: var(--text-xs); } .company-dialog .product-fields dd { margin: 0; } @media (max-width: 420px) { .company-dialog .product-fields { grid-template-columns: minmax(0, 1fr); } .company-dialog .product-fields dd { margin-bottom: var(--space-2); } } .company-dialog .product-sources { margin-bottom: var(--space-3); } .company-dialog .product-sources__summary, .company-dialog .relrow-basis__summary { font-size: var(--text-xs); font-weight: 600; color: var(--color-accent); cursor: pointer; list-style: none; } .company-dialog .product-sources__summary::-webkit-details-marker, .company-dialog .relrow-basis__summary::-webkit-details-marker { display: none; } .company-dialog .product-sources__summary::after, .company-dialog .relrow-basis__summary::after { content: " \2228"; font-size: 0.9em; } .company-dialog .product-sources[open] > .product-sources__summary::after, .company-dialog .relrow-basis[open] > .relrow-basis__summary::after { content: " \2227"; } .company-dialog .product-sources__body, .company-dialog .relrow-basis__body { padding-top: var(--space-2); } .company-dialog .product-links { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); } .company-dialog .product-link { font-size: var(--text-sm); font-weight: 600; color: var(--color-accent); } .company-dialog .product-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .company-dialog .product-actions .product-discover { margin-left: 0; } .company-dialog .product-actions .product-discover + .product-compare { margin-left: 0; } .company-dialog .product-group-head { display: flex; align-items: baseline; gap: var(--space-2); margin: var(--space-4) 0 var(--space-2); font-size: var(--text-sm); } .company-dialog .product-group-n { font-size: var(--text-xs); color: var(--color-text-muted); } .company-dialog .product-group-none, .company-dialog .related-note--none { margin: var(--space-4) 0; font-size: var(--text-sm); color: var(--color-text-muted); } .company-dialog .product-reset, .company-dialog .related-reset { padding: 0; border: 0; background: none; font: inherit; font-size: inherit; font-weight: 600; color: var(--color-accent); cursor: pointer; text-decoration: underline; } .company-dialog .related-lead { margin: 0 0 var(--space-2); font-size: var(--text-lg); } .company-dialog .related-note { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); } .company-dialog .related-note--failed { color: var(--color-danger); } .company-dialog .related-method { margin: 0 0 var(--space-4); } .company-dialog .related-method a, .company-dialog .source-method a { font-size: var(--text-sm); font-weight: 600; color: var(--color-accent); } .company-dialog .related-help { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); } .related-help__summary { cursor: pointer; color: var(--color-text-muted); border-radius: var(--radius-sm); padding: 2px 0; } .related-help__summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .related-help__list { margin: var(--space-2) 0 0; display: block; } .related-help__term { margin-top: var(--space-2); font-weight: 600; color: var(--color-text); } .related-help__term:first-child { margin-top: 0; } .related-help__def { margin: 1px 0 0; margin-inline-start: 0; text-wrap: pretty; } .related-help__note { margin: var(--space-3) 0 0; color: var(--color-text-faint); text-wrap: pretty; } .related-why { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--color-text-muted); text-wrap: pretty; } .related-why[hidden] { display: none; } .related-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); } .company-dialog .related-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 3px var(--space-3); border: 1px solid var(--color-border); border-radius: 999px; background-color: var(--color-surface); color: var(--color-text-muted); font: inherit; font-size: var(--text-xs); cursor: pointer; } .company-dialog .related-chip:hover { border-color: var(--color-border-strong); color: var(--color-text); } .company-dialog .related-chip[aria-pressed="true"] { border-color: var(--color-accent); background-color: var(--color-accent-soft); color: var(--color-accent); font-weight: 600; } .company-dialog .related-chip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .company-dialog .related-chip-count { opacity: 0.75; } .company-dialog .related-group { margin-bottom: var(--space-5); } .company-dialog .related-count { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); letter-spacing: 0; } .company-dialog .related-list { margin: 0; padding: 0; list-style: none; } .company-dialog .relrow { padding: var(--space-3) 0; } .company-dialog .relrow + .relrow { border-top: 1px solid var(--color-rule); } .company-dialog .relrow-head { display: flex; align-items: flex-start; gap: var(--space-3); } .company-dialog .relrow-text { flex: 1 1 auto; min-width: 0; } .company-dialog .relrow-name { margin: 0; font-weight: 650; font-size: var(--text-base); } .company-dialog .relrow-reason { margin: 2px 0 0; font-size: var(--text-sm); color: var(--color-text-muted); } .company-dialog .relrow-actions { flex: none; display: flex; align-items: center; gap: var(--space-2); } .company-dialog .relrow-compare { padding: 0; border: 0; background: none; font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--color-accent); cursor: pointer; white-space: nowrap; } .company-dialog .relrow-compare:hover { text-decoration: underline; } .company-dialog .relrow-compare:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); } .company-dialog .relrow-flag { font-size: var(--text-xs); color: var(--color-text-faint); white-space: nowrap; } .company-dialog .relrow-basis { margin-top: var(--space-2); } .company-dialog .relrow-pair { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-2); font-size: var(--text-sm); } .company-dialog .relrow-pair dt { grid-row: span 2; font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); } .company-dialog .relrow-pair dd { margin: 0; } .company-dialog .related-pair__link { color: var(--color-text); } .company-dialog .relrow-badges { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-2); } .company-dialog .relrow-badge { padding: 2px var(--space-2); border-radius: var(--radius-sm); background-color: var(--color-bg-alt); font-size: var(--text-xs); color: var(--color-text-muted); } .company-dialog .related-badge--curated { background-color: var(--color-accent-soft); color: var(--color-accent); } .company-dialog .relrow-evidence { margin: 0 0 var(--space-2); padding: 0; list-style: none; font-size: var(--text-sm); } .company-dialog .related-evidence__item + .related-evidence__item { margin-top: var(--space-2); } .company-dialog .related-evidence__claim { display: block; } .company-dialog .related-evidence__src { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--color-text-muted); } .company-dialog a.related-evidence__src:hover { color: var(--color-accent); } .company-dialog .relrow-pending, .company-dialog .relrow-figure { margin: 0 0 var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); } .company-dialog .related-toggle { margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-surface); font: inherit; font-size: var(--text-sm); color: var(--color-text-muted); cursor: pointer; } .company-dialog .related-toggle:hover { border-color: var(--color-border-strong); color: var(--color-text); } .company-dialog .related-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .company-dialog .source-lead { margin-bottom: var(--space-3); } .company-dialog .source-lead__count { margin: 0; font-size: var(--text-lg); font-weight: 650; } .company-dialog .source-lead__hint { margin: 2px 0 0; font-size: var(--text-sm); color: var(--color-text-muted); } .company-dialog .source-entries { display: flex; flex-direction: column; gap: var(--space-2); } .company-dialog .source-entry { border: 1px solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-surface); overflow: hidden; } .company-dialog .source-entry.is-open { border-left: 3px solid var(--color-accent); } .company-dialog .source-entry__head { display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--space-1) var(--space-3); width: 100%; padding: var(--space-3); border: 0; background: none; font: inherit; text-align: left; color: inherit; cursor: pointer; } .company-dialog .source-entry__head--plain { cursor: default; } .company-dialog .source-entry__head:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; } .company-dialog .source-entry__top { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); } .company-dialog .source-entry__field { font-weight: 650; font-size: var(--text-base); min-width: 0; } .company-dialog .source-entry__value { flex: none; font-weight: 650; font-size: var(--text-base); font-variant-numeric: tabular-nums; } .company-dialog .source-entry__value--none { color: var(--color-text-faint); } .company-dialog .source-entry__meta { order: 2; flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin-top: 2px; } .company-dialog .source-entry__top { order: 0; } .company-dialog .source-entry__glyph { order: 1; flex: none; font-size: var(--text-sm); color: var(--color-text-muted); } .company-dialog .source-entry__body { padding: 0 var(--space-3) var(--space-3); border-top: 1px solid var(--color-rule); padding-top: var(--space-3); } .company-dialog .source-entry__link { display: inline-block; margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--color-accent); } .company-dialog .source-entry__body .source-note { margin: 0 0 var(--space-2); font-size: var(--text-sm); } .company-dialog .source-method { margin: var(--space-4) 0 var(--space-2); } .company-dialog .source-foot { margin: 0; font-size: var(--text-xs); color: var(--color-text-faint); } @media (max-height: 760px), (max-width: 480px) { .company-dialog[data-mode="modal"] .detail-head .dialog-header { gap: var(--space-2); } .company-dialog[data-mode="modal"] .detail-head .logo--lg { width: 36px; height: 36px; } .company-dialog[data-mode="modal"] .detail-head .dialog-title { font-size: var(--text-lg); } .company-dialog[data-mode="modal"] .detail-head .detail-nav { margin-bottom: var(--space-2); } } @media (max-width: 400px) { .company-dialog .detail-tab__n { display: none; } .company-dialog .detail-tab { padding-left: var(--space-2); padding-right: var(--space-2); } } .company-dialog .dialog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); } .company-dialog .dialog-meta__sep { color: var(--color-text-faint); } .company-dialog .dialog-meta__item--stage { font-weight: 650; color: var(--color-text); } .company-dialog[data-mode="modal"].company-dialog--expanded { width: min(980px, calc(100vw - 2 * var(--space-4))); max-width: calc(100vw - 2 * var(--space-4)); } .company-dialog--expanded .detail-body > .detail-panel { max-width: 68ch; margin-inline: auto; } .pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-right: var(--grid-gutter, 0px); } .pagination[hidden] { display: none; } .pagination--top { justify-content: space-between; margin-top: var(--space-3); margin-bottom: var(--space-2); } .pagination__range--top { font-variant-numeric: tabular-nums; } .pagination--foot { justify-content: space-between; margin-top: var(--space-3); padding: 0; border: 0; border-radius: var(--radius-md); background-color: transparent; margin-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); } :root.has-tray .pagination--foot { margin-bottom: calc(var(--space-3) + 72px + env(safe-area-inset-bottom, 0px)); } .pagination__range { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); } .pagination__compact, .pagination__pages { display: flex; align-items: center; gap: var(--space-2); } .pagination__numbers { display: flex; align-items: center; gap: var(--space-1); } .pagination__of { font-size: var(--text-sm); font-weight: 600; white-space: nowrap; padding: 0 var(--space-2); } .pagination__of--foot { display: none; } .pagination__chevron { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .pagination__step, .pagination__page { min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--space-3); border: 1px solid transparent; border-radius: var(--radius-sm); background-color: transparent; color: var(--color-text); font: inherit; font-size: var(--text-sm); cursor: pointer; } .pagination__page { padding: 0 var(--space-2); font-variant-numeric: tabular-nums; } .pagination__step--icon { min-width: 32px; width: 32px; height: 32px; padding: 0; border-color: transparent; background-color: transparent; color: var(--color-text-muted); } .pagination__step--icon:hover:not(:disabled) { border-color: var(--color-border); background-color: var(--color-bg-alt); color: var(--color-text); } .pagination__step--icon .pagination__chevron { width: 16px; height: 16px; } .pagination__step:not(.pagination__step--icon) { gap: var(--space-1); } .pagination__step:hover:not(:disabled), .pagination__page:hover:not(.is-current) { border-color: var(--color-border-strong); background-color: var(--color-bg-alt); } .pagination__step:disabled { opacity: 0.45; cursor: default; } .pagination__page.is-current { border-color: var(--color-accent); background-color: var(--color-accent); color: var(--color-on-accent); font-weight: 650; cursor: default; } .pagination__step:focus-visible, .pagination__page:focus-visible, .pagination__per:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .pagination__gap { padding: 0 var(--space-1); color: var(--color-text-faint); user-select: none; } @media (min-width: 901px), (min-width: 481px) and (not (pointer: coarse)) { .pagination--foot { padding: 0; } .pagination--top .pagination__step, .pagination--top .pagination__page, .pagination--foot .pagination__step, .pagination--foot .pagination__page { min-width: 24px; height: 24px; } .pagination--foot .pagination__per { height: 24px; } } .pagination__per { height: 36px; padding: 0 var(--space-3); border: 1px solid transparent; border-radius: var(--radius-sm); background-color: transparent; color: var(--color-text); font: inherit; font-size: var(--text-sm); cursor: pointer; } @media (max-width: 900px) and (pointer: coarse), (max-width: 480px) { .pagination--foot { flex-direction: column; align-items: stretch; gap: var(--space-2); } .pagination__numbers, .pagination__size { display: none; } .pagination__pages { justify-content: space-between; } .pagination__of--foot { display: inline; } } @container grid-col (max-width: 760px) { .pagination--foot { flex-wrap: nowrap; } .pagination--foot .pagination__numbers { display: none; } .pagination--foot .pagination__of--foot { display: inline; } .pagination--foot .pagination__range { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } @container grid-col (max-width: 460px) { .pagination--foot { flex-direction: column; align-items: stretch; gap: var(--space-2); } .pagination__numbers, .pagination__size { display: none; } .pagination__pages { justify-content: space-between; } .pagination__of--foot { display: inline; } .pagination--top { flex-direction: column; align-items: flex-start; gap: var(--space-2); } } .rail-sub { margin-bottom: var(--space-3); } .rail-sub:last-child { margin-bottom: 0; } .rail-sub[hidden] { display: none; } .rail-sublabel { display: block; margin-bottom: var(--space-1); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); } .rail-opt.is-unfit:not(.is-active) { color: var(--color-text-faint); } .rail-opt[aria-disabled="true"] { cursor: not-allowed; border-style: dashed; } .rail-opt[aria-disabled="true"]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .rail-seg .rail-opt { position: relative; } @media (min-width: 901px), (min-width: 481px) and (not (pointer: coarse)) { .browse .company-dialog[data-mode="inline"] { align-self: stretch; height: auto; max-height: none; position: relative; top: auto; margin-bottom: 0; } .browse .company-dialog[data-mode="inline"] .detail-body { padding-bottom: var(--space-6); } :root.has-tray .browse .company-dialog[data-mode="inline"] { height: auto; max-height: none; } :root.has-tray .browse .company-dialog[data-mode="inline"] .detail-body { padding-bottom: calc(var(--space-6) + 64px); } } .browse-main__lead { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } :root[data-rail-mode="drawer"] .browse-main__head, :root[data-rail-presentation="drawer"].rail-collapsed .browse-main__head { flex-wrap: nowrap; height: var(--browse-head-h); min-height: 0; row-gap: 0; } :root[data-rail-mode="drawer"] .browse-main__controls, :root[data-rail-presentation="drawer"].rail-collapsed .browse-main__controls { flex: 1 1 auto; min-width: 0; } @container grid-col (max-width: 480px) { .browse-main__head { flex-wrap: nowrap; height: var(--browse-head-h); min-height: 0; row-gap: 0; } :root[data-rail-mode="drawer"] .browse-main__head .browse-head__toggle-text, :root.rail-collapsed .browse-main__head .browse-head__toggle-text { display: none; } :root[data-rail-mode="drawer"] .browse-main__controls > .browse-main__search, :root.rail-collapsed .browse-main__controls > .browse-main__search, .browse-main__head .browse-main__search { min-width: 0; flex: 1 1 4rem; } .browse-main__head .browse-main__search input, .browse-main__head .browse-main__search .smart-search__field { min-width: 0; } } @container grid-col (max-width: 460px) { .pagination--foot { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: var(--space-2); } .pagination--foot .pagination__step-label { display: none; } .pagination--foot .pagination__range { flex: 0 1 auto; } .pagination--foot .pagination__pages { flex: 0 0 auto; margin-left: auto; } } @container grid-col (max-width: 340px) { .pagination--foot .pagination__of--foot { display: none; } } .company-dialog[data-mode="sheet"] { position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: none; height: var(--company-sheet-h); max-height: 85dvh; --panel-pad: var(--space-5); padding: var(--panel-pad); padding-top: calc(var(--panel-pad) + 10px); padding-bottom: max(var(--panel-pad), env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--color-border); border-radius: var(--radius-md) var(--radius-md) 0 0; box-shadow: 0 -8px 28px rgb(0 0 0 / 28%); z-index: 80; flex-direction: column; overflow: hidden; overscroll-behavior: contain; background-color: var(--panel-bg, var(--color-surface)); color: var(--color-text); } .company-dialog[data-mode="sheet"][open] { display: flex; } .company-dialog[data-mode="sheet"]:not([open]) { display: none; } .company-dialog[data-mode="sheet"][open]::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 36px; height: 4px; border-radius: 999px; background-color: var(--color-border-strong); z-index: 1; pointer-events: none; } .company-dialog[data-mode="sheet"] > .dialog-content { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: visible; } .company-dialog[data-mode="sheet"] .detail-head { position: static; flex: none; } .company-dialog[data-mode="sheet"] .detail-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; margin: 0 calc(-1 * var(--panel-pad)) calc(-1 * var(--panel-pad)); padding: var(--space-4) var(--panel-pad) var(--panel-pad); -webkit-overflow-scrolling: touch; } .company-dialog[data-mode="sheet"] .detail-panel { overflow: visible; min-height: 0; } @media (max-height: 700px) { .company-dialog[data-mode="sheet"] .detail-head { gap: var(--space-2); } .company-dialog[data-mode="sheet"] .detail-nav { margin-bottom: 0; } @media (min-width: 420px) { .company-dialog[data-mode="sheet"] .detail-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: var(--space-3); } .company-dialog[data-mode="sheet"] .dialog-header { grid-column: 1; grid-row: 1; } .company-dialog[data-mode="sheet"] .detail-nav { grid-column: 2; grid-row: 1; justify-self: end; } .company-dialog[data-mode="sheet"] .dialog-types { grid-column: 1 / -1; margin: 0; } .company-dialog[data-mode="sheet"] .detail-links { grid-column: 1 / -1; margin: 0; } .company-dialog[data-mode="sheet"] .detail-tabs { grid-column: 1 / -1; } } @media (max-height: 480px) { .company-dialog[data-mode="sheet"] .dialog-header-text { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-3); row-gap: 0; } .company-dialog[data-mode="sheet"] .dialog-meta { margin-top: 0; } } .company-dialog[data-mode="sheet"] .detail-nav__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .company-dialog[data-mode="sheet"] .dialog-header { gap: var(--space-3); } .company-dialog[data-mode="sheet"] .dialog-header .logo { width: 36px; height: 36px; } .company-dialog[data-mode="sheet"] .detail-tabs { margin-top: var(--space-2); margin-bottom: 0; } .company-dialog[data-mode="sheet"] .detail-body { padding-top: var(--space-3); } } body:has(.company-dialog[data-mode="sheet"][open]) .browse { padding-bottom: calc(var(--company-sheet-h) + var(--space-2)); } :root { --company-sheet-h: clamp(200px, 55dvh, calc(100dvh - 300px)); } @media (min-width: 420px) { :root { --company-sheet-h: clamp(200px, 55dvh, calc(100dvh - 340px)); } } @media (max-height: 480px) { :root { --company-sheet-h: clamp(200px, 70dvh, calc(100dvh - 120px)); } } :root[data-rail-presentation="compact"] .browse .browse-head { padding: 0; justify-content: center; box-shadow: inset 1px 0 0 var(--dir-sheet-border), inset 0 1px 0 var(--dir-sheet-border); } :root[data-rail-presentation="compact"] .browse .browse-head > .browse-head__toggle { margin-inline: auto; } .company-dialog[data-mode="sheet"]::backdrop { background: transparent; } .browse-main__search { margin-left: var(--space-5); flex: 0 1 480px; min-width: 260px; } .browse-main__tools { margin-left: auto; } @media (min-width: 901px), (min-width: 481px) and (not (pointer: coarse)) { .browse-main__search .rail-search { min-height: 40px; height: 40px; padding-left: 38px; padding-right: 46px; font-size: var(--text-sm); } .browse-main__search .search-control__ico { left: 12px; width: 17px; height: 17px; } } @media (max-width: 480px), (max-width: 900px) and (pointer: coarse) { @container grid-col (max-width: 560px) { .view-options { position: relative; display: block; flex: none; } .view-options__btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background-color: transparent; color: var(--color-text-muted); } .view-options__btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .view-options[data-open] .view-options__btn { color: var(--color-text); border-color: var(--color-text-muted); } .view-options__panel { display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background-color: var(--color-surface); box-shadow: var(--dir-sheet-shadow); } .view-options[data-open] .view-options__panel { display: flex; } .browse-main__head > .browse-head__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .browse-main__head > .browse-main__mark { display: block; flex: none; } .browse-main__head .browse-main__search { margin-left: 0; flex: 1 1 4rem; min-width: 0; } .sort-control { width: 44px; padding: 0; justify-content: center; gap: 0; } .sort-control__text, .sort-control__chev { display: none; } .browse-main__tools { flex: none; min-width: 0; } .browse-main__head { gap: var(--space-1); } .browse-main__head > .browse-head__home, .browse.is-stuck .browse-main__head > .browse-head__home { display: none; } .browse-main__search .smart-search__panel { left: 50%; right: auto; transform: translateX(-50%); width: min(20rem, calc(100vw - 2 * var(--space-4))); max-width: calc(100vw - 2 * var(--space-4)); } } } :root[data-rail-mode="drawer"] .browse-main__tools, :root.rail-collapsed .browse-main__tools { margin-left: 0; } .rail-brief { margin: var(--space-1) 0 0; font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-muted); } .rail-brief__lead { color: var(--color-text-faint); } .rail-brief__dot { color: var(--color-text-faint); } .rail-brief__chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background-color: var(--color-bg-alt); color: var(--color-text); white-space: nowrap; } .rail-brief__chip--must { border-color: var(--color-border-strong); } .rail-brief__chip--prefer { border-style: dashed; color: var(--color-text-muted); } .rail-brief__chip--exclude { border-color: var(--color-border-strong); text-decoration: line-through; text-decoration-color: var(--color-text-faint); } .rail-brief__chip--budget { font-variant-numeric: tabular-nums; } .rail-brief__drop, .rail-brief__x { padding: 0 2px; border: 0; background: none; color: var(--color-text-faint); font: inherit; line-height: 1; cursor: pointer; } .rail-brief__x { margin-left: var(--space-2); text-decoration: underline; } .rail-brief__drop:hover, .rail-brief__x:hover { color: var(--color-text); } .rail-brief__drop:focus-visible, .rail-brief__x:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 2px; } .rail-brief__note { color: var(--color-text-faint); } .rail-brief__question { color: var(--color-text); } .company-card[data-evidence="unconfirmed"] { border-style: dashed; } .card-answer { margin: var(--space-2) 0 0; padding-top: var(--space-2); border-top: 1px solid var(--color-rule); display: flex; flex-direction: column; gap: 2px; } .card-answer__line { margin: 0; color: var(--color-text-muted); font-size: var(--text-xs); line-height: 1.45; text-wrap: pretty; } .card-answer__label { color: var(--color-text); font-weight: 600; } .card-answer__line--cost { color: var(--color-text); } .card-unconfirmed { margin: 0 18px; padding: var(--space-2) 0 14px; border-top: 1px dashed var(--color-border-strong); color: var(--color-text-muted); font-size: var(--text-xs); line-height: 1.45; text-wrap: pretty; } .card-security--met { border-top-style: solid; color: var(--color-text); } .company-dialog { --pn-ink: #16201b; --pn-ink-2: #4a544f; --pn-ink-3: #6f7872; --pn-line: #e6e9e3; --pn-line-2: #d8ddd5; --pn-accent: #1f6f5c; --pn-accent-2: #2e8b72; --pn-accent-ring: rgb(46 139 114 / 18%); --pn-wash: #e7f1ec; --pn-wash-line: #cfe3da; --pn-amber: #a46a12; --pn-amber-ring: rgb(176 137 47 / 20%); --pn-gold: #8e6c1d; --pn-gold-bg: #f7f0de; --pn-gold-line: transparent; --pn-card: #ffffff; --pn-card-top: #ffffff; --pn-card-bottom: #fbfcfa; --pn-aura: radial-gradient(420px 220px at 18% -10%, rgb(46 139 114 / 18%), transparent 70%), radial-gradient(360px 200px at 100% 0%, rgb(125 159 224 / 15%), transparent 70%); --pn-font: var(--font-brand); --pn-label-font: var(--font-brand); --pn-src-font: var(--font-brand); --pn-nav-label-transform: uppercase; --pn-nav-label-font: var(--font-brand); --pn-nav-btn-bg: rgb(255 255 255 / 70%); --pn-nav-btn-line: var(--pn-line-2); --pn-nav-btn-ink: var(--pn-ink-2); --pn-tile-bg: #ffffff; --pn-tile-line: var(--pn-line); --pn-tile-shadow: 0 1px 0 rgb(0 0 0 / 4%), 0 8px 24px -10px rgb(20 40 30 / 30%); --pn-ticker-ink: var(--pn-accent); --pn-ticker-bg: var(--pn-wash); --pn-ticker-line: transparent; --pn-ticker-font: var(--font-brand); --pn-num-ink: var(--pn-ink); --pn-src-dot-primary: var(--pn-accent-2); --pn-src-dot-glow: none; --pn-src-dot-radius: 2px; --pn-seg-bg: #eef1ec; --pn-seg-pad: 4px; --pn-seg-radius: 12px; --pn-seg-gap: 2px; --pn-seg-rule: 0 solid transparent; --pn-tab-flex: 1 1 0; --pn-tab-pad: 7px 6px; --pn-tab-radius: 9px; --pn-tab-on-bg: #ffffff; --pn-tab-on-ink: var(--pn-ink); --pn-tab-on-shadow: 0 1px 3px rgb(20 40 30 / 12%); --pn-tab-n-font: var(--font-brand); --pn-stick-bg: color-mix(in srgb, var(--panel-bg, #fcfcf9) 88%, transparent); --pn-h-size: 1.0625rem; --pn-h-weight: 700; --pn-h-transform: none; --pn-h-tracking: -0.01em; --pn-h-ink: var(--pn-ink); --pn-h-n-font: var(--font-brand); --pn-prods-gap: 8px; --pn-prods-line: 0 solid transparent; --pn-prod-bg: #ffffff; --pn-prod-line: 1px solid var(--pn-line); --pn-prod-radius: 14px; --pn-prod-divider: 0 solid transparent; --pn-prod-cols: 38px minmax(0, 1fr) auto; --pn-prod-areas: "g name p" "g d p"; --pn-prod-glyph: grid; --pn-prod-p-dir: column; --pn-prod-p-align: end; --pn-prod-p-font: var(--font-brand); --pn-prod-p-ink: var(--pn-ink-3); --pn-prod-p-type-ink: var(--pn-ink); --pn-prod-p-sep: ""; --pn-prod-p-type-weight: 600; --pn-quote-rule: 2px solid var(--pn-accent-2); --pn-quote-pad: 14px; --pn-cmp-line: 1px solid var(--pn-wash-line); --pn-cmp-pad: 6px 11px; --pn-overlap-line: 1px dashed var(--pn-line-2); --pn-overlap-bg: transparent; --pn-stack-ring: var(--panel-bg, #fcfcf9); --pn-sources-bg: #f3f5f1; --pn-sources-pad: 14px 16px; --pn-sources-mark: grid; --pn-chip-bg: #ffffff; --pn-chip-line: 1px solid var(--pn-line); --pn-chip-pad: 2px 8px; --pn-chip-font: var(--font-brand); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .company-dialog { --panel-bg: #202A34; --color-surface: #141c19; --color-bg: #111815; --card-fill: #1B242D; --color-border: #2B3742; --color-border-strong: #364350; --color-rule: #2B3742; --color-text: #EDF2F5; --color-text-muted: #A8B5C2; --color-text-faint: #94A3B3; --color-accent: #5cbfa1; --color-accent-soft: rgb(92 191 161 / 10%); --color-surface: #141c19; --color-bg: #111815; --card-fill: #1B242D; --color-border: #2B3742; --color-border-strong: #364350; --color-rule: #2B3742; --color-text: #EDF2F5; --color-text-muted: #A8B5C2; --color-text-faint: #94A3B3; --color-accent: #5cbfa1; --color-accent-soft: rgb(92 191 161 / 10%); --pn-ink: #EDF2F5; --pn-ink-2: #A8B5C2; --pn-ink-3: #94A3B3; --pn-line: #2B3742; --pn-line-2: #364350; --pn-accent: #5cbfa1; --pn-accent-2: #5cbfa1; --pn-accent-ring: rgb(92 191 161 / 22%); --pn-wash: rgb(92 191 161 / 8%); --pn-wash-line: rgb(92 191 161 / 45%); --pn-amber: #e7c97a; --pn-amber-ring: rgb(231 201 122 / 25%); --pn-gold: #e7c97a; --pn-gold-bg: transparent; --pn-gold-line: rgb(231 201 122 / 38%); --pn-card: rgb(255 255 255 / 2%); --pn-card-top: rgb(255 255 255 / 3%); --pn-card-bottom: rgb(255 255 255 / 1.5%); --pn-aura: radial-gradient(300px 240px at 88% -40px, rgb(92 191 161 / 10%), transparent 72%), radial-gradient(260px 240px at -60px 520px, rgb(124 140 255 / 10%), transparent 72%); --pn-label-font: var(--font-mono); --pn-src-font: var(--font-mono); --pn-nav-label-transform: lowercase; --pn-nav-label-font: var(--font-mono); --pn-nav-btn-bg: rgb(255 255 255 / 3%); --pn-nav-btn-line: #364350; --pn-nav-btn-ink: #C9D3DC; --pn-tile-bg: linear-gradient(145deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 3%)); --pn-tile-line: rgb(255 255 255 / 10%); --pn-tile-shadow: none; --pn-ticker-ink: #C9D3DC; --pn-ticker-bg: transparent; --pn-ticker-line: #364350; --pn-ticker-font: var(--font-mono); --pn-num-ink: #EDF2F5; --pn-src-dot-primary: #5cbfa1; --pn-src-dot-glow: none; --pn-src-dot-radius: 50%; --pn-seg-bg: rgb(255 255 255 / 3%); --pn-seg-pad: 4px; --pn-seg-radius: 12px; --pn-seg-gap: 2px; --pn-seg-rule: 1px solid #2B3742; --pn-tab-flex: 1 1 0; --pn-tab-pad: 7px 6px; --pn-tab-radius: 9px; --pn-tab-on-bg: #2B3742; --pn-tab-on-ink: #EDF2F5; --pn-tab-on-shadow: 0 1px 2px rgb(0 0 0 / 25%); --pn-tab-n-font: var(--font-brand); --pn-stick-bg: color-mix(in srgb, #202A34 90%, transparent); --pn-h-size: 0.6875rem; --pn-h-weight: 500; --pn-h-transform: uppercase; --pn-h-tracking: 0.12em; --pn-h-ink: #94A3B3; --pn-h-n-font: var(--font-mono); --pn-prods-gap: 0px; --pn-prods-line: 1px solid #2B3742; --pn-prod-bg: transparent; --pn-prod-line: 0 solid transparent; --pn-prod-radius: 0; --pn-prod-divider: 1px solid #2B3742; --pn-prod-cols: minmax(0, 1fr) auto; --pn-prod-areas: "name p" "d d"; --pn-prod-glyph: none; --pn-prod-p-dir: row; --pn-prod-p-align: center; --pn-prod-p-font: var(--font-mono); --pn-prod-p-ink: #5cbfa1; --pn-prod-p-type-ink: #5cbfa1; --pn-prod-p-sep: "\00B7\00A0"; --pn-prod-p-type-weight: 500; --pn-quote-rule: 0 solid transparent; --pn-quote-pad: 0; --pn-cmp-line: 0 solid transparent; --pn-cmp-pad: 4px 0; --pn-overlap-line: 0 solid transparent; --pn-overlap-bg: rgb(255 255 255 / 2%); --pn-stack-ring: #202A34; --pn-sources-bg: transparent; --pn-sources-pad: 0; --pn-sources-mark: none; --pn-chip-bg: transparent; --pn-chip-line: 0 solid transparent; --pn-chip-pad: 0; --pn-chip-font: var(--font-mono); } } :root[data-theme="dark"] .company-dialog { --panel-bg: #202A34; --pn-ink: #EDF2F5; --pn-ink-2: #A8B5C2; --pn-ink-3: #94A3B3; --pn-line: #2B3742; --pn-line-2: #364350; --pn-accent: #5cbfa1; --pn-accent-2: #5cbfa1; --pn-accent-ring: rgb(92 191 161 / 22%); --pn-wash: rgb(92 191 161 / 8%); --pn-wash-line: rgb(92 191 161 / 45%); --pn-amber: #e7c97a; --pn-amber-ring: rgb(231 201 122 / 25%); --pn-gold: #e7c97a; --pn-gold-bg: transparent; --pn-gold-line: rgb(231 201 122 / 38%); --pn-card: rgb(255 255 255 / 2%); --pn-card-top: rgb(255 255 255 / 3%); --pn-card-bottom: rgb(255 255 255 / 1.5%); --pn-aura: radial-gradient(300px 240px at 88% -40px, rgb(92 191 161 / 10%), transparent 72%), radial-gradient(260px 240px at -60px 520px, rgb(124 140 255 / 10%), transparent 72%); --pn-label-font: var(--font-mono); --pn-src-font: var(--font-mono); --pn-nav-label-transform: lowercase; --pn-nav-label-font: var(--font-mono); --pn-nav-btn-bg: rgb(255 255 255 / 3%); --pn-nav-btn-line: #364350; --pn-nav-btn-ink: #C9D3DC; --pn-tile-bg: linear-gradient(145deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 3%)); --pn-tile-line: rgb(255 255 255 / 10%); --pn-tile-shadow: none; --pn-ticker-ink: #C9D3DC; --pn-ticker-bg: transparent; --pn-ticker-line: #364350; --pn-ticker-font: var(--font-mono); --pn-num-ink: #EDF2F5; --pn-src-dot-primary: #5cbfa1; --pn-src-dot-glow: none; --pn-src-dot-radius: 50%; --pn-seg-bg: rgb(255 255 255 / 3%); --pn-seg-pad: 4px; --pn-seg-radius: 12px; --pn-seg-gap: 2px; --pn-seg-rule: 1px solid #2B3742; --pn-tab-flex: 1 1 0; --pn-tab-pad: 7px 6px; --pn-tab-radius: 9px; --pn-tab-on-bg: #2B3742; --pn-tab-on-ink: #EDF2F5; --pn-tab-on-shadow: 0 1px 2px rgb(0 0 0 / 25%); --pn-tab-n-font: var(--font-brand); --pn-stick-bg: color-mix(in srgb, #202A34 90%, transparent); --pn-h-size: 0.6875rem; --pn-h-weight: 500; --pn-h-transform: uppercase; --pn-h-tracking: 0.12em; --pn-h-ink: #94A3B3; --pn-h-n-font: var(--font-mono); --pn-prods-gap: 0px; --pn-prods-line: 1px solid #2B3742; --pn-prod-bg: transparent; --pn-prod-line: 0 solid transparent; --pn-prod-radius: 0; --pn-prod-divider: 1px solid #2B3742; --pn-prod-cols: minmax(0, 1fr) auto; --pn-prod-areas: "name p" "d d"; --pn-prod-glyph: none; --pn-prod-p-dir: row; --pn-prod-p-align: center; --pn-prod-p-font: var(--font-mono); --pn-prod-p-ink: #5cbfa1; --pn-prod-p-type-ink: #5cbfa1; --pn-prod-p-sep: "\00B7\00A0"; --pn-prod-p-type-weight: 500; --pn-quote-rule: 0 solid transparent; --pn-quote-pad: 0; --pn-cmp-line: 0 solid transparent; --pn-cmp-pad: 4px 0; --pn-overlap-line: 0 solid transparent; --pn-overlap-bg: rgb(255 255 255 / 2%); --pn-stack-ring: #202A34; --pn-sources-bg: transparent; --pn-sources-pad: 0; --pn-sources-mark: none; --pn-chip-bg: transparent; --pn-chip-line: 0 solid transparent; --pn-chip-pad: 0; --pn-chip-font: var(--font-mono); } .company-dialog:not(.company-dialog--comparing):not(.company-dialog--discovery):not(.company-dialog--workspace) { background-image: var(--pn-aura); background-repeat: no-repeat; font-family: var(--pn-font); color: var(--pn-ink); } .company-dialog:not([data-mode="modal"]) .detail-head:has(> .detail-nav:only-child) { background-color: transparent; border-bottom: 0; } .company-dialog .detail-head:has(> .detail-nav:only-child) .detail-nav { margin-bottom: var(--space-2); } .company-dialog .detail-head:has(> .detail-nav:only-child) .detail-nav__label { font-family: var(--pn-nav-label-font); text-transform: var(--pn-nav-label-transform); letter-spacing: 0.08em; color: var(--pn-ink-3); } .company-dialog .detail-head:has(> .detail-nav:only-child) .detail-nav__btn { border-radius: 10px; border-color: var(--pn-nav-btn-line); background-color: var(--pn-nav-btn-bg); color: var(--pn-nav-btn-ink); } .company-dialog .detail-head:has(> .detail-nav:only-child) .detail-nav__btn:hover:not(:disabled) { color: var(--pn-accent); border-color: var(--pn-accent); background-color: var(--pn-wash); } .company-dialog .detail-head:has(> .detail-nav:only-child) { display: block; } .company-dialog[data-mode="sheet"] .detail-head:has(> .detail-nav:only-child) .detail-nav, .company-dialog[data-mode="modal"] .detail-head:has(> .detail-nav:only-child) .detail-nav { justify-content: flex-end; } .company-dialog { --color-border: var(--pn-line); --color-border-strong: var(--pn-line-2); --color-text: var(--pn-ink); } .company-dialog .detail-body:has(> .pn-hero) { padding-top: var(--space-2); container: pn / inline-size; } .pn-id { display: flex; gap: 16px; align-items: center; } .pn-tile { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--pn-tile-bg); border: 1px solid var(--pn-tile-line); box-shadow: var(--pn-tile-shadow); } .pn-tile .logo { --logo-lg: 40px; } .pn-tile--sm { width: 36px; height: 36px; border-radius: 10px; box-shadow: none; } .pn-tile--sm .logo { --logo-sm: 26px; width: 26px; height: 26px; } .pn-id__text { min-width: 0; } .pn-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; } .company-dialog .pn-title { margin: 0; font-family: var(--pn-font); font-size: 1.875rem; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; color: var(--pn-ink); overflow-wrap: anywhere; } .company-dialog .pn-ticker { margin: 0; padding: 4px 7px; border: 1px solid var(--pn-ticker-line); border-radius: 6px; background: var(--pn-ticker-bg); color: var(--pn-ticker-ink); font-family: var(--pn-ticker-font); font-size: 0.6875rem; font-weight: 600; line-height: 1; letter-spacing: 0.1em; } .pn-owner { margin-top: 12px; font-size: 0.875rem; color: var(--pn-ink-2); } .pn-owner :is(.entity-acquired, .entity-absorbed, .entity-origin) { margin: 0; font-weight: 600; color: var(--pn-ink); } .pn-owner a { color: inherit; text-decoration-color: var(--pn-line-2); text-underline-offset: 2px; } .pn-owner a:hover { color: var(--pn-accent); } .pn-owner .stat-source { display: block; margin: 2px 0 6px; font-size: 0.75rem; } .pn-summary { margin: 18px 0 0; max-width: 34em; font-size: 1.1875rem; line-height: 1.35; letter-spacing: -0.005em; color: var(--pn-ink); text-wrap: pretty; } .pn-figline { margin: 16px 0 0; display: flex; flex-wrap: nowrap; align-items: baseline; container-type: inline-size; font-size: 0.9375rem; color: var(--pn-ink-2); } .pn-figline__item { white-space: nowrap; font-size: clamp(0.6875rem, 4.2cqi, 0.9375rem); } .pn-figline__item + .pn-figline__item { margin-left: clamp(8px, 3.4cqi, 18px); } .pn-figline__v { font-family: var(--pn-font); font-size: 1.1333em; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--pn-num-ink); } .pn-figline__unit { font-size: 1em; } .pn-figline__item--none { color: var(--pn-ink-3); } .pn-absent { width: 1.05em; height: 1.05em; margin-right: 0.3em; vertical-align: -0.16em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; } .pn-absent--unknown circle { stroke-dasharray: 2.6 2.1; } .pn-spec { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 1px; border: 1px solid var(--pn-line-2); border-radius: 12px; background: var(--pn-line-2); overflow: hidden; } .pn-spec__c { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 8px 6px; background: var(--pn-card); } .pn-spec__k { font-style: normal; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pn-ink-3); } .pn-spec__v { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8125rem; font-weight: 600; color: var(--pn-ink); white-space: nowrap; } .pn-spec__v .flag { width: 14px; height: auto; margin: 0; } .pn-spec__v--status { color: var(--pn-accent); } .pn-spec__v--changed { color: var(--pn-amber); } .pn-spec__city { display: none; } .pn-actions { margin-top: 16px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: 1px solid var(--pn-line-2); border-radius: 12px; background: var(--pn-card); overflow: hidden; } .pn-link { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; height: 42px; padding: 0 8px; border: 0; border-left: 1px solid var(--pn-line-2); background: none; font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--pn-ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .pn-link:first-child { border-left: 0; } .pn-link[hidden] { display: none; } .pn-link--primary { color: var(--pn-accent); } .pn-link:hover { background: var(--pn-wash); } .pn-link__ic { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } :is(.pn-link, .pn-h__link, .pn-prod, .pn-rival__cmp, .pn-overlap, .pn-sources):focus-visible { outline: 2px solid var(--pn-accent); outline-offset: 2px; } .company-dialog .detail-body > .detail-tabs { position: sticky; top: 0; z-index: 3; margin: 24px 0 0; padding: var(--pn-seg-pad); gap: var(--pn-seg-gap); row-gap: 2px; border: var(--pn-seg-rule); border-radius: var(--pn-seg-radius); background: var(--pn-seg-bg); box-shadow: 0 -8px 0 0 var(--pn-stick-bg); } .company-dialog[data-mode="modal"] .detail-body > .detail-tabs { position: static; } .company-dialog .detail-body > .detail-tabs .detail-tab { flex: var(--pn-tab-flex); display: inline-flex; align-items: baseline; justify-content: center; margin: 0; padding: var(--pn-tab-pad); border: 0; border-radius: var(--pn-tab-radius); background: transparent; color: var(--pn-ink-2); font-family: var(--pn-font); font-size: 0.84375rem; font-weight: 600; } .company-dialog .detail-body > .detail-tabs .detail-tab:hover:not(:disabled):not([aria-selected="true"]) { color: var(--pn-ink); background: transparent; } .company-dialog .detail-body > .detail-tabs .detail-tab[aria-selected="true"] { background: var(--pn-tab-on-bg); color: var(--pn-tab-on-ink); box-shadow: var(--pn-tab-on-shadow); } .company-dialog .detail-body > .detail-tabs .detail-tab__n, .company-dialog .detail-body > .detail-tabs .detail-tab[aria-selected="true"] .detail-tab__n { min-width: 0; margin-left: 5px; padding: 0; border-radius: 0; background: none; font-family: var(--pn-tab-n-font); font-size: 0.75rem; font-weight: 400; line-height: inherit; color: var(--pn-ink-3); } .company-dialog .detail-body > .detail-tabs + .detail-panel { margin-top: 0; } .company-dialog .detail-body:has(> .pn-hero) .detail-panel { padding-top: 4px; } .pn-h { margin: 26px 0 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .pn-section:first-child .pn-h, .pn-rivals:first-child .pn-h { margin-top: 20px; } .company-dialog .pn-h__title { margin: 0; padding: 0; border: 0; font-family: var(--pn-font); font-size: var(--pn-h-size); font-weight: var(--pn-h-weight); letter-spacing: var(--pn-h-tracking); text-transform: var(--pn-h-transform); color: var(--pn-h-ink); } .pn-h__n { margin-left: 6px; font-family: var(--pn-h-n-font); font-weight: 400; color: var(--pn-ink-3); } .pn-h__link { flex: none; padding: 0; border: 0; background: none; color: var(--pn-accent); font: inherit; font-size: 0.84375rem; font-weight: 600; cursor: pointer; } .pn-h__link:hover { text-decoration: underline; } .pn-note { margin: -4px 0 10px; font-size: 0.8125rem; color: var(--pn-ink-3); } .pn-prods { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--pn-prods-gap); border: var(--pn-prods-line); border-radius: 14px; overflow: hidden; } .pn-prods__item + .pn-prods__item .pn-prod { border-top: var(--pn-prod-divider); } .pn-prod { width: 100%; display: grid; grid-template-columns: var(--pn-prod-cols); grid-template-areas: var(--pn-prod-areas); column-gap: 12px; row-gap: 2px; align-items: center; padding: 12px 14px; border: var(--pn-prod-line); border-radius: var(--pn-prod-radius); background: var(--pn-prod-bg); color: var(--pn-ink); font: inherit; text-align: left; cursor: pointer; } .pn-prod:hover { border-color: var(--pn-line-2); } .pn-prod:hover .pn-prod__name { color: var(--pn-accent); } .pn-prod__g { grid-area: g; display: var(--pn-prod-glyph); place-items: center; width: 38px; height: 38px; border-radius: 11px; font-size: 0.875rem; font-weight: 700; color: var(--pn-accent); background: linear-gradient(145deg, #eaf4ef, #d9ebe2); } .pn-prod__g--1 { color: #4f5fa8; background: linear-gradient(145deg, #eef0fb, #dfe3f6); } .pn-prod__g--2 { color: #8a5a24; background: linear-gradient(145deg, #f8f1e6, #efe2cc); } .pn-prod__text { display: contents; } .pn-prod__name { grid-area: name; min-width: 0; font-size: 0.9375rem; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pn-prod__d { grid-area: d; min-width: 0; font-size: 0.8125rem; line-height: 1.35; color: var(--pn-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pn-prod__p { grid-area: p; display: flex; flex-direction: var(--pn-prod-p-dir); align-items: var(--pn-prod-p-align); justify-self: end; max-width: 11em; font-family: var(--pn-prod-p-font); font-size: 0.75rem; line-height: 1.3; text-align: right; color: var(--pn-prod-p-ink); } .pn-prod__p > b { font-size: 0.78125rem; font-weight: var(--pn-prod-p-type-weight); color: var(--pn-prod-p-type-ink); } .pn-prod__p > b + span::before { content: var(--pn-prod-p-sep); padding-left: 0.3em; } .pn-rivals:empty { display: none; } .pn-rival-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; } .pn-rival { padding: 16px; border: 1px solid var(--pn-line); border-radius: 16px; background: linear-gradient(180deg, var(--pn-card-top), var(--pn-card-bottom)); } .pn-rival__top { display: flex; align-items: center; gap: 12px; } .pn-rival__name { margin: 0; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 1rem; font-weight: 700; } .pn-badge { padding: 3px 7px; border: 1px solid var(--pn-gold-line); border-radius: 6px; background: var(--pn-gold-bg); color: var(--pn-gold); font-family: var(--pn-label-font); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; } .pn-rival__cmp { margin-left: auto; flex: none; padding: var(--pn-cmp-pad); border: var(--pn-cmp-line); border-radius: 9px; background: none; color: var(--pn-accent); font: inherit; font-size: 0.84375rem; font-weight: 600; cursor: pointer; } .pn-rival__cmp:hover { background: var(--pn-wash); } .pn-quote { margin: 12px 0 0; padding-left: var(--pn-quote-pad); border-left: var(--pn-quote-rule); font-size: 0.90625rem; line-height: 1.45; color: var(--pn-ink); } .pn-rival__reason { margin: 10px 0 0; font-size: 0.875rem; color: var(--pn-ink-2); } .pn-rival__src { margin: 7px 0 0; padding-left: calc(var(--pn-quote-pad) + 2px); font-family: var(--pn-src-font); font-size: 0.78125rem; color: var(--pn-ink-3); } .pn-rival__src a { color: inherit; text-decoration: underline; text-decoration-color: var(--pn-line-2); text-underline-offset: 2px; } .pn-rival__src a:hover { color: var(--pn-accent); text-decoration-color: currentColor; } .pn-overlap { margin-top: 10px; width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: var(--pn-overlap-line); border-radius: 14px; background: var(--pn-overlap-bg); color: var(--pn-ink-2); font: inherit; font-size: 0.84375rem; text-align: left; cursor: pointer; } .pn-overlap:hover { border-color: var(--pn-accent); } .pn-overlap__tx b { color: var(--pn-ink); font-weight: 600; } .pn-overlap__go { margin-left: auto; flex: none; color: var(--pn-accent); font-weight: 600; } .pn-stack { display: flex; flex: none; } .pn-stack__item { display: grid; place-items: center; width: 28px; height: 28px; margin-left: -8px; border: 2px solid var(--pn-stack-ring); border-radius: 50%; background: var(--pn-tile-bg); background-color: var(--panel-bg, #fcfcf9); box-shadow: 0 1px 3px rgb(0 0 0 / 8%); overflow: hidden; } .pn-stack__item:first-child { margin-left: 0; } .pn-stack__item .logo { --logo-sm: 18px; width: 18px; height: 18px; } .pn-sources { margin-top: 24px; width: 100%; display: flex; align-items: center; gap: 12px; padding: var(--pn-sources-pad); border: 0; border-radius: 14px; background: var(--pn-sources-bg); color: var(--pn-ink-2); font: inherit; font-size: 0.8125rem; text-align: left; cursor: pointer; } .pn-sources__mark { flex: none; display: var(--pn-sources-mark); place-items: center; width: 30px; height: 30px; border: 1px solid var(--pn-line); border-radius: 9px; background: var(--pn-card); color: var(--pn-accent); font-weight: 700; } .pn-sources__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .pn-sources__count { font-family: var(--pn-label-font); } .pn-sources:hover .pn-sources__count { color: var(--pn-accent); } .pn-sources__chips { display: flex; flex-wrap: wrap; gap: 6px 10px; } .pn-chip { padding: var(--pn-chip-pad); border: var(--pn-chip-line); border-radius: 999px; background: var(--pn-chip-bg); font-family: var(--pn-chip-font); font-size: 0.75rem; color: var(--pn-ink-2); } .pn-quiet { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--pn-line); } .pn-quiet > .dialog-types { margin: 10px 0; font-size: 0.8125rem; color: var(--pn-ink-3); } .pn-quiet .detail-deep { margin-top: 12px; } @container pn (max-width: 440px) { .pn-summary { font-size: 1.0625rem; } .company-dialog .pn-title { font-size: 1.625rem; } .pn-tile { width: 56px; height: 56px; border-radius: 16px; } .pn-tile .logo { --logo-lg: 34px; } .pn-prod { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "d" "p"; } .pn-prod__g { display: none; } .pn-prod__p { flex-direction: row; flex-wrap: wrap; justify-self: start; max-width: none; margin-top: 2px; text-align: left; } .pn-prod__p > b + span::before { content: "\00B7\00A0"; } .pn-link { gap: 6px; height: 40px; padding: 0 6px; font-size: 0.8125rem; } .pn-spec__full { display: none; } .pn-spec__city { display: inline; } .pn-spec__c { padding: 7px 4px; } .pn-spec__v { font-size: 0.75rem; } .company-dialog .detail-body > .detail-tabs .detail-tab { padding-inline: 4px; } .company-dialog .detail-body > .detail-tabs { column-gap: min(var(--pn-seg-gap), 14px); } .pn-stack__item { width: 24px; height: 24px; margin-left: -7px; } .pn-stack__item .logo { --logo-sm: 15px; width: 15px; height: 15px; } .pn-overlap { gap: 10px; padding-inline: 12px; } } .company-dialog.company-dialog--expanded .detail-body > .pn-hero, .company-dialog.company-dialog--expanded .detail-body > .detail-tabs { max-width: 68ch; margin-inline: auto; } :root[data-theme="dark"][data-midnight] { --color-bg: #0b0f0e; --color-bg-alt: #101614; --color-surface: #121a17; --color-border: #1f2a26; --color-border-strong: #2c3a34; --color-rule: #19221f; --color-text: #e9efeb; --color-text-muted: #a3b2ac; --color-text-faint: #8a9994; --color-accent: #5fd4a8; --color-accent-soft: rgb(95 212 168 / 10%); --dir-page: #0b0f0e; --dir-sheet: #0f1513; --dir-sheet-border: #1f2a26; --dir-rail: #0d1311; --dir-card: #141c19; --dir-card-hover-bg: #17211d; --dir-card-hover-border: #2c3a34; --dir-panel: #0e1412; --dir-border: #1f2a26; --dir-border-strong: #2c3a34; --dir-text: #e9efeb; --dir-text-2: #a3b2ac; --dir-text-faint: #8a9994; --dir-accent: #5fd4a8; --dir-selected: rgb(95 212 168 / 10%); --card-fill: #141c19; } .theme-switch--three { grid-template-columns: 22px 22px 22px; padding: 0 1px; align-items: center; cursor: default; } .theme-switch__opt { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--color-text-muted); cursor: pointer; transition: color 150ms ease, background-color 150ms ease; } .theme-switch__opt svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; fill: none; } .theme-switch__opt:hover { color: var(--color-text); } .theme-switch__opt[aria-checked="true"] { color: var(--color-accent); background-color: var(--color-accent-soft); } .theme-switch__opt:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; } :root[data-theme="dark"][data-midnight] .company-dialog { --panel-bg: #0e1412; --pn-ink: #e9efeb; --pn-ink-2: #b3c1bb; --pn-ink-3: #8a9994; --pn-line: #1f2a26; --pn-line-2: #28352f; --pn-accent: #5fd4a8; --pn-accent-2: #5fd4a8; --pn-accent-ring: rgb(95 212 168 / 22%); --pn-wash: rgb(95 212 168 / 8%); --pn-wash-line: rgb(95 212 168 / 45%); --pn-amber: #e7c97a; --pn-amber-ring: rgb(231 201 122 / 25%); --pn-gold: #e7c97a; --pn-gold-bg: transparent; --pn-gold-line: rgb(231 201 122 / 38%); --pn-card: rgb(255 255 255 / 2%); --pn-card-top: rgb(255 255 255 / 3%); --pn-card-bottom: rgb(255 255 255 / 1.5%); --pn-aura: radial-gradient(300px 240px at 88% -40px, rgb(95 212 168 / 20%), transparent 72%), radial-gradient(260px 240px at -60px 520px, rgb(124 140 255 / 10%), transparent 72%); --pn-label-font: var(--font-mono); --pn-src-font: var(--font-mono); --pn-nav-label-transform: lowercase; --pn-nav-label-font: var(--font-mono); --pn-nav-btn-bg: rgb(255 255 255 / 3%); --pn-nav-btn-line: #243130; --pn-nav-btn-ink: #b7c4be; --pn-tile-bg: linear-gradient(145deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 3%)); --pn-tile-line: rgb(255 255 255 / 10%); --pn-tile-shadow: 0 10px 30px -12px rgb(95 212 168 / 45%); --pn-ticker-ink: #cfe0d8; --pn-ticker-bg: transparent; --pn-ticker-line: #2a3a35; --pn-ticker-font: var(--font-mono); --pn-num-ink: transparent; --pn-src-dot-primary: #5fd4a8; --pn-src-dot-glow: 0 0 8px #5fd4a8; --pn-src-dot-radius: 50%; --pn-seg-bg: rgb(255 255 255 / 3%); --pn-seg-pad: 4px; --pn-seg-radius: 12px; --pn-seg-gap: 2px; --pn-seg-rule: 1px solid #1f2a26; --pn-tab-flex: 1 1 0; --pn-tab-pad: 7px 6px; --pn-tab-radius: 9px; --pn-tab-on-bg: #1f2a26; --pn-tab-on-ink: #e9efeb; --pn-tab-on-shadow: 0 1px 2px rgb(0 0 0 / 25%); --pn-tab-n-font: var(--font-brand); --pn-stick-bg: color-mix(in srgb, #0e1412 90%, transparent); --pn-h-size: 0.6875rem; --pn-h-weight: 500; --pn-h-transform: uppercase; --pn-h-tracking: 0.12em; --pn-h-ink: #8a9994; --pn-h-n-font: var(--font-mono); --pn-prods-gap: 0px; --pn-prods-line: 1px solid #1f2a26; --pn-prod-bg: transparent; --pn-prod-line: 0 solid transparent; --pn-prod-radius: 0; --pn-prod-divider: 1px solid #1a2421; --pn-prod-cols: minmax(0, 1fr) auto; --pn-prod-areas: "name p" "d d"; --pn-prod-glyph: none; --pn-prod-p-dir: row; --pn-prod-p-align: center; --pn-prod-p-font: var(--font-mono); --pn-prod-p-ink: #5fd4a8; --pn-prod-p-type-ink: #5fd4a8; --pn-prod-p-sep: "\00B7\00A0"; --pn-prod-p-type-weight: 500; --pn-quote-rule: 0 solid transparent; --pn-quote-pad: 0; --pn-cmp-line: 0 solid transparent; --pn-cmp-pad: 4px 0; --pn-overlap-line: 0 solid transparent; --pn-overlap-bg: rgb(255 255 255 / 2%); --pn-stack-ring: #0e1412; --pn-sources-bg: transparent; --pn-sources-pad: 0; --pn-sources-mark: none; --pn-chip-bg: transparent; --pn-chip-line: 0 solid transparent; --pn-chip-pad: 0; --pn-chip-font: var(--font-mono); } @media (max-width: 480px) { :root .browse { margin-inline: calc(-1 * var(--page-inset, 30px)); border-left-width: 0; border-right-width: 0; border-radius: 0; } :root .browse::after { display: none; } :root .browse, :root .browse.is-stuck { --browse-pin-gap: 0px; } :root .browse .browse-main__head { margin-inline: calc(-1 * var(--sheet-gutter)); padding-inline: var(--space-3); } :root .browse .company-grid { margin-inline: calc(-1 * var(--sheet-gutter)); gap: 0; border-top: 1px solid var(--color-border); } :root .browse .company-card { border-width: 0 0 1px; border-radius: 0; } :root .browse .company-card > .card-top { padding: 12px 16px 0; gap: 12px; } :root .browse .company-card .logo--sm { width: 40px; height: 40px; } :root .browse .company-card .card-name-row { min-height: 0; } :root .browse .company-card > .card-description { margin-top: 6px; padding-inline: 16px; min-height: 0; } :root .browse .company-card > .card-caps { margin: 2px 0 8px; padding-inline: 16px; min-height: 0; } :root .browse .company-card > .card-foot { margin-inline: 16px; --card-foot-pt: 6px; --card-foot-pb: 10px; } :root .browse .company-card:not(:has(> .card-foot)) > .card-description { margin-bottom: 10px; } :root .browse .company-card.is-selected, :root .browse .company-card.is-selected:hover { box-shadow: inset 3px 0 0 var(--card-selected-edge); } :root .browse .browse-main__head::before { content: none; } } @media (max-width: 900px) and (pointer: coarse), (max-width: 480px) { #toolbar-root .rail-select { font-size: max(16px, var(--text-base)); } }