/* Idea Evolver brand theme — tokens pulled from ideaevolver.com: dark bg #020021 / light bg #fffdf7 (the site's own light mode), gradient 68deg #ff3c6d → #ff8f6e, blue-tinted borders rgba(5,97,183,*), Karla body / Space Grotesk display. Dark is the default; flips every token below. JS chart code reads these via cssVar() (common.js) at load time — the theme toggle reloads the page so charts repaint with the new values. */ :root { color-scheme: dark; --font-body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: "Space Grotesk", "Karla", system-ui, sans-serif; /* Type scale — every font-size in the app sits on this ladder (micro 10/11px chart labels and the 30px+ welcome display sizes excepted). Heading rule: h1 = 2xl, page-header h2 = xl, panel h2 = base. */ --fs-2xs: 12px; --fs-xs: 13px; --fs-sm: 14px; --fs-md: 15px; --fs-base: 16px; --fs-lg: 18px; --fs-xl: 20px; --fs-2xl: 22px; --fs-3xl: 24px; --track-label: 0.06em; /* uppercase section/label tracking */ /* Spacing / radius / elevation ladders (used by the shared primitives; media-query tiers are 640 / 760 / 900 / 1100) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --r-sm: 6px; --r-ctl: 8px; /* buttons, inputs, small controls */ --r-card: 12px; /* cards, panels */ --r-tile: 10px; /* inset tiles inside a panel */ --r-pill: 999px; --shadow-1: 0 2px 8px var(--shadow-pop); --shadow-2: 0 12px 30px var(--shadow-pop); --bg: #020021; --panel: #0a0a33; --panel-raised: #11113f; --border: rgba(5, 97, 183, 0.45); --border-soft: rgba(5, 97, 183, 0.25); --border-faint: rgba(5, 97, 183, 0.12); --row-hover: rgba(5, 97, 183, 0.10); --text: #f2f3fb; --muted: #9aa2c9; --muted-soft: rgba(154, 162, 201, 0.12); --accent: #ff3c6d; --accent-2: #ff8f6e; --link: #ff8f6e; /* anchor text; tracks accent-2 in dark */ --accent-glow: 255, 60, 109; /* RGB triplet for glow box-shadows */ --gradient: linear-gradient(68deg, #ff3c6d, #ff8f6e); --accent-soft: rgba(255, 60, 109, 0.12); --brand-blue: #0561b7; --button-bg: #10528f; --button-bg-hover: #1465ad; --button-glow: rgba(5, 97, 183, 0.35); --user-bubble: #113f75; --assistant-bubble: #0a0a33; --topbar-bg: rgba(2, 0, 33, 0.92); --mobile-nav-bg: rgb(5, 3, 38); --code-bg: #05041f; --code-text: #e6e6f2; --scroll-thumb: #11113f; --shadow-pop: rgba(0, 0, 0, 0.45); --media-bg: rgba(0, 0, 0, 0.35); /* Status + chart semantics (also read from JS via cssVar) */ --pos: #4ade80; --pos-deep: #2fbf71; --pos-soft: rgba(74, 222, 128, 0.16); --pos-fade: rgba(74, 222, 128, 0.08); --pos-zone: rgba(74, 222, 128, 0.30); --neg: #ff3c6d; --neg-text: #ff7a9c; --neg-soft: rgba(255, 60, 109, 0.16); --neg-fade: rgba(255, 60, 109, 0.08); --neg-zone: rgba(255, 60, 109, 0.30); --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, 0.15); --warn-zone: rgba(251, 191, 36, 0.30); --danger: #e5484d; --chart-blue: #7aa2ff; --chart-blue-soft: rgba(122, 162, 255, 0.14); --chart-blue-fade: rgba(122, 162, 255, 0.08); --sky: #7dd3fc; --teal: #2aa198; --teal-soft: rgba(42, 161, 152, 0.14); --chart-grid: rgba(5, 97, 183, 0.15); --chart-axis: rgba(5, 97, 183, 0.25); --tick-line: rgba(154, 162, 201, 0.45); --verdict-fair-bg: rgba(5, 97, 183, 0.25); --verdict-fair-text: #9cc4ec; /* Deal-type categorical set (validated on --panel for CVD + contrast) */ --dt-organic: #0ea5a0; --dt-paid: #ea580c; --dt-acnu: #ec4899; --dt-unstated: #7c88a1; /* General chart categorical set, fixed slot order (validated on --panel for lightness/chroma/CVD/contrast; catch-all series wear --muted) */ --chart-cat-1: #3b82f6; --chart-cat-2: #0d9488; --chart-cat-3: #ea580c; --chart-cat-4: #a855f7; --chart-cat-5: #65a30d; --chart-cat-6: #ec4899; /* A line series drawn ON TOP of columns (Expenses: COGS over total spend). Cyan-blue is orange's complement, so it stays legible where it crosses the orange column set — the warm cat slots (3, 6) do not. Also the CVD-safe pairing against orange. */ --chart-overlay-line: #38bdf8; /* The Overview chart's Slack overlay line — purple clears every other overlay and column color in BOTH themes (cat-4 doesn't in light, where it matches --sky) */ --chart-slack: #a855f7; } /* Light mode — HELIOS, the Idea Evolver "Solar Flare" light brand kit: Stellar Cream #fffdf7 canvas, Deep Space #020021 ink (the kit's Sunspot brown is deprecated), Solar Orange #ea580c primary (#c2410c hover), Photosphere #f59e0b highlights, warm solar borders, Aurora green / Red Dwarf semantics, Eclipse violet as the cool chart accent, Trusty Blue for info. The brand gradient flips to Solar Flare (dwarf-600 → solar-600 → photosphere-500). */ :root[data-theme="light"] { color-scheme: light; --bg: #fffdf7; --panel: #ffffff; --panel-raised: #fbf3e4; --border: rgba(234, 88, 12, 0.40); --border-soft: rgba(234, 88, 12, 0.22); --border-faint: rgba(234, 88, 12, 0.12); --row-hover: rgba(234, 88, 12, 0.06); --text: #020021; --muted: #565c80; --muted-soft: rgba(86, 92, 128, 0.12); --accent: #ea580c; --accent-2: #ea580c; /* non-link accents; solar-700 reads brown */ --link: #ea580c; /* solar-600, matching the kit's link color */ --accent-glow: 234, 88, 12; --gradient: linear-gradient(135deg, #dc2626 0%, #ea580c 50%, #f59e0b 100%); --accent-soft: rgba(234, 88, 12, 0.10); --button-bg: #ea580c; --button-bg-hover: #c2410c; --button-glow: rgba(234, 88, 12, 0.30); --user-bubble: #0561b7; /* Trusty Blue — matches the dark theme's blue bubble */ --assistant-bubble: #ffffff; --topbar-bg: rgba(255, 253, 247, 0.92); --mobile-nav-bg: #fffdf7; --code-bg: #fbf3e4; --code-text: #020021; --scroll-thumb: rgba(2, 0, 33, 0.20); --shadow-pop: rgba(2, 0, 33, 0.15); --media-bg: rgba(2, 0, 33, 0.06); --pos: #059669; --pos-deep: #047857; --pos-soft: rgba(5, 150, 105, 0.10); --pos-fade: rgba(5, 150, 105, 0.07); --pos-zone: rgba(5, 150, 105, 0.24); --neg: #dc2626; --neg-text: #b91c1c; --neg-soft: rgba(220, 38, 38, 0.09); --neg-fade: rgba(220, 38, 38, 0.06); --neg-zone: rgba(220, 38, 38, 0.20); --warn: #d97706; /* photosphere-600 — amber-700 reads brown */ --warn-soft: rgba(245, 158, 11, 0.16); --warn-zone: rgba(245, 158, 11, 0.30); --danger: #dc2626; --chart-blue: #6d28d9; --chart-blue-soft: rgba(109, 40, 217, 0.12); --chart-blue-fade: rgba(109, 40, 217, 0.06); --sky: #0561b7; --teal: #059669; --teal-soft: rgba(5, 150, 105, 0.10); --chart-grid: rgba(2, 0, 33, 0.07); --chart-axis: rgba(2, 0, 33, 0.18); --tick-line: rgba(2, 0, 33, 0.30); --verdict-fair-bg: rgba(5, 97, 183, 0.12); --verdict-fair-text: #054e94; /* Deal-type categorical set (validated on --panel for CVD + contrast) */ --dt-organic: #0d9488; --dt-paid: #ea580c; --dt-acnu: #db2777; --dt-unstated: #6b7280; /* General chart categorical set, fixed slot order (validated on --panel for lightness/chroma/CVD/contrast; catch-all series wear --muted) */ --chart-cat-1: #6d28d9; --chart-cat-2: #0d9488; --chart-cat-3: #ea580c; --chart-cat-4: #0561b7; --chart-cat-5: #65a30d; --chart-cat-6: #db2777; /* Deeper than the dark theme's so it holds against the cream/white panel; deliberately the kit's Trusty Blue */ --chart-overlay-line: #0561b7; --chart-slack: #a855f7; } * { box-sizing: border-box; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); } /* Highcharts sets its own font stack on the chart container; override so axis labels and tooltips use the brand font */ .highcharts-container text, .highcharts-container span { font-family: var(--font-body) !important; } /* One unbreakable token or overwide element must never make the whole page sideways-scrollable (recurring on the phone chat view). Wide content scrolls inside its own container (.table-wrap, pre, chat tables). clip, not hidden: hidden would turn body into a scroll container and break the sticky topbar. The clip has to sit on BOTH html and body. With html left at visible, body's overflow value is propagated to the viewport (where clip means hidden) and body itself is treated as visible — so the wide element still extends the document, desktop browsers merely refuse to scroll there, and iOS Safari, which ignores viewport overflow-x: hidden for touch panning, lets the whole page drift sideways (the phone chat view, 2026-09-15). Setting html's overflow-x stops the propagation: body then clips its descendants for real and the document never grows past the viewport in the first place. */ html { overflow-x: clip; } body { margin: 0; font-family: var(--font-body); background: var(--bg); color: var(--text); overflow-x: clip; } /* Theme-matched scrollbars */ * { scrollbar-color: var(--scroll-thumb) transparent; scrollbar-width: thin; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 6px; border: 2px solid var(--bg); } *::-webkit-scrollbar-thumb:hover { background: var(--border); } .topbar { display: flex; align-items: center; gap: clamp(10px, 2vw, 24px); padding: 10px clamp(10px, 2vw, 20px); background: var(--topbar-bg); border-bottom: 1px solid var(--border-soft); position: sticky; top: 0; z-index: 10; } .brand { text-decoration: none; white-space: nowrap; } /* Wordmark (garrett-logo.png, the CEO's original asset): cap-height box, transparent padding trimmed at build time */ .brand img { height: 15px; width: auto; display: block; } /* Home plus three groups fit on one row without scrolling; the old sideways-scroll hack would clip the dropdown menus anyway. */ .topbar nav { display: flex; gap: 4px; flex: 1; min-width: 0; flex-wrap: wrap; } .topbar nav a, .nav-group summary { padding: 6px 14px; border-radius: 8px; text-decoration: none; color: var(--muted); font-weight: 500; white-space: nowrap; } .topbar nav a.active, .topbar nav a:hover, .nav-group summary.active, .nav-group summary:hover { background: var(--accent-soft); color: var(--accent); } /* ── Notification badge (common.js): rides the topbar bell's top-right corner. Same delight language as the Ask button: while Garrett works, a small ✦ spark twinkles quietly (the hold music); when results are ready, a brand-gradient count pill lands with a springy pop, breathes a soft glow, and (on new arrivals) throws a tiny sparkle burst. ── */ /* The explicit display beats the hidden attribute's UA rule — restore it */ .nav-notify[hidden] { display: none; } /* Regenerate buttons are the owner's. Each template marks its button data-owner-only and base.html puts is-owner on the body for the owner alone; display:none beats the pages' own hidden/disabled toggling, so the scripts keep wiring the (invisible) button without null checks. */ body:not(.is-owner) [data-owner-only] { display: none !important; } .nav-notify { position: absolute; top: -2px; right: -4px; display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; background: var(--gradient); color: #fff; font-size: var(--fs-xs); font-weight: 700; line-height: 1; } /* Working: no pill — just the quiet spark */ .nav-notify.busy { background: none; min-width: 0; height: auto; padding: 0; color: var(--accent-2); font-size: var(--fs-sm); animation: nav-spark-twinkle 2.2s ease-in-out infinite; } /* Ready: springy landing, then a gentle breathing glow until seen */ .nav-notify.ready { box-shadow: 0 0 8px rgba(var(--accent-glow), 0.45); animation: nav-notify-breathe 2.6s ease-in-out infinite; } .nav-notify.landed { animation: nav-notify-land 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), nav-notify-breathe 2.6s ease-in-out 0.5s infinite; } @keyframes nav-spark-twinkle { 0%, 100% { opacity: 0.45; transform: scale(0.9) rotate(0deg); } 50% { opacity: 1; transform: scale(1.15) rotate(45deg); } } @keyframes nav-notify-land { 0% { transform: scale(0); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } } @keyframes nav-notify-breathe { 0%, 100% { box-shadow: 0 0 4px rgba(var(--accent-glow), 0.3); } 50% { box-shadow: 0 0 12px rgba(var(--accent-glow), 0.65); } } @media (prefers-reduced-motion: reduce) { .nav-notify.busy, .nav-notify.ready, .nav-notify.landed, .notify-item.running .notify-icon { animation: none; } } /* ── Two-click delete confirm (common.js confirmedClick): the armed "Sure?" face. Inset ring instead of a border so buttons whose idle face is borderless don't shift layout when they arm. ── */ button.armed { color: var(--accent); background: var(--accent-soft); border-radius: 6px; font-weight: 700; animation: armed-pulse 1.1s ease-in-out infinite; } @keyframes armed-pulse { from, to { box-shadow: inset 0 0 0 1px var(--accent), 0 0 4px rgba(var(--accent-glow), 0.25); } 50% { box-shadow: inset 0 0 0 1px var(--accent), 0 0 12px rgba(var(--accent-glow), 0.55); } } @media (prefers-reduced-motion: reduce) { button.armed { animation: none; box-shadow: inset 0 0 0 1px var(--accent); } } /* ── Nav dropdown groups ── */ .nav-group { position: relative; } .nav-group summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; } .nav-group summary::-webkit-details-marker { display: none; } .nav-caret { font-size: var(--fs-2xs); transition: transform 0.15s ease; } .nav-group[open] .nav-caret { transform: rotate(180deg); } .nav-menu { position: absolute; left: 0; top: calc(100% + 6px); min-width: 160px; background: var(--panel-raised); border: 1px solid var(--border); border-radius: 10px; padding: 6px; z-index: 20; box-shadow: 0 8px 24px var(--shadow-pop); display: flex; flex-direction: column; gap: 2px; } .topbar nav .nav-menu a { padding: 7px 10px; border-radius: 6px; } .nav-section { display: flex; flex-direction: column; gap: 2px; } /* The Macro menu's category rows (The Economy, Money & Credit, Markets, and the two Watch inputs) each wear one hue from the validated categorical set — a small pip before the label, seated in a soft halo, so the rows read apart at a glance without the menu turning into a color chart. Slots 3 and 6 sit out: cat-3 IS the light accent and cat-6 is a near-miss for the dark one, so either would read as "selected" rather than "section". The same hues carry to the category pages' headers (.cat-hero[data-section]). */ [data-section="the-economy"] { --sec: var(--chart-cat-1); } [data-section="money-credit"] { --sec: var(--chart-cat-2); } [data-section="markets"] { --sec: var(--chart-cat-4); } [data-section="watch"] { --sec: var(--chart-cat-5); } .topbar nav .nav-menu a[data-section] { display: flex; align-items: center; gap: 9px; } .topbar nav .nav-menu a[data-section]::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--sec, var(--muted)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sec, var(--muted)) 16%, transparent); } /* A category row warms to its hue on hover — the accent still owns the active row, so the two never say the same thing. */ .topbar nav .nav-menu a[data-section]:hover:not(.active) { background: color-mix(in srgb, var(--sec) 10%, transparent); color: color-mix(in srgb, var(--sec) 70%, var(--text)); } /* ── Mobile nav: hamburger + slide-down panel ── Below 760px the nav can't fit on one row (it used to wrap into a broken multi-line header), so it collapses behind a hamburger. The panel drops from under the topbar and the dropdown groups become inline accordions. */ .nav-toggle { display: none; background: none; border: none; color: var(--muted); font-size: var(--fs-xl); font-weight: 400; line-height: 1; padding: 8px 10px; border-radius: 8px; cursor: pointer; } .nav-toggle:hover, .topbar.nav-open .nav-toggle { background: var(--accent-soft); color: var(--accent); } .nav-toggle .nav-toggle-x { display: none; } .topbar.nav-open .nav-toggle-x { display: inline; } .topbar.nav-open .nav-toggle-bars { display: none; } @media (max-width: 760px) { .nav-toggle { display: inline-flex; } /* nav leaves the row (absolute panel below), so the brand pushes the Ask button, avatar and hamburger to the right edge */ .brand { margin-right: auto; } .topbar nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 2px; padding: 8px 12px 14px; /* opaque (unlike the topbar's 0.92) — page content underneath would ghost through the menu */ background: var(--mobile-nav-bg); border-bottom: 1px solid var(--border); box-shadow: 0 18px 32px var(--shadow-pop); max-height: calc(100dvh - 58px); overflow-y: auto; } .topbar.nav-open nav { display: flex; } /* Finger-sized targets */ .topbar nav a, .nav-group summary { padding: 10px 12px; font-size: var(--fs-base); } .nav-menu { position: static; min-width: 0; background: none; border: none; box-shadow: none; padding: 0 0 4px 16px; } .topbar nav .nav-menu a { padding: 8px 12px; } } /* iOS Safari auto-zooms the page when a focused form control's font is under 16px — and then leaves the layout zoomed and sideways- scrollable (the chat page's 15px model select triggered exactly this). On touch widths every form control holds the 16px floor so focusing one never zooms; !important so no classed control (present or future) can dip back under it. */ @media (max-width: 760px) { input, select, textarea { font-size: var(--fs-base) !important; } } /* ── Ask button (topbar → chat page) ── */ /* Calm at rest (soft pink pill, an occasional twinkle of the ✦), alive on hover (brand-gradient fill, shine sweep, springy spark spin, glow), squishy on press. Links to the chat page. */ .ask-btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: var(--fs-base); cursor: pointer; white-space: nowrap; text-decoration: none; transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, color 0.2s ease, border-color 0.2s ease; } /* Gradient fill layer, faded in on hover — gradients can't transition, opacity can */ .ask-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gradient); opacity: 0; transition: opacity 0.25s ease; } /* One diagonal shine streak per hover */ .ask-btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent); transform: skewX(-20deg); opacity: 0; } .ask-btn:hover { color: #fff; border-color: transparent; transform: translateY(-1px); box-shadow: 0 2px 18px rgba(var(--accent-glow), 0.45); } .ask-btn:hover::before { opacity: 1; } .ask-btn:hover::after { animation: ask-shine 0.6s ease 0.05s; } .ask-btn:active { transform: translateY(0) scale(0.94); box-shadow: 0 1px 8px rgba(var(--accent-glow), 0.35); } .ask-btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; } /* On the chat page itself the pill stays put (nothing to navigate to) — filled gradient marks it as the current page instead of hiding it */ .ask-btn.active { color: #fff; border-color: transparent; cursor: default; } .ask-btn.active::before { opacity: 1; } .ask-btn.active:hover { transform: none; box-shadow: none; } .ask-btn.active:hover::after { animation: none; } .ask-btn.active:active { transform: none; } .ask-btn-spark { display: inline-block; animation: ask-twinkle 7s ease-in-out 3s infinite; } .ask-btn:hover .ask-btn-spark { animation: ask-spin 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; } @keyframes ask-shine { from { left: -60%; opacity: 1; } to { left: 120%; opacity: 0; } } /* Rare, brief idle twinkle — life without nagging for attention */ @keyframes ask-twinkle { 0%, 91%, 100% { transform: none; } 93% { transform: scale(1.35) rotate(25deg); } 95% { transform: scale(0.85) rotate(-15deg); } 97% { transform: scale(1.15) rotate(8deg); } } @keyframes ask-spin { from { transform: rotate(0) scale(1); } 60% { transform: rotate(200deg) scale(1.3); } to { transform: rotate(180deg) scale(1.2); } } /* Sparkle burst particles (common.js sparkleBurstAt) */ .ask-burst-spark { position: fixed; z-index: 60; pointer-events: none; user-select: none; transform: translate(-50%, -50%); animation: ask-burst 0.65s ease-out forwards; } @keyframes ask-burst { from { transform: translate(-50%, -50%) scale(0.4) rotate(0deg); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1) rotate(120deg); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .ask-btn, .ask-btn::before { transition: none; } .ask-btn:hover, .ask-btn:active { transform: none; } .ask-btn:hover::after, .ask-btn-spark, .ask-btn:hover .ask-btn-spark { animation: none; } } /* ── Theme toggle (topbar): the ◑ contrast icon, same face in both themes — the current-theme label rides the tooltip and aria-label. Overrides the global filled-button face; sized to stay finger- friendly without widening the mobile topbar row. ── */ .theme-toggle, .palette-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; background: none; border: none; color: var(--muted); padding: 8px; border-radius: 8px; cursor: pointer; } .theme-toggle:hover { background: var(--accent-soft); color: var(--accent); } .palette-btn:hover { background: var(--accent-soft); color: var(--accent); } .theme-toggle:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; } .theme-toggle svg { width: 18px; height: 18px; display: block; } .palette-btn svg { width: 18px; height: 18px; display: block; } /* ── Notification bell (topbar): the badge above rides its corner, the dropdown below lists each running/finished job. Mirrors the theme toggle's icon-button face and the user menu's dropdown panel. ── */ .notify-menu { position: relative; } .notify-menu summary { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--muted); padding: 8px; border-radius: 8px; cursor: pointer; list-style: none; } .notify-menu summary::-webkit-details-marker { display: none; } .notify-menu summary:hover, .notify-menu[open] summary { background: var(--accent-soft); color: var(--accent); } .notify-menu summary:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; } .notify-menu summary svg { width: 18px; height: 18px; display: block; } .notify-dropdown { position: absolute; right: 0; top: calc(100% + 6px); width: min(340px, calc(100vw - 24px)); background: var(--panel-raised); border: 1px solid var(--border); border-radius: 10px; padding: 8px; z-index: 20; box-shadow: 0 8px 24px var(--shadow-pop); } .notify-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--fs-md); font-weight: 600; padding: 4px 8px 8px; border-bottom: 1px solid var(--border-soft); margin-bottom: 6px; } .notify-head button { background: none; border: none; color: var(--accent); font-size: var(--fs-xs); font-weight: 600; font-family: inherit; padding: 2px 6px; border-radius: 6px; cursor: pointer; } .notify-head button:hover { background: var(--accent-soft); } .notify-head button[hidden] { display: none; } .notify-list { display: flex; flex-direction: column; gap: 2px; max-height: min(60vh, 420px); overflow-y: auto; } .notify-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px; border-radius: 8px; text-decoration: none; color: var(--text); } a.notify-item:hover { background: var(--accent-soft); } a.notify-item:hover .notify-title { color: var(--accent); } .notify-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: var(--fs-2xs); font-weight: 700; } /* The hold music: a running job's ✦ twinkles like the bell's spark */ .notify-item.running .notify-icon { background: none; color: var(--accent-2); font-size: var(--fs-sm); animation: nav-spark-twinkle 2.2s ease-in-out infinite; } .notify-item.error .notify-icon { background: rgba(220, 38, 38, 0.12); color: #dc2626; } .notify-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .notify-title { font-size: var(--fs-md); font-weight: 600; line-height: 1.3; } .notify-detail { font-size: var(--fs-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .notify-time { font-size: var(--fs-2xs); color: var(--muted); } .notify-empty { padding: 18px 8px; text-align: center; font-size: var(--fs-sm); color: var(--muted); } /* The bell sits mid-row on phones — an anchored panel would run off the left edge, so it becomes a viewport-wide sheet under the topbar (58px = the mobile topbar height, same constant as the nav panel). */ @media (max-width: 760px) { .notify-dropdown { position: fixed; left: 12px; right: 12px; top: 58px; width: auto; } } /* ── User menu (topbar) ── */ .user-menu { position: relative; } .user-menu summary { display: flex; align-items: center; gap: 8px; font-size: var(--fs-base); color: var(--muted); cursor: pointer; list-style: none; padding: 4px 6px; border-radius: 8px; white-space: nowrap; } .user-menu summary::-webkit-details-marker { display: none; } .user-menu summary:hover { background: var(--accent-soft); } .avatar { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border-soft); flex-shrink: 0; } .avatar-initial { display: inline-flex; align-items: center; justify-content: center; background: var(--button-bg); color: #fff; font-size: var(--fs-base); font-weight: 600; } .user-dropdown { position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px; background: var(--panel-raised); border: 1px solid var(--border); border-radius: 10px; padding: 8px; z-index: 20; box-shadow: 0 8px 24px var(--shadow-pop); } .user-dropdown .user-email { font-size: var(--fs-md); color: var(--muted); padding: 4px 8px 8px; border-bottom: 1px solid var(--border-soft); margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; } .user-dropdown a, .user-dropdown button { display: block; width: 100%; text-align: left; padding: 7px 8px; border: none; border-radius: 6px; background: none; color: var(--text); font-size: var(--fs-base); font-weight: 500; font-family: inherit; text-decoration: none; cursor: pointer; } .user-dropdown a:hover, .user-dropdown button:hover { background: var(--accent-soft); color: var(--accent); } /* User Type chip — the account's role label, shown on the header dropdown (own line under the email) and beside the profile name. The Admin Only chip shares the look: it labels a control restricted to the admin tier, and only renders where admins can see it. */ .user-type-chip, .admin-only-chip { display: inline-block; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent-2); border: 1px solid; border-radius: 5px; padding: 1px 7px; margin-left: 7px; vertical-align: 2px; } .panel-fold summary .admin-only-chip { margin-left: 0; vertical-align: 0; } .user-dropdown .user-type-chip { display: block; width: max-content; margin: 5px 0 2px; } /* The name is the widest topbar item and the first thing that would wrap the row; the avatar carries the menu, the email lives in the dropdown. Below 760px the nav is already behind the hamburger. */ @media (max-width: 900px) { .user-menu .user-name { display: none; } } /* ── Login page ── */ .login-main { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .login-card { background: var(--panel); padding: 40px 36px; width: min(360px, 100%); text-align: center; } .login-brand img { height: 26px; width: auto; display: inline-block; } .login-tagline { color: var(--muted); margin: 10px 0 24px; } .login-error { color: var(--accent); background: var(--accent-soft); border-radius: 8px; padding: 8px 12px; font-size: var(--fs-base); } .google-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px 16px; border-radius: 10px; background: #fff; color: #1f1f1f; font-weight: 600; font-size: var(--fs-md); text-decoration: none; } .google-btn:hover { background: #f1f3f8; } /* ── Profile page ── */ .profile-card { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; background: var(--panel); padding: 28px; margin-top: 16px; } .avatar-lg { width: 72px; height: 72px; font-size: 30px; } .profile-info { flex: 1; min-width: 200px; } .profile-info h1 { margin: 0 0 4px; font-size: var(--fs-2xl); } .profile-email { margin: 0; color: var(--muted); } .profile-meta { margin: 8px 0 0; color: var(--muted); font-size: var(--fs-base); } .signout-btn { padding: 9px 18px; border-radius: 8px; border: 1px solid var(--border); background: var(--button-bg); color: #fff; font-size: var(--fs-md); font-family: inherit; cursor: pointer; } .signout-btn:hover { background: var(--button-bg-hover); } /* Liquid layout: fluid width with a readability ceiling, padding scales with the viewport so narrow windows don't waste space on gutters */ main { width: min(1240px, 100%); margin: 0 auto; padding: clamp(10px, 2.5vw, 24px); } /* ── Chat ── Direction A ("reading column", design canvas 7d24bf9a): threads as flat rows grouped by day, Knowledge as a compact card, replies flush left under a ✦ byline instead of in a bubble, and a composer that stacks the textarea over a controls row on every screen size. */ .chat-main { display: flex; flex-direction: column; height: calc(100vh - 57px); /* dvh tracks the real visible height on phones (collapsing URL bar); the vh line above is the fallback for older browsers */ height: calc(100dvh - 57px); padding-bottom: max(12px, env(safe-area-inset-bottom)); } .chat-layout { display: flex; gap: 20px; flex: 1; min-height: 0; min-width: 0; } .conv-sidebar { width: 272px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; min-height: 0; } #new-conversation-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 9px 16px; } #new-conversation-btn svg { width: 16px; height: 16px; display: block; flex: none; } .conv-list { overflow-y: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; } /* Day groups: Pinned, Today, Yesterday, This Week, Earlier — the grouping replaces the per-row date */ .conv-group { display: flex; flex-direction: column; gap: 2px; } .conv-group-head { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); padding: 10px 10px 4px; } .conv-item { position: relative; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; cursor: pointer; min-width: 0; } .conv-item:hover { background: var(--row-hover); } .conv-item.active { background: var(--accent-soft); color: var(--accent); } .conv-pin-glyph { width: 14px; height: 14px; flex: none; color: var(--muted); } .conv-item.active .conv-pin-glyph { color: var(--accent); } .conv-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); font-weight: 500; white-space: nowrap; overflow: hidden; } .conv-title-text { overflow: hidden; text-overflow: ellipsis; } /* Per-thread reply state on sidebar rows (chat.js threadState): a small spinner while that thread generates, an accent dot once a reply landed unseen. Same states the bell narrates, in miniature. */ .conv-state-spinner { width: 0.8em; height: 0.8em; vertical-align: -0.05em; } .conv-unread-dot { display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); } .conv-title-input { width: 100%; font-size: var(--fs-md); font-weight: 500; font-family: inherit; background: var(--panel-raised); color: var(--text); border: 1px solid var(--accent); border-radius: 6px; padding: 2px 6px; outline: none; box-sizing: border-box; } /* The row's ⋮ shows on hover only; the thread header above the transcript carries the same menu for the open thread */ .conv-actions { display: flex; gap: 2px; visibility: hidden; flex: none; } .conv-item:hover .conv-actions, .conv-item.menu-open .conv-actions { visibility: visible; } .conv-act { background: transparent; color: var(--muted); border: none; padding: 0 6px; font-size: var(--fs-lg); line-height: 1; font-weight: 400; border-radius: 6px; } .conv-act:hover { color: var(--accent); background: var(--accent-soft); } /* Fixed-position popover appended to (the conv list scrolls and would clip an in-row dropdown). Mirrors .user-dropdown styling. */ .conv-menu { position: fixed; min-width: 150px; background: var(--panel-raised); border: 1px solid var(--border); border-radius: 10px; padding: 6px; z-index: 60; box-shadow: 0 8px 24px var(--shadow-pop); } .conv-menu-item { display: block; width: 100%; text-align: left; padding: 7px 10px; border: none; border-radius: 6px; background: none; color: var(--text); font-size: var(--fs-md); font-weight: 500; font-family: inherit; cursor: pointer; } .conv-menu-item:hover { background: var(--accent-soft); color: var(--accent); } .conv-menu-del { color: var(--neg); } .conv-menu-del:hover, .conv-menu-del.armed { background: var(--accent-soft); color: var(--neg); } /* Knowledge card (chat sidebar): the document store as Garrett's knowledge base — count, one-line drop target, compact list; the full manager lives on /documents */ .kb-section { background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--r-card); padding: 12px; display: flex; flex-direction: column; gap: 8px; max-height: 40%; flex: none; } .kb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .kb-title { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-size: var(--fs-base); font-weight: 600; } .kb-title svg { width: 16px; height: 16px; display: block; flex: none; } .kb-manage { font-size: var(--fs-sm); text-decoration: none; } .kb-manage:hover { color: var(--accent); } .kb-hint { font-size: var(--fs-xs); line-height: 1.45; margin: 0; } .kb-drop { padding: 8px 10px; font-size: var(--fs-sm); border-width: 1px; border-radius: var(--r-ctl); margin-bottom: 0; } .kb-status { font-size: var(--fs-sm); min-height: 0; } .kb-status:empty { display: none; } .kb-list { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; min-height: 0; } .kb-item { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 6px; text-decoration: none; color: var(--muted); font-size: var(--fs-sm); min-width: 0; } .kb-item:hover { background: var(--accent-soft); color: var(--text); } .kb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kb-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .kb-dot-done { background: var(--pos); } .kb-dot-failed { background: var(--neg); } .kb-dot-pending { background: var(--muted); } .chat-pane { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; } .chat-pane.dragover { outline: 2px dashed var(--accent); outline-offset: -6px; border-radius: 12px; } /* Thread header: the open thread's title and a pin / rename / ⋮ row — hidden while the composer is on a thread that hasn't been saved yet */ .thread-head { display: flex; align-items: center; gap: 12px; padding: 4px 8px 12px; border-bottom: 1px solid var(--border-faint); } .thread-head[hidden] { display: none; } .thread-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .thread-head-text .conv-title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; display: block; text-overflow: ellipsis; } .thread-head-text .conv-title-input { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; max-width: 560px; } .thread-meta { font-size: var(--fs-xs); color: var(--muted); } .thread-act { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 8px; background: transparent; border: 1px solid transparent; color: var(--muted); } .thread-act svg { width: 16px; height: 16px; display: block; } .thread-act:hover { background: var(--accent-soft); color: var(--accent); } .thread-act[aria-pressed="true"] { color: var(--accent); } /* Phones hide the sidebar, so this compact bar above the transcript carries thread switching there (chat.js keeps it in sync) */ .chat-threadbar { display: none; } @media (max-width: 760px) { .conv-sidebar, .thread-head { display: none; } .chat-layout { gap: 0; } .chat-pane { gap: 10px; } .chat-threadbar { display: flex; gap: 8px; padding-top: 10px; } .chat-threadbar select { flex: 1; min-width: 0; min-height: 44px; background: var(--panel-raised); border: 1px solid var(--border); color: var(--text); border-radius: 8px; font-size: var(--fs-base); font-weight: 500; padding: 8px 10px; } .chat-threadbar button { font-size: var(--fs-base); padding: 8px 12px; min-height: 44px; white-space: nowrap; } .msg.user { max-width: 94%; } .msg.assistant .msg-body, .msg.assistant .msg-audio-row, .msg.assistant .msg-usage, .msg.assistant .pending-row, .msg.assistant .retry-btn { margin-left: 0; } /* Icon-only controls on a phone-width composer row */ .composer-ctl-label, .composer-hint { display: none; } .composer-ctl { min-width: 44px; min-height: 40px; justify-content: center; } /* The select takes what the icon buttons and Send leave (out-ranks the desktop max-width rule further down) */ .composer-row .model-select { flex: 1; min-width: 0; max-width: none; } .composer-spacer { display: none; } .empty-hint { padding: 12px 0; gap: 18px; } /* Out-ranks the base .starters grid further down */ .empty-hint .starters { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Reading column: symmetric side padding centres an 800px column while align-self keeps the user bubble on its right edge */ .transcript { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px max(4px, calc((100% - 800px) / 2)); display: flex; flex-direction: column; gap: 22px; } /* Empty thread: a spark, a headline, and starters drawn from what Garrett can actually answer about */ .empty-hint { margin: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; width: 100%; max-width: 760px; padding: 24px 0; } .empty-hint[hidden] { display: none; } .empty-hint-intro { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; } .empty-hint h1 { font-size: var(--fs-3xl); font-weight: 600; margin: 6px 0 0; } .empty-hint p { margin: 0; color: var(--muted); font-size: var(--fs-base); line-height: 1.5; max-width: 460px; } .garrett-spark { width: 22px; height: 22px; border-radius: 50%; background: var(--gradient); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; flex: none; box-shadow: 0 0 0 3px rgba(var(--accent-glow), 0.14); } .garrett-spark-lg { width: 44px; height: 44px; font-size: 22px; box-shadow: 0 0 0 6px rgba(var(--accent-glow), 0.14); } .starters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; } .starter { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-tile); background: var(--panel); border: 1px solid var(--border-soft); color: var(--text); font-size: var(--fs-md); font-weight: 500; text-align: left; min-height: 44px; } .starter:hover { border-color: var(--accent); background: var(--accent-soft); } .starter svg { width: 18px; height: 18px; display: block; flex: none; color: var(--accent-2); } .starter-sub { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--muted); margin-top: 2px; } /* overflow-wrap: a pasted URL, long figure, or run-on token must break inside the bubble instead of pushing it past the viewport on phones */ .msg { line-height: 1.5; overflow-wrap: anywhere; } .msg.user { align-self: flex-end; max-width: 72%; padding: 10px 14px; border-radius: 14px; background: var(--user-bubble); color: #fff; white-space: pre-wrap; } /* Replies run flush left under a byline — no bubble, so tables and long markdown read like a document. The 30px indent lines the body up with the byline text, past the spark. */ .msg.assistant { align-self: stretch; display: flex; flex-direction: column; gap: 10px; } .msg-byline { display: flex; align-items: center; gap: 8px; } .msg-byline-who { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); } .msg-byline-when { font-size: var(--fs-xs); color: var(--muted); } .msg.assistant .msg-body { margin-left: 30px; line-height: 1.55; } .msg.assistant .msg-body:empty { display: none; } .msg.assistant .msg-audio-row, .msg.assistant .msg-usage, .msg.assistant .pending-row, .msg.assistant .retry-btn { margin-left: 30px; } .msg.assistant.error .msg-body { color: var(--neg-text); } .msg.assistant.error .retry-btn { display: inline-block; align-self: flex-start; } .pending-row { display: flex; align-items: center; gap: 8px; color: var(--muted); font-style: italic; } /* Composer: the textarea on top, the controls row underneath */ .composer { display: flex; flex-direction: column; gap: 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px 12px 10px; box-shadow: var(--shadow-1); } .composer textarea { width: 100%; border: none; /* User-expandable for big prompts: drag the handle, or just keep typing — common.js autoGrowTextarea grows it with the content */ resize: vertical; max-height: 340px; min-height: 42px; font: inherit; outline: none; background: transparent; color: var(--text); padding: 2px 4px; } .composer textarea::placeholder { color: var(--muted); } .composer-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .composer-spacer { flex: 1; } .composer-hint { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; } #send-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--r-pill); background: var(--gradient); color: #fff; } #send-btn svg { width: 14px; height: 14px; display: block; } #send-btn:hover:not(:disabled) { filter: brightness(1.08); } @media (max-width: 480px) { .empty-hint .starters { grid-template-columns: 1fr; } } /* ── Form-control base ── Zero-specificity (:where) so every existing control rule wins; its job is filling the gaps so no input ever ships unstyled. */ :where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"])), :where(select, textarea) { font: inherit; font-size: var(--fs-base); color: var(--text); background: var(--panel-raised); border: 1px solid var(--border-soft); border-radius: var(--r-ctl); padding: 8px 10px; } :where(input, select, textarea):focus { border-color: var(--accent); } button { font: inherit; font-weight: 600; padding: 8px 16px; border-radius: 8px; border: none; background: var(--button-bg); color: #fff; cursor: pointer; } #new-conversation-btn:hover:not(:disabled), #promotion-refresh-btn:hover:not(:disabled) { background: var(--button-bg-hover); } button:disabled { opacity: 0.5; cursor: default; } /* ── Composer controls ── */ /* Model, Web and Attach share one outlined-chip face; the select keeps the raised fill so it reads as a picker */ .composer-ctl, .model-select { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--r-ctl); border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: var(--fs-md); font-weight: 500; white-space: nowrap; cursor: pointer; } .composer-ctl svg { width: 15px; height: 15px; display: block; flex: none; } .composer-ctl:hover:not(:disabled), .model-select:hover { border-color: var(--accent); } .model-select { background: var(--panel-raised); max-width: 260px; padding: 7px 8px; } /* Live web search toggle — off by default; pressed = on */ .web-toggle[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 600; } /* ── Attachments ── */ .attach-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px 8px; } .attach-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; font-size: var(--fs-md); font-weight: 500; /* Long filenames wrap inside the chip rather than widening the page */ max-width: 100%; overflow-wrap: anywhere; } .attach-chip button { background: transparent; border: none; color: var(--muted); padding: 0 2px; font-size: var(--fs-md); font-weight: 400; } .attach-chip button:hover { color: var(--accent); } /* Upload failed (kept inline with a retry, replacing the old alert()) vs attached-but-unreadable (extraction failed; the file still sends). */ .attach-chip.error { border-color: var(--danger); color: var(--danger); } .attach-chip.warn { border-color: var(--warn); background: var(--warn-soft); } /* Injection-scan banner: the user's pasted text or attachment contained instructions aimed at the AI. Sits between the user bubble and the reply. */ .msg-warning { align-self: stretch; margin: 0.25rem 0 0.5rem; padding: 0.6rem 0.9rem; border: 1px solid var(--warn); border-left-width: 4px; border-radius: 8px; background: var(--warn-soft); font-size: 0.85rem; line-height: 1.4; } .msg-warning ul { margin: 0.3rem 0 0 1.1rem; padding: 0; } .badge-flagged { margin-left: 0.4rem; background: var(--warn-soft); color: var(--warn); } .msg-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .msg.user .attach-chip.static { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.45); color: #fff; } /* Chat images are buttons into the shared lightbox (imageLightbox), not raw links out of the app. While the image loads, the button reserves a placeholder so the transcript doesn't jump on load. */ .msg-image-btn { display: block; padding: 0; margin-top: 10px; border: none; background: none; cursor: zoom-in; max-width: 100%; } .msg-image-btn.loading { min-height: 240px; width: 100%; border-radius: 10px; border: 1px solid var(--border-soft); background: var(--panel-raised); } .msg-image { display: block; max-width: 100%; max-height: 420px; border-radius: 10px; border: 1px solid var(--border-soft); } /* ── Markdown content (assistant replies, promotion report) ── */ .markdown-body table, .msg.assistant table { border-collapse: collapse; margin: 8px 0; display: block; overflow-x: auto; max-width: 100%; } .markdown-body th, .markdown-body td, .msg.assistant th, .msg.assistant td { border: 1px solid var(--border-soft); padding: 4px 10px; font-size: var(--fs-base); text-align: left; white-space: nowrap; } .markdown-body th, .msg.assistant th { background: var(--panel-raised); } .msg.assistant p:first-child { margin-top: 0; } .msg.assistant p:last-child { margin-bottom: 0; } code { background: var(--panel-raised); padding: 1px 5px; border-radius: 4px; font-size: 90%; } pre { background: var(--code-bg); border: 1px solid var(--border-soft); color: var(--code-text); padding: 12px; border-radius: 8px; overflow-x: auto; } pre code { background: transparent; padding: 0; color: inherit; } a { color: var(--link); } /* ── Dashboard / panels ── */ /* ── Card + chip primitives ── One border/radius recipe per card role; existing class names alias onto the primitives here so templates and JS stay untouched. */ .panel, .login-card, .profile-card, .crm-tile { border: 1px solid var(--border-soft); border-radius: var(--r-card); } .sum-tile, .stat-cell, .glob-card, .post-card, .opp-card, .fin-chart-block { border: 1px solid var(--border-soft); border-radius: var(--r-tile); } /* Neutral chip; the semantic badge families keep their own colors */ .crm-pill, .team-badge, .team-activity-chip, .qbo-chip, .team-more-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--panel-raised); border: 1px solid var(--border-soft); border-radius: var(--r-pill); padding: 4px 12px; font-size: var(--fs-sm); color: var(--muted); } .panel { background: var(--panel); padding: 16px clamp(12px, 2vw, 20px); margin-bottom: 20px; } .panel h2 { margin: 0 0 12px; font-size: var(--fs-base); } .tab-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .tab-row button { background: transparent; color: var(--muted); border: 1px solid var(--border-soft); padding: 5px 12px; font-weight: 500; font-size: var(--fs-base); } .tab-row button.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); } .table-wrap { overflow-x: auto; } .table-wrap table { border-collapse: collapse; font-size: var(--fs-base); } .table-wrap th, .table-wrap td { border: 1px solid var(--border-soft); padding: 4px 10px; text-align: left; white-space: nowrap; } .table-wrap th { background: var(--panel-raised); position: sticky; top: 0; } .growth-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 12px; } .muted { color: var(--muted); font-size: var(--fs-base); } /* ── Market dashboard ── */ .market-header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin: 6px 2px 14px; } .market-header h2 { margin: 0; font-size: var(--fs-xl); } /* Master-detail market panels: quote list left, one shared chart right. The grid stretches both cards to the taller of the two, and the chart flex-fills the detail card, so list and chart always line up. */ .market-panel { display: grid; grid-template-columns: minmax(300px, 5fr) 7fr; gap: 16px; align-items: stretch; } .mp-list { background: var(--panel); border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden; } .mp-list table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); } .mp-list th { text-align: right; font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-label); color: var(--muted); padding: 10px 14px 7px; border-bottom: 1px solid var(--border-soft); } .mp-list th:first-child { text-align: left; } .mp-list td { padding: 8px 14px; text-align: right; border-bottom: 1px solid var(--border-faint); font-variant-numeric: tabular-nums; white-space: nowrap; } .mp-list td:first-child { text-align: left; font-weight: 600; white-space: normal; } .mp-list tbody tr:last-child td { border-bottom: none; } .mp-row { cursor: pointer; } .mp-row:hover { background: var(--row-hover); } /* Selected row: accent left bar (CNBC-style) + soft highlight */ .mp-row.selected { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); } .mp-group td { padding: 12px 14px 4px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: var(--track-label); text-align: left; border-bottom: none; } .mp-detail { background: var(--panel); border: 1px solid var(--border-soft); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; min-width: 0; } .mp-detail-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; } .mp-detail-price { display: flex; align-items: baseline; gap: 10px; } .mp-detail-price .index-value { font-size: var(--fs-3xl); margin: 0; } .mp-chart { flex: 1; min-height: 260px; min-width: 0; margin-top: 8px; } @media (max-width: 900px) { .market-panel { grid-template-columns: 1fr; } .mp-chart { min-height: 220px; } } /* Phones: tighter cells, and quote lists drop the absolute-change column (the % move carries the signal) so nothing clips */ @media (max-width: 640px) { .mp-list th, .mp-list td { padding: 8px 9px; } .mp-quote th:nth-child(3), .mp-quote td:nth-child(3) { display: none; } } .index-name { font-size: var(--fs-md); font-weight: 600; color: var(--muted); } .index-note { font-size: var(--fs-sm); color: var(--muted); opacity: 0.8; margin-top: 1px; } .index-value { font-size: 30px; font-weight: 700; margin: 4px 0 2px; } .index-badge { font-size: var(--fs-base); font-weight: 600; min-height: 18px; } .badge-up { color: var(--pos); } .badge-down { color: var(--neg-text); } .index-range { margin-top: 6px; font-size: var(--fs-sm); } .feed-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); margin-right: 2px; } .feed-on { background: var(--pos); } .feed-off { background: var(--accent); } /* Period-return chips (cards) */ .chip-row { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; } .period-chip { display: flex; flex-direction: column; align-items: center; gap: 1px; background: transparent; border: 1px solid var(--border-soft); border-radius: 8px; padding: 3px 8px; font-weight: 500; cursor: pointer; } .period-chip:hover { border-color: var(--border); } .period-chip.active { border-color: var(--accent); background: var(--accent-soft); } .chip-label { font-size: var(--fs-xs); color: var(--muted); letter-spacing: var(--track-label); } .chip-pct { font-size: var(--fs-sm); font-weight: 600; color: var(--text); } /* Narration button (company analysis + chat replies) — a clear, circular speaker control with loading and playing states */ .audio-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto; background: var(--panel-raised); border: 1px solid var(--border); border-radius: 50%; color: var(--accent); cursor: pointer; margin-left: 8px; vertical-align: middle; transition: border-color 0.15s, background 0.15s, transform 0.1s; } .audio-btn:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.06); } .audio-btn.playing { border-color: var(--accent); background: var(--accent-soft); } /* Blocked: the track is fetched and ready but the browser refused autoplay (mobile) — pulse so the needed second tap is obvious. */ .audio-btn.blocked { border-color: var(--accent); background: var(--accent-soft); animation: audio-blocked-pulse 1.2s ease-in-out infinite; } @keyframes audio-blocked-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-glow), 0.45); } 50% { box-shadow: 0 0 0 6px rgba(var(--accent-glow), 0); } } @media (prefers-reduced-motion: reduce) { .audio-btn.blocked { animation: none; } } /* Progress ring: a conic sweep hugging the button while narration is playing (or paused midway), driven by --audio-progress from JS. */ .audio-btn { position: relative; } .audio-btn::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(var(--accent) var(--audio-progress, 0%), var(--border-soft) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); opacity: 0; transition: opacity 0.15s; pointer-events: none; } .audio-btn.started::before { opacity: 1; } .audio-btn:disabled { cursor: default; opacity: 0.7; } /* flex: none — as flex items inside the button, an SVG with only a viewBox (no intrinsic width) otherwise gets flex-shrunk to zero width */ .audio-icon { width: 18px; height: 18px; flex: none; display: block; } .audio-spinner { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--accent); animation: spin 0.8s linear infinite; } /* ── Generic loading indicator ── inline beside text, or loadingNote() (common.js) for the spinner + message block. Sized in em so it scales with the surrounding text. */ .spinner { display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -0.15em; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--accent); animation: spin 0.8s linear infinite; } /* Narrated variant (loadingStatus in common.js): says what's being fetched, animates trailing dots, and appends elapsed/slow-source meta */ .loading-status { flex-wrap: wrap; } .loading-dots { display: inline-flex; margin-left: -6px; } .loading-dots i { font-style: normal; animation: loading-dot 1.4s infinite; opacity: 0.25; } .loading-dots i::before { content: "."; } .loading-dots i:nth-child(2) { animation-delay: 0.2s; } .loading-dots i:nth-child(3) { animation-delay: 0.4s; } @keyframes loading-dot { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } } .loading-status-meta { font-size: var(--fs-xs); } .loading-note { display: flex; align-items: center; gap: 8px; color: var(--muted); padding: 12px 2px; } /* Container-aware centered variant (chart-height boxes, grids): the note centers itself instead of each container hand-rolling padding hacks. */ .loading-note.loading-center { justify-content: center; min-height: 160px; } /* The kit's one error face (loadFailed in common.js): "⚠️ message" in muted styling, optionally with the ↻ Retry affordance below. */ .retry-btn { display: inline-block; margin: 8px 8px 0 0; padding: 5px 14px; border: 1px solid var(--accent); border-radius: 999px; background: transparent; color: var(--accent); font: inherit; font-size: var(--fs-md); font-weight: 600; cursor: pointer; } .retry-btn:hover { background: var(--accent-soft); } .load-failed .retry-btn { display: block; } /* Identity skeleton: a pulsing bar holds a heading's place while the real name loads — the page's identity must never read "Loading…". */ .skeleton-line { display: inline-block; width: 180px; max-width: 60%; height: 1em; vertical-align: -0.1em; border-radius: 6px; background: var(--border-soft); animation: spinner-pulse 1.6s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Reduced motion: rotation stops, but a loading surface must still read as alive — a motion-free opacity pulse replaces the spin, and the loading-status elapsed text keeps ticking either way. */ @keyframes spinner-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @media (prefers-reduced-motion: reduce) { .spinner, .audio-spinner, .loading-dots i { animation: spinner-pulse 1.6s ease-in-out infinite; } } /* Chat: reply actions (narration, copy, branch) under the bubble text */ .msg-audio-row { margin-top: 8px; display: flex; align-items: center; gap: 6px; } .msg-audio-row .audio-btn { margin-left: 0; width: 30px; height: 30px; } .msg-audio-row .audio-icon { width: 16px; height: 16px; } /* Chat: token/estimated-cost footer under a reply (served to the owner only) */ .msg-usage { margin-top: 6px; font-size: var(--fs-xs); color: var(--muted); cursor: default; } /* The footer line doubles as the per-model breakdown toggle — styled as plain text, not a button, so old messages (no breakdown) and new ones read identically at rest. */ .msg-usage-toggle { background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; } .msg-usage-toggle:hover { color: var(--text); } .msg-usage-detail { margin-top: 4px; padding-left: 10px; border-left: 2px solid var(--border); } .msg-usage-row { line-height: 1.6; } /* Copy/branch reuse the circular narration face; copied flashes green */ .audio-btn.copied { border-color: var(--pos); color: var(--pos); background: var(--pos-soft); } /* Metric info tooltips (company profile stat boxes) */ .info-dot { background: none; border: none; color: var(--muted); opacity: 0.65; cursor: pointer; font-size: var(--fs-sm); padding: 0 0 0 5px; line-height: 1; vertical-align: 1px; } .info-dot:hover, .info-dot:focus { color: var(--accent); opacity: 1; } .metric-tip { position: absolute; z-index: 100; max-width: 300px; background: var(--panel-raised); border: 1px solid var(--border); border-radius: 10px; padding: 10px 13px; box-shadow: 0 10px 28px var(--shadow-pop); font-size: var(--fs-md); } .metric-tip-name { font-weight: 600; color: var(--text); margin-bottom: 4px; } .metric-tip-desc { color: var(--muted); line-height: 1.5; } /* Companies toolbar: one compartment for search + filters + export */ .companies-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; background: var(--panel); border: 1px solid var(--border-soft); border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; } .discover-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .discover-search { background: var(--panel-raised); border: 1px solid var(--border); color: var(--text); border-radius: 8px; font-size: var(--fs-base); padding: 8px 12px; width: min(280px, 100%); } .discover-search::placeholder { color: var(--muted); } .discover-search:focus { outline: none; border-color: var(--accent); } .discover-select { max-width: 220px; } /* Group overview: one compartment for the verdict tally + column tallies, both recomputed from the filtered set */ .group-overview { background: var(--panel); border: 1px solid var(--border-soft); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; } .group-overview .verdict-strip { margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border-soft); } .group-overview .verdict-count { background: var(--panel-raised); border: none; padding: 6px 12px; } /* Group summary: per-column tallies of the filtered companies */ .group-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; } .sum-tile { background: var(--panel-raised); border: none; padding: 7px 14px; min-width: 86px; } .metric-tip-note { color: var(--muted); font-size: var(--fs-sm); margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border-soft); } .sum-label { color: var(--muted); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--track-label); white-space: nowrap; } .sum-label .sum-agg { text-transform: none; opacity: 0.75; } .sum-value { font-size: var(--fs-base); font-weight: 700; margin-top: 2px; } /* Compact outline button — quiet actions (export, paging, resync, cancel) */ .export-btn, .pager-btn, .fin-resync-btn, #crm-cancel { background: transparent; color: var(--muted); border: 1px solid var(--border-soft); border-radius: var(--r-sm); padding: 4px 12px; font-weight: 500; font-size: var(--fs-md); white-space: nowrap; cursor: pointer; } .export-btn:hover { color: var(--accent); border-color: var(--accent); } /* AI & tech valuation table */ .market-header-stocks { margin-top: 28px; } .stock-ticker { font-weight: 700; font-size: var(--fs-md); } .val-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); } .val-table th { background: var(--panel-raised); border: 1px solid var(--border-soft); padding: 6px 10px; text-align: left; white-space: nowrap; } .val-table th.num, .val-table td.num { text-align: right; } .val-table th.sortable { cursor: pointer; } .val-table th.sortable:hover { color: var(--accent-2); } .val-table th.sort-desc::after { content: " ▾"; color: var(--accent); } .val-table th.sort-asc::after { content: " ▴"; color: var(--accent); } .val-table td { border: 1px solid var(--border-soft); padding: 6px 10px; white-space: nowrap; background: var(--panel); } .val-row { cursor: pointer; } .val-row:hover td { background: var(--accent-soft); } /* The td stays display:table-cell so collapsed borders paint like every other column; the flex row (logo + name block) lives on an inner div. */ .val-company-inner { display: flex; align-items: center; gap: 10px; } .val-logo { width: 26px; height: 26px; border-radius: 6px; object-fit: contain; background: #fff; padding: 2px; flex-shrink: 0; } .val-spark-cell { width: 110px; } .val-spark { width: 100px; height: 28px; display: block; } /* Favorite stars — companies table, company header, profile list. fav-on (amber) = personal favorite; fav-client (green) = on the shared Sales → Clients roster. */ .fav-cell { width: 34px; text-align: center; } .fav-btn { background: none; border: none; cursor: pointer; padding: 2px 4px; font-size: var(--fs-lg); line-height: 1; color: var(--muted); } .fav-btn:hover { color: var(--warn); } .fav-btn.fav-on { color: var(--warn); } .fav-btn.fav-client, .fav-btn.fav-client:hover { color: var(--pos); } .fav-btn:disabled { opacity: 0.5; cursor: default; } .co-fav { font-size: var(--fs-2xl); vertical-align: 2px; } /* Add to Pipeline: the header action beside the star, its deal-type picker as a popover, and the chip it becomes once a lead exists */ .co-pipeline { position: relative; display: inline-flex; align-items: center; margin-left: 2px; } .co-pipeline-btn, .co-pipeline-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-pill); font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.01em; line-height: 1.2; white-space: nowrap; text-decoration: none; cursor: pointer; } .co-pipeline-btn { position: relative; overflow: hidden; color: #fff; background: var(--gradient); border: 1px solid transparent; box-shadow: 0 4px 14px rgba(var(--accent-glow), 0.35); transition: transform 0.15s ease, box-shadow 0.15s ease; } /* A slow sheen across the pill — the one thing in the header that asks to be clicked */ .co-pipeline-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%); transform: translateX(-120%); animation: co-pipeline-sheen 4.5s ease-in-out infinite; } @keyframes co-pipeline-sheen { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } } .co-pipeline-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(var(--accent-glow), 0.5); } .co-pipeline-btn:active { transform: translateY(0); } .co-pipeline-chip { color: #04120b; background: linear-gradient(68deg, var(--pos), #7ee8a8); border: 1px solid transparent; box-shadow: 0 4px 14px rgba(74, 222, 128, 0.35); animation: co-pipeline-pop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both; } .co-pipeline-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #04120b; opacity: 0.7; } .co-pipeline-chip:hover { color: #04120b; filter: brightness(1.06); } .co-pipeline-chip.is-closed { color: var(--muted); background: var(--muted-soft); border-color: var(--border-soft); box-shadow: none; } .co-pipeline-chip.is-closed::before { background: var(--muted); } @keyframes co-pipeline-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* width/height explicit: a replaced element ignores inset for sizing and would otherwise render at its device-pixel buffer size */ .co-pipeline-confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 999; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .co-pipeline-btn::after { animation: none; } .co-pipeline-chip { animation: none; } } .co-pipeline-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; min-width: 240px; padding: 12px 14px; border-radius: var(--r-card); background: var(--panel-raised); border: 1px solid var(--border-soft); box-shadow: var(--shadow-2); display: flex; flex-direction: column; gap: 8px; font-family: var(--font-body); font-weight: 400; letter-spacing: 0; } .co-pipeline-pop-label { font-size: var(--fs-2xs); letter-spacing: 0.06em; } .co-pipeline-select { width: 100%; padding: 7px 10px; border-radius: var(--r-ctl); border: 1px solid var(--border-soft); background: var(--panel); color: var(--text); font-size: var(--fs-sm); } .co-pipeline-pop-row { display: flex; gap: 8px; } .co-pipeline-add, .co-pipeline-cancel { padding: 7px 12px; border-radius: var(--r-ctl); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; } .co-pipeline-add { flex: 1; color: #fff; background: var(--button-bg); border: 1px solid transparent; } .co-pipeline-add:hover { background: var(--button-bg-hover); } .co-pipeline-cancel { color: var(--muted); background: transparent; border: 1px solid var(--border-soft); } .co-pipeline-cancel:hover { color: var(--text); } .co-pipeline-add:disabled, .co-pipeline-cancel:disabled { opacity: 0.5; cursor: default; } .co-pipeline-err { font-size: var(--fs-xs); color: var(--neg-text); } /* The hero card clips its overflow (rounded corners + the wash); while the picker is open it must not clip the popover */ .company-header.co-hero.has-pop { overflow: visible; } @media (max-width: 640px) { .co-pipeline-pop { left: auto; right: 0; } } /* Company profile page */ .company-back { margin: 4px 0 12px; } /* Team profile: the roster link left, Profile Settings right (self only) */ .tm-top-row { display: flex; justify-content: space-between; gap: 12px; } /* ── Company profile (Direction A): the hero as identity + tape, a jump strip, Quick Take beside the price, the constellation band, tile rows with display-face values, the refi-shock hero. ── */ /* `.company-header` (flex) is declared later at equal specificity, so the hero's grid has to out-rank it — otherwise the tape and the Regenerate rail wrap as loose flex items with the header's own gaps */ .company-header.co-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px 28px; align-items: center; } .co-hero-id { display: flex; align-items: center; gap: 16px; min-width: 0; } .co-hero .company-logo { width: 64px; height: 64px; } /* The identity stack reads on one rhythm: name line, subtitle, pills — a 5px beat between each (the pills add a little air of their own). The extra `.co-hero-id` hop out-ranks the shared hero-card h2 rule (declared later at equal specificity) so the 28px name actually lands. */ .company-header.co-hero .company-title { display: flex; flex-direction: column; gap: 5px; } .company-header.co-hero .co-hero-id .company-title h2 { font-size: 28px; line-height: 1.15; gap: 10px; margin: 0; } .co-ticker { font-family: var(--font-display); font-size: var(--fs-base); font-weight: 600; color: var(--muted); border: 1px solid var(--border-soft); border-radius: 6px; padding: 1px 7px; } .co-hero .company-title #co-sub:empty { display: none; } .co-hero-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 3px; } .co-hero-pills:empty { display: none; } .co-pill { display: inline-flex; align-items: center; font-size: var(--fs-xs); font-weight: 600; padding: 3px 10px; border-radius: var(--r-pill); color: var(--muted); background: var(--panel); border: 1px solid var(--border-faint); white-space: nowrap; } .co-pill-accent { color: var(--accent); background: var(--accent-soft); border-color: transparent; } /* The tape: label, price line, 52-week bar on a 4/12px beat */ .co-hero-price { border-left: 1px solid var(--border-faint); padding-left: 28px; width: 300px; max-width: 100%; } .co-hero-price > .stat-label { margin-bottom: 4px; } .co-price-line { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .co-price { font-family: var(--font-display); font-size: 40px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; } .co-price-badge { display: inline-flex; align-items: center; font-size: var(--fs-sm); font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap; min-height: 18px; } .co-price-badge:empty { display: none; } .co-pill-up { color: var(--pos); background: var(--pos-soft); } .co-pill-down { color: var(--neg-text); background: var(--neg-soft); } .co-week52 { margin-top: 12px; } .co-week52 .week52-bar { margin: 5px 0 0; background: linear-gradient(90deg, var(--neg-text), var(--warn), var(--pos)); opacity: 0.9; } .co-week52 .week52-pos { background: var(--text); border: 3px solid var(--panel-raised); box-sizing: border-box; width: 14px; height: 14px; top: -4px; } /* Regenerate + its timestamp: a right-aligned stack in the hero's third column, the button under the status line so a long status never pushes the button around */ .company-header .co-hero-regen { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin: 0; max-width: 220px; text-align: right; } .co-hero-regen #co-regen-status { font-size: var(--fs-xs); } .co-hero-regen #co-regen-status:empty { display: none; } @media (max-width: 1100px) { .company-header.co-hero { grid-template-columns: minmax(0, 1fr) auto; } .company-header .co-hero-regen { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-end; max-width: none; padding-top: 10px; border-top: 1px solid var(--border-faint); } } @media (max-width: 900px) { .company-header.co-hero { grid-template-columns: 1fr; } .co-hero-price { border-left: 0; padding-left: 0; width: auto; } } @media (max-width: 640px) { /* The name row wraps on phones so the pipeline pill never runs off the card's edge */ .company-header.co-hero .co-hero-id .company-title h2 { font-size: var(--fs-xl); gap: 8px; flex-wrap: wrap; } } /* The chart-window chips ride the Price History panel, directly above the chart they drive */ .co-chip-row { margin: -2px 0 10px; } .co-jump { display: flex; gap: 22px; padding: 0 4px; margin-bottom: 20px; border-bottom: 1px solid var(--border-faint); overflow-x: auto; } .co-jump a { font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; color: var(--muted); padding: 11px 2px; border-bottom: 2px solid transparent; white-space: nowrap; } .co-jump a:hover { color: var(--text); } .co-jump a.active { color: var(--text); border-bottom-color: var(--accent); } .co-jump a[hidden] { display: none; } /* ── Sticky page chrome: the hero card and the jump strip pin under the topbar (--topbar-h is measured live by common.js) and compact while pinned — company.js toggles `is-stuck` and pads the block's bottom margin by the height it lost, so the content below never jumps. The block is opaque: sections scroll under it, never through it. ── */ .co-stick { position: sticky; top: var(--topbar-h, 45px); z-index: 9; background: var(--bg); padding-top: 8px; margin: -8px 0 20px; transition: box-shadow 0.2s ease; } .co-stick .company-header.co-hero { margin-bottom: 0; } .co-stick .co-jump { margin-bottom: 0; } .co-stick.is-stuck { box-shadow: 0 14px 22px -18px var(--shadow-pop); } /* Compact hero: logo, name, ticker and the price on one line — the subtitle, pills, 52-week bar, feed label and the regen timestamp fold away (they're one scroll-up away). */ .co-stick.is-stuck .company-header.co-hero { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 20px; padding: 8px 16px; border-radius: 10px; } .co-stick.is-stuck .co-hero-id { gap: 12px; } .co-stick.is-stuck .co-hero .company-logo { width: 34px; height: 34px; padding: 3px; border-radius: 8px; } .co-stick.is-stuck .company-header.co-hero .co-hero-id .company-title h2 { font-size: var(--fs-xl); flex-wrap: nowrap; } .co-stick.is-stuck .co-hero .company-title #co-sub, .co-stick.is-stuck .co-hero-pills, .co-stick.is-stuck .co-hero-price > .stat-label, .co-stick.is-stuck .co-week52, .co-stick.is-stuck .co-hero-regen #co-regen-status { display: none; } .co-stick.is-stuck .co-hero-price { width: auto; border-left: 1px solid var(--border-faint); padding-left: 20px; } .co-stick.is-stuck .co-price { font-size: 24px; } .co-stick.is-stuck .co-price-badge { font-size: var(--fs-xs); padding: 2px 8px; } .co-stick.is-stuck .company-header .co-hero-regen { grid-column: auto; flex-direction: column; padding-top: 0; border-top: 0; } .co-stick.is-stuck .co-jump a { padding: 7px 2px; } @media (max-width: 1100px) { /* Regenerate needs its own row on narrower screens — not worth the height while pinned; it's back as soon as the page scrolls up */ .co-stick.is-stuck .company-header.co-hero { grid-template-columns: minmax(0, 1fr) auto; } .co-stick.is-stuck .company-header .co-hero-regen { display: none; } } @media (max-width: 640px) { /* Phone: name + star only, the badge stacks under the price so the tape column never squeezes the name out */ .co-stick.is-stuck .co-ticker, .co-stick.is-stuck .co-pipeline { display: none; } .co-stick.is-stuck .company-header.co-hero .co-hero-id .company-title h2 { overflow: hidden; } .co-stick.is-stuck .co-hero-price { padding-left: 12px; } .co-stick.is-stuck .co-price-line { flex-direction: column; align-items: flex-end; gap: 3px; } .co-stick.is-stuck .co-price { font-size: var(--fs-xl); } } /* Jump-link and #hash targets land under the pinned chrome, not behind it (--co-stick-h is the compacted block's height, set by company.js) */ #co-price-panel, #co-verdict-panel, #co-stats-panel, #co-financials, #co-debt-panel, #co-ownership, #co-news-row, #co-docs-panel { scroll-margin-top: calc(var(--topbar-h, 45px) + var(--co-stick-h, 96px) + 12px); } .panel h2 .co-h2-note { margin-left: auto; font-size: var(--fs-xs); font-weight: 400; } .co-row-price, .co-row-news { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; margin-bottom: 20px; } .co-row-news { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } .co-row-price .panel, .co-row-news .panel { margin-bottom: 0; min-width: 0; } .co-row-financials { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } @media (max-width: 1000px) { .co-row-price, .co-row-news, .co-row-financials { grid-template-columns: 1fr; } } .co-quick-panel { display: flex; flex-direction: column; } .co-quick-hurdle { background: var(--panel-raised); border-radius: var(--r-tile); padding: 14px 16px; margin-bottom: 10px; } .co-quick-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 4px; } .co-quick-line .muted { font-size: var(--fs-xs); } .co-quick-track { position: relative; height: 8px; border-radius: 4px; background: var(--panel); margin-top: 10px; overflow: hidden; } .co-quick-fill { height: 100%; border-radius: 4px; } .co-quick-fill.is-up { background: var(--pos); } .co-quick-fill.is-down { background: var(--neg-text); } .co-quick-mark { position: absolute; right: 0; top: -2px; width: 2px; height: 12px; background: var(--text); } .co-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Tiles: display-face values, whisper labels */ .co-tiles .stat-cell, .co-quick-grid .stat-cell { border-radius: var(--r-tile); padding: 12px 14px; min-width: 0; } .co-tiles .stat-label, .co-quick-grid .stat-label, .co-quick-hurdle .stat-label { font-size: var(--fs-2xs); letter-spacing: 0.06em; } .co-tiles .stat-value, .co-quick-grid .stat-value, .co-quick-hurdle .stat-value { font-family: var(--font-display); font-size: var(--fs-2xl); letter-spacing: -0.01em; margin-top: 4px; } .co-tiles .stat-sub { font-size: var(--fs-2xs); margin-top: 3px; } #co-stats .stat-value { font-family: var(--font-display); font-size: var(--fs-2xl); letter-spacing: -0.01em; } #co-stats .stat-label { font-size: var(--fs-2xs); letter-spacing: 0.06em; } #co-quarter-tiles { margin: 8px 0 12px; } .co-table-details summary { cursor: pointer; font-size: var(--fs-sm); margin-bottom: 8px; } .co-earnings-summary { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .co-earnings-summary .stat-value { font-family: var(--font-display); font-size: var(--fs-2xl); margin: 0; } /* The constellation band: radar · score + badges · component tiles */ .co-con-band { display: grid; grid-template-columns: 250px minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: center; } .co-con-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .co-con-score { font-size: 72px; letter-spacing: -0.03em; } .co-con-score-sub { font-size: var(--fs-base); line-height: 1.3; } .co-con-badges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .co-con-badges .verdict-badge { text-align: center; padding: 7px 12px; font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .co-con-note { margin: 0; font-size: var(--fs-xs); } .co-con-comps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .co-con-comp { background: var(--panel-raised); border-radius: var(--r-tile); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .co-con-comp .stat-label { font-size: var(--fs-2xs); letter-spacing: 0.06em; } .co-con-comp-line { display: flex; align-items: baseline; gap: 6px; } .co-con-comp-line .muted { font-size: var(--fs-xs); } .co-con-comp-val { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; } .co-con-comp-track { height: 6px; border-radius: 3px; background: var(--panel); overflow: hidden; } .co-con-comp-fill { height: 100%; border-radius: 3px; background: var(--chart-blue); } .co-con-comp-fill.badge-up { background: var(--pos); } .co-con-comp-fill.badge-down { background: var(--neg-text); } .co-con-comp-note { font-size: var(--fs-xs); line-height: 1.4; } @media (max-width: 1100px) { .co-con-band { grid-template-columns: 250px minmax(0, 1fr); } .co-con-comps { grid-column: 1 / -1; } } @media (max-width: 640px) { .co-con-band { grid-template-columns: 1fr; justify-items: center; } .co-con-main { align-self: stretch; } } /* The AI read: two balanced newspaper columns across the panel's full width. `.ai-analysis .markdown-body` caps prose at 860px, so this selector has to out-rank it; paragraphs may break across columns — with break-inside: avoid a three-paragraph read lands two-and-one and the second column ends half way down. */ .co-read h3 { margin: 0 0 10px; font-size: var(--fs-2xs); letter-spacing: 0.06em; } .ai-analysis .markdown-body.co-read-cols { columns: 2; column-gap: 48px; column-fill: balance; max-width: none; font-size: var(--fs-md); line-height: 1.7; text-wrap: pretty; } .co-read-cols > * { break-inside: auto; margin: 0 0 14px; } .co-read-cols > :last-child { margin-bottom: 0; } .co-read-cols p { orphans: 3; widows: 3; } @media (max-width: 900px) { .ai-analysis .markdown-body.co-read-cols { columns: 1; } } /* ── Debt & Refinancing ── the refi shock and the maturity wall as the hero pair, the numbers as three ledgers, the rating as one band, then the read and the news, provenance folded into the footer */ .co-debt-head { align-items: center; } .co-debt-head .co-debt-tape { margin-left: auto; } .co-debt-tape { display: flex; flex-wrap: wrap; gap: 6px; } .co-debt-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--r-pill); font-size: var(--fs-2xs); font-weight: 600; white-space: nowrap; color: var(--text); background: var(--panel-raised); border: 1px solid var(--border-soft); } .co-debt-chip b { font-weight: 600; } .co-debt-chip .muted { font-weight: 500; font-size: var(--fs-2xs); } .co-debt-chip-warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 10%, var(--panel-raised)); } .co-debt-chip-warn b { color: var(--warn); } .co-debt-chip-pos { border-color: color-mix(in srgb, var(--pos) 35%, transparent); background: color-mix(in srgb, var(--pos) 12%, var(--panel-raised)); } .co-debt-chip-pos b { color: var(--pos); font-family: var(--font-display); font-size: var(--fs-sm); } .co-debt-chip-model { padding: 2px 8px; font-size: 11px; } .co-debt-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: var(--fs-xs); margin: -4px 0 16px; } .co-debt-meta b { color: var(--text); font-weight: 600; } .co-debt-meta > span:not(:first-child):not(.co-debt-chip)::before { content: "·"; margin-right: 10px; color: var(--muted); opacity: 0.55; } .co-debt-top { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 20px; align-items: stretch; margin-bottom: 20px; } .co-debt-top.has-ltd { grid-template-columns: 360px minmax(0, 1.2fr) minmax(0, 1fr); } /* display:grid / flex would defeat [hidden] on these */ .co-debt-top[hidden], .co-debt-card[hidden], .co-debt-tape[hidden], .co-debt-meta[hidden], .co-debt-legend[hidden], .co-rating-band[hidden] { display: none; } .co-debt-top .stat-label { font-size: var(--fs-2xs); letter-spacing: 0.06em; } .co-debt-top .mini-chart { margin: 0; height: 200px; } .co-debt-card { border-radius: var(--r-card); padding: 16px 20px 14px; background: var(--panel-raised); border: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 10px; min-width: 0; } .co-debt-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .co-debt-card-foot { margin: 2px 0 0; font-size: var(--fs-xs); } .co-debt-legend { display: flex; gap: 14px; font-size: var(--fs-2xs); color: var(--muted); white-space: nowrap; } .co-debt-legend > span { display: inline-flex; align-items: center; gap: 6px; } .co-debt-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; } .co-debt-swatch-win { background: var(--warn); } .co-debt-swatch-later { background: var(--chart-blue); } /* The refi-shock hero */ .co-debt-hero { border-radius: var(--r-card); padding: 18px 20px 16px; background: linear-gradient(160deg, color-mix(in srgb, var(--warn) 16%, var(--panel-raised)), var(--panel-raised) 70%); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); display: flex; flex-direction: column; gap: 12px; } .co-debt-hero.is-saving { background: linear-gradient(160deg, color-mix(in srgb, var(--pos) 16%, var(--panel-raised)), var(--panel-raised) 70%); border-color: color-mix(in srgb, var(--pos) 35%, transparent); } .co-debt-shock-label { color: var(--warn); } .co-debt-hero.is-saving .co-debt-shock-label { color: var(--pos); } .co-debt-shock-label, .co-debt-shock-unit-label { white-space: nowrap; } .co-debt-shock-unit-label { font-size: 11px; } .co-debt-shock-line { display: flex; align-items: baseline; gap: 6px; } .co-debt-shock { font-family: var(--font-display); font-size: 42px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--warn); } .co-debt-hero.is-saving .co-debt-shock { color: var(--pos); } .co-debt-shock-unit { font-size: var(--fs-base); font-weight: 400; } .co-debt-gap { display: flex; flex-direction: column; gap: 8px; padding: 6px 0 2px; } .co-debt-gap-labels { display: flex; justify-content: space-between; font-size: var(--fs-2xs); color: var(--muted); } .co-debt-gap-labels b { color: var(--text); font-weight: 600; } .co-debt-gap-bp { color: var(--warn); font-weight: 700; } .co-debt-hero.is-saving .co-debt-gap-bp { color: var(--pos); } .co-debt-gap-track { position: relative; height: 8px; border-radius: 4px; background: var(--muted-soft); } .co-debt-gap-fill { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--warn) 45%, transparent), var(--warn)); } .co-debt-hero.is-saving .co-debt-gap-fill { background: linear-gradient(90deg, var(--pos), color-mix(in srgb, var(--pos) 45%, transparent)); } .co-debt-gap-dot { position: absolute; top: -3px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; box-sizing: border-box; border: 3px solid var(--panel-raised); } .co-debt-gap-now { background: var(--text); } .co-debt-gap-new { background: var(--warn); } .co-debt-hero.is-saving .co-debt-gap-new { background: var(--pos); } .co-debt-shock-why { font-size: var(--fs-xs); line-height: 1.45; } .co-debt-shock-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--warn) 18%, transparent); } .co-debt-hero.is-saving .co-debt-shock-pair { border-top-color: color-mix(in srgb, var(--pos) 18%, transparent); } .co-debt-shock-pair .stat-label { font-size: 11px; margin-bottom: 3px; } .co-debt-shock-small { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); letter-spacing: -0.01em; } .co-debt-shock-small .co-debt-shock-unit { font-size: var(--fs-xs); font-family: var(--font-body); } /* The maturity wall */ .co-debt-wall { display: flex; flex-direction: column; gap: 8px; flex: 1; } .co-debt-wall-row { display: grid; grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); gap: 16px; padding: 0 6px; } .co-debt-wall-bracket { display: flex; align-items: center; gap: 8px; font-size: var(--fs-2xs); font-weight: 600; color: var(--warn); white-space: nowrap; } .co-debt-wall-bracket i { flex: 1; height: 1px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--warn) 70%, transparent) 0 6px, transparent 6px 10px); } .co-debt-wall-bars { align-items: end; height: 168px; border-bottom: 1px solid var(--border-soft); } .co-debt-wall-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; } .co-debt-wall-amt { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; } .co-debt-wall-col.is-window .co-debt-wall-amt { color: var(--warn); } .co-debt-wall-bar { width: 100%; max-width: 64px; border-radius: 6px 6px 0 0; background: var(--chart-blue); } .co-debt-wall-col.is-window .co-debt-wall-bar { background: var(--warn); } .co-debt-wall-bar.is-empty { border-radius: 0; opacity: 0.4; } .co-debt-wall-years { font-size: var(--fs-2xs); letter-spacing: 0.04em; text-align: center; } .co-debt-wall-years span { display: block; } /* The ledgers */ .co-ledgers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; } .co-ledger { border-radius: var(--r-tile); padding: 14px 18px 8px; background: var(--panel-raised); border: 1px solid var(--border-soft); min-width: 0; } .co-ledger-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; } .co-ledger-head .stat-label { font-size: var(--fs-2xs); letter-spacing: 0.06em; } .co-ledger-note { font-size: var(--fs-2xs); white-space: nowrap; } .co-ledger-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border-faint); } .co-ledger-row:first-of-type { border-top: 0; padding-top: 2px; } .co-ledger-k { font-size: var(--fs-xs); color: var(--muted); display: inline-flex; align-items: center; gap: 4px; min-width: 0; } .co-ledger-v { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; } .co-ledger-v.badge-up { color: var(--pos); } .co-ledger-v.badge-down { color: var(--neg-text); } .co-ledger-v.co-ledger-warn { color: var(--warn); } .co-ledger-s { font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: 400; letter-spacing: 0; margin-left: 6px; } /* The rating band */ .co-rating-band { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 11px 18px; border-radius: var(--r-tile); background: var(--panel-raised); border: 1px solid var(--border-soft); margin-bottom: 4px; } .co-rating-band .stat-label { font-size: var(--fs-2xs); letter-spacing: 0.06em; display: inline-flex; align-items: center; gap: 4px; } .co-rating-band .co-debt-chip { white-space: normal; } /* The read: a one-sentence lead, then the detail */ .co-debt-read .markdown-body > p { color: color-mix(in srgb, var(--text) 85%, var(--muted)); } .co-debt-read .markdown-body > p:first-child { font-size: 17px; line-height: 1.5; font-weight: 500; color: var(--text); } /* Sources & method footer */ .co-debt-sources { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-faint); } .co-debt-sources p { margin: 8px 0 0; line-height: 1.5; max-width: 90ch; } .co-debt-source-list { margin: 8px 0 0; padding-left: 20px; line-height: 1.5; } .co-debt-source-list a { color: var(--link); } @media (max-width: 1100px) { .co-debt-top, .co-debt-top.has-ltd { grid-template-columns: 340px minmax(0, 1fr); } .co-debt-top.has-ltd #co-debt-ltd { grid-column: 1 / -1; } .co-debt-shock-unit-label { display: none; } } @media (max-width: 900px) { .co-ledgers { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { .co-debt-top, .co-debt-top.has-ltd { grid-template-columns: 1fr; } .co-debt-head .co-debt-tape { margin-left: 0; } } @media (max-width: 640px) { .co-ledgers { grid-template-columns: 1fr; } } .co-debt-bottom { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; } .co-debt-bottom .ai-analysis { margin-top: 18px; } @media (max-width: 900px) { .co-debt-bottom { grid-template-columns: 1fr; } } /* Ownership: holders as bars; news as dated rows */ .co-holders { display: flex; flex-direction: column; } .co-holder { display: grid; grid-template-columns: minmax(120px, 220px) minmax(0, 1fr) 72px auto 16px; gap: 12px; align-items: center; padding: 6px 0; font-size: var(--fs-sm); } .co-holder-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .co-holder-track { height: 8px; border-radius: 4px; background: var(--panel-raised); overflow: hidden; } .co-holder-fill { height: 100%; border-radius: 4px; background: var(--chart-blue); } .co-holder-val { font-weight: 600; text-align: right; } .co-holder-pct { font-size: var(--fs-2xs); white-space: nowrap; } .co-news-rows { list-style: none; padding: 0; } .co-news-rows li { display: flex; gap: 12px; align-items: baseline; padding: 9px 0; margin: 0; border-top: 1px solid var(--border-faint); font-size: var(--fs-md); line-height: 1.35; } .co-news-rows li:first-child { border-top: 0; } .co-news-rows a { color: var(--text); } .co-news-rows a:hover { color: var(--link); } .co-news-when { flex-shrink: 0; font-size: var(--fs-2xs); letter-spacing: 0.06em; white-space: nowrap; min-width: 52px; } .co-news-src { margin-left: auto; font-size: var(--fs-2xs); white-space: nowrap; text-transform: capitalize; } .co-news-rows .debt-news-sum { display: block; flex-basis: 100%; } /* ── Company: Debt & Refinancing ── */ .debt-charts { display: grid; gap: 8px 24px; margin-top: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); } .debt-charts h3 { margin: 0 0 4px; font-size: var(--fs-md); } .debt-charts .mini-chart { margin-bottom: 4px; } .debt-news li { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 0 14px; align-items: start; padding: 11px 0; } .debt-news .co-news-when { padding-top: 3px; } .debt-news .co-news-body { min-width: 0; } .debt-news .co-news-body a, .debt-news .co-news-body > span:first-child { font-weight: 600; line-height: 1.35; } .debt-news li .debt-news-sum { display: block; margin-top: 3px; font-size: var(--fs-sm); line-height: 1.45; } /* Data caveats: a closed one-line disclosure under the refinancing read */ .co-caveats { margin-top: 10px; font-size: var(--fs-sm); } .co-caveats summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; user-select: none; } .co-caveats summary::-webkit-details-marker { display: none; } .co-caveats summary::before { content: "▸"; font-size: var(--fs-xs); } .co-caveats[open] summary::before { content: "▾"; } .co-caveats summary:hover { color: var(--text); } .co-caveats ol { margin: 8px 0 0; padding-left: 20px; line-height: 1.5; } .co-caveats li { margin: 0 0 6px; } .co-caveats p { margin: 8px 0 0; line-height: 1.5; } .ai-analysis h3 .badge { margin-left: 8px; vertical-align: 1px; } .company-back a { color: var(--muted); text-decoration: none; } .company-back a:hover { color: var(--link); } .company-header { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 18px; } /* ── The page-header hero card ── every page shares this treatment, in the team-member profile's design language: raised card, accent top rail, a wash that fades before the content. The team-member header itself keeps its richer tier-colored hero, so every rule here excludes it. */ .company-header:not(.team-member-header) { position: relative; padding: 15px 20px 14px; background: var(--panel-raised); border: 1px solid var(--border-soft); border-top: 2px solid var(--accent); border-radius: 12px; overflow: hidden; } .company-header:not(.team-member-header)::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, color-mix(in srgb, var(--accent) 9%, transparent), color-mix(in srgb, var(--accent) 3%, transparent) 38%, transparent 62%); pointer-events: none; } .company-header:not(.team-member-header) > * { position: relative; } .company-header:not(.team-member-header) .company-title h2 { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-size: var(--fs-2xl); letter-spacing: -0.01em; } /* The page's custom stroke icon, in an accent-tinted chip — currentColor strokes, so light mode restyles it for free */ .hero-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); } .hero-icon svg { width: 19px; height: 19px; } /* Panel-h2 scale of the same icon language (the emoji replacement) */ .h2-icon { width: 26px; height: 26px; border-radius: 7px; margin-right: 8px; vertical-align: -6px; } .h2-icon svg { width: 15px; height: 15px; } .company-header:not(.team-member-header) .company-title .muted { max-width: 760px; } .company-header .growth-controls { margin-bottom: 0; justify-content: flex-end; } /* Regenerate + timestamp form their own right-aligned row inside the hero card, under the title/stat row */ .company-header .company-regen { margin: 0; flex: 1 1 100%; } /* The sync drawer rides the title column under the subtitle — a quiet one-line control, never a header-level sibling floating between the title and the hero stat */ .company-header .fin-sync-drawer { margin-top: 8px; } .company-header .fin-sync-drawer summary { align-items: center; } .company-header .fin-sync-drawer summary h3 { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: var(--track-label); } .company-header .fin-sync-drawer summary:hover h3 { color: var(--accent); } .company-header .fin-sync-drawer #qbo-drawer-status { font-size: var(--fs-sm); } @media (max-width: 640px) { .company-header:not(.team-member-header) { padding: 12px 14px 11px; gap: 8px 12px; } .company-header:not(.team-member-header) .company-title h2 { font-size: var(--fs-xl); gap: 9px; } .hero-icon { width: 29px; height: 29px; border-radius: 8px; } .hero-icon svg { width: 16px; height: 16px; } .company-header:not(.team-member-header) .company-logo { width: 44px; height: 44px; } /* The stat block leaves the right edge and becomes a baseline row under the title — no more orphaned right-hugging numbers */ .company-header:not(.team-member-header) .company-price { flex: 1 1 100%; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; text-align: left; } .company-header:not(.team-member-header) .company-price .index-value { font-size: var(--fs-2xl); margin: 0; } .company-header:not(.team-member-header) .growth-controls { flex: 1 1 100%; justify-content: flex-start; } } .company-logo { width: 56px; height: 56px; border-radius: 12px; object-fit: contain; background: #fff; padding: 6px; } .company-title { flex: 1; } .company-header:not(.team-member-header) .company-title { min-width: 0; } .company-title h2 { margin: 0 0 2px; font-size: var(--fs-xl); } .company-price { text-align: right; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } /* auto-fit variant (labor page): empty tracks collapse, so a short row of cells stretches across the whole panel instead of hugging the left. Works as a wrapper class or directly on the grid element. */ .stats-fill .stats-grid, .stats-grid.stats-fill { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .stat-cell { background: var(--panel-raised); padding: 10px 12px; } .stat-label { font-size: var(--fs-sm); letter-spacing: var(--track-label); text-transform: uppercase; } .stat-value { font-size: var(--fs-lg); font-weight: 700; margin-top: 2px; } .stat-sub { font-size: var(--fs-sm); margin-top: 2px; } /* Financials: budget-vs-actuals + monthly report uploads */ .bva-headline { font-weight: 600; margin: 10px 0 4px; } .rec-item { background: var(--panel-raised); border: 1px solid var(--border-soft); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; } .rec-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .rec-title { font-weight: 600; } .rec-metric { font-size: var(--fs-md); } .rec-impact { font-size: var(--fs-base); margin-top: 6px; color: var(--pos); } .rec-detail { font-size: var(--fs-base); margin-top: 4px; line-height: 1.5; } .rec-high { background: var(--neg-soft); color: var(--neg-text); } .rec-medium { background: var(--warn-soft); color: var(--warn); } .rec-low { background: var(--pos-soft); color: var(--pos); } .report-period-label { display: inline-block; margin-bottom: 10px; } .report-period-label input { margin-left: 8px; background: var(--panel-raised); border: 1px solid var(--border); border-radius: 6px; color: inherit; padding: 5px 8px; font: inherit; } .week52 { margin-top: 16px; } .week52-bar { position: relative; height: 6px; border-radius: 3px; margin: 8px 0 4px; background: linear-gradient(90deg, var(--border-soft), var(--border)); } .week52-pos { position: absolute; top: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); transform: translateX(-50%); } .week52-labels { display: flex; justify-content: space-between; } .company-chart { width: 100%; height: 260px; display: block; margin-top: 10px; } .company-desc { line-height: 1.6; max-width: 900px; } /* Collapsed-by-default About: the blurb is reference material, not news */ .company-about summary { cursor: pointer; list-style: none; } .company-about summary::-webkit-details-marker { display: none; } .company-about summary h2 { display: inline-block; margin: 0; } .company-about summary::after { content: "▸"; color: var(--muted); margin-left: 8px; } .company-about[open] summary::after { content: "▾"; } .company-about[open] summary { margin-bottom: 8px; } .company-regen { margin: 2px 0 10px; } .stat-sub { font-size: var(--fs-sm); margin-top: 2px; } .row-profile-link { margin-left: 8px; font-size: var(--fs-base); text-decoration: none; color: var(--muted); white-space: nowrap; } .row-profile-link:hover { color: var(--text); } .crypto-badge { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-weight: 700; line-height: 1; margin-right: 8px; vertical-align: -3px; flex-shrink: 0; } /* Watch Next: dated catalyst bullets rendered as scannable cards */ .watch-sub { margin: -4px 0 12px; } .watch-list ul { list-style: none; margin: 0; padding: 0; } .watch-list li { margin: 10px 0; padding: 12px 16px; border-left: 3px solid var(--chart-blue); border-radius: 6px; background: var(--chart-blue-fade); line-height: 1.55; max-width: 860px; } .watch-list li > strong:first-child { display: block; margin-bottom: 3px; } /* Valuation verdicts */ .verdict-strip { display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .verdict-count { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--border-soft); border-radius: 10px; padding: 8px 14px; } .verdict-n { font-size: var(--fs-lg); font-weight: 700; } .verdict-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: var(--fs-md); font-weight: 600; white-space: nowrap; } .verdict-big { font-size: var(--fs-base); padding: 4px 14px; } .verdict-under { background: var(--pos-soft); color: var(--pos); } .verdict-over { background: var(--neg-soft); color: var(--neg-text); } .verdict-fair { background: var(--verdict-fair-bg); color: var(--verdict-fair-text); } .verdict-na { background: var(--panel-raised); color: var(--muted); } /* Bonds axis (absolute hurdle) — outlined instead of filled so the two axes read as different kinds of claims at a glance */ .bonds-pass { background: transparent; color: var(--pos); box-shadow: inset 0 0 0 1px var(--pos); } .bonds-fail { background: transparent; color: var(--neg-text); box-shadow: inset 0 0 0 1px var(--neg-text); } .verdict-pair { display: inline-flex; gap: 6px; align-items: center; } .verdict-strip-divider { align-self: stretch; width: 1px; background: var(--border); margin: 4px 6px; } .verdict-note { margin-top: 10px; font-size: var(--fs-md); } .verdict-panel { max-width: 640px; } .verdict-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; } .verdict-score { font-size: var(--fs-base); font-weight: 700; } .verdict-bars { display: flex; flex-direction: column; gap: 8px; } .verdict-bar-row { display: flex; align-items: center; gap: 10px; } .verdict-bar-label { width: 130px; font-size: var(--fs-md); } .verdict-bar-track { flex: 1; height: 8px; border-radius: 4px; background: var(--panel-raised); overflow: hidden; } .verdict-bar-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--brand-blue), var(--pos)); } .verdict-bar-pct { width: 30px; text-align: right; font-size: var(--fs-md); font-weight: 600; } .ai-analysis { margin-top: 18px; border-top: 1px solid var(--border-soft); padding-top: 14px; } .ai-analysis h3 { margin: 0 0 8px; font-size: var(--fs-md); } .ai-analysis .markdown-body { line-height: 1.6; max-width: 860px; } /* Methodology page */ .methodology h3 { margin: 22px 0 8px; font-size: var(--fs-base); } .methodology p, .methodology li { line-height: 1.6; max-width: 880px; } .methodology table { border-collapse: collapse; font-size: var(--fs-base); margin: 10px 0; } .methodology th, .methodology td { border: 1px solid var(--border-soft); padding: 8px 12px; text-align: left; vertical-align: top; } .methodology th { background: var(--panel-raised); } .methodology ul { padding-left: 20px; } .verdict-note a { color: var(--link); } /* ── Documents ── */ .dropzone { border: 2px dashed var(--border); border-radius: 12px; padding: 32px; text-align: center; color: var(--muted); cursor: pointer; margin-bottom: 10px; } .dropzone.dragover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } .dropzone .link { color: var(--link); text-decoration: underline; } .badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: var(--fs-md); font-weight: 600; } .badge-done { background: var(--pos-soft); color: var(--pos); } .badge-failed { background: var(--neg-soft); color: var(--neg-text); } .badge-not_required { background: var(--panel-raised); color: var(--muted); } button.small { padding: 4px 10px; font-size: var(--fs-md); } button.danger { background: transparent; color: var(--neg-text); border: 1px solid var(--neg); } .doc-link { color: var(--link); text-decoration: none; font-weight: 500; } .doc-link:hover { text-decoration: underline; } .doc-text { background: var(--code-bg); color: var(--text); border: 1px solid var(--border-soft); border-radius: 8px; padding: 14px; overflow-wrap: anywhere; white-space: pre-wrap; font-size: var(--fs-base); --readmore-fade: var(--code-bg); } /* ── Read more (large content areas collapse behind a toggle) ── applyReadMore() in common.js adds .readmore/.collapsed and the button; --readmore-fade should match the collapsed element's background. */ .readmore { position: relative; } .readmore.collapsed { max-height: var(--readmore-max, 280px); overflow: hidden; } .readmore.collapsed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: linear-gradient(transparent, var(--readmore-fade, var(--panel))); pointer-events: none; } .readmore-toggle { display: block; margin-top: 8px; background: transparent; border: 1px solid var(--border-soft); border-radius: 999px; color: var(--accent-2); font-size: var(--fs-base); font-weight: 600; padding: 5px 14px; cursor: pointer; } .readmore-toggle:hover { border-color: var(--accent); color: var(--accent); } /* ── Company profile supplemental sections (earnings / insiders / 13F / news) ── */ .news-list { margin: 0; padding-left: 18px; } .news-list li { margin: 6px 0; font-size: var(--fs-md); } .news-list a { color: var(--link); text-decoration: none; } .news-list a:hover { color: var(--accent); } #co-earnings-next, #co-insider-summary, #co-inst-sub { margin-bottom: 8px; font-size: var(--fs-base); } .mini-chart { height: 180px; margin: 4px 0 12px; } /* Insider buy/sell coding — hues match the flow chart's series */ .ins-buy { color: var(--teal); } .ins-sell { color: var(--neg); } .txn-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: var(--fs-md); font-weight: 600; white-space: nowrap; } .txn-buy { color: var(--teal); background: var(--teal-soft); } .txn-sell { color: var(--neg); background: var(--neg-soft); } .txn-other { color: var(--muted); background: var(--muted-soft); } /* ── Company profile layout: two-up panel rows + grouped key stats ── */ /* auto-fit collapses a hidden panel's track, so its sibling takes the whole row (e.g. Earnings hidden while extras load, or no 13F data) */ .panel-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 20px; margin-bottom: 20px; } .panel-row .panel { margin-bottom: 0; min-width: 0; } .stat-group-label { font-size: var(--fs-sm); letter-spacing: var(--track-label); text-transform: uppercase; margin: 16px 0 8px; } .stats-groups .stat-group-label:first-child { margin-top: 0; } .panel-foot { margin: 10px 0 0; font-size: var(--fs-sm); } /* Long name cells clip with an ellipsis instead of pushing the numeric columns out of a half-width panel */ .cell-clip { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cell-clip-sm { max-width: 150px; } .cell-main { display: block; } .cell-sub { display: block; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; } /* Denser tables inside the two-up rows so five columns fit a half panel */ .panel-row .table-wrap table { font-size: var(--fs-base); } .panel-row .table-wrap th, .panel-row .table-wrap td { padding: 4px 7px; } /* ── Home: Mission Control ── */ /* Greeting hero rides the shared page-header card; the morning controls sit on its right without the grid-gap the controls carry elsewhere */ .home-hero-controls { margin-bottom: 0; } /* ── Home: the front page ── one story, What Moved, Ask Garrett, Worth a Look, and the footer band. Section labels share the app's uppercase tracking; the story panel wears the accent rail like the hero. */ .today-label { font-size: var(--fs-2xs); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: var(--track-label); } .today-label-accent { color: var(--accent-2); } .home-panel-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 12px; } .home-panel-head h2 { margin: 0; } .home-panel-head .panel-link { margin-left: auto; } .home-panel-head .hero-icon { width: 29px; height: 29px; border-radius: 8px; align-self: center; } .home-panel-head .hero-icon svg { width: 16px; height: 16px; } /* Tracker strip (/macro, and the Companies page's hc-tile sizing tiles): one tile per granted macro page — label + that page's own regime chip, the whole tile a link with the shared accent hover. Fixed four-up rows so the tiles get room to breathe and each row spans the panel's full width; two-up on phones. */ .tracker-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; } @media (max-width: 640px) { .tracker-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Markets Picture: eight price tiles on the shared four-up grid — one row of rates/equities (10Y, S&P, Dow, Nasdaq), one of the alternates (BTC, gold, yen, crude) */ .markets-picture-head { margin-top: 2px; } .tracker-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; background: var(--panel-raised); border: 1px solid var(--border-soft); border-radius: var(--r-tile); padding: 11px 8px 12px; text-decoration: none; min-width: 0; transition: border-color 0.15s ease; } .tracker-tile:hover { border-color: var(--accent); } .tracker-tile-label { font-size: var(--fs-2xs); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: var(--track-label); } /* Regime labels run long ("Cushioned but Mispriced") — wrap inside the tile instead of the chip's default nowrap */ .tracker-tile .carry-level { font-size: var(--fs-xs); white-space: normal; text-align: center; line-height: 1.35; max-width: 100%; } .tracker-tile .spinner { margin: 3px 0; } /* Price tiles: the 1D tape stretches with the tile; the freshness footer stays whisper-quiet so the chip keeps the eye. */ .tracker-spark { width: 100%; height: 30px; margin-top: 1px; flex: none; } .tracker-fresh { font-size: 10px; color: var(--muted); text-align: center; line-height: 1.4; letter-spacing: 0.01em; } .home-panel-cap { font-size: var(--fs-sm); } .home-section-head { padding: 0 2px; } .home-note { margin: 0; font-size: var(--fs-md); } /* Today: the story two-thirds, What Moved one-third */ .home-today { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-bottom: 20px; } .home-today .panel { margin-bottom: 0; min-width: 0; } @media (max-width: 900px) { .home-today { grid-template-columns: 1fr; } } .home-story { border-top: 3px solid var(--accent); background: linear-gradient(180deg, rgba(var(--accent-glow), 0.08), transparent 55%), var(--panel); } .home-story-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; font-size: var(--fs-sm); } .story-headline { margin: 0 0 12px; font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 34px); line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; } .story-read { margin: 0 0 16px; font-size: var(--fs-lg); line-height: 1.5; color: var(--text); opacity: 0.9; max-width: 720px; text-wrap: pretty; } .story-links { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 18px; } .story-link { color: var(--text); font-size: var(--fs-base); line-height: 1.4; text-decoration: none; } .story-link:hover { color: var(--accent-2); } .story-arrow { color: var(--accent-2); } .story-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; } .story-cta { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: var(--r-ctl); background: var(--gradient); color: #fff; font-weight: 700; text-decoration: none; } .story-cta:hover { color: #fff; filter: brightness(1.08); } .story-when { font-size: var(--fs-xs); margin-left: auto; } /* What Moved: one row per surprise — the move, then what moved */ .moved-row { display: flex; align-items: center; gap: 14px; min-height: 46px; border-top: 1px solid var(--border-faint); color: inherit; text-decoration: none; } .moved-row:first-child { border-top: 0; } .moved-row:hover .moved-sub { color: var(--accent-2); } .moved-num { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); font-variant-numeric: tabular-nums; flex: none; min-width: 88px; } .moved-num.up { color: var(--pos); } .moved-num.down { color: var(--neg-text); } .moved-num.warn { color: var(--warn); } /* flex: none — the explicit min-width replaces a flex item's automatic one, so a long nowrap label ("Leverage in the dark") got squeezed to 88px and spilled over the sub text */ .moved-chip { flex: none; min-width: 88px; text-align: center; } .moved-sub { flex: 1; min-width: 0; font-size: var(--fs-md); line-height: 1.3; transition: color .15s ease; } /* Ask Garrett: three question cards */ .ask-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; } .ask-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--panel-raised); border: 1px solid var(--border-soft); border-radius: var(--r-tile); min-width: 0; } .ask-card.running { border-color: rgba(var(--accent-glow), 0.55); } .ask-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ask-agent { font-size: var(--fs-2xs); } .ask-why { font-size: var(--fs-2xs); } .ask-q { font-size: var(--fs-base); line-height: 1.4; flex: 1 1 auto; } .ask-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Card buttons — .ask-card-btn, NOT .ask-btn: that class is the topbar's gradient Ask pill, and reusing it here once flattened the pill to a plain button on every non-chat page. */ .ask-card-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent); font: inherit; font-size: var(--fs-sm); font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease; } /* The same face as the topbar Ask pill: tinted at rest, the brand gradient + glow on hover, ✦ on the actions that start or open a reply */ .ask-card-btn.ask-spark::before { content: "✦"; display: inline-block; } .ask-card-btn:hover { background: var(--gradient); border-color: transparent; color: #fff; transform: translateY(-1px); box-shadow: 0 2px 18px rgba(var(--accent-glow), 0.45); } .ask-card-btn.ask-spark:hover::before { animation: ask-spin 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .ask-card-btn:active { transform: translateY(0) scale(0.96); } .ask-card-btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; } .ask-card-btn:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; } .ask-card-btn.ask-run { background: transparent; border-color: var(--border); color: var(--muted); } .ask-card-btn.ask-run:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); box-shadow: none; } .ask-card-btn.ask-ready { background: var(--gradient); border-color: transparent; color: #fff; } @media (prefers-reduced-motion: reduce) { .ask-card-btn, .ask-card-btn:hover { transition: none; transform: none; } .ask-card-btn.ask-spark:hover::before { animation: none; } } .ask-running { font-size: var(--fs-sm); font-weight: 700; color: var(--accent-2); } .ask-running::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 8px; border-radius: 50%; border: 2px solid var(--accent-2); border-top-color: transparent; vertical-align: -1px; animation: spin 0.9s linear infinite; } .ask-empty { grid-column: 1 / -1; } /* Worth a Look: three page cards */ .spotlight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; margin-bottom: 20px; } .spot-card { display: flex; flex-direction: column; gap: 10px; margin-bottom: 0; min-width: 0; } .spot-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl); line-height: 1.2; } .spot-ticker { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm); } .spot-chips { display: flex; flex-wrap: wrap; gap: 8px; } .spot-verdict { font-size: var(--fs-xs); } .spot-odds { display: flex; align-items: center; gap: 10px; } .spot-pct { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); min-width: 52px; color: var(--muted); font-variant-numeric: tabular-nums; } .spot-pct.lead { color: var(--accent); } .spot-bar { flex: 1 1 auto; height: 9px; background: var(--panel-raised); border-radius: 5px; overflow: hidden; } .spot-fill { height: 100%; background: var(--muted); } .spot-fill.lead { background: var(--accent); } .spot-scenario { font-size: var(--fs-sm); min-width: 88px; } .spot-read { font-size: var(--fs-md); line-height: 1.5; } .spot-sub { font-size: var(--fs-sm); } .spot-why { font-size: var(--fs-sm); font-weight: 600; color: var(--accent-2); } .spot-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .spot-done { font-size: var(--fs-sm); font-weight: 600; } .spot-link { margin-top: auto; font-weight: 700; font-size: var(--fs-md); } /* Footer band: the numbers, Needs You, Next Up — equal thirds that stack */ .home-foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; margin-bottom: 20px; } .home-foot .panel { margin-bottom: 0; min-width: 0; } .num-row { display: flex; align-items: center; gap: 12px; min-height: 44px; width: 100%; padding: 0; border: 0; border-top: 1px solid var(--border-faint); background: transparent; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; } .num-row:first-child { border-top: 0; } .num-label { flex: 1 1 auto; min-width: 0; font-size: var(--fs-md); } .num-value { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); font-variant-numeric: tabular-nums; } .num-delta { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; } .num-delta.up { color: var(--pos); } .num-delta.down { color: var(--neg-text); } .num-delta.warn { color: var(--warn); } .num-delta.pick { color: var(--accent-2); } a.num-row:hover .num-value, a.num-row:hover .num-label, button.num-row:hover .num-label { color: var(--accent-2); } .needs-text { color: var(--text); } .needs-more { color: var(--muted); font-size: var(--fs-sm); } .needs-more:hover { color: var(--accent-2); } /* Needs You rows carry their verbs: a main action (Run close / Handle) and Snooze; unfolded items sit under the row with their own verbs */ .needs-row { flex-wrap: wrap; row-gap: 4px; padding: 6px 0; } .needs-row .num-delta { min-width: 0; } .needs-acts { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .needs-act { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; white-space: nowrap; } .needs-act:hover:not(:disabled) { color: var(--accent-2); border-color: var(--accent-2); } .needs-act:disabled { opacity: 0.55; cursor: default; } .needs-act-main { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } .needs-sub { display: flex; flex-direction: column; margin: 0 0 8px 6px; padding-left: 12px; border-left: 2px solid var(--border-faint); } .needs-subrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 40px; font-size: var(--fs-sm); } .needs-subname { color: var(--text); font-weight: 600; text-decoration: none; } .needs-subname:hover { color: var(--accent-2); } .needs-subwhy { flex: 1 1 auto; min-width: 0; } .needs-month { font: inherit; font-size: var(--fs-sm); padding: 2px 6px; max-width: 150px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); } .needs-pri { font-size: var(--fs-xs); color: var(--warn); border-color: var(--warn); } .needs-snoozed .needs-text { color: var(--muted); } /* A story line and its "+ To do" sit on one line */ .story-line { display: flex; align-items: flex-start; gap: 10px; } .story-line .story-link { flex: 1 1 auto; } .story-todo { flex: 0 0 auto; margin-top: 1px; } /* Next Up rows wear the calendar's bucket color as a rail */ .nextup-row { border-left: 3px solid var(--chart-blue); padding-left: 10px; } .nextup-row.bucket-external { border-left-color: var(--accent); } .nextup-row.bucket-personal { border-left-color: var(--muted); } .nextup-row.pick { box-shadow: inset 0 0 0 1px rgba(var(--accent-glow), 0.45); border-radius: 6px; } .nextup-when { flex: none; min-width: 84px; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; } .nextup-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Home: The $100K Allocation ── the macro picture as one bar: the call, one sentence, a 100% bar colored by asset family with the legend under it, What to Sell as chips, and the reasoning folded behind two footer links. */ .alloc-stance { margin: 0 0 8px; font-size: var(--fs-3xl); line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; max-width: 820px; text-wrap: balance; } .alloc-read { margin: 0 0 20px; font-size: var(--fs-lg); line-height: 1.5; color: var(--muted); max-width: 820px; text-wrap: pretty; } .alloc-bar100 { display: flex; height: 40px; gap: 2px; border-radius: 8px; overflow: hidden; background: var(--bg); } .alloc-seg { display: flex; align-items: center; justify-content: center; min-width: 0; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; } /* Family legend: the three hues and each family's total — the level the bar is colored at; the sleeve legend below carries the shades. */ .alloc-families { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 14px; } .alloc-family { display: flex; align-items: center; gap: 10px; font-size: var(--fs-lg); font-weight: 600; } .alloc-family-num { font-family: var(--font-display); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .alloc-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 32px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-faint); } .alloc-legend-row { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: var(--fs-base); font-weight: 600; } .alloc-swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; } .alloc-legend-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .alloc-legend-num { margin-left: auto; font-family: var(--font-display); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .alloc-label { margin: 0; font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-label); color: var(--muted); } .alloc-label .alloc-sub { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; } .alloc-sell { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; } .alloc-none { margin: 0; font-size: var(--fs-sm); } .alloc-chips { display: flex; flex-wrap: wrap; gap: 8px; } .alloc-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill); background: var(--panel-raised); border: 1px solid var(--border-soft); font-size: var(--fs-md); font-weight: 600; cursor: help; } .alloc-chip-kind { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-label); color: var(--accent-2); } .alloc-chip-kind.is-exit { color: var(--muted); } .alloc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--border-faint); font-size: var(--fs-sm); color: var(--muted); } .alloc-toggle { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; } .alloc-toggle:hover, .alloc-toggle[aria-expanded="true"] { color: var(--accent-2); } .alloc-toggle svg { width: 14px; height: 14px; transition: transform 0.15s ease; } .alloc-toggle[aria-expanded="true"] svg { transform: rotate(90deg); } .alloc-foot-note { margin-left: auto; font-size: var(--fs-2xs); } .alloc-more { margin-top: 12px; font-size: var(--fs-md); line-height: 1.6; max-width: 900px; opacity: 0.88; } .alloc-more p { margin: 0 0 8px; text-wrap: pretty; } .alloc-more p:last-child { margin-bottom: 0; } @media (max-width: 760px) { .alloc-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; } .alloc-legend-row { font-size: var(--fs-sm); } .alloc-family { font-size: var(--fs-base); } } @media (max-width: 480px) { .alloc-legend { grid-template-columns: minmax(0, 1fr); } .alloc-seg { font-size: var(--fs-2xs); } .alloc-stance { font-size: var(--fs-2xl); } } /* ── Home briefing ── */ #briefing-body .markdown-body { line-height: 1.55; } #briefing-body .markdown-body ul { margin: 0; padding-left: 20px; } #briefing-body .markdown-body li { margin: 6px 0; } /* The macro read: the synthesized top-of-page take, visually a level above the section cards */ .briefing-intro { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-base); line-height: 1.6; margin-bottom: 10px; padding: 14px 16px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--panel-raised); } .briefing-intro-text { flex: 1; min-width: 0; } #read-all-slot { display: inline-flex; align-items: center; gap: 6px; } .read-all-label { font-size: var(--fs-base); } .briefing-section { border: 1px solid var(--border-soft); border-radius: 10px; padding: 12px 16px 14px; margin-top: 12px; } .briefing-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .briefing-section-head h3 { margin: 0; font-size: var(--fs-base); } /* ── Japan carry-trade risk card (fragility vs unwind stress) ── */ .carry-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; position: relative; } .carry-head h2 { margin: 0; } /* ⓘ sits WITH the heading it explains (right after the title and its narration button), never orphaned at the panel's far edge; the methodology body drops in as a popover anchored to the header row */ .carry-info { position: static; } .carry-info summary { cursor: pointer; list-style: none; color: var(--muted); font-size: var(--fs-xl); line-height: 1; user-select: none; } .carry-info summary::-webkit-details-marker { display: none; } .carry-info summary:hover { color: var(--text); } .carry-info[open] summary { color: var(--text); } .carry-info-body { position: absolute; left: 0; top: calc(100% + 8px); z-index: 20; width: min(640px, 100%); padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: 10px; font-size: var(--fs-base); background: var(--panel); box-shadow: 0 8px 24px var(--shadow-pop); } .carry-info-body p { margin: 0 0 8px; } .carry-info-body p:last-child { margin-bottom: 0; } /* ── Data-source freshness chip (dataFreshness in common.js): the hero's publication-recency line on every Macro/Markets page. The chip is a plain-text button (no pill chrome — it replaces what was a muted caption); status shows in the per-source dots and, when a series has fallen behind its own schedule, the segment text itself. ── */ .freshness-chip { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: var(--fs-base); cursor: pointer; text-align: inherit; } .freshness-chip:hover { color: var(--text); } .fresh-seg { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .fresh-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--muted); } /* The detail popover rides document.body (the hero card clips overflow), positioned by JS under the chip. No animation — nothing to reduce. */ .freshness-pop { position: absolute; z-index: 60; width: min(360px, calc(100vw - 16px)); padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--panel); box-shadow: 0 8px 24px var(--shadow-pop); font-size: var(--fs-base); } .freshness-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; } .freshness-row .fresh-dot { position: relative; top: -1px; } .freshness-row-body { display: flex; flex-direction: column; min-width: 0; } .freshness-row-label { font-weight: 600; } .freshness-meta { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border-soft); } .freshness-foot { margin-top: 6px; font-size: var(--fs-sm); } .carry-regime { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .carry-level { display: inline-block; padding: 2px 10px; border: 1px solid; border-radius: 999px; font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--track-label); white-space: nowrap; } /* ── Curve-shape legend (bonds.js): all five chip states in their tone colors, the live one full-strength, the alternatives dimmed. Tooltips carry the one-line explanation of each. ── */ .shape-legend { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin: 10px 0 16px; } .shape-legend-chip { display: inline-block; padding: 2px 9px; border: 1px solid; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: var(--track-label); white-space: nowrap; opacity: 0.4; cursor: help; } .shape-legend-chip.active { opacity: 1; } .carry-grid { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; } .carry-map-block { width: 320px; max-width: 100%; flex-shrink: 0; } .carry-map { width: 100%; height: auto; display: block; } .carry-map-label { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--track-label); } .carry-map-marker { font-size: 11px; font-weight: 600; fill: var(--text); } /* The Desk panel: a visibly bigger board than the per-pair cards — the AI synthesis reads first, then a wide map with a stats column. */ .carry-desk-map { width: 620px; max-width: 100%; flex-shrink: 1; } #carry-desk-panel .carry-grid { margin-top: 18px; } /* ── Card hero: the standardized header band every carry container leads with — the live print (left), the regime verdict (middle) and the axis scores (right) in one raised, scannable strip. The analysis cards and the charts follow it. ── */ .carry-hero { display: flex; align-items: center; gap: 14px 26px; flex-wrap: wrap; margin: 2px 0 4px; padding: 13px 16px; background: var(--panel-raised); border: 1px solid var(--border-soft); border-radius: 10px; } .carry-hero-main { display: flex; flex-direction: column; gap: 3px; min-width: 200px; } .carry-hero-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 700; letter-spacing: 0.01em; line-height: 1.1; } .carry-hero-sub { font-size: var(--fs-sm); } .carry-hero-verdict { flex: 1 1 260px; display: flex; flex-direction: column; gap: 6px; min-width: 220px; } .carry-hero-blurb { font-size: var(--fs-md); line-height: 1.5; } .carry-hero-scores { display: flex; gap: 24px; margin-left: auto; } .carry-hero-score { display: flex; flex-direction: column; align-items: center; gap: 3px; } .carry-hero-score-label { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); white-space: nowrap; } .carry-hero-score-num { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 700; line-height: 1; } /* The charts land right after the analysis block (carry pairs) or the hero slot (credit, banking, oil) — give the grid the separation the regime banner used to provide */ .carry-analysis + div > .carry-grid:first-child, .card-hero-slot + div > .carry-grid:first-child { margin-top: 18px; } .carry-map-axis { font-size: var(--fs-xs); fill: var(--muted); } .carry-map-note { margin-top: 8px; font-size: var(--fs-sm); } .carry-tiles { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: 12px; } .carry-axis { border: 1px solid var(--border-soft); border-radius: 10px; padding: 10px 12px; } .carry-axis-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .carry-axis-title { font-weight: 700; font-size: var(--fs-md); letter-spacing: var(--track-label); } .carry-axis-score { font-size: var(--fs-2xl); font-weight: 700; } .carry-comp { margin-top: 8px; } .carry-comp-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; } .carry-comp-label { font-size: var(--fs-md); font-weight: 600; } .carry-comp-labelwrap { display: inline-flex; align-items: baseline; gap: 6px; } .carry-comp-info-btn { background: none; border: none; padding: 0; margin: 0; color: var(--muted); cursor: pointer; font-size: var(--fs-md); line-height: 1; } .carry-comp-info-btn:hover { color: var(--text); } .carry-comp-info { margin: 8px 0; font-size: var(--fs-base); line-height: 1.55; border-left: 2px solid var(--border-soft); padding-left: 10px; } /* Structured info bodies: short labeled paragraphs, not a text wall */ .carry-comp-info p { margin: 0 0 7px; } .carry-comp-info p:last-child { margin-bottom: 0; } .carry-comp-info b { color: var(--text); font-weight: 600; } .carry-bar { height: 5px; border-radius: 3px; background: var(--panel-raised); overflow: hidden; } .carry-bar-fill { height: 100%; border-radius: 3px; } .carry-comp-detail { margin-top: 4px; font-size: var(--fs-md); } /* ── Energy price panel (energy page): benchmark history charts with a live print — taller than the risk-card sparklines ── */ .price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 1100px) { .price-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .price-grid { grid-template-columns: 1fr; } } .price-grid-pump { grid-template-columns: 1fr 1fr; margin-top: 16px; } @media (max-width: 640px) { .price-grid-pump { grid-template-columns: 1fr; } } .price-subhead { margin: 18px 0 0; font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .price-chart { height: 190px; margin-top: 6px; } /* Diesel panel: four stat tiles over a 2×2 of charts. The tiles aren't links, so the accent hover the tracker strip gives its tiles is off. */ .diesel-tile:hover { border-color: var(--border-soft); } .diesel-tile .hc-tile-sub { white-space: normal; text-align: center; } .diesel-tile .index-badge { font-size: var(--fs-2xs); } .diesel-charts { margin-top: 4px; } .diesel-charts .grid-mix-legend { font-size: var(--fs-xs); margin-top: 6px; } .price-live { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; } .price-live-value { font-size: var(--fs-2xl); font-weight: 700; } /* Shadow Banking — Sponsors & Vehicles: the multi-horizon names table (val-table machinery; scrolls inside its own box on phones) */ .shadow-names-wrap { overflow-x: auto; } .shadow-names-table td.num { font-variant-numeric: tabular-nums; } .shadow-names-table td.pos { color: var(--pos); } .shadow-names-table td.neg { color: var(--neg-text); } .shadow-names-table td.shadow-flag { font-weight: 700; background: var(--accent-soft); } .shadow-names-table th.sortable:first-child { position: sticky; left: 0; z-index: 1; } .shadow-name-cell { position: sticky; left: 0; z-index: 1; } .shadow-name-cell .stock-ticker { color: inherit; text-decoration: none; margin-right: 8px; } .shadow-name-vehicle { padding-left: 26px !important; } .shadow-name-vehicle::before { content: "↳"; color: var(--muted); margin-right: 6px; } .shadow-name-full { margin-right: 8px; } .shadow-kind { font-size: var(--fs-2xs); letter-spacing: var(--track-label); text-transform: uppercase; padding: 1px 7px; border: 1px solid var(--border-soft); border-radius: 999px; color: var(--muted); } .shadow-kind-bdc { color: var(--sky); border-color: currentColor; } .shadow-names-note { margin-top: 8px; } @media (max-width: 640px) { .shadow-name-full { display: none; } } .carry-sparks { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; } .carry-sparks[hidden] { display: none; } /* display:grid would defeat [hidden] */ .carry-sparks-3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px) { .carry-sparks-3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .carry-sparks, .carry-sparks-3 { grid-template-columns: 1fr; } } .carry-spark-block { border: 1px solid var(--border-soft); border-radius: 10px; padding: 10px 12px; min-width: 0; } .carry-spark-title { font-size: var(--fs-md); margin-bottom: 6px; } .carry-spark-chart { height: 140px; } .client-chart { min-height: 260px; } #hub-revenue-panel .client-chart { min-height: 400px; } @media (max-width: 640px) { #hub-revenue-panel .client-chart { min-height: 300px; } } /* Add Client picker: search over the tracked-company universe */ .client-add { margin-bottom: 14px; } .client-add input { width: 100%; max-width: 520px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; } .client-add input:focus { outline: none; border-color: var(--accent); } .client-add-list { margin-top: 8px; max-width: 520px; } .client-add-row { display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 8px 12px; border: 1px solid var(--border-soft); border-radius: 8px; margin-bottom: 6px; background: var(--panel); color: var(--text); font: inherit; text-align: left; cursor: pointer; } .client-add-row:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); } .client-add-row:disabled { cursor: default; opacity: 0.6; } .client-add-row .muted { font-size: var(--fs-xs); } .client-add-state { margin-left: auto; color: var(--accent); font-size: var(--fs-sm); } .client-add-empty { padding: 6px 2px; } /* ── Client cards: the Team page's card vocabulary re-worn by the roster — --tier is the client's chart color, so a card's frame matches its lines in the four-pack above. ── */ .client-card-grid { margin-top: 2px; } .client-card-logo { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 14px; border: 2px solid var(--tier); box-shadow: 0 0 0 4px var(--panel-raised); background: #fff; overflow: hidden; } .client-card-initial { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: color-mix(in srgb, var(--tier) 24%, transparent); color: var(--tier); font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; } .client-card-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8px; background: #fff; } .client-card-score { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; color: var(--tier); } .client-card .fav-btn { line-height: 1; } .client-card-badges { display: flex; justify-content: center; min-height: 25px; } .client-card-badges .verdict-badge { font-size: var(--fs-xs); } .client-stat-delta { margin-left: auto; font-size: 11px; font-weight: 700; } .client-card .delta-up { color: var(--pos); } .client-card .delta-down { color: var(--neg-text); } .client-card-avas { display: flex; align-items: center; flex: 1; min-width: 0; } .client-card-ava { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--tier) 22%, transparent); color: var(--tier); font-size: 11px; font-weight: 700; overflow: hidden; border: 2px solid var(--panel-raised); } .client-card-ava + .client-card-ava { margin-left: -7px; } .client-card-ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .client-card-noteam { font-size: var(--fs-xs); } /* Progressive roster: the cards paint from the roster list first (identity, link, star) with skeleton bars holding the figures' places until the finance join lands; a failed join freezes the bars under the failure note so nothing keeps promising a load. */ .client-roster-note .loading-note { margin: 0 0 10px; } .client-card .team-stat-value .skeleton-line { width: 3.4em; max-width: 90%; height: 0.85em; vertical-align: baseline; } .client-skel-badge { width: 120px; height: 14px; align-self: center; } .client-skel-team { width: 96px; height: 12px; } .client-grid-stalled .skeleton-line { animation: none; opacity: 0.45; } /* Client hub */ .tab-row[hidden] { display: none; } /* display:flex would defeat [hidden] */ /* The hero wears the company profile's identity + tape shape; two tapes (revenue, visibility) sit right, each hidden until its read lands, so a private client without books still gets a clean header */ .company-header.hub-hero { grid-template-columns: minmax(0, 1fr) auto; } .hub-hero-tapes { display: flex; gap: 28px; } .hub-hero .co-hero-price { width: 250px; } .hub-hero .co-hero-price[hidden] { display: none; } .hub-hero .hub-hero-sub { margin-top: 8px; font-size: var(--fs-xs); text-transform: none; letter-spacing: 0; } .hub-hero .hub-hero-sub:empty { display: none; } /* Narrower: the tapes drop under the identity as a row of their own */ @media (max-width: 1100px) { .company-header.hub-hero { grid-template-columns: 1fr; } .hub-hero-tapes { border-top: 1px solid var(--border-faint); padding-top: 12px; } .hub-hero .co-hero-price { width: auto; flex: 1; border-left: none; padding-left: 0; } } @media (max-width: 640px) { .hub-hero-tapes { flex-direction: column; gap: 14px; } } /* Top row: Valuation Metrics (3/5) beside Team (2/5) — the valuation mesh auto-fits its columns, so the narrower panel reflows on its own; private clients (no valuation panel) get Team alone, full width */ .hub-top-row { display: grid; gap: 20px; margin-bottom: 20px; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } .hub-top-row.hub-top-solo { grid-template-columns: 1fr; } .hub-top-row > .panel { margin-bottom: 0; } @media (max-width: 900px) { .hub-top-row { grid-template-columns: 1fr; } } /* ── Drug Portfolio: the ledger. A full-bleed roll-up band in the Valuation panel's stat-mesh vocabulary, then the brand table (row hairlines, no cell borders) beside a Conditions rail — the platform's condition leaderboards with the client's brands ranked in each, visible without scrolling past the table. ── */ .hub-brands-sub { font-size: var(--fs-sm); } .hub-brands-mesh { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); margin: 6px calc(-1 * clamp(12px, 2vw, 20px)) 0; overflow: hidden; } .hub-brands-mesh .hub-val-cell { box-shadow: -1px 0 0 0 var(--border-soft); } .hub-brands-mesh .hub-val-cell-value { font-family: var(--font-display); font-size: var(--fs-2xl); margin: 3px 0 2px; } .hub-brands-mesh .unit, .hub-cond-best .unit { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500; color: var(--muted); } .hub-mesh-pos { color: var(--pos); } .hub-mesh-accent { color: var(--accent); } .hub-brands-layout { display: grid; gap: 28px; margin-top: 18px; align-items: start; grid-template-columns: minmax(0, 1fr) 300px; } .hub-brands-layout.hub-brands-solo { grid-template-columns: 1fr; } @media (max-width: 900px) { .hub-brands-layout { grid-template-columns: 1fr; gap: 20px; } } .hub-brands-table { width: 100%; } .table-wrap .hub-brands-table th, .table-wrap .hub-brands-table td { border: none; } .table-wrap .hub-brands-table th { background: transparent; position: static; font-weight: 600; font-size: var(--fs-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); padding: 6px 10px 8px; border-bottom: 1px solid var(--border-soft); } .table-wrap .hub-brands-table td { padding: 9px 10px; vertical-align: middle; border-bottom: 1px solid var(--border-faint); } .hub-brands-table tbody tr:hover td { background: var(--row-hover); } .hub-brand-acnu { margin-left: 8px; vertical-align: 2px; } .hub-brand-sub { font-size: var(--fs-xs); margin-top: 1px; } .hub-brands-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 10px 0; font-size: var(--fs-sm); } .hub-brands-foot .muted { font-size: var(--fs-sm); } .hub-ghost-btn { font-size: var(--fs-sm); padding: 6px 12px; border: 1px solid var(--border-soft); background: transparent; color: var(--muted); } .hub-ghost-btn:hover { color: var(--text); border-color: var(--border); } .hub-cond-rail { display: flex; flex-direction: column; gap: 12px; } .hub-cond-head { display: flex; align-items: baseline; justify-content: space-between; } .hub-cond-head h3 { margin: 0; font-size: var(--fs-md); } .hub-cond-head .muted { font-size: var(--fs-xs); } .hub-cond-list { display: flex; flex-direction: column; gap: 12px; } .hub-cond-card { background: var(--panel-raised); border-radius: var(--r-tile); padding: 12px 14px; } .hub-cond-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .hub-cond-name { font-weight: 600; } .hub-cond-best { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 600; color: var(--accent); white-space: nowrap; } .hub-cond-sub { font-size: var(--fs-xs); margin: 2px 0 8px; } .hub-cond-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--fs-sm); padding: 5px 0; border-top: 1px solid var(--border-faint); } .hub-rank-pill { display: inline-block; padding: 1px 8px; border-radius: var(--r-pill); font-size: var(--fs-2xs); font-weight: 700; color: var(--accent); background: var(--accent-soft); white-space: nowrap; } .hub-cond-note { margin: 2px 0 0; font-size: var(--fs-xs); line-height: 1.5; } /* Top row: Valuation Metrics (3/5) beside Team (2/5) — the valuation mesh auto-fits its columns, so the narrower panel reflows on its own; private clients (no valuation panel) get Team alone, full width */ .hub-top-row { display: grid; gap: 20px; margin-bottom: 20px; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } .hub-top-row.hub-top-solo { grid-template-columns: 1fr; } .hub-top-row > .panel { margin-bottom: 0; } @media (max-width: 900px) { .hub-top-row { grid-template-columns: 1fr; } } /* Drug Portfolio: the platform's brand rows (chips from the radar's vocabulary) and the condition roll-up as a card grid */ .hub-brands-table { width: 100%; } .hub-brands-table td { vertical-align: top; } .hub-brand-acnu { margin-left: 8px; } .hub-brand-sub { font-size: var(--fs-xs); margin-top: 2px; } .hub-brand-conds { display: flex; flex-wrap: wrap; gap: 4px; max-width: 320px; } .hub-cond-pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; color: var(--accent); background: var(--accent-soft); } .hub-cond-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .hub-cond-card { background: var(--panel-raised); border-radius: 10px; padding: 10px 12px; } .hub-cond-top { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .hub-cond-name { font-weight: 600; } .hub-cond-rank { font-size: var(--fs-sm); font-weight: 600; color: var(--accent); margin-top: 2px; } .hub-cond-drugs { font-size: var(--fs-xs); margin-top: 4px; line-height: 1.5; } /* Revenue head: room between the stat line and its neighbors — the panel head above, the view tabs below */ .hub-rev-stats { margin: 2px 0 14px; } .hub-rev-stats:empty { margin: 0; } /* ── Valuation Metrics: the constellation. The composite's three components drawn as a triangle on faint guide rings (center 50 is the midpoint ring) with a whisper of starfield; the score and the verdict badges sit beside the shape. Below a hairline: the stat mesh. ── */ .hub-con-top { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; margin-bottom: 16px; } .hub-con-radar { width: 250px; height: 250px; flex-shrink: 0; } .hub-con-main { flex: 1; min-width: 280px; } .hub-con-scoreline { display: flex; align-items: baseline; gap: 8px; } .hub-con-score { font-family: var(--font-display); font-size: 58px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; } .hub-con-main .verdict-head { margin: 14px 0 12px; } .hub-con-caption { margin: 0; font-size: var(--fs-sm); line-height: 1.5; } @media (prefers-reduced-motion: no-preference) { @keyframes hub-bloom { from { opacity: 0; transform: scale(0.55); } to { opacity: 1; transform: scale(1); } } @keyframes hub-twinkle { 0%, 100% { opacity: 0.18; } 50% { opacity: 0.45; } } @keyframes hub-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .hub-con-shape { transform-box: view-box; transform-origin: 50% 50%; animation: hub-bloom 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both; } .hub-con-star { animation: hub-twinkle 4s ease-in-out infinite; } .hub-con-rise { animation: hub-rise 0.5s ease-out both; } } /* The stat mesh: a hairline lattice — each cell draws its own top and left hairline (clipped at the outer edges), so a partly-filled last row leaves no phantom cells — labels whisper, values speak */ .hub-val-mesh { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); border-top: 1px solid var(--border-soft); overflow: hidden; } .hub-val-cell { box-shadow: -1px -1px 0 0 var(--border-soft); padding: 12px clamp(12px, 2vw, 20px); } /* Full-bleed band: the lattice runs to the panel's own edges, so the hairlines read as part of the panel rather than a floating box */ .hub-val-mesh { margin: 0 calc(-1 * clamp(12px, 2vw, 20px)) -16px; } .hub-val-cell-label { font-size: var(--fs-xs); letter-spacing: var(--track-label); text-transform: uppercase; margin-bottom: 3px; } .hub-val-cell-value { font-size: var(--fs-lg); font-weight: 600; line-height: 1.2; } .hub-val-cell-value.badge-up { color: var(--pos); } .hub-val-cell-value.badge-down { color: var(--neg); } .hub-val-cell-sub { font-size: var(--fs-xs); margin-top: 2px; } @media (max-width: 560px) { .hub-val-top { gap: 18px; } .hub-val-main { min-width: 0; } } .hub-files-crumb { margin-bottom: 10px; } .hub-files-crumb a { color: var(--link); } .hub-crumb-here { font-weight: 600; } /* Folder rows sit in the same table as files; the name cell is the click target. Rows and breadcrumb ancestors light up as drop targets (OS files upload in, dragged file rows move in). */ .hub-folder-row td:first-child { cursor: pointer; } .hub-folder-name { font-weight: 600; } .hub-folder-row.dragover td { background: var(--accent-soft); } .hub-files-crumb a.dragover { background: var(--accent-soft); border-radius: 5px; outline: 2px solid var(--accent); } #hub-files-body tbody tr[draggable="true"] { cursor: grab; } /* Shared Links: the drawer's live public links */ .hub-shares-head { margin: 18px 0 2px; } .hub-shares-sub { margin-top: 2px; font-size: var(--fs-xs); } .hub-file-move { padding: 3px 8px; border: 1px solid var(--border-soft); border-radius: 7px; background: var(--panel); color: var(--muted); font: inherit; font-size: var(--fs-xs); margin-right: 6px; } /* Client hub: the team chip grid + proxied avatars (initials underneath — the image simply covers them when the proxy has a photo) */ .hub-team-grid { display: flex; flex-wrap: wrap; gap: 10px; } .hub-team-chip { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--panel); color: var(--text); text-decoration: none; } a.hub-team-chip:hover { border-color: var(--accent); background: var(--accent-soft); } .hub-team-chip .muted { font-size: var(--fs-xs); } .hub-team-name { font-weight: 600; } .hub-avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: var(--fs-sm); font-weight: 600; overflow: hidden; flex-shrink: 0; } .hub-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .carry-spark-note { margin-top: 6px; font-size: var(--fs-sm); } /* Pair-vs-spread overlay: full grid width and taller than a spark — a 5-year two-scale read needs the room */ .carry-overlay-block { grid-column: 1 / -1; } .carry-overlay-chart { height: 280px; } /* A lone spark promoted to full width (the flagship's dollar index) gets extra height so it doesn't stretch into a thin ribbon */ .carry-overlay-block .carry-spark-chart { height: 200px; } .carry-analysis { margin-top: 22px; } /* Inflation page — global divergence grid */ .glob-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } .glob-card { padding: 10px 12px; min-width: 0; } .glob-name { font-size: var(--fs-base); font-weight: 600; } .glob-yoy { font-size: var(--fs-3xl); font-weight: 700; margin: 4px 0 2px; } .glob-gap { font-size: var(--fs-md); } .glob-spark { height: 90px; margin-top: 8px; } .glob-asof { font-size: var(--fs-sm); margin-top: 6px; } /* Power & Gas panel */ .grid-region-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; } .grid-region-head .carry-comp-labelwrap { min-width: 0; } .grid-region-yoy { font-size: var(--fs-base); font-weight: 700; white-space: nowrap; flex-shrink: 0; } .grid-mix { margin-top: 16px; } .grid-mix-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; margin-top: 6px; } .grid-mix-seg { height: 100%; min-width: 2px; } .grid-mix-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: var(--fs-md); } .grid-mix-chip { display: inline-flex; align-items: center; gap: 5px; } .grid-mix-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .grid-gas-line { margin-top: 14px; font-size: var(--fs-md); } .grid-subtitle { margin: -2px 0 14px; font-size: var(--fs-base); line-height: 1.5; max-width: 720px; } /* Analysis takeaway headlines (#### in the analyst markdown) — visual signposts; TTS skips heading lines entirely */ .carry-analysis-body h4, .briefing-intro-text h4, .briefing-section .markdown-body h4 { margin: 0 0 6px; font-family: var(--font-display); font-size: var(--fs-base); letter-spacing: 0.01em; } .carry-analysis-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .carry-analysis-head button { margin-left: auto; } .carry-analysis-body { font-size: var(--fs-base); line-height: 1.55; max-width: 860px; } .carry-analysis-status { margin-top: 6px; font-size: var(--fs-sm); } /* ── On the Radar timeline (home.js radarTimeline): dated catalysts as event cards strung along a glowing rail — calendar-leaf date, countdown chip, title, the point. Imminent events (within a week) pulse. ── */ .radar-section { background: radial-gradient(120% 80% at 0% 0%, rgba(var(--accent-glow), 0.07), transparent 55%), var(--panel); } .radar-timeline { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; position: relative; padding-top: 8px; } .radar-timeline::before { content: ""; position: absolute; left: 12px; right: 12px; top: -1px; height: 2px; z-index: 0; background: linear-gradient(90deg, rgba(var(--accent-glow), 0.85), rgba(var(--accent-glow), 0.35) 60%, rgba(var(--accent-glow), 0.08)); } .radar-event { position: relative; z-index: 1; display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px 16px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--panel-raised); transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease; animation: radar-in 0.45s ease both; animation-delay: calc(var(--i, 0) * 90ms); } .radar-event:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 28px -14px rgba(var(--accent-glow), 0.55); } .radar-node { position: absolute; top: -14px; left: 26px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--panel), 0 0 14px rgba(var(--accent-glow), 0.7); } .radar-event.is-live .radar-node { animation: radar-pulse 1.8s ease-out infinite; } .radar-leaf { flex: 0 0 auto; width: 68px; border-radius: 10px; overflow: hidden; text-align: center; border: 1px solid var(--border-soft); background: var(--panel); font-family: var(--font-display); } .radar-leaf-month { display: block; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: #fff; padding: 3px 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); } .radar-leaf-day { display: block; font-size: 1.35rem; font-weight: 700; line-height: 1.15; padding: 7px 4px 8px; letter-spacing: -0.03em; white-space: nowrap; font-variant-numeric: tabular-nums; } .radar-leaf-day.is-range { font-size: 1.1rem; } .radar-text { flex: 1; min-width: 0; } .radar-countdown { display: inline-block; font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-label); color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 2px 8px; margin-bottom: 6px; } .radar-event.is-past .radar-countdown { color: var(--muted); background: var(--muted-soft); } .radar-event.is-past .radar-node { background: var(--muted); box-shadow: 0 0 0 4px var(--panel); } .radar-title { margin: 0 0 4px; font-family: var(--font-display); font-size: var(--fs-base); line-height: 1.3; } .radar-point { font-size: var(--fs-sm); line-height: 1.55; color: var(--muted); } .radar-point p { margin: 0; } @keyframes radar-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes radar-pulse { 0% { box-shadow: 0 0 0 4px var(--panel), 0 0 0 4px rgba(var(--accent-glow), 0.6); } 100% { box-shadow: 0 0 0 4px var(--panel), 0 0 0 16px rgba(var(--accent-glow), 0); } } @media (prefers-reduced-motion: reduce) { .radar-event { animation: none; } .radar-event.is-live .radar-node { animation: none; } } @media (max-width: 640px) { .radar-timeline { grid-template-columns: 1fr; gap: 10px; padding-left: 14px; } .radar-timeline::before { left: 5px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto; background: linear-gradient(180deg, rgba(var(--accent-glow), 0.85), rgba(var(--accent-glow), 0.08)); } .radar-node { left: -14px; top: 24px; } } /* Source citations ([[N]](url) markers) render as superscript chips */ .briefing-section .markdown-body a, .carry-analysis-body a { font-size: var(--fs-sm); vertical-align: super; line-height: 1; text-decoration: none; color: var(--accent); } .briefing-section .markdown-body a:hover, .carry-analysis-body a:hover { text-decoration: underline; } /* ── Overview (the analyst read on every page): a display headline, an accent-barred lede, and the label-led bullets as a card grid — the Team pages' treatment generalized, so a reader pressed for time can scan the takeaway, the why, and the parts in seconds. The classes are applied by markUpOverview (common.js); analyses shaped differently simply keep their prose. ── */ .carry-head + .carry-analysis { margin-top: 6px; } /* own panel: sit close */ .overview-body { max-width: none; } .overview-body .ov-headline { margin: 2px 0 12px; font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; letter-spacing: 0.01em; line-height: 1.3; } .overview-body .ov-lede { margin: 0; padding: 13px 16px; background: var(--panel-raised); border: 1px solid var(--border-soft); border-left: 3px solid var(--accent); border-radius: 10px; font-size: var(--fs-lg); line-height: 1.6; } .overview-body .ov-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin: 12px 0 0; padding: 0; } .overview-body .ov-card { margin: 0; padding: 13px 15px 14px; background: var(--panel-raised); border: 1px solid var(--border-soft); border-radius: 10px; font-size: var(--fs-md); line-height: 1.6; overflow-wrap: anywhere; /* tickers, filenames and URLs must wrap */ } .overview-body .ov-label { display: block; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--border-faint); font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent-2); } /* The Watch card is the one that points forward — the accent wash sets the dated catalysts apart from the findings, like the Team read's action callout. */ .overview-body .ov-watch { background: var(--accent-soft); border-color: var(--accent); } .overview-body .ov-watch .ov-label { color: var(--accent); } /* Folded overview (data-ov-fold on the container): the takeaway shows, the cards wait behind the toggle — foldOverviewCards() in common.js. */ .overview-body.ov-folded > .ov-grid { display: none; } .overview-body .ov-fold-toggle { margin-top: 12px; } /* /liquidity: signed 13-week contribution bars around a center zero line */ .contrib-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; } .contrib-row { display: grid; grid-template-columns: 170px 1fr 90px; gap: 12px; align-items: center; } .contrib-label { font-size: var(--fs-base); display: flex; flex-direction: column; } .contrib-hint { font-size: var(--fs-sm); } .contrib-track { position: relative; height: 14px; background: var(--border-faint); border-radius: 7px; } .contrib-track::before { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--border-soft); } .contrib-bar { position: absolute; top: 2px; bottom: 2px; border-radius: 5px; } .contrib-value { text-align: right; font-weight: 700; font-size: var(--fs-base); } .contrib-total { border-top: 1px solid var(--border-soft); padding-top: 10px; } @media (max-width: 640px) { .contrib-row { grid-template-columns: 110px 1fr 80px; } } .panel-link { margin-left: auto; font-size: var(--fs-base); align-self: center; } /* ── Commentary page + homepage bite ── */ /* Digest typography: a lede line, then themes as accent-barred cards */ .digest-body { max-width: 76ch; font-size: var(--fs-md); } .digest-body > p:first-child { font-size: var(--fs-lg); line-height: 1.65; margin-top: 4px; } .digest-body ul { list-style: none; padding: 0; margin: 16px 0 4px; display: grid; gap: 10px; } /* Regenerate lives in the digest header so it's visible without scrolling past a long digest; the status line truncates rather than wrapping the row */ .digest-regen { display: flex; align-items: center; gap: 10px; margin-left: auto; min-width: 0; } .digest-regen .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 340px; } .digest-body ul li { border-left: 3px solid var(--accent); background: var(--panel-raised); border-radius: 0 12px 12px 0; padding: 12px 16px; line-height: 1.6; margin: 0; } .digest-body ul li > strong:first-child { font-family: var(--font-display); } /* Author roster chips (with remove) + the add-handle form */ .commentary-authors { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; } .author-chip { display: inline-flex; align-items: center; padding: 3px 6px 3px 4px; border: 1px solid var(--border-soft); border-radius: 999px; color: var(--muted); font-size: var(--fs-md); transition: border-color .15s ease; } .author-chip:hover { border-color: var(--border); } .author-chip-link { display: inline-flex; align-items: center; gap: 7px; color: inherit; text-decoration: none; } .author-chip-link:hover { color: var(--accent); } .author-chip .post-avatar { width: 22px; height: 22px; font-size: var(--fs-xs); } .chip-remove { border: none; background: none; color: var(--muted); cursor: pointer; font-size: var(--fs-md); line-height: 1; padding: 2px 5px; margin-left: 3px; border-radius: 50%; } .chip-remove:hover { color: var(--accent); background: var(--accent-soft); } .chip-remove:disabled { opacity: 0.4; cursor: default; } .author-add { display: flex; gap: 6px; } .author-add input { width: 130px; background: var(--panel-raised); border: 1px solid var(--border-soft); border-radius: 999px; color: var(--text); font-family: inherit; font-size: var(--fs-md); padding: 5px 12px; } .author-add input:focus { outline: none; border-color: var(--border); } .author-add button { border: none; border-radius: 999px; background: var(--button-bg); color: #fff; font-weight: 600; font-size: var(--fs-md); padding: 5px 14px; cursor: pointer; } .author-add button:hover { background: var(--button-bg-hover); } /* Post cards: two-column masonry of raised cards */ #commentary-feed { column-count: 2; column-gap: 16px; } @media (max-width: 900px) { #commentary-feed { column-count: 1; } } .post-card { break-inside: avoid; margin: 0 0 16px; background: var(--panel-raised); padding: 14px 16px 10px; transition: border-color .15s ease; } .post-card:hover { border-color: var(--border); } .post-head { display: flex; align-items: center; gap: 10px; } .post-avatar { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-soft); flex-shrink: 0; } .post-avatar-fallback { display: inline-flex; align-items: center; justify-content: center; background: var(--gradient); color: #fff; font-weight: 700; font-size: var(--fs-base); } .post-who { min-width: 0; } .post-name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .post-sub { font-size: var(--fs-md); } .post-link { margin-left: auto; font-size: var(--fs-base); line-height: 1; text-decoration: none; color: var(--muted); padding: 6px 9px; border-radius: 8px; } .post-link:hover { background: var(--accent-soft); color: var(--accent); } .post-text { margin: 10px 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; font-size: var(--fs-base); } .post-media { display: grid; gap: 8px; margin: 2px 0 10px; } .post-media.multi { grid-template-columns: 1fr 1fr; } .post-media-item { position: relative; display: block; } .post-media-item img { width: 100%; max-height: 480px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border-soft); display: block; background: var(--media-bg); } .post-media-play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 34px; color: #fff; text-shadow: 0 0 12px rgba(0,0,0,.8); } .post-stats { display: flex; gap: 16px; font-size: var(--fs-md); padding: 8px 2px 2px; border-top: 1px solid var(--border-soft); } .post-stat { display: inline-flex; align-items: center; gap: 5px; } .post-stat-glyph { opacity: 0.75; } /* ── Economic calendar ── */ /* ── Inflation stickiness meter (sticky vs flexible core CPI) ── A fixed −2%…8% scale: zones shade the sticky thresholds (≤3% target-era, 3–4.5% elevated, above that hot); the two pins are the published series. */ .stick-meter { position: relative; height: 96px; margin: 10px 8px 2px; } .stick-track { position: absolute; left: 0; right: 0; top: 42px; height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--pos-zone) 0%, var(--pos-zone) 50%, var(--warn-zone) 50%, var(--warn-zone) 65%, var(--neg-zone) 65%, var(--neg-zone) 100%); } .stick-tick { position: absolute; top: 38px; height: 18px; width: 2px; background: var(--tick-line); transform: translateX(-50%); } .stick-tick-label { position: absolute; top: 76px; transform: translateX(-50%); font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; } .stick-pin { position: absolute; transform: translateX(-50%); text-align: center; font-size: var(--fs-sm); white-space: nowrap; line-height: 1.3; } .stick-pin-val { font-weight: 600; } .stick-pin.sticky { top: 14px; } .stick-pin.sticky::after { content: ""; display: block; width: 0; margin: 1px auto 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid currentColor; } .stick-pin.flex { top: 54px; } .stick-pin.flex::before { content: ""; display: block; width: 0; margin: 0 auto 1px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 7px solid currentColor; } .cal-filters { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; } .cal-filter { border: 1px solid var(--border-soft); background: none; color: var(--muted); border-radius: 999px; padding: 4px 12px; font-size: var(--fs-md); cursor: pointer; font-family: inherit; transition: border-color .15s ease, color .15s ease, opacity .15s ease; } .cal-filter.on { border-color: var(--accent); color: var(--text); } .cal-filter:not(.on) { opacity: 0.55; } /* The chips double as the legend: each dot matches its events' left-border color below (central banks = the accent/watermelon highlight). */ .cal-filter::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; } .cal-filter[data-cat="central-bank"]::before { background: var(--accent); } .cal-filter[data-cat="release"]::before { background: var(--chart-blue); } .cal-filter[data-cat="earnings"]::before { background: var(--pos-deep); } .cal-month { font-family: var(--font-display); font-size: var(--fs-md); color: var(--muted); text-transform: uppercase; letter-spacing: var(--track-label); margin: 22px 0 10px; } .cal-month:first-child { margin-top: 4px; } .cal-day { display: flex; gap: 14px; padding: 10px 0; border-top: 1px solid var(--border-soft); } .cal-date { width: 80px; flex-shrink: 0; text-align: center; padding-top: 2px; } .cal-dow { font-size: var(--fs-sm); color: var(--muted); text-transform: uppercase; letter-spacing: var(--track-label); } .cal-dom { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; line-height: 1.15; } .cal-day.today .cal-date { background: var(--accent-soft); border-radius: 10px; padding: 4px 0 6px; } .cal-day.today .cal-dow, .cal-day.today .cal-dom { color: var(--accent); } .cal-events { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; } .cal-event { display: flex; align-items: center; gap: 10px; background: var(--panel-raised); border: 1px solid var(--border-soft); border-left-width: 3px; border-radius: 10px; padding: 8px 12px; } .cal-event.cat-central-bank { border-left-color: var(--accent); } .cal-event.cat-release { border-left-color: var(--chart-blue); } .cal-event.cat-earnings { border-left-color: var(--pos-deep); } .cal-icon { font-size: var(--fs-lg); } .cal-title { font-weight: 600; font-size: var(--fs-base); } .cal-detail { font-size: var(--fs-md); } /* Street-odds chip: Polymarket's read on the event, one line under the detail (hover for the full distribution) */ .cal-odds { font-size: var(--fs-sm); color: var(--accent); margin-top: 2px; } /* Slugged rows are links to their /event/{slug} scenario profile */ a.cal-event { color: inherit; text-decoration: none; transition: border-color .15s ease; } a.cal-event:hover { border-color: var(--accent); } /* The tracker chip follows the auto-margin scenarios chip, so it must not claim the free space itself (two auto margins would split it). */ .cal-go.cal-tracker { margin-left: 10px; } .cal-go { margin-left: auto; font-size: var(--fs-sm); white-space: nowrap; opacity: 0; transition: opacity .15s ease; } a.cal-event:hover .cal-go { opacity: 1; } @media (hover: none) { .cal-go { opacity: 0.7; } } /* Busy earnings days: reports past the first few collapse behind a toggle row. The expanded list uses display:contents so its rows are laid out by .cal-events itself (same 8px gap), with an explicit hidden fallback. */ button.cal-more { cursor: pointer; font: inherit; color: var(--muted); text-align: left; border-left-color: var(--pos-deep); } button.cal-more:hover { border-color: var(--accent); } .cal-more-list { display: contents; } .cal-more-list[hidden] { display: none; } /* ── Event scenario profile (/event/{slug}) ── */ /* Stacked scenario blocks, not a table: name + odds on the header line, the defining outcome as the lead paragraph, the two impact reads in a labeled two-up grid (stacked on phones), a rule between scenarios. Line lengths stay capped for readability instead of running the full panel width. */ /* Polymarket odds panel: one group per matched market, rows share the scenario table's odds-bar look */ .ev-street-group { padding: 14px 0 12px; border-top: 1px solid var(--border-soft); } .ev-street-group:first-child { border-top: none; padding-top: 4px; } .ev-street-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; } .ev-street-head .panel-link { margin-left: auto; } .ev-street-meta { font-size: var(--fs-xs); } .ev-street-row { display: flex; align-items: center; gap: 12px; padding: 3px 0; } .ev-street-label { min-width: 150px; font-size: var(--fs-md); } .ev-street-row .ev-prob-bar { width: 180px; } @media (max-width: 640px) { .ev-street-row .ev-prob-bar { width: 90px; } } .ev-scenario { padding: 16px 0 18px; border-top: 1px solid var(--border-soft); } .ev-scenario:first-child { border-top: none; padding-top: 6px; } .ev-scenario-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .ev-scenario-name { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; } .ev-prob { display: inline-flex; align-items: center; gap: 10px; } .ev-prob-num { font-weight: 700; font-family: var(--font-display); font-size: var(--fs-lg); color: var(--accent); } .ev-prob-bar { display: inline-block; width: 120px; height: 5px; border-radius: 3px; background: var(--border-soft); } .ev-prob-fill { display: block; height: 100%; border-radius: 3px; background: var(--accent); } .ev-what { margin: 8px 0 12px; max-width: 78ch; } .ev-impacts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; max-width: 1000px; } @media (max-width: 760px) { .ev-impacts { grid-template-columns: 1fr; } } .ev-impact-label { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: var(--track-label); margin-bottom: 3px; } .ev-impact-text { font-size: var(--fs-base); line-height: 1.55; } /* Calendar chips shared with the home Today row */ .week-chip { display: inline-flex; align-items: center; font-size: var(--fs-md); padding: 3px 10px; border: 1px solid var(--border-soft); border-left-width: 3px; border-radius: 999px; background: var(--panel-raised); white-space: nowrap; } .week-chip.cat-central-bank { border-left-color: var(--accent); } .week-chip.cat-release { border-left-color: var(--chart-blue); } .week-chip.cat-earnings { border-left-color: var(--pos-deep); } /* Slugged chips are links to their /event/{slug} scenario profile */ a.week-chip { color: inherit; text-decoration: none; transition: border-color .15s ease; } a.week-chip:hover { border-color: var(--accent); } /* ── Sales CRM ── */ .crm-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; } .crm-tile { background: var(--panel); padding: 14px 16px; } .crm-tile-label { font-size: var(--fs-md); text-transform: uppercase; letter-spacing: var(--track-label); } .crm-tile-value { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 700; margin-top: 4px; } .crm-form { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .crm-form label { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-md); color: var(--muted); min-width: 0; } .crm-form input:focus, .crm-form select:focus { outline: none; border-color: var(--accent); } .crm-form .crm-notes { grid-column: 1 / -1; } .crm-form-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; } /* The one brand-gradient CTA on the page, sized to sit in the panel header beside the quieter export button. */ #crm-add { display: inline-flex; align-items: center; gap: 6px; align-self: center; border: none; border-radius: 999px; background: var(--gradient); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); letter-spacing: 0.02em; padding: 7px 16px; cursor: pointer; box-shadow: 0 3px 10px rgba(var(--accent-glow), 0.28); transition: box-shadow 0.15s ease, transform 0.15s ease, filter 0.15s ease; } #crm-add:hover { filter: brightness(1.08); box-shadow: 0 5px 16px rgba(var(--accent-glow), 0.4); transform: translateY(-1px); } #crm-add:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(var(--accent-glow), 0.3); } #crm-add .crm-add-plus { font-size: var(--fs-md); font-weight: 500; line-height: 1; } .crm-form-actions button { border: none; border-radius: 10px; background: var(--button-bg); color: #fff; font-weight: 600; padding: 9px 16px; cursor: pointer; font-family: inherit; } .crm-form-actions button:hover { background: var(--button-bg-hover); } .crm-form-actions button:disabled { opacity: 0.5; cursor: default; } #crm-cancel { background: var(--panel-raised); } .crm-show-closed { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-md); cursor: pointer; } /* Needs-attention pills above the pipeline; each filters the table. */ .crm-attention { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; } .crm-pill { font-family: inherit; cursor: pointer; } .crm-pill:hover { color: var(--text); border-color: var(--accent-soft); } .crm-pill.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); } .crm-flag { font-size: var(--fs-xs); white-space: nowrap; color: var(--muted); } .crm-row-stale .crm-company strong { color: var(--muted); } .crm-close-cell { white-space: nowrap; } .crm-close-cell .crm-flag { margin-left: 5px; } .crm-note-count { font-size: var(--fs-sm); opacity: 0.75; } .crm-table-wrap { overflow-x: auto; } .crm-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); } .crm-table th { text-align: left; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border); } .crm-table td { padding: 9px 10px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; } .crm-sub { font-size: var(--fs-md); } .crm-company-line { display: flex; align-items: center; gap: 7px; } .crm-ticker { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xs); letter-spacing: var(--track-label); padding: 1px 6px; border-radius: 5px; background: var(--panel-raised); border: 1px solid var(--border-soft); color: var(--muted); text-decoration: none; white-space: nowrap; } a.crm-ticker-linked { color: var(--accent); border-color: var(--accent-soft); } a.crm-ticker-linked:hover { background: var(--accent-soft); } .crm-ticker-private { text-transform: uppercase; } /* Vendor legal names run long ("… Inc. Common Stock"). min-width:0 lets the 1fr track shrink below its content — without it one long note widens its column and shoves the rest of the form sideways. Full string in the title. */ .crm-field-note { font-size: var(--fs-sm); min-height: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Portfolio suggestions — drawn in the page, so they stay anchored to the input anywhere the app is embedded (see crm.js). */ .crm-ticker-box { position: relative; display: block; } .crm-ticker-box input { width: 100%; } .crm-suggest { position: absolute; top: calc(100% + 3px); left: 0; right: 0; z-index: 40; max-height: 216px; overflow-y: auto; padding: 3px; background: var(--panel-raised); border: 1px solid var(--border); border-radius: 9px; box-shadow: 0 12px 28px var(--shadow-pop); } .crm-suggest[hidden] { display: none; } .crm-suggest-row { display: flex; align-items: baseline; gap: 8px; padding: 5px 8px; border-radius: 6px; cursor: pointer; font-size: var(--fs-md); } .crm-suggest-row:hover, .crm-suggest-row.active { background: var(--accent-soft); } .crm-suggest-ticker { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--text); } .crm-suggest-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); } .crm-form input:disabled { opacity: 0.45; cursor: not-allowed; } .crm-value { font-variant-numeric: tabular-nums; white-space: nowrap; } .crm-stage-select, .crm-owner-select { background: var(--panel-raised); color: var(--text); border: 1px solid var(--border-soft); border-radius: 999px; padding: 4px 8px; font-family: inherit; font-size: var(--fs-md); cursor: pointer; } .crm-owner-select { max-width: 150px; } .crm-row.stage-won .crm-stage-select { border-color: var(--pos-deep); color: var(--pos-deep); } .crm-row.stage-lost { opacity: 0.55; } .crm-row.stage-proposal .crm-stage-select { border-color: var(--accent); } .crm-notes-cell { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-md); } .crm-actions { white-space: nowrap; text-align: right; } .crm-empty { padding: 18px 4px; font-size: var(--fs-base); } .crm-icon-btn { background: none; border: none; color: var(--muted); cursor: pointer; font-size: var(--fs-md); padding: 4px 6px; border-radius: 6px; } .crm-icon-btn:hover { background: var(--accent-soft); color: var(--accent); } .crm-chart { margin: 4px 0 14px; } .crm-forecast td:not(:first-child), .crm-forecast th:not(:first-child) { text-align: right; } @media (max-width: 900px) { .crm-form { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .crm-form { grid-template-columns: 1fr; } } /* ── Growth opportunity tracker ── */ .opp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; } .opp-card { background: var(--panel-raised); border-left-width: 3px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } .opp-card.grade-A { border-left-color: var(--pos-deep); } .opp-card.grade-B { border-left-color: var(--chart-blue); } .opp-card.grade-C { border-left-color: var(--accent-2); } .opp-card.grade-D { border-left-color: var(--border); } .opp-card.passed { opacity: 0.5; } .opp-head { display: flex; align-items: flex-start; gap: 10px; } .opp-grade { flex: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-base); background: var(--panel); border: 1px solid var(--border-soft); } .grade-A .opp-grade { color: var(--pos-deep); border-color: var(--pos-deep); } .grade-B .opp-grade { color: var(--chart-blue); border-color: var(--chart-blue); } .grade-C .opp-grade { color: var(--accent-2); border-color: var(--accent-2); } .opp-title { min-width: 0; flex: 1; } .opp-name { font-weight: 700; font-size: var(--fs-base); line-height: 1.35; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .opp-new { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--track-label); color: var(--accent); border: 1px solid var(--accent); border-radius: 5px; padding: 1px 5px; } .opp-meta { font-size: var(--fs-md); margin-top: 2px; } .opp-deadline { flex: none; font-size: var(--fs-sm); color: var(--muted); border: 1px solid var(--border-soft); border-radius: 999px; padding: 3px 9px; white-space: nowrap; } .opp-deadline.urgent { color: var(--accent-2); border-color: var(--accent-2); } .opp-deadline.overdue { color: var(--accent); border-color: var(--accent); } .opp-status { flex: none; background: var(--panel); color: var(--text); border: 1px solid var(--border-soft); border-radius: 999px; padding: 4px 8px; font-family: inherit; font-size: var(--fs-sm); cursor: pointer; } .opp-status.status-new { border-color: var(--accent); color: var(--accent); } .opp-status.status-booked { border-color: var(--pos-deep); color: var(--pos-deep); } .opp-fit { margin: 0; font-size: var(--fs-base); line-height: 1.5; } .opp-audience, .opp-how { margin: 0; font-size: var(--fs-md); line-height: 1.45; } .opp-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--border-soft); } .opp-foot .crm-icon-btn { margin-left: auto; } .opp-source { font-size: var(--fs-md); } .opp-count { margin-left: auto; font-size: var(--fs-md); } .promotion-notes-summary { cursor: pointer; font-weight: 600; font-size: var(--fs-base); } /* ── Growth prospect radar ── */ .radar-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; } /* Score chips: LOW visibility = hot prospect, so the "bad" color marks the OPPORTUNITY — deliberate inversion of the usual pos/neg reading */ .radar-score, .radar-acnu { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; } .radar-score.hot { color: var(--neg-text); background: var(--neg-soft); } .radar-score.warm { color: var(--warn); background: var(--warn-soft); } .radar-score.cool { color: var(--muted); background: var(--panel-raised); } .radar-acnu.easy { color: var(--pos); background: var(--pos-soft); } .radar-acnu.mid { color: var(--warn); background: var(--warn-soft); } .radar-acnu.hard { color: var(--muted); background: var(--panel-raised); } .radar-name strong { font-weight: 600; } /* Brand names link out to their platform profile page (ideaevolver.com); they keep each spot's own chip/label colors and only reveal themselves as links on hover. */ a.brand-link { color: inherit; text-decoration: none; } a.brand-link:hover { text-decoration: underline; } a.brand-link.rail-name:hover, .radar-name a.brand-link:hover, .dossier-brand-label a.brand-link:hover { color: var(--accent); text-decoration: none; } .radar-client-badge { margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-sm); color: var(--accent); background: var(--accent-soft); } .radar-passed td { opacity: 0.55; } .radar-promote { display: inline-flex; align-items: center; gap: 6px; } .radar-promote-btn { padding: 4px 12px; font-size: var(--fs-sm); border-radius: 999px; } .radar-lead { color: var(--accent); text-decoration: none; font-weight: 600; } .radar-lead:hover { text-decoration: underline; } .radar-company { display: inline-flex; align-items: center; gap: 7px; } .radar-company-sel { max-width: 150px; } .radar-mfr { font-size: var(--fs-sm); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; } /* Company-opportunity roll-up cards */ .radar-opps { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); margin-top: 12px; } .radar-opp-card { background: var(--panel-raised); border-radius: 12px; border: 1px solid var(--border-soft); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } .radar-opp-head { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; } .radar-opp-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .radar-opp-name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); color: var(--text); text-decoration: none; overflow-wrap: anywhere; } a.radar-opp-name:hover { color: var(--accent); } .radar-opp-gap { font-family: var(--font-display); font-weight: 700; color: var(--neg-text); white-space: nowrap; } .radar-opp-brands { display: flex; flex-wrap: wrap; gap: 6px; } .radar-opp-acnu { font-size: var(--fs-sm); } .radar-opp-money { display: flex; flex-wrap: wrap; gap: 6px; } .radar-fin-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; } .radar-fin-chip.good { color: var(--pos); background: var(--pos-soft); } .radar-fin-chip.bad { color: var(--neg-text); background: var(--neg-soft); } .radar-fin-chip.neutral { color: var(--muted); background: var(--panel); border: 1px solid var(--border-soft); } .radar-opp-foot { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin-top: auto; font-size: var(--fs-sm); } /* ── Call Sheet view ── */ .radar-tabs { display: inline-flex; gap: 8px; } .radar-tab { padding: 5px 14px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; font-family: inherit; cursor: pointer; background: transparent; color: var(--muted); border: 1px solid var(--border-soft); } .radar-tab:hover { color: var(--text); border-color: var(--accent-soft); } .radar-tab.active { background: var(--accent-soft); color: var(--accent); border-color: transparent; } /* The funnel strip: one connected flow */ .radar-funnel { display: flex; align-items: stretch; gap: 0; padding: 18px 22px; overflow-x: auto; } .radar-funnel[hidden] { display: none; } .funnel-stage { flex: 1; min-width: 120px; display: flex; flex-direction: column; gap: 3px; padding-left: 20px; border-left: 1px solid var(--border-faint); } .funnel-stage:first-child { border-left: none; padding-left: 0; } .funnel-label { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--track-label); } .funnel-value { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 700; } .funnel-sub { font-size: var(--fs-xs); } .funnel-stage.won .funnel-label, .funnel-stage.won .funnel-value { color: var(--pos); } .funnel-arrow { display: flex; align-items: center; gap: 6px; padding: 0 14px; color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; } .funnel-arrow.warm { color: var(--warn); } .funnel-arrow.good { color: var(--pos); } /* Two columns: the call queue + the movement rail */ .radar-callsheet { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: start; } @media (max-width: 1100px) { .radar-callsheet { grid-template-columns: minmax(0, 1fr); } } .radar-calls { display: flex; flex-direction: column; gap: 16px; } .radar-calls-head { display: flex; align-items: baseline; gap: 12px; } .radar-calls-head h2 { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; } #call-cards { display: flex; flex-direction: column; gap: 28px; } /* The size ladder: one section per rung, small and mid first */ .call-tier-strip { display: flex; flex-wrap: wrap; gap: 6px; } .call-tier { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 16px; } .call-tier-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid var(--border-faint); padding-bottom: 6px; } .call-tier-label { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; } .call-tier-giant .call-tier-label { color: var(--muted); } .call-tier-cap { font-size: var(--fs-sm); } .call-tier-count { margin-left: auto; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; } .call-tier-note, .call-tier-empty { font-size: var(--fs-sm); line-height: 1.45; margin: 0; } .call-tier-cards { display: flex; flex-direction: column; gap: 16px; } .call-tier-actions { display: flex; align-items: center; gap: 12px; } .call-tier-more { background: transparent; border: 1px solid var(--border-soft); border-radius: 999px; color: var(--text); font-family: inherit; font-size: var(--fs-sm); font-weight: 600; padding: 6px 14px; cursor: pointer; } .call-tier-more:hover { border-color: var(--accent); color: var(--accent); } .call-tier-fold { background: transparent; border: none; color: var(--muted); font-family: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; padding: 4px; } .call-tier-fold:hover { color: var(--text); } .rail-row-link { cursor: pointer; } .rail-row-link:hover .rail-name { color: var(--accent); } /* Dossier cards: a pitch, not a row */ .dossier { background: var(--panel); border: 1px solid var(--border-soft); border-left: 3px solid var(--accent); border-radius: var(--r-card); padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; } .dossier-untagged { border-left-color: var(--warn); } .dossier-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .dossier-name { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; color: var(--text); text-decoration: none; } a.dossier-name:hover { color: var(--accent); } .dossier-cap { font-size: var(--fs-sm); } .dossier-gap { margin-left: auto; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; color: var(--neg-text); white-space: nowrap; } .dossier-brands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } @media (max-width: 760px) { .dossier-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .dossier-brand { background: var(--panel-raised); border-radius: var(--r-tile); padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; } .dossier-brand-label { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--track-label); display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dossier-acnu { background: var(--pos-soft); color: var(--pos); border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 700; letter-spacing: 0; } .dossier-bar-row { display: flex; align-items: center; gap: 8px; } .dossier-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--muted-soft); overflow: hidden; } .dossier-bar-fill { height: 6px; border-radius: 999px; } .dossier-bar-fill.hot, .dossier-bar-fill.warm { background: var(--neg); } .dossier-bar-fill.cool { background: var(--warn); } .dossier-bar-score { font-weight: 700; font-size: var(--fs-sm); } .dossier-bar-score.hot, .dossier-bar-score.warm { color: var(--neg-text); } .dossier-bar-score.cool { color: var(--warn); } .dossier-more { font-size: var(--fs-sm); } .dossier-angle { font-size: var(--fs-md); line-height: 1.5; margin: 0; } .dossier-foot { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--border-faint); padding-top: 14px; flex-wrap: wrap; } .dossier-pass { margin-left: auto; background: transparent; border: none; color: var(--muted); font-family: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; padding: 4px; } .dossier-pass:hover { color: var(--neg-text); } .dossier-tag-btn { font-size: var(--fs-sm); } /* The one gradient CTA per card (the #crm-add treatment) */ .radar-cta { display: inline-flex; align-items: center; border: none; border-radius: 999px; background: var(--gradient); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); padding: 8px 20px; cursor: pointer; box-shadow: 0 3px 10px rgba(var(--accent-glow), 0.28); transition: box-shadow 0.15s ease, transform 0.15s ease, filter 0.15s ease; } .radar-cta:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 5px 16px rgba(var(--accent-glow), 0.4); transform: translateY(-1px); } /* The movement rail */ .radar-rail { display: flex; flex-direction: column; gap: 16px; } .radar-rail-panel { display: flex; flex-direction: column; gap: 10px; } .rail-row { display: flex; align-items: baseline; gap: 8px; background: var(--panel-raised); border-radius: var(--r-tile); padding: 9px 14px; font-size: var(--fs-sm); margin-bottom: 8px; } .rail-name { font-weight: 700; white-space: nowrap; } .rail-sub { font-size: var(--fs-xs); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .rail-delta { margin-left: auto; font-weight: 700; } .rail-delta.down { color: var(--neg-text); } .rail-delta.up { color: var(--pos); } .rail-note { font-size: var(--fs-xs); line-height: 1.45; margin: 0; } .rail-cov-row { display: flex; align-items: center; gap: 10px; } .rail-cov-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--muted-soft); overflow: hidden; } .rail-cov-fill { height: 8px; border-radius: 999px; background: var(--gradient); } #promotion-notes { margin-top: 12px; } /* ── Users admin — the role-preset invite flow + access roster ── */ .users-count-chip { margin-left: auto; } .users-form-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; } .users-form-head h2 { margin: 0; font-size: var(--fs-base); } .users-form-head .muted { font-size: var(--fs-xs); } .users-form { display: flex; flex-direction: column; gap: 18px; } .users-section { display: flex; flex-direction: column; } .users-label { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .users-label-row { display: flex; align-items: baseline; gap: 10px; } .users-label-row .muted { font-size: var(--fs-xs); } /* Who: search + person-card matches */ .users-pick-row { display: flex; gap: 12px; align-items: stretch; } .users-pick-row input[type="search"] { flex: 0 0 320px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--r-ctl); background: var(--bg); color: var(--text); font: inherit; } .users-pick-row input[type="search"]:focus { outline: none; border-color: var(--accent); } .users-roster-grid { flex: 1; display: grid; align-items: stretch; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .users-roster-hint { align-self: center; font-size: var(--fs-sm); } .users-suggest { display: flex; align-items: center; gap: 10px; text-align: left; min-width: 0; background: var(--panel-raised); border: 1px solid var(--border-faint); border-radius: var(--r-ctl); padding: 8px 12px; color: var(--text); font-family: inherit; font-size: var(--fs-sm); cursor: pointer; transition: border-color 0.15s; } .users-suggest:hover:not(:disabled) { border-color: var(--accent); } .users-suggest:disabled { opacity: 0.5; cursor: default; } .users-suggest.selected { border-color: var(--accent); } .users-suggest-who { display: flex; flex-direction: column; min-width: 0; } .users-suggest-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .users-suggest-title { font-size: var(--fs-2xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .users-suggest-state { margin-left: auto; font-size: var(--fs-2xs); font-weight: 600; color: var(--muted); white-space: nowrap; } .users-suggest-state.on { color: var(--accent); } .users-avatar { border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex: 0 0 auto; } .users-avatar-owner { width: 34px; height: 34px; background: var(--gradient); color: #fff; } .users-svg { display: inline-flex; } .users-edit-chip[hidden], .users-count-chip[hidden] { display: none; } .users-edit-chip { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; background: var(--accent-soft); border: 1px solid var(--border-soft); border-radius: var(--r-pill); padding: 5px 14px 5px 8px; font-size: var(--fs-xs); } /* Role preset cards */ .users-role-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; } .users-role-card { display: flex; flex-direction: column; gap: 8px; text-align: left; background: var(--panel-raised); border: 1px solid var(--border-soft); border-radius: var(--r-tile); padding: 14px 16px; color: var(--text); font-family: inherit; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s; } .users-role-card:hover { transform: translateY(-1px); } .users-role-card.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .users-role-head { display: flex; align-items: center; gap: 10px; } .users-role-tile { width: 32px; height: 32px; border-radius: var(--r-ctl); display: inline-flex; align-items: center; justify-content: center; background: var(--muted-soft); color: var(--muted); flex: 0 0 auto; transition: background 0.15s, color 0.15s; } .users-role-card.active .users-role-tile { background: var(--gradient); color: #fff; } .users-role-name { font-family: var(--font-display); font-size: var(--fs-base); font-weight: 600; } .users-custom-chip { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent-2); border: 1px solid; border-radius: 5px; padding: 2px 7px; } .users-role-desc { font-size: var(--fs-xs); line-height: 1.45; } .users-role-meta { font-size: var(--fs-2xs); font-weight: 600; color: var(--muted); } /* Page grants */ .users-pages { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .users-page-group { display: flex; flex-direction: column; gap: 7px; background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--r-tile); padding: 12px; } .users-group-head { display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); margin-bottom: 2px; } .users-count-pill { font-size: 11px; font-weight: 700; border-radius: var(--r-pill); padding: 1px 8px; background: var(--muted-soft); color: var(--muted); } .users-count-pill.on { background: var(--accent-soft); color: var(--accent-2); } .users-group-all { margin-left: auto; background: none; border: 1px solid var(--border-soft); color: var(--muted); border-radius: var(--r-pill); font-size: var(--fs-xs); padding: 1px 9px; cursor: pointer; font-family: inherit; } .users-group-all:hover { border-color: var(--accent); color: var(--accent); } .users-page-check { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--muted); cursor: pointer; transition: color 0.12s; } .users-page-check:hover, .users-page-check:has(input:checked) { color: var(--text); } .users-page-check input { appearance: none; -webkit-appearance: none; margin: 0; width: 17px; height: 17px; border-radius: 5px; flex: 0 0 auto; cursor: pointer; border: 1.5px solid var(--tick-line); background: transparent; position: relative; transition: background 0.12s, border-color 0.12s; } .users-page-check input:checked { background: var(--gradient); border-color: transparent; } .users-page-check input:checked::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 11px 11px no-repeat; } /* The Admin flag leads the General page group (users.js re-parents it) */ .users-admin-check { margin: 0; font-weight: 600; } /* Client access */ .users-clients { display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--border-soft); border-radius: var(--r-tile); padding: 14px 16px; } .users-clients-head { display: flex; align-items: center; gap: 12px; } .users-clients-all-title { font-size: var(--fs-md); font-weight: 700; } .users-clients-all-sub { font-size: var(--fs-2xs); } .users-clients-head > .muted:last-child { margin-left: auto; font-size: var(--fs-xs); } .users-switch { appearance: none; -webkit-appearance: none; margin: 0; flex: 0 0 auto; width: 40px; height: 22px; border-radius: var(--r-pill); background: var(--muted-soft); border: 1px solid var(--border-soft); position: relative; cursor: pointer; transition: background 0.15s; } .users-switch::after { content: ""; position: absolute; top: 1.5px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: transform 0.15s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .users-switch:checked { background: var(--gradient); border-color: transparent; } .users-switch:checked::after { transform: translateX(18px); } .users-clients-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; max-height: 190px; overflow-y: auto; } .users-client-check { background: var(--panel-raised); border: 1px solid var(--border-faint); border-radius: var(--r-ctl); padding: 9px 12px; } .users-client-ticker { margin-left: 2px; font-size: var(--fs-xs); } .users-clients-off { opacity: 0.5; } /* Footer: the live summary + the gradient CTA */ .users-foot { display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--border-faint); padding-top: 14px; } #users-summary { font-size: var(--fs-sm); } .users-foot-actions { margin-left: auto; display: flex; gap: 10px; } .users-invite-btn { background: var(--gradient); border: none; color: #fff; font-weight: 700; font-size: var(--fs-md); font-family: inherit; border-radius: var(--r-ctl); padding: 10px 24px; cursor: pointer; box-shadow: 0 4px 16px rgba(var(--accent-glow), 0.3); transition: filter 0.12s, transform 0.1s; } .users-invite-btn:hover { filter: brightness(1.08); } .users-invite-btn:active { transform: translateY(1px); } .users-invite-btn:disabled { opacity: 0.6; cursor: default; } .users-ghost-btn { background: none; border: 1px solid var(--border-soft); color: var(--muted); border-radius: var(--r-ctl); font-size: var(--fs-md); font-family: inherit; padding: 9px 18px; cursor: pointer; } .users-ghost-btn:hover { border-color: var(--accent); color: var(--accent); } /* Access roster table */ .users-owner-chip { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--track-label); color: var(--pos-deep); border: 1px solid var(--pos-deep); border-radius: 5px; padding: 1px 6px; margin-left: 7px; } .users-access-table td { vertical-align: middle; } .users-who { display: flex; align-items: center; gap: 11px; } .users-name { font-weight: 700; } .users-owner-row td { background: var(--row-hover); } .users-role-cell { font-size: var(--fs-sm); } .users-custom-note { color: var(--accent-2); font-size: var(--fs-2xs); } .users-cover { display: flex; gap: 2px; margin-bottom: 5px; } .users-cover-seg { height: 9px; border-radius: 3px; background: var(--muted-soft); overflow: hidden; } .users-cover-fill { height: 100%; background: var(--gradient); transition: width 0.3s ease; } .users-cover-label { font-size: var(--fs-2xs); } @media (max-width: 900px) { .users-pick-row { flex-direction: column; } .users-pick-row input[type="search"] { flex: 1; } .users-role-cards, .users-roster-grid { grid-template-columns: 1fr; } } /* Companies pager (partial-universe footer) */ .pager-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 2px; } .pager-btn:hover { color: var(--accent); border-color: var(--accent); } /* Profile preferences */ .profile-settings { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border-soft); } .profile-settings h2 { font-size: var(--fs-base); margin: 0 0 10px; } .profile-settings label { display: block; font-size: var(--fs-md); color: var(--muted); margin-bottom: 6px; } .profile-settings .settings-row { display: flex; align-items: center; gap: 10px; } /* Recommendations tracker page */ .rec-card { margin-bottom: 12px; } .rec-settled { opacity: 0.55; } .rec-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; } .rec-status-select, .rec-owner-select { font-size: var(--fs-md); } .rec-dates { font-size: var(--fs-sm); } .rec-note { margin-top: 8px; } .rec-note-input { width: 100%; box-sizing: border-box; resize: vertical; background: transparent; color: inherit; font: inherit; font-size: var(--fs-md); border: 1px solid var(--border-soft); border-radius: 6px; padding: 6px 9px; } .rec-note-input:focus { outline: none; border-color: var(--accent); } .stale-note { margin: 0 0 10px; } /* Card titles link to the item's profile page — keep the card look */ a.rec-title { color: inherit; text-decoration: none; } a.rec-title:hover { text-decoration: underline; } .rec-due { font-size: var(--fs-sm); } /* Add To Do form */ .todo-title-input { width: auto; flex: 1 1 240px; } .todo-due-label input { margin-left: 6px; background: var(--panel-raised); border: 1px solid var(--border); border-radius: 6px; color: inherit; font: inherit; font-size: var(--fs-md); padding: 5px 8px; } /* Recommendation / To Do profile page */ .rec-profile-title { margin: 0 0 4px; } .rec-profile-title-input { font-size: var(--fs-xl); font-weight: 600; margin-bottom: 4px; } .rec-profile-meta { margin: 0 0 12px; font-size: var(--fs-sm); } .rec-profile-fields { display: flex; gap: 12px 18px; flex-wrap: wrap; margin: 12px 0; } .rec-field { display: flex; flex-direction: column; gap: 4px; } .rec-field-label { font-size: var(--fs-sm); } .rec-field input[type="date"] { background: var(--panel-raised); border: 1px solid var(--border); border-radius: 6px; color: inherit; font: inherit; font-size: var(--fs-md); padding: 5px 8px; } .rec-profile-actions { margin-top: 14px; } /* Editable priority chip (Recommendations page) + profile rec list */ .rec-priority-select { appearance: none; -webkit-appearance: none; border: 1px solid transparent; cursor: pointer; font: inherit; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-label); } .rec-priority-select:hover, .rec-priority-select:focus { border-color: var(--accent); outline: none; } .profile-recs, .api-usage-list { list-style: none; margin: 0; padding: 0; } .profile-recs li, .api-usage-list li { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; font-size: var(--fs-base); flex-wrap: wrap; } /* /api-usage page (owner only) */ .api-usage-value { font-variant-numeric: tabular-nums; } .api-usage-warn .api-usage-value { color: var(--warn); } .api-usage-asof { margin: 10px 0 0; font-size: var(--fs-sm); } .api-usage-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; } .api-usage-table th, .api-usage-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; } .api-usage-table th { font-weight: 600; text-transform: uppercase; font-size: var(--fs-xs); letter-spacing: 0.04em; color: var(--muted); } .api-usage-table .num { text-align: right; } .api-usage-group { cursor: pointer; font-weight: 600; } .api-usage-group:hover td { background: var(--surface-2, rgba(255,255,255,0.03)); } .api-usage-surface td:first-child { padding-left: 24px; font-weight: 400; } .api-usage-total td { font-weight: 700; border-top: 2px solid var(--border); border-bottom: 0; } /* Profile pipeline-lead stage chips */ .stage-badge { text-transform: uppercase; font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--track-label); } .stage-badge-lead { background: var(--muted-soft); color: var(--muted); } .stage-badge-qualified { background: var(--chart-blue-soft); color: var(--chart-blue); } .stage-badge-proposal { background: var(--warn-soft); color: var(--warn); } .stage-badge-won { background: var(--pos-soft); color: var(--pos-deep); } .stage-badge-lost { background: var(--muted-soft); color: var(--muted); } /* ── /fiscal page: ranked cash-flow bars + two-column category lists ── */ .flow-track::before { display: none; } /* one-sided bars need no center line */ .flow-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; } @media (max-width: 900px) { .flow-cols { grid-template-columns: 1fr; } } /* Debt Math engine board: the two switches the regime verdict reads, each visibly ON (feeding the debt ratio) or OFF, above the ladder that maps engine count → regime. */ .fis-engines { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 6px; } @media (max-width: 760px) { .fis-engines { grid-template-columns: 1fr; } } .fis-engine { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--border-soft); border-radius: 12px; padding: 12px 14px; background: var(--panel-raised); } .fis-engine-state { flex: none; font-weight: 800; font-size: var(--fs-xs); letter-spacing: var(--track-label); padding: 3px 9px; border-radius: 999px; margin-top: 2px; } .fis-engine.on { border-color: var(--neg-soft); } .fis-engine.on .fis-engine-state { background: var(--neg-soft); color: var(--neg-text); } .fis-engine.off .fis-engine-state { background: var(--pos-soft); color: var(--pos-deep); } .fis-engine-name { font-weight: 700; font-size: var(--fs-base); } .fis-engine-read { font-size: var(--fs-sm); line-height: 1.5; margin-top: 2px; } .fis-ladder { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 14px; font-size: var(--fs-sm); } .fis-ladder-step { border: 1px solid var(--border-soft); border-radius: 999px; padding: 3px 12px; color: var(--muted); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--track-label); } .fis-ladder-step.active { font-weight: 800; } .fis-drift { margin: 6px 0 14px; } .fis-drift .contrib-row { grid-template-columns: 220px 1fr 110px; } @media (max-width: 640px) { .fis-drift .contrib-row { grid-template-columns: 130px 1fr 84px; } } /* Hard-money paired charts: gold and bitcoin side by side, stacked on narrow screens */ .hm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; } @media (max-width: 900px) { .hm-grid { grid-template-columns: 1fr; } } .hm-chart { height: 300px; } /* Distance to Dusk: the interest-share line against the FY1991 record */ .fis-dusk-chart { height: 280px; margin-top: 6px; } #fis-clock-what { margin-top: 14px; } .fis-dusk-what { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; } .fis-dusk-card { background: var(--panel-raised); border: 1px solid var(--border-soft); border-radius: 12px; padding: 12px 14px; } .fis-dusk-card-title { font-weight: 700; font-size: var(--fs-base); margin-bottom: 4px; } .fis-dusk-card-body { font-size: var(--fs-sm); line-height: 1.55; } /* Carry pair cards: the live print above the scores */ .carry-price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .carry-price-value { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: 0.01em; } .carry-price-sub { font-size: var(--fs-md); } /* ── /schedule page (owner only): sweep-time editor rows ── */ .schedule-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; } .schedule-row input[type="time"], .schedule-zone { background: var(--panel-raised); color: var(--text); border: 1px solid var(--border-soft); border-radius: 6px; padding: 6px 8px; font-size: var(--fs-base); } .schedule-remove { background: none; border: none; cursor: pointer; color: inherit; opacity: 0.55; font-size: var(--fs-base); padding: 4px 6px; } .schedule-remove:hover { opacity: 1; color: var(--danger); } .schedule-next-list { margin: 4px 0 8px; padding-left: 20px; } .schedule-next-list li { margin: 3px 0; } /* Three visually distinct actions: primary save (gradient), secondary add (outline), ghost reset (text) — grouped apart so a mis-click can't land on the wrong one. */ .schedule-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin: 18px 0 14px; } .schedule-actions-right { display: flex; align-items: center; gap: 18px; } .btn-primary { background: var(--gradient); color: #fff; border: none; border-radius: 8px; padding: 10px 22px; font-weight: 700; font-size: var(--fs-base); cursor: pointer; } .btn-primary:hover { filter: brightness(1.12); } .btn-primary:disabled { opacity: 0.55; cursor: default; } .btn-secondary { background: none; border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 9px 16px; font-size: var(--fs-base); cursor: pointer; } .btn-secondary:hover { border-color: var(--accent); color: var(--accent); } .btn-secondary:disabled { opacity: 0.55; cursor: default; } .btn-ghost { background: none; border: none; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; font-size: var(--fs-base); cursor: pointer; padding: 8px 4px; } .btn-ghost:hover { color: var(--accent); } .btn-add { background: var(--button-bg); color: #fff; border: none; border-radius: 8px; padding: 10px 18px; font-weight: 700; font-size: var(--fs-base); cursor: pointer; box-shadow: 0 0 0 1px var(--border), 0 3px 10px var(--button-glow); } .btn-add:hover { background: var(--button-bg-hover); } /* Active sweep: one row per step, checked off as analyses land */ .sweep-step { display: flex; align-items: baseline; gap: 10px; padding: 5px 2px; font-size: var(--fs-base); } .sweep-step-icon { width: 22px; text-align: center; flex: none; } .sweep-step-pending { opacity: 0.5; } .sweep-step-running .sweep-step-name { color: var(--accent-2); } .sweep-step-failed .sweep-step-name { color: var(--danger); } .sweep-step-detail { font-size: var(--fs-md); } #sweep-current .btn-secondary { margin-top: 12px; } /* Sweep history: one summary row per past run; click to expand the full per-step outcome list */ .sweep-run { padding: 8px 2px; border-bottom: 1px solid var(--border-soft); } .sweep-run:last-child { border-bottom: none; } .sweep-run-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: var(--fs-base); cursor: pointer; border-radius: 6px; padding: 4px 6px; } .sweep-run-head:hover { background: var(--panel-raised); } .sweep-run-chevron { display: inline-block; transition: transform 0.15s; color: var(--muted); } .sweep-run.open .sweep-run-chevron { transform: rotate(90deg); } .sweep-run-steps { display: none; padding: 4px 0 6px 26px; } .sweep-run.open .sweep-run-steps { display: block; } /* ── Public welcome page (/) — the only public page besides /login ── */ .welcome-body { overflow: hidden; } .welcome-main { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; } /* Slow-drifting brand-color orbs behind everything */ .welcome-aurora { position: absolute; inset: 0; overflow: hidden; filter: blur(90px); opacity: 0.55; } .welcome-orb { position: absolute; border-radius: 50%; } .welcome-orb-1 { width: 44vw; height: 44vw; left: -8vw; top: -12vw; background: #ff3c6d; animation: welcome-drift-1 26s ease-in-out infinite; } .welcome-orb-2 { width: 38vw; height: 38vw; right: -10vw; top: 18vh; background: #0561b7; animation: welcome-drift-2 32s ease-in-out infinite; } .welcome-orb-3 { width: 30vw; height: 30vw; left: 28vw; bottom: -14vw; background: #ff8f6e; animation: welcome-drift-3 24s ease-in-out infinite; } @keyframes welcome-drift-1 { 50% { transform: translate(10vw, 12vh) scale(1.15); } } @keyframes welcome-drift-2 { 50% { transform: translate(-12vw, -8vh) scale(0.9); } } @keyframes welcome-drift-3 { 50% { transform: translate(-8vw, -10vh) scale(1.2); } } /* A loose constellation of twinkling sparks */ .welcome-sparks { position: absolute; inset: 0; color: var(--accent-2); font-size: var(--fs-md); } .welcome-sparks span { position: absolute; opacity: 0; animation: welcome-twinkle 6s ease-in-out infinite; } .welcome-sparks span:nth-child(1) { left: 12%; top: 22%; animation-delay: 0s; } .welcome-sparks span:nth-child(2) { left: 82%; top: 16%; animation-delay: 1.1s; font-size: var(--fs-2xs); } .welcome-sparks span:nth-child(3) { left: 70%; top: 74%; animation-delay: 2.3s; } .welcome-sparks span:nth-child(4) { left: 20%; top: 78%; animation-delay: 3.1s; font-size: var(--fs-lg); } .welcome-sparks span:nth-child(5) { left: 48%; top: 12%; animation-delay: 4.2s; } .welcome-sparks span:nth-child(6) { left: 90%; top: 52%; animation-delay: 5s; font-size: var(--fs-2xs); } .welcome-sparks span:nth-child(7) { left: 6%; top: 50%; animation-delay: 2.8s; } .welcome-sparks span:nth-child(8) { left: 38%; top: 88%; animation-delay: 1.7s; font-size: var(--fs-xs); } @keyframes welcome-twinkle { 0%, 100% { opacity: 0; transform: scale(0.6) rotate(0deg); } 50% { opacity: 0.9; transform: scale(1.15) rotate(40deg); } } .welcome-card { position: relative; text-align: center; max-width: 560px; } .welcome-logo { height: 84px; width: auto; filter: drop-shadow(0 0 24px rgba(var(--accent-glow), 0.45)); animation: welcome-rise 0.8s ease both; } .welcome-title { font-family: var(--font-display); font-size: 40px; font-weight: 600; margin: 26px 0 10px; letter-spacing: 0.01em; animation: welcome-rise 0.8s ease 0.15s both; } .welcome-name { background: var(--gradient); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: welcome-shimmer 6s ease-in-out infinite; } @keyframes welcome-shimmer { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } } .welcome-tagline { color: var(--muted); font-size: var(--fs-base); margin: 0 0 34px; animation: welcome-rise 0.8s ease 0.3s both; } .welcome-signin { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; padding: 12px 34px; border-radius: 999px; text-decoration: none; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: var(--fs-base); transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, color 0.2s ease, border-color 0.2s ease; animation: welcome-rise 0.8s ease 0.45s both; } .welcome-signin::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gradient); opacity: 0; transition: opacity 0.25s ease; } .welcome-signin:hover { color: #fff; border-color: transparent; transform: translateY(-2px); box-shadow: 0 4px 26px rgba(var(--accent-glow), 0.5); } .welcome-signin:hover::before { opacity: 1; } .welcome-signin:hover .ask-btn-spark { animation: ask-spin 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; } @keyframes welcome-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 640px) { .welcome-title { font-size: 30px; } .welcome-logo { height: 64px; } } @media (prefers-reduced-motion: reduce) { .welcome-orb, .welcome-sparks span, .welcome-name { animation: none; } .welcome-sparks span { opacity: 0.5; } .welcome-logo, .welcome-title, .welcome-tagline, .welcome-signin { animation: none; } .welcome-signin:hover { transform: none; } } /* ── App-wide background sparks (the welcome page's ✦, dialed down so they never compete with data): fixed layer painted under everything — first child of , so all in-flow content renders above it ── */ .app-sparks { position: fixed; inset: 0; pointer-events: none; z-index: -1; /* under panel backgrounds and text — gutters only */ color: var(--accent-2); font-size: var(--fs-sm); /* The right-edge sparks (left: 93–97%) rotate past the viewport edge; never let a fixed layer be the thing that widens the page */ overflow: clip; } .app-sparks span { position: absolute; opacity: 0; animation: app-twinkle 9s ease-in-out infinite; } .app-sparks span:nth-child(1) { left: 4%; top: 18%; animation-delay: 0s; } .app-sparks span:nth-child(2) { left: 93%; top: 12%; animation-delay: 1.3s; font-size: 11px; } .app-sparks span:nth-child(3) { left: 88%; top: 62%; animation-delay: 2.6s; } .app-sparks span:nth-child(4) { left: 7%; top: 74%; animation-delay: 3.8s; font-size: var(--fs-md); } .app-sparks span:nth-child(5) { left: 45%; top: 8%; animation-delay: 5.1s; font-size: 11px; } .app-sparks span:nth-child(6) { left: 97%; top: 38%; animation-delay: 6.4s; } .app-sparks span:nth-child(7) { left: 2%; top: 44%; animation-delay: 7.7s; font-size: var(--fs-2xs); } .app-sparks span:nth-child(8) { left: 60%; top: 92%; animation-delay: 4.4s; } .app-sparks span:nth-child(9) { left: 30%; top: 88%; animation-delay: 1.9s; font-size: var(--fs-2xs); } .app-sparks span:nth-child(10) { left: 74%; top: 26%; animation-delay: 8.5s; font-size: 11px; } /* Background flourish, not foreground: peak far dimmer than the welcome page's sparks */ @keyframes app-twinkle { 0%, 100% { opacity: 0; transform: scale(0.6) rotate(0deg); } 50% { opacity: 0.45; transform: scale(1.1) rotate(40deg); } } @media (prefers-reduced-motion: reduce) { .app-sparks span { animation: none; opacity: 0.25; } } /* ── AudioHub: the topbar narration player (playback survives page navigation; see common.js AudioHub) ── */ .audio-hub { display: inline-flex; align-items: center; gap: 8px; max-width: 300px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 1px solid var(--border-soft); background: var(--panel-raised); margin-right: 10px; } .audio-hub[hidden] { display: none; } .audio-hub-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none; border-radius: 50%; border: none; cursor: pointer; background: var(--accent-soft); color: var(--accent); } .audio-hub-btn:hover { background: var(--accent); color: #fff; } .audio-hub-btn .audio-icon { width: 16px; height: 16px; } /* Autoplay was blocked after a navigation — pulse until tapped */ .audio-hub.blocked .audio-hub-btn { animation: audio-hub-pulse 1.6s ease-in-out infinite; } @keyframes audio-hub-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-glow), 0.5); } 50% { box-shadow: 0 0 0 6px rgba(var(--accent-glow), 0); } } .audio-hub-text { position: relative; display: flex; flex-direction: column; min-width: 0; padding-bottom: 3px; } .audio-hub-title { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; } .audio-hub-time { font-size: var(--fs-xs); color: var(--muted); } .audio-hub-progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; border-radius: 2px; background: var(--gradient); } .audio-hub-close { background: none; border: none; color: var(--muted); cursor: pointer; font-size: var(--fs-sm); padding: 4px; flex: none; } .audio-hub-close:hover { color: var(--accent); } @media (max-width: 900px) { .audio-hub { max-width: 46px; } /* icon-only next to the burger */ .audio-hub-text, .audio-hub-close { display: none; } } @media (prefers-reduced-motion: reduce) { .audio-hub.blocked .audio-hub-btn { animation: none; box-shadow: 0 0 0 2px var(--accent); } } /* ── Light-mode component tuning: the few places tokens can't carry it ── Dark-tuned glows soften, and light-by-design surfaces gain an edge so they don't melt into the white cards behind them. */ :root[data-theme="light"] .google-btn { border: 1px solid rgba(2, 0, 33, 0.18); } :root[data-theme="light"] .welcome-logo { filter: drop-shadow(0 0 24px rgba(234, 88, 12, 0.25)); } :root[data-theme="light"] .welcome-aurora { opacity: 0.30; } /* Aurora orbs follow the Solar Flare gradient stops in light */ :root[data-theme="light"] .welcome-orb-1 { background: #dc2626; } :root[data-theme="light"] .welcome-orb-3 { background: #f59e0b; } :root[data-theme="light"] .val-logo, :root[data-theme="light"] .company-logo { border: 1px solid rgba(2, 0, 33, 0.10); } /* ── Team pages (/team + /team/{id}): the Box-backed roster ── */ .team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 14px; } /* ── Team Activity band: one panel, the four activity views as tabs. A pane's [hidden] means "no data" (its loader decides); the inactive class is the tab axis — team.js keeps the tab row in step. ── */ /* The tab row reads as a segmented control: a raised track, each tab a chip that lifts and warms on hover, the active one lit in the accent with the Ask button's glow — so the row is obviously a set of buttons, not a row of labels. */ .team-activity-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-bottom: 18px; padding: 4px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--panel-raised); } .team-activity-tabs button { padding: 7px 13px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--muted); font-size: var(--fs-base); font-weight: 600; line-height: 1.2; cursor: pointer; transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s; } .team-activity-tabs button:hover { color: var(--text); background: var(--panel); border-color: var(--border); transform: translateY(-1px); } .team-activity-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .team-activity-tabs button.active, .team-activity-tabs button.active:hover { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-glow), 0.35); transform: none; } .team-tab-pane.team-tab-inactive { display: none; } .team-tab-meta { margin: -6px 0 10px; } .team-tab-meta:empty { display: none; } /* ── Team Overview: the company read, laid out as a lede, a grid of label-led findings, and the one line that asks for something. Same markdown underneath as the member read — it just can't arrive as a wall of text on the page's centre panel. ── */ #team-read-body { margin-top: 2px; } .team-read-lede { margin: 6px 0 0; padding: 14px 16px; background: var(--panel-raised); border: 1px solid var(--border-soft); border-left: 3px solid var(--accent); border-radius: 10px; font-size: var(--fs-lg); line-height: 1.55; } .team-read-lede-label { font-family: var(--font-display); font-weight: 700; color: var(--accent-2); } #team-read-body > ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin: 14px 0 0; padding: 0; } #team-read-body > ul > li { position: relative; margin: 0; padding: 13px 15px 14px; background: var(--panel-raised); border: 1px solid var(--border-soft); border-radius: 10px; font-size: var(--fs-md); line-height: 1.6; overflow-wrap: anywhere; /* long names and file paths must wrap */ } /* Folded on arrival (data-ov-fold): the lede and the ask show, the findings wait behind the shared toggle — foldOverviewCards() */ #team-read-body.ov-folded > ul { display: none; } #team-read-body > .ov-fold-toggle { margin-top: 12px; } #team-read-body > ul > li > strong:first-child { display: block; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--border-faint); font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent-2); } /* The closing line is the only part that asks for an action, so it gets the accent wash and sits apart from the findings above it. */ .team-read-action { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 14px 0 0; padding: 13px 16px; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 10px; font-size: var(--fs-base); line-height: 1.55; } .team-read-action > strong:first-child { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent); background: var(--panel); border: 1px solid var(--accent); border-radius: 999px; padding: 3px 11px; } /* The narration button rides the heading, like the member read's */ #team-read-audio { margin-left: 8px; vertical-align: middle; } /* ── Two-Step Verification: the accounts missing a second factor. The panel wears the warning color so a gap is visible from across the page, and each gap names its service. ── */ .team-security-count-bad { font-size: var(--fs-sm); font-weight: 600; color: var(--warn); } .team-security-count-ok { font-size: var(--fs-sm); font-weight: 600; color: var(--pos); } .team-security-rows { display: flex; flex-direction: column; gap: 8px; } .team-security-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--warn-soft); border: 1px solid var(--warn-zone); border-radius: 10px; color: var(--text); text-decoration: none; } .team-security-row:hover { border-color: var(--warn); } .team-avatar-mini { width: 36px; height: 36px; } .team-avatar-mini .team-avatar-fallback { font-size: var(--fs-base); } .team-security-who { display: flex; flex-direction: column; min-width: 150px; flex: 1; } .team-security-name { font-weight: 600; } .team-security-title { font-size: var(--fs-xs); } .team-security-chips { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; } .team-security-gap { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--warn); background: var(--panel); border: 1px solid var(--warn); border-radius: 999px; padding: 4px 12px; } .team-security-gap b { font-weight: 700; } .team-security-gap .team-icon svg { width: 13px; height: 13px; } .team-security-gap span:last-child { color: var(--text); } .team-security-clear { font-size: var(--fs-2xs); } .team-security-none { margin: 0; } @media (max-width: 640px) { .team-security-row { flex-wrap: wrap; } .team-security-chips { justify-content: flex-start; } } /* The Sponsors panel (shadow page) holds a fixed four-column rhythm: eight managers as a balanced 4×2 spread across the full width — the shared auto-fill grid packs seven narrow tiles on one row and strands the eighth alone on the next. */ #shadow-sponsors-tiles .stats-grid { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { #shadow-sponsors-tiles .stats-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { #shadow-sponsors-tiles .stats-grid { grid-template-columns: 1fr; } } /* The glance panel holds a fixed four-column rhythm. The shared auto-fit grid stretches a short group across the whole width, which turns a one-tile system (Microsoft 365 today) into a banner and makes every group a different tile size. */ #team-stats-panel .stats-grid { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { #team-stats-panel .stats-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { #team-stats-panel .stats-grid { grid-template-columns: 1fr; } } /* Each system label belongs to the row under it, so it sits closer to its own tiles than to the group above */ #team-stats-panel .stat-group-label { margin: 22px 0 10px; } /* The expanded half is its own section under the headline, not a continuation of it */ #team-stats-more { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-faint); } /* Each system renders into its own host div, so every label is a first-child — only the first host's label sits against the divider */ #team-stats-more > div:first-child .stat-group-label:first-child { margin-top: 0; } /* The glance expander: four headline tiles carry the panel, the rest of the metrics sit behind this button. */ .team-more-btn { margin-top: 16px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.03em; cursor: pointer; } .team-more-btn:hover { color: var(--text); border-color: var(--accent); } .team-more-btn[aria-expanded="true"] { color: var(--text); } /* ── The member card, built like a collectible: a tier-tinted crest with the portrait on it, the identity block, four channel tiles, and the presence meter along the bottom. Tenure picks the tier, and the whole card is drawn from that one --tier hue, so nothing else needs a color of its own. ── */ .team-card { /* The tier washes are mixed from --tier itself, so a tier only ever names one color and both themes follow it. */ --tier: var(--chart-blue); --tier-wash: color-mix(in srgb, var(--tier) 22%, transparent); --tier-fade: color-mix(in srgb, var(--tier) 5%, transparent); position: relative; display: flex; flex-direction: column; gap: 10px; background: var(--panel-raised); border: 1px solid var(--border-soft); border-top: 2px solid var(--tier); border-radius: 12px; padding: 0 12px 12px; min-width: 0; overflow: hidden; color: var(--text); text-decoration: none; transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease; } /* 10+ years gold, 5+ magenta, 1+ blue, first year green — four hues that stay apart from each other in both themes. */ .team-card[data-tier="veteran"] { --tier: var(--warn); } .team-card[data-tier="core"] { --tier: var(--chart-cat-6); } .team-card[data-tier="rookie"] { --tier: var(--pos); } .team-card:hover { transform: translateY(-2px); border-color: var(--tier); box-shadow: 0 8px 20px var(--shadow-pop); } /* The holo sweep — a diagonal gloss that crosses the card on hover. Purely decorative, and it sits under the content. */ .team-card-sheen { position: absolute; inset: -40% -60%; background: linear-gradient(72deg, transparent 42%, rgba(255, 255, 255, 0.10) 50%, transparent 58%); transform: translateX(-70%); opacity: 0; pointer-events: none; transition: transform 0.55s ease, opacity 0.25s ease; } /* A white gloss disappears on the cream light panel — light mode sweeps with a shadow instead. */ :root[data-theme="light"] .team-card-sheen { background: linear-gradient(72deg, transparent 42%, rgba(2, 0, 33, 0.06) 50%, transparent 58%); } .team-card:hover .team-card-sheen { transform: translateX(70%); opacity: 1; } @media (prefers-reduced-motion: reduce) { .team-card { transition: border-color 0.16s ease; } .team-card:hover { transform: none; } .team-card-sheen { display: none; } } /* Crest: the tier band the portrait sits on, with the join year stamped in one corner and the flag icons in the other. */ .team-card-crest { position: relative; display: flex; justify-content: center; margin: 0 -12px; padding: 40px 12px 0; } .team-card-crest::before { content: ""; position: absolute; inset: 0 0 auto; height: 56px; background: linear-gradient(158deg, var(--tier-wash), var(--tier-fade)); border-bottom: 1px solid var(--border-faint); } .team-card-year { position: absolute; top: 8px; left: 12px; font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; letter-spacing: 0.02em; color: var(--tier); } .team-card-flags { position: absolute; top: 9px; right: 12px; display: flex; align-items: center; gap: 6px; } /* Crest badges carry their own names (the profile page already owns .team-flag for its filter pills) AND their own fixed colors: a badge states a fact about the person, so it must read the same on every card. It sits on its own chip rather than the tier wash, so it never takes the frame's color either. */ .team-crest-icon { display: inline-flex; padding: 3px; border-radius: 6px; background: var(--panel); border: 1px solid var(--border-faint); color: var(--muted); } .team-crest-icon svg { width: 13px; height: 13px; display: block; } .team-crest-admin { color: var(--warn); } /* The shield is earned: green for a second factor everywhere we can check. A gap is the one thing on this card worth interrupting someone over, so it wears the alert color and a tinted chip to match. */ .team-crest-ok { color: var(--pos); } .team-crest-gap { color: var(--neg); background: var(--neg-soft); border-color: var(--neg); } .team-crest-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); opacity: 0.5; } .team-crest-dot[data-state="fresh"] { background: var(--pos); opacity: 1; box-shadow: 0 0 0 3px var(--pos-fade); } .team-crest-dot[data-state="warm"] { background: var(--warn); opacity: 1; } .team-avatar { position: relative; display: inline-flex; flex-shrink: 0; border-radius: 50%; overflow: hidden; border: 1px solid var(--border-soft); } .team-avatar-card { width: 62px; height: 62px; border: 2px solid var(--tier); box-shadow: 0 0 0 4px var(--panel-raised); } .team-avatar-hero { width: 72px; height: 72px; } .team-avatar-fallback { display: flex; align-items: center; justify-content: center; width: 100%; background: var(--gradient); color: #fff; font-weight: 600; font-size: var(--fs-xl); } .team-avatar-hero .team-avatar-fallback { font-size: 32px; } .team-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .team-card-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; text-align: center; } .team-card-name { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .team-card-title { font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* The stat block: four channels, big number over a bar that reads against the team's best. Each tile owns its hue through --stat. */ .team-card-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } /* An odd tile at the end (five channels today) runs the full width rather than leaving a hole; the sixth will pair it off and this stops applying on its own. */ .team-card-stats > .team-stat:last-child:nth-child(odd) { grid-column: 1 / -1; } .team-stat { --stat: var(--muted); display: flex; flex-direction: column; gap: 3px; padding: 7px 8px 8px; border-radius: 8px; background: var(--panel); border: 1px solid var(--border-faint); min-width: 0; } .team-stat-head { display: flex; align-items: center; gap: 6px; min-width: 0; } .team-stat-head .team-icon { color: var(--stat); } .team-stat-value { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .team-stat-label { font-size: 10px; font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); } .team-stat-bar { height: 4px; border-radius: 2px; background: var(--muted-soft); overflow: hidden; } .team-stat-bar i { display: block; height: 100%; border-radius: 2px; background: var(--stat); } .team-icon { display: inline-flex; flex-shrink: 0; } .team-icon svg { width: 13px; height: 13px; display: block; } /* Presence meter: one segment per day in the Slack window, lit for the days the member was active — a count, with the tally beside it. */ .team-card-foot { display: flex; align-items: center; gap: 8px; min-height: 16px; } .team-presence { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; } .team-presence-strip { display: flex; gap: 1px; flex: 1; min-width: 0; } .team-presence-strip i { flex: 1; height: 8px; border-radius: 1px; background: var(--muted-soft); } .team-presence-strip i.on { background: var(--tier); } .team-presence-count { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--muted); flex-shrink: 0; } .team-card-chip { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); flex-shrink: 0; } /* ── The legend: the card's own icons, bars and colors, named. Sits in its own raised strip so it reads as a key, not as fine print. ── */ .team-legend { --tier: var(--accent); display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding: 12px 14px; background: var(--panel-raised); border: 1px solid var(--border-soft); border-radius: 10px; font-size: var(--fs-xs); } .team-legend-head { font-family: var(--font-display); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); } .team-legend-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } /* Each key is its own chip — five channels and four card conventions on one strip run together otherwise. */ .team-legend-item { --stat: var(--muted); display: flex; align-items: center; gap: 6px; padding: 5px 11px; background: var(--panel); border: 1px solid var(--border-faint); border-radius: 999px; color: var(--text); } .team-legend-item b { font-weight: 600; } .team-legend-icon { color: var(--stat); } .team-legend-icon svg { width: 14px; height: 14px; } .team-legend-bar { width: 46px; height: 5px; flex-shrink: 0; } .team-legend .team-presence-strip { width: 64px; flex: none; } .team-legend .team-presence-strip i { height: 9px; } .team-legend-tier, .team-legend-flag { display: flex; align-items: center; gap: 4px; margin-left: 2px; } .team-legend-tier i { width: 9px; height: 9px; border-radius: 2px; background: var(--tier); } .team-legend-tier[data-tier="veteran"] { --tier: var(--warn); } .team-legend-tier[data-tier="core"] { --tier: var(--chart-cat-6); } .team-legend-tier[data-tier="established"] { --tier: var(--chart-blue); } .team-legend-tier[data-tier="rookie"] { --tier: var(--pos); } .team-charts { margin-top: 4px; } /* ── Email inbox rows: icon column, subject over envelope detail, timestamp on the right edge — a quiet inbox feel ── */ .team-mail-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--border-soft); border-radius: 8px; } .team-mail-row:last-of-type { border-bottom: none; } .team-mail-row:hover { background: var(--panel-raised); } .team-mail-icon { flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--panel-raised); border: 1px solid var(--border-soft); font-size: var(--fs-md); } .team-mail-out { color: var(--accent); } .team-mail-in { color: var(--chart-blue); } .team-mail-spam { color: var(--neg); } .team-mail-body { flex: 1; min-width: 0; } .team-mail-subject { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .team-mail-sub { display: block; margin-top: 2px; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .team-mail-when { flex: none; color: var(--muted); font-size: var(--fs-xs); margin-top: 2px; white-space: nowrap; } /* Overview panel: the Regenerate button rides the top-right corner */ .tm-read-controls { margin-left: auto; } /* The read itself: an accent-barred lede, then the bullets as a grid of label-led cards — same markdown underneath, styled out of wall-of-text. (team_member.js strips the lead-ins' trailing colons.) */ #tm-read-body > p:first-of-type { margin: 4px 0 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--accent); font-size: var(--fs-lg); line-height: 1.55; } #tm-read-body > ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 10px; margin: 16px 0 0; padding: 0; } #tm-read-body > ul > li { margin: 0; padding: 12px 14px; background: var(--panel-raised); border: 1px solid var(--border-soft); border-radius: 10px; font-size: var(--fs-md); line-height: 1.55; overflow-wrap: anywhere; /* long snake_case filenames must wrap */ } /* Folded on arrival (data-ov-fold): the lede shows, the cards wait behind the shared toggle — foldOverviewCards() in common.js */ #tm-read-body.ov-folded > ul { display: none; } #tm-read-body > .ov-fold-toggle { margin-top: 12px; } #tm-read-body > ul > li > strong:first-child { display: block; margin-bottom: 5px; font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent-2); } /* The Meetings chart leads the Calendar panel, under the stat tiles */ #tm-meetings-chart .carry-spark-title { display: block; margin-bottom: 2px; } /* Google Workspace panel: the section labels need air above them — without it they sit right on top of the preceding stats/feeds */ #tm-google-panel .team-subhead { margin-top: 24px; margin-bottom: 10px; } #tm-gmail-note { margin-bottom: 10px; } #tm-gmail-foot { margin-top: 8px; } /* The email feed owns the panel's full width (the shared feed class caps at 720px for the narrow side-by-side feeds) */ #tm-gmail-feed { max-width: none; } /* Drive + sign-ins (and the GitHub commit feed) tuck behind the same quiet disclosure — good data, low rank */ #tm-google-more { margin-top: 20px; } #tm-google-more > summary, #tm-github-latest > summary { cursor: pointer; color: var(--muted); font-size: var(--fs-md); font-weight: 600; } #tm-google-more > summary:hover, #tm-github-latest > summary:hover { color: var(--accent); } #tm-google-more .team-subhead { margin-top: 12px; } #tm-google-more-stats { margin: 14px 0 4px; } /* The commit feed's rows run the panel's full width once opened */ #tm-github-latest { margin-top: 20px; } #tm-github-feed { max-width: none; } .team-github-feed-repo { margin: 16px 0 2px; font-weight: 600; } .team-github-feed-repo:first-child { margin-top: 8px; } .team-github-feed-repo a { color: var(--text); text-decoration: none; } .team-github-feed-repo a:hover { color: var(--accent); } /* Keep the row under each repo header seamless — the header is the divider there, not the row's own top rule */ .team-github-feed-repo + .team-activity-row { border-top: none; } .team-github-feed-more { padding: 6px 0 0; font-size: var(--fs-sm); } /* Collapsed-feed unfold: one quiet full-width button under the list */ .team-see-more { display: block; width: 100%; margin-top: 8px; padding: 8px 12px; background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); cursor: pointer; } .team-see-more:hover { color: var(--accent); border-color: var(--accent); } .team-chart-block { border: 1px solid var(--border-soft); border-radius: 10px; padding: 10px 12px; min-width: 0; } .team-chart { margin-top: 6px; } /* Two-line chart head: the title, then a fine-print line naming the data source and time range (filled from JS for the async layers) */ .team-chart-block .carry-spark-title { display: block; margin-bottom: 1px; } .team-chart-meta { display: block; font-size: var(--fs-xs); color: var(--muted); letter-spacing: 0.01em; } /* A day-series chart paired with a tall Top-10 sits in a grid row the bar chart sizes — so it takes the whole cell instead of leaving the bottom half empty. The chart itself is drawn with height:null and reflows onto whatever the row settles at (see fillChart). */ .team-chart-fill { display: flex; flex-direction: column; } .team-chart-fill .team-chart { flex: 1; min-height: 240px; position: relative; } /* Highcharts sizes its own container in pixels, which would prop the flex item open at the tallest layout it ever drew (it could grow but never shrink). Taking it out of flow leaves the height entirely to the grid; !important is the only lever over Highcharts' inline style. */ .team-chart-fill .team-chart > .highcharts-container { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; } /* ── Member hero: the dashboard card's language blown up to a masthead. Tier frame and wash, year stamp, crest flags, presence meter — the same vocabulary at header scale, so the profile IS the card. ── */ .team-member-header { --tier: var(--chart-blue); --tier-wash: color-mix(in srgb, var(--tier) 22%, transparent); --tier-fade: color-mix(in srgb, var(--tier) 5%, transparent); position: relative; padding: 18px 20px 16px; background: var(--panel-raised); border: 1px solid var(--border-soft); border-top: 2px solid var(--tier); border-radius: 12px; overflow: hidden; } .team-member-header[data-tier="veteran"] { --tier: var(--warn); } .team-member-header[data-tier="core"] { --tier: var(--chart-cat-6); } .team-member-header[data-tier="rookie"] { --tier: var(--pos); } /* The tier wash sweeps in from the portrait corner and fades out before the badges — decoration first, never behind the reading */ .tm-hero-wash { position: absolute; inset: 0; background: linear-gradient(115deg, var(--tier-wash), var(--tier-fade) 34%, transparent 62%); pointer-events: none; } .team-member-header .team-avatar-hero { width: 84px; height: 84px; border: 2px solid var(--tier); box-shadow: 0 0 0 4px var(--panel-raised); } .tm-avatar-wrap { position: relative; display: inline-flex; flex-shrink: 0; } /* The recency dot rides the portrait's corner, ringed so it reads against any photo */ .tm-avatar-wrap .team-crest-dot { position: absolute; right: 3px; bottom: 3px; width: 11px; height: 11px; border: 2px solid var(--panel-raised); box-sizing: content-box; } .team-member-title { display: flex; align-items: center; gap: 18px; position: relative; } .tm-hero-id { min-width: 0; } .tm-hero-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .tm-hero-name-row h2 { font-family: var(--font-display); font-size: var(--fs-2xl); letter-spacing: -0.01em; } .tm-hero-flags { display: inline-flex; align-items: center; gap: 6px; } .tm-hero-flags .team-crest-icon svg { width: 15px; height: 15px; } .tm-hero-side { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .tm-hero-tenure { display: flex; align-items: baseline; gap: 8px; } .tm-hero-year { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; letter-spacing: 0.02em; color: var(--tier); line-height: 1; } .tm-hero-tenure-note { font-size: var(--fs-xs); } .tm-hero-presence { display: flex; align-items: center; gap: 6px; width: 210px; } .tm-hero-presence:empty { display: none; } .tm-hero-presence .team-presence-strip i { height: 9px; } .team-badges { display: flex; align-items: center; gap: 8px; justify-content: flex-end; flex-wrap: wrap; } .team-badge { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; } .team-badge-accent { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); } .team-badge-pos { color: var(--pos); background: var(--pos-soft); } .team-badge-warn { color: var(--warn); background: var(--warn-soft); } /* Storage meter (profile page) — same bones as the 52-week range bar */ .team-storage { margin-top: 14px; max-width: 560px; } .team-meter { height: 10px; border-radius: 5px; background: var(--chart-blue-soft); margin-top: 6px; overflow: hidden; } .team-meter-fill { height: 100%; border-radius: 5px; background: var(--chart-blue); min-width: 2px; } .team-meter-fill.warn { background: var(--warn); } .team-meter-labels { display: flex; justify-content: space-between; margin-top: 4px; font-size: var(--fs-sm); } /* Account & Security flag chips */ .team-flags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .team-flag { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--muted); background: var(--panel-raised); border: 1px solid var(--border-soft); border-radius: 999px; padding: 5px 12px; } .team-flag.on { color: var(--text); border-color: var(--pos); } .team-flag-dot { font-weight: 700; } .team-flag.on .team-flag-dot { color: var(--pos); } /* Recent Box Activity (member profile) */ .team-activity-summary { margin-bottom: 10px; } .team-activity-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .team-activity-chip b { color: var(--text); } .team-activity-chart { margin-bottom: 8px; } .team-activity-feed { max-width: 720px; } .team-activity-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 7px 0; border-top: 1px solid var(--border-soft); font-size: var(--fs-md); } .team-activity-row:first-child { border-top: none; } .team-activity-action { min-width: 0; overflow-wrap: anywhere; flex: 1; } /* The Box feed's leading file-kind icon — first thing in the row, and big enough to actually read */ .team-file-lead { display: inline-flex; justify-content: center; flex-shrink: 0; width: 38px; align-self: center; } .team-file-lead .team-file-svg svg { width: 30px; height: 30px; } .team-file-type .team-file-svg { vertical-align: middle; } /* The M365 file table earns the whole panel width */ #tm-ms-table table { width: 100%; } /* ── Google Workspace mail-flow hero: sent / received as directional icon tiles with the traffic-split bar between them ── */ .gws-flow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0 8px; } @media (max-width: 640px) { .gws-flow { grid-template-columns: 1fr; } } .gws-flow-tile { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 14px 16px; background: var(--panel-raised); border: 1px solid var(--border-soft); border-radius: var(--r-tile); } .gws-flow-ico svg { width: 30px; height: 30px; } .gws-sent .gws-flow-ico { color: var(--accent); } .gws-received .gws-flow-ico { color: var(--chart-blue); } .gws-flow-value { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; } .gws-flow-label { margin-top: 2px; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; } .gws-flow-sub { margin-top: 2px; font-size: var(--fs-xs); } .gws-flow-meter { grid-column: 1 / -1; } .gws-flow-bar { display: flex; height: 8px; overflow: hidden; border-radius: 999px; background: var(--border-soft); } .gws-flow-bar i { display: block; height: 100%; } .gws-flow-bar .sent { background: var(--accent); } .gws-flow-bar .received { background: var(--chart-blue); } .gws-flow-cap { margin-top: 6px; font-size: var(--fs-xs); } /* File-table column alignment, both tables (Top Files, M365 files): icon Type + count columns centered, trailing size/date columns against the table's right edge */ #tm-work-table th:nth-child(2), #tm-work-table td:nth-child(2), #tm-work-table th:nth-child(3), #tm-work-table td:nth-child(3), #tm-ms-table th:nth-child(2), #tm-ms-table td:nth-child(2) { text-align: center; } #tm-work-table th:nth-child(5), #tm-work-table td:nth-child(5), #tm-work-table th:nth-child(6), #tm-work-table td:nth-child(6), #tm-ms-table th:nth-child(4), #tm-ms-table td:nth-child(4), #tm-ms-table th:nth-child(5), #tm-ms-table td:nth-child(5) { text-align: right; } .team-activity-when { flex-shrink: 0; } /* Activity feed items that deep-link into Box keep body-text weight */ .team-activity-item { font-weight: 600; color: var(--text); } .team-activity-item:hover { color: var(--accent); } /* Work profile (member profile): subheads + top-files table */ .team-subhead { margin: 16px 0 6px; font-size: var(--fs-md); } .team-work-note { margin: 14px 0 8px; font-size: var(--fs-sm); } /* Box Activity: the window's file-kind tally chips, the type icons on feed rows, and the freshness dots on the Top Files table */ .team-file-types { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; } .team-file-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border: 1px solid var(--border-soft); border-radius: 999px; background: var(--panel-raised); font-size: var(--fs-xs); } /* The file-kind SVGs (iconEl paths, currentColor) tint per kind from the theme palette — one hue per category, both themes for free */ .team-file-document { color: var(--chart-blue); } .team-file-spreadsheet { color: var(--pos); } .team-file-deck { color: var(--chart-cat-3); } .team-file-pdf { color: var(--neg); } .team-file-media { color: var(--chart-cat-4); } .team-file-folder { color: var(--warn); } .team-file-other { color: var(--muted); } .team-file-chip .team-file-svg svg { width: 22px; height: 22px; } .team-file-type .team-file-svg svg { width: 27px; height: 27px; } .team-file-dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--border); vertical-align: middle; flex-shrink: 0; } .team-file-dot.fresh { background: var(--pos); } #tm-actions-head { margin-top: 18px; } #tm-work-table table { font-size: var(--fs-md); width: 100%; } /* The action-breakdown column absorbs the squeeze — everything else (names, types, dates) stays on one line */ #tm-work-table td:nth-child(4) { white-space: normal; } /* GitHub handle row (profile header) */ .team-github { display: flex; align-items: center; gap: 7px; margin-top: 5px; font-size: var(--fs-md); } .team-github-icon { display: inline-flex; color: var(--muted); } .team-github-link { color: var(--text); font-weight: 600; text-decoration: none; } .team-github-link:hover { color: var(--accent); } .team-github-edit { background: transparent; border: none; color: var(--muted); cursor: pointer; font: inherit; font-size: var(--fs-xs); padding: 2px 6px; border-radius: 6px; } .team-github-edit:hover { color: var(--accent); background: var(--accent-soft); } .team-github-input { width: 180px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; font-size: var(--fs-sm); } .team-github-input:focus { outline: none; border-color: var(--accent); } .team-github-save, .team-github-cancel { font-size: var(--fs-xs); padding: 4px 10px; } /* Title row (profile header): override or directory value, admin ✎ */ .tm-hero-job { display: flex; align-items: center; gap: 7px; margin-top: 2px; font-size: var(--fs-md); min-height: 1.2em; } .tm-title-text { font-weight: 600; } .tm-title-hint { font-size: var(--fs-2xs); } .tm-title-input { width: 240px; } /* Daily Activity by Service folds behind its own title — the team-average grid above it is the read, this one is the receipts */ .tm-heat-details summary { cursor: pointer; list-style: none; } .tm-heat-details summary::-webkit-details-marker { display: none; } .tm-heat-details summary .team-subhead { display: inline-flex; } .tm-heat-details summary::after { content: "▸"; color: var(--muted); margin-left: 8px; } .tm-heat-details[open] summary::after { content: "▾"; } /* Compensation panel (admin-only): a drawer under the hero, opened by the header's Compensation button */ .tm-comp-toggle { font: inherit; font-size: var(--fs-xs); padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; } .tm-comp-toggle:hover { color: var(--accent); border-color: var(--accent); } .tm-comp-toggle.active { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); } .tm-comp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px 32px; align-items: start; } @media (max-width: 900px) { .tm-comp-grid { grid-template-columns: 1fr; } } .tm-comp-spark { margin-top: 6px; } .tm-benefits { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 4px; } .tm-benefit { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: var(--fs-md); } .tm-benefit input { accent-color: var(--accent); cursor: pointer; } #tm-comp-table table { font-size: var(--fs-md); width: 100%; } .tm-comp-actions { white-space: nowrap; text-align: right; } .tm-comp-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 12px; } .tm-comp-input { width: 160px; } /* Work panels (leads / to-dos / favorites): the old profile lists; the ★ removes a favorite on your own profile only */ .tm-work-row .fav-remove { margin-left: auto; } /* ── Pipeline lanes (pipeline_lanes.js): the pipeline as stage columns — a colored bar per stage, a running total, compact deal cards that drag between lanes where the viewer may move them. Shared by the Pipeline page and the team profile. ── */ .pl-lanes { display: grid; grid-template-columns: repeat(var(--pl-lanes, 5), minmax(0, 1fr)); gap: 14px; align-items: start; margin-top: 4px; } .pl-lane { --pl-tone: var(--muted); display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 2px; border-radius: 12px; border: 1px dashed transparent; transition: border-color 0.15s, background-color 0.15s; } .pl-lane-lead { --pl-tone: #7c88a1; } .pl-lane-qualified { --pl-tone: var(--chart-blue); } .pl-lane-proposal { --pl-tone: var(--warn); } .pl-lane-won { --pl-tone: var(--pos); } .pl-lane-lost { --pl-tone: var(--muted); } .pl-lane-settled .pl-card { opacity: 0.7; } .pl-lane-head { display: flex; flex-direction: column; gap: 6px; padding: 0 2px 2px; } .pl-lane-bar { height: 4px; border-radius: 999px; background: var(--pl-tone); } .pl-lane-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .pl-lane-label { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--pl-tone); white-space: nowrap; } .pl-lane-total { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pl-lane-body { display: flex; flex-direction: column; gap: 8px; min-height: 64px; } .pl-lane-empty { border: 1px dashed var(--border-soft); border-radius: var(--r-tile); padding: 14px 12px; font-size: var(--fs-xs); text-align: center; } .pl-card { display: flex; flex-direction: column; gap: 3px; background: var(--panel-raised); border: 1px solid var(--border-soft); border-radius: var(--r-tile); padding: 10px 12px; transition: border-color 0.15s, box-shadow 0.15s, opacity 0.15s; } .pl-card:hover { border-color: var(--border); } .pl-card[draggable="true"] { cursor: grab; } .pl-card[draggable="true"]:active { cursor: grabbing; } .pl-card-name { font-weight: 600; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } a.pl-card-name:hover { color: var(--link); } .pl-card-sub { font-size: var(--fs-xs); } .pl-card-line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 4px; flex-wrap: wrap; } .pl-card-value { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; } .pl-card-unit { font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: 400; color: var(--muted); margin-left: 2px; } .pl-card-novalue, .pl-card-close { font-size: var(--fs-2xs); } .pl-touch { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; } .pl-touch-stale { color: var(--warn); font-weight: 600; } .pl-touch:empty { display: none; } /* Drag states: the lifted card fades, every lane offers itself, the one under the pointer lights in the accent */ .pl-card-dragging { opacity: 0.35; } .pl-lanes-dragging .pl-lane { border-color: var(--border-soft); } .pl-lane-over { border-color: var(--accent); background: var(--accent-soft); } .pl-card-saving { opacity: 0.5; pointer-events: none; } @media (max-width: 900px) { .pl-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .pl-lanes { grid-template-columns: 1fr; } } /* Panel-head link to the fuller page (the profile's leads panel) */ .tm-panel-link { font-size: var(--fs-sm); font-weight: 600; color: var(--link); text-decoration: none; } .tm-panel-link:hover { text-decoration: underline; } /* Pipeline page: lanes sit above the table inside the same panel */ .crm-lanes { margin-bottom: 18px; } /* Clients section: linked cards, hub-style */ .tm-clients-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } .tm-client-link { display: inline-flex; flex-direction: column; gap: 2px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-raised); color: var(--text); text-decoration: none; font-size: var(--fs-md); } .tm-client-link:hover { border-color: var(--accent); } .tm-client-link .muted { font-size: var(--fs-xs); } /* Latest Actions: the chart gets room, the chips become filters */ .team-activity-chart { margin: 4px 0 14px; } .team-feed-note { margin-top: 8px; font-size: var(--fs-sm); } button.team-activity-chip { cursor: pointer; font: inherit; font-size: var(--fs-sm); } button.team-activity-chip:hover { border-color: var(--accent); } button.team-activity-chip.active { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); } button.team-activity-chip.active b { color: var(--accent); } /* Slack: four daily charts, big and balanced in a 2×2 grid */ .team-chart-grid[hidden] { display: none; } /* display:grid would defeat [hidden] */ .team-chart-grid { display: grid; /* minmax(0, …): a chart drawn while its tab was closed carries a default-width SVG, and a bare 1fr column would grow to fit it instead of letting the reflow shrink it to the cell */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 32px; margin-top: 10px; } @media (max-width: 900px) { .team-chart-grid { grid-template-columns: 1fr; } } .team-chart-grid .team-subhead { margin-bottom: 2px; } /* Slack platform presence strip: booleans get filled cells, not columns */ .team-punch { display: flex; flex-direction: column; gap: 5px; margin: 14px 4px 0; } .team-punch-row { display: flex; align-items: center; gap: 12px; } .team-punch-label { flex: none; width: 96px; text-align: right; font-size: var(--fs-xs); color: var(--muted); } .team-punch-label b { color: var(--text); font-weight: 600; } .team-punch-cells { flex: 1; display: grid; grid-template-columns: repeat(var(--punch-days, 30), 1fr); gap: 3px; } .team-punch-cell { height: 18px; border-radius: 3px; background: var(--border-soft); } .team-punch-axis { margin-top: 2px; } .team-punch-tick { font-size: var(--fs-2xs); white-space: nowrap; } .team-punch-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 0 108px; /* label width + row gap, aligns under the cells */ font-size: var(--fs-2xs); } .team-punch-legend { display: inline-flex; align-items: center; gap: 3px; } .team-punch-swatch { width: 14px; height: 14px; border-radius: 3px; background: var(--accent); } /* The Overview cross-service heatmap: the punch card grown up — big cells, a weekday header, hatched not-yet-published Slack days, and a breadth-shaded Total row under a hairline */ .team-svc-heatmap { margin: 18px 0 8px; } #tm-meetings-chart { margin: 6px 0 16px; } .team-punch-lg { gap: 6px; } .team-punch-lg .team-punch-label { display: flex; align-items: center; justify-content: flex-end; gap: 8px; width: 224px; } .team-punch-lg .team-punch-cell { height: 32px; border-radius: 6px; } .team-punch-lg .team-punch-foot { margin-left: 236px; } /* Week seam: four equal 7-day grids with real space BETWEEN them, so every cell keeps the same width across the whole strip */ .team-punch-weeks { flex: 1; display: flex; gap: 16px; } .team-punch-week { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; } .team-punch-dayhead .team-punch-week { display: block; text-align: center; } .team-punch-val { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; font-size: var(--fs-2xs); background: var(--panel-raised); border: 1px solid var(--border-soft); border-radius: 999px; padding: 2px 9px; white-space: nowrap; } .team-punch-weekspan { font-size: var(--fs-2xs); text-align: center; white-space: nowrap; } .team-punch-wow { color: var(--muted); font-weight: 500; } .team-punch-cell.wkend:not(.on):not(.pending) { opacity: 0.55; } /* Weekends read as a skinnier band — same width, shorter, centered */ .team-punch-lg .team-punch-cell.wkend { height: 18px; align-self: center; } .team-punch-cell.pending { background: repeating-linear-gradient(45deg, var(--border-soft) 0 5px, transparent 5px 10px); } .team-punch-total { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border-soft); } /* A tracked service with nothing to chart says WHY — "Not connected", "No Box seat" — in a quiet dashed pill where the count would sit */ .team-punch-val.team-punch-note { font-weight: 500; color: var(--muted); background: transparent; border-style: dashed; } /* The lg grids keep only the legend in the foot (the how-to-read text sits behind the title's ⓘ) — right-aligned, big enough to read, with clear air under the Total row */ .team-punch-lg .team-punch-foot { justify-content: flex-end; margin-top: 16px; font-size: var(--fs-xs); } .team-svc-heatmap .team-subhead .carry-comp-info-btn { margin-left: 7px; } .team-punch-lg .team-punch-legend { gap: 5px; } .team-punch-lg .team-punch-swatch { width: 20px; height: 20px; border-radius: 5px; } /* The read's Generated stamp rides beside its Regenerate button */ .tm-read-status { font-size: var(--fs-xs); } /* Dashboard Daily Activity by Member: the profile Total rows stacked — compact cells, a name gutter that links to each profile */ .team-punch-md { gap: 4px; margin-top: 4px; } .team-punch-md .team-punch-label { display: flex; align-items: center; justify-content: flex-end; gap: 8px; width: 200px; } .team-punch-md .team-punch-cell { height: 20px; border-radius: 4px; } .team-punch-md .team-punch-cell.wkend { height: 12px; align-self: center; } .team-punch-md .team-punch-weeks { gap: 12px; } .team-punch-md .team-punch-week { gap: 3px; } .team-punch-md .team-punch-foot { justify-content: flex-end; margin: 12px 0 0 212px; font-size: var(--fs-xs); } .team-punch-md .team-punch-legend { gap: 5px; } .team-punch-md .team-punch-swatch { width: 18px; height: 18px; border-radius: 4px; } .team-punch-member { color: var(--text); text-decoration: none; font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .team-punch-member:hover { color: var(--accent); } /* The whole-window column: one set-apart accent cell per member, shaded across the TEAM (share of the team-leading pace) where the day cells shade within the member. The margin is the seam. */ .team-punch-cell.team-punch-alltime { flex: none; width: 26px; margin-right: 14px; } .team-punch-cell.team-punch-alltime.on { background: var(--accent); } .team-punch-alltime-head { flex: none; width: 26px; margin-right: 14px; font-size: var(--fs-2xs); text-align: center; align-self: end; } /* ── Narrow screens: the punch grids stack — each label line above its own full-width strip, cells shrunk until 28 columns fit a phone — instead of fighting a fixed gutter into sideways scroll ── */ @media (max-width: 720px) { .team-punch-lg .team-punch-row, .team-punch-md .team-punch-row { flex-wrap: wrap; gap: 4px 10px; } .team-punch-lg .team-punch-label, .team-punch-md .team-punch-label { width: 100%; justify-content: flex-start; } .team-punch-lg .team-punch-cell, .team-punch-md .team-punch-cell { height: 13px; border-radius: 3px; } .team-punch-lg .team-punch-cell.wkend, .team-punch-md .team-punch-cell.wkend { height: 8px; } .team-punch-lg .team-punch-weeks, .team-punch-md .team-punch-weeks { gap: 6px; } .team-punch-lg .team-punch-week, .team-punch-md .team-punch-week { gap: 2px; } .team-punch-lg .team-punch-foot, .team-punch-md .team-punch-foot { margin-left: 0; } .team-punch-weekspan { font-size: 10px; } .team-punch-cell.team-punch-alltime { margin-right: 10px; } .team-punch-alltime-head { margin-right: 10px; } /* The card legend's multi-part chips (tiers, corner flags) fold rather than propping the layout viewport open */ .team-legend-item { flex-wrap: wrap; min-width: 0; max-width: 100%; } } #team-daily-meta .carry-comp-info-btn { margin-left: 7px; } /* Account & Security: permissive states amber, protective states green */ .team-flag-warn { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); } .team-flag-warn .team-flag-dot { color: var(--warn); } .team-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; } @media (max-width: 900px) { .team-detail-grid { grid-template-columns: 1fr; } } .team-detail-row { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 7px 0; border-top: 1px solid var(--border-soft); font-size: var(--fs-md); } .team-detail-row:first-child { border-top: none; } .team-detail-value { text-align: right; overflow-wrap: anywhere; min-width: 0; } /* Team dashboard: member search + sort toolbar */ .team-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; } .team-toolbar input[type="search"] { flex: 1; min-width: 220px; max-width: 420px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; font-size: var(--fs-md); } .team-toolbar input[type="search"]:focus { outline: none; border-color: var(--accent); } .team-toolbar select { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; font-size: var(--fs-md); } .team-empty-note { padding: 6px 0; } /* Calendar panel: tabs, external tag, agenda expanders, attachments */ /* The stat tiles above carry no bottom margin — the controls block owns the gap (the shared tab-row/chips classes bring only bottom margins) */ #tm-cal-controls { margin-top: 14px; } .team-cal-tabs { margin-bottom: 10px; } .team-cal-agenda-btn { margin-left: 8px; font-size: var(--fs-xs); color: var(--muted); background: transparent; border: 1px solid var(--border-soft); border-radius: 999px; padding: 1px 8px; cursor: pointer; } .team-cal-agenda-btn:hover { color: var(--accent); border-color: var(--accent); } .team-cal-agenda { white-space: pre-line; font-size: var(--fs-sm); padding: 8px 12px; margin: 2px 0 6px; background: var(--panel-raised); border: 1px solid var(--border-soft); border-radius: 8px; } .team-cal-attachment { margin-left: 8px; font-size: var(--fs-xs); color: var(--text); text-decoration: none; border-bottom: 1px dotted var(--muted); } .team-cal-attachment:hover { color: var(--accent); } /* Member's own RSVP on calendar rows */ .team-cal-rsvp { margin-left: 8px; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.03em; color: var(--muted); background: var(--panel-raised); border: 1px solid var(--border-soft); border-radius: 999px; padding: 1px 8px; white-space: nowrap; } .team-cal-rsvp-pos { color: var(--pos); border-color: var(--pos); background: var(--pos-soft); } .team-cal-rsvp-neg { color: var(--neg-text); border-color: var(--neg); background: var(--neg-soft); } .team-cal-rsvp-warn { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); } /* Calendar list stretches the panel; RSVP select matches the chips */ .team-cal-list { max-width: none; } .team-cal-chart { margin: 4px 0 14px; } .team-cal-filters { align-items: center; } .team-cal-filters select { padding: 5px 10px; border: 1px solid var(--border-soft); border-radius: 999px; background: var(--panel-raised); color: var(--muted); font: inherit; font-size: var(--fs-sm); } .team-cal-filters select:focus { outline: none; border-color: var(--accent); } /* Two-line calendar rows (profile) */ .team-cal-row { padding: 8px 0; border-top: 1px solid var(--border-soft); } .team-cal-row:first-child { border-top: none; } .team-cal-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; font-size: var(--fs-md); } .team-cal-row-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; font-size: var(--fs-sm); } .team-cal-row-sub .team-cal-tag, .team-cal-row-sub .team-cal-rsvp, .team-cal-row-sub .team-cal-agenda-btn, .team-cal-row-sub .team-cal-attachment { margin-left: 0; } /* Meetings-chart bucket tags on event rows — same words, same colors as the stacked columns above the list */ .team-cal-tag { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; border-radius: 999px; padding: 1px 8px; } .team-cal-tag-internal { color: var(--chart-blue); background: color-mix(in srgb, var(--chart-blue) 14%, transparent); } .team-cal-tag-external { color: var(--accent); background: var(--accent-soft); } .team-cal-tag-personal { color: var(--muted); background: color-mix(in srgb, var(--muted) 14%, transparent); } /* The security verdict chip in the glance header and its anchored popover — the whole Two-Step read lives at the alert. The chip runs amber with the gap count when anyone is missing a factor, a quiet green check when clear; the detail drops down right beneath it. */ .team-security-anchor { position: relative; display: flex; margin-left: auto; } .team-security-alert { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--border-soft); border-radius: 999px; background: var(--panel-raised); color: var(--muted); font-size: var(--fs-xs); font-weight: 600; cursor: pointer; } .team-security-alert:hover { border-color: var(--border); color: var(--text); } /* The checking state: visible from first paint, but not yet a button */ .team-security-alert:disabled { cursor: default; } .team-security-alert:disabled:hover { border-color: var(--border-soft); color: var(--muted); } .team-security-alert.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); } .team-security-pop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: min(640px, calc(100vw - 40px)); max-height: min(70vh, 560px); overflow-y: auto; padding: 14px 16px; background: var(--panel-raised); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 18px 48px color-mix(in srgb, black 45%, transparent); } .team-security-pop-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .team-security-pop-head h3 { margin: 0; font-size: var(--fs-md); } /* Team dashboard: full-width chart slot + directory facts line */ .team-chart-wide { grid-column: 1 / -1; } @media (max-width: 640px) { .team-chart-wide { grid-column: auto; } } .team-facts { margin: 14px 2px 0; font-size: var(--fs-sm); } /* ── The week calendar (calendarWeek in team_common.js): day columns of event chips, shared by the profile's Upcoming tab and the dashboard's Upcoming Meetings. Chips reuse the meeting-mix hues; today's column sits raised. Narrow screens scroll the week sideways rather than crushing seven columns. ── */ .team-calweek { display: grid; grid-template-columns: repeat(7, minmax(130px, 1fr)); gap: 8px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; } .team-calweek-day { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 130px; padding: 8px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--panel); } .team-calweek-day.today { background: var(--panel-raised); border-color: var(--border); } .team-calweek-head { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; padding-bottom: 6px; border-bottom: 1px solid var(--border-soft); } .team-calweek-dow { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); } .team-calweek-day.today .team-calweek-dow { color: var(--accent); } .team-calweek-date { font-size: var(--fs-2xs); color: var(--muted); } .team-calweek-evt { display: block; width: 100%; min-width: 0; padding: 5px 7px; text-align: left; font-family: inherit; border: none; cursor: pointer; border-left: 3px solid var(--chart-blue); border-radius: 6px; background: color-mix(in srgb, var(--chart-blue) 10%, transparent); text-decoration: none; } button.team-calweek-evt:hover, a.team-calweek-evt:hover { background: color-mix(in srgb, var(--chart-blue) 20%, transparent); } .team-calweek-external { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); } button.team-calweek-external:hover, a.team-calweek-external:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); } .team-calweek-personal { border-left-color: var(--muted); background: color-mix(in srgb, var(--muted) 9%, transparent); } button.team-calweek-personal:hover, a.team-calweek-personal:hover { background: color-mix(in srgb, var(--muted) 18%, transparent); } .team-calweek-time { display: block; font-size: var(--fs-2xs); font-weight: 600; color: var(--muted); } .team-calweek-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--fs-xs); font-weight: 600; color: var(--text); overflow-wrap: anywhere; } .team-calweek-personal .team-calweek-title { color: var(--muted); } /* The AI's picks carry a quiet ring — the ✦ does the talking */ .team-calweek-pick { box-shadow: inset 0 0 0 1px var(--accent); } .team-calweek-more { font-size: var(--fs-2xs); color: var(--muted); background: none; border: none; padding: 2px 0; text-align: left; font-family: inherit; cursor: pointer; } .team-calweek-more:hover { color: var(--accent); } /* ── Event detail modal (calEventModal in team_common.js): the in-app face of a calendar event. Sits above the command palette's layer so a chip in any panel can raise it; the Google Calendar link is a footer action, never the chip's click. ── */ .cal-modal-overlay { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: rgba(0, 0, 0, 0.5); } .cal-modal { width: min(600px, 100%); max-height: min(85vh, 760px); display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-2); overflow: hidden; } .cal-modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--border-soft); } .cal-modal-titlewrap { flex: 1; min-width: 0; } .cal-modal-title { margin: 0; font-size: var(--fs-lg); line-height: 1.3; overflow-wrap: anywhere; } .cal-modal-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; font-size: var(--fs-xs); } .cal-modal-pick { color: var(--accent); font-size: var(--fs-xs); } .cal-modal-close { flex: none; width: 30px; height: 30px; border: 1px solid var(--border-soft); border-radius: 8px; background: transparent; color: var(--muted); font-size: var(--fs-sm); cursor: pointer; } .cal-modal-close:hover { color: var(--text); border-color: var(--border); } .cal-modal-body { padding: 12px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; } .cal-modal-row { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: start; font-size: var(--fs-md); } .cal-modal-label { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; padding-top: 3px; } .cal-modal-val { min-width: 0; overflow-wrap: anywhere; line-height: 1.5; } .cal-modal-val a { color: var(--link); } .cal-modal-agenda { white-space: pre-wrap; font-size: var(--fs-sm); line-height: 1.55; padding: 10px 12px; border-radius: 8px; background: var(--panel-raised); border: 1px solid var(--border-soft); } .cal-modal-attendees { display: flex; flex-direction: column; gap: 3px; } .cal-modal-attachments { display: flex; flex-wrap: wrap; gap: 8px; } .cal-modal-daylist { gap: 6px; } .cal-modal-daylist .team-calweek-evt { padding: 8px 10px; } .cal-modal-foot { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding: 12px 20px 16px; border-top: 1px solid var(--border-soft); } .cal-modal-btn { display: inline-flex; align-items: center; padding: 7px 14px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text); font-size: var(--fs-sm); font-weight: 600; font-family: inherit; text-decoration: none; cursor: pointer; } .cal-modal-btn:hover { border-color: var(--accent); color: var(--accent); } .cal-modal-join { border-color: var(--accent); background: var(--accent-soft); } .cal-modal-dismiss { color: var(--muted); } /* ── Image lightbox (imageLightbox in common.js): the in-app face of any inline image. Fit-to-screen by default; .zoomed switches to actual size with native scroll panning. Sits above the event modal so a future image row inside one can still raise it. ── */ .lightbox-overlay { position: fixed; inset: 0; z-index: 130; display: flex; flex-direction: column; background: rgba(0, 0, 0, 0.72); animation: lightbox-in 0.15s ease-out; } @media (prefers-reduced-motion: reduce) { .lightbox-overlay { animation: none; } } @keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } } body.lightbox-open { overflow: hidden; } .lightbox-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 20px; } .lightbox-img { max-width: 100%; max-height: 100%; border-radius: 8px; cursor: zoom-in; } .lightbox-overlay.zoomed .lightbox-stage { display: block; overflow: auto; } .lightbox-overlay.zoomed .lightbox-img { max-width: none; max-height: none; margin: 0 auto; cursor: zoom-out; } .lightbox-bar { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)); } .lightbox-counter { color: rgba(255, 255, 255, 0.75); margin-right: 4px; } /* Buttons reuse the modal-button face but must read on the dark backdrop in both themes */ .lightbox-btn { min-height: 40px; color: #fff; border-color: rgba(255, 255, 255, 0.35); background: rgba(0, 0, 0, 0.35); } .lightbox-btn:hover { color: #fff; border-color: #fff; } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 56px; border: none; border-radius: 10px; background: rgba(0, 0, 0, 0.4); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; } .lightbox-nav:hover { background: rgba(0, 0, 0, 0.6); } .lightbox-prev { left: 10px; } .lightbox-next { right: 10px; } .team-cal-title-btn { background: none; border: none; padding: 0; font: inherit; font-weight: 600; color: var(--text); text-align: left; cursor: pointer; } .team-cal-title-btn:hover { color: var(--accent); } @media (max-width: 560px) { .cal-modal-row { grid-template-columns: 1fr; gap: 2px; } } .team-calweek-quiet { margin-top: 12px; text-align: center; font-size: var(--fs-2xs); color: var(--muted); opacity: 0.5; } .team-calweek-none { grid-column: 1 / -1; margin: 4px 2px; } .team-calweek-legend { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; margin-top: 2px; } .team-calweek-key { font-size: var(--fs-2xs); } /* Invite-list dropdown on calendar rows */ .team-cal-attendees { columns: 2; column-gap: 40px; } @media (max-width: 900px) { .team-cal-attendees { columns: 1; } } .team-cal-attendee { display: flex; align-items: baseline; gap: 8px; padding: 2px 0; font-size: var(--fs-sm); break-inside: avoid; } .team-cal-att-mark { font-weight: 700; color: var(--muted); flex-shrink: 0; } .team-cal-att-pos { color: var(--pos); } .team-cal-att-neg { color: var(--neg-text); } .team-cal-att-warn { color: var(--warn); } /* ── Macro-page FAQ accordion (faq.js) ── */ .faq-intro { margin: -4px 0 10px; } .faq-item { border: 1px solid var(--border-soft); border-radius: 10px; margin-top: 10px; overflow: hidden; } .faq-item[open] { border-color: var(--border); background: var(--panel-raised); } .faq-q { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; user-select: none; } .faq-q::-webkit-details-marker { display: none; } .faq-q:hover { background: var(--row-hover); } .faq-q-num { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xs); color: var(--accent-2); flex-shrink: 0; } .faq-q-text { flex: 1; font-weight: 600; min-width: 0; } .faq-audio-slot { flex-shrink: 0; display: inline-flex; } .faq-chevron { color: var(--muted); flex-shrink: 0; transition: transform 0.15s ease; } .faq-item[open] .faq-chevron { transform: rotate(180deg); } .faq-a { padding: 2px 14px 14px 40px; } .faq-a > :first-child { margin-top: 0; } @media (max-width: 640px) { .faq-a { padding-left: 14px; } } .faq-figure { margin: 12px 0 0; } .faq-figure img { display: block; max-width: min(640px, 100%); border-radius: 10px; border: 1px solid var(--border-faint); } /* ── Financials (QBO-native page) ── */ .fin-controls { align-items: center; gap: 10px; } .fin-close-label input { margin-left: 6px; } .fin-close-status { margin: 0 0 12px; } .qbo-chip { white-space: nowrap; } .fin-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-raised); } .fin-banner-warn { border-color: var(--warn); } .fin-connect-btn { display: inline-block; padding: 6px 14px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); text-decoration: none; font-weight: 600; } .fin-period-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .fin-granularity { margin-bottom: 0; } .fin-select { background: var(--panel-raised); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: var(--fs-md); } .fin-partial-note { grid-column: 1 / -1; margin: 0; } /* Four charts = 2×2 with big charts, never 4-across */ .chart-grid-2x2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; } @media (max-width: 900px) { .chart-grid-2x2 { grid-template-columns: 1fr; } } .fin-chart-block { background: var(--panel-raised); padding: 10px 12px 6px; min-width: 0; } .fin-chart-block h3 { margin: 0 0 4px; font-size: var(--fs-md); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); } /* Deep-dive pages (Revenue / Expenses / Cash) are chart-first, so their charts run tall — the condensed bites on Actuals keep their own heights via the .fin-bites rules below */ .fin-chart { height: 360px; } /* Full-row charts (revenue, expense categories): span both columns and get a little more height for the long history window */ .fin-chart-wide { grid-column: 1 / -1; } .fin-chart-wide .fin-chart { height: 420px; } /* Top Customers: the share-of-book pie and the ranked columns side by side in one wide block — one data set, two reads */ .fin-chart-pair { display: grid; grid-template-columns: 5fr 7fr; gap: 14px; } .fin-chart-pair .fin-chart { height: 360px; } @media (max-width: 900px) { .fin-chart-pair { grid-template-columns: 1fr; } } .fin-sync-note { margin-top: 12px; font-size: var(--fs-sm); } /* Panel fold: heavy content (statement tables, vendor detail) stays collapsed behind its heading until clicked open */ .panel-fold summary { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; cursor: pointer; list-style: none; user-select: none; } .panel-fold summary::-webkit-details-marker { display: none; } .panel-fold summary h2, .panel-fold summary h3 { margin: 0; } .panel-fold summary h3 { font-size: var(--fs-md); } .panel-fold summary::before { content: "▸"; color: var(--muted); font-size: var(--fs-sm); transition: transform 0.15s; } .panel-fold[open] summary::before { transform: rotate(90deg); } .panel-fold summary:hover h2, .panel-fold summary:hover h3 { color: var(--accent); } .panel-fold[open] summary { margin-bottom: 12px; } /* Gross Margin by Business Unit (Actuals page): unit tabs above the chart, the Map Income → COGS editor behind its fold */ #bu-panel .panel-fold { margin-top: 16px; } .bu-tabs { margin-bottom: 10px; } .bu-editor-row { display: flex; gap: 14px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--border-soft); } .bu-editor-row:first-child { border-top: none; } .bu-editor-income { flex: 0 0 220px; font-weight: 600; font-size: var(--fs-sm); } .bu-editor-cogs { display: flex; flex-wrap: wrap; gap: 6px 18px; } .bu-check { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--muted); cursor: pointer; } .bu-check:hover, .bu-check:has(input:checked) { color: var(--text); } .bu-editor-foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; } @media (max-width: 700px) { .bu-editor-row { flex-direction: column; gap: 8px; } .bu-editor-income { flex-basis: auto; } } /* Software Spend: breathing room between the deep-dive overview and the chart below it — the fold toggle, spend-total line, and chart were stacking flush against each other */ #sw-summary:not(:empty) { margin-bottom: 20px; } .sw-total { margin-top: 14px; font-size: var(--fs-sm); } /* Software Spend: the AI chip next to vendor names in the detail table */ .vendor-ai-chip { display: inline-block; margin-left: 8px; padding: 0 7px; border-radius: 999px; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--track-label); background: var(--accent-soft); color: var(--accent); } /* Overview bites: one full-width panel per row (Gross Profit / Income / COGS / Cash / Statements) — every chart gets the whole container and a readable height */ .fin-bites { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; } .fin-bites .panel { margin-bottom: 0; min-width: 0; } .fin-bites .fin-chart { height: 340px; } /* QuickBooks sync drawer: the connection chip, close-month picker, and re-pull button tuck behind a quiet header row on Actuals */ .fin-sync-drawer { margin-top: 10px; } .fin-sync-drawer .fin-toolbar { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: 10px; } .fin-sync-drawer[open] summary { margin-bottom: 0; } /* Owner-only full-history re-pull: quiet secondary button beside Run Monthly Close (button.armed carries the shared confirm state) */ .fin-resync-btn:hover { color: var(--text); border-color: var(--border); } /* Refresh-in-place (the kit's stale-while-revalidate face, promoted from the Financials period switcher): during a poll-driven re-render the stale tiles and charts stay on screen, dimmed under a centered spinner, until the fresh data arrives — never blanked. */ .is-refreshing { position: relative; pointer-events: none; } .is-refreshing > * { opacity: 0.35; transition: opacity 0.15s; } .is-refreshing::after { content: ""; position: absolute; top: calc(50% - 14px); left: calc(50% - 14px); width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); animation: spin 0.8s linear infinite; } @media (prefers-reduced-motion: reduce) { .is-refreshing::after { animation: spinner-pulse 1.6s ease-in-out infinite; } } /* Statement table: section/total rows + tree indentation */ .stmt-section { font-weight: 700; text-transform: uppercase; font-size: var(--fs-sm); letter-spacing: var(--track-label); } .stmt-total { font-weight: 700; } .stmt-parent { font-weight: 600; } .stmt-depth-1 { padding-left: 18px !important; } .stmt-depth-2 { padding-left: 36px !important; } .stmt-depth-3 { padding-left: 54px !important; } .qbo-disconnect-btn { background: none; border: none; color: var(--muted); font-size: var(--fs-xs); text-decoration: underline; cursor: pointer; padding: 0; } .qbo-disconnect-btn:hover { color: var(--neg); } /* Financials header: title row full-width, controls on their own row so the subtitle never gets squeezed into a tall narrow column */ .fin-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; } /* ── Keyboard focus ── One visible ring for keyboard navigation. :focus-visible only, so mouse clicks don't resurrect rings. Text inputs whose :focus rules suppress the outline at higher specificity still signal focus via the accent border. */ :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Every page-header primitive shares one bottom rhythm */ .company-header, .market-header { margin-bottom: 16px; } /* ── Toasts ── transient notices raised by toast() in common.js */ .toast-rail { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 120; /* above the metric-tip layer (100) */ pointer-events: none; } .toast { background: var(--panel-raised); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-ctl); box-shadow: var(--shadow-2); padding: 10px 16px; font-size: var(--fs-md); max-width: min(92vw, 480px); transition: opacity 0.25s ease; } .toast-out { opacity: 0; } .toast-error { border-color: var(--neg); } .toast-success { border-color: var(--pos); } @media (prefers-reduced-motion: reduce) { .toast { transition: none; } } /* Needs You pills on Home — chips that are links */ a.crm-pill { text-decoration: none; } a.crm-pill:hover { color: var(--accent); border-color: var(--accent); } /* Your Business tiles on Home — stat cells that are links */ .stat-link { display: block; color: inherit; text-decoration: none; } .stat-link:hover { border-color: var(--accent); } .stat-link .stat-label { color: var(--muted); } /* ── Command palette (⌘K) ── */ .palette-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 110; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; } .palette { width: min(560px, 100%); background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-2); overflow: hidden; } .palette input { width: 100%; box-sizing: border-box; border: none; border-bottom: 1px solid var(--border-faint); border-radius: 0; background: transparent; padding: 14px 16px; font: inherit; font-size: var(--fs-lg); color: var(--text); outline: none; } .palette input:focus { border-color: var(--border-faint); } .palette-list { max-height: min(48vh, 420px); overflow-y: auto; } .palette-row { display: flex; align-items: baseline; gap: 10px; padding: 9px 16px; cursor: pointer; color: var(--text); text-decoration: none; } .palette-row.sel { background: var(--row-hover); } .palette-type { flex: none; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); border: 1px solid var(--border-soft); border-radius: var(--r-pill); padding: 1px 8px; } .palette-sub { margin-left: auto; color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; } .palette-empty { padding: 14px 16px; color: var(--muted); } /* ── Index profile (/indices/{slug}) ── */ .ip-chart { height: 360px; } .ip-panel-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 12px; } .ip-panel-head h2 { margin: 0; } a.ip-export { text-decoration: none; display: inline-flex; align-items: center; } /* Range Heatmap: one cell per window, tinted by its return (the app's up/down pair around the panel's neutral), a mini close line inside and the figure in ink — the color never carries the value alone. Balanced grid: 11 windows fold to rows of 4 / 3 / 2 as space allows. */ .ip-heat { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; } .ip-heat-cell { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 8px; border: 1px solid var(--border-soft); border-radius: 12px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s; } .ip-heat-cell:hover { border-color: var(--border); } .ip-heat-cell.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } /* Windows the feed can't cover stay in the grid, greyed and inert — hiding them would make the gap look like a design choice */ .ip-heat-cell.unavailable, .ip-heat-cell:disabled { opacity: 0.45; cursor: not-allowed; border-style: dashed; background: transparent !important; } .ip-heat-cell.unavailable .ip-heat-pct { color: var(--muted); } .period-chip.unavailable, .period-chip:disabled { opacity: 0.4; cursor: not-allowed; border-style: dashed; } .period-chip.unavailable:hover { border-color: var(--border-soft); } .ip-compare-table td.unavailable { color: var(--muted); opacity: 0.6; } /* Provenance marks: anything that leans on the proxy ETF before the index feed begins wears ≈ and a "via SPY" tag; cells and rows get a hatched edge so the substitution is visible at a glance, never a second set of numbers behind a toggle. */ .ip-source-note { margin-top: 6px; max-width: 70ch; font-size: var(--fs-sm); } .period-chip.derived .chip-label { color: var(--warn, var(--muted)); } .ip-heat-cell.derived { border-style: dashed; } .ip-heat-cell.derived .ip-heat-key { color: var(--warn, var(--muted)); } .ip-heat-range { display: flex; justify-content: space-between; gap: 6px; } .ip-derived-tag { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--warn, var(--muted)); } .ip-compare-table td.derived { font-style: italic; } .ip-compare-note { margin: 10px 0 0; font-size: var(--fs-xs); } .ip-table td.ip-source { color: var(--muted); font-size: var(--fs-xs); } .ip-table tr.derived td { color: var(--muted); font-style: italic; } .ip-table tr.derived td.badge-up, .ip-table tr.derived td.badge-down { opacity: 0.75; } .ip-heat-head { display: flex; justify-content: space-between; align-items: baseline; } .ip-heat-key { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); } .ip-heat-pct { font-size: var(--fs-md); font-weight: 700; font-variant-numeric: tabular-nums; } .ip-heat-pct.badge-up, .ip-heat-pct.badge-down { background: none; padding: 0; } .ip-heat-plot { height: 64px; width: 100%; } .ip-heat-none { font-size: var(--fs-xs); } .ip-heat-range { font-size: var(--fs-2xs); font-variant-numeric: tabular-nums; } /* Cross-index table: the same tint as the heat cells, in a grid */ .ip-compare-table { width: 100%; } .ip-compare-table th.num, .ip-compare-table td.num { text-align: right; font-variant-numeric: tabular-nums; } .ip-compare-table td a { color: var(--text); text-decoration: none; font-weight: 600; } .ip-compare-table td a:hover { color: var(--accent); } .ip-compare-table tr.self td:first-child { box-shadow: inset 3px 0 0 var(--accent); } .ip-compare-table td.badge-up, .ip-compare-table td.badge-down { border-radius: 0; } /* Daily history table */ .ip-table-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; } .ip-table-controls input { background: var(--panel-raised); border: 1px solid var(--border); border-radius: 8px; color: inherit; padding: 6px 10px; font: inherit; font-size: var(--fs-sm); min-width: 200px; } .ip-table-wrap { max-height: 560px; overflow-y: auto; } .ip-table { width: 100%; } .ip-table th.num, .ip-table td.num { text-align: right; font-variant-numeric: tabular-nums; } .ip-table td.badge-up, .ip-table td.badge-down { background: none; border-radius: 0; } .ip-table td.badge-up { color: var(--pos); } .ip-table td.badge-down { color: var(--neg-text); } .ip-table-foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; } /* ── Carry page: S&P 500 vs the biggest carry unwinds ── */ .ch-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-left: auto; } .ch-chips { margin-top: 0; } .ch-chart { height: 400px; } .ch-chart .loading-note { padding-top: 160px; justify-content: center; } .ch-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 12px; } .ch-stat { background: var(--panel-raised); border: 1px solid var(--border-soft); border-radius: 10px; padding: 10px 12px; } .ch-stat-label { color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; } .ch-stat-value { font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; margin-top: 2px; } .ch-stat-value.badge-up { background: none; color: var(--pos); border-radius: 0; } .ch-stat-value.badge-down { background: none; color: var(--neg-text); border-radius: 0; } .ch-stat-sub { font-size: var(--fs-xs); margin-top: 2px; } .ch-details { margin-top: 14px; } .ch-details > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--border-soft); border-radius: 10px; font-weight: 600; } .ch-details > summary::-webkit-details-marker { display: none; } .ch-details > summary::before { content: "▸"; color: var(--muted); margin-right: 2px; } .ch-details[open] > summary::before { content: "▾"; } .ch-details > summary:hover { border-color: var(--border); } .ch-summary-hint { font-weight: 400; font-size: var(--fs-sm); } .ch-table-wrap { max-height: 640px; overflow: auto; margin-top: 10px; } .ch-table th { position: sticky; top: 0; background: var(--panel); z-index: 1; white-space: nowrap; } .ch-table tbody tr { cursor: pointer; } .ch-table tbody tr:hover, .ch-table tbody tr.hover { background: var(--accent-soft); } .ch-table tbody tr.flash { animation: ch-flash 1.6s ease-out; } @keyframes ch-flash { 0%, 40% { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); } 100% { background: transparent; } } .ch-table td.ch-rank { color: var(--muted); font-variant-numeric: tabular-nums; } .ch-table td.ch-date { white-space: nowrap; font-weight: 600; } .ch-table td.ch-note { min-width: 14ch; max-width: 22ch; } .ch-table td.ch-basket { font-weight: 600; } .ch-table th.ch-spx, .ch-table td.ch-spx { border-left: 1px solid var(--border-soft); } .ch-table th.ch-spx-first, .ch-table td.ch-spx-first { border-left-width: 2px; } .ch-foot { margin: 10px 0 0; font-size: var(--fs-xs); max-width: 90ch; } @media (max-width: 720px) { .ch-chart { height: 300px; } .ch-controls { margin-left: 0; } } /* Most rows predate the index feed; the ≈ on the date is enough — don't grey out the whole table the way the profile's OHLC table does */ .ch-table tr.derived td { color: inherit; font-style: normal; } .ch-table tr.derived td.badge-up, .ch-table tr.derived td.badge-down { opacity: 1; } .ch-table tr.derived td.ch-date { color: var(--muted); } .ch-reset { flex-direction: row; font-size: var(--fs-sm); } .ch-table { font-size: var(--fs-sm); } .ch-table th, .ch-table td { padding-left: 6px; padding-right: 6px; } .ch-table td.ch-note { white-space: normal; line-height: 1.25; } .ch-reset[hidden] { display: none; } /* ── Companies (health-care sector board) ── */ /* Header: the window chips sit under the dateline; the headline block carries the health-care-vs-market number like the tracker pages. */ .hc-header .hc-chips { margin-top: 12px; } .hc-header .company-title .muted a { white-space: nowrap; } .hc-headline-label { font-size: var(--fs-2xs); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: var(--track-label); } .hc-headline .index-value.badge-up { color: var(--pos); } .hc-headline .index-value.badge-down { color: var(--neg-text); } /* Sector strip: six tiles, three-up (two rows) so each has room for the return, breadth and its bar; two-up on phones. */ .hc-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; } .hc-strip .loading-note { grid-column: 1 / -1; } .hc-tile { position: relative; overflow: hidden; gap: 4px; padding: 12px 10px 14px; border-top: 3px solid var(--sector, var(--border-soft)); } .hc-tile .tracker-tile-label { text-align: center; line-height: 1.3; white-space: normal; } .hc-tile-value { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; line-height: 1.1; margin-top: 2px; } .hc-tile-sub { font-size: var(--fs-xs); white-space: nowrap; } .hc-breadth-bar { display: block; width: 100%; height: 4px; margin-top: 6px; border-radius: 999px; background: var(--border-soft); overflow: hidden; } .hc-breadth-fill { display: block; height: 100%; border-radius: 999px; background: var(--sector, var(--accent)); transition: width 0.3s ease; } /* Scoreboard chart + table */ .hc-chart { min-height: 300px; margin-bottom: 14px; } .hc-chart[hidden] { display: none; } .hc-table-wrap { margin-top: 4px; } .hc-sector-table th, .hc-sector-table td { padding: 6px 8px; } /* Beats .table-wrap td's nowrap so the note wraps inside the cell */ .table-wrap td.hc-sector-cell { min-width: 200px; max-width: 260px; white-space: normal; } .hc-sector-inner { display: flex; align-items: center; gap: 9px; } .hc-sector-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .hc-sector-dot-bench { background: transparent; box-shadow: inset 0 0 0 2px var(--muted); } .hc-sector-name { display: flex; flex-direction: column; min-width: 0; } .hc-sector-note { font-size: var(--fs-2xs); line-height: 1.3; white-space: normal; } .hc-sector-table .hc-active-col { background: var(--accent-soft); } .hc-sector-table th.hc-active-col { color: var(--accent-2); } .hc-sector-table .val-row:hover td { background: var(--accent-soft); } .hc-bench-row td { background: var(--panel-raised); } .hc-pct { font-variant-numeric: tabular-nums; font-weight: 600; } /* Verdict tally bar: cheap / in line / rich shares of the cohort */ .hc-verdict-bar { display: flex; width: 120px; height: 18px; border-radius: 999px; overflow: hidden; background: var(--panel-raised); font-size: var(--fs-2xs); font-weight: 700; line-height: 18px; text-align: center; } .hc-v-seg { display: block; min-width: 0; overflow: hidden; } .hc-v-cheap { background: var(--pos-soft); color: var(--pos); } .hc-v-inline { background: var(--verdict-fair-bg); color: var(--verdict-fair-text); } .hc-v-rich { background: var(--neg-soft); color: var(--neg-text); } /* Movers: winners | losers side by side, stacked on phones */ .hc-movers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .hc-movers-col { min-width: 0; overflow-x: auto; } .hc-movers-title { margin-bottom: 6px; } .hc-movers-table th, .hc-movers-table td { padding: 5px 6px; } .hc-movers-table td.val-company { max-width: 190px; overflow: hidden; } .hc-movers-table .val-logo { width: 24px; height: 24px; } .hc-move { font-size: var(--fs-md); } .hc-co-block { min-width: 0; } .hc-co-name { font-size: var(--fs-xs); max-width: 160px; overflow: hidden; text-overflow: ellipsis; } .hc-client-star { color: var(--pos); font-size: var(--fs-sm); } .hc-sector-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-2xs); font-weight: 600; white-space: nowrap; color: var(--sector, var(--muted)); box-shadow: inset 0 0 0 1px var(--sector, var(--border)); } @media (max-width: 1100px) { .hc-sector-note { display: none; } .hc-sector-cell { min-width: 150px; } } @media (max-width: 900px) { .hc-movers { grid-template-columns: 1fr; } } @media (max-width: 640px) { .hc-m-hide { display: none !important; } .hc-headline-label { display: block; } /* Identity column stays put while the rest scrolls (same trick as the leaderboard); the header row rides with it */ .hc-table-wrap th.val-company, .hc-table-wrap td.val-company, .hc-table-wrap th.hc-sector-cell, .hc-table-wrap td.hc-sector-cell { position: sticky; left: 0; z-index: 2; box-shadow: 6px 0 8px -6px var(--shadow-pop); } .hc-table-wrap th.val-company, .hc-table-wrap th.hc-sector-cell { z-index: 3; } .hc-table-wrap .val-row:hover td.val-company, .hc-table-wrap .val-row:hover td.hc-sector-cell { background: var(--panel); background-image: linear-gradient(var(--accent-soft), var(--accent-soft)); } .hc-movers-col { overflow-x: auto; } .hc-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .hc-tile { padding: 10px 8px 12px; } .hc-tile-value { font-size: var(--fs-xl); } .hc-header .company-price { text-align: left; } .hc-chart { min-height: 240px; } .table-wrap td.hc-sector-cell { min-width: 140px; max-width: 170px; } .hc-sector-note { display: none; } .hc-sector-table .stock-ticker { font-size: var(--fs-sm); } .hc-verdict-bar { width: 110px; } .hc-co-name { max-width: 120px; } } /* ── Companies Leaderboard on phones: the identity column stays put while the 20 metric columns scroll under it; the toolbar stacks. ── */ .leaderboard-back { margin: 0 0 6px; } .leaderboard-back a { font-size: var(--fs-sm); } .val-sticky th.fav-cell, .val-sticky td.fav-cell, .val-sticky th.val-company, .val-sticky td.val-company { position: sticky; z-index: 2; } .val-sticky th.fav-cell, .val-sticky td.fav-cell { left: 0; } .val-sticky th.val-company, .val-sticky td.val-company { left: 34px; box-shadow: 6px 0 8px -6px var(--shadow-pop); } .val-sticky th.fav-cell, .val-sticky th.val-company { z-index: 3; } @media (max-width: 640px) { .companies-toolbar { padding: 10px; gap: 8px; } .companies-toolbar .discover-controls { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .companies-toolbar .discover-search { grid-column: 1 / -1; width: 100%; } .companies-toolbar .discover-select { max-width: none; width: 100%; min-width: 0; } .companies-toolbar #filter-count { grid-column: 1 / -1; font-size: var(--fs-sm); } .companies-toolbar .export-btn { width: 100%; } .group-overview { padding: 10px; } /* Twelve tallies as a one-row swipe strip instead of six rows of two */ .group-summary { flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-bottom: 4px; scroll-snap-type: x proximity; } .sum-tile { flex: 0 0 auto; min-width: 112px; padding: 6px 10px; scroll-snap-align: start; } .val-table { font-size: var(--fs-sm); } .val-table th, .val-table td { padding: 5px 7px; } .val-logo { width: 22px; height: 22px; } .val-company-inner { gap: 7px; } .val-company .muted { max-width: 120px; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-xs); } .val-spark-cell { width: 70px; } .val-spark { width: 64px; height: 22px; } .fav-cell { width: 30px; } .val-sticky th.val-company, .val-sticky td.val-company { left: 30px; } .verdict-strip { gap: 8px; } .group-overview .verdict-count { padding: 5px 10px; gap: 6px; } } /* Sticky identity cells must stay opaque while metric cells slide under them — the translucent hover wash alone would let them ghost through */ .val-sticky .val-row:hover td.fav-cell, .val-sticky .val-row:hover td.val-company { background: var(--panel); background-image: linear-gradient(var(--accent-soft), var(--accent-soft)); } /* ── Carry page: When the Fed Printed ── */ .mp-chart { height: 420px; } .mp-episodes { margin-top: 14px; } .mp-episodes-title { margin: 0 0 8px; font-size: var(--fs-base); font-weight: 600; } .mp-table tbody tr { cursor: pointer; } .mp-table tbody tr:hover { background: var(--accent-soft); } .ch-overlay-chip { margin-left: 6px; } .ch-overlay-chip.active { border-color: var(--warn); background: var(--warn-soft); } /* ── Chat Map (owner only): the pipeline spine, the agent fan-out, and the verbatim-briefing accordions. All content arrives from /api/chat-map; these are pure layout. ── */ /* Chat Map reads at ~1.25x the site scale (dialed back from the old uniform 1.5x): hierarchy — the spine, stage cards, kickers — carries readability now, so the font tokens scale up only modestly inside the map containers; chips and tool rows carry their own sizes. */ #map-flow, #map-briefings { --fs-2xs: 14px; --fs-xs: 16px; --fs-sm: 17px; --fs-base: 20px; font-size: 17px; } /* Page-header extras: the Owner-only chip beside the title and the stat tiles chat-map.js fills from the live payload */ .map-header .company-title { flex: 1 1 320px; } .map-owner-chip { margin-left: 10px; vertical-align: 4px; border-color: var(--warn); color: var(--warn); background: var(--warn-soft); } .map-hero-stats { display: flex; gap: 12px; } .map-hero-stat { text-align: center; padding: 10px 20px; min-width: 84px; background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--r-tile); } .map-hero-num { font-family: var(--font-display); font-size: 26px; font-weight: 700; } .map-hero-label { font-size: 11px; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); } /* Section heads: display-size title + uppercase kicker */ .map-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; } .map-head h2 { font-size: var(--fs-3xl); margin: 0; } .map-kicker { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } #map-flow { display: flex; flex-direction: column; align-items: center; } .map-chip { display: inline-flex; align-items: center; padding: 2px 10px; border: 1px solid var(--border-soft); border-radius: var(--r-pill); font-size: 13px; font-weight: 600; letter-spacing: var(--track-label); color: var(--muted); line-height: 1.5; } /* The backup-model chip: dashed = contingency, not a second default */ .map-chip.map-fallback { border-style: dashed; opacity: 0.75; } /* The per-conversation web search opt-in: dashed like the fallback chip (a contingency the user reaches for), accent so it reads as a switch */ .map-chip.map-optional { border-style: dashed; color: var(--accent); border-color: var(--accent); } /* Pipeline stages down a gradient spine; highlight (the orchestrator) adds the gradient hairline + accent border */ .map-stage { width: min(720px, 100%); background: var(--panel-raised); border: 1px solid var(--border-soft); border-radius: var(--r-card); padding: 16px 22px; } .map-stage.highlight { border-color: rgba(var(--accent-glow), 0.45); position: relative; overflow: hidden; } .map-stage.highlight::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--gradient); } .map-stage-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .map-stage-head h3 { font-size: var(--fs-base); margin: 0; } .map-ico { display: flex; color: var(--muted); } .map-stage.highlight .map-ico { color: var(--accent-2); } .map-stage-line { display: flex; gap: 10px; font-size: var(--fs-sm); line-height: 1.5; margin-top: 5px; } .map-stage-head + .map-stage-line { margin-top: 8px; } .map-dot { color: var(--accent-2); flex: none; font-weight: 700; } .map-conn { position: relative; height: 62px; display: flex; align-items: center; justify-content: center; } .map-conn-stem { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: linear-gradient(180deg, rgba(var(--accent-glow), 0.55), rgba(var(--accent-glow), 0.2)); } .map-conn .map-chip { position: relative; background: var(--bg); font-size: 12px; text-transform: uppercase; } /* The dispatch fan-out into the agent grid's two columns */ .map-fan { width: 100%; max-width: 1200px; color: rgba(var(--accent-glow), 0.55); } .map-fan svg { display: block; width: 100%; height: auto; } /* Role lens: segmented control (amber = the active lens, as before) */ .map-lens { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 20px; } .map-seg { display: flex; gap: 6px; padding: 4px; flex-wrap: wrap; justify-content: center; border-radius: var(--r-pill); background: var(--bg); border: 1px solid var(--border-soft); } .map-seg button { font-family: inherit; cursor: pointer; font-size: 14px; font-weight: 700; padding: 5px 16px; border-radius: var(--r-pill); background: transparent; color: var(--muted); border: 1px solid transparent; } .map-seg button.active { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); } /* Agent cards: 2x2 grid, avatar tile + model chip + grants + meter */ .map-agents { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; } .map-agent { background: var(--panel-raised); border: 1px solid var(--border-soft); border-radius: var(--r-card); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; } .map-agent-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .map-agent-avatar { width: 44px; height: 44px; border-radius: var(--r-tile); flex: none; background: var(--panel); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 22px; } .map-agent-name { font-family: var(--font-display); font-size: 21px; font-weight: 700; flex: 1; margin: 0; } .map-agent-role { font-size: var(--fs-xs); line-height: 1.5; } .map-agents-note { font-size: 15px; line-height: 1.6; text-align: center; max-width: 880px; margin: 18px auto 0; } /* Access axes: per-tool grant chips colored by nav group, the client-filter note, and the role lens. Dimming (.locked/.dimmed) is the lens's whole statement — everything stays visible so the reader sees what the preset is missing. */ .map-grant { font-size: 13px; padding: 1px 8px; margin-left: 5px; vertical-align: 1px; } .map-grant.g-general { border-color: var(--muted); color: var(--muted); background: var(--muted-soft); } .map-grant.g-macro { border-color: var(--chart-blue); color: var(--chart-blue); background: var(--chart-blue-soft); } .map-grant.g-work { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .map-grant.g-financials { border-color: var(--pos); color: var(--pos); background: var(--pos-soft); } .map-ungated { border-style: dashed; } .map-client { border-color: var(--warn); color: var(--warn); background: var(--warn-soft); } .map-grant.dimmed { opacity: 0.32; } .map-agent-grants { display: flex; flex-wrap: wrap; gap: 6px; } .map-agent-grants .map-grant { margin-left: 0; } .map-agent-count { display: flex; align-items: center; gap: 12px; font-size: var(--fs-2xs); font-weight: 600; margin-top: auto; } .map-meter { flex: 1 1 60px; max-width: 160px; height: 5px; border-radius: var(--r-pill); background: var(--muted-soft); overflow: hidden; } .map-meter-fill { display: block; height: 100%; border-radius: var(--r-pill); background: var(--gradient); } /* Briefing accordions: chevron summary rows, tool grid, verbatim pre */ .map-briefing { border: 1px solid var(--border-soft); border-radius: var(--r-card); background: var(--panel-raised); padding: 14px 20px; margin: 12px 0; } .map-briefing[open] { border-color: var(--border); } .map-briefing > summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .map-briefing > summary::-webkit-details-marker { display: none; } .map-briefing > summary::before { content: ""; width: 8px; height: 8px; flex: none; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform 0.15s; } .map-briefing[open] > summary::before { transform: rotate(45deg); border-color: var(--accent-2); } /* The routing-rules accordion nested in the orchestrator card */ .map-briefing.map-inline { margin: 12px 0 2px; background: var(--panel); } .map-brief-emoji { font-size: 20px; } .map-brief-name { font-family: var(--font-display); font-size: 19px; font-weight: 700; flex: 1; margin: 0; } .map-sum-count { font-size: var(--fs-2xs); font-weight: 600; } .map-tools { margin: 4px 0 8px; } .map-tools-head { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 14px 0 8px; } .map-tools-head .map-meter { flex: 0 1 140px; } .map-tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; } /* Briefing tool rows: name + chips up top, the model-visible doc line below, and a group-colored edge so a toolbox scans by data family */ .map-tool { font-size: var(--fs-sm); margin: 0; padding: 8px 12px; background: var(--bg); border: 1px solid var(--border-faint); border-left: 3px solid var(--border-soft); border-radius: var(--r-sm); } .map-tool-head { display: flex; align-items: center; flex-wrap: wrap; row-gap: 3px; } .map-tool-head code { margin-right: 2px; font-size: 15px; } .map-tool-doc { font-size: var(--fs-2xs); margin-top: 3px; line-height: 1.45; } .map-tool.edge-general { border-left-color: var(--muted); } .map-tool.edge-macro { border-left-color: var(--chart-blue); } .map-tool.edge-work { border-left-color: var(--accent); } .map-tool.edge-financials { border-left-color: var(--pos); } .map-tool.edge-ungated { border-left-style: dashed; } .map-tool.locked { opacity: 0.38; border-left-color: var(--border-soft); } .map-pre { font-size: 15px; line-height: 1.6; white-space: pre-wrap; overflow-x: auto; max-height: 480px; overflow-y: auto; border: 1px solid var(--border-soft); border-radius: var(--r-ctl); background: var(--code-bg); padding: 14px 18px; margin: 8px 0 4px; } @media (max-width: 900px) { .map-agents, .map-tool-grid { grid-template-columns: 1fr; } .map-fan { display: none; } .map-hero-stats { width: 100%; } } /* ── Company Goals (/goals) ── the generated headline as the north star, a plan-health card, the year's checklist beside the goals board, the moat inventory as a wall beside the generated ledger and pillars, plays per unit, the doctrine, and history. Authored sections edit in place (one section or one goal at a time); generated ones are rewritten by the goals job. */ .company-header.goals-hero { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: stretch; padding: 18px 22px; } .goals-hero-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .goals-hero-id h2 { margin: 0; } .goals-headline { margin: 2px 0 0; font-family: var(--font-display); font-size: clamp(26px, 3vw, 40px); line-height: 1.08; letter-spacing: -0.02em; max-width: 22ch; background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .goals-headline-pending { background: none; color: var(--muted); font-weight: 500; } .goals-hero-sub { max-width: 68ch; line-height: 1.5; font-size: var(--fs-md); } .goals-actions { display: flex; align-items: center; gap: 8px; margin-top: 4px; } .goals-regen { background: transparent; color: var(--text); border: 1px solid var(--border); } .goals-regen:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } .goals-health { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: var(--r-tile); background: color-mix(in srgb, var(--bg) 45%, transparent); border: 1px solid var(--border-soft); align-self: start; } .goals-health .goals-eyebrow { color: var(--muted); margin: 0; } .goals-health-row { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); } .goals-health-text { flex: 1; min-width: 0; } .goals-health-count { font-family: var(--font-display); font-weight: 700; } .goals-health-rule { height: 1px; background: var(--border-faint); } .goals-health .spinner { width: 12px; height: 12px; border-width: 2px; flex-shrink: 0; } .goals-bar { height: 6px; border-radius: 3px; background: var(--muted-soft); overflow: hidden; } .goals-bar-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--pos), var(--pos-deep)); } .goals-eyebrow { display: flex; align-items: baseline; gap: 10px; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } .goals-eyebrow-authored { color: var(--text); } .goals-eyebrow-warn { color: var(--warn); } .goals-note { font-size: var(--fs-xs); color: var(--muted); font-weight: 400; letter-spacing: 0; text-transform: none; } .goals-empty { font-size: var(--fs-sm); margin: 8px 0 0; } .goals-rule { height: 1px; background: var(--border-faint); margin: 12px 0; } .goals-spacer { flex: 1; } .goals-n { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.08em; color: var(--accent); flex-shrink: 0; } .goals-ico { display: inline-flex; width: 14px; height: 14px; flex-shrink: 0; } .goals-ico svg { width: 100%; height: 100%; } .goals-pip { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--muted); box-shadow: 0 0 0 3px color-mix(in srgb, var(--muted) 22%, transparent); } .goals-pip-pos { background: var(--pos); box-shadow: 0 0 0 3px var(--pos-soft); } .goals-pip-warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); } .goals-pip-info { background: var(--chart-blue); box-shadow: 0 0 0 3px var(--chart-blue-soft); } .goals-chip { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; border-radius: var(--r-pill); padding: 2px 8px; border: 1px solid var(--border-soft); color: var(--muted); } /* Panels: authored ones carry a text-colored rail, generated ones the accent wash */ .goals-main .panel { border: 1px solid var(--border-faint); border-radius: var(--r-card); margin-bottom: 0; } .goals-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; } .goals-panel-head h2 { margin: 0; display: flex; align-items: center; } .goals-panel-head-eyebrow { align-items: baseline; } .goals-panel-head-eyebrow .goals-eyebrow { margin: 0; } .goals-edit-btn { margin-left: auto; background: transparent; color: var(--muted); border: 1px solid var(--border-faint); font-size: var(--fs-xs); font-weight: 600; padding: 4px 10px; border-radius: var(--r-ctl); } .goals-edit-btn:hover { color: var(--accent); border-color: var(--accent); } .goals-tally { margin-left: auto; font-size: var(--fs-xs); } .goals-tally-all { color: var(--pos); border-color: color-mix(in srgb, var(--pos) 35%, transparent); } .goals-row { display: grid; gap: 20px; align-items: start; margin-bottom: 20px; } .goals-row-now { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .goals-row-moat { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; } .goals-row-moat .panel { display: flex; flex-direction: column; } .goals-row-plays, .goals-row-doctrine { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Scoreboard */ .goals-scoreboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 20px; } .goals-tile { --tone: var(--muted); padding: 12px 14px 10px; border: 1px solid var(--border-faint); border-left: 3px solid var(--tone); border-radius: var(--r-tile); background: var(--panel); display: flex; flex-direction: column; gap: 3px; } .goals-tile-pos { --tone: var(--pos); } .goals-tile-warn { --tone: var(--warn); } .goals-tile-label { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); } .goals-tile-value { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); line-height: 1.2; letter-spacing: -0.01em; } .goals-tile-sub { font-size: var(--fs-xs); color: var(--muted); line-height: 1.35; } .goals-tile-source { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tone); margin-top: 4px; } /* The year's checklist */ .goals-checklist { display: flex; flex-direction: column; gap: 8px; } .goals-check { display: flex; gap: 12px; align-items: flex-start; padding: 11px 14px; cursor: pointer; border-radius: var(--r-tile); border: 1px solid var(--border-faint); background: var(--panel-raised); font-size: var(--fs-md); line-height: 1.45; font-weight: 600; } .goals-check:hover { border-color: var(--border-soft); } .goals-check input { accent-color: var(--pos); width: 16px; height: 16px; flex-shrink: 0; transform: translateY(2px); } .goals-check .goals-n { margin-top: 3px; } .goals-check.is-done { border-color: color-mix(in srgb, var(--pos) 35%, transparent); } .goals-check.is-done .goals-check-text { text-decoration: line-through; color: var(--muted); font-weight: 500; } .goals-check.is-done .goals-n { color: var(--pos); } .goals-check-text { flex: 1; } .goals-watch { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-tile); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 6%, var(--panel-raised)); } .goals-watch-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; } .goals-watch-head .goals-eyebrow { margin: 0; } .goals-watch-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } .goals-watch-list li { display: flex; gap: 9px; align-items: baseline; font-size: var(--fs-sm); line-height: 1.45; } .goals-watch-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); flex-shrink: 0; transform: translateY(-2px); } /* Goals board */ .goals-unit-block { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; --unit: var(--chart-blue); } .goals-unit-block[data-unit="acnu"] { --unit: var(--dt-acnu); } .goals-unit-block:last-child { margin-bottom: 0; } .goals-unit-rail { display: flex; align-items: baseline; gap: 10px; border-left: 3px solid var(--unit); padding-left: 10px; } .goals-unit-name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); } .goals-goal-list { display: flex; flex-direction: column; gap: 8px; } .goals-goal { --tone: var(--chart-blue); display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--r-tile); border: 1px solid var(--border-faint); background: var(--panel-raised); } .goals-goal[data-status="on_track"], .goals-goal[data-status="done"] { --tone: var(--pos); border-color: color-mix(in srgb, var(--pos) 35%, transparent); } .goals-goal[data-status="at_risk"] { --tone: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); } .goals-goal[data-status="done"] .goals-goal-text { text-decoration: line-through; color: var(--muted); } .goals-goal-top { display: flex; gap: 10px; align-items: flex-start; } .goals-goal .goals-pip { margin-top: 7px; background: var(--tone); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone) 22%, transparent); } .goals-goal-text { flex: 1; min-width: 0; font-size: var(--fs-sm); font-weight: 600; line-height: 1.4; } .goals-goal .goals-chip { margin-top: 2px; } .goals-goal .goals-chip-status { color: var(--tone); border-color: color-mix(in srgb, var(--tone) 40%, transparent); } .goals-goal-evidence { margin-left: 18px; padding-left: 8px; border-left: 2px solid var(--border-faint); font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; } .goals-pencil { background: none; border: none; padding: 2px; color: var(--muted); opacity: 0; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; flex-shrink: 0; } .goals-goal:hover .goals-pencil, .goals-pencil:focus-visible { opacity: 1; } .goals-pencil:hover { color: var(--accent); background: var(--accent-soft); } .goals-goal-editing { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); gap: 10px; } .goals-goal-form-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: end; } /* Forms shared by the sections */ .goals-form { display: flex; flex-direction: column; gap: 10px; } .goals-field { display: flex; flex-direction: column; gap: 4px; } .goals-field > label { font-size: var(--fs-2xs); color: var(--muted); font-weight: 600; } .goals-input, .goals-textarea, .goals-select { font: inherit; font-size: var(--fs-sm); color: var(--text); background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--r-ctl); padding: 8px 10px; width: 100%; box-sizing: border-box; } .goals-input:focus, .goals-textarea:focus, .goals-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .goals-textarea { resize: vertical; min-height: 72px; line-height: 1.5; font-size: var(--fs-md); } .goals-seg { display: inline-flex; border: 1px solid var(--border-soft); border-radius: var(--r-ctl); overflow: hidden; } .goals-seg-btn { background: transparent; color: var(--muted); border: none; border-radius: 0; padding: 6px 10px; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .goals-seg-btn + .goals-seg-btn { border-left: 1px solid var(--border-faint); } .goals-seg-btn.on { background: var(--accent-soft); color: var(--accent); } .goals-form-actions { display: flex; align-items: center; gap: 8px; } .goals-form-actions button { padding: 7px 14px; font-size: var(--fs-sm); } .goals-danger { background: none; border: 1px solid var(--border-faint); color: var(--muted); } .goals-danger:hover, .goals-danger.armed { color: var(--neg-text); border-color: var(--neg); } .goals-list-edit { display: flex; flex-direction: column; gap: 6px; } .goals-add { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px dashed var(--border-soft); color: var(--muted); font-weight: 600; font-size: var(--fs-sm); padding: 6px 12px; border-radius: var(--r-ctl); } .goals-add:hover { color: var(--accent); border-color: var(--accent); } .goals-x { background: none; border: 1px solid var(--border-faint); color: var(--muted); border-radius: var(--r-ctl); width: 34px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .goals-x:hover { color: var(--neg-text); border-color: var(--neg); } .goals-asset-row { display: grid; grid-template-columns: minmax(0, 1fr) 200px auto 34px; gap: 6px; align-items: center; } .goals-held { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--muted); padding: 0 6px; white-space: nowrap; } .goals-held input { accent-color: var(--pos); width: 16px; height: 16px; } /* Moat inventory: the wall in running bond over a mortar grain, lit bricks for what is held, then the items in two columns */ .goals-wall { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 12px 14px 10px; border-radius: var(--r-tile); border: 1px solid var(--border-soft); background: linear-gradient(180deg, var(--panel-raised), color-mix(in srgb, var(--panel-raised) 60%, var(--panel))); } .goals-wall::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 27px, var(--border-faint) 27px 28px); } .goals-wall::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--pos), color-mix(in srgb, var(--pos) 15%, transparent) 60%, transparent); } .goals-wall-row { position: relative; display: grid; grid-template-columns: 148px minmax(0, 1fr) 76px; gap: 10px; align-items: center; height: 28px; } .goals-wall-kind { font-size: 11px; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .goals-wall-row.is-empty .goals-wall-kind { color: var(--muted); } .goals-bricks { display: flex; gap: 4px; height: 22px; } .goals-wall-row.is-odd .goals-bricks { padding-left: 26px; } .goals-brick { flex: 1; max-width: 120px; border-radius: 4px; border: 1.5px solid var(--tick-line); box-sizing: border-box; background: color-mix(in srgb, var(--bg) 35%, transparent); } .goals-brick.is-held { background: linear-gradient(180deg, color-mix(in srgb, var(--pos) 80%, white), var(--pos-deep)); border-color: var(--pos); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 0 12px var(--pos-zone); } .goals-brick-empty { border-style: dashed; opacity: 0.45; max-width: 84px; } .goals-wall-count { font-size: var(--fs-2xs); color: var(--muted); text-align: right; white-space: nowrap; } .goals-wall-count.is-held { color: var(--pos); font-weight: 700; } .goals-inv-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; margin-top: 12px; } .goals-inv-item { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-xs); line-height: 1.35; color: var(--muted); } .goals-inv-item.is-held { color: var(--text); font-weight: 600; } .goals-inv-mark { color: var(--muted); margin-top: 2px; } .goals-inv-item.is-held .goals-inv-mark { color: var(--pos); } .goals-inv-text { flex: 1; min-width: 0; } /* The Moat: the ledger as one divided plate, the durable side lit */ .goals-ledger { position: relative; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--border-soft); border-radius: var(--r-tile); overflow: hidden; background: var(--panel-raised); } .goals-ledger::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(180deg, transparent, var(--border) 25%, var(--border) 75%, transparent); } .goals-ledger-col { --tone: var(--muted); padding: 14px 18px; display: flex; flex-direction: column; } .goals-ledger-durable { --tone: var(--pos); background: radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--pos) 12%, transparent), transparent 60%); } .goals-ledger-head { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--tone); margin-bottom: 10px; } .goals-ledger ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } .goals-ledger li { display: flex; gap: 9px; align-items: baseline; font-size: var(--fs-md); line-height: 1.35; } .goals-ledger li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tone); flex-shrink: 0; transform: translateY(-2px); } .goals-ledger-clonable li { color: var(--muted); } .goals-ledger-durable li { font-weight: 600; } .goals-ledger-vs { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; background: var(--panel); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .goals-ledger .loading-note { grid-column: 1 / -1; padding: 14px 18px; } /* Pillars: a full-width row under the two cards, watermark numerals, an accent rail */ .goals-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-bottom: 20px; } .goals-pillars:empty { display: none; } .goals-pillar { position: relative; overflow: hidden; border: 1px solid var(--border-faint); border-top: 2px solid var(--accent); border-radius: var(--r-tile); padding: 14px 16px; background: var(--panel-raised); display: flex; flex-direction: column; gap: 4px; } .goals-pillar-wm { position: absolute; right: 10px; top: 2px; font-family: var(--font-display); font-weight: 700; font-size: 64px; line-height: 1; letter-spacing: -0.04em; color: color-mix(in srgb, var(--accent) 10%, transparent); pointer-events: none; } .goals-pillar-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; padding-right: 56px; } .goals-pillar-name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-base); line-height: 1.25; } .goals-pillar-label { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); margin-top: 6px; } .goals-pillar-text { font-size: var(--fs-sm); line-height: 1.5; } /* Plays per unit */ .goals-unit { --unit: var(--chart-blue); border-top: 2px solid var(--unit) !important; } .goals-unit[data-unit="acnu"] { --unit: var(--dt-acnu); } .goals-unit-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; } .goals-unit-head h2 { margin: 0; font-family: var(--font-display); font-size: var(--fs-2xl); letter-spacing: -0.01em; } .goals-unit-kicker { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--unit); } .goals-unit-moat { border-left: 3px solid var(--unit); padding: 10px 14px; margin: 0 0 12px; background: color-mix(in srgb, var(--unit) 6%, transparent); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: var(--fs-sm); line-height: 1.55; } .goals-unit-moat p { margin: 0 0 8px; } .goals-unit-moat p:last-child { margin: 0; } .goals-plays { display: flex; flex-direction: column; gap: 8px; } .goals-play { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-tile); border: 1px solid var(--border-faint); background: var(--panel-raised); } .goals-play .goals-n { color: var(--unit); margin-top: 3px; } .goals-play-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); line-height: 1.3; } .goals-play-detail { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; margin-top: 2px; } /* Doctrine */ .goals-purpose { border-left: 3px solid var(--text) !important; } .goals-thesis { position: relative; overflow: hidden; border-color: var(--border-soft) !important; } .goals-thesis::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 55%); } .goals-thesis > * { position: relative; } .goals-prose { font-size: var(--fs-md); line-height: 1.6; } .goals-prose-lg { font-size: var(--fs-base); } .goals-prose p { margin: 0 0 12px; } .goals-prose p:last-child { margin: 0; } .goals-changes { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border-faint); } .goals-changes .goals-eyebrow { margin-bottom: 6px; } .goals-changes-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; } .goals-changes-list li { display: flex; gap: 9px; align-items: baseline; font-size: var(--fs-sm); line-height: 1.45; } .goals-delta { color: var(--accent); width: 12px; height: 12px; transform: translateY(1px); } /* History */ .goals-hist-latest { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); margin-left: auto; min-width: 0; } .goals-hist-latest:empty { display: none; } .goals-hist-peek { max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .goals-hist-latest + .goals-edit-btn { margin-left: 0; } .goals-hist { display: flex; flex-direction: column; gap: 8px; } .goals-hist-row { --tone: var(--text); border: 1px solid var(--border-faint); border-left: 3px solid var(--tone); border-radius: var(--r-tile); background: var(--panel-raised); padding: 10px 14px; } .goals-hist-plan { --tone: var(--accent); } .goals-hist-plan .goals-hist-kind { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); } .goals-hist-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; } .goals-hist-headline { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); margin-bottom: 4px; } .goals-hist-summary { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; } .goals-hist-summary li { font-size: var(--fs-sm); color: var(--muted); line-height: 1.4; } .goals-restore { margin-left: auto; background: none; border: 1px solid var(--border-soft); color: var(--muted); font-size: var(--fs-xs); font-weight: 600; padding: 3px 10px; border-radius: var(--r-pill); } .goals-restore:hover { color: var(--accent); border-color: var(--accent); } .goals-restore.armed { color: var(--warn); border-color: var(--warn); } @media (max-width: 1040px) { .company-header.goals-hero { grid-template-columns: 1fr; } .goals-row-now, .goals-row-moat, .goals-row-plays, .goals-row-doctrine { grid-template-columns: 1fr; } } @media (max-width: 640px) { .goals-ledger { grid-template-columns: 1fr; } .goals-ledger::before, .goals-ledger-vs { display: none; } .goals-ledger-durable { border-top: 1px solid var(--border-soft); } .goals-inv-list { grid-template-columns: 1fr; } .goals-wall-row { grid-template-columns: 104px minmax(0, 1fr) 64px; } .goals-wall-row.is-odd .goals-bricks { padding-left: 12px; } .goals-goal-form-row { grid-template-columns: 1fr; } .goals-asset-row { grid-template-columns: 1fr 34px; } .goals-wall-row { grid-template-columns: 110px minmax(0, 1fr) 70px; } .goals-pencil { opacity: 1; } .goals-hist-latest { display: none; } } /* ── Macro category pages (/economy, /money, /markets) ── The category's tracker pages as cards ranked by what is moving — macro_category.js over /api/macro/. The lead card spans the grid; the rest sit two or three across. Cards are links: the whole panel opens the page. The hue pip from the nav row carries into the hero title so the page and its menu entry read as one thing. */ .cat-hero { align-items: flex-end; } .cat-hero .company-title h2 { display: flex; align-items: center; gap: 12px; } .cat-hero .hero-icon { color: var(--sec, var(--accent)); } .cat-hero-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: var(--fs-sm); } .cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; margin-bottom: 16px; } .cat-card { display: flex; flex-direction: column; gap: 10px; margin-bottom: 0; min-width: 0; color: var(--text); text-decoration: none; transition: border-color 0.15s ease, transform 0.15s ease; } .cat-card:hover { border-color: var(--accent); color: var(--text); transform: translateY(-1px); } .cat-lead { grid-column: 1 / -1; } .cat-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .cat-card-icon { display: inline-flex; } .cat-card-icon .hero-icon { width: 30px; height: 30px; margin: 0; } .cat-card-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); line-height: 1.2; } .cat-lead .cat-card-title { font-size: var(--fs-2xl); } .cat-chip { margin-left: auto; font-size: var(--fs-2xs); } .cat-card-role { font-size: var(--fs-sm); } .cat-body { display: flex; flex-direction: column; gap: 10px; } .cat-why { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-md); line-height: 1.4; font-weight: 600; } .cat-why li { display: flex; gap: 8px; align-items: baseline; } .cat-why li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.85; position: relative; top: -1px; } .cat-why-scheduled { color: var(--text); } .cat-why-move { color: var(--text); } .cat-quiet { font-size: var(--fs-md); } .cat-stat { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; } .cat-story { font-size: var(--fs-md); line-height: 1.5; padding: 10px 12px; border-left: 3px solid var(--sec, var(--accent)); background: var(--panel-raised); border-radius: 0 8px 8px 0; } .cat-tape { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; } .cat-move-v { font-weight: 700; } .cat-next { font-size: var(--fs-sm); } .cat-spark { width: 100%; height: 44px; } .cat-lead .cat-spark { height: 64px; } .cat-fresh { font-size: var(--fs-2xs); } .cat-open { margin-top: auto; font-weight: 700; font-size: var(--fs-md); color: var(--accent); } .cat-foot { font-size: var(--fs-sm); max-width: 72ch; } /* The Economy's signal strip: nowcast tiles + the recession composite, three across, above the ranked cards */ .cat-signals { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 20px; margin-bottom: 20px; } .sig-tile { display: flex; flex-direction: column; gap: 10px; margin-bottom: 0; min-width: 0; } .sig-head { display: flex; flex-direction: column; gap: 2px; } .sig-sub { font-size: var(--fs-2xs); } .sig-big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .sig-value { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-3xl, 2rem); line-height: 1; font-variant-numeric: tabular-nums; } .sig-delta { font-size: var(--fs-sm); font-weight: 700; } .sig-spark { width: 100%; height: 48px; } .sig-foot { font-size: var(--fs-2xs); line-height: 1.4; } .sig-rows { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; } .sig-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; } .sig-composite { align-self: flex-start; font-size: var(--fs-2xs); } .sig-gauges { display: flex; flex-direction: column; gap: 8px; } .sig-gauge { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; } .sig-chip { font-size: var(--fs-3xs, 0.62rem); } .sig-gauge-v { font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; } .sig-gauge-t { grid-column: 2; font-size: var(--fs-2xs); } /* What it means for the business: four decision tiles, 2×2 */ .biz-panel { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; } .biz-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; } .biz-tile { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-left: 3px solid var(--sec, var(--accent)); background: var(--panel-raised); border-radius: 0 8px 8px 0; min-width: 0; color: var(--text); text-decoration: none; } a.biz-tile:hover { background: var(--muted-soft); color: var(--text); } .biz-label { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); } .biz-fact { font-size: var(--fs-md); line-height: 1.45; font-variant-numeric: tabular-nums; } .biz-read { font-size: var(--fs-sm); line-height: 1.45; } /* The release scoreboard: one grid row per release, headers once */ .rel-panel { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; } .rel-rows { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; } .rel-row { display: grid; align-items: baseline; gap: 4px 14px; padding: 9px 6px; grid-template-columns: minmax(150px, 1.5fr) 0.8fr 0.8fr 1fr 1.3fr 1.4fr; border-top: 1px solid var(--border-faint); font-size: var(--fs-sm); } .rel-row.rel-headrow { border-top: 0; padding-top: 0; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } .rel-row.rel-fresh { background: var(--muted-soft); border-radius: 6px; } .rel-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .rel-label { font-weight: 700; } .rel-tier { color: var(--sec, var(--accent)); letter-spacing: 1px; font-size: var(--fs-2xs); } .rel-actual { font-weight: 700; } .rel-sub { font-size: var(--fs-2xs); } .rel-cell { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .rel-cell::before { display: none; } @media (max-width: 760px) { .biz-grid { grid-template-columns: 1fr; } .rel-row.rel-headrow { display: none; } .rel-row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 4px; } .rel-name { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; } .rel-cell::before { display: block; content: attr(data-h); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } } @media (max-width: 760px) { /* One column on the phone: the blurb needs the width more than the stamp needs the right edge */ .cat-hero { flex-direction: column; align-items: stretch; gap: 12px; } .cat-hero-meta { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; } }