/* ============================================================ Bullet · Onboarding Ops dashboard ------------------------------------------------------------ Linear / Stripe-style admin dashboard. White surfaces, hairline dividers, ink type, yellow accent used sparingly for high-signal numbers + statuses. Distinct from the warm-cream onboarding product itself — this is an internal tool. ============================================================ */ :root { --bg: #FFFFFF; /* was #FAFAF7 — flip back to reverse */ --surface: #FFFFFF; --hairline: #ECECEC; --hairline-strong: #DDDDDD; --ink: #1A1A1A; --ink-soft: #2C2C2C; --muted: #6B6B6B; --faint: #9E9E9E; --accent: #FFE000; --accent-ink: #1A1A1A; /* Bullet's status-pill hexes (Peter's own picks, invoice dashboard 9 Jul) — one legend across the app and the CRM: a red here = a red there. */ --good: #0e9f6e; --warn: #d97706; --bad: #e11d48; --ring: rgba(0,0,0,0.06); --shadow-sm: 0 1px 0 rgba(0,0,0,0.04); --shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px var(--hairline); --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px; /* Tint families — light values are the original hand-picked hexes. The dark theme collapses each family to a dark equivalent, so every tinted card/border/pill flips with one attribute on . */ --ink-contrast: #FFFFFF; /* text/fills sitting ON an ink background */ --ink-hover: #000000; --tooltip-line: rgba(255,255,255,0.15); --tooltip-soft: rgba(255,255,255,0.78); --warm-bg-0: #FFFDF7; --warn-bg-1: #FFF7EC; --warn-bg-2: #FFF4E2; --warn-bg-3: #FDEBD2; --warn-line-1: #F2DCBB; --warn-line-2: #F0D9B0; --warn-line-3: #E4C79A; --accent-bg-1: #FFFCE0; --accent-bg-2: #FFF9E0; --accent-bg-3: #FFFAE3; --accent-line-1: #F0E0A0; --accent-line-2: #F0E8B0; --bad-bg-1: #FCEDEA; --bad-line-1: #F1CDC6; --bad-line-2: #F7D9D2; --good-bg-1: #F6FAF7; --good-bg-2: #EFF6F1; --good-bg-3: #EAF4EE; --good-bg-4: #DFF0E6; --good-bg-5: #DFF2E7; --good-line-1: #E4E9E0; --good-line-2: #CFE5D8; --good-line-3: #B9D4C4; --good-line-4: #C4E0CF; --good-line-5: #ABD4BC; --info-bg-1: #F1F3F8; --info-bg-2: #EAF1FA; --info-line-1: #DDE2ED; --info-ink: #2F5C8F; --info-ink-2: #55607A; --chip-bg: #F4F4F2; --chip-line: #D8D8D2; /* One family throughout — Inter, the app's face (Peter, 20 Aug). The CRM's Fraunces/Manrope voice retired; internal tool now sounds like the product. */ --font-display: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; } /* ─── Theme toggles (topbar, js/theme.js) ──────────────────────────── data-ground="grey" restores the warm grey page ground; data-theme="dark" flips the whole token set. Both persist in localStorage. Dark is declared after ground, so dark wins. */ html[data-ground="grey"] { --bg: #FAFAF7; } html[data-theme="dark"] { color-scheme: dark; --bg: #161616; --surface: #1F1F1E; --hairline: #2E2E2C; --hairline-strong: #3E3E3B; --ink: #F2F2F0; --ink-soft: #DEDEDA; --muted: #A0A099; --faint: #787872; --ring: rgba(255,255,255,0.08); --shadow-sm: 0 1px 0 rgba(0,0,0,0.4); --shadow-card: 0 1px 2px rgba(0,0,0,0.5), 0 0 0 1px var(--hairline); --ink-contrast: #161616; --ink-hover: #FFFFFF; --tooltip-line: rgba(0,0,0,0.18); --tooltip-soft: rgba(0,0,0,0.66); --warm-bg-0: #211F1A; --warn-bg-1: #2B2214; --warn-bg-2: #2B2214; --warn-bg-3: #33281A; --warn-line-1: #57431F; --warn-line-2: #57431F; --warn-line-3: #57431F; --accent-bg-1: #2B2818; --accent-bg-2: #2B2818; --accent-bg-3: #2B2818; --accent-line-1: #57511F; --accent-line-2: #57511F; --bad-bg-1: #33191E; --bad-line-1: #5C2A31; --bad-line-2: #5C2A31; --good-bg-1: #16251C; --good-bg-2: #16251C; --good-bg-3: #182A20; --good-bg-4: #1B3325; --good-bg-5: #1B3325; --good-line-1: #2C4A38; --good-line-2: #2C4A38; --good-line-3: #33573F; --good-line-4: #33573F; --good-line-5: #33573F; --info-bg-1: #1A2230; --info-bg-2: #1A2230; --info-line-1: #2E3B54; --info-ink: #8FB4E3; --info-ink-2: #9AA6C2; --chip-bg: #262624; --chip-line: #3E3E3B; } .theme-toggle { display: inline-flex; gap: 4px; } .theme-toggle__btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); color: var(--muted); cursor: pointer; } .theme-toggle__btn svg { width: 15px; height: 15px; } .theme-toggle__btn:hover { background: var(--chip-bg); color: var(--ink); } .theme-toggle__btn.is-on { background: var(--chip-bg); border-color: var(--hairline-strong); color: var(--ink); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } button { font-family: inherit; cursor: pointer; } /* ─── Topbar ──────────────────────────────────────────────── */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 28px; background: var(--surface); border-bottom: 1px solid var(--hairline); position: sticky; top: 0; z-index: 10; } .topbar__brand { display: flex; align-items: baseline; gap: 10px; font-weight: 700; } .topbar__logo { font-family: var(--font-display); font-size: 18px; } .topbar__sep { color: var(--faint); } .topbar__product { color: var(--ink); font-size: 14px; letter-spacing: -0.005em; } .topbar__pill { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; color: var(--muted); background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 2px 8px; margin-left: 6px; letter-spacing: 0.02em; } .topbar__pill strong { color: var(--ink); margin-left: 4px; font-weight: 700; } .topbar__live { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink); text-decoration: none; padding: 4px 8px; border-radius: var(--r-sm); margin-left: 4px; } .topbar__live:hover { background: var(--bg); } .topbar__live svg { width: 12px; height: 12px; color: var(--muted); } .topbar__right { display: flex; align-items: center; gap: 14px; } /* ─── View toggle (Queue / Kanban) ────────────────────────── */ .view-toggle { display: inline-flex; align-self: flex-start; /* sub-nav sits in the page flex column, left-aligned, content-width */ background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 2px; } .view-toggle__btn { appearance: none; background: transparent; border: 0; padding: 6px 10px; font-size: 12px; font-weight: 600; color: var(--muted); border-radius: 4px; display: inline-flex; align-items: center; gap: 6px; transition: background 0.08s ease, color 0.08s ease; } .view-toggle__btn:hover { color: var(--ink); } .view-toggle__btn.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); } .view-toggle__btn svg { width: 14px; height: 14px; } /* ─── Kanban ───────────────────────────────────────────────── */ .kanban-wrap { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 18px; min-width: 0; } .kanban-wrap__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; } .kanban-wrap__sub { margin: 4px 0 0; font-size: 12px; color: var(--muted); max-width: 70ch; } /* Events-mode hint — only shown in the "Events" board variant. */ .kanban-wrap__events-note { display: none; margin: 4px 0 0; font-size: 12px; color: var(--muted); max-width: 70ch; } .kanban-wrap__events-note strong { color: var(--ink); } .kanban-wrap__events-note a { color: var(--warn); font-weight: 600; } .kanban-wrap--events .kanban-wrap__sub { display: none; } .kanban-wrap--events .kanban-wrap__events-note { display: block; } /* Events view is a milestone → tag reference, not a customer board: the branch filter (which filters sessions) has nothing to act on. */ .kanban-wrap--events .kanban-wrap__filters { display: none; } /* Lanes collapse to just their header (name + steps + tags) — no card column to fill height, so let them size to content. */ .kanban-wrap--events .lane { max-height: none; } .kanban-wrap__filters { display: inline-flex; gap: 6px; align-items: center; /* The chip row (branches | funnels | stuck) is wider than a phone — wrap instead of stretching the whole page sideways. No-op on desktop. */ flex-wrap: wrap; row-gap: 6px; min-width: 0; } .kanban { display: grid; /* 7 lanes, each shrinks but never below 200px so cards stay readable. Horizontal scroll kicks in when the page can't fit them all. */ grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; } .lane { background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; max-height: 640px; overflow: hidden; } .lane__head { padding: 2px 4px 4px; } .lane__head-main { display: flex; flex-direction: column; gap: 5px; } .lane__title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .lane__name { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); } .lane__steps { font-size: 10px; color: var(--faint); font-variant-numeric: tabular-nums; } /* GA4 event tags under each lane caption — monospace, muted, wrap. The milestone events (bank_connected, dashboard_landed) get the amber --warn accent + a tiny uppercase flag. These are SPECIFIED, not live. */ .lane__events { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 1px; } .evt-tag { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; } /* Key milestone tags take their own full-width row with the flag stacked beneath, so the (important) event name never gets squeezed/truncated. */ .evt-tag--key { flex: 1 0 100%; flex-direction: column; align-items: flex-start; gap: 1px; } .evt-tag > code { font-family: 'SF Mono', ui-monospace, Menlo, monospace; font-size: 10px; line-height: 1.4; color: var(--muted); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 1px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .evt-tag--branch > code { color: var(--faint); border-style: dashed; opacity: 0.85; } .evt-tag--key > code { color: var(--warn); border-color: var(--warn-line-2); background: var(--warn-bg-1); font-weight: 600; } .evt-tag__flag { font-family: var(--font-body); font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--warn); white-space: nowrap; } .lane__count { font-size: 11px; font-weight: 700; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 1px 8px; font-variant-numeric: tabular-nums; color: var(--ink); } .lane__count--zero { color: var(--faint); } /* The final 'activated' lane gets a faint yellow tint so the celebration moment reads visually distinct from the in-progress lanes. */ .lane--activated { background: var(--accent-bg-1); border-color: var(--accent-line-1); } .lane--activated .lane__count { background: var(--accent); border-color: var(--accent); } .lane__cards { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; padding-right: 2px; scrollbar-width: thin; } .lane__empty { text-align: center; color: var(--faint); font-size: 11px; padding: 18px 0; } .kcard { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 9px 10px; display: flex; flex-direction: column; gap: 5px; cursor: pointer; transition: border-color 0.08s ease, transform 0.08s ease; } .kcard:hover { border-color: var(--ink); } .kcard--anon { background: var(--bg); border-style: dashed; cursor: default; opacity: 0.78; } .kcard--anon:hover { border-color: var(--hairline-strong); } .kcard--activated { background: var(--surface); border-color: var(--accent-line-1); } .kcard__top { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink); min-width: 0; } .kcard__top .pri-dot { flex: 0 0 auto; } .kcard__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kcard__idle { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .kcard__where { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kcard__signals { display: flex; flex-wrap: wrap; gap: 3px; } .kcard__signals .signal { font-size: 9px; padding: 1px 6px; } /* Tighten kanban cards on narrow viewports */ @media (max-width: 900px) { .kanban { grid-auto-columns: 220px; } } .topbar__date { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .link-btn { background: transparent; border: 0; color: var(--muted); font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--r-sm); text-decoration: none; cursor: pointer; } .link-btn:hover { color: var(--ink); background: var(--bg); } .link-btn svg { width: 16px; height: 16px; } /* ─── Section switch (shared topbar) ────────────────────────── Lives on BOTH tools — the current section is the "on" side, so you flick between the onboarding board and the support desk. Same segmented-control look as the board's view toggle. */ .section-switch { display: inline-flex; background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 2px; } .section-switch__btn { padding: 6px 10px; font-size: 12px; font-weight: 600; color: var(--muted); border-radius: 4px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: background 0.08s ease, color 0.08s ease; } .section-switch__btn:hover { color: var(--ink); } .section-switch__btn.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); } .section-switch__btn svg { width: 14px; height: 14px; } /* ─── Page shell ──────────────────────────────────────────── */ .page { max-width: 1480px; margin: 0 auto; padding: 24px 28px 64px; display: flex; flex-direction: column; gap: 20px; } /* Persistent "not live" reminder — events are specified, not firing. Amber left rule, low-key, sits above the KPI strip on every load. */ .notlive-note { display: flex; align-items: flex-start; gap: 10px; background: var(--warn-bg-1); border: 1px solid var(--warn-line-2); border-left: 3px solid var(--warn); border-radius: var(--r-md); padding: 10px 14px; font-size: 13px; line-height: 1.45; color: var(--ink-soft); } .notlive-note svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--warn); margin-top: 1px; } .notlive-note strong { color: var(--ink); } .notlive-note code { font-family: 'SF Mono', ui-monospace, Menlo, monospace; font-size: 11.5px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 4px; padding: 0 4px; } .notlive-note a { color: var(--warn); font-weight: 600; } h2.h2 { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; margin: 0; display: inline-flex; align-items: center; gap: 6px; } /* ─── KPI strip ───────────────────────────────────────────── */ .kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .kpi { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; } .kpi__head { display: flex; align-items: center; justify-content: space-between; } .kpi__label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .kpi__row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .kpi__value { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 8px; } /* Split KPI cards: Accounts | Formations halves with a hairline divider. */ .kpi__row--split { display: flex; align-items: stretch; gap: 0; } .kpi__half { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .kpi__half + .kpi__half { border-left: 1px solid var(--hairline); padding-left: 14px; margin-left: 14px; } .kpi__half-label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kpi__row--split .kpi__value { font-size: 24px; } .kpi__row--split .sparkline { width: 100%; max-width: 90px; height: 20px; color: var(--faint); } .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 0 rgba(26, 158, 92, 0.55); animation: livePulse 1.6s ease-out infinite; display: inline-block; } @keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(26, 158, 92, 0.55); } 100% { box-shadow: 0 0 0 8px rgba(26, 158, 92, 0); } } .kpi__delta { font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; } .kpi__delta--up { color: var(--good); } .kpi__delta--down { color: var(--bad); } .kpi__bench { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 11px; color: var(--muted); line-height: 1.4; } .kpi__bench-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hairline-strong); flex: 0 0 auto; } .kpi__bench strong { color: var(--ink); font-weight: 600; } .sparkline { width: 60px; height: 24px; color: var(--accent-ink); opacity: 0.55; } /* ─── Info icon + tooltip ─────────────────────────────────── */ .info { appearance: none; background: transparent; border: 0; padding: 0; width: 16px; height: 16px; color: var(--faint); display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; } .info svg { width: 14px; height: 14px; } .info:hover { color: var(--ink); } .info--inline { margin-left: 2px; vertical-align: middle; } .tooltip { position: absolute; z-index: 60; max-width: 280px; background: var(--ink); color: var(--ink-contrast); padding: 10px 12px; border-radius: var(--r-md); font-size: 12px; line-height: 1.5; pointer-events: none; box-shadow: 0 10px 30px rgba(0,0,0,0.18); transform: translateY(-4px); } .tooltip__title { font-weight: 700; display: block; margin-bottom: 4px; } .tooltip__bench { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--tooltip-line); color: var(--tooltip-soft); font-size: 11px; } .tooltip__bench strong { color: var(--ink-contrast); } /* ─── Middle row ──────────────────────────────────────────── */ .middle { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: stretch; } /* `[hidden]` must explicitly override the display rule on container elements — the attribute alone is outweighed by author display. */ .middle[hidden], .kanban-wrap[hidden] { display: none; } @media (max-width: 1100px) { .middle { grid-template-columns: 1fr; } } /* ─── Queue ───────────────────────────────────────────────── */ .queue { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 18px 18px 6px; min-width: 0; } .queue__head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; } .queue__sub { margin: 4px 0 0; font-size: 12px; color: var(--muted); max-width: 60ch; } .filters { display: flex; flex-wrap: wrap; gap: 14px; padding: 10px 0 14px; border-bottom: 1px solid var(--hairline); } .filter-group { display: inline-flex; align-items: center; gap: 6px; } .filter-group__label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); margin-right: 2px; } .chip { appearance: none; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 5px 10px; font-size: 12px; font-weight: 500; color: var(--ink-soft); line-height: 1.2; transition: background 0.08s ease, border-color 0.08s ease; } .chip:hover { background: var(--bg); } .chip.is-active { background: var(--ink); color: var(--ink-contrast); border-color: var(--ink); } /* ─── Table ──────────────────────────────────────────────── */ .table { width: 100%; } .table__head, .table__row { display: grid; grid-template-columns: 18px 1.4fr 1.7fr 1.6fr 1fr 1.8fr 130px; align-items: center; gap: 12px; padding: 10px 4px; } .table__head { border-bottom: 1px solid var(--hairline); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); } .table__row { border-bottom: 1px solid var(--hairline); cursor: pointer; transition: background 0.08s ease; } .table__row:hover { background: var(--bg); } .table__row:last-child { border-bottom: 0; } .table__empty { padding: 32px 12px; text-align: center; color: var(--muted); font-size: 13px; } .cell { min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cell--pri { display: flex; justify-content: center; } .cell--name { font-weight: 600; color: var(--ink); } .cell--email { color: var(--muted); font-size: 12px; } .cell--step { color: var(--ink-soft); } .cell--step__sub { display: block; font-size: 11px; color: var(--faint); } .cell--time { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; } .cell--signals { white-space: normal; display: flex; flex-wrap: wrap; gap: 4px; } .cell--actions { display: flex; gap: 4px; justify-content: flex-end; } .pri-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .pri-dot--high { background: var(--bad); } .pri-dot--med { background: var(--warn); } .pri-dot--low { background: var(--faint); } .signal { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: var(--r-pill); background: var(--bg); border: 1px solid var(--hairline); color: var(--ink-soft); letter-spacing: 0.02em; white-space: nowrap; } .signal--bizt { background: var(--accent-bg-1); border-color: var(--accent-line-2); } .signal--worry { background: var(--chip-bg); } .btn-mini { appearance: none; background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: var(--r-sm); padding: 5px 10px; font-size: 11px; font-weight: 600; color: var(--ink-soft); transition: background 0.08s ease, border-color 0.08s ease; } .btn-mini:hover { background: var(--bg); border-color: var(--ink); } .btn-mini--primary { background: var(--ink); color: var(--ink-contrast); border-color: var(--ink); } .btn-mini--primary:hover { background: var(--ink-hover); } /* ─── Funnel ──────────────────────────────────────────────── */ .funnel { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 18px; min-width: 0; display: flex; flex-direction: column; gap: 12px; } .funnel__head { display: flex; flex-direction: column; gap: 6px; } .funnel__sub { margin: 0; font-size: 12px; color: var(--muted); } .funnel__toggle { display: inline-flex; gap: 6px; } .funnel__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .funnel-step { display: grid; grid-template-columns: 22px 1fr 50px; align-items: center; gap: 8px; padding: 4px 6px; border-radius: var(--r-sm); cursor: pointer; } .funnel-step:hover { background: var(--bg); } .funnel-step.is-active { background: var(--bg); outline: 1px solid var(--ink); } .funnel-step__num { font-size: 10px; font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } .funnel-step__bar { position: relative; min-height: 30px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1px; overflow: hidden; border-radius: var(--r-sm); padding: 3px 0; } .funnel-step__fill { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,224,0,0.25), rgba(255,224,0,0.45)); border-radius: var(--r-sm); } .funnel-step__label { position: relative; z-index: 1; max-width: 100%; padding-left: 6px; font-size: 11px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* GA4 event(s) anchored to this funnel step — monospace, sitting just under the step label and over the bar fill, so the event reads against its own drop-off. Same EVENTS source as the lanes. Key events amber. */ .funnel-step__events { position: relative; z-index: 1; display: flex; gap: 7px; max-width: 100%; padding-left: 6px; overflow: hidden; } .fevt { font-family: 'SF Mono', ui-monospace, Menlo, monospace; font-size: 9.5px; line-height: 1.2; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fevt--key { color: var(--warn); font-weight: 700; } .fevt--branch { color: var(--faint); opacity: 0.85; } .funnel-step__drop { font-size: 10px; font-weight: 700; color: var(--bad); font-variant-numeric: tabular-nums; text-align: right; } .funnel-step--big .funnel-step__fill { background: linear-gradient(90deg, rgba(200, 49, 31, 0.18), rgba(200, 49, 31, 0.32)); } .funnel-step--big .funnel-step__drop { font-size: 11px; } /* ─── Segments ────────────────────────────────────────────── */ .segments { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 18px; } .segments__head { margin-bottom: 14px; } .segments__sub { margin: 4px 0 0; font-size: 12px; color: var(--muted); max-width: 70ch; } .segment-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 1100px) { .segment-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .segment-grid { grid-template-columns: 1fr; } } .segment-card { background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 12px; display: flex; flex-direction: column; gap: 10px; } .segment-card__title { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .segment-row { display: grid; grid-template-columns: 1fr 36px; align-items: center; gap: 8px; font-size: 12px; } .segment-row__bar { grid-column: 1 / -1; height: 6px; background: var(--hairline); border-radius: var(--r-pill); overflow: hidden; } .segment-row__fill { height: 100%; background: var(--ink); border-radius: var(--r-pill); } .segment-row__label { color: var(--ink-soft); } .segment-row__val { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); } .segment-card__bench { margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--hairline-strong); font-size: 11px; color: var(--muted); line-height: 1.4; } .segment-card__bench strong { color: var(--ink); } /* ─── Benchmarks panel ────────────────────────────────────── */ .benchmarks { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 18px; } .benchmarks__head { margin-bottom: 14px; } .benchmarks__sub { margin: 4px 0 0; font-size: 12px; color: var(--muted); max-width: 70ch; } .benchmarks__sub strong { color: var(--ink); } /* auto-fit → self-responsive (no extra media query needed). */ .bench-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .bench-card { background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } .bench-card__label { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); line-height: 1.3; } .bench-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .bench-card__our { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; } .bench-card__verdict { font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--r-pill); white-space: nowrap; } .bench-card__verdict--good { color: var(--good); background: rgba(26,158,92,0.10); } .bench-card__verdict--at { color: var(--ink); background: var(--hairline); } .bench-card__verdict--below { color: var(--bad); background: rgba(200,49,31,0.10); } .bench-card__verdict--context { color: var(--faint); background: var(--hairline); } .bench-card__range { font-size: 12px; color: var(--ink-soft); line-height: 1.4; } .bench-card__source { margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--hairline-strong); font-size: 11px; font-style: italic; color: var(--muted); } /* ─── Paywall funnel (trial → paid) ───────────────────────── */ .pwf { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 18px; } .pwf__head { margin-bottom: 14px; } .pwf__sub { margin: 4px 0 0; font-size: 12px; color: var(--muted); max-width: 76ch; } .pwf__sub strong { color: var(--warn); } .pwf-list { display: flex; flex-direction: column; gap: 12px; max-width: 640px; } .pwf-row { display: flex; flex-direction: column; gap: 5px; } .pwf-row__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .pwf-row__label { font-size: 13px; font-weight: 600; color: var(--ink); } .pwf-row__pct { font-size: 13px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } .pwf-row__bar { position: relative; height: 14px; background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; } .pwf-row__fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, rgba(255,224,0,0.35), rgba(255,224,0,0.6)); border-radius: var(--r-sm); } .pwf-row--key .pwf-row__fill { background: linear-gradient(90deg, rgba(26,158,92,0.30), rgba(26,158,92,0.5)); } .pwf-row--key .pwf-row__pct { color: var(--good); } .pwf-row__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .pwf-row__tag { font-family: 'SF Mono', ui-monospace, Menlo, monospace; font-size: 10.5px; color: var(--muted); } .pwf-row--key .pwf-row__tag { color: var(--good); font-weight: 600; } .pwf-row__drop { font-size: 11px; font-weight: 700; color: var(--bad); font-variant-numeric: tabular-nums; } /* ─── Data scan (ranked funnel leaks) ─────────────────────── */ .datascan { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 18px; } .datascan__head { margin-bottom: 14px; } .datascan__sub { margin: 4px 0 12px; font-size: 12px; color: var(--muted); max-width: 76ch; } .datascan__sub strong { color: var(--ink); } .datascan__small { margin: 10px 0 0; font-size: 12px; font-weight: 600; color: var(--bad); } .dscan-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } @media (max-width: 980px) { .dscan-list { grid-template-columns: 1fr; } } .dscan { background: var(--bg); border: 1px solid var(--hairline); border-left: 3px solid var(--hairline-strong); border-radius: var(--r-md); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; } .dscan--leak { border-left-color: var(--bad); } .dscan__hero { display: flex; align-items: baseline; gap: 6px; } .dscan__pct { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; } .dscan--leak .dscan__pct { color: var(--bad); } .dscan__drop-label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .dscan__fact { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.5; } .dscan__fact strong { color: var(--ink); font-weight: 700; } .dscan__bench { display: flex; flex-direction: column; gap: 4px; } .dscan__bench-tag { align-self: flex-start; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--r-pill); } .dscan__bench-tag--within { color: var(--good); background: rgba(26,158,92,0.10); } .dscan__bench-tag--above { color: var(--bad); background: rgba(200,49,31,0.10); } .dscan__bench-tag--context { color: var(--muted); background: var(--hairline); } .dscan__bench-text { font-size: 12px; color: var(--ink-soft); line-height: 1.45; } .dscan__bench-text em { color: var(--muted); font-style: italic; } .dscan__k { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; } .dscan__screens { font-size: 12.5px; color: var(--ink); line-height: 1.5; } /* Hypothesis block — tinted + tagged so it can never read as fact. */ .dscan__hyp { background: var(--warn-bg-1); border: 1px solid var(--warn-line-2); border-radius: var(--r-sm); padding: 10px 12px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; } .dscan__hyp-tag { display: inline-block; margin-right: 6px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--warn); padding: 2px 7px; border-radius: var(--r-pill); vertical-align: 1px; } .dscan__confirm { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; } /* Changelog block in the About modal */ .about__changelog { list-style: none; margin: 0; padding: 0; } .about__changelog li { font-size: 13px; color: var(--ink-soft); padding: 6px 0; border-bottom: 1px dashed var(--hairline); } .about__changelog li:last-child { border-bottom: 0; } .about__changelog strong { color: var(--ink); font-weight: 700; margin-right: 6px; font-variant-numeric: tabular-nums; } /* ─── Drawer (slide-in session detail) ────────────────────── */ .drawer { position: fixed; inset: 0; z-index: 50; display: flex; justify-content: flex-end; } .drawer[hidden] { display: none; } .drawer__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.32); animation: fadeIn 180ms ease; } .drawer__panel { position: relative; width: min(520px, 100vw); height: 100vh; background: var(--surface); box-shadow: -10px 0 40px rgba(0,0,0,0.12); overflow-y: auto; animation: slideIn 220ms cubic-bezier(0.2, 0.8, 0.2, 1); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideIn { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .drawer__head { display: flex; align-items: flex-start; gap: 10px; padding: 18px; border-bottom: 1px solid var(--hairline); } .icon-btn { appearance: none; background: transparent; border: 0; width: 32px; height: 32px; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; color: var(--muted); } .icon-btn:hover { background: var(--bg); color: var(--ink); } .icon-btn svg { width: 18px; height: 18px; } .drawer__title-block { flex: 1; min-width: 0; } .drawer__name { font-family: var(--font-display); font-weight: 700; font-size: 22px; margin: 0; letter-spacing: -0.01em; } .drawer__meta { margin: 2px 0 0; color: var(--muted); font-size: 12px; } .drawer__status { margin: 14px 18px 0; padding: 10px 12px; background: var(--accent-bg-3); border: 1px solid var(--accent-line-1); border-radius: var(--r-md); font-size: 13px; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; } .drawer__status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); flex: 0 0 auto; } .drawer__actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 18px; } .drawer__section { padding: 6px 18px 18px; border-top: 1px solid var(--hairline); margin-top: 6px; } .drawer__h4 { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 14px 0 10px; display: inline-flex; align-items: center; gap: 4px; } .kv-list { display: grid; grid-template-columns: 140px 1fr; gap: 8px 16px; margin: 0; font-size: 13px; } .kv-list dt { color: var(--muted); font-weight: 500; } .kv-list dd { margin: 0; color: var(--ink); font-weight: 600; } .timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .timeline__item { display: grid; grid-template-columns: 56px 1fr 44px; gap: 8px; font-size: 12px; padding: 6px 0; border-bottom: 1px dashed var(--hairline); } .timeline__item:last-child { border-bottom: 0; } .timeline__t { color: var(--muted); font-variant-numeric: tabular-nums; } .timeline__name { color: var(--ink); font-weight: 600; } .timeline__dwell { color: var(--faint); text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; } .timeline__item--last .timeline__name { color: var(--warn); } .timeline__item--last .timeline__name::after { content: ' · stopped here'; color: var(--warn); font-weight: 500; } /* Per-user "Events fired" list — monospace event tag + plain trigger. Illustrative: these events are specified, not yet firing into GA4. */ .evt-list__note { font-size: 11px; color: var(--muted); margin: 0 0 10px; line-height: 1.45; } .evt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } .evt-list__row { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; border-bottom: 1px dashed var(--hairline); } .evt-list__row:last-child { border-bottom: 0; } .evt-list__tag { font-family: 'SF Mono', ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--ink); align-self: flex-start; } .evt-list__row--key .evt-list__tag { color: var(--warn); font-weight: 600; } .evt-list__trigger { font-size: 12px; color: var(--muted); } .evt-list__flag { font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--warn); margin-left: 2px; } .evt-list:empty::after { content: 'No events yet for this session.'; color: var(--faint); font-size: 12px; } .notes { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 4px; } .note { font-size: 12px; color: var(--ink-soft); padding: 6px 0; border-bottom: 1px dashed var(--hairline); } .note__t { color: var(--faint); font-variant-numeric: tabular-nums; margin-right: 6px; } .notes:empty { display: none; } /* Guard: author display rules would beat the hidden attribute (same trap as .timeline). Clamped older notes must actually disappear. */ .notes li[hidden] { display: none; } .notes__more { list-style: none; } .notes__more-btn { appearance: none; background: none; border: 0; padding: 2px 0; font-size: 12px; font-weight: 600; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; } .notes__more-btn:hover { color: var(--ink); } .note-form { display: flex; gap: 6px; margin-top: 8px; } .note-form input { flex: 1; appearance: none; background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 7px 10px; font-size: 12px; font-family: inherit; color: var(--ink); } .note-form input:focus { outline: 2px solid var(--ink); outline-offset: -2px; background: var(--surface); } /* ─── About modal ─────────────────────────────────────────── */ .about { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: center; align-items: center; padding: 24px; } .about[hidden] { display: none; } .about__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); animation: fadeIn 180ms ease; } .about__panel { position: relative; width: min(680px, 100%); max-height: 86vh; overflow-y: auto; background: var(--surface); border-radius: var(--r-lg); box-shadow: 0 20px 60px rgba(0,0,0,0.18); animation: aboutIn 220ms cubic-bezier(0.2, 0.8, 0.2, 1); } @keyframes aboutIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .about__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--hairline); } .about__title { font-family: var(--font-display); font-weight: 700; font-size: 22px; margin: 0; letter-spacing: -0.01em; } .about__body { padding: 18px 22px 26px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); } .about__lede { font-size: 15px; color: var(--ink); margin: 0 0 22px; line-height: 1.5; } .about__tracking { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--muted); } .about__tracking strong { color: var(--ink); } .about__tracking a { color: var(--ink); } .about__body h4 { font-family: var(--font-display); font-weight: 700; font-size: 14px; margin: 22px 0 10px; color: var(--ink); } .about__rationale { margin: 0; } .about__rationale dt { font-weight: 600; color: var(--ink); margin-top: 14px; } .about__rationale dt:first-child { margin-top: 0; } .about__rationale dd { margin: 4px 0 0; color: var(--ink-soft); line-height: 1.55; font-size: 13px; } .about__bench-list, .about__cuts { margin: 0; padding-left: 18px; font-size: 13px; color: var(--ink-soft); } .about__bench-list li, .about__cuts li { margin-bottom: 8px; line-height: 1.5; } .about__bench-list em, .about__cuts em { color: var(--muted); font-style: normal; font-size: 12px; } .about__bench-list strong { color: var(--ink); } /* ============================================================ Responsive — phone + tablet (added in the mobile-friendly pass). Desktop layout above these breakpoints is unchanged. Patterns: topbar wraps, KPI strip reflows, the queue table scrolls horizontally, the kanban shows one lane at a time, modals go near-full-width. No markup/JS changes. ============================================================ */ /* Tablet / large phone */ @media (max-width: 900px) { .topbar { flex-wrap: wrap; gap: 10px 12px; padding: 12px 16px; } /* The brand row (logo + the View/Overview/Paywall links) must wrap too — otherwise the links overflow past the screen on a phone. */ .topbar__brand { flex-wrap: wrap; row-gap: 6px; } /* Branch-filter chips wrap instead of running off the edge. */ .filter-group { flex-wrap: wrap; row-gap: 6px; } /* Controls drop to their own full-width row and wrap among themselves. */ .topbar__right { width: 100%; flex-wrap: wrap; gap: 8px 12px; } /* Keep each nav label on one line — wrap as whole units, not mid-phrase. */ .topbar__live, .link-btn, .view-toggle__btn { white-space: nowrap; } .kpi-strip { grid-template-columns: repeat(2, 1fr); } .page { padding: 20px 16px 56px; } } /* Queue table → horizontal scroll (keeps columns readable). The grid head + body get a floor width and the .table container scrolls. */ @media (max-width: 760px) { .table { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table__head, .table__body { min-width: 720px; } } /* Phone */ @media (max-width: 600px) { .kpi-strip { grid-template-columns: 1fr; } /* Reclaim topbar room: drop the version pill + date, keep nav. */ .topbar__pill, .topbar__date { display: none; } .page { padding: 16px 12px 48px; gap: 16px; } .kanban-wrap, .queue { padding: 14px 12px 6px; } /* One lane fills the screen with the next peeking — mobile-kanban feel. align-items:start lets each lane size to its OWN content instead of all stretching to the tallest (640px) — an empty lane was a full screen of blank box on a phone. */ .kanban { grid-auto-columns: minmax(80vw, 300px); align-items: start; } /* Wrapped chip rows make the vertical group dividers meaningless. */ .kfilter-sep { display: none; } /* Comfortable tap targets (≈44px) for the nav controls. */ .link-btn { padding: 10px 10px; } .view-toggle__btn { padding: 9px 12px; } /* The external flow links were a 26px tap target — too small to hit on a phone. Bump them to a comfortable size with breathing room. */ .topbar__live { padding: 9px 10px; margin-left: 0; } .topbar__brand { column-gap: 8px; } /* Modals use the full screen. */ .about { padding: 12px; } .about__panel { max-height: 92vh; } .about__head { padding: 14px 16px; } .about__body { padding: 16px 16px 22px; } .drawer__head, .drawer__actions, .drawer__section { padding-left: 14px; padding-right: 14px; } } /* ---- Setup review (post-onboarding lane + drawer section) ---- Mariana's verification pass after Activated, before accounting access. */ .lane--review { background: var(--good-bg-3); border-color: var(--good-line-4); } .lane--review .lane__count { background: var(--good); border-color: var(--good); color: #fff; } /* Fully onboarded — terminal lane: review approved, accounting live. */ .lane--onboarded { background: var(--good-bg-4); border-color: var(--good-line-5); } .lane--onboarded .lane__count { background: var(--good); border-color: var(--good); color: #fff; } /* Mariana's latest note, surfaced on fully-onboarded cards. */ .kcard__note { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--hairline); font-size: 12px; font-style: italic; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Mariana's customer-specific tasks (open tasks block the grant). */ .rev-tasks { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; } .rev-task { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-soft); cursor: pointer; user-select: none; } .rev-task:hover { color: var(--ink); } /* Done = greyed out (no strikethrough, per Peter), still clickable. */ .rev-task--done { color: var(--faint); } .rev-task-form { margin-bottom: 14px; } /* Why the grant is blocked. */ .rev-block { margin: 0 0 10px; font-size: 12px; font-weight: 600; color: var(--warn); } .btn-mini:disabled { opacity: 0.45; cursor: not-allowed; } .btn-mini--primary:disabled:hover { background: var(--ink-soft); } /* Collapsible drawer section headers (Screen timeline, Internal notes). */ .drawer__h4--toggle { cursor: pointer; user-select: none; } /* .timeline sets display:flex, which beats the hidden attribute's UA display:none — this is why the collapse "didn't work". Re-assert it. */ .timeline[hidden] { display: none; } .tl-chev { width: 13px; height: 13px; flex: 0 0 13px; transition: transform 0.15s ease; } .drawer__h4--toggle.is-open .tl-chev { transform: rotate(90deg); } /* Review checklist in the drawer */ .rev-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; } .rev-list__row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-soft); } .rev-list__mark { flex: 0 0 16px; text-align: center; font-weight: 700; color: var(--faint); } /* Done = greyed out (no strikethrough), still clickable to untick. */ .rev-list__row--done { color: var(--faint); } .rev-list__row--clickable { cursor: pointer; user-select: none; } .rev-list__row--clickable:hover { color: var(--ink); } /* Real checkbox visuals so the rows clearly read as clickable. */ .rev-cb { flex: 0 0 16px; width: 16px; height: 16px; border: 1.5px solid var(--hairline-strong); border-radius: 4px; background: var(--surface); display: inline-flex; align-items: center; justify-content: center; } .rev-cb--on { background: var(--good); border-color: var(--good); } .rev-cb--on::after { content: '✓'; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; } /* Customer questions */ .rev-qhead { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 8px; } .rev-qs { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; } .rev-qs__row { display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--ink-soft); } .rev-qs__state { flex: 0 0 auto; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 7px; border-radius: var(--r-pill); background: var(--warn-bg-3); color: var(--warn); } .rev-qs__row--answered .rev-qs__state { background: var(--good-bg-5); color: var(--good); } .rev-qs__row--answered { color: var(--muted); } /* ---- Funnel divider: formations lanes | accounts lanes ---- */ .lane--accounts-start { margin-left: 22px; position: relative; } .lane--accounts-start::before { content: ''; position: absolute; left: -13px; top: 4px; bottom: 4px; border-left: 2px dashed var(--hairline-strong, var(--chip-line)); } /* ---- Topbar dropdown menus (details/summary, no JS) ---- */ .menu-dd { position: relative; } .menu-dd > summary { list-style: none; cursor: pointer; user-select: none; } .menu-dd > summary::-webkit-details-marker { display: none; } .menu-dd[open] > summary { opacity: 0.75; } .menu-dd__panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 230px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); padding: 6px; display: flex; flex-direction: column; } .menu-dd--right .menu-dd__panel { left: auto; right: 0; } .menu-dd__panel a, .menu-dd__panel button { padding: 8px 10px; border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; } /* The About item is a