/* PRO DESIGN — an alternative look you can switch to from the Design menu in the top bar. Every rule is scoped to html[data-design="pro…"] (Pro · Light and its variants), so the Original design (styles.css) is unaffected. Delete this file and its to remove it. Layout idea: a black app bar over a white workspace; the situation list sits in one rounded panel with ticker badges, soft pills and two-line previews. */ @font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-latin-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-latin-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } /* Tokens: light */ :root[data-design^="pro"] { --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --paper: #fbfbfb; /* panels: a soft off-white, lighter than the canvas */ --surface: #f0f0f0; /* controls, tiles, segmented track */ --surface-2: #e6e6e6; /* hover on surface */ --hover: #f6f6f6; --card: #f6f6f6; --card-hover: #f2f2f2; --card-line: #e4e4e4; --ink: #0b0b0c; --ink-2: #45474d; --muted: #74767d; --line: #e2e2e2; --line-soft: #eaeaea; --line-strong: #d0d0d0; --petrol: #0b0b0c; --petrol-ink: #0b0b0c; --petrol-soft: #f0f0f0; --petrol-mute: #a4a4aa; --bar: #0b0b0c; --bar-line: #1f1f23; --bar-control: #151517; --bar-control-line: #303036; --bar-control-hover: #1f1f22; --orange: #f7931e; --orange-deep: #c4640a; --orange-ink: #b45309; --orange-soft: #fff4e6; --selected: #f2f2f2; --selected-line: #f7931e; --positive: #0b0b0c; --positive-soft: #e9e9e9; --negative: #c62f24; --negative-soft: #fdecea; --focus: #c4640a; --meter-off: #c8c8cd; --meter-on: #0b0b0c; /* Black: the same flat #171717 as the top bar, for the column bar, the ticker and name block, chips and buttons */ --block: #171717; --block-line: rgba(255,255,255,.16); --ticker-ink: #ff9900; --ticker-fill: var(--block); --ticker-on: #ff9900; --glass: rgba(251,251,251,.86); --pill-edge: rgba(13,13,14,.05); --ease: cubic-bezier(.2,.7,.2,1); --canvas: #ffffff; /* page background: white, as on the SSI website */ /* Situation cards: light grey on the white page, with a hairline; the figures sit in a white panel inside */ --row: #f6f6f7; --row-hover: #ffffff; --row-selected: #fefaf4; --card-line: #e8e8ea; --card-line-hover: #d2d2d6; --panel-bg: #ffffff; --panel-edge: #e4e4e7; --panel-line: #ececef; --panel-label: #6c6e75; --chip-bg: #ffffff; --return-up: #248a3d; /* Apple's green (the accessible shade that reads on white) */ --return-down: #c62f24; --pill-bg: #e4e4e7; --pill-line: transparent; --pill-neg-bg: #f6dedb; --fig-fill: linear-gradient(180deg, #efeff1 0%, #e2e2e6 100%); --fig-neg-fill: linear-gradient(180deg, #fbe7e4 0%, #f3d5d1 100%); --fig-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 2px rgba(13,13,14,.08), 0 3px 8px -4px rgba(13,13,14,.14); --summary-ink: #1f2024; --strip-line: rgba(13,13,14,.14); /* Page header: sits on the canvas */ --band: var(--canvas); --band-ink: var(--ink); --band-muted: var(--muted); --band-surface: #fbfbfb; --band-surface-2: #e5e5e5; --band-line: #dfdfdf; --band-chip-ink: var(--ink-2); --band-chip-count: var(--muted); --band-chip-hover: var(--ink); --band-chip-on-bg: #171717; --band-chip-on-ink: #ffffff; --band-chip-on-count: #ff9900; --band-chip-on-shadow: none; --band-placeholder: var(--muted); --band-focus-line: var(--line-strong); --band-focus-ring: rgba(13,13,14,.05); --home-eyebrow: var(--orange-ink); --home-cta-bg: #0b0b0c; --home-cta-ink: #ffffff; --home-cta-hover: #26262a; --home-card-shadow: var(--panel-shadow); --pane-right: 28px; --tile-fill: linear-gradient(180deg, #2b2b30, #0b0b0c); /* Column headings: a dark bar at the top of the list panel */ --thead-bg: #171717; --thead-glass: #171717; --thead-ink: #ffffff; --thead-active: #ffffff; --thead-icon: #8c8c8c; --panel-shadow: 0 1px 2px rgba(13,13,14,.04), 0 12px 32px -20px rgba(13,13,14,.18); --primary-bg: #0b0b0c; --primary-ink: #ffffff; --primary-hover: #26262a; --chip-on-bg: #171717; --chip-on-ink: #ffffff; --chip-on-count: #ff9900; --report-hover-bg: #0b0b0c; --report-hover-ink: #f7931e; /* SSI report button in the rows: outlined, orange text and arrow; filled orange on hover */ --report-bg: transparent; --report-ink: #e08600; --report-arrow: #e08600; --report-line: var(--strip-line); /* same hairline as the card dividers */ --report-bg-hover: #ff9900; --report-ink-hover: #171717; --report-arrow-hover: #171717; /* Ticker in the rows: orange text (deeper orange when the row is open) */ --ticker-text: #e08600; --ticker-text-strong: #b86e00; --report-shadow: none; --report-shadow-hover: none; /* Layout */ --ticker-w: 68px; /* ticker badge; the summary lines up with the company name after it */ --summary-measure: 760px; --reader: clamp(470px, 40vw, 620px); /* side window */ } /* Top bar: the same bar as the Special Situation Investments website. Near-black (#171717), the SSI Trackers logo (the SSI box with "Special Situation" and "Investments" in orange and "Tracker" in white, in the Poppins Medium of the SSI logo), the site's Portfolio link in white Poppins 16px, then Trackers (the current section, in orange), Design (this playground's switcher), the site search with its underline, and Profile. */ :root[data-design^="pro"] .app-shell { grid-template-rows: 60px minmax(0, 1fr) auto; } :root[data-design^="pro"] .site-header { gap: 0; padding: 0 var(--page-gutter); background: #171717; border-bottom: 0; } :root[data-design^="pro"] .brand-mark, :root[data-design^="pro"] .brand-logo-mark, :root[data-design^="pro"] .about-button, :root[data-design^="pro"] .account-link { display: none; } :root[data-design^="pro"] .brand { gap: 0; height: 60px; padding: 0; margin: 0; border: 0; } :root[data-design^="pro"] .brand-logo { display: block; width: auto; height: 44px; aspect-ratio: 437.91 / 112; color: #ff9900; fill: #ffffff; } :root[data-design^="pro"] .home-logo { display: none; } /* the top bar already carries the logo */ :root[data-design^="pro"] .home-page .page-eyebrow { display: none; } :root[data-design^="pro"] .site-nav { display: flex; align-items: center; gap: 42px; margin-left: 64px; } :root[data-design^="pro"] :is(.site-nav a, .tracker-trigger, .profile-link) { color: #ffffff; font-size: 16px; font-weight: 400; text-decoration: none; white-space: nowrap; transition: color .15s; } :root[data-design^="pro"] :is(.site-nav a, .tracker-trigger, .profile-link):hover { color: #ff9900; } :root[data-design^="pro"] .tracker-switch { display: flex; align-items: center; height: 60px; margin-left: 42px; } :root[data-design^="pro"] .tracker-trigger { height: auto; gap: 6px; padding: 0; border: 0; background: none; box-shadow: none; } :root[data-design^="pro"] .tracker-trigger:hover, :root[data-design^="pro"] .tracker-trigger[aria-expanded=true], :root[data-design^="pro"] .tracker-trigger.is-current { background: none; color: #ff9900; } :root[data-design^="pro"] .tracker-icon { display: none; } :root[data-design^="pro"] .menu-chevron { width: 14px; height: 14px; margin-left: 0; opacity: .9; } :root[data-design^="pro"] .header-links { gap: 0; margin-left: auto; } :root[data-design^="pro"] .design-switch { display: flex; align-items: center; height: 60px; margin-left: 0; } :root[data-design^="pro"] .design-trigger { height: auto; gap: 6px; padding: 0; background: none; color: #b5b5b5; font-size: 16px; font-weight: 400; } :root[data-design^="pro"] .design-trigger:hover, :root[data-design^="pro"] .design-trigger[aria-expanded=true] { background: none; color: #ffffff; } :root[data-design^="pro"] .profile-link { display: inline-flex; align-items: center; gap: 7px; margin-left: 28px; } :root[data-design^="pro"] .profile-link svg { width: 19px; height: 19px; fill: currentColor; } :root[data-design^="pro"] .profile-link[aria-current=page] { color: #ff9900; } :root[data-design^="pro"] .footer-about { display: inline-block; padding: 6px 0; color: inherit; text-decoration: none; } :root[data-design^="pro"] .footer-about:hover, :root[data-design^="pro"] .footer-about[aria-current=page] { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } /* No search in the top bar (the tracker pages have their own). The bar gets tighter step by step as the window narrows: smaller gaps, then no site links, and on phones a slightly smaller logo (and Profile as an icon only). */ @media (max-width: 1439px) { :root[data-design^="pro"] .site-nav { gap: 32px; margin-left: 44px; } :root[data-design^="pro"] .tracker-switch { margin-left: 32px; } } @media (max-width: 1279px) { :root[data-design^="pro"] .site-nav { gap: 26px; margin-left: 32px; } :root[data-design^="pro"] .tracker-switch { margin-left: 26px; } } @media (max-width: 679px) { :root[data-design^="pro"] .site-nav { display: none; } :root[data-design^="pro"] .tracker-switch { margin-left: 32px; } } @media (max-width: 640px) { :root[data-design^="pro"] .brand-logo { height: 40px; } :root[data-design^="pro"] .tracker-switch { margin-left: 24px; } } @media (max-width: 480px) { :root[data-design^="pro"] .brand-logo { height: 36px; } :root[data-design^="pro"] .tracker-switch { margin-left: 18px; } :root[data-design^="pro"] .profile-link { margin-left: 16px; } } @media (max-width: 420px) { :root[data-design^="pro"] body #profile-link.profile-link { gap: 0; font-size: 0; } /* icon only; the link keeps its name */ } @media (max-width: 400px) { :root[data-design^="pro"] .brand-logo { height: 32px; } } @media (max-width: 340px) { :root[data-design^="pro"] .brand-logo { height: 28px; } } /* Menus */ :root[data-design^="pro"] .tracker-menu, :root[data-design^="pro"] .design-menu { top: calc(100% - 2px); padding: 6px; border-color: var(--line); border-radius: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 24px 48px -20px rgba(0,0,0,.35); } :root[data-design^="pro"] .tracker-menu-heading, :root[data-design^="pro"] .design-menu-heading { padding: 8px 10px; color: var(--muted); font-size: 12px; font-weight: 500; } :root[data-design^="pro"] .tracker-menu-heading span:first-child { color: var(--ink); font-weight: 600; } :root[data-design^="pro"] .tracker-menu-heading { display: none; } :root[data-design^="pro"] .tracker-option, :root[data-design^="pro"] .design-option { border-radius: 10px; } :root[data-design^="pro"] .tracker-option-copy span, :root[data-design^="pro"] .design-option-copy span { margin-top: 2px; line-height: 22px; } @media (min-width: 561px) { :root[data-design^="pro"] .tracker-menu { width: 480px; } :root[data-design^="pro"] .design-menu { width: 350px; } } :root[data-design^="pro"] .tracker-option:hover, :root[data-design^="pro"] .tracker-option:focus-visible, :root[data-design^="pro"] .design-option:hover, :root[data-design^="pro"] .design-option:focus-visible { background: var(--surface); } :root[data-design^="pro"] .tracker-option[aria-current=page], :root[data-design^="pro"] .design-option[aria-checked=true] { background: var(--surface); box-shadow: none; } :root[data-design^="pro"] .tracker-option[aria-current=page] strong::after, :root[data-design^="pro"] .design-option[aria-checked=true] strong::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: var(--orange); vertical-align: middle; } :root[data-design^="pro"] .tracker-option-copy strong { font-size: 14px; } :root[data-design^="pro"] .tracker-option-count { color: var(--ink); font-weight: 600; } :root[data-design^="pro"] .tracker-option-count small { font-size: 11px; } :root[data-design^="pro"] .design-swatch { border-color: var(--line-strong); border-radius: 7px; } /* Tracker heading: icon tile, title, situation count, search */ :root[data-design^="pro"] .tracker-heading { display: grid; flex: 0 1 auto; grid-template-columns: 48px auto; column-gap: 18px; align-items: center; } :root[data-design^="pro"] .tracker-heading h1, :root[data-design^="pro"] .tracker-heading p { grid-column: 2; } :root[data-design^="pro"] .tracker-head h1 { font-size: 25px; font-weight: 600; line-height: 1.15; letter-spacing: -0.025em; } :root[data-design^="pro"] .tracker-heading p { margin-top: 6px; color: var(--muted); font-size: 13.5px; } :root[data-design^="pro"] .tracker-count small::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft); } :root[data-design^="pro"] .search-control { flex: 0 1 380px; width: 380px; min-width: 220px; height: 40px; padding: 0 8px 0 13px; border: 1px solid transparent; border-radius: 11px; background: var(--surface); transition: background-color .15s, border-color .15s, box-shadow .15s; } :root[data-design^="pro"] .search-control::after { content: "/"; display: grid; place-items: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--muted); font-size: 16px; font-weight: 500; } :root[data-design^="pro"] .search-control:focus-within::after, :root[data-design^="pro"] .search-control:has(input:not(:placeholder-shown))::after, :root[data-design^="pro"] .reader-open .search-control::after { display: none; } :root[data-design^="pro"] .search-control:focus-within { border-color: var(--line-strong); outline: 0; background: var(--paper); box-shadow: 0 0 0 4px var(--surface); } :root[data-design^="pro"] .search-control svg { width: 15px; height: 15px; } :root[data-design^="pro"] .search-control input { font-size: 13.5px; } /* Filters: a segmented control */ :root[data-design^="pro"] .filter-chips { gap: 2px; padding: 3px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--pill-edge); } :root[data-design^="pro"] .chip { height: 32px; gap: 7px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); font-size: 13px; font-weight: 500; transition: background-color .15s, color .15s, transform .1s; } :root[data-design^="pro"] .chip span { color: var(--muted); font-size: 12px; } :root[data-design^="pro"] .chip:hover { background: var(--surface-2); color: var(--ink); } :root[data-design^="pro"] .chip[aria-pressed=true] { background: var(--chip-on-bg); color: var(--chip-on-ink); box-shadow: none; } :root[data-design^="pro"] .chip[aria-pressed=true] span { color: var(--chip-on-count); } /* The list: one rounded panel, rows separated by hairlines */ :root[data-design^="pro"] .situation-table { overflow: visible; border: 0; background: transparent; box-shadow: none; } :root[data-design^="pro"] .list-head { height: 44px; margin-bottom: 0; padding: 0 20px; border-bottom: 0; background: var(--thead-glass); backdrop-filter: saturate(1.4) blur(12px); } :root[data-design^="pro"] .th, :root[data-design^="pro"] .th .sort-button { color: var(--thead-ink); font-size: 16px; font-weight: 400; letter-spacing: 0; text-transform: capitalize; } /* the website's top-bar type */ :root[data-design^="pro"] .th-short { display: none; } :root[data-design^="pro"] .th-long { display: inline; } /* "Market Cap" needs 107px past the divider (a 124px column); where the column is narrower (side window open on a small laptop) it reads "Mcap" */ :root[data-design^="pro"] .th.m1 { container-type: inline-size; } @container (max-width: 106.5px) { :root[data-design^="pro"] .th-long { display: none; } :root[data-design^="pro"] .th-short { display: inline; } } :root[data-design^="pro"] .sort-button { gap: 5px; transition: color .15s; } :root[data-design^="pro"] .sort-button.active { color: var(--thead-active); font-weight: 400; } :root[data-design^="pro"] .sort-button:hover { color: #ff9900; } :root[data-design^="pro"] .sort-button svg { stroke: var(--thead-icon); } :root[data-design^="pro"] .sort-button:hover svg { stroke: #ff9900; } :root[data-design^="pro"] .sort-button svg { width: 12px; height: 12px; } :root[data-design^="pro"] .sort-button.active svg { stroke: var(--orange); } :root[data-design^="pro"] .th-anchor .sort-button { padding-left: 17px; } :root[data-design^="pro"] .info-button { width: 14px; height: 14px; margin-left: 6px; border-radius: 6px; background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); color: #ffffff; } :root[data-design^="pro"] .info-button svg { width: 10px; height: 10px; stroke-width: 2.4; } :root[data-design^="pro"] .info-button:hover, :root[data-design^="pro"] .info-button[aria-expanded=true] { background: #ff9900; box-shadow: none; color: #171717; } :root[data-design^="pro"] .catalyst-popover { text-transform: none; } /* the column headings are capitalised; the guide inside is not */ :root[data-design^="pro"] .info-button::after { content: ""; position: absolute; inset: -7px; } /* small to look at, still easy to click */ :root[data-design^="pro"] .situation-list { gap: 10px; margin-top: 0; } :root[data-design^="pro"] .situation { padding: 20px; border: 0; background: var(--row); box-shadow: inset 0 0 0 1px var(--card-line); transition: background-color .18s var(--ease), box-shadow .18s var(--ease); } :root[data-design^="pro"] .situation:last-child { border-bottom: 0; } :root[data-design^="pro"] .situation { transition: background-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); } :root[data-design^="pro"] .situation:hover { background: var(--row-hover); box-shadow: inset 0 0 0 1px var(--card-line-hover), 0 2px 4px -2px rgba(13,13,14,.06), 0 14px 32px -18px rgba(13,13,14,.30); transform: translateY(-2px); } :root[data-design^="pro"] .situation.selected:hover { transform: none; } @media (prefers-reduced-motion: reduce) { :root[data-design^="pro"] .situation:hover { transform: none; } } :root[data-design^="pro"] .situation.selected { background: var(--row-selected); box-shadow: inset 3px 0 0 var(--orange), inset 0 0 0 1px var(--card-line-hover); } /* Cards: ticker, company, headline and summary on the left; on the right the figures panel (the main figure first, then market cap, the third figure and the deal type) with the SSI report button under it. The main figure spans the first two rows, so the summary starts right under the name whatever the panel's height. */ :root[data-design^="pro"] .grid { grid-template-columns: minmax(0, 1fr) 288px; grid-template-rows: auto auto auto auto auto auto 1fr; grid-template-areas: "sit m2" "sum m2" "sum m1" "sum m3" "sum tag" "sum rep" "sum ."; column-gap: 48px; row-gap: 0; } :root[data-design^="pro"] .workbench[data-tracker="strategic-review"] .grid { grid-template-columns: minmax(0, 1fr) 288px; } :root[data-design^="pro"] .reader-open .grid, :root[data-design^="pro"] .workbench[data-tracker="strategic-review"].reader-open .grid { grid-template-columns: minmax(0, 1fr) 264px; grid-template-rows: auto auto auto auto 1fr; grid-template-areas: "sit m2" "sum m2" "sum m1" "sum m3" "sum ."; column-gap: 32px; } :root[data-design^="pro"] .list-head { display: none; } /* the sort bar above the list replaces the column headings */ :root[data-design^="pro"] .c-sit { padding-right: 0; } :root[data-design^="pro"] .c-rep { display: flex; flex-direction: column; align-items: stretch; gap: 8px; } :root[data-design^="pro"] .c-rep:empty { display: none; } :root[data-design^="pro"] .reader-open .c-rep { display: none; } :root[data-design^="pro"] .c-tag { grid-area: tag; } :root[data-design^="pro"] .reader-open .c-tag { display: none; } /* Sort: one control next to the filter tags, grouped with the search box (they wrap together on narrow screens). Cards have no column headings, so the order is chosen from a menu, and the button says it in plain words. */ :root[data-design^="pro"] .list-tools { order: 6; display: flex; flex: none; align-items: center; gap: 10px; min-width: 0; margin: 12px 0 0 auto; } :root[data-design^="pro"] .sort-control { position: relative; z-index: 5; display: block; flex: none; } :root[data-design^="pro"] .sort-trigger { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 13px; border: 1px solid var(--band-line); background: var(--band-surface); color: var(--ink); font: inherit; font-weight: 500; white-space: nowrap; cursor: pointer; transition: border-color .15s, box-shadow .15s; } :root[data-design^="pro"] .sort-trigger:hover, :root[data-design^="pro"] .sort-trigger[aria-expanded=true] { border-color: var(--ink); } :root[data-design^="pro"] .sort-trigger-label { color: var(--muted); font-weight: 400; } :root[data-design^="pro"] .sort-trigger svg { flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; } :root[data-design^="pro"] .sort-icon { width: 16px; height: 16px; stroke-width: 1.7; color: var(--muted); } :root[data-design^="pro"] .sort-chevron { width: 14px; height: 14px; margin-left: 2px; stroke-width: 1.7; color: var(--muted); transition: transform .15s; } :root[data-design^="pro"] .sort-trigger[aria-expanded=true] .sort-chevron { transform: rotate(180deg); } :root[data-design^="pro"] .sort-menu { position: absolute; top: calc(100% + 6px); right: 0; width: 248px; padding: 6px; border: 1px solid var(--line); background: var(--paper); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 24px 48px -20px rgba(0,0,0,.35); } :root[data-design^="pro"] .sort-menu-heading { margin: 0; padding: 6px 10px 6px; color: var(--muted); } :root[data-design^="pro"] .sort-item { display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 10px; border: 0; background: none; color: var(--ink-2); font: inherit; text-align: left; cursor: pointer; } :root[data-design^="pro"] .sort-item:hover, :root[data-design^="pro"] .sort-item:focus-visible { background: var(--surface); color: var(--ink); outline: 0; } :root[data-design^="pro"] .sort-item[aria-checked=true] { color: var(--ink); font-weight: 600; } :root[data-design^="pro"] .sort-check { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--orange); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; } :root[data-design^="pro"] .sort-item[aria-checked=true] .sort-check { visibility: visible; } /* Catalyst guide for the cards: opened from the Catalyst label (dotted underline), floats under it */ :root[data-design^="pro"] .situation .cell-label-info { padding: 0; border: 0; background: none; font: inherit; color: var(--panel-label); text-decoration: underline dotted; text-decoration-color: var(--line-strong); text-decoration-thickness: 1.5px; text-underline-offset: 5px; cursor: help; } :root[data-design^="pro"] .situation .cell-label-info:hover, :root[data-design^="pro"] .situation .cell-label-info[aria-expanded=true] { color: var(--ink); text-decoration-color: #ff9900; } :root[data-design^="pro"] .catalyst-float:not([hidden]) { position: fixed; z-index: 60; display: block; right: auto; } /* Situation cell: ticker badge, company name, deal-type pill */ :root[data-design^="pro"] .situation .c-sit { grid-template-columns: auto minmax(0, 1fr); column-gap: 0; row-gap: 0; align-items: stretch; } :root[data-design^="pro"] .situation .c-sit .ticker-button { grid-column: 1; grid-row: 1; min-width: 0; height: auto; min-height: 30px; padding: 0 14px 0 0; border-radius: 0; background: none; box-shadow: inset -1px 0 0 var(--strip-line); color: var(--ticker-text); font-size: 16px; font-weight: 600; letter-spacing: .05em; text-align: center; white-space: nowrap; overflow-wrap: normal; transition: background-color .15s, color .15s; } :root[data-design^="pro"] .situation .c-sit .ticker-button:hover { text-decoration: none; } :root[data-design^="pro"] .situation:hover .c-sit .ticker-button { transform: none; } :root[data-design^="pro"] .situation .c-sit .company { display: flex; align-items: center; justify-self: start; grid-column: 2; grid-row: 1; min-height: 30px; margin: 0; padding: 0 0 0 14px; box-sizing: border-box; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--ink); font-size: 20px; font-weight: 600; line-height: 28px; letter-spacing: -0.005em; } :root[data-design^="pro"] body #situation-list .situation .c-sit .ticker-button { border-radius: 0; } /* above the shared corner rule */ :root[data-design^="pro"] .situation .c-sit .tag { display: none; } :root[data-design^="pro"] .tag { gap: 8px; height: 24px; padding: 0; background: none; color: var(--ink); font-size: 16px; font-weight: 500; line-height: 24px; white-space: normal; } :root[data-design^="pro"] .tag::before { flex-shrink: 0; width: 7px; height: 7px; background: var(--meter-off); } :root[data-design^="pro"] .tag-warn { background: none; color: var(--orange-ink); font-weight: 600; } :root[data-design^="pro"] .tag-warn::before { background: var(--orange); } :root[data-design^="pro"] :is(.c-tag, .reader-head) .tag-warn { color: var(--ink); font-weight: 500; } :root[data-design^="pro"] :is(.c-tag, .reader-head) .tag-warn::before { background: var(--meter-off); } :root[data-design^="pro"] :is(.c-tag, .reader-head) .tag-binding { color: var(--orange-ink); font-weight: 600; } :root[data-design^="pro"] :is(.c-tag, .reader-head) .tag-binding::before { background: var(--orange); } :root[data-design^="pro"] .reader-head .tag:not(.tag-warn, .tag-binding)::before { display: none; } /* review focus and similar labels: no bullet */ /* Values */ :root[data-design^="pro"] .pill { width: 84px; padding: 4px 0; border-radius: 9px; text-align: center; box-shadow: inset 0 0 0 1px var(--pill-edge); font-size: 16px; font-weight: 500; line-height: 24px; letter-spacing: -0.01em; } :root[data-design^="pro"] .pill.pos { background: var(--pill-bg); box-shadow: inset 0 0 0 1px var(--pill-line); color: var(--positive); } :root[data-design^="pro"] .pill.neg { background: var(--negative-soft); color: var(--negative); } :root[data-design^="pro"] .pill.zero, :root[data-design^="pro"] .pill:not(.pos):not(.neg) { background: var(--pill-bg); box-shadow: inset 0 0 0 1px var(--pill-line); color: var(--muted); } :root[data-design^="pro"] .num-value { padding-top: 4px; color: var(--ink); font-size: 16px; font-weight: 500; line-height: 24px; } :root[data-design^="pro"] .text-value { padding-top: 4px; font-size: 16px; font-weight: 500; line-height: 24px; } :root[data-design^="pro"] .m1 > .missing-value, :root[data-design^="pro"] .m2 > .missing-value, :root[data-design^="pro"] .m3 > .missing-value { padding-top: 4px; line-height: 24px; } :root[data-design^="pro"] .terms-note { margin-top: 2px; font-size: 16px; line-height: 22px; } :root[data-design^="pro"] .meter { gap: 2px; height: 14px; margin-top: 9px; } :root[data-design^="pro"] .meter i { width: 6px; height: 6px; border-radius: 2px; background: var(--meter-off); } :root[data-design^="pro"] .meter i:nth-child(2) { height: 10px; } :root[data-design^="pro"] .meter i:nth-child(3) { height: 14px; } :root[data-design^="pro"] .meter i.on { background: var(--meter-on); } :root[data-design^="pro"] .catalyst-popover { width: 350px; border-color: var(--line); border-radius: 14px; line-height: 23px; } :root[data-design^="pro"] .catalyst-popover li .meter, :root[data-design^="pro"] .meter-with-word .meter { margin-top: 0; } /* Figures: one panel on the right of the card. The main figure (spread, or the return on strategic reviews) leads in large type; the other figures follow as label-value rows divided by inset hairlines. Returns are green when positive and red when negative. The panel is drawn by its four cells: edges on the outside, dividers between them. */ :root[data-design^="pro"] .situation :is(.m1, .m2, .m3, .c-tag) { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; column-gap: 8px; min-width: 0; min-height: 0; margin: 0; padding: 10px 16px; border: 0; border-radius: 0; background: var(--panel-bg); box-shadow: inset 1px 0 0 var(--panel-edge), inset -1px 0 0 var(--panel-edge); text-align: left; } :root[data-design^="pro"] .situation :is(.m1, .m3, .c-tag)::before { content: ""; position: absolute; top: 0; right: 16px; left: 16px; height: 1px; background: var(--panel-line); } :root[data-design^="pro"] .situation .m2 { flex-direction: column; align-items: flex-start; gap: 0; padding: 14px 16px 13px; border-radius: 4px 4px 0 0; box-shadow: inset 0 1px 0 var(--panel-edge), inset 1px 0 0 var(--panel-edge), inset -1px 0 0 var(--panel-edge); } :root[data-design^="pro"] .situation .c-tag { border-radius: 0 0 4px 4px; box-shadow: inset 0 -1px 0 var(--panel-edge), inset 1px 0 0 var(--panel-edge), inset -1px 0 0 var(--panel-edge); } :root[data-design^="pro"] .situation .cell-label { display: block; flex: 0 0 auto; margin-right: auto; color: var(--panel-label); font-weight: 400; line-height: 24px; white-space: nowrap; } :root[data-design^="pro"] .situation .m2 > .cell-label { margin: 0; white-space: normal; } :root[data-design^="pro"] .situation :is(.m1, .m2, .m3) > :is(.num-value, .pill, .text-value, .missing-value) { display: block; flex: 0 1 auto; width: auto; min-width: 0; min-height: 0; margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; color: var(--ink); font-size: 16px; font-weight: 500; line-height: 24px; letter-spacing: -0.01em; text-align: right; font-variant-numeric: tabular-nums; } :root[data-design^="pro"] body #situation-list .situation .m2 > .pill { font-size: 28px; font-weight: 600; line-height: 36px; letter-spacing: -0.025em; text-align: left; } :root[data-design^="pro"] .situation .m2 > .pill.neg { color: var(--return-down); } :root[data-design^="pro"] .situation .m2 > .pill.zero { color: var(--muted); } :root[data-design^="pro"] .workbench[data-tracker="strategic-review"] .situation .m2 > .pill.pos { color: var(--return-up); } :root[data-design^="pro"] .situation :is(.m1, .m2, .m3) > .missing-value { color: var(--muted); } :root[data-design^="pro"] .situation .m3 > .meter { height: 14px; margin: 0; padding: 0; align-items: flex-end; gap: 2px; } :root[data-design^="pro"] .situation .cell-word { display: inline; color: var(--ink); font-weight: 500; line-height: 24px; text-align: right; } :root[data-design^="pro"] .situation .cell-word .word-meter { display: none; margin: 0; } :root[data-design^="pro"] .situation .c-tag > .tag { display: block; flex: 0 1 auto; width: auto; height: auto; min-height: 0; margin: 0; padding: 0; background: none; box-shadow: none; line-height: 24px; text-align: right; } :root[data-design^="pro"] .situation .c-tag > .tag::before { display: none; } /* no bullet: the label says what it is */ :root[data-design^="pro"] .situation .m3 > .terms-note { display: none; } :root[data-design^="pro"] .situation .c-rep { margin-top: 12px; } :root[data-design^="pro"] .reader-open .situation :is(.c-tag, .c-rep) { display: none; } :root[data-design^="pro"] .reader-open .situation .m3 { border-radius: 0 0 4px 4px; box-shadow: inset 0 -1px 0 var(--panel-edge), inset 1px 0 0 var(--panel-edge), inset -1px 0 0 var(--panel-edge); } /* last row while the deal type is hidden */ /* Side window open: the figures step aside at every window width (they are in the side window) and the text takes the full card. */ :root[data-design^="pro"] .situation-list { container: cards / inline-size; } :root[data-design^="pro"] .reader-open .situation :is(.m1, .m2, .m3) { display: none; } :root[data-design^="pro"] .reader-open .grid, :root[data-design^="pro"] .workbench[data-tracker="strategic-review"].reader-open .grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "sit" "sum"; } :root[data-design^="pro"] .cvr-mark { color: var(--orange-ink); font-weight: 600; text-decoration: underline dotted rgba(247,147,30,.7); text-decoration-thickness: 1.5px; text-underline-offset: 4px; white-space: nowrap; cursor: help; } /* never split across lines */ :root[data-design^="pro"] .cvr-added { display: inline; margin: 0; } /* " + CVR" after a consideration that does not name it */ :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics :is(.cvr-added, .cvr-added .cvr-mark) { font-size: inherit; line-height: inherit; } /* the side window: at the figure's size */ :root[data-design^="pro"] .summary .cvr-mark, :root[data-design^="pro"] .summary-prose .cvr-mark { color: inherit; font-weight: inherit; text-decoration: none; cursor: inherit; } /* the note on hover (or keyboard focus), in the dark box of the other hints, from the word's right edge */ :root[data-design^="pro"] .cvr-mark[data-tip] { position: relative; outline: 0; } :root[data-design^="pro"] .cvr-mark[data-tip]:focus-visible { outline: 2px solid #ff9900; outline-offset: 2px; } :root[data-design^="pro"] .cvr-mark[data-tip]:is(:hover, :focus-visible)::after { content: attr(data-tip); position: absolute; z-index: 20; top: calc(100% + 8px); right: -8px; width: max-content; max-width: 300px; padding: 6px 10px; border-radius: 4px; background: #171717; box-shadow: 0 8px 20px -10px rgba(0,0,0,.5); color: #ffffff; font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: 0; text-align: left; text-decoration: none; text-transform: none; white-space: normal; pointer-events: none; } /* Summary, under the first line and aligned with the company name. Side window closed: the headline and the full summary. Side window open: the headline and a two-line preview. */ :root[data-design^="pro"] .summary { max-width: 700px; font-size: 16px; line-height: 26px; } :root[data-design^="pro"] .summary .lead { margin-bottom: 6px; color: var(--ink); font-size: 16px; font-weight: 600; } :root[data-design^="pro"] body #situation-list .situation .summary .lead { font-size: 18px; line-height: 26px; letter-spacing: -0.005em; } /* the headline, a step above the text */ :root[data-design^="pro"] .summary .full { display: block; color: var(--summary-ink); } /* Summary text: at most 700px wide and justified, so both edges are straight (hyphenation keeps the spacing even) */ :root[data-design^="pro"] .summary :is(.full p, .preview) { text-align: justify; hyphens: auto; -webkit-hyphens: auto; } :root[data-design^="pro"] .summary .full p { max-width: none; margin-bottom: 8px; } :root[data-design^="pro"] .summary .full p:last-child { margin-bottom: 0; } :root[data-design^="pro"] .summary .preview { display: none; } :root[data-design^="pro"] .reader-open .summary .full { display: none; } :root[data-design^="pro"] .reader-open .summary .preview { display: block; max-width: 700px; max-height: 52px; overflow: hidden; margin: 0; color: var(--summary-ink); white-space: normal; } /* Two-line preview: plain left-aligned lines that end on whole words, with the second line fading out (no "…") */ :root[data-design^="pro"] .reader-open .summary .preview { text-align: left; hyphens: manual; -webkit-hyphens: manual; -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(90deg, #000 55%, transparent 96%); mask-image: linear-gradient(#000, #000), linear-gradient(90deg, #000 55%, transparent 96%); -webkit-mask-size: 100% 26px, 100% 26px; mask-size: 100% 26px, 100% 26px; -webkit-mask-position: 0 0, 0 26px; mask-position: 0 0, 0 26px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } :root[data-design^="pro"] .summary .more, :root[data-design^="pro"] .reader-open .summary .more { display: none; } :root[data-design^="pro"] .situation .c-sum, :root[data-design^="pro"] .reader-open .situation .c-sum { margin-top: 14px; padding-top: 0; padding-left: 0; border-top: 0; } :root[data-design^="pro"] .report-button { height: 36px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); box-shadow: 0 1px 2px rgba(13,13,14,.05); font-size: 16px; transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s, transform .1s; } :root[data-design^="pro"] .report-button { border-color: var(--report-line); color: var(--report-ink); } :root[data-design^="pro"] .report-button svg { stroke: var(--report-arrow); } :root[data-design^="pro"] .report-button:hover { border-color: #ff9900; background: #ff9900; color: #171717; } :root[data-design^="pro"] .report-button:hover svg { stroke: currentColor; } /* SSI report in the rows: a solid button, so research that has a report stands out */ :root[data-design^="pro"] .c-rep .report-button { gap: 8px; height: 40px; padding: 0 15px 0 16px; border: 0; background: var(--report-bg); box-shadow: inset 0 0 0 1px var(--report-line); color: var(--report-ink); font-weight: 600; } :root[data-design^="pro"] .c-rep .report-button svg { width: 15px; height: 15px; stroke: var(--report-arrow); stroke-width: 2.2; transition: transform .15s var(--ease); } :root[data-design^="pro"] .c-rep .report-button:hover { background: var(--report-bg-hover); color: var(--report-ink-hover); box-shadow: inset 0 0 0 1px var(--report-bg-hover); } :root[data-design^="pro"] .c-rep .report-button:hover svg { stroke: var(--report-arrow-hover); transform: translate(1px, -1px); } :root[data-design^="pro"] .c-rep .report-button:active { transform: translateY(1px); } :root[data-design^="pro"] .c-rep .report-button { justify-content: center; width: 100%; background: var(--panel-bg); box-shadow: inset 0 0 0 1px var(--panel-edge); } :root[data-design^="pro"] .list-footer { margin-top: 12px; } :root[data-design^="pro"] .pagination-button { border: 0; border-radius: 9px; background: var(--surface); } :root[data-design^="pro"] .pagination-button:hover:enabled { background: var(--surface-2); } :root[data-design^="pro"] .page-size select { border-radius: 9px; } :root[data-design^="pro"] .site-footer { font-size: 12px; } :root[data-design^="pro"] .empty-state { margin-top: 12px; border-radius: 16px; background: var(--surface); } /* Side window (all Pro designs): a white panel docked to the right edge. Top bar: previous and next on the left, close on the right (no "1 of 6"); once the header has scrolled away, the ticker and name fade in between them. Header: the ticker on black and the type, the name (32px), the one-line summary (18px), the buyer for mergers, and the SSI report as the one black button. Then the two key figures under a black rule, the latest update as a warm note with an orange edge, and the summary, details and sources as sections, each opened by a hairline and a 20px heading. Details and sources are rows divided by hairlines: label left and value right; source name and site left and an arrow box right. (:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) is an id selector, so sizes here outrank the one-size type rule further down.) */ /* .reader-showcase: parts of the side window drawn on the landing page ("Why SSI Trackers"), styled as the side window */ :root[data-design^="pro"] .workbench.reader-open { --pane-right: 24px; } /* Side window width: 44% of the window by default (500px to 700px); drag the handle on its left edge (or use the arrow keys on it), double-click resets it. A dragged width is remembered in this browser; the list always keeps 600px. */ :root[data-design^="pro"] .workbench { position: relative; --reader: min(var(--reader-user, clamp(500px, 44vw, 700px)), max(380px, calc(100% - 600px))); } :root[data-design^="pro"] .workbench.reader-open .reader-resizer { display: block; position: absolute; z-index: 6; top: 0; bottom: 0; right: calc(var(--reader) - 6px); width: 12px; cursor: col-resize; touch-action: none; outline: 0; } :root[data-design^="pro"] .reader-resizer::before { content: ""; position: absolute; top: 0; bottom: 0; left: 5px; width: 2px; background: #ff9900; opacity: 0; transition: opacity .15s; } :root[data-design^="pro"] .reader-resizer::after { content: ""; position: absolute; top: calc(50% - 22px); left: 3px; width: 6px; height: 44px; border-radius: 2px; background: #c4c5ca; box-shadow: 0 0 0 2px #ffffff; transition: background-color .15s; } :root[data-design^="pro"] .reader-resizer:is(:hover, :focus-visible)::before, :root[data-design^="pro"] .workbench.reader-resizing .reader-resizer::before { opacity: 1; } :root[data-design^="pro"] .reader-resizer:is(:hover, :focus-visible)::after, :root[data-design^="pro"] .workbench.reader-resizing .reader-resizer::after { background: #ff9900; } :root[data-design^="pro"] .workbench.reader-resizing { cursor: col-resize; user-select: none; -webkit-user-select: none; } :root[data-design^="pro"] .research-panel { margin: 0; border: 0; border-left: 1px solid var(--panel-edge); border-radius: 0; background: #ffffff; box-shadow: none; } :root[data-design^="pro"] .mobile-reader { background: #ffffff; } :root[data-design^="pro"] .icon-button { width: 32px; height: 32px; border: 0; border-radius: 9px; background: var(--surface); } :root[data-design^="pro"] .icon-button:hover:not(:disabled) { background: var(--surface-2); } :root[data-design^="pro"] .icon-button:disabled { color: var(--line-strong); } :root[data-design^="pro"] .reader-topbar { gap: 6px; height: 60px; padding: 0 16px 0 24px; border-bottom: 1px solid var(--panel-line); background: #ffffff; backdrop-filter: none; } :root[data-design^="pro"] .reader-count { display: none; } :root[data-design^="pro"] .reader-topbar .icon-button { flex: none; width: 36px; height: 36px; background: #f0f0f2; color: var(--ink); transition: background-color .15s, color .15s; } :root[data-design^="pro"] .reader-topbar .icon-button:hover:not(:disabled) { background: #e4e4e7; } :root[data-design^="pro"] .reader-topbar .icon-button:disabled { background: transparent; color: #c4c5ca; } :root[data-design^="pro"] .reader-topbar .icon-button:focus-visible { outline: 2px solid #ff9900; outline-offset: 2px; } :root[data-design^="pro"] .reader-topbar [data-reader-close] { order: 3; margin-left: auto; } @supports (animation-timeline: scroll()) { :root[data-design^="pro"] .reader-bar-title { order: 2; display: block; flex: 1 1 auto; min-width: 0; margin: 0 4px 0 14px; overflow: hidden; color: var(--ink); font-weight: 500; white-space: nowrap; text-overflow: ellipsis; opacity: 0; animation: pro-bar-title linear both; animation-timeline: scroll(nearest block); animation-range: 150px 200px; } :root[data-design^="pro"] .reader-bar-title b { margin-right: 10px; color: var(--ticker-text); font-weight: 600; letter-spacing: .05em; } } @keyframes pro-bar-title { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } :root[data-design^="pro"] .reader-content { padding: 32px 32px 48px; animation: pro-reader-in .28s var(--ease); } @keyframes pro-reader-in { from { opacity: 0; transform: translateY(6px); } } :root[data-design^="pro"] :is(.reader-head, .reader-title, .reader-company, .reader-dek, .reader-parties) { display: none; } :root[data-design^="pro"] .reader-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; } :root[data-design^="pro"] .reader-hero .reader-name { display: contents; } /* the ticker and the name sit in the header's grid */ :root[data-design^="pro"] .reader-hero > :not(.reader-name) { grid-column: 1 / -1; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-name .reader-ticker { flex: none; align-self: stretch; display: flex; align-items: center; margin: 0; padding: 0 16px 0 0; background: none; box-shadow: inset -1px 0 0 var(--strip-line); color: var(--ticker-text); font-size: 28px; font-weight: 600; line-height: 36px; letter-spacing: .03em; } :root[data-design^="pro"] .reader-name { display: flex; align-items: center; margin: 0; color: var(--ink); font-size: 28px; font-weight: 600; line-height: 36px; letter-spacing: -0.015em; overflow-wrap: anywhere; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-name .reader-co { grid-column: 2; grid-row: 1; min-width: 0; padding-left: 16px; font-size: 28px; line-height: 36px; text-wrap: balance; } /* Under the ticker and name, a hairline, then (mergers) "Buyer — name" and the one-line summary: one left edge, one size (17px), the label in the figures' grey, the buyer's name in black, the summary in dark grey. No boxes. */ :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-hero > .reader-name + :is(.reader-buyer, .reader-lede) { margin-top: 16px; padding-top: 14px; box-shadow: inset 0 1px 0 #ececef; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-buyer { margin: 0; color: #171717; font-size: 17px; font-weight: 500; line-height: 26px; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-buyer span { margin-right: 8px; color: var(--panel-label); font-weight: 400; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-buyer span::after { content: "\00a0—"; } /* "Buyer — name" */ :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-lede { margin: 8px 0 0; color: #45474d; font-size: 17px; font-weight: 400; line-height: 27px; text-wrap: pretty; } :root[data-design^="pro"] .reader-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-cta { gap: 10px; height: 44px; padding: 0 18px; border: 0; border-radius: 2px; background: #171717; box-shadow: none; color: #ffffff; font-size: 16px; font-weight: 600; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-cta svg { width: 15px; height: 15px; stroke: #ff9900; stroke-width: 2.2; transition: transform .15s var(--ease); } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-cta:hover { border: 0; background: #ff9900; color: #171717; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-cta:hover svg { stroke: #171717; transform: translate(1px, -1px); } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-cta:focus-visible { outline: 2px solid #ff9900; outline-offset: 2px; } /* Key figures: one grey panel split by hairlines, each figure a label above its value, and every cell in a row built the same way so labels and values line up across it. Top row: the two key figures at 24px (Return and Catalyst; Spread and Expected close for mergers). Second row: the cards' other figures at 17px (Pro designs only). A six-column grid: two figures a row split it in halves; the mergers' rows of two and three share their dividers (Spread over Market cap, Expected close over Consideration and Deal type). */ :root[data-design^="pro"] .reader-metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; margin: 28px 0 0; padding: 0; border: 0; border-radius: 4px; background: #e5e5e9; overflow: hidden; } :root[data-design^="pro"] .reader-metrics::after { display: none; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics div, :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics div + div { grid-column: span 3; display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; min-width: 0; min-height: 0; padding: 18px 20px 20px; border: 0; border-radius: 0; background: #f6f6f7; box-shadow: none; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics .fig-more { gap: 4px; padding: 14px 20px 16px; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics:has(> div:nth-child(5)) > div { grid-column: span 2; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics:has(> div:nth-child(5)) > div:nth-child(2) { grid-column: span 4; } /* mergers with a buyer: three to a row (Spread, Expected close, Buyer, then Market cap, Consideration, Deal type), the buyer's name on one line, cut short with an ellipsis when it does not fit */ /* the buyer: its own row under the figures, the full width, so the whole name fits (on two lines if it must) */ :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics > div.fig-buyer.fig-buyer { order: 1; grid-column: 1 / -1; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics .fig-buyer .text-value { display: block; font-size: 17px; line-height: 24px; letter-spacing: 0; white-space: normal; overflow-wrap: break-word; } /* Figures always fit: values wrap only between words (a single word breaks only if it is wider than the whole row), and app.mjs lays the rows out again when a label or value would not fit its columns (fit-1 to fit-6 are a cell's columns, fit-at-N its place); fig-measure is its brief measuring pass, at each part's one-line width */ :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics :is(dd, dd *) { overflow-wrap: break-word; word-break: normal; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.fig-measure > div:not(.fig-buyer) > :is(dt, dd) { width: max-content !important; max-width: none !important; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.fitted > div.fit-1.fit-1 { grid-column: span 1; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.fitted > div.fit-2.fit-2 { grid-column: span 2; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.fitted > div.fit-3.fit-3 { grid-column: span 3; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.fitted > div.fit-4.fit-4 { grid-column: span 4; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.fitted > div.fit-5.fit-5 { grid-column: span 5; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.fitted > div.fit-6.fit-6 { grid-column: 1 / -1; } /* the order of the cells in the fitted rows */ :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.fitted > div.fig-buyer.fig-buyer { order: 99; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.fitted > div.fit-at-0.fit-at-0 { order: 0; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.fitted > div.fit-at-1.fit-at-1 { order: 1; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.fitted > div.fit-at-2.fit-at-2 { order: 2; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.fitted > div.fit-at-3.fit-at-3 { order: 3; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.fitted > div.fit-at-4.fit-at-4 { order: 4; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.fitted > div.fit-at-5.fit-at-5 { order: 5; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.fitted > div.fit-at-6.fit-at-6 { order: 6; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.fitted > div.fit-at-7.fit-at-7 { order: 7; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.fitted > div.fit-at-8.fit-at-8 { order: 8; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.fitted > div.fit-at-9.fit-at-9 { order: 9; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.fitted > div.fit-at-10.fit-at-10 { order: 10; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.fitted > div.fit-at-11.fit-at-11 { order: 11; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.fitted > div.fit-at-12.fit-at-12 { order: 12; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.fitted > div.fit-at-13.fit-at-13 { order: 13; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.fitted > div.fit-at-14.fit-at-14 { order: 14; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.fitted > div.fit-at-15.fit-at-15 { order: 15; } /* a narrow side window or a phone: the mergers' second row takes Market cap and Consideration under the top row's divider, and Deal type gets a row of its own */ :root[data-design^="pro"] .reader-content { container: reader / inline-size; } @container reader (max-width: 440px) { :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics:has(> div:nth-child(5)) > div:nth-child(4) { grid-column: span 4; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics:has(> div:nth-child(5)) > div:nth-child(5) { grid-column: 1 / -1; } /* with a buyer: Spread and Expected close, the buyer across a row of its own, then Market cap and Consideration, and Deal type, as without one */ :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics:has(> div.fig-buyer) > div:nth-child(2) { grid-column: span 4; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics:has(> div.fig-buyer) > div:nth-child(3) { grid-column: 1 / -1; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics:has(> div.fig-buyer) > div:nth-child(4) { grid-column: span 2; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics:has(> div.fig-buyer) > div:nth-child(5) { grid-column: span 4; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics:has(> div.fig-buyer) > div:nth-child(6) { grid-column: 1 / -1; } } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics dt, :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics div + div dt { display: flex; align-items: center; margin: 0; color: var(--panel-label); font-size: 14px; line-height: 20px; white-space: nowrap; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics dd, :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics div + div dd { display: block; min-height: 0; margin: 0; text-align: left; } :root[data-design^="pro"] .reader-metrics .dt-long { display: none; } /* the short labels, with the long name on hover, as in the cards */ :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics .cell-hint { font-size: 14px; line-height: 20px; } :root[data-design^="pro"] .reader-metrics .cell-label { display: inline; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics .cell-label-info { padding: 0; border: 0; background: none; color: var(--panel-label); font: inherit; font-size: 14px; line-height: 20px; text-decoration: none; cursor: help; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics .cell-label-info:is(:hover, [aria-expanded=true]) { color: var(--ink); } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics .cell-label-info:focus-visible { outline: 2px solid #ff9900; outline-offset: 2px; } :root[data-design^="pro"] .reader-metrics .cell-label-info::after { content: "i"; display: inline-grid; place-items: center; width: 14px; height: 14px; margin-left: 7px; border-radius: 2px; box-shadow: inset 0 0 0 1px currentColor; font-size: 10px; font-weight: 700; line-height: 1; vertical-align: 1px; opacity: .8; } /* values: one size a row, semibold, figures in even widths */ :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics :is(.figure, .small-value, .meter-word, .num-value, .text-value, .tag, .missing-value) { display: inline; height: auto; padding: 0; background: none; color: var(--ink); font-size: 24px; font-weight: 600; line-height: 30px; letter-spacing: -0.015em; text-transform: none; font-variant-numeric: tabular-nums; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics .fig-more :is(.num-value, .text-value, .tag, .missing-value) { font-size: 17px; line-height: 24px; letter-spacing: 0; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics .figure.pos { color: var(--return-up); } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics .figure.neg { color: var(--return-down); } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics .tag::before { display: none; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics .missing-value { color: var(--muted); } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics .meter-with-word { display: inline-flex; align-items: center; gap: 10px; min-height: 30px; } /* Updates: brief bullets on a warm panel, joined by a thin line like a timeline, each with a small orange square. A date written at the start of a bullet sits above it as a label. Replaces the Original's "Latest update" box. */ :root[data-design^="pro"] .reader-update { display: none; } :root[data-design^="pro"] .reader-updates { display: block; margin: 24px 0 0; padding: 18px 22px 20px; border-radius: 4px; background: #fdf7ee; box-shadow: inset 0 0 0 1px #f4e6cf; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-updates-title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--ink); font-size: 17px; font-weight: 600; line-height: 24px; letter-spacing: -0.01em; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-updates-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ff9900; box-shadow: 0 0 0 4px rgba(255,153,0,.18); } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-updates-list { margin: 0; padding: 0; list-style: none; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-updates-list li { position: relative; margin: 0; padding: 0 0 14px 24px; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-updates-list li:last-child { padding-bottom: 0; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-updates-list li::before { content: ""; position: absolute; top: 9px; left: 1px; width: 7px; height: 7px; border-radius: 1px; background: #ff9900; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-updates-list li:has(time)::before { top: 6px; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-updates-list li:not(:last-child)::after { content: ""; position: absolute; top: 22px; bottom: 2px; left: 4px; width: 1px; background: #ecd6b3; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-updates-list li:has(time):not(:last-child)::after { top: 19px; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-updates-list time { display: block; margin-bottom: 2px; color: var(--orange-ink); font-size: 13px; font-weight: 600; line-height: 18px; letter-spacing: .02em; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-updates-list p { margin: 0; color: var(--summary-ink); font-size: 15px; line-height: 24px; text-wrap: pretty; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-updates-empty { margin: 0; color: var(--muted); font-size: 15px; line-height: 24px; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-section { display: block; margin: 32px 0 12px; padding-top: 24px; border-top: 1px solid var(--panel-line); color: var(--ink); font-size: 20px; font-weight: 600; line-height: 26px; letter-spacing: -0.015em; white-space: normal; } :root[data-design^="pro"] .reader-section::before, :root[data-design^="pro"] .reader-section::after { display: none; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .summary-prose p { margin: 0 0 16px; color: var(--summary-ink); font-size: 16px; line-height: 27px; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .summary-prose p:last-child { margin-bottom: 0; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-facts { padding: 0; border: 0; border-radius: 0; } :root[data-design^="pro"] .reader-facts-default, :root[data-design^="pro"] .reader-section .sec-default { display: none; } :root[data-design^="pro"] .reader-section .sec-pro { display: inline; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-section > span { font-size: inherit; font-weight: inherit; line-height: inherit; } /* "Further Research" at the same size as the other headings */ /* strategic reviews: the shorter list (Announced, Review Focus, Market Cap) */ :root[data-design^="pro"] .reader-facts-pro { display: block; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-facts div { grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: 20px; padding: 8px 0; border-bottom: 1px solid var(--panel-line); line-height: 24px; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-facts div:first-child { padding-top: 0; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-facts div:last-child { padding-bottom: 0; border-bottom: 0; } :root[data-design^="pro"] .reader-facts dt { color: var(--panel-label); text-transform: none; } /* sentence case, as the figures above */ :root[data-design^="pro"] .reader-facts dd { color: var(--ink); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; } :root[data-design^="pro"] .source-links { gap: 0; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .source-links a { display: grid; grid-template-columns: minmax(0, 1fr) 36px; align-items: center; gap: 16px; padding: 14px 0; border: 0; border-bottom: 1px solid var(--panel-line); border-radius: 0; background: none; color: var(--ink); font-size: 16px; font-weight: 600; line-height: 22px; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .source-links a:not(.source-main):first-child { padding-top: 0; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .source-links a:last-child { padding-bottom: 0; border-bottom: 0; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .source-links .source-domain { margin-top: 2px; color: var(--panel-label); font-size: 14px; font-weight: 400; line-height: 20px; } :root[data-design^="pro"] .source-links a svg { box-sizing: border-box; width: 36px; height: 36px; padding: 11px; border-radius: 2px; background: #f0f0f2; stroke: var(--ink); stroke-width: 2; transition: background-color .15s, stroke .15s; } :root[data-design^="pro"] .source-links a:hover { background: none; color: var(--ink); } :root[data-design^="pro"] .source-links a:hover svg { background: #ff9900; stroke: #171717; } :root[data-design^="pro"] .source-links a:focus-visible { outline: 2px solid #ff9900; outline-offset: 4px; } /* The SSI report: a black tile with the name in orange and an orange arrow box, the strongest thing in the panel */ :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .source-links .source-main { grid-template-columns: minmax(0, 1fr) 40px; min-height: 84px; margin-bottom: 8px; padding: 18px 20px 18px 24px; border: 0; border-radius: 2px; background: #171717; color: #ff9900; font-size: 18px; line-height: 24px; transition: background-color .15s; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .source-links .source-main:last-child { margin-bottom: 0; padding-bottom: 18px; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .source-links .source-main > span { font-size: 18px; font-weight: 600; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .source-links .source-main .source-domain { margin-top: 4px; color: #a5a7ad; font-size: 14px; } :root[data-design^="pro"] .source-links .source-main svg { width: 40px; height: 40px; padding: 12px; background: #ff9900; stroke: #171717; stroke-width: 2.2; } :root[data-design^="pro"] .source-links .source-main:hover { background: #26262a; color: #ff9900; } :root[data-design^="pro"] .source-links .source-main:hover svg { background: #ffb13d; stroke: #171717; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-provenance { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--panel-line); color: var(--panel-label); font-size: 14px; line-height: 22px; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .local-link-button { display: block; width: fit-content; margin-top: 12px; color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: underline; text-decoration-color: #c4c5ca; text-underline-offset: 4px; } :root[data-design^="pro"] .local-link-button:hover { color: var(--orange-ink); text-decoration-color: currentColor; } @media (max-width: 839px) { /* Phones: the same side window as a full-screen sheet */ :root[data-design^="pro"] .mobile-reader .reader-topbar { height: 56px; padding: 0 12px 0 16px; } :root[data-design^="pro"] .mobile-reader .reader-content { padding: 24px 20px 40px; } } :root[data-design^="pro"] .tracker-menu:not([hidden]), :root[data-design^="pro"] .design-menu:not([hidden]), :root[data-design^="pro"] .catalyst-popover:not([hidden]) { animation: pro-pop .16s var(--ease); transform-origin: top; } @keyframes pro-pop { from { opacity: 0; transform: translateY(-4px) scale(.985); } } :root[data-design^="pro"] :is(.chip, .report-button, .icon-button, .tracker-trigger, .account-link, .browse-trackers, .primary-button, .pagination-button):active:not(:disabled) { transform: scale(.97); } :root[data-design^="pro"] .list-pane, :root[data-design^="pro"] .research-panel { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } /* Home, About and Account pages */ :root[data-design^="pro"] .page-eyebrow { font-size: 13px; font-weight: 600; } :root[data-design^="pro"] .content-page h1 { font-weight: 600; letter-spacing: -0.03em; } :root[data-design^="pro"] .browse-trackers, :root[data-design^="pro"] .primary-button { height: 44px; border-radius: 11px; background: var(--primary-bg); color: var(--primary-ink); } :root[data-design^="pro"] .browse-trackers:hover, :root[data-design^="pro"] .primary-button:hover { background: var(--primary-hover); } :root[data-design^="pro"] .signup-panel, :root[data-design^="pro"] .signin-card { border-color: var(--line); border-radius: 18px; background: var(--paper); box-shadow: var(--panel-shadow); } :root[data-design^="pro"] .signup-marker { width: 18px; height: 3px; border-radius: 2px; } :root[data-design^="pro"] .signup-input-row input, :root[data-design^="pro"] #account-form input { border-color: var(--line-strong); border-radius: 11px; background: var(--paper); } :root[data-design^="pro"] .signup-input-row button { border-radius: 11px; } :root[data-design^="pro"] .google-signin { border-color: var(--line-strong); border-radius: 11px; background: var(--paper); } :root[data-design^="pro"] .preview-badge { border-radius: 99px; } :root[data-design^="pro"] .profile-avatar { border-radius: 12px; background: #000; color: var(--orange); } :root[data-design^="pro"] dialog:not(.mobile-reader) { border-radius: 18px; } /* Canvas: the page behind the cards */ :root[data-design^="pro"] .workbench, :root[data-design^="pro"] .list-pane, :root[data-design^="pro"] .site-footer { background: var(--canvas); } :root[data-design^="pro"] .situation-table { position: relative; z-index: 1; } :root[data-design^="pro"] .tracker-head h1 { color: var(--band-ink); } :root[data-design^="pro"] .tracker-heading p { color: var(--band-muted); } :root[data-design^="pro"] .tracker-count small { color: var(--band-muted); } :root[data-design^="pro"] .tracker-count small::before { box-shadow: 0 0 0 3px rgba(247,147,30,.22); } :root[data-design^="pro"] .search-control { border-color: var(--band-line); background: var(--band-surface); color: var(--band-muted); } :root[data-design^="pro"] .search-control input { color: var(--band-ink); } :root[data-design^="pro"] .search-control input::placeholder { color: var(--band-placeholder); } :root[data-design^="pro"] .search-control::after { background: var(--band); box-shadow: inset 0 0 0 1px var(--band-line); color: var(--band-muted); } :root[data-design^="pro"] .search-control:focus-within { border-color: var(--band-focus-line); background: var(--band-surface); box-shadow: 0 0 0 4px var(--band-focus-ring); } :root[data-design^="pro"] .filter-chips { background: var(--band-surface); box-shadow: inset 0 0 0 1px var(--band-line); } :root[data-design^="pro"] .chip { color: var(--band-chip-ink); } :root[data-design^="pro"] .chip span { color: var(--band-chip-count); } :root[data-design^="pro"] .chip:hover { background: var(--band-surface-2); color: var(--band-chip-hover); } :root[data-design^="pro"] .chip[aria-pressed=true] { background: var(--band-chip-on-bg); color: var(--band-chip-on-ink); box-shadow: var(--band-chip-on-shadow); } :root[data-design^="pro"] .chip[aria-pressed=true] span { color: var(--band-chip-on-count); } /* Filter tags: each option is its own bordered tag with space between, like the website's buttons; the chosen one is black */ :root[data-design^="pro"] .filter-chips { gap: 8px; padding: 0; background: none; box-shadow: none; } :root[data-design^="pro"] .chip { height: 36px; padding: 0 14px; background: var(--chip-bg); box-shadow: inset 0 0 0 1px var(--chip-line, #cdcdd1); color: var(--ink-2); } :root[data-design^="pro"] .chip:hover { background: var(--chip-bg); box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); } :root[data-design^="pro"] .chip[aria-pressed=true], :root[data-design^="pro"] .chip[aria-pressed=true]:hover { background: var(--chip-on-bg); box-shadow: inset 0 0 0 1px var(--chip-on-bg); color: var(--chip-on-ink); } :root[data-design^="pro"] .clear-button { color: var(--band-muted); } :root[data-design^="pro"] .clear-button:hover { color: var(--band-ink); } :root[data-design^="pro"] .list-footer, :root[data-design^="pro"] .workspace-footer { position: relative; z-index: 1; } :root[data-design^="pro"] .research-panel { position: relative; z-index: 2; box-shadow: -18px 0 40px -28px rgba(13,13,14,.45); } /* Home uses the header colours (grey in light, black in dark); About and Account sit on the grey canvas */ :root[data-design^="pro"] .content-page { background: var(--canvas); } :root[data-design^="pro"] .home-page { background: var(--band); color: var(--band-ink); } :root[data-design^="pro"] .home-page h1 { color: var(--band-ink); } :root[data-design^="pro"] .home-page .page-eyebrow { color: var(--home-eyebrow); } :root[data-design^="pro"] .home-page .page-lead { color: var(--band-muted); } :root[data-design^="pro"] .home-page .browse-trackers { background: var(--home-cta-bg); color: var(--home-cta-ink); } :root[data-design^="pro"] .home-page .browse-trackers:hover { background: var(--home-cta-hover); } :root[data-design^="pro"] .home-page .signup-panel { border-color: var(--band-line); background: var(--band-surface); box-shadow: var(--home-card-shadow); color: var(--band-ink); } :root[data-design^="pro"] .home-page .signup-panel h2 { color: var(--band-ink); } :root[data-design^="pro"] .home-page .signup-panel > p, :root[data-design^="pro"] .home-page .signup-panel label, :root[data-design^="pro"] .home-page .signup-note, :root[data-design^="pro"] .home-page .signup-success p { color: var(--band-muted); } :root[data-design^="pro"] .home-page .signup-input-row input { border-color: var(--band-line); background: var(--band); color: var(--band-ink); } :root[data-design^="pro"] .home-page .signup-success strong { color: var(--band-ink); } :root[data-design^="pro"] .home-page .signup-success button { color: var(--band-muted); } :root[data-design^="pro"] body:has(#home-page:not([hidden])) .site-footer { border-top-color: var(--band-line); background: var(--band); color: var(--band-muted); } /* Page header layout. The header's parts flow in the list pane as one wrapping row set: title and situation count on the first line; filters and search on the second, directly above the table. When the filters and search do not fit side by side, the search drops below, still right-aligned. Everything else takes a full line. */ :root[data-design^="pro"] .list-pane { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; column-gap: 24px; padding: 40px var(--pane-right) 24px var(--page-gutter); } :root[data-design^="pro"] .list-pane > * { flex: 0 0 100%; min-width: 0; order: 10; } :root[data-design^="pro"] .list-pane::before { content: ""; flex: 0 0 100%; order: 3; height: 18px; } :root[data-design^="pro"] .tracker-head, :root[data-design^="pro"] .list-pane .toolbar { display: contents; } :root[data-design^="pro"] .list-pane .tracker-heading { order: 1; flex: 1 1 auto; min-width: 0; } :root[data-design^="pro"] .list-pane .filter-chips { order: 4; flex: 0 1 auto; margin-top: 12px; } :root[data-design^="pro"] .list-pane .clear-button { order: 5; flex: none; margin-top: 12px; } :root[data-design^="pro"] .tracker-head .search-control { flex: none; width: 360px; min-width: 0; height: 40px; margin: 0; } :root[data-design^="pro"] .reader-open .tracker-head .search-control { width: 316px; } :root[data-design^="pro"] .list-pane .situation-table { margin-top: 20px; } /* Situation count: right-aligned at the top, across from the title */ :root[data-design^="pro"] .tracker-head .tracker-count { order: 2; flex: 0 0 auto; display: grid; justify-items: end; gap: 6px; margin: 0; padding: 0; border: 0; text-align: right; white-space: nowrap; } :root[data-design^="pro"] .tracker-count .tracker-count-line { display: flex; align-items: baseline; gap: 7px; height: auto; padding: 0; background: none; box-shadow: none; } :root[data-design^="pro"] .tracker-count .tracker-count-line b { color: var(--ink); font-size: 30px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; } :root[data-design^="pro"] .tracker-count .tracker-count-line span { color: var(--muted); font-size: 14px; font-weight: 500; } :root[data-design^="pro"] .tracker-count small { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--muted); font-size: 12.5px; } /* Situation-type icons: in the page header and the Trackers menu. Open glyphs with no tile: ink lines with one orange accent (the combined company, or the alternative in focus). */ :root[data-design^="pro"] .tracker-mark, :root[data-design^="pro"] .tracker-option-icon { display: grid; place-items: center; background: none; box-shadow: none; color: var(--ink); } :root[data-design^="pro"] .tracker-mark { grid-column: 1; grid-row: 1 / span 2; width: 48px; height: 48px; } :root[data-design^="pro"] .type-icon { width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: square; stroke-linejoin: miter; overflow: visible; } /* crisp, square-cut line icons */ :root[data-design^="pro"] .type-icon .ti-accent-line { stroke: var(--orange); } :root[data-design^="pro"] .type-icon .ti-thick { stroke-width: 3.25; } :root[data-design^="pro"] .type-icon .ti-solid { fill: currentColor; stroke: none; } :root[data-design^="pro"] .type-icon .ti-accent { fill: var(--orange); stroke: none; } :root[data-design^="pro"] .tracker-option { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 14px; } :root[data-design^="pro"] .tracker-option-icon { width: 36px; height: 36px; } :root[data-design^="pro"] .tracker-option-icon .type-icon { width: 34px; height: 34px; } /* Hovering a situation turns its ticker badge orange */ /* Hovering a card (or tabbing to it): an empty orange square, drawn like the box of the SSI logo, appears around the ticker and takes the place of the divider. It is painted around the text, so nothing moves. The situation that is open in the side window keeps its square. */ :root[data-design^="pro"] .situation .c-sit .ticker-button { position: relative; isolation: isolate; transition: color .2s var(--ease), box-shadow .2s var(--ease); } :root[data-design^="pro"] .situation .c-sit .ticker-button::before { content: ""; position: absolute; z-index: -1; top: 0; right: 6px; bottom: 0; left: -8px; border: 2px solid #ff9900; border-radius: 0; background: none; opacity: 0; transform: scale(.9); transition: opacity .2s var(--ease), transform .2s var(--ease); } /* The orange square around the ticker shows on hover and keyboard focus only: the selected card keeps the same ticker and name as the others (its orange edge and warm tint mark it) */ :root[data-design^="pro"] :is(.situation:hover, .situation:has(.ticker-button:focus-visible)) .c-sit .ticker-button { background: none; color: #ff9900; box-shadow: inset -1px 0 0 transparent; } :root[data-design^="pro"] :is(.situation:hover, .situation:has(.ticker-button:focus-visible)) .c-sit .ticker-button::before { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { :root[data-design^="pro"] .situation .c-sit :is(.ticker-button, .ticker-button::before) { transition: none; } } /* Pro · Light backgrounds, picked in the Design menu: white (default), a dot grid on white, or plain grey */ :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"])[data-canvas="dots"] { --canvas-layers: radial-gradient(rgba(13,13,14,.09) 1px, rgba(13,13,14,0) 1.5px) 0 0 / 20px 20px; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"])[data-canvas="plain"] { --canvas: #f1f1f1; --row: #ffffff; --row-hover: #ffffff; --row-selected: #fffaf3; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) :is(.list-pane, .content-page) { background: var(--canvas-layers, none), var(--canvas); } :root[data-design^="pro"] .canvas-option { border-radius: 8px; } :root[data-design^="pro"] .canvas-option:hover, :root[data-design^="pro"] .canvas-option:focus-visible { background: var(--surface); } /* Responsive: restate the base breakpoints wherever this file changed the same property */ @media (max-width: 1199px) { :root[data-design^="pro"] .grid, :root[data-design^="pro"] .workbench[data-tracker="strategic-review"] .grid { grid-template-columns: minmax(0, 1fr) 272px; column-gap: 36px; } :root[data-design^="pro"] .tracker-head .search-control { width: 316px; } :root[data-design^="pro"] .search-control::after { display: none; } } @media (max-width: 839px) { :root[data-design^="pro"] .workbench { --pane-right: var(--page-gutter); } /* Phones: the figures panel full width under the name, then the summary and the report button */ :root[data-design^="pro"] .grid, :root[data-design^="pro"] .workbench[data-tracker="strategic-review"] .grid, :root[data-design^="pro"] .reader-open .grid, :root[data-design^="pro"] .workbench[data-tracker="strategic-review"].reader-open .grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "sit" "m2" "m1" "m3" "tag" "sum" "rep"; column-gap: 0; row-gap: 0; } :root[data-design^="pro"] .reader-open .situation .c-tag { display: flex; } :root[data-design^="pro"] .c-rep .report-button { width: auto; } :root[data-design^="pro"] .summary :is(.full p, .preview) { text-align: left; } /* justified lines get gappy at phone width */ :root[data-design^="pro"] .c-sit { padding-right: 0; } :root[data-design^="pro"] .situation .c-sit { margin-bottom: 14px; } :root[data-design^="pro"] .situation .c-sum, :root[data-design^="pro"] .reader-open .situation .c-sum { margin-top: 18px; padding-left: 0; } :root[data-design^="pro"] .c-rep { flex-direction: row; justify-content: flex-start; align-items: center; } :root[data-design^="pro"] .site-header { gap: 0; padding: 0 16px; } :root[data-design^="pro"] .tracker-head h1 { font-size: 23px; } :root[data-design^="pro"] .list-pane { padding-top: 26px; } :root[data-design^="pro"] .list-pane::before { display: none; } :root[data-design^="pro"] .list-pane .tracker-heading { flex-basis: 100%; } /* the count and date: one quiet line under the description, lined up with the title text (after the icon), every part on the same baseline and at the same size: "6 situations · As of 4 Oct 2026" */ :root[data-design^="pro"] .tracker-head .tracker-count { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin-top: 10px; padding-left: 66px; justify-items: start; text-align: left; } :root[data-design^="pro"] .tracker-count .tracker-count-line { gap: 5px; } :root[data-design^="pro"] body #results-total { color: var(--ink); font-size: 16px; font-weight: 600; line-height: 22px; letter-spacing: 0; } :root[data-design^="pro"] body .tracker-count :is(#results-noun, small) { color: var(--muted); font-size: 15px; font-weight: 400; line-height: 22px; } :root[data-design^="pro"] .tracker-count small { align-items: baseline; } /* the date's own baseline, not the dot's, lines up with "6 situations" */ :root[data-design^="pro"] .tracker-count small::before { align-self: center; width: 5px; height: 5px; box-shadow: none; } /* Phones: search full width, the sort button under it, then the filter tags */ :root[data-design^="pro"] .list-tools { order: 3; flex: 0 0 100%; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; } :root[data-design^="pro"] .tracker-head .search-control, :root[data-design^="pro"] .reader-open .tracker-head .search-control { order: -1; flex: 0 0 100%; width: 100%; height: 42px; margin: 0; } :root[data-design^="pro"] .sort-menu { right: auto; left: 0; } :root[data-design^="pro"] .list-pane .filter-chips { flex-basis: 100%; margin-top: 14px; } :root[data-design^="pro"] .list-pane .situation-table { margin-top: 12px; } :root[data-design^="pro"] .situation { padding: 16px; } :root[data-design^="pro"] .list-head { display: none; } :root[data-design^="pro"] .filter-chips { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; } } @media (max-width: 560px) { :root[data-design^="pro"] .tracker-menu { top: calc(100% + 2px); } :root[data-design^="pro"] .design-menu { top: 62px; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-name :is(.reader-ticker, .reader-co) { font-size: 24px; line-height: 32px; } :root[data-design^="pro"] .reader-name { font-size: 24px; line-height: 32px; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics :is(.figure, .small-value, .meter-word, .num-value, .text-value, .tag, .missing-value) { font-size: 21px; line-height: 28px; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics .fig-more :is(.num-value, .text-value, .tag, .missing-value) { font-size: 16px; line-height: 22px; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics :is(div, div + div, .fig-more) { padding-right: 16px; padding-left: 16px; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-buyer { font-size: 16px; line-height: 24px; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-lede { font-size: 16px; line-height: 25px; } :root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-hero > .reader-name + :is(.reader-buyer, .reader-lede) { margin-top: 14px; padding-top: 12px; } } /* Corners: square-cut. Controls get a 2px radius, panels 4px; only status dots stay round. (#page-size in each list lifts the rule above the component rules earlier in this file.) */ :root[data-design^="pro"] body :is(#page-size, button, input, select, .account-link, .about-button, .report-button, .tracker-option, .design-option, .canvas-swatch, .design-swatch, .search-control, .filter-chips, .chip, .ticker-button, .reader-title, .pill, .tag, .preview-badge, .profile-avatar, .icon-button, .info-button, .tracker-mark, .tracker-option-icon):where(:not(.lp, .lp :not(.reader-showcase, .reader-showcase *), .trk-switch, .trk-switch *, .trk-soon, .trk-soon *)) { border-radius: 2px; } :root[data-design^="pro"] body .search-control::after { border-radius: 2px; } :root[data-design^="pro"] body :is(#page-size, .situation, .list-head, .tracker-menu, .design-menu, .catalyst-popover, .reader-metrics div, .reader-facts, .reader-update, .source-main, .signin-card, .signup-panel, .empty-state):where(:not(.lp, .lp :not(.reader-showcase, .reader-showcase *), .trk-switch, .trk-switch *, .trk-soon, .trk-soon *)) { border-radius: 4px; } :root[data-design^="pro"] body #page-size { border-radius: 2px; } /* Type: Poppins at one size, 16px, for all text. Only the page and section headings, company names (20px in the rows), the large figures and the situation count are bigger. */ :root[data-design^="pro"] body :not(h1, h1 *, h2, h2 *, .company, .reader-company, .reader-company *, .figure, .figure *, #results-total, svg, svg *):where(:not(.lp, .lp :not(.reader-showcase, .reader-showcase *), .trk-switch, .trk-switch *, .trk-soon, .trk-soon *)) { font-size: 16px; } @media (prefers-reduced-motion: reduce) { :root[data-design^="pro"] .reader-content, :root[data-design^="pro"] .tracker-menu, :root[data-design^="pro"] .design-menu, :root[data-design^="pro"] .catalyst-popover { animation: none !important; } } /* ============================================================================================================ PRO · LIGHT and PRO · LIGHT 2. Pro · Dark keeps the rules above unchanged. ============================================================================================================ */ /* Shared by both light designs: figures as label-value rows divided by hairlines (the main figure first, its value a little larger and in colour), the SSI report button on white, and the Return and Catalyst labels marked with a small square "i". */ :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) { --rail-bg: #eeeef0; --rail-bg-hover: #f4f4f6; --rail-line: rgba(13,13,14,.09); } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .situation :is(.m1, .m2, .m3, .c-tag) { padding: 0; border-radius: 0; background: none; box-shadow: none; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .reader-open .situation .m3 { border-radius: 0; box-shadow: none; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .situation :is(.m1, .m2, .m3, .c-tag) { min-height: 46px; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .situation :is(.m1, .m3, .c-tag)::before { right: 0; left: 0; background: var(--rail-line); } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .situation .m2 { flex-direction: row; align-items: center; gap: 8px; margin-top: -8px; padding: 0; } /* first row: level with the company name */ :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .situation .m2 > .cell-label { margin-right: auto; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body #situation-list .situation .m2 > .pill { font-size: 20px; font-weight: 600; line-height: 28px; letter-spacing: -0.01em; text-align: right; } /* "Return": the long name ("Return since announcement") shows on hover or focus */ :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .situation .m2:has(.cell-hint) > .cell-label { display: none; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) :is(.situation, .reader-metrics) .cell-hint { position: relative; display: inline-flex; align-items: center; margin-right: auto; color: var(--panel-label); line-height: 24px; white-space: nowrap; cursor: help; outline: 0; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) :is(.situation, .reader-metrics) .hint-i { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-left: 7px; border-radius: 2px; box-shadow: inset 0 0 0 1px currentColor; opacity: .8; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) :is(.situation, .reader-metrics) .hint-i::before { content: "i"; font-size: 10px; font-weight: 700; line-height: 1; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) :is(.situation, .reader-metrics) .cell-hint:is(:hover, :focus-visible) { color: var(--ink); } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) :is(.situation, .reader-metrics) .cell-hint:focus-visible { outline: 2px solid #ff9900; outline-offset: 2px; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) :is(.situation, .reader-metrics) .cell-hint:is(:hover, :focus-visible)::after { content: attr(data-tip); position: absolute; z-index: 20; top: calc(100% + 6px); left: -10px; padding: 6px 10px; border-radius: 2px; background: #171717; box-shadow: 0 8px 20px -10px rgba(0,0,0,.5); color: #ffffff; font-size: 14px; font-weight: 400; line-height: 20px; text-transform: none; white-space: nowrap; pointer-events: none; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .situation .c-rep { margin-top: 18px; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .c-rep .report-button { background: #ffffff; box-shadow: inset 0 0 0 1px var(--rail-line); } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .c-rep .report-button:hover { background: var(--report-bg-hover); box-shadow: inset 0 0 0 1px var(--report-bg-hover); } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .situation .cell-label-info { color: var(--panel-label); text-decoration: none; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .situation .cell-label-info::after { content: "i"; display: inline-grid; place-items: center; width: 14px; height: 14px; margin-left: 7px; border-radius: 2px; box-shadow: inset 0 0 0 1px currentColor; font-size: 10px; font-weight: 700; line-height: 1; vertical-align: 2px; opacity: .8; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .situation .cell-label-info:hover, :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .situation .cell-label-info[aria-expanded=true] { color: var(--ink); } /* Phones: the figures sit in a tinted block under the name */ @media (max-width: 839px) { :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .situation::after { display: none; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .situation :is(.m1, .m2, .m3, .c-tag) { padding: 0 16px; background: var(--rail-bg); } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .situation .m2 { margin-top: 18px; padding: 0 16px; border-radius: 4px 4px 0 0; } /* the text first (ticker, name, headline, summary), then the figures, then the report button */ :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .grid, :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench[data-tracker="strategic-review"] .grid, :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .reader-open .grid, :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench[data-tracker="strategic-review"].reader-open .grid { grid-template-areas: "sit" "sum" "m2" "m1" "m3" "tag" "rep"; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .situation .c-sit { margin-bottom: 0; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .situation .c-sum, :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .reader-open .situation .c-sum { margin-top: 12px; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .situation .c-tag { border-radius: 0 0 4px 4px; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .situation :is(.m1, .m3, .c-tag)::before { right: 16px; left: 16px; } } /* The light designs' wording for tracker descriptions (Strategic Reviews) */ :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .desc-default { display: none; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .desc-light { display: inline; } /* Positive spreads are green, like positive returns (negative ones stay red); also in the side window */ :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .reader-metrics .figure.pos { color: var(--return-up); } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench[data-tracker="mna"] .situation .m2 > .pill.pos { color: var(--return-up); } /* Labels in title case, as in the column headings: Market Cap, Review Focus, Deal Type */ :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .situation :is(.cell-label, .cell-hint), :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) :is(.sort-tag, .filter-toggle) { text-transform: capitalize; } /* Type in the cards: ticker and company name at the same size (22px) */ :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .situation .c-sit .company { font-size: 22px; line-height: 30px; letter-spacing: -0.01em; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body #situation-list .situation .c-sit .ticker-button { font-size: 22px; line-height: 30px; letter-spacing: .03em; } /* Side window open: the cards' ticker and name (19px) and headline (17px) a step smaller */ :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .reader-open .situation .c-sit .company { min-height: 26px; font-size: 19px; line-height: 26px; } /* the narrowest phones: a long word in a company name (Technologies, Pharmaceuticals) still fits its column */ @media (max-width: 359px) { :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .situation .c-sit .company { font-size: 18px; line-height: 25px; overflow-wrap: break-word; } } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body .reader-open #situation-list .situation .c-sit .ticker-button { min-height: 26px; font-size: 19px; line-height: 26px; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body .reader-open #situation-list .situation .summary .lead { font-size: 17px; line-height: 25px; } /* Controls above the list: one quiet row. "Sort by" and its tags; then one button for the type filter (Review Focus, or Deal Type for mergers) that shows the current choice and opens the type tags in a second row; then the search box at the right. Every control shares one height (38px), one grey surface, square corners and the same type; hover darkens the grey. Chosen items are black: the sort with an orange arrow, a type with an orange count, and the type button turns black (its value orange) while a type is chosen. */ :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) { --control-bg: #f0f0f2; --control-bg-hover: #e6e6e9; --control-ink: #2a2b2f; --control-muted: #8a8c93; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .list-pane .list-tools { order: 4; display: flex; flex: 1 1 100%; flex-wrap: wrap; align-items: center; gap: 10px 6px; margin: 4px 0 0; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .list-pane .filter-chips { display: none; } /* the type button's dropdown replaces the row of type tags */ /* "Sort by" sits inside one grey track with its tags, so the label clearly belongs to them (the type button next to it has its label inside too) */ :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .sort-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 3px; background: var(--control-bg); } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .sort-tags::before { content: "Sort by"; padding: 0 10px 0 11px; color: #2a2b2f; font-size: 15px; font-weight: 600; line-height: 32px; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .chip, :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .filter-toggle { display: inline-flex; align-items: center; height: 38px; gap: 8px; padding: 0 14px; border: 0; background: var(--control-bg); box-shadow: none; color: var(--control-ink); font: inherit; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color .15s, color .15s; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .chip span { color: var(--control-muted); font-weight: 400; font-variant-numeric: tabular-nums; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) :is(.chip, .filter-toggle):hover { background: var(--control-bg-hover); box-shadow: none; color: var(--ink); } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .chip[aria-pressed=true], :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .chip[aria-pressed=true]:hover { background: #171717; box-shadow: none; color: #ffffff; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .chip[aria-pressed=true] span { color: #ff9900; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .sort-tags .chip { height: 32px; padding: 0 12px; background: transparent; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .sort-tags .chip:hover { background: #e2e2e6; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .sort-tags .chip[aria-pressed=true], :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .sort-tags .chip[aria-pressed=true]:hover { background: #171717; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .sort-tag svg { flex: none; width: 12px; height: 12px; fill: none; stroke: #a5a7ad; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .sort-tag[aria-pressed=true] svg { stroke: #ff9900; stroke-width: 2.2; } /* the type button: "Review Focus All ▾"; a hairline sets it apart from the sort tags. It opens a dropdown: a white panel listing every type with its count, an orange check mark on the chosen one. */ :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .filter-control { position: relative; display: inline-flex; flex: none; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .filter-toggle { position: relative; margin-left: 4px; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .filter-menu { position: absolute; top: calc(100% + 6px); left: 4px; z-index: 30; width: 280px; max-width: calc(100vw - 32px); padding: 6px; border: 1px solid var(--line); border-radius: 4px; background: #ffffff; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 24px 48px -20px rgba(0,0,0,.35); } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .filter-menu-heading { margin: 0; padding: 6px 10px 6px 36px; color: var(--control-muted); font-size: 14px; font-weight: 500; text-transform: capitalize; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .filter-item { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; padding: 0 12px 0 10px; border: 0; background: none; color: var(--ink-2); font: inherit; font-weight: 400; text-align: left; cursor: pointer; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .filter-item:hover, :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .filter-item:focus-visible { background: var(--control-bg); color: var(--ink); outline: 0; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .filter-item[aria-checked=true] { color: var(--ink); font-weight: 600; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .filter-item .sort-check { flex: none; width: 16px; height: 16px; fill: none; stroke: #ff9900; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .filter-item[aria-checked=true] .sort-check { visibility: visible; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .filter-item-count { margin-left: auto; color: var(--control-muted); font-weight: 400; font-variant-numeric: tabular-nums; } /* Narrower screens: the sort buttons fold into one "Sort by" button (the current order, e.g. "Highest return"), which opens a menu of the orders. It looks and behaves like the type button next to it. */ :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .sort-trigger .sort-icon { display: none; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .sort-trigger.filter-toggle { text-transform: none; } /* "Sort by Highest return", as in its menu */ :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .sort-menu { position: absolute; top: calc(100% + 6px); right: auto; left: 0; z-index: 30; width: 260px; max-width: calc(100vw - 32px); padding: 6px; border: 1px solid var(--line); border-radius: 4px; background: #ffffff; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 24px 48px -20px rgba(0,0,0,.35); } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .sort-menu-heading { margin: 0; padding: 6px 10px 6px 36px; color: var(--control-muted); font-size: 14px; font-weight: 500; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .sort-item { height: 40px; padding: 0 12px 0 10px; border-radius: 0; color: var(--ink-2); font-weight: 400; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .sort-item:hover, :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .sort-item:focus-visible { background: var(--control-bg); color: var(--ink); outline: 0; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .sort-item[aria-checked=true] { color: var(--ink); font-weight: 600; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .sort-item .sort-check { stroke: #ff9900; } @media (max-width: 839px) { :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .list-pane .list-tools .sort-tags { display: none; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .list-pane .list-tools .sort-control { display: inline-flex; order: 1; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .list-pane .list-tools .filter-control { order: 2; } } @media (min-width: 840px) { @container pane (max-width: 999px) { :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .list-pane .list-tools .sort-tags { display: none; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .list-pane .list-tools .sort-control { display: inline-flex; order: 1; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .list-pane .list-tools .filter-control { order: 2; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .list-pane .list-tools .search-control { order: 3; } } } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .filter-toggle::before { display: none; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) :is(#filter-toggle-label, .sort-trigger-label) { color: var(--control-muted); font-weight: 400; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) :is(#filter-toggle-value, #sort-current) { color: var(--control-ink); } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .filter-chevron { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--control-muted); transition: transform .15s; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .filter-toggle[aria-expanded=true] { background: var(--control-bg-hover); } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .filter-toggle[aria-expanded=true] .filter-chevron { transform: rotate(180deg); } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .filter-toggle.active, :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .filter-toggle.active:hover { background: #171717; color: #ffffff; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .filter-toggle.active :is(:is(#filter-toggle-label, .sort-trigger-label), .filter-chevron) { color: rgba(255,255,255,.62); } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .filter-toggle.active :is(#filter-toggle-value, #sort-current) { color: #ff9900; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .list-pane .clear-button { display: none; } /* "All" in the type tags and the search box's own clear button do this */ :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .sort-control { display: none; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .tracker-head .search-control { height: 38px; margin-left: auto; border-color: transparent; background: var(--control-bg); transition: background-color .15s, border-color .15s; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .tracker-head .search-control:hover { background: var(--control-bg-hover); } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .tracker-head .search-control:focus-within { border-color: #171717; background: #ffffff; box-shadow: none; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .search-control::after { background: #ffffff; box-shadow: none; color: var(--control-muted); } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) :is(.chip, .filter-toggle, .cell-sort):focus-visible { outline: 2px solid #ff9900; outline-offset: 2px; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .tracker-head .search-control { width: 360px; } @media (max-width: 839px) { /* Phones: the search box full width, the sort tags (label on its own line), then the type button */ :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .list-pane .list-tools { order: 3; flex: 0 0 100%; gap: 8px 6px; margin: 16px 0 0; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .sort-tags { flex: 0 0 100%; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .sort-tags { gap: 6px; padding: 0; background: none; } /* phones: the label on its own line, the tags below */ :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .sort-tags::before { flex-basis: 100%; margin: 0 0 2px; padding: 0; line-height: 20px; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .sort-tags .chip { height: 38px; padding: 0 14px; background: var(--control-bg); } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .filter-toggle { margin-left: 0; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .filter-menu { left: 0; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .filter-toggle::before { display: none; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .tracker-head .search-control, :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .reader-open .tracker-head .search-control { order: -1; flex: 0 0 100%; width: 100%; margin: 0 0 6px; } /* search first, so the type tags open right under their button */ } /* Dropdown menus (sort and type, wider screens): the same look as the phones' Sort & filter menu. Small-capital grey headings lined up with the item text, plain rows with an orange check, a soft hover, one edge and shadow. */ :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) :is(.filter-menu, .sort-menu) { padding: 4px 0 6px; border: 0; border-radius: 4px; background: #ffffff; box-shadow: 0 0 0 1px rgba(13,13,14,.08), 0 18px 40px -14px rgba(13,13,14,.38); } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) :is(.filter-menu-heading, .sort-menu-heading) { margin: 0; padding: 12px 14px 6px 42px; color: #8a8c93; font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) :is(.filter-item, .sort-item) { gap: 12px; height: 40px; padding: 0 14px; border-radius: 0; color: #2a2b2f; font-size: 15px; font-weight: 400; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) :is(.filter-item, .sort-item):is(:hover, :focus-visible) { background: #f4f4f6; color: #171717; outline: 0; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) :is(.filter-item, .sort-item)[aria-checked=true] { color: #171717; font-weight: 600; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) :is(.filter-item, .sort-item) .sort-check { stroke: #ff9900; stroke-width: 2.2; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .filter-item-count { color: #8a8c93; font-size: 14px; } /* PRO · LIGHT: figures in a side rail. The card becomes two panes: a full-height tinted rail runs along its right edge, divided from the text by one hairline. On hover the card turns white and the rail stays tinted. */ :root[data-design="pro"] .situation { position: relative; isolation: isolate; --rail: 288px; --rail-gap: 48px; } :root[data-design="pro"] .reader-open .situation { --rail: 264px; --rail-gap: 32px; } :root[data-design="pro"] .situation::after { content: ""; position: absolute; z-index: -1; top: 1px; right: 1px; bottom: 1px; width: calc(var(--rail) + var(--rail-gap) / 2 + 19px); border-radius: 0 3px 3px 0; background: var(--rail-bg); box-shadow: -1px 0 0 var(--rail-line); pointer-events: none; transition: background-color .2s var(--ease); } :root[data-design="pro"] .situation:hover::after { background: var(--rail-bg-hover); } @media (max-width: 1199px) { :root[data-design="pro"] .situation { --rail: 272px; --rail-gap: 48px; } :root[data-design="pro"] .workbench:not(.reader-open) .grid { column-gap: 48px; } } /* Side window open: no figures, so no rail */ :root[data-design="pro"] .reader-open .situation::after { display: none; } /* ============================================================================================================ PRO · LIGHT 2: Pro · Light's cards with the sheet header back. A black header bar with sortable column headings sits over the list; each card is a sheet row: the situation and its summary on the left, the figures in columns on the right, divided by full-height hairlines that line up with the header's dividers. The sorted column is tinted. Phones have no header: there the sort menu and the stacked figures return. ============================================================================================================ */ :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) { --sheet-line: rgba(13,13,14,.10); --sorted-tint: rgba(13,13,14,.035); --sorted-head: #262628; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .situation-table { container: sheet / inline-size; } @media (min-width: 840px) { /* Header bar: sticky under the top bar; the sort menu is not needed while the headings sort */ :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .sort-control { display: none; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .list-head { display: grid; top: -40px; z-index: 4; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .list-head .th { grid-row: 1 / -1; align-self: stretch; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .list-head .th.c-sum { display: none; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .list-head .th.c-tag { display: flex; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .reader-open .list-head .th.c-tag { display: none; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .list-head, :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .situation { padding-right: 0; } /* the last column runs to the card's edge */ :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .list-head .th:is(.m1, .m2, .m3, .c-tag, .c-rep) { position: relative; justify-content: center; padding: 0 12px; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .list-head .th:is(.m1, .m2, .m3, .c-tag, .c-rep)::before { content: ""; position: absolute; top: 50%; left: 0; width: 1px; height: 36px; transform: translateY(-50%); background: var(--block-line); } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .list-head .th:is(.m1, .m2, .m3) > .sort-button { margin-right: -17px; } /* the arrow hangs right, so the words sit centred */ :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .list-head .th .th-anchor { margin-right: 18px; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .list-head .th-anchor .sort-button { padding-left: 0; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .list-head .th.c-sit { padding-left: 0; } /* Columns: the situation takes the room that is left; the figure columns have fixed widths, the same in the header and the cards, so every divider lines up. */ :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .grid { grid-template-columns: minmax(0, 1fr) 136px 120px 168px 140px 148px; grid-template-rows: auto 1fr; grid-template-areas: "sit m1 m2 m3 tag rep" "sum m1 m2 m3 tag rep"; column-gap: 0; row-gap: 0; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench[data-tracker="strategic-review"] .grid { grid-template-columns: minmax(0, 1fr) 136px 120px 136px 176px 148px; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .reader-open .grid, :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench[data-tracker="strategic-review"].reader-open .grid { grid-template-columns: minmax(0, 1fr) 136px 112px 128px; grid-template-rows: auto 1fr; grid-template-areas: "sit m1 m2 m3" "sum m1 m2 m3"; } /* Cells: full-height columns (edge to edge of the card), value at the top, level with the company name */ :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .situation .c-sit { padding-right: 24px; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .situation .c-sum, :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .reader-open .situation .c-sum { padding-right: 24px; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .situation :is(.m1, .m2, .m3, .c-tag, .c-rep) { align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; min-width: 0; min-height: 0; margin: -20px 0; padding: 23px 12px 20px; border: 0; border-radius: 0; background: none; box-shadow: inset 1px 0 0 var(--sheet-line); text-align: center; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .c-rep:empty { display: flex; } /* keeps the column's divider */ :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .situation :is(.m1, .m3, .c-tag)::before { display: none; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .situation :is(.cell-label, .cell-hint) { display: none; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .situation :is(.m1, .m2, .m3) > :is(.num-value, .pill, .text-value, .missing-value) { text-align: center; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .situation .c-tag > .tag { text-align: center; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .situation .m2 { padding-top: 20px; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body #situation-list .situation .m2 > .pill { font-size: 22px; line-height: 30px; letter-spacing: -0.02em; text-align: center; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .situation .m3 { flex-direction: row; flex-wrap: wrap; align-items: center; align-content: flex-start; justify-content: center; column-gap: 8px; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .situation .cell-word { text-align: center; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .situation .c-rep { padding-top: 17px; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .c-rep .report-button { width: auto; height: 36px; padding: 0 12px; gap: 6px; } /* The sorted column is tinted, in the header and down every card */ :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:is([data-sort-column="m1"]) :is(.situation .m1, .list-head .th.m1), :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:is([data-sort-column="m2"]) :is(.situation .m2, .list-head .th.m2), :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:is([data-sort-column="m3"]) :is(.situation .m3, .list-head .th.m3) { background: var(--sorted-tint); } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:is([data-sort-column="m1"], [data-sort-column="m2"], [data-sort-column="m3"]) .list-head .th:is(.m1, .m2, .m3) { background: none; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench[data-sort-column="m1"] .list-head .th.m1, :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench[data-sort-column="m2"] .list-head .th.m2, :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench[data-sort-column="m3"] .list-head .th.m3 { background: var(--sorted-head); } } /* Narrower windows (the text would get narrower than about 640px beside the figure columns): the figures move to the right of each card and stack one under another. Each row is the value, then its column heading in the same form as the top bar: white type on the black bar, the same sort arrows and the same divider lines. The headings form a black strip down the card's right edge that continues the top bar, and they sort just like the top bar's headings. The top bar keeps "Situation"; the sorted row is shaded. */ @media (min-width: 840px) { @container sheet (max-width: 1379px) { :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) :is(.situation, .list-head) { --value-w: 160px; --head-w: 152px; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .grid, :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench[data-tracker="strategic-review"]:not(.reader-open) .grid { grid-template-columns: minmax(0, 1fr) var(--value-w) var(--head-w); grid-template-rows: auto auto auto auto auto auto 1fr; column-gap: 0; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation.grid { grid-template-areas: "sit m1 m1" "sum m1 m1" "sum m2 m2" "sum m3 m3" "sum tag tag" "sum rep rep" "sum . ."; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .list-head.grid { grid-template-areas: "sit sit sit"; grid-template-rows: 1fr; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .list-head .th:not(.c-sit) { display: none; } /* the black strip down the right edge: one block per card, the same black as the top bar */ :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation { position: relative; isolation: isolate; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation::before { content: ""; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: var(--head-w); border-radius: 0 3px 3px 0; background: #171717; } /* rows: value on the left, heading on the right; separators in grey over the values and in the bar's line colour over the headings */ :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation :is(.m1, .m2, .m3, .c-tag, .c-rep) { position: relative; align-self: stretch; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 0; min-height: 46px; margin: 0; padding: 0; background: none; box-shadow: none; text-align: left; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .m1 { margin-top: -8px; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation :is(.m2, .m3, .c-tag, .c-rep)::before { content: ""; display: block; position: absolute; top: 0; right: var(--head-w); left: 0; height: 1px; background: var(--sheet-line); } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation :is(.m1, .m2, .m3) > :is(.num-value, .pill, .text-value, .missing-value), :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .c-tag > .tag { align-self: center; flex: 1 1 auto; min-width: 0; padding: 8px 14px; text-align: right; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .m3 > .meter { display: none; } /* the word's own copy of the bars stays beside it when the word wraps */ :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .m3 > .cell-word { align-self: center; flex: 1 1 auto; min-width: 0; padding: 8px 14px; text-align: right; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .m3 > .cell-word .word-meter { display: inline-flex; margin: 0 9px 0 0; vertical-align: -1px; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .m3 > .text-value { flex: 1 1 auto; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) #situation-list .situation .m2 > .pill { font-size: 22px; line-height: 30px; text-align: right; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation :is(.m1, .m2, .m3) > .cell-label { display: none; } /* the heading cell (a sort button for the figures; plain text for the type and Research) */ :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation :is(.cell-sort, .c-tag > .cell-label), :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .c-rep::after { order: 2; flex: 0 0 var(--head-w); display: flex; align-items: center; align-self: stretch; gap: 6px; box-sizing: border-box; width: var(--head-w); min-height: 46px; margin: 0; padding: 0 12px; border: 0; border-radius: 0; background: none; box-shadow: inset 0 1px 0 var(--block-line); color: #ffffff; font: inherit; font-size: 16px; font-weight: 400; line-height: 22px; text-align: left; text-transform: capitalize; white-space: nowrap; cursor: default; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .m1 > .cell-sort { box-shadow: none; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .cell-sort { cursor: pointer; transition: color .15s, background-color .15s; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .cell-sort:hover { color: #ff9900; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .cell-sort svg { flex: none; width: 12px; height: 12px; fill: none; stroke: var(--thead-icon); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .cell-sort:hover svg { stroke: #ff9900; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .cell-sort.active svg { stroke: var(--orange); } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .cell-sort .th-short { display: none; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .cell-sort .th-long { display: inline; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .c-tag > .cell-label { display: flex; color: #ffffff; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .c-rep::after { content: "Research"; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .c-rep { align-items: center; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .c-rep > .report-button { flex: none; height: 34px; margin: 0 14px 0 auto; padding: 0 10px; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .c-rep:empty { display: none; } /* text: the full width left of the figures */ :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .c-sit, :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .c-sum { padding-right: 28px; } /* the sorted row: the value shaded, its heading in the bar's highlight */ :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation :is(.m1, .m2, .m3) { background: none !important; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench[data-sort-column="m1"]:not(.reader-open) .situation .m1 > :not(.cell-sort, .cell-label, .cell-hint), :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench[data-sort-column="m2"]:not(.reader-open) .situation .m2 > :not(.cell-sort, .cell-label, .cell-hint), :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench[data-sort-column="m3"]:not(.reader-open) .situation .m3 > :not(.cell-sort, .cell-label, .cell-hint) { align-self: stretch; display: flex; align-items: center; justify-content: flex-end; background: var(--sorted-tint); } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .cell-sort.active { background: var(--sorted-head); } } } @media (min-width: 840px) { @container sheet (max-width: 979px) { :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) :is(.situation, .list-head) { --value-w: 140px; --head-w: 152px; } } } /* PRO · LIGHT 3: Light 2 with the stacked layout at every desktop width: the figures always sit in a column on the right of each card, each next to its black column heading. (The same rules as Light 2's narrower windows.) */ @media (min-width: 840px) { :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) :is(.situation, .list-head) { --value-w: 160px; --head-w: 152px; } :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .grid, :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench[data-tracker="strategic-review"]:not(.reader-open) .grid { grid-template-columns: minmax(0, 1fr) var(--value-w) var(--head-w); grid-template-rows: auto auto auto auto auto auto 1fr; column-gap: 0; } :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation.grid { grid-template-areas: "sit m1 m1" "sum m1 m1" "sum m2 m2" "sum m3 m3" "sum tag tag" "sum rep rep" "sum . ."; } :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .list-head.grid { grid-template-areas: "sit sit sit"; grid-template-rows: 1fr; } :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .list-head .th:not(.c-sit) { display: none; } /* the black strip down the right edge: one block per card, the same black as the top bar */ :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation { position: relative; isolation: isolate; } :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation::before { content: ""; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: var(--head-w); border-radius: 0 3px 3px 0; background: #171717; } /* rows: value on the left, heading on the right; separators in grey over the values and in the bar's line colour over the headings */ :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation :is(.m1, .m2, .m3, .c-tag, .c-rep) { position: relative; align-self: stretch; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 0; min-height: 46px; margin: 0; padding: 0; background: none; box-shadow: none; text-align: left; } :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .m1 { margin-top: -8px; } :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation :is(.m2, .m3, .c-tag, .c-rep)::before { content: ""; display: block; position: absolute; top: 0; right: var(--head-w); left: 0; height: 1px; background: var(--sheet-line); } :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation :is(.m1, .m2, .m3) > :is(.num-value, .pill, .text-value, .missing-value), :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .c-tag > .tag { align-self: center; flex: 1 1 auto; min-width: 0; padding: 8px 14px; text-align: right; } :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .m3 > .meter { display: none; } /* the word's own copy of the bars stays beside it when the word wraps */ :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .m3 > .cell-word { align-self: center; flex: 1 1 auto; min-width: 0; padding: 8px 14px; text-align: right; } :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .m3 > .cell-word .word-meter { display: inline-flex; margin: 0 9px 0 0; vertical-align: -1px; } :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .m3 > .text-value { flex: 1 1 auto; } :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) #situation-list .situation .m2 > .pill { font-size: 22px; line-height: 30px; text-align: right; } :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation :is(.m1, .m2, .m3) > .cell-label { display: none; } /* the heading cell (a sort button for the figures; plain text for the type and Research) */ :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation :is(.cell-sort, .c-tag > .cell-label), :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .c-rep::after { order: 2; flex: 0 0 var(--head-w); display: flex; align-items: center; align-self: stretch; gap: 6px; box-sizing: border-box; width: var(--head-w); min-height: 46px; margin: 0; padding: 0 12px; border: 0; border-radius: 0; background: none; box-shadow: inset 0 1px 0 var(--block-line); color: #ffffff; font: inherit; font-size: 16px; font-weight: 400; line-height: 22px; text-align: left; text-transform: capitalize; white-space: nowrap; cursor: default; } :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .m1 > .cell-sort { box-shadow: none; } :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .cell-sort { cursor: pointer; transition: color .15s, background-color .15s; } :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .cell-sort:hover { color: #ff9900; } :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .cell-sort svg { flex: none; width: 12px; height: 12px; fill: none; stroke: var(--thead-icon); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .cell-sort:hover svg { stroke: #ff9900; } :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .cell-sort.active svg { stroke: var(--orange); } :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .cell-sort .th-short { display: none; } :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .cell-sort .th-long { display: inline; } :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .c-tag > .cell-label { display: flex; color: #ffffff; } :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .c-rep::after { content: "Research"; } :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .c-rep { align-items: center; } :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .c-rep > .report-button { flex: none; height: 34px; margin: 0 14px 0 auto; padding: 0 10px; } :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .c-rep:empty { display: none; } /* text: the full width left of the figures */ :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .c-sit, :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .c-sum { padding-right: 28px; } /* the sorted row: the value shaded, its heading in the bar's highlight */ :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation :is(.m1, .m2, .m3) { background: none !important; } :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench[data-sort-column="m1"]:not(.reader-open) .situation .m1 > :not(.cell-sort, .cell-label, .cell-hint), :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench[data-sort-column="m2"]:not(.reader-open) .situation .m2 > :not(.cell-sort, .cell-label, .cell-hint), :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench[data-sort-column="m3"]:not(.reader-open) .situation .m3 > :not(.cell-sort, .cell-label, .cell-hint) { align-self: stretch; display: flex; align-items: center; justify-content: flex-end; background: var(--sorted-tint); } :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation .cell-sort.active { background: var(--sorted-head); } } /* Pro · Light and Pro · Light 3, wide windows with the side window closed: the page (title, controls and the cards) at most 1180px wide and centred, so the text and the figures stay close together */ @media (min-width: 840px) { :root:is([data-design="pro"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .list-pane { padding-left: max(var(--page-gutter), calc((100% - 1180px) / 2)); padding-right: max(var(--pane-right), calc((100% - 1180px) / 2)); } /* Pro · Light 2: wider (at most 1460px), so its figure columns sit beside a full-length text column */ :root[data-design="pro-light-2"] .workbench:not(.reader-open) .list-pane { padding-left: max(var(--page-gutter), calc((100% - 1460px) / 2)); padding-right: max(var(--pane-right), calc((100% - 1460px) / 2)); } } /* Side window open, at every window width: the cards keep only the text (the figures are in the side window), and the header bar only "Situation" */ @media (min-width: 840px) { :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .reader-open .grid, :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench[data-tracker="strategic-review"].reader-open .grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "sit" "sum"; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .reader-open :is(.situation, .list-head) :is(.m1, .m2, .m3) { display: none; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .reader-open .list-head.grid { grid-template-areas: "sit"; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .reader-open .situation :is(.c-sit, .c-sum) { padding-right: 20px; } } /* ============================================================================================================ Pro · Light, Light 3 and Light 4 on wider screens: the controls row (Sort by, the type button and search) is one bar above the cards, a small gap away from them, in the bar colour (black; light grey in Light 4). On it: white type, a faint highlight on hover, the chosen sort or type lifted a little, and a lighter search field. (Light 2 keeps its controls row above the table and its header bar with the column headings.) ============================================================================================================ */ @media (min-width: 840px) { :root:is([data-design="pro"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .list-pane { container: pane / inline-size; } :root:is([data-design="pro"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .list-pane .list-tools { position: sticky; top: -40px; z-index: 5; flex-wrap: wrap; align-items: center; gap: 6px 4px; min-height: 56px; margin: 4px 0 10px; padding: 9px 10px; border-radius: 4px; background: var(--bar-fill, #171717); box-shadow: var(--bar-edge, none); } :root:is([data-design="pro"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .list-pane .situation-table { margin-top: 0; } :root:is([data-design="pro"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body #list-head { display: none; } /* Sort by */ :root:is([data-design="pro"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body .list-pane .list-tools .sort-tags { gap: 2px; padding: 0; background: none; } :root:is([data-design="pro"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body .list-pane .list-tools .sort-tags::before { padding: 0 10px 0 10px; color: rgba(255,255,255,.92); line-height: 38px; } :root:is([data-design="pro"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body .list-pane .list-tools .sort-tags .chip { height: 38px; padding: 0 12px; background: transparent; box-shadow: none; color: rgba(255,255,255,.86); } :root:is([data-design="pro"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body .list-pane .list-tools .sort-tags .chip:hover { background: rgba(255,255,255,.08); color: #ffffff; } :root:is([data-design="pro"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body .list-pane .list-tools .sort-tags .chip[aria-pressed=true], :root:is([data-design="pro"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body .list-pane .list-tools .sort-tags .chip[aria-pressed=true]:hover { background: rgba(255,255,255,.16); box-shadow: none; color: #ffffff; } :root:is([data-design="pro"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body .list-pane .list-tools .sort-tag svg { stroke: rgba(255,255,255,.45); } :root:is([data-design="pro"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body .list-pane .list-tools .sort-tag[aria-pressed=true] svg { stroke: #ff9900; } /* the type button, after a hairline */ :root:is([data-design="pro"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body .list-pane .list-tools .filter-control { margin-left: 8px; padding-left: 10px; box-shadow: inset 1px 0 0 rgba(255,255,255,.16); } :root:is([data-design="pro"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body .list-pane .list-tools .filter-toggle { height: 38px; margin: 0; background: transparent; box-shadow: none; color: #ffffff; } :root:is([data-design="pro"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body .list-pane .list-tools .filter-toggle:hover, :root:is([data-design="pro"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body .list-pane .list-tools .filter-toggle[aria-expanded=true] { background: rgba(255,255,255,.08); } :root:is([data-design="pro"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body .list-pane .list-tools .filter-toggle :is(:is(#filter-toggle-label, .sort-trigger-label), .filter-chevron) { color: rgba(255,255,255,.72); } :root:is([data-design="pro"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body .list-pane .list-tools .filter-toggle :is(#filter-toggle-value, #sort-current) { color: #ffffff; } :root:is([data-design="pro"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body .list-pane .list-tools .filter-toggle.active, :root:is([data-design="pro"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body .list-pane .list-tools .filter-toggle.active:hover { background: rgba(255,255,255,.16); box-shadow: none; } :root:is([data-design="pro"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body .list-pane .list-tools .filter-toggle.active :is(#filter-toggle-value, #sort-current) { color: #ff9900; } :root:is([data-design="pro"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body .list-pane .list-tools .filter-menu { top: calc(100% + 9px); left: 10px; } :root:is([data-design="pro"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body .list-pane .list-tools .sort-menu { top: calc(100% + 9px); left: 0; } /* search: a dark field that lightens on hover and focus */ :root:is([data-design="pro"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body .list-pane .list-tools .search-control { flex: 1 1 220px; width: auto; max-width: 360px; min-width: 0; height: 38px; margin-left: auto; border-color: transparent; background: rgba(255,255,255,.18); color: rgba(255,255,255,.72); } :root:is([data-design="pro"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body .list-pane .list-tools .search-control:hover { background: rgba(255,255,255,.23); } :root:is([data-design="pro"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body .list-pane .list-tools .search-control:focus-within { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.26); } :root:is([data-design="pro"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body .list-pane .list-tools .search-control input { color: #ffffff; } :root:is([data-design="pro"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body .list-pane .list-tools .search-control input::placeholder { color: rgba(255,255,255,.72); } :root:is([data-design="pro"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body .list-pane .list-tools .search-control::after { background: rgba(255,255,255,.16); box-shadow: none; color: rgba(255,255,255,.75); } :root:is([data-design="pro"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body .list-pane .list-tools .search-control input::-webkit-search-cancel-button { filter: grayscale(1) brightness(1.8); } :root:is([data-design="pro"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body .list-pane .list-tools :is(.chip, .filter-toggle):focus-visible { outline: 2px solid #ff9900; outline-offset: 2px; } /* when even the folded controls don't fit on one line, search takes a full second row */ @container pane (max-width: 799px) { :root:is([data-design="pro"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body .list-pane .list-tools .search-control { flex: 1 1 100%; max-width: none; margin-left: 0; } } } /* Light 3 and 4: the search field as wide as the figures and their headings in the cards, starting where the figures start */ @media (min-width: 840px) { @container pane (min-width: 1000px) { :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) body .workbench:not(.reader-open) .list-pane .list-tools .search-control { flex: 0 0 302px; width: 302px; max-width: 302px; gap: 8px; padding: 0 8px 0 12px; } :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) body .workbench:not(.reader-open) .list-pane .list-tools .search-control::after { display: none; } :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) body .workbench:not(.reader-open) #search { padding: 0; font-size: 15px; } :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) body .workbench:not(.reader-open) #search:placeholder-shown::-webkit-search-cancel-button { display: none; } } } /* Pro · Light: the search field as wide as the figures column in the cards, and lined up with it (its left edge with the labels, its right edge with the values) */ @media (min-width: 840px) { @container pane (min-width: 1000px) { :root[data-design="pro"] body .workbench:not(.reader-open) .list-pane .list-tools .search-control { flex: 0 0 288px; width: 288px; max-width: 288px; margin-right: 10px; } :root[data-design="pro"] body .workbench:not(.reader-open) .list-pane .list-tools .search-control::after { display: none; } /* no "/" key hint here, so the full placeholder fits */ :root[data-design="pro"] body .workbench:not(.reader-open) .list-pane .list-tools .search-control { gap: 8px; padding: 0 8px 0 12px; } :root[data-design="pro"] body .workbench:not(.reader-open) #search { padding: 0; font-size: 15px; } :root[data-design="pro"] body .workbench:not(.reader-open) #search:placeholder-shown::-webkit-search-cancel-button { display: none; } } } @media (min-width: 840px) and (max-width: 1199px) { @container pane (min-width: 1000px) { :root[data-design="pro"] body .workbench:not(.reader-open) .list-pane .list-tools .search-control { flex-basis: 272px; width: 272px; max-width: 272px; } :root[data-design="pro"] body .workbench:not(.reader-open) #search { font-size: 14px; } } } /* Pro · Light (and Light 4): a light grey bar that sits with the grey cards. Dark type on it, a white search field, and the chosen sort or type pressed into the bar: a grey a step darker than the bar, dark type, an orange arrow */ @media (min-width: 840px) { :root:is([data-design="pro"], [data-design="pro-light-4"]) { --bar-fill: #e6e6ea; } :root:is([data-design="pro"], [data-design="pro-light-4"]) body .list-pane .list-tools .sort-tags::before { color: #2a2b2f; } :root:is([data-design="pro"], [data-design="pro-light-4"]) body .list-pane .list-tools .sort-tags .chip { color: #2a2b2f; } :root:is([data-design="pro"], [data-design="pro-light-4"]) body .list-pane .list-tools .sort-tags .chip:hover { background: rgba(13,13,14,.06); color: var(--ink); } :root:is([data-design="pro"], [data-design="pro-light-4"]) body .list-pane .list-tools .sort-tags .chip[aria-pressed=true], :root:is([data-design="pro"], [data-design="pro-light-4"]) body .list-pane .list-tools .sort-tags .chip[aria-pressed=true]:hover { background: #cbccd1; color: #111113; font-weight: 600; } :root:is([data-design="pro"], [data-design="pro-light-4"]) body .list-pane .list-tools .sort-tag svg { stroke: #a5a7ad; } :root:is([data-design="pro"], [data-design="pro-light-4"]) body .list-pane .list-tools .sort-tag[aria-pressed=true] svg { stroke: #c4640a; } :root:is([data-design="pro"], [data-design="pro-light-4"]) body .list-pane .list-tools .filter-control { box-shadow: inset 1px 0 0 rgba(13,13,14,.12); } :root:is([data-design="pro"], [data-design="pro-light-4"]) body .list-pane .list-tools .filter-toggle { color: #2a2b2f; } :root:is([data-design="pro"], [data-design="pro-light-4"]) body .list-pane .list-tools .filter-toggle:hover, :root:is([data-design="pro"], [data-design="pro-light-4"]) body .list-pane .list-tools .filter-toggle[aria-expanded=true] { background: rgba(255,255,255,.7); } :root:is([data-design="pro"], [data-design="pro-light-4"]) body .list-pane .list-tools .filter-toggle :is(:is(#filter-toggle-label, .sort-trigger-label), .filter-chevron) { color: #6c6e75; } :root:is([data-design="pro"], [data-design="pro-light-4"]) body .list-pane .list-tools .filter-toggle :is(#filter-toggle-value, #sort-current) { color: var(--ink); } :root:is([data-design="pro"], [data-design="pro-light-4"]) body .list-pane .list-tools .filter-toggle.active, :root:is([data-design="pro"], [data-design="pro-light-4"]) body .list-pane .list-tools .filter-toggle.active:hover { background: #cbccd1; box-shadow: inset 0 1px 2px rgba(13,13,14,.10); } :root:is([data-design="pro"], [data-design="pro-light-4"]) body .list-pane .list-tools .filter-toggle.active :is(:is(#filter-toggle-label, .sort-trigger-label), .filter-chevron) { color: #55575d; } :root:is([data-design="pro"], [data-design="pro-light-4"]) body .list-pane .list-tools .filter-toggle.active :is(#filter-toggle-value, #sort-current) { color: #111113; } :root:is([data-design="pro"], [data-design="pro-light-4"]) body .list-pane .list-tools .search-control { background: #ffffff; color: #74767d; } :root:is([data-design="pro"], [data-design="pro-light-4"]) body .list-pane .list-tools .search-control:hover { background: #ffffff; box-shadow: inset 0 0 0 1px #d6d6db; } :root:is([data-design="pro"], [data-design="pro-light-4"]) body .list-pane .list-tools .search-control:focus-within { border-color: #171717; background: #ffffff; box-shadow: none; } :root:is([data-design="pro"], [data-design="pro-light-4"]) body .list-pane .list-tools .search-control input { color: var(--ink); } :root:is([data-design="pro"], [data-design="pro-light-4"]) body .list-pane .list-tools .search-control input::placeholder { color: #74767d; } :root:is([data-design="pro"], [data-design="pro-light-4"]) body .list-pane .list-tools .search-control::after { background: #f0f0f2; color: #74767d; } :root:is([data-design="pro"], [data-design="pro-light-4"]) body .list-pane .list-tools .search-control input::-webkit-search-cancel-button { filter: none; } } /* Pro · Light cards, the figures column: quieter and sharper. Labels in small capitals (12px, spaced, grey), values 15px semibold, the dividing lines fainter. The SSI report keeps the white button that turns orange on hover. */ :root[data-design="pro"] .situation :is(.m1, .m3, .c-tag)::before { background: rgba(13,13,14,.06); } :root[data-design="pro"] body #situation-list .situation :is(.cell-label, .cell-hint, .cell-label-info) { color: #8a8c93; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } :root[data-design="pro"] body #situation-list .situation :is(.cell-label, .cell-hint, .cell-label-info):is(:hover, :focus-visible, [aria-expanded=true]) { color: var(--ink); } :root[data-design="pro"] body #situation-list .situation .cell-hint:is(:hover, :focus-visible)::after { letter-spacing: normal; } :root[data-design="pro"] body #situation-list .situation :is(.m1, .m3, .c-tag) > :is(.num-value, .text-value, .tag, .cell-word, .missing-value) { color: #1f2024; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; } /* Phones: the other light designs take these too, so every light design looks the same on a phone */ @media (max-width: 839px) { :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .situation :is(.m1, .m3, .c-tag)::before { background: rgba(13,13,14,.06); } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body #situation-list .situation :is(.cell-label, .cell-hint, .cell-label-info) { color: #8a8c93; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body #situation-list .situation :is(.cell-label, .cell-hint, .cell-label-info):is(:hover, :focus-visible, [aria-expanded=true]) { color: var(--ink); } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body #situation-list .situation .cell-hint:is(:hover, :focus-visible)::after { letter-spacing: normal; } :root:is([data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body #situation-list .situation :is(.m1, .m3, .c-tag) > :is(.num-value, .text-value, .tag, .cell-word, .missing-value) { color: #1f2024; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; } } /* ============================================================================================================ PRO · LIGHT 2, wider screens. The controls row (the type button and search) is a light grey panel with white controls, the chosen one black. Wide windows with the side window closed: the sheet header is back right under it, in the same grey, so the two read as one block; its column headings sort (the chosen one a black chip, as the chosen buttons are), so the row drops its own sort buttons. Elsewhere (narrower windows, the side window open), no header bar: the sort buttons stay in the row. ============================================================================================================ */ @media (min-width: 840px) { :root[data-design="pro-light-2"] body #list-head { display: none; } :root[data-design="pro-light-2"] .list-pane .list-tools { gap: 6px; margin: 4px 0 10px; padding: 8px; border-radius: 4px; background: #ececef; } :root[data-design="pro-light-2"] .list-pane .situation-table { margin-top: 0; } :root[data-design="pro-light-2"] .list-pane .list-tools .sort-tags { background: #ffffff; } :root[data-design="pro-light-2"] .list-pane .list-tools .sort-tags .chip:not([aria-pressed=true]):hover { background: #f0f0f2; } :root[data-design="pro-light-2"] .list-pane .list-tools .filter-toggle:not(.active) { background: #ffffff; } :root[data-design="pro-light-2"] .list-pane .list-tools .filter-toggle:not(.active):is(:hover, [aria-expanded=true]) { background: #f6f6f7; } :root[data-design="pro-light-2"] .list-pane .list-tools .search-control { background: #ffffff; } :root[data-design="pro-light-2"] .list-pane .list-tools .search-control:hover { background: #ffffff; box-shadow: inset 0 0 0 1px #d6d6db; } :root[data-design="pro-light-2"] .list-pane .list-tools .search-control:focus-within { border-color: #171717; box-shadow: none; } :root[data-design="pro-light-2"] .list-pane .list-tools .search-control::after { background: #f0f0f2; } /* when the row doesn't fit on one line (the side window open), search takes a full second line */ :root[data-design="pro-light-2"] .list-pane { container: pane / inline-size; } @container pane (max-width: 799px) { :root[data-design="pro-light-2"] .list-pane .list-tools .search-control { flex: 1 1 100%; width: auto; max-width: none; margin-left: 0; } } /* the controls panel over the header (the pane's content is the table's width) */ @container pane (min-width: 1380px) { :root[data-design="pro-light-2"] .workbench:not(.reader-open) .list-pane .list-tools { margin-bottom: 0; padding-bottom: 8px; border-radius: 4px 4px 0 0; } :root[data-design="pro-light-2"] .workbench:not(.reader-open) .list-pane .list-tools .sort-tags { display: none; } } /* the header bar: dark type on the grey, hairline dividers that line up with the cards' columns */ @container sheet (min-width: 1380px) { :root[data-design="pro-light-2"] body .workbench:not(.reader-open) #list-head { display: grid; height: 48px; margin-bottom: 10px; border-radius: 0 0 4px 4px; background: #ececef; box-shadow: inset 0 1px 0 rgba(13,13,14,.08); backdrop-filter: none; } :root[data-design="pro-light-2"] .workbench:not(.reader-open) .list-head :is(.th, .th .sort-button) { color: #2a2b2f; font-size: 15px; font-weight: 500; } :root[data-design="pro-light-2"] .workbench:not(.reader-open) .list-head .th:is(.m1, .m2, .m3, .c-tag, .c-rep)::before { height: 28px; background: rgba(13,13,14,.12); } :root[data-design="pro-light-2"] .workbench:not(.reader-open) .list-head .th.c-sit { padding-left: 0; } /* Situation: a heading only (the ticker order was taken out of sorting) */ :root[data-design="pro-light-2"] .workbench:not(.reader-open) .list-head .th.c-sit .sort-button { pointer-events: none; } :root[data-design="pro-light-2"] .workbench:not(.reader-open) .list-head .th.c-sit .sort-button svg { display: none; } /* the sortable headings as buttons: quiet until hovered; the chosen one black with white type and an orange arrow */ :root[data-design="pro-light-2"] .workbench:not(.reader-open) .list-head .th:is(.m1, .m2, .m3) .sort-button { height: 32px; margin-right: 0; padding: 0 10px 0 12px; gap: 6px; border-radius: 2px; transition: background-color .15s, color .15s, box-shadow .15s; } :root[data-design="pro-light-2"] .workbench:not(.reader-open) .list-head .th:is(.m1, .m2, .m3) .sort-button:not(.active):hover { background: #ffffff; box-shadow: 0 1px 2px rgba(13,13,14,.07), inset 0 0 0 1px rgba(13,13,14,.06); color: #171717; } :root[data-design="pro-light-2"] .workbench:not(.reader-open) .list-head .th:is(.m1, .m2, .m3) .sort-button:not(.active):hover svg { stroke: #ff9900; } :root[data-design="pro-light-2"] .workbench:not(.reader-open) .list-head .th:is(.m1, .m2, .m3) .sort-button svg { stroke: #a5a7ad; stroke-width: 1.8; } :root[data-design="pro-light-2"] body .workbench:not(.reader-open) .list-head .th:is(.m1, .m2, .m3) .sort-button.active { background: #171717; box-shadow: 0 6px 14px -8px rgba(13,13,14,.55); color: #ffffff; } :root[data-design="pro-light-2"] body .workbench:not(.reader-open) .list-head .th:is(.m1, .m2, .m3) .sort-button.active svg { stroke: #ff9900; stroke-width: 2.2; } :root[data-design="pro-light-2"] .workbench:not(.reader-open) .list-head .th .th-anchor { margin-right: 0; } :root[data-design="pro-light-2"] .workbench:not(.reader-open) .list-head .th .th-anchor .sort-button { padding-left: 12px; } :root[data-design="pro-light-2"] .workbench[data-sort-column] .list-head .th:is(.m1, .m2, .m3) { background: none; } /* the column tint stays in the cards */ :root[data-design="pro-light-2"] .workbench:not(.reader-open) .list-head .info-button { margin-left: 2px; box-shadow: inset 0 0 0 1px rgba(13,13,14,.35); color: #45474d; } :root[data-design="pro-light-2"] .workbench:not(.reader-open) .list-head .info-button:is(:hover, [aria-expanded=true]) { background: #171717; box-shadow: none; color: #ffffff; } } } /* ============================================================================================================ PRO · LIGHT 3 and 4: the headings in the strip beside each card's figures are labels, not sort buttons (sorting is in the bar above the cards). Return and Catalyst keep their "i": the long name on hover, and the ratings guide. The sorted figure's heading stays a shade lighter. Phones look like Pro · Light in every light design (none of this applies there). ============================================================================================================ */ @media (min-width: 840px) { :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) body .workbench:not(.reader-open) #situation-list .situation .cell-sort { display: none; } :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) body .workbench:not(.reader-open) #situation-list .situation :is(.m1 > .cell-label, .m2 > .cell-hint, .m2:not(:has(.cell-hint)) > .cell-label, .m3 > .cell-label) { order: 2; flex: 0 0 var(--head-w); display: flex; align-items: center; align-self: stretch; gap: 6px; box-sizing: border-box; width: var(--head-w); min-height: 46px; margin: 0; padding: 0 12px; border: 0; border-radius: 0; background: none; box-shadow: inset 0 1px 0 var(--block-line); color: #ffffff; font: inherit; font-size: 16px; font-weight: 400; line-height: 22px; text-align: left; text-transform: capitalize; white-space: nowrap; text-decoration: none; cursor: default; } :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) body .workbench:not(.reader-open) #situation-list .situation .m1 > .cell-label { box-shadow: none; } :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) body .workbench[data-sort-column="m1"]:not(.reader-open) #situation-list .situation .m1 > .cell-label, :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) body .workbench[data-sort-column="m2"]:not(.reader-open) #situation-list .situation .m2 > :is(.cell-hint, .cell-label), :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) body .workbench[data-sort-column="m3"]:not(.reader-open) #situation-list .situation .m3 > .cell-label { background: var(--sorted-head); } /* lines only between the rows and under the last one: the first row has no line over it and reaches the card's top edge (its value and heading still level with the name); the last row (the type, or Research when there is a report) closes with a line under it, over the value and the heading alike */ :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) body .workbench:not(.reader-open) #situation-list .situation.grid .m1 { margin-top: -20px; min-height: 58px; } :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) body .workbench:not(.reader-open) #situation-list .situation.grid .m1 > :is(.num-value, .pill, .text-value, .missing-value) { padding-top: 20px; } :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) body .workbench:not(.reader-open) #situation-list .situation.grid .m1 > .cell-label { padding-top: 12px; box-shadow: none; border-top-right-radius: 3px; } :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) body .workbench:not(.reader-open) #situation-list .situation.grid:not(:has(.c-rep:not(:empty))) .c-tag, :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) body .workbench:not(.reader-open) #situation-list .situation.grid .c-rep:not(:empty) { background: linear-gradient(var(--sheet-line), var(--sheet-line)) left bottom / calc(100% - var(--head-w)) 1px no-repeat; } :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) body .workbench:not(.reader-open) #situation-list .situation.grid:not(:has(.c-rep:not(:empty))) .c-tag > .cell-label, :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) body .workbench:not(.reader-open) #situation-list .situation.grid .c-rep:not(:empty)::after { box-shadow: inset 0 1px 0 var(--block-line), inset 0 -1px 0 var(--block-line); } } @media (min-width: 840px) { :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) body #situation-list .situation :is(.m2 > .cell-hint, .m3 > .cell-label-info) { cursor: help; } :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) body #situation-list .situation .m2 > .cell-hint:is(:hover, :focus-visible)::after { right: 0; left: auto; } /* the long name opens leftwards, inside the card */ } @media (hover: hover) and (min-width: 840px) { :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) body #situation-list .situation :is(.m2 > .cell-hint, .m3 > .cell-label-info):is(:hover, :focus-visible) { color: #ff9900; } } /* ============================================================================================================ Sort buttons with more life (all light designs): each order is its own small button rather than text in a track. On hover it lifts by a pixel, its shadow deepens and its arrows turn orange; pressing gives a little squeeze. The type button (and the folded "Sort by" button) next to them matches. Light 2: white buttons with a fine edge and a soft shadow on its grey panel; the chosen one black. Light 4: Pro · Light's buttons on Pro · Light's light grey bar. Pro · Light and Light 3 keep their quieter bar (no filled buttons, the bar's own colours): the life there comes from movement and depth only. On hover a soft tint, a one-pixel lift and orange arrows; the chosen sort sits raised on a soft shadow. ============================================================================================================ */ :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .sort-tags .chip { transition: background-color .15s, color .15s, box-shadow .15s, transform .15s; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .sort-tags .chip:not([aria-pressed=true]):hover { transform: translateY(-1px); } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .sort-tags .chip:not([aria-pressed=true]):hover svg { stroke: #ff9900; } :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .sort-tags .chip:active { transform: scale(.97); } @media (prefers-reduced-motion: reduce) { :root:is([data-design="pro"], [data-design="pro-light-2"], [data-design="pro-light-3"], [data-design="pro-light-4"]) .sort-tags .chip:not([aria-pressed=true]):hover { transform: none; } } @media (min-width: 840px) { :root[data-design="pro-light-2"] body .list-pane .list-tools .sort-tags { gap: 6px; padding: 0; background: none; } :root[data-design="pro-light-2"] body .list-pane .list-tools :is(.sort-tags .chip:not([aria-pressed=true]), .filter-toggle:not(.active)) { background: #ffffff; box-shadow: 0 1px 2px rgba(13,13,14,.07), inset 0 0 0 1px rgba(13,13,14,.06); color: #2a2b2f; } :root[data-design="pro-light-2"] body .list-pane .list-tools :is(.sort-tags .chip:not([aria-pressed=true]), .filter-toggle:not(.active)):hover { background: #ffffff; box-shadow: 0 6px 14px -6px rgba(13,13,14,.28), inset 0 0 0 1px rgba(13,13,14,.10); color: var(--ink); } :root[data-design="pro-light-2"] body .list-pane .list-tools .filter-toggle:not(.active)[aria-expanded=true] { background: #ffffff; box-shadow: inset 0 0 0 1px rgba(13,13,14,.25); } :root[data-design="pro-light-2"] body .list-pane .list-tools .sort-tags .chip[aria-pressed=true], :root[data-design="pro-light-2"] body .list-pane .list-tools .sort-tags .chip[aria-pressed=true]:hover { background: #171717; box-shadow: 0 6px 14px -8px rgba(13,13,14,.6); color: #ffffff; } :root[data-design="pro-light-2"] body .list-pane .list-tools .filter-control { box-shadow: none; } } @media (min-width: 840px) { :root:is([data-design="pro"], [data-design="pro-light-4"]) body .list-pane .list-tools .sort-tags .chip[aria-pressed=true], :root:is([data-design="pro"], [data-design="pro-light-4"]) body .list-pane .list-tools .sort-tags .chip[aria-pressed=true]:hover { box-shadow: inset 0 1px 2px rgba(13,13,14,.10); } :root:is([data-design="pro"], [data-design="pro-light-4"]) body .list-pane .list-tools .sort-tags .chip:not([aria-pressed=true]):hover { background: rgba(255,255,255,.7); } /* hover lighter than the bar, pressed darker */ :root[data-design="pro-light-3"] body .list-pane .list-tools .sort-tags .chip[aria-pressed=true], :root[data-design="pro-light-3"] body .list-pane .list-tools .sort-tags .chip[aria-pressed=true]:hover { background: rgba(255,255,255,.18); box-shadow: 0 6px 14px -7px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.12); } :root[data-design="pro-light-3"] body .list-pane .list-tools .sort-tags .chip:not([aria-pressed=true]):hover { background: rgba(255,255,255,.10); } :root:is([data-design="pro"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body .list-pane .list-tools .filter-toggle:not(.active):hover { transform: translateY(-1px); } :root:is([data-design="pro"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body .list-pane .list-tools .filter-toggle { transition: background-color .15s, color .15s, box-shadow .15s, transform .15s; } } /* ============================================================================================================ PRO · LIGHT 4: Pro · Light 3 in Pro · Light's colours. Every Light 3 rule above also names Light 4; this block changes colours only: the controls bar and the heading strip beside each card's figures are Pro · Light's light grey (#e6e6ea) with dark type, and the bar's buttons are Pro · Light's (the chosen one pressed in a darker grey). ============================================================================================================ */ :root[data-design="pro-light-4"] { --thead-bg: #e6e6ea; --thead-glass: #e6e6ea; --thead-ink: #2a2b2f; --thead-active: #171717; --thead-icon: #8a8c93; } /* the heading strip beside each card's figures: the bar's light grey, dark labels, the sorted row's label a grey a step darker (as the pressed sort button), hairlines in the cards' line colour */ :root[data-design="pro-light-4"] .situation { --sorted-head: #d6d7dc; --thead-icon: #8a8c93; --block-line: rgba(13,13,14,.09); } :root[data-design="pro-light-4"] .workbench:not(.reader-open) .situation::before { background: #e6e6ea; box-shadow: none; } @media (min-width: 840px) { :root[data-design="pro-light-4"] body .workbench:not(.reader-open) #situation-list .situation.grid :is(.m1 > .cell-label, .m2 > .cell-hint, .m2:not(:has(.cell-hint)) > .cell-label, .m3 > .cell-label, .c-tag > .cell-label), :root[data-design="pro-light-4"] body .workbench:not(.reader-open) #situation-list .situation.grid .c-rep::after { color: #2a2b2f; } } @media (hover: hover) and (min-width: 840px) { :root[data-design="pro-light-4"] body .workbench:not(.reader-open) #situation-list .situation.grid :is(.m2 > .cell-hint, .m3 > .cell-label-info):is(:hover, :focus-visible) { color: #c4640a; } } /* ============================================================================================================ PHONES, every light design: under the search, one row with the count and the date on the left and a single Sort & filter button on the right. The button opens one menu: the sort orders, then the types with their counts. (Wider screens keep their own sort and type controls; the parts below stay hidden there.) ============================================================================================================ */ :root[data-design^="pro"] :is(.sort-trigger-short, .sort-filter-badge, .sort-menu-filter) { display: none; } @media (max-width: 839px) { /* the row: the controls' box steps aside so the search, the count and the button share the page's lines */ :root[data-design^="pro"] .list-pane .list-tools { display: contents; } :root[data-design^="pro"] body .tracker-head .search-control, :root[data-design^="pro"] body .reader-open .tracker-head .search-control { order: 2; flex: 0 0 100%; width: 100%; height: 42px; margin: 22px 0 0; } :root[data-design^="pro"] body .tracker-head .tracker-count { order: 3; flex: 1 1 0%; display: grid; justify-items: start; align-content: center; gap: 1px; min-width: 0; margin: 16px 0 0; padding: 0; text-align: left; white-space: normal; } /* gives way to the button: on the narrowest phones the date wraps instead */ :root[data-design^="pro"] body .tracker-count .tracker-count-line { gap: 6px; } :root[data-design^="pro"] body #results-total { color: var(--ink); font-size: 16px; font-weight: 600; line-height: 22px; } :root[data-design^="pro"] body .tracker-count #results-noun { color: var(--ink-2); font-size: 15px; font-weight: 400; line-height: 22px; } :root[data-design^="pro"] body .tracker-count small { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; line-height: 18px; } :root[data-design^="pro"] body .tracker-count small::before { width: 5px; height: 5px; box-shadow: none; } :root[data-design^="pro"] body .list-pane .list-tools .sort-control { order: 4; flex: none; position: relative; display: inline-flex; margin: 16px 0 0; } :root[data-design^="pro"] body .list-pane .list-tools .filter-control { display: none; } :root[data-design^="pro"] .list-pane .situation-table { margin-top: 16px; } /* the button: the search field's grey, an icon, "Sort & filter", an orange count when a type is chosen */ :root[data-design^="pro"] body .list-pane .list-tools .sort-trigger.filter-toggle { gap: 8px; height: 40px; margin: 0; padding: 0 11px 0 12px; border: 0; border-radius: 2px; background: var(--control-bg); box-shadow: none; color: #171717; font-size: 15px; font-weight: 500; transform: none; transition: background-color .15s, box-shadow .15s; } :root[data-design^="pro"] body .list-pane .list-tools .sort-trigger.filter-toggle:is(:hover, [aria-expanded=true]) { background: var(--control-bg-hover); } :root[data-design^="pro"] body .list-pane .list-tools .sort-trigger.filter-toggle[aria-expanded=true] { box-shadow: inset 0 0 0 1px #171717; } :root[data-design^="pro"] body .list-pane .list-tools .sort-trigger.filter-toggle:focus-visible { outline: 2px solid #ff9900; outline-offset: 2px; } :root[data-design^="pro"] body .list-pane .list-tools .sort-trigger :is(.sort-trigger-label, #sort-current) { display: none; } :root[data-design^="pro"] body .list-pane .list-tools .sort-trigger .sort-icon { display: block; flex: none; width: 16px; height: 16px; fill: none; stroke: #171717; stroke-width: 1.8; stroke-linecap: round; } :root[data-design^="pro"] body .list-pane .list-tools .sort-trigger .sort-trigger-short { display: inline; color: #171717; } :root[data-design^="pro"] body .list-pane .list-tools .sort-trigger.filtered .sort-filter-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ff9900; color: #171717; font-size: 11px; font-weight: 700; line-height: 1; } :root[data-design^="pro"] body .list-pane .list-tools .sort-trigger .sort-chevron { width: 14px; height: 14px; margin: 0; color: #6c6e75; } /* the menu: under the button, lined up with its right edge; two short sections, roomy rows for a thumb */ :root[data-design^="pro"] body .list-pane .list-tools .sort-menu { top: calc(100% + 8px); right: 0; left: auto; z-index: 30; width: min(312px, calc(100vw - 48px)); max-width: none; padding: 6px 0 8px; border: 0; border-radius: 4px; background: #ffffff; box-shadow: 0 0 0 1px rgba(13,13,14,.08), 0 18px 40px -14px rgba(13,13,14,.38); } :root[data-design^="pro"] body .list-pane .list-tools .sort-menu-heading { margin: 0; padding: 12px 16px 6px; color: #8a8c93; font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; } :root[data-design^="pro"] body .list-pane .list-tools .sort-menu-filter { display: block; margin-top: 6px; padding-top: 2px; border-top: 1px solid #ececef; } :root[data-design^="pro"] body .list-pane .list-tools .sort-item { gap: 12px; height: 44px; padding: 0 16px; border-radius: 0; color: #2a2b2f; font-size: 15px; font-weight: 400; } :root[data-design^="pro"] body .list-pane .list-tools .sort-item:is(:hover, :focus-visible) { background: #f4f4f6; color: #171717; outline: 0; } :root[data-design^="pro"] body .list-pane .list-tools .sort-item[aria-checked=true] { color: #171717; font-weight: 600; } :root[data-design^="pro"] body .list-pane .list-tools .sort-item .sort-check { stroke: #ff9900; stroke-width: 2.2; } :root[data-design^="pro"] body .list-pane .list-tools .sort-item .filter-item-count { margin-left: auto; color: #8a8c93; font-size: 14px; font-weight: 400; font-variant-numeric: tabular-nums; } } /* Light 3 and 4, polish: the type in the strip reads like the other values (no orange), and the black (light grey in Light 4) strip takes the card's corner radius exactly, so its corners stay crisp. */ @media (min-width: 840px) { :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) body .workbench:not(.reader-open) #situation-list .situation .c-tag > .tag:is(.tag-binding, .tag-warn, *) { color: var(--ink); font-weight: 500; } :root:is([data-design="pro-light-3"], [data-design="pro-light-4"]) .workbench:not(.reader-open) .situation::before { border-radius: 0 4px 4px 0; } /* the card's own corner radius, so no light sliver shows at the corners */ } /* Phones: a shorter footer: the copyright without "All rights reserved" on one line, the three links under it */ @media (max-width: 839px) { :root[data-design^="pro"] .site-footer { display: grid; justify-content: start; gap: 0; padding: 6px var(--page-gutter) 4px; font-size: 12px; line-height: 16px; } :root[data-design^="pro"] .site-footer .rights-notice { display: none; } :root[data-design^="pro"] .site-footer p { margin: 0; } :root[data-design^="pro"] .site-footer nav { gap: 16px; } :root[data-design^="pro"] .site-footer :is(button, a) { padding: 4px 0; font-size: 12px; line-height: 16px; } } /* The folded sort button (side window open, narrower windows) starts its text on the cards' text edge too */ @media (min-width: 840px) { :root:is([data-design="pro"], [data-design="pro-light-3"], [data-design="pro-light-4"]) body .list-pane .list-tools .sort-trigger.filter-toggle { padding-left: 10px; } } /* light4-polish:start (from l4polish.css) */ /* ============================================================================================================ PRO · LIGHT 4, tracker pages: the top of the page and the figures beside each case, redrawn as one system. - The top, on the cards' left and right edges: the title with the count on the right; the tracker tabs (the page's navigation: plain words with an orange underline, on a hairline across the page); then, a clear step below, the controls row: Sort by and the type filter on the left as quiet text buttons (the chosen one in a light grey pill, as in the rest of Light 4), and search on the right, as wide as the figures in the cards. - The figures beside each case: Light 4's own strip, unchanged, except the sorted figure: its label in black with an orange mark on the strip's edge (instead of the grey shading on its row). - The short tip on a figure's label (Return) is drawn like the Catalyst guide beside it, and the side window's headline under the company name is black and semibold. - Phones: the same strip in each card (see the block at the end). (Phones keep their own top; the side window keeps its own figures; the landing page's live window keeps its own tracker bar.) ============================================================================================================ */ @media (min-width: 840px) { /* ---- the top ---- */ html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane { padding-top: 40px; } /* row 1: the tracker's name one size up; its description and the count's date on one line, the count's number level with the name */ html:root[data-design="pro-light-4"] body #list-pane .tracker-heading { row-gap: 4px; } html:root[data-design="pro-light-4"] body #list-pane .tracker-head h1 { font-size: 28px; line-height: 34px; letter-spacing: -0.025em; } html:root[data-design="pro-light-4"] body #list-pane .tracker-heading p { margin: 0; color: var(--muted, #74767d); font-size: 14px; line-height: 20px; } html:root[data-design="pro-light-4"] body #list-pane .tracker-head .tracker-count { gap: 4px; } html:root[data-design="pro-light-4"] body #list-pane .tracker-count .tracker-count-line { align-items: baseline; gap: 7px; } html:root[data-design="pro-light-4"] body #list-pane .tracker-count .tracker-count-line b { font-size: 28px; line-height: 34px; letter-spacing: -0.02em; } html:root[data-design="pro-light-4"] body #list-pane .tracker-count .tracker-count-line span { color: var(--muted, #74767d); font-size: 14px; font-weight: 500; line-height: 20px; } html:root[data-design="pro-light-4"] body #list-pane .tracker-count small { color: var(--muted, #74767d); font-size: 14px; line-height: 20px; } /* then the tabs a step lower */ html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane::before { order: 3; height: 28px; } html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .tracker-head .trk-switch { order: 3; margin: 0 0 14px; box-shadow: none; } /* the hairline under the tabs runs across the page, so the tabs read as the page's navigation */ html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane::after { content: ""; order: 4; flex: 0 0 100%; height: 1px; background: var(--line, #e2e2e2); } /* row 3, the controls: a clear step below the tabs; it scrolls away with the list (not pinned) */ html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools { position: static; top: auto; z-index: auto; order: 5; display: flex; flex: 0 0 100%; flex-wrap: wrap; align-items: center; gap: 8px 4px; min-height: 0; margin: 0; padding: 16px 0; border-radius: 0; background: #ffffff; box-shadow: none; } html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .toolbar { order: 6; } html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .situation-table { margin-top: 0; } /* Sort by: a quiet label, then the orders as text buttons; the chosen one sits in a light grey pill */ html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .sort-tags { align-items: center; gap: 2px; padding: 0; background: none; } html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .sort-tags::before { display: flex; align-items: center; padding: 0 8px 0 0; color: var(--muted, #74767d); font-size: 14px; font-weight: 500; line-height: 36px; } html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .sort-tags .chip { position: relative; height: 36px; min-height: 0; padding: 0 12px; gap: 7px; border-radius: 2px; background: transparent; box-shadow: none; color: #55575d; font-size: 14px; font-weight: 500; line-height: 20px; transform: none; } html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .sort-tags .chip:hover { background: #f0f0f2; box-shadow: none; color: #111113; transform: none; } html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .sort-tags .chip[aria-pressed=true], html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .sort-tags .chip[aria-pressed=true]:hover { background: #e9e9ec; box-shadow: none; color: #111113; font-weight: 600; } html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .sort-tags .chip::after { content: none; } html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .sort-tag svg { stroke: #a5a7ad; } html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .sort-tag[aria-pressed=true] svg { stroke: var(--orange); } html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .sort-tags .chip:not([aria-pressed=true]):hover svg { stroke: #6c6e75; } /* the type filter (and the folded "Sort by" when the row is short of room): the same quiet buttons, after a short divider */ html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .filter-control { display: flex; align-items: center; margin-left: 8px; padding-left: 10px; box-shadow: none; background: linear-gradient(var(--line, #e2e2e2), var(--line, #e2e2e2)) left center / 1px 22px no-repeat; } html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .filter-toggle { height: 36px; min-height: 0; margin: 0; padding: 0 12px; gap: 8px; border-radius: 2px; background: transparent; box-shadow: none; color: #111113; font-size: 14px; transform: none; } html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .filter-toggle:hover, html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .filter-toggle[aria-expanded=true] { background: #f0f0f2; box-shadow: none; transform: none; } html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .filter-toggle :is(#filter-toggle-label, .sort-trigger-label) { color: var(--muted, #74767d); font-size: 14px; font-weight: 500; } html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .filter-toggle :is(#filter-toggle-value, #sort-current) { color: #111113; font-size: 14px; font-weight: 600; } html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .filter-toggle .filter-chevron { color: #8a8c93; } html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .filter-toggle:hover .filter-chevron { color: #111113; } html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .filter-toggle.active, html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .filter-toggle.active:hover { background: #e9e9ec; box-shadow: none; } html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .filter-toggle.active :is(#filter-toggle-label, .sort-trigger-label, .filter-chevron) { color: #55575d; } html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .filter-toggle.active :is(#filter-toggle-value, #sort-current) { color: #111113; } html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .filter-menu { top: calc(100% + 6px); left: 10px; } html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .sort-menu { top: calc(100% + 6px); left: 0; } html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools :is(.chip, .filter-toggle):focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; } /* search: at the right end of the controls row, as wide as the figures in the cards and ending at their edge */ html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .search-control { flex: 0 0 312px; width: 312px; max-width: 312px; height: 36px; margin: 0 0 0 auto; padding: 0 10px 0 12px; gap: 8px; border-color: transparent; border-radius: 2px; background: #f0f0f2; box-shadow: none; color: #74767d; } html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .search-control:hover { background: #e9e9ec; box-shadow: none; } html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .search-control:focus-within { border-color: #171717; background: #ffffff; } html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .search-control::after { display: none; } html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .search-control input { color: var(--ink); font-size: 14px; } html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .search-control input::placeholder { color: #74767d; font-size: 14px; } /* a narrow list (side window open on a small screen): the count steps under the description, on the text's edge */ @container pane (max-width: 579px) { html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .tracker-head .tracker-count { flex: 0 0 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin: 10px 0 0; padding-left: 66px; text-align: left; } html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .tracker-count .tracker-count-line b { font-size: 18px; line-height: 24px; } } @container pane (max-width: 879px) { html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .search-control { flex: 1 1 240px; width: auto; max-width: 312px; } } /* any list narrower than 880px, the landing page's preview with its side window open among them: the count no longer fits beside the name, so it steps under the description on the text's edge, with its date on the same line */ @container pane (max-width: 879px) { html:root[data-design="pro-light-4"] body #list-pane .tracker-head .tracker-count { flex: 0 0 100%; display: flex; flex-wrap: wrap; align-items: baseline; justify-items: start; gap: 2px 14px; margin: 10px 0 0; padding-left: 66px; text-align: left; } html:root[data-design="pro-light-4"] body #list-pane .tracker-count .tracker-count-line b { font-size: 18px; line-height: 24px; } } @container pane (max-width: 699px) { html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .search-control { flex: 0 0 100%; max-width: none; margin: 4px 0 0; } } } @media (min-width: 840px) { /* ---- the figures beside each case (side window closed): the sorted figure marked in orange ---- */ html:root[data-design="pro-light-4"] body .workbench[data-sort-column="m1"]:not(.reader-open) #situation-list .situation.grid > .m1 > :not(.cell-sort, .cell-label, .cell-hint), html:root[data-design="pro-light-4"] body .workbench[data-sort-column="m2"]:not(.reader-open) #situation-list .situation.grid > .m2 > :not(.cell-sort, .cell-label, .cell-hint), html:root[data-design="pro-light-4"] body .workbench[data-sort-column="m3"]:not(.reader-open) #situation-list .situation.grid > .m3 > :not(.cell-sort, .cell-label, .cell-hint) { background: none; } html:root[data-design="pro-light-4"] body .workbench[data-sort-column="m1"]:not(.reader-open) #situation-list .situation.grid > .m1 > .cell-label, html:root[data-design="pro-light-4"] body .workbench[data-sort-column="m2"]:not(.reader-open) #situation-list .situation.grid > .m2 > :is(.cell-hint, .m2:not(:has(.cell-hint)) > .cell-label), html:root[data-design="pro-light-4"] body .workbench[data-sort-column="m2"]:not(.reader-open) #situation-list .situation.grid > .m2:not(:has(.cell-hint)) > .cell-label, html:root[data-design="pro-light-4"] body .workbench[data-sort-column="m3"]:not(.reader-open) #situation-list .situation.grid > .m3 > .cell-label { background: linear-gradient(var(--orange), var(--orange)) left top / 3px 100% no-repeat; color: #111113; font-weight: 600; } } /* the short tips on a figure's label (Return): drawn like the Catalyst guide next to them, not as a black tag */ html:root[data-design="pro-light-4"] body :is(#situation-list, #research-panel, #mobile-reader) .cell-hint:is(:hover, :focus-visible)::after { padding: 10px 14px; border: 1px solid var(--line, #e2e2e2); border-radius: 4px; background: var(--paper, #fbfbfb); box-shadow: 0 1px 2px rgba(13,13,14,.05), 0 20px 44px -16px rgba(13,13,14,.25); color: var(--ink, #0b0b0c); font-size: 14px; font-weight: 600; line-height: 20px; letter-spacing: 0; text-transform: none; white-space: nowrap; } /* the side window: the case's one-line headline under the company name, in black and semibold, so it reads as the headline it is (it was grey body text) */ /* the header reads as one block: the ticker and name, then (for deals) the buyer, then the headline in semibold black as the name's subtitle; one hairline under the whole block, then the figures */ html:root[data-design="pro-light-4"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-hero { padding-bottom: 22px; box-shadow: inset 0 -1px 0 #ececef; } html:root[data-design="pro-light-4"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-hero > .reader-name + :is(.reader-buyer, .reader-lede) { margin-top: 12px; padding-top: 0; box-shadow: none; } html:root[data-design="pro-light-4"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-buyer { font-size: 16px; line-height: 24px; } html:root[data-design="pro-light-4"] body :is(#research-panel, #mobile-reader, .reader-showcase) :is(.reader-lede, .reader-dek) { color: #1f2024; font-size: 17px; font-weight: 600; line-height: 25px; letter-spacing: -0.005em; } /* The case in one line, under the ticker and name: set off by a thin orange rule, like a pull quote, so it reads as the case's description */ html:root[data-design="pro-light-4"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-hero > .reader-name + .reader-lede { margin-top: 14px; } html:root[data-design="pro-light-4"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-lede { position: relative; padding-left: 16px; color: #2a2b30; font-size: 17px; font-weight: 400; line-height: 26px; letter-spacing: -0.005em; } html:root[data-design="pro-light-4"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-lede::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 0; width: 2px; border-radius: 2px; background: #f7931e; } html:root[data-design="pro-light-4"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics { margin-top: 22px; } @media (max-width: 839px) { html:root[data-design="pro-light-4"] body :is(#research-panel, #mobile-reader, .reader-showcase) :is(.reader-lede, .reader-dek) { font-size: 16px; line-height: 24px; } html:root[data-design="pro-light-4"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-hero { padding-bottom: 18px; } html:root[data-design="pro-light-4"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-lede { font-size: 16px; line-height: 24px; } html:root[data-design="pro-light-4"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics { margin-top: 18px; } } /* ============================================================================================================ PHONES: the figures in each card as one white sheet, two across, split by hairlines (no long lines on a narrow card). Small grey labels over the values; the sorted figure keeps the orange mark and a black label, as in the strip on wider screens. The report link is the sheet's last row. ============================================================================================================ */ @media (max-width: 839px) { html:root[data-design="pro-light-4"] body #situation-list .situation.grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "sit sit" "sum sum" "m2 m1" "m3 tag" "rep rep"; column-gap: 0; } html:root[data-design="pro-light-4"] body #situation-list .situation > :is(.m1, .m2, .m3, .c-tag) { --ln: #e4e4e8; position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; align-self: stretch; min-width: 0; min-height: 0; margin: 0; padding: 0; overflow: hidden; border-radius: 0; background: #ffffff !important; text-align: left; } /* the hairlines: every cell draws its left and top line; the right column adds the right edge, the last row the bottom */ html:root[data-design="pro-light-4"] body #situation-list .situation > :is(.m2, .m3) { box-shadow: inset 1px 1px 0 var(--ln), inset 0 -1px 0 var(--ln); } html:root[data-design="pro-light-4"] body #situation-list .situation > :is(.m1, .c-tag) { box-shadow: inset 1px 1px 0 var(--ln), inset -1px -1px 0 var(--ln); } html:root[data-design="pro-light-4"] body #situation-list .situation > :is(.m1, .m2) { margin-top: 18px; } html:root[data-design="pro-light-4"] body #situation-list .situation > .m2 { border-top-left-radius: 4px; } html:root[data-design="pro-light-4"] body #situation-list .situation > .m1 { border-top-right-radius: 4px; } html:root[data-design="pro-light-4"] body #situation-list .situation > .m3 { margin-top: -1px; } html:root[data-design="pro-light-4"] body #situation-list .situation > .c-tag { margin-top: -1px; } html:root[data-design="pro-light-4"] body #situation-list .situation:not(:has(> .c-rep > .report-button)) > .m3 { border-bottom-left-radius: 4px; } html:root[data-design="pro-light-4"] body #situation-list .situation:not(:has(> .c-rep > .report-button)) > .c-tag { border-bottom-right-radius: 4px; } html:root[data-design="pro-light-4"] body #situation-list .situation > :is(.m1, .m2, .m3, .c-tag, .c-rep)::before { content: none; } /* the label */ html:root[data-design="pro-light-4"] body #situation-list .situation :is(.m1 > .cell-label, .m2 > .cell-hint, .m2:not(:has(.cell-hint)) > .cell-label, .m3 > .cell-label, .c-tag > .cell-label) { order: 0; display: flex; align-items: center; align-self: stretch; box-sizing: border-box; width: auto; min-height: 0; margin: 0; padding: 11px 12px 0; border: 0; background: none; box-shadow: none; color: #74767d; font-size: 12.5px; font-weight: 500; line-height: 16px; letter-spacing: 0; text-transform: capitalize; text-decoration: none; white-space: nowrap; } html:root[data-design="pro-light-4"] body #situation-list .situation .hint-i { width: 12px; height: 12px; margin-left: 6px; } /* the value */ html:root[data-design="pro-light-4"] body #situation-list .situation > :is(.m1, .m2, .m3) > :is(.num-value, .pill, .text-value, .missing-value, .cell-word), html:root[data-design="pro-light-4"] body #situation-list .situation > .c-tag > .tag { order: 1; flex: none; align-self: stretch; min-width: 0; margin: 0; padding: 3px 12px 11px; background: none; color: #111113; font-size: 16px; font-weight: 600; line-height: 22px; text-align: left; overflow-wrap: anywhere; } html:root[data-design="pro-light-4"] body #situation-list .situation > .m2 > .pill { color: inherit; font-size: 18px; line-height: 22px; letter-spacing: -0.01em; } html:root[data-design="pro-light-4"] body .workbench[data-tracker="mna"] #situation-list .situation > .m2 > .pill.pos { color: var(--return-up); } html:root[data-design="pro-light-4"] body #situation-list .situation > .m2 > .pill.pos { color: var(--return-up); } html:root[data-design="pro-light-4"] body #situation-list .situation > .m3 > .meter { display: none; } html:root[data-design="pro-light-4"] body #situation-list .situation > .m3 > .cell-word .word-meter { display: inline-flex; margin: 0 8px 0 0; vertical-align: -1px; } /* the report link: the sheet's last row on a faint warm tint, "Read the SSI report" underlined in orange like a link, and the orange arrow that says it opens the report */ html:root[data-design="pro-light-4"] body #situation-list .situation > .c-rep:not(:empty) { display: flex; margin: -1px 0 0; padding: 0; background: none; box-shadow: none; } html:root[data-design="pro-light-4"] body #situation-list .situation > .c-rep:not(:empty)::after { content: none; } html:root[data-design="pro-light-4"] body #situation-list .situation > .c-rep > .report-button { display: flex; align-items: center; justify-content: flex-start; gap: 0; width: 100%; height: 46px; margin: 0; padding: 0 12px; border: 0; border-radius: 0 0 4px 4px; background: #fff6e9; box-shadow: inset 0 0 0 1px #e4e4e8; color: #111113; font-size: 14.5px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: background-color .15s; } html:root[data-design="pro-light-4"] body #situation-list .situation > .c-rep > .report-button::before { content: "Read the\00a0"; } html:root[data-design="pro-light-4"] body #situation-list .situation > .c-rep > .report-button:hover { background: #ffefd9; text-decoration-thickness: 2px; } html:root[data-design="pro-light-4"] body #situation-list .situation > .c-rep > .report-button svg { flex: none; width: 16px; height: 16px; margin-left: auto; stroke: #e08600; stroke-width: 2.2; transition: transform .15s; } html:root[data-design="pro-light-4"] body #situation-list .situation > .c-rep > .report-button:hover svg { transform: translate(2px, -2px); } /* the sorted figure */ html:root[data-design="pro-light-4"] body .workbench[data-sort-column="m1"] #situation-list .situation > .m1 > .cell-label, html:root[data-design="pro-light-4"] body .workbench[data-sort-column="m2"] #situation-list .situation > .m2 > .cell-hint, html:root[data-design="pro-light-4"] body .workbench[data-sort-column="m2"] #situation-list .situation > .m2:not(:has(.cell-hint)) > .cell-label, html:root[data-design="pro-light-4"] body .workbench[data-sort-column="m3"] #situation-list .situation > .m3 > .cell-label { background: linear-gradient(var(--orange), var(--orange)) left 0 bottom 0 / 3px 16px no-repeat; color: #111113; font-weight: 600; } } /* ============================================================================================================ SORT & FILTER, every width: one button, as on phones (the sort orders and the type filter live in its menu). The button: the search field's grey, an icon, "Sort & filter", an orange count when a type is chosen. The menu: a card like the Catalyst guide (paper, a thin line, a soft shadow); the orders in pairs (highest and lowest of each figure side by side), the types as a row of chips with their counts; the chosen one in the strip's grey with the orange mark, as the sorted figure in the cards. ============================================================================================================ */ @media (min-width: 840px) { html:root[data-design="pro-light-4"] body #list-pane .list-tools :is(.sort-tags, .filter-control) { display: none !important; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-control { display: flex; position: relative; align-items: center; order: 1; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .search-control { order: 2; } } /* the button */ html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-trigger.filter-toggle { display: inline-flex; align-items: center; gap: 8px; height: 36px; min-height: 0; margin: 0; padding: 0 11px 0 12px; border: 0; border-radius: 2px; background: #f0f0f2; box-shadow: none; color: #111113; font-size: 14px; font-weight: 600; transform: none; transition: background-color .15s; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-trigger.filter-toggle:hover { background: #e9e9ec; box-shadow: none; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-trigger.filter-toggle[aria-expanded=true] { background: #e4e4e8; box-shadow: none; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-trigger :is(.sort-trigger-label, #sort-current) { display: none; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-trigger .sort-icon { display: block; flex: none; width: 16px; height: 16px; fill: none; stroke: #111113; stroke-width: 1.8; stroke-linecap: round; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-trigger .sort-trigger-short { display: inline; color: #111113; font-size: 14px; font-weight: 600; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-trigger.filtered .sort-filter-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--orange); color: #111113; font-size: 11px; font-weight: 700; line-height: 1; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-trigger .sort-chevron { width: 14px; height: 14px; margin: 0 0 0 2px; color: #6c6e75; transition: transform .15s; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-trigger[aria-expanded=true] .sort-chevron { transform: rotate(180deg); } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-trigger.filter-toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; } /* the menu */ html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-menu { position: absolute; top: calc(100% + 8px); right: auto; left: 0; z-index: 30; width: 400px; max-width: calc(100vw - 32px); padding: 16px 16px 18px; border: 1px solid var(--line, #e2e2e2); border-radius: 4px; background: var(--paper, #fbfbfb); box-shadow: 0 1px 2px rgba(13,13,14,.05), 0 20px 44px -16px rgba(13,13,14,.25); } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-menu-heading { margin: 0 0 10px; padding: 0; color: #8a8c93; font-size: 11.5px; font-weight: 600; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; } html:root[data-design="pro-light-4"] body #list-pane .list-tools #sort-menu-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-menu-filter { display: block; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid #ececef; } html:root[data-design="pro-light-4"] body #list-pane .list-tools #sort-filter-items { display: flex; flex-wrap: wrap; gap: 6px; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-item { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: auto; min-width: 0; height: 36px; margin: 0; padding: 0 12px; border: 0; border-radius: 2px; background: #f0f0f2; box-shadow: none; color: #2a2b2f; font-size: 14px; font-weight: 500; line-height: 18px; text-align: left; white-space: nowrap; cursor: pointer; transition: background-color .15s, color .15s; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-item > svg { display: none; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-item > span { font-size: inherit; font-weight: inherit; line-height: inherit; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-item > span:first-of-type { overflow: hidden; text-overflow: ellipsis; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-item:is(:hover, :focus-visible) { background: #e9e9ec; color: #111113; outline: 0; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-item[aria-checked=true], html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-item[aria-checked=true]:hover { background: linear-gradient(var(--orange), var(--orange)) left top / 3px 100% no-repeat, #e4e4e8; color: #111113; font-weight: 600; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-item:focus-visible { box-shadow: inset 0 0 0 2px var(--orange); } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-filter-item { padding: 0 10px 0 12px; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-item .filter-item-count { margin: 0 0 0 2px; color: #8a8c93; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-item[aria-checked=true] .filter-item-count { color: #55575d; } @media (max-width: 839px) { html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-trigger.filter-toggle { height: 40px; font-size: 15px; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-trigger .sort-trigger-short { font-size: 15px; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-menu { right: 0; left: auto; width: calc(100vw - 32px); max-width: 400px; padding: 14px 12px 16px; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-item { height: 40px; padding: 0 8px; font-size: 14px; letter-spacing: -0.01em; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-filter-item { padding: 0 10px 0 11px; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-item .filter-item-count { font-size: 13.5px; } html:root[data-design="pro-light-4"] body #list-pane .list-tools :is(#sort-menu-items, #sort-filter-items) { gap: 6px; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-menu-heading { font-size: 12px; } } /* the side window's report button under the headline: removed (the report stays one click away in the cards and the side window's sources) */ html:root[data-design="pro-light-4"] body :is(#research-panel, #mobile-reader, .reader-showcase) .report-button.reader-cta { display: none !important; } html:root[data-design="pro-light-4"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-actions:not(:has(> :not(.reader-cta))) { display: none !important; } /* (earlier: the same quiet white button as in the cards) */ html:root[data-design="pro-light-4"] body :is(#research-panel, #mobile-reader, .reader-showcase) .report-button.reader-cta { height: 40px; padding: 0 14px; border: 0; border-radius: 2px; background: #ffffff; box-shadow: inset 0 0 0 1px rgba(13,13,14,.12); color: #c4640a; font-weight: 600; } html:root[data-design="pro-light-4"] body :is(#research-panel, #mobile-reader, .reader-showcase) .report-button.reader-cta:hover { background: #fff6e9; box-shadow: inset 0 0 0 1px rgba(196,100,10,.35); color: #b35a07; } html:root[data-design="pro-light-4"] body :is(#research-panel, #mobile-reader, .reader-showcase) .report-button.reader-cta svg { stroke: currentColor; color: inherit; } @media (max-width: 389px) { html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-item { font-size: 13.5px; } } @media (max-width: 374px) { html:root[data-design="pro-light-4"] body #list-pane .list-tools #sort-menu-items { grid-template-columns: minmax(0, 1fr); } } /* Sort & filter · the ranges: a meter of the situations (bars between round-number steps) with two handles; the part inside the range in orange, the two ends under it. Then the foot: Clear filters, and Show N situations to close. */ :root:not([data-design="pro-light-4"]) :is(#sort-ranges, .sort-menu-foot) { display: none; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .range-filter { margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid #ececef; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .range-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .range-head .sort-menu-heading { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .range-value { flex: none; color: #6c6e75; font-size: 13px; font-weight: 500; line-height: 16px; font-variant-numeric: tabular-nums; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .range-filter.is-set .range-value { color: #111113; font-weight: 600; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .range-meter { position: relative; padding: 0 10px 10px; cursor: pointer; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .range-bars { display: flex; align-items: flex-end; gap: 2px; height: 40px; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .range-bars > i { flex: 1 1 0; min-width: 0; height: 2px; border-radius: 1px 1px 0 0; background: #dedee2; transition: background-color .12s; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .range-bars > i.on { background: #fbbd6e; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .range-rail { position: relative; height: 4px; margin: 8px 0 0; border-radius: 2px; background: #e4e4e8; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .range-fill { position: absolute; top: 0; bottom: 0; border-radius: 2px; background: var(--orange); } html:root[data-design="pro-light-4"] body #list-pane .list-tools .range-thumb { position: absolute; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: #ffffff; box-shadow: inset 0 0 0 2px #171717, 0 2px 6px rgba(13,13,14,.2); cursor: grab; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .range-filter.is-dragging, html:root[data-design="pro-light-4"] body #list-pane .list-tools .range-filter.is-dragging * { cursor: grabbing; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .range-thumb:focus { outline: 0; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .range-thumb:focus-visible { box-shadow: inset 0 0 0 2px #171717, 0 0 0 4px rgba(247,147,30,.4); } html:root[data-design="pro-light-4"] body #list-pane .list-tools .range-ends { display: flex; justify-content: space-between; margin: 2px 0 0; color: #8a8c93; font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-menu { overflow-y: auto; overscroll-behavior: contain; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-menu-foot { position: sticky; bottom: -18px; z-index: 1; display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: 16px 0 -18px; padding: 14px 0 18px; border-top: 1px solid #ececef; background: var(--paper, #fbfbfb); } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-clear { height: 36px; margin: 0 auto 0 0; padding: 0; border: 0; background: none; box-shadow: none; color: #55575d; font: inherit; font-size: 14px; font-weight: 500; text-decoration: underline; text-decoration-color: #c9c9ce; text-underline-offset: 4px; cursor: pointer; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-clear[hidden] { display: none; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-clear:hover { color: #111113; text-decoration-color: currentColor; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-done { height: 36px; margin: 0; padding: 0 16px; border: 0; border-radius: 2px; background: #171717; box-shadow: none; color: #ffffff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .15s; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-done:hover { background: #333336; } html:root[data-design="pro-light-4"] body #list-pane .list-tools :is(.sort-clear, .sort-done):focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; } /* wide lists: two columns, the sort orders and types on the left and the ranges on the right, so the menu stays short */ @media (min-width: 840px) { @container pane (min-width: 1100px) { html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-menu:has(.range-filter) { width: 760px; max-width: none; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-menu:has(.range-filter):not([hidden]) { display: grid; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-menu:has(.range-filter) > :is(.sort-menu-heading, #sort-menu-items, .sort-menu-filter) { grid-column: 1; padding-right: 24px; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-menu:has(.range-filter) > .sort-menu-filter { align-self: start; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-menu:has(.range-filter) > #sort-ranges { grid-column: 2; grid-row: 1 / 4; padding: 0 0 16px 24px; border-left: 1px solid #ececef; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-menu:has(.range-filter) > .sort-menu-foot { grid-column: 1 / -1; margin-top: 0; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-menu:has(.range-filter) #sort-ranges > .range-filter:first-child { margin-top: 0; padding-top: 0; border-top: 0; } } } @media (max-width: 839px) { html:root[data-design="pro-light-4"] body #list-pane .list-tools .range-filter { margin-top: 14px; padding-top: 12px; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .range-bars { height: 32px; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .range-value { font-size: 14px; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .range-ends { font-size: 13px; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .range-meter { padding: 0 11px 11px; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .range-thumb { width: 22px; height: 22px; margin: -11px 0 0 -11px; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-done { height: 42px; padding: 0 18px; font-size: 15px; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-clear { height: 42px; font-size: 15px; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-menu-foot { bottom: -16px; margin: 14px 0 -16px; padding: 12px 0 16px; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-trigger { scroll-margin-top: 12px; } } /* Sort & filter and search drawn like the tracker cards above them: white, a hairline edge, rounded corners; while the menu is open the button has the orange edge, as the chosen tracker does. */ html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-trigger.filter-toggle { height: 40px; gap: 8px; padding: 0 12px 0 13px; border-radius: 10px; background: linear-gradient(180deg, #ffffff 55%, #fbfbfc); box-shadow: inset 0 0 0 1px #e4e4e8, 0 1px 2px rgba(13,13,14,.04); transition: box-shadow .2s, transform .2s; } @media (hover: hover) { html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-trigger.filter-toggle:hover { background: linear-gradient(180deg, #ffffff 55%, #fbfbfc); box-shadow: inset 0 0 0 1px #efc98f, 0 12px 22px -16px rgba(13,13,14,.4); transform: translateY(-1px); } } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-trigger.filter-toggle[aria-expanded=true], html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-trigger.filter-toggle[aria-expanded=true]:hover { background: #ffffff; box-shadow: inset 0 0 0 1.5px var(--orange), 0 10px 22px -16px rgba(180,83,9,.55); transform: none; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-trigger .sort-icon { width: 16px; height: 16px; padding: 0; background: none; box-shadow: none; stroke: #111113; stroke-width: 1.8; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-trigger .sort-chevron { color: #8a8c93; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-menu { border-radius: 10px; } html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .search-control { border-color: transparent; border-radius: 10px; background: linear-gradient(180deg, #ffffff 55%, #fbfbfc); box-shadow: inset 0 0 0 1px #e4e4e8, 0 1px 2px rgba(13,13,14,.04); transition: box-shadow .2s; } html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .search-control:hover { background: linear-gradient(180deg, #ffffff 55%, #fbfbfc); box-shadow: inset 0 0 0 1px #d2d3d8, 0 1px 2px rgba(13,13,14,.04); } html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .search-control:focus-within { border-color: transparent; background: #ffffff; box-shadow: inset 0 0 0 1.5px #171717; } @media (min-width: 840px) { html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .search-control { height: 40px; } } @media (max-width: 839px) { html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-trigger.filter-toggle { gap: 7px; padding: 0 10px 0 12px; } } /* ============================================================================================================ ONE LINE (wider screens): the tracker tabs on the left, Sort & filter and search on the right, on one line over the one hairline. With less room the search narrows; with less still, the two step down under the hairline. ============================================================================================================ */ @media (min-width: 840px) { html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools { display: contents; } html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .tracker-head .trk-switch { order: 4; } /* their bottom edges line up with the tracker cards' */ html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .sort-control { order: 5; align-self: flex-end; margin: 0 0 14px auto; } html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .search-control { order: 6; flex: 1 1 200px; align-self: flex-end; width: auto; min-width: 180px; max-width: 312px; margin: 0 0 14px 8px; } /* grows into the room; it moves to the next line only below 200px */ html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane::after { order: 7; } html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .toolbar { order: 8; } html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .situation-table { margin-top: 18px; } html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .sort-menu { right: 0; left: auto; } @container pane (max-width: 999px) { html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .search-control { flex: 1 1 180px; width: auto; min-width: 180px; max-width: 240px; } } @container pane (max-width: 919px) { html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .sort-control { order: 8; margin: 16px 0 0; } html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .search-control { order: 8; flex: 0 1 312px; margin: 16px 0 0 auto; } html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .sort-menu { right: auto; left: 0; } html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .situation-table { margin-top: 14px; } } @container pane (max-width: 559px) { html:root[data-design="pro-light-4"]:not([data-embed]) body #list-pane .list-tools .search-control { flex: 1 1 200px; min-width: 0; margin-left: 8px; } } } /* light4-polish:end */ /* ============================================================================================================ THE CARDS: their own look, with rounder corners and a step lighter at rest. The figures sit in a list on the right, on the card itself (a row per figure, split by hairlines: the label on the left, the value on the right); the sorted figure's label in black with a short orange mark just outside the list, so every label starts on the same line. Under the list, the report as a clear dark button. Phones: the same, two across. ============================================================================================================ */ html:root[data-design="pro-light-4"] body #workbench #situation-list .situation { border-radius: 12px; } /* at rest a step lighter than before; hover, the open case and keyboard focus keep their own colours */ html:root[data-design="pro-light-4"] body #workbench #situation-list .situation:not(:hover, [aria-selected="true"], :has(.ticker-button:focus-visible)) { background: #f9f9fa; } @media (min-width: 840px) { html:root[data-design="pro-light-4"] body #workbench:not(.reader-open) #situation-list .situation { --pl: #e4e4e8; --value-w: 150px; --head-w: 150px; padding: 20px; } html:root[data-design="pro-light-4"] body #workbench:not(.reader-open) #situation-list .situation::before { content: none; display: none; } html:root[data-design="pro-light-4"] body #workbench:not(.reader-open) #situation-list .situation :is(.c-sit, .c-sum) { padding-right: 44px; } html:root[data-design="pro-light-4"] body #workbench:not(.reader-open) #situation-list .situation > :is(.m1, .m2, .m3, .c-tag, .c-rep:not(:empty)) { position: relative; align-items: center; gap: 16px; min-height: 46px; margin: 0; padding: 0; border-radius: 0; background: transparent !important; box-shadow: inset 0 1px 0 var(--pl); } html:root[data-design="pro-light-4"] body #workbench:not(.reader-open) #situation-list .situation > :is(.m1, .m2, .m3, .c-tag, .c-rep)::before { content: none; } /* the first row: no line over it, level with the ticker */ html:root[data-design="pro-light-4"] body #workbench:not(.reader-open) #situation-list .situation > .m1.m1:not(.c-rep) { margin-top: -7px; box-shadow: none; } /* the label (whichever of the cell's label elements shows) */ html:root[data-design="pro-light-4"] body #workbench:not(.reader-open) #situation-list .situation > :is(.m1, .m2, .m3, .c-tag) > :is(.cell-label, .cell-hint, .cell-sort) { order: 0; flex: 1 1 auto; width: auto; min-width: 0; min-height: 0; height: auto; margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; color: #6c6e75; font-size: 14.5px; font-weight: 500; line-height: 21px; white-space: normal; } /* the value */ html:root[data-design="pro-light-4"] body #workbench:not(.reader-open) #situation-list .situation > :is(.m1, .m2, .m3) > :is(.num-value, .pill, .text-value, .missing-value, .cell-word), html:root[data-design="pro-light-4"] body #workbench:not(.reader-open) #situation-list .situation > .c-tag > .tag { order: 1; flex: 0 1 auto; align-self: center; display: block; width: auto; max-width: 62%; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #111113; font-size: 16px; font-weight: 600; line-height: 22px; text-align: right; } html:root[data-design="pro-light-4"] body #workbench:not(.reader-open) #situation-list .situation > .m2 > .pill { font-size: 20px; line-height: 26px; letter-spacing: -0.015em; } html:root[data-design="pro-light-4"] body #workbench:not(.reader-open) #situation-list .situation > .m2 > .pill.pos { color: var(--return-up); } html:root[data-design="pro-light-4"] body #workbench:not(.reader-open) #situation-list .situation > .m2 > .pill.neg { color: var(--return-down, #c0392b); } /* the sorted figure: a black label, and the short orange mark just outside the list */ html:root[data-design="pro-light-4"] body #workbench[data-sort-column="m1"]:not(.reader-open) #situation-list .situation > .m1 > :is(.cell-label, .cell-hint, .cell-sort), html:root[data-design="pro-light-4"] body #workbench[data-sort-column="m2"]:not(.reader-open) #situation-list .situation > .m2 > :is(.cell-label, .cell-hint, .cell-sort), html:root[data-design="pro-light-4"] body #workbench[data-sort-column="m3"]:not(.reader-open) #situation-list .situation > .m3 > :is(.cell-label, .cell-hint, .cell-sort) { background: none; color: #111113; font-weight: 600; } html:root[data-design="pro-light-4"] body #workbench[data-sort-column="m1"]:not(.reader-open) #situation-list .situation > .m1::before, html:root[data-design="pro-light-4"] body #workbench[data-sort-column="m2"]:not(.reader-open) #situation-list .situation > .m2::before, html:root[data-design="pro-light-4"] body #workbench[data-sort-column="m3"]:not(.reader-open) #situation-list .situation > .m3::before { content: ""; display: block; position: absolute; top: 50%; left: -14px; width: 3px; height: 20px; margin-top: -10px; border-radius: 2px; background: var(--orange); } /* the report: a clear dark button under the list */ html:root[data-design="pro-light-4"] body #workbench:not(.reader-open) #situation-list .situation > .c-rep:not(:empty) { min-height: 0; padding: 14px 0 0; box-shadow: none; } html:root[data-design="pro-light-4"] body #workbench:not(.reader-open) #situation-list .situation > .c-rep::after { content: none; } html:root[data-design="pro-light-4"] body #workbench:not(.reader-open) #situation-list .situation > .c-rep > .report-button { display: flex; align-items: center; justify-content: flex-start; flex: 1 1 auto; gap: 0; width: 100%; height: 40px; margin: 0; padding: 0 14px; border: 0; border-radius: 8px; background: #171717; box-shadow: 0 1px 2px rgba(13,13,14,.12); color: #ffffff; font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color .15s, color .15s; } html:root[data-design="pro-light-4"] body #workbench:not(.reader-open) #situation-list .situation > .c-rep > .report-button::before { content: "Read the\00a0"; } html:root[data-design="pro-light-4"] body #workbench:not(.reader-open) #situation-list .situation > .c-rep > .report-button:hover { background: var(--orange); color: #111113; } html:root[data-design="pro-light-4"] body #workbench:not(.reader-open) #situation-list .situation > .c-rep > .report-button:hover svg { stroke: #111113; } html:root[data-design="pro-light-4"] body #workbench:not(.reader-open) #situation-list .situation > .c-rep > .report-button svg { flex: none; width: 15px; height: 15px; margin-left: auto; stroke: var(--orange); stroke-width: 2.2; transition: transform .15s, stroke .15s; } html:root[data-design="pro-light-4"] body #workbench:not(.reader-open) #situation-list .situation > .c-rep > .report-button:hover svg { transform: translate(2px, -2px); } } /* spin-offs: the same list, flush with its hairlines, the sorted mark just outside */ html:root[data-design="pro-light-4"] body #workbench[data-tracker="spin-offs"] #situation-list .spin-figures { overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; } html:root[data-design="pro-light-4"] body #workbench[data-tracker="spin-offs"] #situation-list .spin-figure { position: relative; } html:root[data-design="pro-light-4"] body #workbench[data-tracker="spin-offs"] #situation-list .spin-figure + .spin-figure { border-top: 1px solid #e4e4e8; } html:root[data-design="pro-light-4"] body #workbench[data-tracker="spin-offs"] #situation-list .spin-figure button { padding: 12px 0; background: none; color: #6c6e75; font-size: 14.5px; font-weight: 500; line-height: 21px; } html:root[data-design="pro-light-4"] body #workbench[data-tracker="spin-offs"] #situation-list .spin-figure button:hover { color: #111113; } html:root[data-design="pro-light-4"] body #workbench[data-tracker="spin-offs"] #situation-list .spin-figure button[aria-pressed="true"] { box-shadow: none; background: none; color: #111113; font-weight: 600; } html:root[data-design="pro-light-4"] body #workbench[data-tracker="spin-offs"] #situation-list .spin-figure:has(> button[aria-pressed="true"])::before { content: ""; position: absolute; top: 50%; left: -14px; width: 3px; height: 20px; margin-top: -10px; border-radius: 2px; background: var(--orange); } html:root[data-design="pro-light-4"] body #workbench[data-tracker="spin-offs"] #situation-list .spin-figure > span { padding: 12px 0; color: #111113; font-size: 16px; font-weight: 600; line-height: 21px; text-align: right; } html:root[data-design="pro-light-4"] body #workbench[data-tracker="spin-offs"] #situation-list .spin-figure > span :is(.pill, .num-value) { display: inline; width: auto; min-width: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; font: inherit; text-align: right; } html:root[data-design="pro-light-4"] body #workbench[data-tracker="spin-offs"] #situation-list .spin-figure > span .pill.pos { color: var(--return-up); } html:root[data-design="pro-light-4"] body #workbench[data-tracker="spin-offs"] #situation-list .spin-figure > span .pill.neg { color: var(--return-down, #c0392b); } @media (max-width: 839px) { /* phones: the figures on the card itself, two across, split by hairlines; the left column lines up with the text */ html:root[data-design="pro-light-4"] body #workbench #situation-list .situation > :is(.m1, .m2, .m3, .c-tag) { --ln: #e4e4e8; overflow: visible; border-radius: 0 !important; background: transparent !important; } html:root[data-design="pro-light-4"] body #workbench #situation-list .situation > :is(.m2, .m3) { box-shadow: inset 0 1px 0 var(--ln); } html:root[data-design="pro-light-4"] body #workbench #situation-list .situation > :is(.m1, .c-tag) { box-shadow: inset 1px 0 0 var(--ln), inset 0 1px 0 var(--ln); } html:root[data-design="pro-light-4"] body #workbench #situation-list .situation > :is(.m2, .m3) > :is(.cell-label, .cell-hint) { padding: 12px 12px 0 0; } html:root[data-design="pro-light-4"] body #workbench #situation-list .situation > :is(.m2, .m3) > :is(.num-value, .pill, .text-value, .missing-value, .cell-word) { padding: 3px 12px 12px 0; } html:root[data-design="pro-light-4"] body #workbench #situation-list .situation > :is(.m1, .c-tag) > .cell-label { padding: 12px 0 0 16px; } html:root[data-design="pro-light-4"] body #workbench #situation-list .situation > .m1 > :is(.num-value, .text-value, .missing-value), html:root[data-design="pro-light-4"] body #workbench #situation-list .situation > .c-tag > .tag { padding: 3px 0 12px 16px; } /* the sorted figure: its label in black (no orange mark on phones) */ html:root[data-design="pro-light-4"] body #workbench[data-sort-column] #situation-list .situation > :is(.m1, .m2, .m3) > :is(.cell-hint, .cell-label) { background: none; } html:root[data-design="pro-light-4"] body #workbench[data-sort-column] #situation-list .situation > :is(.m1, .m2, .m3)::before { content: none; } /* the report: a clear dark button under the figures */ html:root[data-design="pro-light-4"] body #workbench #situation-list .situation > .c-rep:not(:empty) { margin: 14px 0 0; } html:root[data-design="pro-light-4"] body #workbench #situation-list .situation > .c-rep > .report-button { height: 44px; padding: 0 14px; border-radius: 8px; background: #171717; box-shadow: 0 1px 2px rgba(13,13,14,.12); color: #ffffff; font-size: 15px; font-weight: 600; text-decoration: none; } html:root[data-design="pro-light-4"] body #workbench #situation-list .situation > .c-rep > .report-button:hover { background: var(--orange); color: #111113; } html:root[data-design="pro-light-4"] body #workbench #situation-list .situation > .c-rep > .report-button:hover svg { stroke: #111113; } html:root[data-design="pro-light-4"] body #workbench #situation-list .situation > .c-rep > .report-button svg { stroke: var(--orange); } } /* Mergers and Strategic Reviews: a long summary shows its first five lines, the fifth ending "… Read more" (app.mjs cuts the text between words to fit, in .full.clip); Read more opens the whole summary (.full.whole) in place, which ends "Show less". Both links are words of the text: its size, in black, with a small orange arrow. */ /* hidden unless the card is cut short (it must outweigh the designs' own ".summary .full" rules) */ .summary .full.clip, html:root body #workbench #situation-list .situation .summary .full.clip { display: none; } html:root[data-design^="pro"] body #workbench:not(.reader-open) #situation-list .situation:is(.clipped:not(.expanded)) .summary .full.clip { display: block; } html:root[data-design^="pro"] body #workbench:not(.reader-open) #situation-list .situation:is(.clipped:not(.expanded)) .summary .full.whole { display: none; } html:root[data-design^="pro"] body #workbench #situation-list .situation:not(.clipped.expanded) .read-more.less { display: none; } html:root[data-design^="pro"] body :is(#workbench #situation-list .situation, .summary-measure) .summary .clip-end { font: inherit; } html:root[data-design^="pro"] body :is(#workbench #situation-list .situation, .summary-measure) .read-more { display: inline; margin: 0; padding: 0; border: 0; border-radius: 2px; background: none; color: #111113; font: inherit; font-weight: 600; letter-spacing: 0; white-space: nowrap; cursor: pointer; transition: color .15s; } html:root[data-design^="pro"] body #workbench #situation-list .situation .read-more:hover { color: #b45309; } html:root[data-design^="pro"] body #workbench #situation-list .situation .read-more:focus-visible { outline: 2px solid #ff9900; outline-offset: 2px; } html:root[data-design^="pro"] body :is(#workbench #situation-list .situation, .summary-measure) .read-more svg { display: inline-block; width: .85em; height: .85em; margin-left: .25em; vertical-align: -.08em; fill: none; stroke: #ff9900; stroke-width: 2.2; transition: transform .15s; } html:root[data-design^="pro"] body #workbench #situation-list .situation .read-more.less svg { transform: rotate(180deg); } /* the hidden copy app.mjs lays its trial cuts out in: set like the card's text (it copies the text's font, size, spacing, alignment and hyphens onto .full) */ .summary-measure { position: absolute; top: 0; left: -10000px; visibility: hidden; pointer-events: none; contain: layout; } .summary-measure .summary { max-width: none; } html:root body .summary-measure .full { display: block; } html:root body .summary-measure .full p { margin: 0 0 var(--paragraph-gap, 8px); font: inherit !important; letter-spacing: inherit; word-spacing: inherit; text-align: inherit; hyphens: inherit; -webkit-hyphens: inherit; white-space: pre-line; } html:root body .summary-measure .full p:last-child { margin-bottom: 0; } /* Sort & filter menu: its choices drawn like the tracker cards and the Sort & filter button (white, a hairline edge, rounded corners, a slight lift on hover); the chosen one has the orange edge, as the chosen tracker does. The "Show situations" button gets the same rounded corners. */ html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-item { height: 38px; padding: 0 13px; border-radius: 8px; background: linear-gradient(180deg, #ffffff 55%, #fbfbfc); box-shadow: inset 0 0 0 1px #e4e4e8, 0 1px 2px rgba(13,13,14,.04); color: #3b3d43; font-weight: 500; transition: box-shadow .2s, transform .2s, color .15s; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-filter-item { padding: 0 11px 0 13px; } @media (hover: hover) { html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-item:hover { background: linear-gradient(180deg, #ffffff 55%, #fbfbfc); box-shadow: inset 0 0 0 1px #d2d3d8, 0 8px 18px -12px rgba(13,13,14,.35); color: #111113; transform: translateY(-1px); } } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-item:active { transform: translateY(0) scale(.98); } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-item[aria-checked=true], html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-item[aria-checked=true]:hover { background: #ffffff; box-shadow: inset 0 0 0 1.5px var(--orange), 0 1px 2px rgba(180,83,9,.10), 0 6px 14px -9px rgba(180,83,9,.45); color: #111113; font-weight: 600; transform: none; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-item:focus-visible { box-shadow: inset 0 0 0 1px #e4e4e8; outline: 2px solid var(--orange); outline-offset: 2px; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-item[aria-checked=true]:focus-visible { box-shadow: inset 0 0 0 1.5px var(--orange); } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-item .filter-item-count { margin-left: 3px; color: #8a8c93; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-item[aria-checked=true] .filter-item-count { color: #b45309; } html:root[data-design="pro-light-4"] body #list-pane .list-tools :is(#sort-menu-items, #sort-filter-items) { gap: 8px; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-done { border-radius: 8px; } @media (max-width: 839px) { html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-item { height: 40px; padding: 0 8px; } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-filter-item { padding: 0 10px 0 11px; } html:root[data-design="pro-light-4"] body #list-pane .list-tools :is(#sort-menu-items, #sort-filter-items) { gap: 6px; } } html:root[data-design="pro-light-4"] body #list-pane .list-tools .sort-menu.sort-one-column #sort-menu-items { grid-template-columns: minmax(0, 1fr); } /* ============================================================================================================ THE SIDE WINDOW'S FIGURES BOX, polished: rounded like the cards, a quiet grey with lighter dividers, every value at one size and every label at one smaller size. Mergers: Spread, Consideration and Buyer on one line (a long buyer or consideration wraps between words; app.mjs moves a cell to a row of its own only when even its longest word does not fit). ============================================================================================================ */ html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics { gap: 1px; border-radius: 12px; background: #e7e7eb; box-shadow: 0 0 0 1px #e7e7eb; } html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics :is(div, div + div, .fig-more, .fig-buyer) { gap: 6px; padding: 16px 20px 18px; background: #f5f5f7; } html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics :is(dt, div + div dt, .cell-hint, .cell-label-info) { color: #6c6e75; font-size: 13.5px; line-height: 20px; } html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics :is(.figure, .small-value, .meter-word, .num-value, .text-value, .tag, .missing-value), html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics :is(.fig-more, .fig-buyer) :is(.num-value, .text-value, .tag, .missing-value) { font-size: 20px; font-weight: 600; line-height: 26px; letter-spacing: -0.01em; } html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics .meter-with-word { min-height: 26px; gap: 9px; } html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics .fig-buyer .text-value { white-space: normal; overflow-wrap: break-word; } /* one line: Spread at its width, Consideration at its width (wrapping past 45% of the box), the buyer in the rest */ html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.one-row { grid-template-columns: max-content fit-content(45%) minmax(0, 1fr); } html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.one-row:not(.fitted) > div:is(div, .fig-buyer.fig-buyer.fig-buyer) { order: 0; grid-column: auto; } /* a narrow side window or a phone: Spread and Consideration, then the buyer under them */ @container reader (max-width: 470px) { html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.one-row { grid-template-columns: repeat(6, minmax(0, 1fr)); } html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.one-row:not(.fitted) > div:is(div, .fig-buyer.fig-buyer.fig-buyer) { grid-column: span 3; } html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.one-row:not(.fitted) > div.fig-buyer.fig-buyer.fig-buyer { order: 1; grid-column: 1 / -1; } } html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.fig-measure > div.fig-wrap > dd { width: min-content !important; } @media (max-width: 560px) { html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics :is(div, div + div, .fig-more, .fig-buyer) { padding: 14px 16px 16px; } html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics :is(.figure, .small-value, .meter-word, .num-value, .text-value, .tag, .missing-value), html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics :is(.fig-more, .fig-buyer) :is(.num-value, .text-value, .tag, .missing-value) { font-size: 18px; line-height: 24px; } } /* the Updates box under it: the same rounded corners */ html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-updates { border-radius: 12px; } /* The side window's text at one size, 16px: the headline under the name, the figures' labels and values, the update dates and text, the investment summary and the deal's details (labels muted, values in bold); the section headings at one size above it, 18px. */ html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) :is(.reader-lede, .reader-buyer) { font-size: 16px; line-height: 26px; } html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) :is(.summary-prose p, .reader-updates-list p) { font-size: 16px; line-height: 26px; } html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-updates-list time { font-size: 16px; line-height: 22px; } html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-facts :is(dt, dd) { font-size: 16px; line-height: 24px; } html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics :is(dt, div + div dt, .cell-hint, .cell-label-info) { font-size: 16px; line-height: 22px; } html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics :is(.figure, .small-value, .meter-word, .num-value, .text-value, .tag, .missing-value), html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics :is(.fig-more, .fig-buyer) :is(.num-value, .text-value, .tag, .missing-value) { font-size: 16px; line-height: 22px; letter-spacing: 0; } html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics .meter-with-word { min-height: 22px; gap: 8px; } html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics :is(div, div + div, .fig-more, .fig-buyer) { gap: 4px; } html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) :is(.reader-updates-title, .reader-section) { font-size: 18px; line-height: 26px; } /* the lead figure (Spread, Return): two sizes above the other figures */ html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics .fig-lead .figure { font-size: 20px; line-height: 26px; letter-spacing: -0.01em; } /* the side window's figure hints: shown by app.mjs in a floating box (#float-tip), as the box clips its own */ html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics [data-tip]:is(:hover, :focus-visible)::after { content: none; display: none; } html:root[data-design] body #float-tip.float-tip { position: fixed; z-index: 1000; width: max-content; max-width: min(320px, calc(100vw - 16px)); padding: 6px 10px; border-radius: 4px; background: #171717; box-shadow: 0 8px 20px -10px rgba(0,0,0,.5); color: #ffffff; font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; pointer-events: none; } html:root[data-design] body #float-tip.float-tip[hidden] { display: none; } /* the sorted figure in the cards: marked only by the short orange bar; its label as the others (grey, not bold) */ @media (min-width: 840px) { html:root[data-design="pro-light-4"] body #workbench[data-sort-column="m1"]:not(.reader-open) #situation-list .situation > .m1 > :is(.cell-label, .cell-hint, .cell-sort), html:root[data-design="pro-light-4"] body #workbench[data-sort-column="m2"]:not(.reader-open) #situation-list .situation > .m2 > :is(.cell-label, .cell-hint, .cell-sort), html:root[data-design="pro-light-4"] body #workbench[data-sort-column="m3"]:not(.reader-open) #situation-list .situation > .m3 > :is(.cell-label, .cell-hint, .cell-sort) { color: #6c6e75; font-weight: 500; } html:root[data-design="pro-light-4"] body #workbench[data-tracker="spin-offs"] #situation-list .spin-figure button[aria-pressed="true"] { color: #6c6e75; font-weight: 500; } } /* spin-offs: the status and separation date at the top of the card's figures (labels as the others'), so not under the summary */ html:root[data-design="pro-light-4"] body #workbench[data-tracker="spin-offs"] #situation-list .spin-figure > span.spin-label { align-self: center; padding: 12px 0; color: #6c6e75; font-size: 14.5px; font-weight: 500; line-height: 21px; text-align: left; } html:root[data-design="pro-light-4"] body #workbench[data-tracker="spin-offs"] #situation-list .situation > .c-tag { display: none; } /* a signed figure among the box's smaller ones (e.g. a SpinCo's return): plain coloured text, as the others */ html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics .pill { display: inline; width: auto; min-width: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; font-size: 16px; font-weight: 600; line-height: 22px; letter-spacing: 0; text-align: left; } html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics .pill.pos { color: var(--return-up); } html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics .pill.neg { color: var(--return-down, #c0392b); } /* ============================================================================================================ Mergers, Strategic Reviews and Activist Campaigns cards: the key figure first (Spread, Return), the market cap last (Buybacks keep their order: the authorization % first) ============================================================================================================ */ @media (min-width: 840px) { html:root[data-design="pro-light-4"] body #workbench:is([data-tracker="mna"], [data-tracker="strategic-review"], [data-tracker="activist-campaigns"]):not(.reader-open) #situation-list .situation.grid { grid-template-areas: "sit m2 m2" "sum m2 m2" "sum m3 m3" "sum tag tag" "sum m1 m1" "sum rep rep" "sum . ."; } html:root[data-design="pro-light-4"] body #workbench:is([data-tracker="mna"], [data-tracker="strategic-review"], [data-tracker="activist-campaigns"]):not(.reader-open) #situation-list .situation > .m2.m2:not(.c-rep) { margin-top: -7px; box-shadow: none; } html:root[data-design="pro-light-4"] body #workbench:is([data-tracker="mna"], [data-tracker="strategic-review"], [data-tracker="activist-campaigns"]):not(.reader-open) #situation-list .situation > .m1.m1:not(.c-rep) { margin-top: 0; box-shadow: inset 0 1px 0 var(--pl); } } /* phones: two across, the key figure and the next one on top, the type and the market cap under them */ @media (max-width: 839px) { html:root[data-design="pro-light-4"] body #workbench:is([data-tracker="mna"], [data-tracker="strategic-review"], [data-tracker="activist-campaigns"]) #situation-list .situation.grid { grid-template-areas: "sit sit" "sum sum" "m2 m3" "tag m1" "rep rep"; } html:root[data-design="pro-light-4"] body #workbench:is([data-tracker="mna"], [data-tracker="strategic-review"], [data-tracker="activist-campaigns"]) #situation-list .situation > .m3.m3 { margin-top: 18px; box-shadow: inset 1px 0 0 var(--ln), inset 0 1px 0 var(--ln); } html:root[data-design="pro-light-4"] body #workbench:is([data-tracker="mna"], [data-tracker="strategic-review"], [data-tracker="activist-campaigns"]) #situation-list .situation > .m1.m1 { margin-top: -1px; } html:root[data-design="pro-light-4"] body #workbench:is([data-tracker="mna"], [data-tracker="strategic-review"], [data-tracker="activist-campaigns"]) #situation-list .situation > .c-tag.c-tag { box-shadow: inset 0 1px 0 var(--ln); } html:root[data-design="pro-light-4"] body #workbench:is([data-tracker="mna"], [data-tracker="strategic-review"], [data-tracker="activist-campaigns"]) #situation-list .situation > .m3 > :is(.cell-label, .cell-hint) { padding: 12px 0 0 16px; } html:root[data-design="pro-light-4"] body #workbench:is([data-tracker="mna"], [data-tracker="strategic-review"], [data-tracker="activist-campaigns"]) #situation-list .situation > .m3 > :is(.num-value, .pill, .text-value, .missing-value, .cell-word) { padding: 3px 0 12px 16px; } html:root[data-design="pro-light-4"] body #workbench:is([data-tracker="mna"], [data-tracker="strategic-review"], [data-tracker="activist-campaigns"]) #situation-list .situation > .c-tag > .cell-label { padding: 12px 12px 0 0; } html:root[data-design="pro-light-4"] body #workbench:is([data-tracker="mna"], [data-tracker="strategic-review"], [data-tracker="activist-campaigns"]) #situation-list .situation > .c-tag > .tag { padding: 3px 12px 12px 0; } } /* ============================================================================================================ Spin-offs ============================================================================================================ */ /* the cards' returns: an "i" by the label, its note in the floating box (as the side window's) */ html:root[data-design] body #workbench[data-tracker="spin-offs"] #situation-list .spin-figure.spin-hinted { grid-template-columns: max-content max-content minmax(0, 1fr); } html:root[data-design] body #workbench[data-tracker="spin-offs"] #situation-list .spin-figure > span.spin-hint { display: inline-flex; align-items: center; align-self: center; margin: 0 0 0 7px; padding: 0; color: #6c6e75; font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; cursor: help; } html:root[data-design] body #workbench[data-tracker="spin-offs"] #situation-list .spin-figure > span.spin-hint:is(:hover, :focus-visible) { color: #111113; } html:root[data-design] body #workbench[data-tracker="spin-offs"] #situation-list .spin-figure > span.spin-hint::after { content: none; display: none; } /* with the side window open the cards drop their figures, as in the other trackers */ html:root[data-design] body #workbench[data-tracker="spin-offs"].reader-open #situation-list .spin-figures { display: none; } html:root[data-design] body #workbench[data-tracker="spin-offs"].reader-open #situation-list .situation.grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "sit" "sum" "tag" "rep"; } /* the side window, completed: two rows of three (the status and the separation date on the left, then the parent, then the SpinCo), the returns two sizes up; a narrow window: the status and the date side by side, the two companies under them */ html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.spin-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.spin-grid.spin-grid > div { order: 0; grid-column: auto; padding-right: 16px; } html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.spin-grid .figure { font-size: 20px; line-height: 26px; letter-spacing: -0.01em; } @container reader (max-width: 470px) { html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.spin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.spin-grid.spin-grid > div:nth-child(4) { order: 1; } html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.spin-grid.spin-grid > div:nth-child(2) { order: 2; } html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.spin-grid.spin-grid > div:nth-child(3) { order: 3; } html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.spin-grid.spin-grid > div:nth-child(5) { order: 4; } html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.spin-grid.spin-grid > div:nth-child(6) { order: 5; } } /* the cards' figures: one width in every tracker (30% of the card, between 260px and 340px); the summaries end at the same place in every tracker, about under the Sort & filter button (66% of the card, less the gap and the 44px margin; 100cqw is the list, the card plus its 20px paddings) */ @media (min-width: 840px) { html:root[data-design="pro-light-4"] body #workbench:not([data-tracker="spin-offs"]):not(.reader-open) #situation-list .situation.grid { grid-template-columns: minmax(0, 1fr) clamp(130px, 15%, 170px) clamp(130px, 15%, 170px); } html:root[data-design="pro-light-4"] body #workbench[data-tracker="spin-offs"]:not(.reader-open) #situation-list .situation.grid { grid-template-columns: minmax(0, 1fr) clamp(260px, 30%, 340px); } html:root[data-design="pro-light-4"] body #workbench:not(.reader-open) #situation-list .situation > .c-sum > .summary { max-width: min(700px, calc(0.66 * (100cqw - 40px) - clamp(16px, 3vw, 44px) - 44px)); } } } /* spin-offs cards: the tickers as bold as the other figures */ html:root[data-design] body #workbench[data-tracker="spin-offs"] #situation-list .spin-figure > span .text-value { font-weight: 600; } /* spin-offs cards: the returns stand out, as the mergers' Spread and the reviews' Return do */ html:root[data-design="pro-light-4"] body #workbench[data-tracker="spin-offs"] #situation-list .spin-figure > span .pill.pill { font-size: 20px; line-height: 26px; letter-spacing: -0.015em; } @media (max-width: 839px) { html:root[data-design="pro-light-4"] body #workbench[data-tracker="spin-offs"] #situation-list .spin-figure > span .pill.pill { font-size: 18px; line-height: 22px; letter-spacing: -0.01em; } } /* spin-offs and buybacks: the sort orders' longer names still two to a row (the ranges' column a little narrower) */ @media (min-width: 840px) { @container pane (min-width: 1100px) { html:root[data-design="pro-light-4"] body #workbench:is([data-tracker="spin-offs"], [data-tracker="buybacks"]) #list-pane .list-tools .sort-menu:has(.range-filter) { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); } } } /* spin-offs: the status as a tag down the card's left edge, in place of a row among the figures (a quiet grey strip with a hairline, the word grey, or a muted green once completed); the card's text moves over to make room, the figures keep the other trackers' width and the summaries still end where theirs do */ html:root body .status-tag { display: none; } html:root[data-design="pro-light-4"] body #workbench[data-tracker="spin-offs"] #situation-list .situation.grid.grid { --spine: 27px; position: relative; padding-left: calc(var(--spine) + 20px); } html:root[data-design="pro-light-4"] body #workbench[data-tracker="spin-offs"] #situation-list .situation > .status-tag { position: absolute; z-index: 1; top: 1px; bottom: 1px; left: 1px; display: flex; align-items: center; justify-content: center; width: var(--spine); border-radius: 11px 0 0 11px; } html:root[data-design="pro-light-4"] body #workbench[data-tracker="spin-offs"] #situation-list .situation[aria-selected="true"] > .status-tag { left: 3px; border-radius: 9px 0 0 9px; } html:root[data-design="pro-light-4"] body #workbench[data-tracker="spin-offs"] #situation-list .situation > .status-tag > span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 9.75px; font-weight: 600; line-height: 1; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; } html:root[data-design="pro-light-4"] body #workbench[data-tracker="spin-offs"] #situation-list .situation > .status-tag.s-upcoming { background: #f0f0f3; box-shadow: inset -1px 0 0 #e4e4e8; color: #7a7c83; } html:root[data-design="pro-light-4"] body #workbench[data-tracker="spin-offs"] #situation-list .situation > .status-tag.s-completed { background: #f0f0f3; box-shadow: inset -1px 0 0 #e4e4e8; color: #3d7a52; } html:root[data-design="pro-light-4"] body #workbench[data-tracker="spin-offs"] #situation-list .situation > .status-tag.s-other { background: #f0f0f3; box-shadow: inset -1px 0 0 #e4e4e8; color: #7a7c83; } @media (min-width: 840px) { html:root[data-design="pro-light-4"] body #workbench[data-tracker="spin-offs"]:not(.reader-open) #situation-list .situation.grid.grid { grid-template-columns: minmax(0, 1fr) clamp(260px, calc((100% + var(--spine)) * .3), 340px); } html:root[data-design="pro-light-4"] body #workbench[data-tracker="spin-offs"]:not(.reader-open) #situation-list .situation.grid > .c-sum > .summary { max-width: min(700px, calc(0.66 * (100cqw - 40px) - clamp(16px, 3vw, 44px) - 44px - var(--spine))); } } @media (max-width: 839px) { html:root[data-design="pro-light-4"] body #workbench[data-tracker="spin-offs"] #situation-list .situation.grid.grid { --spine: 22px; padding-left: calc(var(--spine) + 16px); } html:root[data-design="pro-light-4"] body #workbench[data-tracker="spin-offs"] #situation-list .situation > .status-tag > span { font-size: 9px; } } /* activist campaigns, the side window: the activist, the primary objective and the return in a row of three (long names wrap), the return two sizes up; a narrow window: the activist across, the other two under it */ html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.act-grid.act-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.15fr) minmax(0, .8fr); } html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.act-grid.act-grid > div { order: 0; grid-column: auto; } html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.act-grid.act-grid :is(.text-value, .tag) { display: block; white-space: normal; overflow-wrap: break-word; } html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.act-grid .figure { font-size: 20px; line-height: 26px; letter-spacing: -0.01em; } @container reader (max-width: 470px) { html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.act-grid.act-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.act-grid.act-grid > div:first-child { grid-column: 1 / -1; } } /* the cards' figures, every tracker: a long value wraps with room above and below it, its label kept on one line */ @media (min-width: 840px) { html:root[data-design="pro-light-4"] body #workbench:not(.reader-open) #situation-list .situation.situation > :is(.m1, .m2, .m3, .c-tag) { padding-top: 12px; padding-bottom: 12px; } html:root[data-design="pro-light-4"] body #workbench:not(.reader-open) #situation-list .situation.situation > :is(.m1, .m2, .m3, .c-tag) > :is(.cell-label, .cell-hint) { flex: 0 0 auto; margin-right: auto; white-space: nowrap; } html:root[data-design="pro-light-4"] body #workbench:not(.reader-open) #situation-list .situation.situation > :is(.m1, .m2, .m3) > .text-value, html:root[data-design="pro-light-4"] body #workbench:not(.reader-open) #situation-list .situation.situation > .c-tag > .tag { flex: 1 1 auto; min-width: 0; max-width: none; line-height: 22px; } } /* buybacks, the side window: the market cap, the authorization and the return in a row of three, the return two sizes up; a narrow window: the first two side by side, the return under them */ html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.three-up.three-up { grid-template-columns: repeat(3, minmax(0, 1fr)); } html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.three-up.three-up > div { order: 0; grid-column: auto; } html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.three-up.three-up :is(.text-value, .tag) { display: block; white-space: normal; overflow-wrap: break-word; } html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.three-up .figure { font-size: 20px; line-height: 26px; letter-spacing: -0.01em; } @container reader (max-width: 470px) { html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.three-up.three-up { grid-template-columns: repeat(2, minmax(0, 1fr)); } html:root[data-design^="pro"] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-metrics.three-up.three-up > div:last-child { grid-column: 1 / -1; } } /* buybacks cards: the authorization as a % of the market cap first, in orange and two sizes up (as the other trackers' key figure), its long name wrapping if the column is narrow; then the return (with its note), the market cap (the fourth column, .m4, styled as .m3), the authorization and the method. Phones: two across, the method across the foot */ html:root[data-design="pro-light-4"] body #workbench[data-tracker="buybacks"] #situation-list .situation.situation > .m1 > .num-value.num-value { color: #e08600; font-size: 20px; line-height: 26px; letter-spacing: -0.015em; } @media (min-width: 840px) { html:root[data-design="pro-light-4"] body #workbench[data-tracker="buybacks"]:not(.reader-open) #situation-list .situation.situation > .m1 > .cell-label { flex: 0 1 auto; min-width: 0; white-space: normal; } } @media (max-width: 839px) { html:root[data-design="pro-light-4"] body #workbench[data-tracker="buybacks"] #situation-list .situation.grid { grid-template-areas: "sit sit" "sum sum" "m1 m2" "m4 m3" "tag tag" "rep rep"; } html:root[data-design="pro-light-4"] body #workbench[data-tracker="buybacks"] #situation-list .situation.situation > .m3:not(.m4) { box-shadow: inset 1px 0 0 var(--ln), inset 0 1px 0 var(--ln); } html:root[data-design="pro-light-4"] body #workbench[data-tracker="buybacks"] #situation-list .situation.situation > .m3:not(.m4) > :is(.cell-label, .cell-hint) { padding: 12px 0 0 16px; } html:root[data-design="pro-light-4"] body #workbench[data-tracker="buybacks"] #situation-list .situation.situation > .m3:not(.m4) > :is(.num-value, .pill, .text-value, .missing-value) { padding: 3px 0 12px 16px; } html:root[data-design="pro-light-4"] body #workbench[data-tracker="buybacks"] #situation-list .situation.situation > .c-tag.c-tag { box-shadow: inset 0 1px 0 var(--ln); } html:root[data-design="pro-light-4"] body #workbench[data-tracker="buybacks"] #situation-list .situation.situation > .c-tag > .cell-label { padding: 12px 12px 0 0; } html:root[data-design="pro-light-4"] body #workbench[data-tracker="buybacks"] #situation-list .situation.situation > .c-tag > .tag { padding: 3px 12px 12px 0; } html:root[data-design="pro-light-4"] body #workbench[data-tracker="buybacks"][data-sort-column="m4"] #situation-list .situation.situation > .m4 > .cell-label { color: #111113; font-weight: 600; } html:root[data-design="pro-light-4"] body #workbench[data-tracker="buybacks"] #situation-list .situation.situation > .m1 > .num-value.num-value { font-size: 18px; line-height: 22px; letter-spacing: -0.01em; } html:root[data-design="pro-light-4"] body #workbench[data-tracker="buybacks"] #situation-list .situation.situation > .m1 { box-shadow: inset 0 1px 0 var(--ln); } html:root[data-design="pro-light-4"] body #workbench[data-tracker="buybacks"] #situation-list .situation.situation > .m1 > .cell-label { padding: 12px 12px 0 0; } html:root[data-design="pro-light-4"] body #workbench[data-tracker="buybacks"] #situation-list .situation.situation > .m1 > :is(.num-value, .text-value, .missing-value) { padding: 3px 12px 12px 0; } html:root[data-design="pro-light-4"] body #workbench[data-tracker="buybacks"] #situation-list .situation.situation > .m2 { box-shadow: inset 1px 0 0 var(--ln), inset 0 1px 0 var(--ln); } html:root[data-design="pro-light-4"] body #workbench[data-tracker="buybacks"] #situation-list .situation.situation > .m2 > :is(.cell-label, .cell-hint) { padding: 12px 0 0 16px; } html:root[data-design="pro-light-4"] body #workbench[data-tracker="buybacks"] #situation-list .situation.situation > .m2 > :is(.num-value, .pill, .text-value, .missing-value) { padding: 3px 0 12px 16px; } } html:root[data-design="pro-light-4"] body #workbench[data-tracker="buybacks"] #situation-list .situation.situation > .m4 { grid-area: m4; } @media (min-width: 840px) { html:root[data-design="pro-light-4"] body #workbench[data-tracker="buybacks"]:not(.reader-open) #situation-list .situation.grid { grid-template-rows: auto auto auto auto auto auto auto 1fr; grid-template-areas: "sit m1 m1" "sum m1 m1" "sum m2 m2" "sum m4 m4" "sum m3 m3" "sum tag tag" "sum rep rep" "sum . ."; } /* sorted by the market cap: the short orange mark by it, as by the others */ html:root[data-design="pro-light-4"] body #workbench[data-tracker="buybacks"][data-sort-column="m4"]:not(.reader-open) #situation-list .situation.situation > .m4::before { content: ""; display: block; position: absolute; top: 50%; left: -14px; width: 3px; height: 20px; margin-top: -10px; border-radius: 2px; background: var(--orange); } } /* Buybacks and Activist Campaigns cards: the catalyst (.mcat, a third figure's styles), its bars by the word as in the Strategic Reviews cards. Buybacks: in the method's place, the method being in the side window. Activist Campaigns: under the return; on phones by the return, with the activist and the market cap under them and the objective across the foot */ html:root[data-design="pro-light-4"] body #workbench[data-tracker="buybacks"] #situation-list .situation.situation > .c-tag { display: none; } html:root[data-design="pro-light-4"] body #workbench[data-tracker="buybacks"] #situation-list .situation.situation > .mcat { grid-area: tag; } html:root[data-design="pro-light-4"] body #workbench[data-tracker="activist-campaigns"] #situation-list .situation.situation > .mcat { grid-area: cat; } @media (min-width: 840px) { html:root[data-design="pro-light-4"] body #workbench[data-tracker="activist-campaigns"]:not(.reader-open) #situation-list .situation.grid { grid-template-rows: auto auto auto auto auto auto auto 1fr; grid-template-areas: "sit m2 m2" "sum m2 m2" "sum cat cat" "sum m3 m3" "sum tag tag" "sum m1 m1" "sum rep rep" "sum . ."; } } @media (max-width: 839px) { html:root[data-design="pro-light-4"] body #workbench[data-tracker="buybacks"] #situation-list .situation.situation > .m3.mcat.mcat { margin-top: 0; box-shadow: inset 0 1px 0 var(--ln); } html:root[data-design="pro-light-4"] body #workbench[data-tracker="buybacks"] #situation-list .situation.situation > .m3.mcat.mcat > :is(.cell-label, .cell-hint) { padding: 12px 12px 0 0; } html:root[data-design="pro-light-4"] body #workbench[data-tracker="buybacks"] #situation-list .situation.situation > .m3.mcat.mcat > :is(.num-value, .pill, .text-value, .missing-value, .cell-word, .meter) { padding: 3px 12px 12px 0; } html:root[data-design="pro-light-4"] body #workbench[data-tracker="activist-campaigns"] #situation-list .situation.grid { grid-template-areas: "sit sit" "sum sum" "m2 cat" "m3 m1" "tag tag" "rep rep"; } html:root[data-design="pro-light-4"] body #workbench[data-tracker="activist-campaigns"] #situation-list .situation.situation > .m3.m3:not(.mcat) { margin-top: 0; box-shadow: inset 0 1px 0 var(--ln); } html:root[data-design="pro-light-4"] body #workbench[data-tracker="activist-campaigns"] #situation-list .situation.situation > .m3:not(.mcat) > :is(.cell-label, .cell-hint) { padding: 12px 12px 0 0; } html:root[data-design="pro-light-4"] body #workbench[data-tracker="activist-campaigns"] #situation-list .situation.situation > .m3:not(.mcat) > :is(.num-value, .pill, .text-value, .missing-value) { padding: 3px 12px 12px 0; } html:root[data-design="pro-light-4"] body #workbench[data-tracker="activist-campaigns"] #situation-list .situation.situation > .m1.m1 { box-shadow: inset 1px 0 0 var(--ln), inset 0 1px 0 var(--ln); } html:root[data-design="pro-light-4"] body #workbench[data-tracker="activist-campaigns"] #situation-list .situation.situation > .m1 > :is(.cell-label, .cell-hint) { padding: 12px 0 0 16px; } html:root[data-design="pro-light-4"] body #workbench[data-tracker="activist-campaigns"] #situation-list .situation.situation > .m1 > :is(.num-value, .pill, .text-value, .missing-value) { padding: 3px 0 12px 16px; } } /* phones: a negative key figure (spread, return) in red, as on wider screens */ @media (max-width: 839px) { html:root[data-design="pro-light-4"] body #workbench #situation-list .situation.situation > .m2 > .pill.neg { color: var(--return-down, #c0392b); } } /* every label is written in sentence case, with only the first word capitalised and names such as SpinCo as written, so the labels of the cards, the sort and filter menus and the column heads are shown exactly as written */ html:root[data-design="pro-light-4"] body #workbench #situation-list .situation :is(.cell-label, .cell-hint, .cell-label-info, .cell-sort) { text-transform: none; } html:root[data-design="pro-light-4"] body :is(.th, .th .sort-button, .sort-tag, .filter-toggle, .filter-menu-heading) { text-transform: none; } /* New: a case added in the last seven days. A small green tag after the company's name, in the cards and in the side window's header: NEW and a filled round "i" whose note says what New means; Sort & filter lists "Added over the last 7 days" above the types */ html:root[data-design] body .new-tag { display: inline-flex; flex: none; align-items: center; height: 17px; margin-left: 9px; padding: 1px 5px 0 7px; border-radius: 4px; background: #e8f5ec; color: #17703d; font-size: 9px; font-weight: 600; line-height: 1; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; vertical-align: 2px; cursor: help; outline: 0; transition: background-color .15s; } html:root[data-design] body .new-tag:is(:hover, :focus-visible) { background: #dcf0e3; } html:root[data-design] body .new-tag:focus-visible { box-shadow: 0 0 0 2px #17703d; } html:root[data-design] body .new-tag .hint-i { display: inline-grid; place-items: center; width: 10px; height: 10px; margin: -1px 0 0 5px; border-radius: 50%; background: #17703d; color: #e8f5ec; box-shadow: none; opacity: .85; text-transform: none; letter-spacing: 0; } html:root[data-design] body .new-tag .hint-i::before { content: "i"; margin-top: 1px; font-size: 7.5px; font-weight: 700; line-height: 1; } html:root[data-design] body :is(#research-panel, #mobile-reader, .reader-showcase) .reader-co .new-tag { height: 19px; margin-left: 10px; padding: 1px 6px 0 7px; font-size: 9.5px; vertical-align: 4px; } /* Sort & filter: the New choice sits at the top of the filters section, a line between it and the types */ html:root[data-design="pro-light-4"] body #list-pane .list-tools #sort-new { margin: 0 0 14px; padding: 0 0 14px; border-bottom: 1px solid #ececef; } html:root[data-design="pro-light-4"] body #list-pane .list-tools #sort-new-items { display: flex; flex-wrap: wrap; gap: 8px; }