:root { --font-sans: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif; --font-display: "Gill Sans", "Avenir Next Condensed", "Trebuchet MS", sans-serif; --font-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif; --page-bg: linear-gradient(180deg, var(--surface-warm) 0%, var(--surface-warm-warning) 32%, var(--surface-pale-cool) 100%); --surface-bg: rgba(255, 255, 255, 0.92); --surface-muted: #fff4e2; --border-soft: var(--border-warm-soft); --border-strong: var(--border-cool); --text-main: #1c3343; --text-muted: #3a4a55; --accent-teal: #2a5e60; --agent-chat-button-bg: linear-gradient(135deg, var(--info-teal-bg-bright) 0%, var(--info-blue-border-dark) 100%); --agent-chat-button-border: rgba(12, 49, 55, 0.22); --agent-chat-button-shadow: 0 14px 30px rgba(24, 76, 84, 0.28); --agent-chat-button-shadow-hover: 0 18px 34px rgba(24, 76, 84, 0.34); --button-action-bg: #111111; --button-action-text: #ffffff; --button-nav-bg: #3f8c5a; --button-admin-bg: #7a2e18; --button-disabled-bg: var(--ink-cool-grey); --table-stripe-bg: #eaf3f6; --shadow-soft: 0 12px 32px rgba(27, 39, 51, 0.08); } html { /* Solid warm cream for the bare cross-document navigation flash. Was --surface-pale-cool (a solid blue), then briefly --page-bg — but that gradient BOTTOMS OUT in --surface-pale-cool, so the lower half of the viewport still flashed blue. A flat warm fill keeps the whole flash on-brand top-to-bottom (and on overscroll). 2026-06-06. */ background: var(--surface-warm); } body { font-family: var(--font-sans); margin: 0; padding: 32px 24px 48px; background: radial-gradient(circle at top left, rgba(159, 190, 113, 0.16), transparent 28%), radial-gradient(circle at top right, rgba(47, 106, 115, 0.12), transparent 22%), var(--page-bg); color: var(--text-main); overflow-y: scroll; scrollbar-gutter: stable; } .wrap { max-width: 1460px; margin: 0 auto; } .card { background: var(--surface-bg); backdrop-filter: blur(12px); border: 1px solid rgba(221, 211, 194, 0.92); border-radius: 20px; padding: 18px; margin-bottom: 18px; box-shadow: var(--shadow-soft); } .page-shell { padding: 24px 30px; } .admin-top-offset { margin-top: 24px; } .page-title { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(32px, 4.4vw, 48px); letter-spacing: 0.08em; margin: 0 0 12px 0; font-weight: 800; line-height: 0.98; } .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .muted { color: var(--text-muted); } .small { font-size: 13px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .body-text { font-family: var(--font-serif); text-align: justify; /* Hyphenation + Knuth-Plass-style line-break optimization make justified paragraphs render closer to print quality (no rivers of whitespace, fewer ugly word-spaced lines). The `lang` attribute on tells the browser which hyphenation dictionary to use. `text-wrap: pretty` is a progressive enhancement — older browsers ignore it and fall back to default justification. */ hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty; text-justify: inter-word; line-height: 1.72; color: var(--ink-navy); } /* Shared utility class for long-form prose. Apply this to any paragraph-level body copy where you want print-quality justified rendering — analyst briefs, report sections, channel summaries, etc. Don't apply to headings, button labels, list items, table cells, or any column narrower than ~45 chars. */ .prose-justified { text-align: justify; hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty; text-justify: inter-word; } .site-legal-footer { /* Same width constraint + auto-margins as `.wrap` so the footer centers on the same axis as the page content above. Without this, the footer is body-wide and on viewports > 1460px the text-align center drifted off the content's visual center (most visible on the report page, which has a 200px left rail inside .wrap that further offsets the eye's "center"). */ max-width: 1460px; margin: 18px auto 0 auto; padding: 0 6px 18px; text-align: center; color: var(--ink-muted); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; } .site-legal-footer a { color: inherit; text-decoration: none; font-weight: 800; transition: color 0.14s ease, opacity 0.14s ease; } .site-legal-footer a:hover { color: var(--info-teal-text-deep); } .site-legal-footer a.is-active, .site-legal-footer a[aria-current="page"] { color: var(--ink-slate); opacity: 1; font-weight: 840; } .site-legal-footer a:not(.is-active):not([aria-current="page"]) { opacity: 0.94; } .site-legal-footer-sep { margin: 0 8px; opacity: 0.58; } .entity-page-link { display: inline-flex; align-items: center; gap: 6px; } .entity-page-link-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .entity-page-link-icon-channel { width: 14px; height: 10px; border-radius: 4px; background: var(--ink-darkest); position: relative; } .entity-page-link-icon-channel::before { content: ""; width: 0; height: 0; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 5px solid var(--surface-white); margin-left: 1px; } .entity-page-link-icon-speaker { width: 12px; height: 12px; position: relative; } .entity-page-link-icon-speaker::before { content: ""; position: absolute; top: 0; left: 3px; width: 6px; height: 6px; border-radius: 999px; background: var(--ink-darkest); } .entity-page-link-icon-speaker::after { content: ""; position: absolute; left: 1px; bottom: 0; width: 10px; height: 5px; border-radius: 6px 6px 3px 3px; background: var(--ink-darkest); } .section-title { font-family: var(--font-display); text-transform: uppercase; font-size: 20px; letter-spacing: 0.08em; margin-top: 24px; margin-bottom: 0; font-weight: bold; } .section-title.table-title.agent-main-title { text-align: center; font-size: 30px; margin-bottom: 18px; } .table-title { font-size: 23px; } .subcard { background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247,250,251,0.96)); border: 1px solid var(--border-pale); border-radius: 16px; padding: 18px; margin-bottom: 18px; } .header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .inline-form { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .inline-form .grow { flex: 1 1 680px; } .button-wide { min-width: 180px; text-align: center; margin-left: 10px; } .more-button { min-width: 132px; } .spinner { display: inline-block; width: 12px; height: 12px; margin-left: 8px; border: 2px solid var(--border-pale); border-top-color: var(--ink-darkest); border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: middle; } .hidden { display: none; } /* 2026-05-25 — `!important` so the utility class beats more specific component rules that set display: grid / flex (e.g. `.settings-v2-channel-list-wrap .followed-channel-row` and `.settings-v2-feeder-list .settings-v2-feeder-row` both set `display: grid`, specificity 0,2,0, which used to win over the bare-class `.u-hide` at 0,1,0). Symptom was the /channels page opening with all rows visible even though rows past index 10 had the `u-hide` class server-rendered — the "SHOW MORE" button label was correct but the rows weren't actually hidden. Utility classes need to win; flagging with !important makes the intent explicit. */ .u-hide { display: none !important; } .u-m-0 { margin: 0; } .u-mt-0 { margin-top: 0; } .u-mt-4 { margin-top: 4px; } .u-mt-6 { margin-top: 6px; } .u-mt-8 { margin-top: 8px; } .u-mt-10 { margin-top: 10px; } .u-mt-12 { margin-top: 12px; } .u-mt-14 { margin-top: 14px; } .u-mt-16 { margin-top: 16px; } .u-mt-18 { margin-top: 18px; } .u-mt-20 { margin-top: 20px; } .u-mt-22 { margin-top: 22px; } .u-mt-24 { margin-top: 24px; } .u-mt-26 { margin-top: 26px; } .u-mt-44 { margin-top: 44px; } .u-mt-3 { margin-top: 3px; } .u-m-4-0-0-0 { margin: 4px 0 0 0; } .u-m-6-0-0-0 { margin: 6px 0 0 0; } .u-m-8-0-0-0 { margin: 8px 0 0 0; } .u-m-10-0-0-0 { margin: 10px 0 0 0; } .u-m-12-0-0-0 { margin: 12px 0 0 0; } .u-m-14-0-0-0 { margin: 14px 0 0 0; } .u-m-16-0-0-0 { margin: 16px 0 0 0; } .u-m-18-0-0-0 { margin: 18px 0 0 0; } .u-m-44-0-0-0 { margin: 44px 0 0 0; } .u-mb-0 { margin-bottom: 0; } .u-mb-6 { margin-bottom: 6px; } .u-mb-8 { margin-bottom: 8px; } .u-mb-10 { margin-bottom: 10px; } .u-mb-12 { margin-bottom: 12px; } .u-mb-14 { margin-bottom: 14px; } .u-mb-16 { margin-bottom: 16px; } .u-mb-18 { margin-bottom: 18px; } .u-mb-44 { margin-bottom: 44px; } .u-mb-10-fw-600 { margin-bottom: 10px; font-weight: 600; } .u-text-center { text-align: center; } .u-text-left { text-align: left; } .u-dblock-center { display: block; text-align: center; width: 100%; } .u-dblock-center-no-width { display: block; text-align: center; } .u-center-note { text-align: center; margin: 0 auto 14px auto; max-width: 640px; } .u-text-red { color: red; } .u-fw-700 { font-weight: 700; } .u-fw-900 { font-weight: 900; } .u-fs-12-lh-1 { font-size: 12px; line-height: 1; } .u-fs-15-lh-17 { font-size: 15px; line-height: 1.7; } .u-fs-18-lh-13 { font-size: 18px; line-height: 1.3; } .u-uppercase-tight { letter-spacing: 0.04em; text-transform: uppercase; } .u-underline-offset-2 { text-decoration: underline; text-underline-offset: 2px; } .u-white-space-prewrap { white-space: pre-wrap; } .u-justify-center { justify-content: center; } .u-inline-flex-center { display: inline-flex; align-items: center; justify-content: center; } .u-dblock { display: block; } .u-flex-center { display: flex; align-items: center; justify-content: center; } .u-flex-center-gap-10 { display: flex; align-items: center; justify-content: center; gap: 10px; } .u-flex-gap-10-center { display: flex; gap: 10px; align-items: center; justify-content: center; } .u-flex-gap-8-center { display: flex; gap: 8px; align-items: center; justify-content: center; } .u-flex-col-gap-4-center { display: flex; flex-direction: column; gap: 4px; align-items: center; line-height: 1.25; } .u-flex-wrap-gap-6 { display: flex; flex-wrap: wrap; gap: 6px; } .u-flex-wrap-gap-12-center { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .u-flex-wrap-gap-10-start { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; } .u-flex-gap-12-wrap-center { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .u-flex-end { display: flex; justify-content: flex-end; } .u-inline-flex-gap-6 { display: inline-flex; align-items: center; gap: 6px; } .u-inline-block { display: inline-block; } .u-w100 { width: 100%; } .u-w100-mb10 { width: 100%; margin-bottom: 10px; } .u-w-34pct { width: 34%; } .u-w-36pct { width: 36%; } .u-w-40pct { width: 40%; } .u-w-42pct { width: 42%; } .u-w-44pct { width: 44%; } .u-w-45pct { width: 45%; } .u-w-48pct { width: 48%; } .u-w-7pct { width: 7%; } .u-w-8pct { width: 8%; } .u-w-9pct { width: 9%; } .u-w-10pct { width: 10%; } .u-w-11pct { width: 11%; } .u-w-12pct { width: 12%; } .u-w-13pct { width: 13%; } .u-w-14pct { width: 14%; } .u-w-15pct { width: 15%; } .u-w-16pct { width: 16%; } .u-w-18pct { width: 18%; } .u-w-20pct { width: 20%; } .u-w-22pct { width: 22%; } .u-w-26pct { width: 26%; } .u-w-28pct { width: 28%; } .u-w-30pct { width: 30%; } .u-h-10 { height: 10px; } .u-bg-white { background: var(--surface-white); } .u-bg-white-mb0 { background: var(--surface-white); margin-bottom: 0; } .u-bg-peach { background: var(--surface-warm-warning); } .u-bg-ice { background: var(--surface-pale-cool); } .u-surface-gradient-sand { background: linear-gradient(135deg, var(--surface-warm) 0%, var(--surface-white) 42%, var(--surface-mint) 100%); border: 1px solid var(--border-warm-soft); } .u-surface-gradient-soft { background: linear-gradient(135deg, #f5f1e7 0%, var(--surface-white) 42%, #e7efe7 100%); border: 1px solid #e6dfcf; } .u-grid-gap-10-mt12 { display: grid; gap: 10px; margin-top: 12px; } .u-grid-gap-14 { display: grid; gap: 14px; } .u-flex-gap-10-wrap { display: flex; gap: 10px; flex-wrap: wrap; } .u-flex-gap-10-wrap-start { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; } .u-flex-mt16-end { margin-top: 16px; display: flex; justify-content: flex-end; } .u-display-none-mt44 { display: none; margin-top: 44px; } .u-display-none-mt10 { display: none; margin-top: 10px; } .u-px-12-py-14 { justify-content: center; padding: 12px 14px; } .u-m-0-flex-jc-center { margin: 0; display: flex; justify-content: center; } .u-minh-46 { min-height: 46px; } .u-meta-eyebrow { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #666666; margin-bottom: 10px; } .u-fs-16-lh-14-fw-400 { font-size: 16px; line-height: 1.4; font-weight: 400; } .u-minw-92 { min-width: 92px; } .u-minw-96 { min-width: 96px; } .u-minw-128 { min-width: 128px; } .u-minw-140 { min-width: 140px; } .u-minw-160 { min-width: 160px; } .u-minw-170 { min-width: 170px; } .u-minw-180 { min-width: 180px; } .u-minw-220 { min-width: 220px; } .u-minw-240 { min-width: 240px; } .u-minw-88 { min-width: 88px; } .u-minw-104 { min-width: 104px; } .u-minw-110 { min-width: 110px; } .u-minw-120 { min-width: 120px; } .u-minw-300 { min-width: 300px; } .u-minw-320 { min-width: 320px; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .table-fixed { table-layout: fixed; } .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mosaic { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .mosaic-item { border: 1px solid var(--border-pale); border-radius: 10px; padding: 12px; background: var(--surface-white); } .mosaic-thumb { display: block; width: auto; max-width: 100%; height: 140px; object-fit: contain; border-radius: 8px; background: var(--surface-pale-cool); margin: 0 auto 0 0; } .summary-hero { display: grid; grid-template-columns: minmax(500px, 560px) minmax(360px, 560px); gap: 14px; align-items: center; justify-content: center; margin: 0 auto; } .thumb-large { display: block; width: 100%; max-width: 500px; border-radius: 12px; background: var(--surface-white); } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes pendingPulse { 0% { transform: scale(0.92); opacity: 0.62; box-shadow: 0 0 0 0 rgba(98, 153, 190, 0.18); } 50% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 4px rgba(98, 153, 190, 0.1); } 100% { transform: scale(0.92); opacity: 0.62; box-shadow: 0 0 0 0 rgba(98, 153, 190, 0.02); } } @media (max-width: 960px) { body { padding: 18px 14px 36px; } .app-shell-page { padding-top: 100px; } .app-shell-page.app-shell-page-with-extension { padding-top: 156px; } .app-shell-topbar { top: 12px; left: 12px; right: 12px; min-height: 68px; padding: 12px 14px; } .app-shell-topbar-right .button, .app-shell-topbar-right .button-secondary, .app-shell-topbar-right .button-light { min-width: 0; } .app-shell-agent-pill { display: none !important; font-size: 15px; max-width: 100%; } .app-shell-sidebar { top: 12px; left: 12px; bottom: 12px; } .page-shell { padding: 18px; } .grid, .summary-hero, .stats-grid, .summary-grid, .workspace-equal-grid { grid-template-columns: 1fr; } .v21-grid-2, .v21-grid-2-equal { grid-template-columns: 1fr; } .speaker-summary-top, .speaker-summary-stats { grid-template-columns: 1fr; } .inline-form .grow { flex-basis: 100%; } .button-wide { margin-left: 0; } .page-title { letter-spacing: 0.06em; } } @media (max-width: 700px) { .app-shell-topbar-main { display: grid; grid-template-columns: auto 1fr auto; align-items: center; } .app-shell-menu-toggle { width: 50px; height: 50px; min-width: 50px; padding: 0 !important; border-radius: 16px !important; } .app-shell-menu-toggle-lines { width: 32px; height: 32px; } .app-shell-topbar-center { justify-content: flex-start; gap: 10px; } .app-shell-search { flex: 1 1 auto; width: auto; } .app-shell-search-input { min-height: 50px; padding-left: 58px !important; padding-right: 14px !important; font-size: 13px !important; } .app-shell-search-input::placeholder { font-size: 13px; } .app-shell-search-icon { width: 38px; font-size: 16px; } .app-shell-search-shortcut { display: none; } .app-shell-search-dropdown { left: -56px; right: -56px; } .app-shell-search-result { grid-template-columns: 86px minmax(0, 1fr); } .app-shell-search-thumb, .app-shell-search-thumb-fallback { width: 86px; height: 49px; } .app-shell-search-action { display: none; } .app-shell-topbar-right { gap: 8px; } .app-shell-topbar-right .button, .app-shell-topbar-right .button-secondary, .app-shell-topbar-right .button-light { min-width: 0; padding-left: 12px; padding-right: 12px; } .app-shell-help-text { display: none; } .app-shell-help-icon { display: inline-flex; } } @media (max-width: 900px) { .app-shell-topbar-extension-row > .v21-chip { max-width: none; } .app-shell-full-only { display: none !important; } .app-shell-search-desktop { display: none !important; } } @media (max-width: 1100px) { .app-shell-topbar-center { justify-content: center; } .app-shell-agent-pill { max-width: 240px; } .app-shell-search { flex: 1 1 auto; } .app-shell-command-panel { max-height: calc(100vh - 108px); } } .subtle-box { background: var(--surface-pale-cool); border-radius: 12px; padding: 10px; } .button-compact { display: inline-flex !important; align-items: center; justify-content: center; min-width: 0 !important; padding: 7px 8px; font-size: 12px; line-height: 1; letter-spacing: 0.04em; white-space: nowrap; box-sizing: border-box; } .workspace-topnav { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; padding: 10px; border-radius: 18px; background: rgba(255,255,255,0.52); border: 1px solid rgba(212, 221, 226, 0.75); } /* ---------------------------------------------------------------- "Open PDF" button — shared chip used on the daily report (/agent/reports/{id}), material report, and comparison detail pages. Promoted to base.css so all three pages get the same look. Matches the AI-star size so the two sit comfortably side-by-side in a report hero. ---------------------------------------------------------------- */ .report-v2-print-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(28, 51, 67, 0.18); background: var(--surface-white); color: var(--ink-navy); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease; } .report-v2-print-btn svg { width: 14px; height: 14px; display: block; } .report-v2-print-btn:hover, .report-v2-print-btn:focus-visible { background: var(--surface-pale-cool); border-color: var(--ink-navy); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(28, 51, 67, 0.10); outline: none; } .app-shell-page { padding-top: 112px; /* Reserve space at the bottom of every shell page for the fixed AGENT 007 launcher pill so content never sits under it. The CSS variable lets per-page overrides (or future widget-size changes) tweak the offset in one place. The default value covers the launcher height (~52px) + its bottom offset (34px from .global-agent-chat-launcher-dock) + 14px gap. */ --agent-widget-offset: 104px; padding-bottom: var(--agent-widget-offset); } .app-shell-page.app-shell-page-with-extension { padding-top: 168px; } .app-shell-page::before { content: ""; position: fixed; top: 0; left: 0; right: 0; /* See base_part01.css for the height calc — backdrop must end at the topbar's bottom edge, not 30px past it, or scrolling content gets cropped by the trailing strip. */ height: 96px; z-index: 1245; pointer-events: none; background: radial-gradient(circle at top left, rgba(159, 190, 113, 0.16), transparent 28%), radial-gradient(circle at top right, rgba(47, 106, 115, 0.12), transparent 22%), var(--page-bg); } .app-shell-page.app-shell-page-with-extension::before { height: 154px; } .app-shell-topbar { position: fixed; top: 18px; left: 20px; right: 20px; z-index: 1250; display: grid; gap: 12px; min-height: 74px; padding: 14px 18px; background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(18px); border: 1px solid rgba(212, 221, 226, 0.95); border-radius: 22px; box-shadow: 0 16px 34px rgba(27, 39, 51, 0.12); } .app-shell-topbar-main { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; /* Lift row 1 (and its absolutely-positioned search dropdown) above the admin/report extension row below it — otherwise the later-in-DOM extension chips paint over the open search results. */ position: relative; z-index: 3; } .app-shell-topbar-with-extension { padding-bottom: 16px; } .app-shell-topbar-extension-row { width: 100%; padding-top: 16px; border-top: 1px solid rgba(212, 221, 226, 0.82); min-width: 0; } .app-shell-topbar-extension-row > .v21-chip { max-width: calc((100% - 32px) / 5); box-sizing: border-box; } .admin-shell-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding-top: 8px; } .report-shell-extension-nav { justify-content: center; gap: 3px; margin: 0; padding: 3px; border: 1px solid rgba(40, 60, 50, 0.08); border-radius: 999px; background: var(--surface-pale-cool); box-shadow: inset 0 1px 0 rgba(255,255,255,0.72); } .admin-shell-nav.report-shell-extension-nav { gap: 3px; } .admin-shell-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 26px; padding: 0 9px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--positive-text-deep); text-decoration: none; text-align: center; font-size: 10.5px; font-weight: 720; letter-spacing: 0.012em; text-transform: none; box-shadow: none; /* 2026-05-19 — accordion/wave hover. Single CSS variable drives the scale; sibling rules below change it on hover so the hovered chip grows and adjacent chips gently compress. Pure transform → no reflow, no vertical jump. */ --chip-scale: 1; transform: scale(var(--chip-scale)); transform-origin: center; transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.22s ease, opacity 0.22s ease; } .report-shell-extension-chip { flex: 1 1 132px; min-width: 132px; max-width: calc((100% - 40px) / 6); box-sizing: border-box; } /* Selected tab — visually dominant via colour + shadow. Stays at scale 1 in rest. */ .admin-shell-chip.active { background: var(--brand-deep); border-color: var(--brand-deep); color: var(--surface-white); box-shadow: 0 9px 20px rgba(16, 46, 36, 0.22); z-index: 1; } /* 2026-05-19 — accordion priming. As soon as the cursor enters the workspace row (anywhere in the container, including the gap between chips), EVERY chip compresses and dims — the whole block reads as "awaiting choice". The chip the user lands on then overrides back up to scale 1.25, making the active hover-target unmistakable. */ .report-shell-extension-nav:hover .admin-shell-chip { --chip-scale: 0.92; opacity: 0.78; } /* Hover — the hovered chip wins the size race. Put AFTER the row-hover rule so same-specificity ties break in favour of the directly hovered chip. */ .admin-shell-chip:hover { color: var(--ink-slate); border-color: rgba(40, 60, 50, 0.08); background: rgba(255,255,255,0.72); --chip-scale: 1.25; opacity: 1; z-index: 2; } .admin-shell-chip.active:hover { --chip-scale: 1.25; opacity: 1; } @media (prefers-reduced-motion: reduce) { .admin-shell-chip { transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease; transform: none; } .report-shell-extension-nav:hover .admin-shell-chip, .admin-shell-chip:hover, .admin-shell-chip.active:hover { --chip-scale: 1; opacity: 1; transform: none; } } .admin-shell-chip.active::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--surface-mint-deep); box-shadow: 0 0 0 3px rgba(184, 214, 197, 0.16); } .admin-shell-chip.active:hover { background: var(--brand-deep); color: var(--surface-white); } .app-shell-topbar-with-extension .report-shell-extension-nav.app-shell-topbar-extension-row { padding-top: 5px; border-top-color: rgba(40, 60, 50, 0.08); } .app-shell-topbar-left, .app-shell-topbar-right { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 0 0 auto; } .app-shell-topbar-center { min-width: 0; flex: 1 1 auto; display: flex; justify-content: center; align-items: center; gap: 12px; } .app-shell-mode-toggle { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; padding: 3px; border: 1px solid rgba(40, 60, 50, 0.10); border-radius: 999px; background: var(--surface-pale-cool); box-shadow: inset 0 1px 0 rgba(255,255,255,0.78); } .app-shell-mode-option { appearance: none; border: 0; border-radius: 999px; background: transparent; color: var(--ink-slate); min-height: 30px; padding: 0 12px; font-size: 11px; font-weight: 780; letter-spacing: 0.02em; cursor: pointer; transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease; } .app-shell-mode-option.is-active { background: var(--brand-deep); color: var(--surface-white); box-shadow: 0 8px 16px rgba(16, 46, 36, 0.18); } .app-shell-mode-option:hover, .app-shell-mode-option:focus-visible { transform: translateY(-1px); outline: none; box-shadow: 0 8px 16px rgba(16, 46, 36, 0.16); } .app-shell-light-mode .app-shell-full-only { display: none !important; } .app-shell-mode-dialog[hidden] { display: none !important; } .app-shell-mode-dialog { position: fixed; inset: 0; z-index: 2600; display: grid; place-items: center; padding: 18px; } .app-shell-mode-dialog-backdrop { position: absolute; inset: 0; background: rgba(15, 31, 35, 0.34); backdrop-filter: blur(5px); } .app-shell-mode-dialog-card { position: relative; /* border-box so the 20px padding + 1px border are INCLUDED in the width; without it the card overflowed past the container's 18px padding and sat edge-to-edge on phones. */ box-sizing: border-box; width: min(420px, 100%); padding: 20px; border-radius: 18px; background: var(--surface-white); border: 1px solid var(--border-cool); box-shadow: 0 24px 60px rgba(15, 31, 35, 0.24); color: var(--ink-navy); } .app-shell-mode-dialog-close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: 1px solid var(--border-cool); border-radius: 999px; background: var(--surface-pale-cool); color: var(--ink-slate); cursor: pointer; font-size: 18px; line-height: 1; } .app-shell-mode-dialog-eyebrow { margin-right: 34px; color: var(--positive-text-deep); font-size: 11px; font-weight: 820; letter-spacing: 0.12em; text-transform: uppercase; } .app-shell-mode-dialog-title { margin: 7px 34px 8px 0; font-size: 20px; line-height: 1.15; letter-spacing: 0; } .app-shell-mode-dialog-copy { margin: 8px 0 0; color: var(--ink-slate); font-size: 13px; line-height: 1.45; } .app-shell-mode-dialog-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 16px; } .app-shell-mode-dialog-research-form { margin: 0; } .app-shell-mode-dialog-action { min-height: 36px; padding: 0 16px; border: 1px solid var(--brand-deep); border-radius: 999px; background: var(--brand-deep); color: var(--surface-white); font-weight: 780; cursor: pointer; } .app-shell-mode-dialog-action.is-secondary { background: var(--surface-white); color: var(--ink-slate); border-color: var(--border-cool); } .app-shell-mode-dialog-close:hover, .app-shell-mode-dialog-close:focus-visible, .app-shell-mode-dialog-action:hover, .app-shell-mode-dialog-action:focus-visible { transform: translateY(-1px); outline: none; box-shadow: 0 10px 20px rgba(16, 46, 36, 0.16); } .app-shell-mode-dialog-open { overflow: hidden; } .app-shell-menu-toggle { width: 58px; height: 54px; min-width: 58px; padding: 0 !important; border-radius: 18px !important; border-color: rgba(22, 43, 51, 0.12) !important; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.32), transparent 32%), linear-gradient(135deg, var(--brand-deep) 0%, var(--info-teal-text-deep) 100%) !important; color: var(--surface-white) !important; box-shadow: 0 13px 26px rgba(24, 40, 33, 0.18) !important; display: inline-flex !important; align-items: center; justify-content: center; transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease; } .app-shell-menu-toggle:hover, .app-shell-menu-toggle:focus-visible { transform: translateY(-1px); box-shadow: 0 18px 34px rgba(24, 40, 33, 0.22) !important; } .app-shell-menu-toggle-lines { width: 38px; height: 38px; border-radius: 14px; display: inline-grid; place-content: center; gap: 5px; background: rgba(255,255,255,0.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16); flex: 0 0 auto; } .app-shell-menu-toggle-lines span { display: block; width: 19px !important; min-width: 19px; max-width: 19px; height: 2px; border-radius: 999px; background: currentColor; } .app-shell-agent-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; max-width: min(100%, 360px); padding: 10px 18px; border-radius: 999px; border: 1px solid var(--border-cool); background: rgba(244, 247, 248, 0.94); color: var(--ink-navy); text-transform: uppercase; font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: 0.08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-shell-search { position: relative; isolation: isolate; width: min(100%, 780px); flex: 0 1 780px; } .app-shell-search::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: 20px; background: linear-gradient(135deg, rgba(23, 56, 45, 0.18), rgba(47, 106, 115, 0.1)), radial-gradient(circle at 16% 50%, rgba(184, 214, 197, 0.32), transparent 34%); opacity: 0.7; transform: scale(1); transition: opacity 0.16s ease, transform 0.16s ease; /* 2026-05-22 — Ambient pulse runs all the time (no hover required). Same shape as the hover animation but slower + softer so it reads as a quiet "alive" cue. On hover/focus the rule below swaps to the stronger / faster variant. */ animation: app-shell-search-aura-pulse-ambient 4s ease-in-out infinite; } .app-shell-search:hover::before, .app-shell-search:focus-within::before { animation: app-shell-search-aura-pulse 2.2s ease-in-out infinite; } @keyframes app-shell-search-aura-pulse-ambient { 0%, 100% { opacity: 0.62; transform: scale(1); } 50% { opacity: 0.84; transform: scale(1.006); } } @keyframes app-shell-search-aura-pulse { 0%, 100% { opacity: 0.68; transform: scale(1); } 50% { opacity: 0.98; transform: scale(1.012); } } .app-shell-search-input { position: relative; z-index: 1; min-height: 52px; padding-top: 12px !important; padding-bottom: 10px !important; padding-left: 68px !important; padding-right: 98px !important; border-radius: 19px !important; border-color: rgba(43, 71, 61, 0.28) !important; background: linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(246,250,248,0.98) 100%) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.78), inset 0 -1px 0 rgba(23, 56, 45, 0.05), 0 12px 26px rgba(30, 51, 59, 0.075); color: var(--ink-navy); font-size: 14.5px !important; font-weight: 760; letter-spacing: 0.01em; transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, transform 0.16s ease; } .app-shell-search-input::placeholder { font-size: 14.5px; color: var(--positive-text-deep); font-weight: 740; } .app-shell-search:focus-within::before { opacity: 1; transform: scale(1.004); } .app-shell-search:focus-within .app-shell-search-input { border-color: rgba(23, 56, 45, 0.46) !important; background: var(--surface-white) !important; box-shadow: 0 0 0 3px rgba(23, 56, 45, 0.1), 0 12px 26px rgba(30, 51, 59, 0.1); transform: translateY(-1px); } .app-shell-search-shortcut { position: absolute; top: 50%; right: 10px; z-index: 2; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; min-height: 25px; padding: 0 8px; border-radius: 999px; background: rgba(238, 244, 241, 0.94); border: 1px solid rgba(43, 71, 61, 0.12); color: var(--ink-green-muted); font-size: 9.5px; font-weight: 760; letter-spacing: 0.055em; text-transform: uppercase; pointer-events: none; } .app-shell-search-icon { position: absolute; top: 7px; bottom: 7px; left: 8px; z-index: 2; width: 44px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center; background: radial-gradient(circle at 28% 20%, rgba(184, 214, 197, 0.36), transparent 38%), linear-gradient(135deg, var(--brand-deep) 0%, var(--info-teal-text-deep) 100%); color: var(--surface-white); font-size: 11px; line-height: 1; font-weight: 900; letter-spacing: 0.12em; box-shadow: 0 8px 16px rgba(23, 56, 45, 0.13); pointer-events: none; transform-origin: center; will-change: transform, box-shadow, filter; transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease; /* 2026-05-22 — Ambient pulse always-on. The hover rule below swaps to the stronger / faster `-pulse` variant. */ animation: app-shell-search-icon-pulse-ambient 3.4s ease-in-out infinite; } .app-shell-search:hover .app-shell-search-icon, .app-shell-search:focus-within .app-shell-search-icon { animation: app-shell-search-icon-pulse 1.5s ease-in-out infinite; transform: scale(1.06); box-shadow: 0 10px 20px rgba(23, 56, 45, 0.18); filter: saturate(1.06); } @keyframes app-shell-search-icon-pulse-ambient { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } } @keyframes app-shell-search-icon-pulse { 0%, 100% { transform: scale(1.04); } 50% { transform: scale(1.09); } } @media (prefers-reduced-motion: reduce) { .app-shell-search::before, .app-shell-search:hover::before, .app-shell-search:focus-within::before, .app-shell-search-icon, .app-shell-search:hover .app-shell-search-icon, .app-shell-search:focus-within .app-shell-search-icon { animation: none; transform: scale(1.04); } } .app-shell-search-dropdown { position: absolute; top: calc(100% + 9px); left: 0; right: 0; z-index: 25; display: none; max-height: min(70vh, 520px); overflow-y: auto; padding: 7px 8px 8px; border-radius: 21px; border: 1px solid rgba(43, 71, 61, 0.14); background: rgba(250,252,251,0.98); box-shadow: 0 14px 32px rgba(21, 31, 40, 0.115); scrollbar-color: rgba(71, 93, 84, 0.28) transparent; scrollbar-width: thin; } .app-shell-search-dropdown::-webkit-scrollbar { width: 7px; } .app-shell-search-dropdown::-webkit-scrollbar-track { background: transparent; } .app-shell-search-dropdown::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(71, 93, 84, 0.24); } .app-shell-search-dropdown.open { display: grid; gap: 6px; } /* "Load more" button at the bottom of the search dropdown. Visible when at least one search family still has more results to fetch. Clicking triggers the same loadMoreSearchResults() call the scroll listener does. */ /* Compact status band at the bottom of the top-nav search dropdown. Replaces the previous "Load more results" button — load-more now fires automatically on scroll, so the band is purely informational: - .loading: in-flight, shows an animated sliding bar. - .more: more results exist but no fetch in flight yet. - .done: every family is empirically exhausted. */ .app-shell-search-footer-band { position: relative; margin-top: 4px; padding: 8px 12px; text-align: center; font-size: 11px; color: var(--positive-surface-deep); letter-spacing: 0.04em; border-top: 1px solid var(--surface-mint); background: linear-gradient(180deg, var(--surface-white) 0%, var(--surface-pale-cool) 100%); overflow: hidden; min-height: 28px; display: flex; align-items: center; justify-content: center; gap: 8px; } .app-shell-search-footer-band.app-shell-search-footer-band-done { color: var(--ink-muted); font-style: italic; } .app-shell-search-footer-band.app-shell-search-footer-band-loading { color: var(--positive-text-deep); font-weight: 700; } /* Clickable "Load more results" CTA shown when the dropdown isn't tall enough to scroll. The default footer says "Scroll for more results" which is a lie when the user can't actually scroll. */ .app-shell-search-footer-band-cta { appearance: none; border: none; background: transparent; color: var(--ink-navy); font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; } .app-shell-search-footer-band-cta:hover, .app-shell-search-footer-band-cta:focus-visible { background: rgba(28, 51, 67, 0.08); color: var(--info-blue-bg-strong); outline: none; } .app-shell-search-footer-band.app-shell-search-footer-band-loading::after { content: ""; position: absolute; left: -30%; bottom: 0; height: 2px; width: 30%; background: linear-gradient(90deg, transparent 0%, var(--info-blue-border-dark) 50%, transparent 100%); animation: app-shell-search-footer-slide 1.15s ease-in-out infinite; } @keyframes app-shell-search-footer-slide { 0% { left: -30%; } 100% { left: 100%; } } .app-shell-search-footer-band-spinner { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(61, 106, 133, 0.25); border-top-color: var(--info-blue-border-dark); animation: app-shell-search-footer-spin 0.8s linear infinite; } @keyframes app-shell-search-footer-spin { to { transform: rotate(360deg); } } .app-shell-search-footer-note { margin-top: 4px; padding: 8px 12px; text-align: center; font-size: 11px; color: var(--positive-surface-deep); font-style: italic; } .app-shell-search-group-label { padding: 8px 6px 0; color: var(--positive-surface-deep); font-size: 9px; font-weight: 760; letter-spacing: 0.09em; text-transform: uppercase; line-height: 1.2; } /* Filter tabs above the result list — All / Reports / Transcripts / Questions / Speakers / Channels. Filtering is client-side: the full result set is kept in JS state and one group is shown at a time. */ .app-shell-search-tabs { /* Pinned to the top of the scrollable dropdown so the user can switch filter without scrolling back up after exploring results. `top: -7px` cancels the dropdown's top padding so the tabs sit flush against the dropdown's upper edge. */ position: sticky; top: -7px; z-index: 5; display: flex; flex-wrap: nowrap; gap: 4px; padding: 6px 6px; margin: -7px -8px 6px; background: rgba(250, 252, 251, 0.98); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-bottom: 1px solid var(--surface-mint); /* If somehow the row still overflows (e.g., very long custom locale labels), allow horizontal scroll rather than wrapping to a 2nd line. */ overflow-x: auto; scrollbar-width: none; } .app-shell-search-tabs::-webkit-scrollbar { display: none; } .app-shell-search-tab { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--border-cool); background: var(--surface-white); color: var(--ink-slate); font-size: 11px; font-weight: 800; letter-spacing: 0.03em; white-space: nowrap; flex: 0 0 auto; cursor: pointer; transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease; } .app-shell-search-tab:hover:not([disabled]):not(.active) { border-color: var(--info-blue-border-dark); color: var(--ink-navy); } .app-shell-search-tab.active { background: var(--ink-navy); color: var(--surface-cream); border-color: var(--ink-navy); } .app-shell-search-tab[disabled] { opacity: 0.4; cursor: not-allowed; } /* Tab whose group has zero matches in the settled result set. Visible (so layout doesn't shift) but obviously inert. */ .app-shell-search-tab.empty { opacity: 0.42; color: var(--ink-muted); } .app-shell-search-tab.empty:hover { border-color: var(--border-cool); color: var(--ink-muted); } .app-shell-search-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 15px; padding: 0 4px; height: 14px; border-radius: 999px; background: rgba(28, 51, 67, 0.08); color: inherit; font-size: 9.5px; font-weight: 900; } .app-shell-search-tab.active .app-shell-search-tab-count { background: rgba(255, 245, 214, 0.18); } .app-shell-search-note { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(180deg, var(--surface-white) 0%, var(--surface-pale-cool) 100%); color: var(--positive-text-deep); font-size: 13px; line-height: 1.45; border: 1px solid rgba(43, 71, 61, 0.1); } .app-shell-search-note-loading { /* 2026-05-22 — Sticky-pin the in-flight status banner just below the sticky filter-tabs row so it stays visible as the user scrolls through partially-arrived results. Mirrors the rule in `base_part01.css`. See that file for the geometry rationale. */ position: sticky; top: 32px; z-index: 4; justify-content: center; background: rgba(250, 252, 251, 0.96); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(43, 71, 61, 0.08); box-shadow: 0 2px 6px rgba(21, 31, 40, 0.04); } .app-shell-search-result { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px; border-radius: 16px; border: 1px solid rgba(43, 71, 61, 0.11); background: linear-gradient(180deg, var(--surface-white) 0%, var(--surface-pale-cool) 100%); color: var(--ink-navy); text-decoration: none; box-shadow: inset 3px 0 0 rgba(95, 133, 110, 0.34); transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease; } .app-shell-search-result:hover, .app-shell-search-result.active { transform: translateY(-1px); border-color: rgba(79, 127, 99, 0.32); background: linear-gradient(180deg, var(--surface-white) 0%, var(--surface-pale-cool) 100%); box-shadow: inset 5px 0 0 #17382d, 0 10px 24px rgba(27, 39, 51, 0.08), 0 0 0 3px rgba(79, 127, 99, 0.06); } .app-shell-search-result.is-queueing, .app-shell-search-result.is-queueing:hover, .app-shell-search-result.is-queueing.active { transform: none; cursor: progress; pointer-events: none; border-color: rgba(79, 127, 99, 0.36); background: linear-gradient(180deg, rgba(250, 252, 250, 0.98) 0%, rgba(237, 244, 240, 0.98) 100%); box-shadow: inset 6px 0 0 #17382d, 0 12px 24px rgba(27, 39, 51, 0.08), 0 0 0 3px rgba(79, 127, 99, 0.08); } .app-shell-search-result-agent-pick { border-color: rgba(79, 127, 99, 0.2); background: linear-gradient(180deg, var(--surface-white) 0%, var(--surface-pale-cool) 100%); box-shadow: inset 4px 0 0 var(--positive-surface-deep), 0 7px 16px rgba(40, 60, 50, 0.055); } .app-shell-search-result-agent-pick:hover, .app-shell-search-result-agent-pick.active { border-color: rgba(79, 127, 99, 0.34); background: linear-gradient(180deg, var(--surface-pale-cool) 0%, var(--surface-mint) 100%); box-shadow: inset 7px 0 0 #17382d, 0 12px 24px rgba(35, 67, 49, 0.11), 0 0 0 3px rgba(79, 127, 99, 0.08); } .app-shell-search-result-high-signal { border-color: rgba(46, 92, 122, 0.22); background: linear-gradient(180deg, var(--surface-white) 0%, var(--surface-pale-cool) 100%); box-shadow: inset 4px 0 0 var(--info-steel-soft), 0 8px 18px rgba(36, 79, 104, 0.07); } .app-shell-search-result-high-signal:hover, .app-shell-search-result-high-signal.active { border-color: rgba(46, 92, 122, 0.36); background: linear-gradient(180deg, var(--surface-pale-cool) 0%, var(--info-blue-surface-pale) 100%); box-shadow: inset 7px 0 0 #3a4a55, 0 13px 26px rgba(36, 79, 104, 0.12), 0 0 0 3px rgba(46, 92, 122, 0.09); } .app-shell-search-result-profile { grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 12px; background: linear-gradient(180deg, var(--surface-white) 0%, var(--surface-pale-cool) 100%); box-shadow: inset 3px 0 0 rgba(90, 110, 123, 0.26); } .app-shell-search-result-profile:hover, .app-shell-search-result-profile.active { background: linear-gradient(180deg, var(--surface-white) 0%, var(--surface-pale-cool) 100%); box-shadow: inset 5px 0 0 rgba(66, 91, 108, 0.66), 0 10px 24px rgba(27, 39, 51, 0.08), 0 0 0 3px rgba(79, 127, 99, 0.06); } .app-shell-search-result-profile-channel { border-color: rgba(88, 122, 74, 0.26); background: linear-gradient(180deg, var(--surface-warm-warning) 0%, var(--surface-mint) 100%); box-shadow: inset 5px 0 0 rgba(104, 140, 87, 0.48), 0 8px 18px rgba(53, 82, 41, 0.05); } .app-shell-search-result-profile-speaker { border-color: rgba(83, 101, 131, 0.16); background: linear-gradient(180deg, var(--surface-white) 0%, var(--surface-pale-cool) 100%); box-shadow: inset 4px 0 0 rgba(98, 116, 149, 0.3); } .app-shell-search-media-speaker { width: 96px; min-width: 96px; min-height: 88px; } .app-shell-search-media { position: relative; display: flex; align-items: center; justify-content: center; align-self: center; justify-self: center; width: 96px; min-width: 96px; min-height: 54px; overflow: visible; } .app-shell-search-media-channel { width: 100px; min-width: 100px; min-height: 64px; padding: 5px 0 0 6px; } .app-shell-search-media-channel::before { content: ""; position: absolute; inset: 4px 8px 10px 5px; border-radius: 12px; background: linear-gradient(180deg, var(--ink-navy) 0%, var(--ink-darkest) 100%); border: 1px solid rgba(0, 0, 0, 0.62); box-shadow: 0 10px 18px rgba(10, 12, 14, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06); transform: rotate(-4deg); transform-origin: center center; } .app-shell-search-media-channel::after { content: "▶ YT"; position: absolute; right: 4px; bottom: 3px; z-index: 2; min-width: 28px; height: 18px; padding: 0 6px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(208, 39, 39, 0.96) 0%, rgba(162, 22, 22, 0.96) 100%); color: var(--surface-warm-warning); font-size: 8px; font-weight: 800; letter-spacing: 0.04em; line-height: 1; box-shadow: 0 4px 10px rgba(17, 19, 23, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18); } .app-shell-search-thumb { width: 96px; height: 54px; border-radius: 12px; object-fit: cover; background: var(--surface-pale-cool); display: block; } .app-shell-search-thumb-fallback { width: 96px; height: 54px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--surface-pale-cool) 0%, var(--surface-warm) 100%); color: var(--ink-muted); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } /* Asset suggestions: the thumb slot holds the pre-rendered asset_icon (a self-coloured badge). Neutral container, centred, icon scaled up a touch for presence at the 96x54 thumb size. */ .app-shell-search-thumb-fallback-asset { background: linear-gradient(135deg, var(--surface-pale-cool) 0%, var(--surface-warm) 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.72); text-transform: none; } .app-shell-search-thumb-fallback-asset .asset-icon { transform: scale(1.25); } .app-shell-search-thumb-fallback-profile { width: 96px; height: 54px; min-height: 54px; border-radius: 12px; font-size: 18px; font-weight: 900; letter-spacing: 0.08em; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.72); } .app-shell-search-thumb-fallback-channel { background: radial-gradient(circle at 24% 22%, rgba(219, 238, 205, 0.68), transparent 36%), linear-gradient(135deg, var(--positive-text-deep) 0%, var(--positive-surface-deep) 100%); color: var(--surface-warm-warning); } .app-shell-search-thumb-fallback-speaker { width: 88px; height: 88px; min-height: 88px; border-radius: 999px; background: radial-gradient(circle at 24% 22%, rgba(210, 225, 243, 0.7), transparent 36%), linear-gradient(135deg, var(--ink-slate) 0%, var(--ink-muted) 100%); color: var(--surface-white); } .app-shell-search-result-profile .app-shell-search-thumb { width: 96px; height: 54px; border-radius: 12px; align-self: center; justify-self: center; } .app-shell-search-result-profile-channel .app-shell-search-thumb, .app-shell-search-result-profile-channel .app-shell-search-thumb-fallback { position: relative; z-index: 1; width: 92px; height: 52px; border-radius: 2px; border: 1px solid rgba(42, 48, 54, 0.18); background: var(--surface-mint); padding: 4px 4px 11px 4px; box-sizing: border-box; box-shadow: 0 12px 18px rgba(20, 24, 29, 0.16), 0 2px 0 rgba(255, 255, 255, 0.9); transform: rotate(1.25deg); transform-origin: center center; } .app-shell-search-result-profile-speaker .app-shell-search-thumb, .app-shell-search-result-profile-speaker .app-shell-search-thumb-fallback { width: 88px; height: 88px; min-height: 88px; border-radius: 999px; align-self: center; justify-self: center; } .app-shell-search-result-profile .app-shell-search-copy { gap: 4px; } .app-shell-search-copy { min-width: 0; display: grid; gap: 2px; } .app-shell-search-label-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-width: 0; } .app-shell-search-inline-title-row { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex-wrap: nowrap; } .app-shell-search-priority-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 18px; padding: 1px 7px; border-radius: 999px; border: 1px solid rgba(40, 115, 72, 0.34); background: linear-gradient(180deg, var(--surface-mint) 0%, var(--surface-mint-deep) 100%); color: var(--positive-text-deep); font-size: 9.8px; font-weight: 820; line-height: 1.35; box-shadow: inset 0 1px 0 rgba(255,255,255,0.72); } .app-shell-search-priority-badge-hot { border-color: rgba(31, 75, 153, 0.4); background: linear-gradient(180deg, var(--info-blue-surface-pale) 0%, var(--ink-cool-grey-pale) 100%); color: var(--ink-slate); box-shadow: inset 0 1px 0 rgba(255,255,255,0.76), 0 0 0 2px rgba(37, 80, 142, 0.05); } .app-shell-search-result-type { width: fit-content; max-width: 100%; padding: 0 5px; border-radius: 999px; border: 1px solid rgba(43, 71, 61, 0.1); background: rgba(232, 238, 234, 0.8); color: rgba(64, 89, 77, 0.72); font-size: 9.2px; font-weight: 760; line-height: 1.35; letter-spacing: 0.04em; text-transform: uppercase; transform: translateY(0.5px); } .app-shell-search-result-profile-speaker .app-shell-search-result-type { border-color: rgba(83, 101, 131, 0.22); background: rgba(225, 233, 244, 0.94); color: var(--ink-slate); font-weight: 820; } .app-shell-search-result-profile-channel .app-shell-search-result-type { border-color: rgba(88, 122, 74, 0.24); background: rgba(226, 239, 219, 0.94); color: var(--positive-text-deep); font-weight: 820; } .app-shell-search-title { font-size: 14.2px; font-weight: 735; line-height: 1.28; color: var(--info-blue-bg-strong); transform: translateY(-0.5px); } .app-shell-search-title-inline { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-shell-search-inline-beta { display: inline-flex; align-items: center; justify-content: center; min-height: 15px; padding: 1px 5px; border-radius: 999px; border: 1px solid rgba(183, 112, 18, 0.22); background: rgba(255, 239, 214, 0.94); color: var(--brand-bronze); font-size: 8.6px; font-weight: 900; letter-spacing: 0.09em; line-height: 1; text-transform: uppercase; vertical-align: middle; flex: 0 0 auto; } .app-shell-search-open-cta { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; min-height: 18px; padding: 0 7px; border-radius: 999px; border: 1px solid rgba(43, 71, 61, 0.12); background: rgba(248, 251, 250, 0.96); color: var(--positive-text-deep); font-size: 9.2px; font-weight: 760; letter-spacing: 0.04em; line-height: 1; opacity: 0; transform: translateY(2px); transition: opacity 0.14s ease, transform 0.14s ease, border-color 0.14s ease, background 0.14s ease; flex: 0 0 auto; } .app-shell-search-result-profile:hover .app-shell-search-open-cta, .app-shell-search-result-profile.active .app-shell-search-open-cta { opacity: 1; transform: translateY(0); border-color: rgba(49, 89, 103, 0.18); background: rgba(243, 247, 248, 0.98); } .app-shell-search-meta { font-size: 11.4px; line-height: 1.35; color: var(--positive-surface-deep); } .app-shell-search-badges { display: flex; flex-wrap: wrap; gap: 4px; } .app-shell-search-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 17px; padding: 1px 6px; border-radius: 999px; background: var(--surface-pale-cool); border: 1px solid var(--border-cool); color: var(--ink-slate); font-size: 9.6px; font-weight: 720; letter-spacing: 0.035em; text-transform: uppercase; } .app-shell-search-signal-badge { border-color: rgba(115, 82, 34, 0.2); background: linear-gradient(180deg, var(--surface-warm) 0%, var(--surface-cream-soft) 100%); color: var(--brand-bronze); text-transform: none; letter-spacing: 0.015em; font-weight: 760; } .app-shell-search-snippet { display: -webkit-box; width: min(75%, 100%); max-width: min(75%, 100%); margin-right: auto; overflow: hidden; font-size: 11.6px; line-height: 1.34; color: var(--positive-text-deep); text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .app-shell-search-working-note { display: inline-flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; margin-top: 4px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(79, 127, 99, 0.2); background: rgba(243, 248, 245, 0.98); color: var(--positive-text-deep); font-size: 10.8px; font-weight: 760; line-height: 1.2; box-shadow: inset 0 1px 0 rgba(255,255,255,0.72); } .app-shell-search-working-note .pending-dot { flex: 0 0 auto; } .app-shell-search-result-profile-channel .app-shell-search-snippet { font-size: 11.6px; line-height: 1.34; color: var(--positive-text-deep); } .app-shell-search-result-profile-speaker .app-shell-search-snippet { font-size: 11.6px; line-height: 1.34; color: var(--positive-text-deep); } .app-shell-command-overlay { position: fixed; inset: 0; z-index: 1285; display: none; align-items: flex-start; justify-content: center; padding: 88px 18px 24px; background: rgba(18, 27, 35, 0.4); backdrop-filter: blur(10px); } .app-shell-command-overlay.open { display: flex; } .app-shell-command-panel { width: min(860px, 100%); max-height: calc(100vh - 120px); overflow: hidden; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 12px; padding: 16px; border-radius: 28px; border: 1px solid rgba(212, 221, 226, 0.98); background: rgba(250, 252, 252, 0.97); box-shadow: 0 28px 60px rgba(15, 24, 32, 0.22); } .app-shell-command-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .app-shell-command-title { margin: 0; font-family: var(--font-display); font-size: 24px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-navy); } .app-shell-command-close { width: 42px; height: 42px; min-width: 42px; padding: 0 !important; border-radius: 14px !important; box-shadow: none !important; } .app-shell-command-subtitle { margin: -2px 0 0 0; color: var(--ink-slate); font-size: 13px; line-height: 1.5; } .app-shell-command-search { position: relative; } .app-shell-command-input { width: 100%; min-height: 58px; padding: 16px 54px 16px 46px; border-radius: 18px; border: 1px solid var(--border-cool); background: var(--surface-white); color: var(--ink-navy); font-size: 16px; font-weight: 700; letter-spacing: 0.01em; box-shadow: inset 0 1px 0 rgba(255,255,255,0.8); } .app-shell-command-input:focus { outline: none; border-color: var(--ink-cool-grey-pale); box-shadow: 0 0 0 3px rgba(143, 174, 179, 0.18); } .app-shell-command-icon { position: absolute; top: 50%; left: 16px; transform: translateY(-50%); color: var(--ink-muted); font-size: 16px; pointer-events: none; } .app-shell-command-shortcut { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; min-height: 26px; padding: 0 9px; border-radius: 999px; background: var(--surface-pale-cool); border: 1px solid var(--border-cool); color: var(--ink-muted); font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; pointer-events: none; } .app-shell-command-results { min-height: 240px; max-height: calc(100vh - 276px); overflow-y: auto; display: grid; gap: 8px; padding-right: 2px; } .app-shell-command-result { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; border-radius: 18px; border: 1px solid var(--surface-mint-deep); background: var(--surface-white); color: var(--ink-navy); text-decoration: none; transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease; } .app-shell-command-result:hover, .app-shell-command-result.active { transform: translateY(-1px); border-color: var(--ink-cool-grey-pale); box-shadow: 0 10px 24px rgba(27, 39, 51, 0.08); } .app-shell-command-media { width: 112px; height: 64px; border-radius: 14px; background: linear-gradient(135deg, var(--surface-pale-cool) 0%, var(--surface-warm) 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--ink-muted); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .app-shell-command-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .app-shell-command-copy { min-width: 0; display: grid; gap: 5px; } .app-shell-command-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; } .app-shell-command-type { display: inline-flex; align-items: center; justify-content: center; min-height: 22px; padding: 3px 8px; border-radius: 999px; background: var(--ink-navy); color: var(--surface-white); font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .app-shell-command-title-text { min-width: 0; font-size: 14px; font-weight: 800; line-height: 1.35; color: var(--ink-navy); } .app-shell-command-meta { font-size: 12px; line-height: 1.45; color: var(--ink-muted); } .app-shell-command-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; color: var(--ink-muted); font-size: 12px; } .app-shell-route-loading { position: fixed; inset: 0; /* Must sit above the analysis-queue popup (z-index 2390) so the blur backdrop also covers the queue card when "Opening…" is shown — the queue can't visually float in front of the loading overlay. */ z-index: 2500; display: none; align-items: center; justify-content: center; background: rgba(18, 27, 35, 0.22); backdrop-filter: blur(6px); } .app-shell-route-loading.open { display: flex; } .app-shell-route-loading-card { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 14px 18px; border-radius: 18px; border: 1px solid rgba(212, 221, 226, 0.98); background: rgba(255, 255, 255, 0.97); box-shadow: 0 18px 40px rgba(21, 31, 40, 0.16); color: var(--ink-navy); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .app-shell-route-loading.is-rail-label-tone .app-shell-route-loading-card { flex-direction: column; align-items: center; gap: 14px; padding: 24px 32px; min-width: 200px; text-align: center; color: var(--brand-deep); text-transform: none; } .app-shell-route-loading.is-rail-label-tone .app-shell-route-loading-label { font-size: 13.5px; font-weight: 800; letter-spacing: 0.02em; line-height: 1.2; color: var(--brand-deep); text-transform: none; } .app-shell-route-loading .spinner { margin-left: 0; } .app-shell-topbar-right .button, .app-shell-topbar-right .button-secondary, .app-shell-topbar-right .button-light { min-width: 0; box-shadow: none; } .app-shell-tour-btn, .app-shell-logout-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; } /* Agent-training level chip in the top-bar. Compact, monochrome, mature — no childish gamification language. Links to /agent/training. */ .app-shell-level-chip { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(56, 81, 102, 0.18); background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(240,246,247,0.9) 100%); color: var(--ink-slate); text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; /* Progress-fill driver: --chip-progress is set in JS as a 0–100 value based on the user's points within the current level band. The ::before pseudo below uses it to color the chip like a progress bar. */ --chip-progress: 0; transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease; } .app-shell-level-chip-fill { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; /* Linear gradient stops at --chip-progress%, creating the "filled to here" effect. The filled portion uses a solid-feeling green tint with a sharp hard edge at the boundary so the user can clearly tell "I'm 60% there" vs "I'm 90% there" at a glance. The hard edge is a 0.01% step from tinted → transparent. */ background: linear-gradient( 90deg, rgba(82, 124, 98, 0.55) 0%, rgba(82, 124, 98, 0.55) calc(var(--chip-progress, 0) * 1%), rgba(82, 124, 98, 0.06) calc(var(--chip-progress, 0) * 1% + 0.01%), rgba(82, 124, 98, 0.06) 100% ); transition: background 0.45s ease; } /* Level-color modifiers — Strategist + Architect fills skew gold to celebrate the late-game tiers. Same hard-edge boundary pattern. */ .app-shell-level-chip[data-current-level="4"] .app-shell-level-chip-fill, .app-shell-level-chip[data-current-level="5"] .app-shell-level-chip-fill { background: linear-gradient( 90deg, rgba(207, 161, 53, 0.65) 0%, rgba(207, 161, 53, 0.65) calc(var(--chip-progress, 0) * 1%), rgba(207, 161, 53, 0.08) calc(var(--chip-progress, 0) * 1% + 0.01%), rgba(207, 161, 53, 0.08) 100% ); } /* Brief glow when the chip absorbs a points fly-in. */ @keyframes appShellLevelChipPulse { 0% { box-shadow: 0 0 0 0 rgba(82,124,98,0.55), 0 0 0 0 rgba(82,124,98,0.25); } 50% { box-shadow: 0 0 0 4px rgba(82,124,98,0.30), 0 0 0 10px rgba(82,124,98,0.10); } 100% { box-shadow: 0 0 0 0 rgba(82,124,98,0), 0 0 0 0 rgba(82,124,98,0); } } .app-shell-level-chip.is-bumping { animation: appShellLevelChipPulse 0.7s ease-out; } .app-shell-level-chip:hover, .app-shell-level-chip:focus-visible { transform: translateY(-1px); border-color: rgba(47, 106, 115, 0.32); box-shadow: 0 12px 24px rgba(31, 55, 67, 0.1); background: var(--surface-white); } .app-shell-level-chip-level { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; padding: 2px 6px; border-radius: 6px; background: var(--ink-slate); color: var(--surface-cream); font-size: 10.5px; font-weight: 900; letter-spacing: 0.06em; } .app-shell-level-chip-name { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; } .app-shell-level-chip-points { font-size: 11px; font-weight: 600; color: var(--ink-muted); letter-spacing: 0.04em; } /* Per-level icon (inline SVG from LEVEL_METADATA). Sized at ~80% of the chip's 48px min-height so the agent badge reads as the chip's primary visual. Sits between the L-pill and the level name. */ .app-shell-level-chip-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; color: var(--ink-slate); flex-shrink: 0; } .app-shell-level-chip-icon svg { width: 38px; height: 38px; display: block; } /* Stars earned within the current level (0–3). Filled stars use the level's gold accent; empty stars are the same gold tinted with low opacity so they read as "ghosted future stars" — same visual treatment as the training-page ladder pills' current/top variant (see `.training-level-ladder-pill-current .lvl-star` in agent_training.css line 706). The previous muted-slate (#4b6c80 at 35%) made empty stars look like neutral placeholders instead of un-earned gold. */ .app-shell-level-chip-stars { display: inline-flex; align-items: center; gap: 1px; font-size: 11px; letter-spacing: 0; line-height: 1; } .app-shell-level-chip-star { /* 2026-05-22 — Reverted to the original pale-blue-gray solid empty state per user direction: "star 2 and 3 were fine before". The text-stroke + transparent fill approach was backed out — the empty visual now matches what was on the page before this thread of iterations. 2026-05-25 — Three states now: empty (pale-gray solid), muted (cream gold at half opacity — the in-progress intermediate), bright (full cream gold, fully-earned). `.is-filled` kept as legacy alias for `.is-bright`. */ color: var(--border-pale); font-weight: 400; transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease; } .app-shell-level-chip-star.is-empty { color: var(--border-pale); opacity: 1; } /* 2026-05-25 (iter 2) — Unified to `--gold-accent` saturated bronze (was `--gold-bright` cream which looked dimmer than the passed-level stars on the training page). Chip stays consistent with the training page now. */ .app-shell-level-chip-star.is-muted { color: var(--gold-accent); opacity: 0.5; } .app-shell-level-chip-star.is-filled, .app-shell-level-chip-star.is-bright { color: var(--gold-accent); opacity: 1; } .app-shell-level-chip-star.is-just-earned { animation: appShellLevelChipStarBurst 0.7s ease-out; } @keyframes appShellLevelChipStarBurst { /* 2026-05-25 (iter 2) — Burst flashes the saturated bronze `--gold-accent` so the animation lands on the same color as the steady-state bright stars (was the lighter cream which mismatched). */ 0% { transform: scale(0.6); color: var(--gold-accent); } 40% { transform: scale(1.5); color: var(--gold-accent); } 100% { transform: scale(1); color: var(--gold-accent); } } @media (max-width: 760px) { .app-shell-level-chip-points { display: none; } } /* On phone-width screens the topbar already carries the menu, search, Guide and Logout — pruning the chip to just the level pill keeps the chip useful (still tappable, still links to /agent/training) without crowding the search input. */ @media (max-width: 480px) { .app-shell-level-chip-name { display: none; } .app-shell-level-chip-stars { display: none; } .app-shell-level-chip { padding: 0 8px; gap: 0; min-height: 44px; } } .read-later-toggle { position: relative; border-color: var(--info-blue-surface-pale); background: var(--surface-white); color: var(--ink-muted); } .read-later-toggle:hover, .read-later-toggle:focus-visible { border-color: var(--accent-sage); color: var(--positive-text-deep); } .read-later-toggle.is-active { border-color: var(--surface-cream-soft); background: var(--surface-cream); color: var(--positive-text-deep); box-shadow: var(--shadow-soft); } .read-later-bookmark-icon { width: 14px; height: 14px; display: block; overflow: visible; } .read-later-bookmark-fill { fill: currentColor; opacity: 0; transition: opacity 0.14s ease; } .read-later-bookmark-outline { opacity: 1; transition: opacity 0.14s ease; } .read-later-toggle.is-active .read-later-bookmark-fill { opacity: 1; } .read-later-toggle.is-active .read-later-bookmark-outline { opacity: 0; } .read-later-toggle.is-confirming::after { content: "✓"; position: absolute; top: -7px; right: -7px; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 999px; background: var(--positive-text-deep); color: var(--surface-white); font-size: 10px; font-weight: 800; line-height: 1; animation: readLaterConfirmPulse 0.72s ease-out; } @keyframes readLaterConfirmPulse { 0% { transform: scale(0.4); opacity: 0; } 35% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } .read-later-click-toast { position: fixed; z-index: 9999; padding: 6px 9px; border: 1px solid var(--surface-cream-soft); border-radius: 999px; background: var(--surface-cream); color: var(--positive-text-deep); box-shadow: var(--shadow-soft); font-size: 12px; font-weight: 780; line-height: 1; pointer-events: none; opacity: 0; transform: translate(-50%, -6px) scale(0.96); transition: opacity 0.14s ease, transform 0.14s ease; } .read-later-click-toast.is-visible { opacity: 1; transform: translate(-50%, -16px) scale(1); } button.report-v2-source-state-pill.report-v2-source-read-later { cursor: pointer; font: inherit; } .report-v2-source-read-later { border: 1px solid var(--border-pale); background: var(--surface-white); } .report-v2-source-read-later.is-active { border-color: var(--surface-cream-soft); background: var(--surface-cream); color: var(--positive-text-deep); } .report-v2-source-read-later .read-later-bookmark-icon, .review-side-action-icon .read-later-bookmark-icon { width: 15px; height: 15px; } .daily-research-workflow { display: grid; grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.6fr); gap: 14px; align-items: center; margin: 0 0 16px; padding: 13px 14px; border: 1px solid rgba(69, 102, 83, 0.18); border-radius: 16px; background: linear-gradient(135deg, rgba(247, 244, 234, 0.9), rgba(239, 247, 250, 0.72)), var(--surface-white); box-shadow: 0 8px 20px rgba(24, 35, 45, 0.045); } .daily-research-workflow.is-sticky { position: sticky; top: 118px; z-index: 1040; backdrop-filter: blur(14px); box-shadow: 0 12px 26px rgba(24, 35, 45, 0.08); } .daily-research-workflow-copy { min-width: 0; } .daily-research-workflow-copy .v21-eyebrow { color: var(--brand-deep); letter-spacing: 0.045em; font-weight: 760; } .daily-research-workflow-copy p { margin: 5px 0 0; color: var(--ink-cool-grey); font-size: 12.5px; line-height: 1.42; } .daily-research-workflow-main { display: grid; gap: 8px; min-width: 0; } .daily-research-workflow-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; min-width: 0; } .daily-research-workflow-step { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; min-height: 54px; padding: 8px 9px; border: 1px solid rgba(42, 87, 104, 0.12); border-radius: 12px; background: rgba(255, 255, 255, 0.68); color: var(--ink-navy); text-decoration: none !important; box-shadow: 0 4px 10px rgba(24, 35, 45, 0.025); transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease; } .daily-research-workflow-step:hover, .daily-research-workflow-step:focus-visible { transform: translateY(-2px); border-color: rgba(69, 102, 83, 0.28); background: var(--surface-white); box-shadow: 0 10px 20px rgba(24, 35, 45, 0.08); outline: none; } .daily-research-workflow-step.is-primary, .daily-research-workflow-step.is-current { border-color: rgba(185, 137, 47, 0.36); background: rgba(255, 251, 243, 0.9); } .daily-research-workflow-step.is-complete { border-color: rgba(69, 102, 83, 0.18); background: rgba(239, 247, 250, 0.82); color: var(--positive-text-deep); } .daily-research-workflow-step.is-disabled { opacity: 0.62; box-shadow: none; cursor: default; } .daily-research-workflow-step.is-disabled:hover { transform: none; background: rgba(255, 255, 255, 0.68); border-color: rgba(42, 87, 104, 0.12); } .daily-research-workflow-index { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: var(--surface-mint); color: var(--positive-text-deep); font-size: 11px; font-weight: var(--type-weight-heavy); line-height: 1; } .daily-research-workflow-step.is-primary .daily-research-workflow-index, .daily-research-workflow-step.is-current .daily-research-workflow-index { background: var(--gold-accent); color: var(--surface-white); } .daily-research-workflow-step.is-complete .daily-research-workflow-index { background: var(--surface-mint-deep); color: var(--surface-white); } .daily-research-workflow-step-copy { display: grid; gap: 2px; min-width: 0; } .daily-research-workflow-step-copy strong, .daily-research-workflow-step-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .daily-research-workflow-step-copy strong { color: var(--ink-navy); font-size: 12.5px; font-weight: var(--type-weight-strong); line-height: 1.1; } .daily-research-workflow-step-copy span { color: var(--ink-muted); font-size: 11.25px; line-height: 1.15; } .daily-research-workflow-arrow { color: var(--ink-muted); font-size: 18px; line-height: 1; } .daily-research-workflow-subnav { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding-top: 2px; } .daily-research-workflow-subnav span { color: var(--ink-muted); font-size: 10.5px; font-weight: var(--type-weight-heavy); letter-spacing: 0.07em; text-transform: uppercase; } .daily-research-workflow-subnav a { display: inline-flex; align-items: center; min-height: 26px; padding: 5px 9px; border: 1px solid rgba(42, 87, 104, 0.12); border-radius: 999px; background: rgba(255, 255, 255, 0.68); color: var(--ink-navy); font-size: 11.5px; font-weight: var(--type-weight-strong); text-decoration: none; box-shadow: 0 3px 8px rgba(24, 35, 45, 0.025); transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, color 0.16s ease; } .daily-research-workflow-subnav a:hover, .daily-research-workflow-subnav a:focus-visible { transform: translateY(-1px); border-color: rgba(69, 102, 83, 0.28); background: var(--surface-white); box-shadow: 0 8px 16px rgba(24, 35, 45, 0.07); text-decoration: none; outline: none; } .daily-research-workflow-subnav a.is-active { border-color: rgba(185, 137, 47, 0.42); background: rgba(255, 251, 243, 0.94); color: var(--positive-text-deep); box-shadow: 0 7px 15px rgba(185, 137, 47, 0.12); } @media (max-width: 980px) { .daily-research-workflow { grid-template-columns: minmax(0, 1fr); } .daily-research-workflow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .daily-research-workflow { padding: 12px; } /* On phones the workflow stacks to a tall 1-column list; keeping it sticky pinned it over ~half the screen, so let it scroll away. */ .daily-research-workflow.is-sticky { position: static; } .daily-research-workflow-steps { grid-template-columns: minmax(0, 1fr); } /* Phones: show only one step at a time. The pager (daily_research_workflow.js) picks which step based on the page and lets the reader page back/forward. Gated on [data-mobile-pager] so that if the JS doesn't run, all steps still show rather than vanishing. */ .daily-research-workflow[data-mobile-pager] .daily-research-workflow-steps .daily-research-workflow-step:not(.is-mobile-active) { display: none; } /* The single visible step always wears the active/gold look, regardless of which step syncWorkflow marked is-primary from stored progress. */ .daily-research-workflow[data-mobile-pager] .daily-research-workflow-step.is-mobile-active:not(.is-disabled) { border-color: rgba(185, 137, 47, 0.36); background: rgba(255, 251, 243, 0.9); } .daily-research-workflow[data-mobile-pager] .daily-research-workflow-step.is-mobile-active:not(.is-disabled) .daily-research-workflow-index { background: var(--gold-accent); color: var(--surface-white); } .daily-research-workflow-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } /* No pager controls until the JS marks the widget ready. */ .daily-research-workflow:not([data-mobile-pager]) .daily-research-workflow-pager { display: none; } .drw-pager-btn { appearance: none; border: 1px solid rgba(0, 0, 0, 0.12); background: #fff; color: var(--ink, #1f2a24); font: inherit; font-size: 13px; font-weight: 600; line-height: 1; padding: 8px 12px; border-radius: 999px; cursor: pointer; } .drw-pager-btn[disabled] { cursor: default; } .drw-pager-status { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-soft, #6b7770); } } /* The pager bar is a phone affordance only — never show it on desktop. */ @media (min-width: 621px) { .daily-research-workflow-pager { display: none; } } @media (prefers-reduced-motion: reduce) { .daily-research-workflow-step, .daily-research-workflow-step:hover, .daily-research-workflow-step:focus-visible { transition: none; transform: none; } }