/* Data Hub design tokens — extracted from Onboarding.html, with WCAG AA fix on --ink-3. Source: /tmp/datahub-design/design/data-hub/project/Onboarding.html lines 13-40. */ :root { /* V5 is light-mode only. Lock the user-agent stylesheet (form controls, scrollbars, native menus) to light variants even when the OS prefers dark, so browser-native widgets don't paint dark-mode chrome on top of V5's light surfaces. Paired with in index.html and the removal of the auto-dark @media block below. */ color-scheme: light; /* Surfaces */ --bg: oklch(0.985 0.004 85); --bg-elev: oklch(1 0 0); --bg-sunken: oklch(0.975 0.004 85); /* Inks (--ink-3 darkened from 0.55 to 0.50 for WCAG AA ≥4.5:1 against --bg) */ --ink: oklch(0.20 0.01 250); --ink-2: oklch(0.36 0.01 250); --ink-3: oklch(0.50 0.01 250); /* Lines */ --line: oklch(0.92 0.005 250); --line-2: oklch(0.88 0.005 250); /* Rail (dark surfaces, used for top-bar + live-event feed). iter-74 C1 — bumped --rail-ink-2 lightness 0.68 → 0.78 to clear WCAG AA (≥4.5:1) against --rail (oklch 0.18). Old value scored ~4.0:1 and failed for small text at the topbar separator "/", the "Search ⌘K" hint, env/light-theme pills (10.5px), the workspace chevron (9px), and the live-feed event time column (11px). See AUDIT_V5_ITER73_CHECKPOINT_2026-05-20.md C1. */ --rail: oklch(0.18 0.01 250); --rail-ink: oklch(0.98 0.004 85); --rail-ink-2: oklch(0.78 0.01 250); --rail-line: oklch(0.28 0.01 250); /* Accent — the structured-truth green */ --accent: oklch(0.58 0.12 150); --accent-ink: oklch(0.98 0.005 150); --accent-soft: oklch(0.94 0.04 150); --accent-line: oklch(0.78 0.08 150); /* Status */ --warn: oklch(0.72 0.14 75); --danger: oklch(0.58 0.16 28); /* Type + radii */ --ui: "Manrope", system-ui, sans-serif; --mono: "Geist Mono", ui-monospace, monospace; --radius: 6px; --radius-lg: 10px; } /* Dark theme — applied via [data-theme="dark"] on . ThemeToggle in the top bar persists via localStorage. Defaults to system preference. */ :root[data-theme="dark"] { --bg: oklch(0.16 0.012 250); --bg-elev: oklch(0.20 0.012 250); --bg-sunken: oklch(0.14 0.012 250); --ink: oklch(0.96 0.004 85); --ink-2: oklch(0.78 0.008 250); --ink-3: oklch(0.60 0.01 250); --line: oklch(0.28 0.012 250); --line-2: oklch(0.34 0.012 250); /* Rail keeps the same darker tone but slightly more contrast in dark mode. iter-74 C1 — same WCAG AA bump (0.68 → 0.78) for the dark-theme rail-ink-2; the rail in dark mode is even darker (0.10) so the contrast ratio improvement is identical or better. */ --rail: oklch(0.10 0.012 250); --rail-ink: oklch(0.96 0.004 85); --rail-ink-2: oklch(0.78 0.01 250); --rail-line: oklch(0.22 0.012 250); --accent: oklch(0.72 0.14 150); --accent-ink: oklch(0.16 0.012 250); --accent-soft: oklch(0.30 0.06 150); --accent-line: oklch(0.45 0.10 150); --warn: oklch(0.78 0.16 75); --danger: oklch(0.72 0.18 28); } /* Auto-dark on prefers-color-scheme was removed 2026-05-19 — V5 ships light-only (see file comments across src/*.jsx). The :root[data-theme= "dark"] block above remains as dormant opt-in scaffolding for a future theme toggle, but no code path sets data-theme today, and we never want the OS preference to silently flip V5 into a partially-dark layout. */ html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); } body { font-family: var(--ui); -webkit-font-smoothing: antialiased; min-height: 100vh; } ::selection { background: var(--accent); color: var(--accent-ink); } * { box-sizing: border-box; } /* Top bar ----------------------------------------------------------------- */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 40px; background: var(--rail); color: var(--rail-ink); border-bottom: 1px solid var(--rail-line); } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 13.5px; letter-spacing: -0.01em; } .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: var(--rail-ink); color: var(--rail); border-radius: 4px; font-family: var(--mono); font-size: 11px; font-weight: 600; } .brand-name { color: var(--rail-ink); } .brand-name .dot { color: var(--accent); } .brand-sep { color: var(--rail-ink-2); margin: 0 10px; font-family: var(--mono); } .brand-env { margin-left: 6px; padding: 3px 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rail-ink-2); border: 1px solid var(--rail-line); border-radius: 3px; } .topbar-right { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--rail-ink-2); display: flex; align-items: center; gap: 14px; } .live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11.5px; color: var(--rail-ink); } .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: livepulse 1.8s ease-in-out infinite; } @keyframes livepulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* Hero -------------------------------------------------------------------- */ .hero { max-width: 880px; margin: 0 auto; padding: 56px 40px 80px; text-align: center; } .hero .eyebrow { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 20px; display: inline-flex; align-items: center; gap: 8px; } .hero .eyebrow .dot { color: var(--accent); font-size: 14px; line-height: 1; } .hero h1 { font-size: 56px; line-height: 1.02; letter-spacing: -0.03em; font-weight: 600; margin: 0 0 20px; } .hero h1 .mark { color: var(--accent); font-style: normal; } .hero .lede { font-size: 18px; line-height: 1.5; color: var(--ink-2); max-width: 56ch; margin: 0 auto 36px; } /* Existing-sources strip above the hero ----------------------------------- */ .hero-existing { display: flex; align-items: center; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 56px; opacity: 0.72; transition: opacity 160ms ease; } .hero-existing:hover { opacity: 1; } .hero-existing-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } .hero-existing-list { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .hero-existing-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 8px; background: transparent; border: 1px solid var(--line-2); border-radius: 999px; font-family: var(--ui); font-size: 11.5px; color: var(--ink-2); cursor: pointer; text-decoration: none; transition: background 120ms, border-color 120ms; } .hero-existing-chip:hover { background: oklch(0.97 0.003 250); border-color: oklch(0.8 0.005 250); } .hero-existing-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px oklch(0.88 0.1 150 / 0.45); flex-shrink: 0; } .hero-existing-name { color: var(--ink); font-weight: 500; } .hero-existing-meta { color: var(--ink-3); font-family: var(--mono); font-size: 10.5px; } .hero-existing-sep { width: 1px; height: 16px; background: var(--line-2); margin: 0 4px; } .hero-existing-view { padding: 4px 6px; background: transparent; border: none; font-family: var(--ui); font-size: 11.5px; color: var(--ink-2); cursor: pointer; text-decoration: none; border-bottom: 1px dotted oklch(0.75 0.005 250); } .hero-existing-view:hover { color: var(--accent); border-color: var(--accent); } /* Hero CTA + post-CTA hint ----------------------------------------------- */ .hero-cta .arrow { font-family: var(--mono); } .hero-cta .kbd { margin-left: 8px; padding: 1px 7px; font-family: var(--mono); font-size: 10.5px; background: oklch(0.28 0.01 250); color: var(--rail-ink-2); border: 1px solid oklch(0.36 0.01 250); border-radius: 3px; } .hero-hint { margin-top: 14px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); letter-spacing: 0.04em; } .hero-hint .sep { margin: 0 8px; opacity: 0.6; } .reassure { max-width: 880px; margin: 56px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .reassure > div { padding: 20px; border-right: 1px solid var(--line); text-align: left; } .reassure > div:last-child { border-right: none; } .reassure .ico { width: 28px; height: 28px; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); margin-bottom: 10px; } .reassure .label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; } .reassure .text { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; } /* Buttons ----------------------------------------------------------------- */ .btn { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; background: var(--bg-elev); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--radius); font-family: var(--ui); font-weight: 500; font-size: 13px; transition: background 0.1s, transform 0.05s; } .btn:hover { background: oklch(0.97 0.004 250); } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn.primary { background: var(--rail); color: var(--rail-ink); border-color: var(--rail); } .btn.primary:hover { background: oklch(0.24 0.01 250); } .btn.accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .btn.accent:hover { background: oklch(0.55 0.12 150); } .btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); } .btn.sm { height: 28px; padding: 0 10px; font-size: 12px; } .hero-cta { height: 56px; padding: 0 28px; font-size: 17px; font-weight: 600; border-radius: 8px; background: var(--rail); color: var(--rail-ink); border-color: var(--rail); } .hero-cta .arrow { font-family: var(--mono); } /* Sources picker modal --------------------------------------------------- */ .sp-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(12, 14, 20, 0.42); backdrop-filter: blur(3px) saturate(115%); animation: spFade 180ms ease-out; } @keyframes spFade { from { opacity: 0; } to { opacity: 1; } } .sp-modal { position: fixed; z-index: 61; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(1040px, calc(100vw - 48px)); max-height: calc(100vh - 56px); background: var(--bg-elev); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 40px 80px -20px rgba(12,14,20,0.32), 0 16px 32px -12px rgba(12,14,20,0.2); animation: spIn 260ms cubic-bezier(0.2, 0.8, 0.2, 1); } @keyframes spIn { from { opacity: 0; transform: translate(-50%, -48%) scale(0.98); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } .sp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 22px 24px 18px; border-bottom: 1px solid var(--line-2); background: radial-gradient(circle at 0% 0%, oklch(from var(--accent) l c h / 0.06), transparent 55%), var(--bg-elev); } .sp-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; } .sp-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px oklch(from var(--accent) l c h / 0.18); } .sp-title { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; } .sp-sub { margin-top: 6px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .sp-sub strong { color: var(--ink); font-weight: 600; } .sp-sub .sp-ok { color: oklch(0.48 0.1 150); } .sp-sub .sp-muted { color: var(--ink-3); } .sp-sep { color: oklch(0.85 0.005 250); } .sp-close { background: transparent; border: 1px solid var(--line); color: var(--ink-2); width: 30px; height: 30px; border-radius: 6px; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 120ms ease; } .sp-close:hover { background: oklch(0.96 0.004 250); color: var(--ink); border-color: var(--line-2); } .sp-toolbar { display: flex; align-items: center; gap: 12px; padding: 14px 24px; border-bottom: 1px solid var(--line-2); background: oklch(0.98 0.003 85); } .sp-search { flex: 1; display: inline-flex; align-items: center; gap: 8px; padding: 0 10px; height: 34px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 7px; transition: border-color 120ms ease, box-shadow 120ms ease; } .sp-search:focus-within { border-color: var(--accent-line); box-shadow: 0 0 0 3px oklch(from var(--accent) l c h / 0.12); } .sp-search svg { color: var(--ink-3); flex-shrink: 0; } .sp-search input { flex: 1; border: none; outline: none; background: transparent; font-family: var(--ui); font-size: 13px; color: var(--ink); } .sp-search input::placeholder { color: var(--ink-3); } .sp-search-clear { background: transparent; border: none; color: var(--ink-3); font-size: 11px; cursor: pointer; padding: 2px 4px; border-radius: 3px; } .sp-search-clear:hover { color: var(--ink); background: oklch(0.94 0.004 250); } .sp-segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: var(--bg-elev); } .sp-segmented button { background: transparent; border: none; padding: 0 12px; height: 34px; font-family: var(--ui); font-size: 12.5px; color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; border-right: 1px solid var(--line); } .sp-segmented button:last-child { border-right: none; } .sp-segmented button[data-active="true"] { background: var(--rail); color: var(--rail-ink); } .sp-seg-count { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); padding: 1px 5px; border-radius: 3px; background: oklch(0.94 0.004 250); } .sp-segmented button[data-active="true"] .sp-seg-count { background: oklch(0.26 0.01 250); color: var(--rail-ink-2); } .sp-sort { display: inline-flex; align-items: center; gap: 8px; } .sp-sort label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); } .sp-sort select { height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg-elev); color: var(--ink); font-family: var(--ui); font-size: 12.5px; cursor: pointer; } .sp-list-head, .sp-row { display: grid; grid-template-columns: minmax(220px, 2fr) 1fr 130px 24px; gap: 14px; align-items: center; padding: 0 24px; } .sp-list-head { height: 32px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line-2); background: var(--bg-elev); } .sp-list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 0; } .sp-row { width: 100%; min-height: 52px; background: transparent; border: none; border-bottom: 1px solid oklch(0.94 0.005 250); text-align: left; cursor: pointer; font-family: inherit; font-size: 13px; color: var(--ink); transition: background 100ms ease; text-decoration: none; } .sp-row:last-child { border-bottom: none; } .sp-row:hover { background: oklch(0.97 0.008 150); } .sp-row:hover .sp-arrow { opacity: 1; transform: translateX(2px); } .sp-col-name { display: inline-flex; align-items: center; gap: 9px; min-width: 0; } .sp-dot { width: 7px; height: 7px; border-radius: 50%; background: oklch(0.75 0.008 250); flex-shrink: 0; } .sp-dot[data-active="true"] { background: var(--accent); box-shadow: 0 0 0 2px oklch(from var(--accent) l c h / 0.2); } .sp-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); } .sp-pill { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; background: oklch(0.94 0.005 250); color: var(--ink-3); border: 1px solid oklch(0.9 0.005 250); } .sp-col-tags { font-family: var(--mono); font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sp-col-last { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; } .sp-arrow { opacity: 0; color: var(--ink-3); font-family: var(--mono); transition: opacity 120ms ease, transform 120ms ease; } .sp-empty { padding: 48px 24px; text-align: center; } .sp-empty-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; } .sp-empty-sub { font-size: 13px; color: var(--ink-3); } .sp-empty-clear { margin-top: 14px; background: var(--bg-elev); border: 1px solid var(--line); padding: 7px 13px; border-radius: 7px; font-family: var(--ui); font-size: 12.5px; color: var(--ink); cursor: pointer; } .sp-empty-clear:hover { background: oklch(0.96 0.004 250); } .sp-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; border-top: 1px solid var(--line-2); background: oklch(0.98 0.003 85); } .sp-foot-hint { font-family: var(--mono); font-size: 11px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .sp-foot-hint kbd { font-family: var(--mono); font-size: 10px; padding: 1px 5px; border-radius: 3px; background: var(--bg-elev); border: 1px solid var(--line); color: var(--ink-2); } .sp-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--rail); color: var(--rail-ink); border: none; padding: 9px 16px; border-radius: 7px; font-family: var(--ui); font-size: 13px; font-weight: 500; cursor: pointer; transition: background 120ms ease; } .sp-cta:hover { background: oklch(0.24 0.01 250); } .sp-cta span:first-child { font-family: var(--mono); font-weight: 400; color: var(--accent); } /* Setup checklist (post-create polish strip) ----------------------------- */ .enrich-strip { border-top: 1px dashed var(--line-2); margin-top: 24px; padding-top: 24px; transition: opacity 300ms; } .enrich-strip[data-muted="true"] { opacity: 0.55; } .enrich-strip-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .enrich-strip h3 { font-size: 14px; font-weight: 600; margin: 0 0 4px; } .enrich-strip p { font-size: 12.5px; color: var(--ink-3); margin: 0; max-width: 60ch; line-height: 1.5; } .enrich-list { display: flex; flex-direction: column; gap: 8px; } .enrich-item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elev); overflow: hidden; transition: border-color 120ms; } .enrich-item[data-done="true"] { background: var(--accent-soft); border-color: var(--accent-line); } .enrich-row { display: grid; grid-template-columns: 28px 1fr auto auto; gap: 12px; align-items: center; padding: 12px 14px; text-decoration: none; color: inherit; } .enrich-row:hover { background: var(--bg-sunken); } .enrich-item[data-done="true"] .enrich-row:hover { background: oklch(0.92 0.04 150); } .enrich-check { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; color: transparent; font-family: var(--mono); font-size: 12px; font-weight: 600; transition: all 120ms; } .enrich-item[data-done="true"] .enrich-check { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .enrich-item .title { font-size: 13.5px; font-weight: 500; } .enrich-item .desc { font-size: 12px; color: var(--ink-3); margin-top: 2px; font-family: var(--mono); } .enrich-item[data-done="true"] .title { color: oklch(0.35 0.08 150); } .enrich-meta { font-family: var(--mono); font-size: 11px; color: var(--ink-3); } .enrich-chev { font-family: var(--mono); color: var(--ink-3); } /* Page head (eyebrow + H1 + sub above the URL hero) ----------------------- */ .page-head { padding: 24px 40px 0; max-width: 1180px; margin: 0 auto; display: flex; align-items: baseline; justify-content: space-between; gap: 20px; } .page-head .eyebrow { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; } .page-head .eyebrow-code { color: var(--ink-2); font-family: var(--mono); font-size: 11.5px; letter-spacing: 0; text-transform: none; white-space: nowrap; } .page-head .eyebrow-status { display: inline-flex; align-items: center; gap: 5px; color: oklch(0.42 0.12 150); letter-spacing: 0.14em; white-space: nowrap; } .page-head .eyebrow-status-dot { width: 6px; height: 6px; border-radius: 50%; background: oklch(0.55 0.16 150); box-shadow: 0 0 0 3px color-mix(in oklch, oklch(0.55 0.16 150), transparent 80%); } .page-head h1 { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; margin: 8px 0 6px; } .page-head h1 .page-head-cta { font-weight: 400; color: var(--ink-3); margin-left: 6px; } .page-head .sub { font-size: 14px; color: var(--ink-2); max-width: 66ch; line-height: 1.5; } /* CTA footer (bottom of source detail) ------------------------------------ */ .footer-cta { max-width: 1180px; margin: 0 auto; padding: 24px 40px 60px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .footer-cta .meta { font-family: var(--mono); font-size: 12px; color: var(--ink-3); } .footer-cta .actions { display: flex; gap: 10px; } /* Shell + URL hero -------------------------------------------------------- */ .shell { max-width: 1180px; margin: 0 auto; padding: 32px 40px 40px; display: flex; flex-direction: column; gap: 16px; } .url-hero { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px 20px; transition: box-shadow 200ms, border-color 200ms; } /* First-event landing pulse: when Source.first_event_at transitions from undefined to a value during the session, the hero glows green for 4s. Pure feedback for "your paste worked". */ .url-hero[data-first-event-pulse] { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), 0 0 24px var(--accent-soft); animation: first-event-flash 4s ease-out; } @keyframes first-event-flash { 0% { background: var(--accent-soft); } 20% { background: var(--accent-soft); } 100% { background: var(--bg-elev); } } .url-hero-eyebrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; } .pill-live { display: inline-flex; align-items: center; gap: 8px; padding: 2px 10px 2px 8px; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 3px; color: oklch(0.42 0.12 150); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; transition: background 120ms, border-color 120ms, color 120ms; } .pill-live i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: livepulse 1.8s ease-in-out infinite; } .pill-live[data-waiting] { color: var(--ink-2); background: var(--bg-sunken); border-color: var(--line); } .pill-live[data-waiting] i { animation: none; background: oklch(0.65 0.005 250); } .pill-live[data-paused] { color: oklch(0.48 0.14 60); background: oklch(0.97 0.03 85); border-color: oklch(0.86 0.08 80); } .pill-live[data-paused] i { animation: none; background: oklch(0.62 0.14 60); width: 6px; height: 6px; border-radius: 1px; } .big-url { display: flex; align-items: center; font-family: var(--mono); font-size: 22px; line-height: 1.35; letter-spacing: -0.005em; color: var(--ink); word-break: break-all; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; } /* Note: .url-text class supersedes the flat-span rule used by the original URL render. We allow wrapping on long slugs (24-char ids) instead of horizontal scroll behind the action buttons. */ /* =================================================================== Source-detail HERO — verbatim port of the Onboarding design bundle (`onboarding/sources.jsx` + Onboarding.html CSS). Identity row + inputs rail + url-hero merge into one card via the design's built-in seam logic (no custom hacks). =================================================================== */ .inputs-card { display: flex; flex-direction: column; /* No gap — rail and panel/hero touch each other; the rail's bottom edge is the panel's top edge. */ } /* Source identity — the canonical handle for this whole source. Lives ABOVE the rail because every input below shares the same identity (workspace + slug + immutable ID). Rename here renames the source itself, not any single input. */ .src-identity { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: color-mix(in oklch, var(--bg-elev), var(--ink) 1.5%); border: 1px solid var(--line); border-bottom: none; border-radius: 8px 8px 0 0; font-family: var(--mono); font-size: 12px; line-height: 1.2; color: var(--ink-2); } .src-identity-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ui); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); padding-right: 10px; border-right: 1px solid var(--line-2); } .src-identity-eyebrow svg { color: var(--ink-3); flex-shrink: 0; } .src-identity-path { display: inline-flex; align-items: baseline; gap: 0; flex-wrap: wrap; min-width: 0; } .src-identity-ws { color: var(--ink-3); } .src-identity-sep { color: var(--ink-4, color-mix(in oklch, var(--ink-3), var(--bg) 30%)); margin: 0 1px; } .src-identity-slug { appearance: none; background: transparent; border: 1px dashed transparent; color: var(--ink); font-family: inherit; font-size: inherit; font-weight: 600; padding: 1px 5px; border-radius: 4px; cursor: pointer; margin: 0 -1px; transition: background 120ms, border-color 120ms; } .src-identity-slug:hover { background: color-mix(in oklch, var(--bg), var(--ink) 5%); border-color: var(--line-2); } .src-identity-slug[data-custom] { color: oklch(0.42 0.14 250); } /* Empty-state CTA — no alias set yet. Reads as an actionable "do this next" not a label. */ .src-identity-slug[data-empty] { color: oklch(0.42 0.14 250); border-color: color-mix(in oklch, oklch(0.42 0.14 250), transparent 70%); border-style: dashed; background: color-mix(in oklch, oklch(0.42 0.14 250), transparent 94%); display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px 1px 6px; font-style: normal; } .src-identity-slug[data-empty]:hover { background: color-mix(in oklch, oklch(0.42 0.14 250), transparent 88%); border-style: solid; } .src-identity-slug-cta-icon { opacity: 0.85; } .src-identity-slug-cta-text { font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; } /* Inline help marker — small "?" pip beside the rename CTA. The full hint copy lives inside a tooltip that reveals on hover/focus only, so the identity bar stays one quiet line until the user actually reaches for help. Color matches the empty-state CTA (same blue family) so the bar reads as one connected unit instead of two competing accents. */ .src-identity-help { position: relative; display: inline-flex; align-items: center; justify-content: center; margin-left: 6px; align-self: center; cursor: help; outline: none; } .src-identity-help-dot { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; border-radius: 50%; border: 1px solid color-mix(in oklch, oklch(0.42 0.14 250), transparent 65%); background: color-mix(in oklch, oklch(0.42 0.14 250), transparent 92%); color: oklch(0.42 0.14 250); font-family: var(--ui); font-size: 9.5px; font-weight: 600; line-height: 1; transition: all 120ms ease; } .src-identity-help:hover .src-identity-help-dot, .src-identity-help:focus-visible .src-identity-help-dot { background: color-mix(in oklch, oklch(0.42 0.14 250), transparent 80%); border-color: oklch(0.42 0.14 250); color: oklch(0.32 0.16 250); } .src-identity-help-tip { position: absolute; top: calc(100% + 8px); left: 50%; transform: translate(-50%, -2px); min-width: 240px; max-width: 320px; padding: 7px 10px; font-family: var(--ui); font-size: 11.5px; line-height: 1.4; color: oklch(0.32 0.10 250); background: color-mix(in oklch, oklch(0.42 0.14 250), white 92%); border: 1px solid color-mix(in oklch, oklch(0.42 0.14 250), transparent 70%); border-radius: 6px; box-shadow: 0 4px 12px -4px oklch(0 0 0 / 0.12); opacity: 0; pointer-events: none; transition: opacity 140ms ease, transform 140ms ease; z-index: 10; white-space: normal; } .src-identity-help:hover .src-identity-help-tip, .src-identity-help:focus-visible .src-identity-help-tip, .src-identity-help[data-proactive] .src-identity-help-tip { opacity: 1; transform: translate(-50%, 0); } /* Proactive tip is shown unconditionally for first-run; nudges the dot so it reads as "look at me" not "passive". Color shifts to amber so it doesn't visually merge with the regular help-blue. */ .src-identity-help[data-proactive] { pointer-events: auto; } .src-identity-help[data-proactive] .src-identity-help-dot { background: oklch(0.95 0.07 85); border-color: oklch(0.78 0.10 85); color: oklch(0.40 0.10 75); animation: name-hint-pulse 1.6s ease-in-out infinite; } .src-identity-help[data-proactive] .src-identity-help-tip { background: oklch(0.96 0.06 90); border-color: oklch(0.78 0.10 85); color: oklch(0.30 0.05 70); pointer-events: auto; padding-right: 26px; } .src-identity-help[data-proactive] .src-identity-help-tip-arrow { background: oklch(0.96 0.06 90); border-color: oklch(0.78 0.10 85); } .src-identity-help[data-proactive] .src-identity-help-tip code { background: oklch(0.99 0.02 90); border-color: oklch(0.85 0.06 85); color: oklch(0.30 0.05 70); } .src-identity-help-tip-dismiss { position: absolute; top: 4px; right: 6px; width: 16px; height: 16px; border: none; background: transparent; cursor: pointer; font-size: 13px; line-height: 1; color: oklch(0.50 0.05 80); display: inline-flex; align-items: center; justify-content: center; } .src-identity-help-tip-dismiss:hover { color: oklch(0.30 0.05 70); } @keyframes name-hint-pulse { 0%, 100% { box-shadow: 0 0 0 0 oklch(0.78 0.10 85 / 0.45); } 50% { box-shadow: 0 0 0 5px oklch(0.78 0.10 85 / 0); } } .src-identity-help-tip-arrow { position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; background: color-mix(in oklch, oklch(0.42 0.14 250), white 92%); border-left: 1px solid color-mix(in oklch, oklch(0.42 0.14 250), transparent 70%); border-top: 1px solid color-mix(in oklch, oklch(0.42 0.14 250), transparent 70%); transform: translateX(-50%) rotate(45deg); } .src-identity-help-tip code { font-family: var(--mono); font-size: 10.5px; padding: 0 3px; background: white; border: 1px solid color-mix(in oklch, oklch(0.42 0.14 250), transparent 75%); border-radius: 3px; color: oklch(0.32 0.14 250); } .src-identity-id { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-3); flex-shrink: 0; } .src-identity-id-lbl { font-family: var(--ui); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .src-identity-id code { background: var(--bg); border: 1px solid var(--line-2); border-radius: 3px; padding: 1px 5px; color: var(--ink-2); font-size: 11px; } .src-identity-id-copy { appearance: none; background: transparent; border: none; padding: 2px; color: var(--ink-3); cursor: pointer; border-radius: 3px; display: inline-flex; } .src-identity-id-copy:hover { color: var(--ink); background: color-mix(in oklch, var(--bg), var(--ink) 5%); } /* Rename popover for source identity — same skeleton as the URL hero rename, just anchored to identity bar */ .src-identity-rename { position: absolute; top: calc(100% + 4px); left: 12px; z-index: 30; width: 360px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04); padding: 12px; font-family: var(--ui); font-size: 12px; color: var(--ink); } .src-identity-rename-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; } .src-identity-rename-title { font-weight: 600; font-size: 12.5px; } .src-identity-rename-id { font-family: var(--mono); font-size: 11px; color: var(--ink-3); } .src-identity-rename-id code { background: var(--bg); border: 1px solid var(--line-2); border-radius: 3px; padding: 1px 4px; color: var(--ink-2); } .src-identity-rename-row { display: flex; align-items: center; gap: 0; border: 1px solid var(--line); border-radius: 5px; background: var(--bg); padding: 0; margin-bottom: 6px; } .src-identity-rename-prefix { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); padding: 6px 0 6px 8px; white-space: nowrap; } .src-identity-rename-input { flex: 1; min-width: 0; appearance: none; background: transparent; border: none; outline: none; font-family: var(--mono); font-size: 11.5px; color: var(--ink); padding: 6px 8px; } .src-identity-rename-preview { font-size: 11px; color: var(--ink-3); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .src-identity-rename-charset { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--ink-3); background: var(--bg); border: 1px solid var(--line-2); border-radius: 3px; padding: 1px 6px; letter-spacing: 0.04em; } .src-identity-rename-preview code { background: var(--bg); border: 1px solid var(--line-2); border-radius: 3px; padding: 1px 4px; color: var(--ink-2); font-family: var(--mono); } .src-identity-rename-ok { color: oklch(0.5 0.13 150); margin-left: 4px; font-weight: 600; } .src-identity-rename-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: 1px solid var(--line-2); } .src-identity-rename-hint { font-size: 11px; color: var(--ink-3); line-height: 1.4; flex: 1; } .src-identity-rename-hint code { background: var(--bg); border: 1px solid var(--line-2); border-radius: 3px; padding: 0 3px; color: var(--ink-2); font-family: var(--mono); font-size: 10.5px; } .src-identity-rename-actions { display: flex; gap: 6px; flex-shrink: 0; } .src-identity-rename-btn { appearance: none; border: 1px solid var(--line); background: var(--bg-elev); color: var(--ink); font-size: 11.5px; font-weight: 500; padding: 5px 10px; border-radius: 5px; cursor: pointer; font-family: inherit; } .src-identity-rename-btn.primary { background: var(--ink); color: var(--bg-elev); border-color: var(--ink); } .src-identity-rename-btn.primary[disabled] { opacity: 0.4; cursor: not-allowed; } .src-identity-rename-btn.ghost { background: transparent; } .src-identity-rename-history { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-2); font-size: 11px; color: var(--ink-3); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .src-identity-rename-history-lbl { font-weight: 600; } .src-identity-rename-history-item { background: var(--bg); border: 1px solid var(--line-2); border-radius: 3px; padding: 1px 5px; color: var(--ink-2); font-family: var(--mono); font-size: 10.5px; } /* When identity is the first child of inputs-card, rail's top radius collapses so they merge */ .src-identity + .inputs-rail { border-top-left-radius: 0; border-top-right-radius: 0; } /* Inputs rail — sits as the "tab strip" of a unified card. Together with the panel/hero beneath, it reads as a single card with tabs on top, like a browser tab strip. */ .inputs-rail { display: flex; align-items: flex-start; /* allow rows of different heights when tabs wrap */ flex-wrap: wrap; /* let the tab strip break onto a second row instead of horizontal scroll */ gap: 4px 12px; /* row gap when wrapping; col gap between label/tabs/add */ margin: 0; /* flush with the panel below — they read as one connected card */ padding: 6px 8px 0 12px; /* no bottom padding — tabs sit on the seam */ border: 1px solid var(--line); border-bottom: 0; /* the panel below provides the seam */ border-radius: 12px 12px 0 0; background: var(--bg-sunken); position: relative; z-index: 1; } /* Visual connector logic — the active tab visually "merges" into the panel below by: 1. matching the panel's background color on its bottom edge 2. the panel below has its top border start from the right of the active tab + go right, and from the left of the active tab + go left (handled via panel's border-image when we set the stem position) */ /* When the panel/hero follows the rail, kill the top radius so they merge into one card */ .inputs-rail + .url-hero, .inputs-rail + .src-panel > .src-panel-head, .inputs-rail + .src-panel > .src-panel-body:first-child { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; position: relative; } /* The seam between the rail and the panel below — a 1px line that the active tab "punches through" by sitting on top of it with the same bg color as the panel. */ .inputs-rail::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--line); pointer-events: none; } .inputs-rail-label { display: inline-flex; align-items: center; gap: 6px; /* Match the active-tab height so the label sits on the same baseline as the tabs. The rail uses align-items: flex-start (to allow tab rows of different heights when wrapping), so each child needs its own height to vertically center. */ align-self: stretch; min-height: 30px; padding: 0 10px 0 0; border-right: 1px dashed var(--line-2); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; } .inputs-rail-label svg { color: var(--ink-3); } .inputs-rail-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 10px; font-weight: 700; letter-spacing: 0; } .inputs-rail-tabs { flex: 1 1 360px; /* shrink/grow but ensure it has room before wrapping to a new line */ min-width: 0; display: flex; flex-wrap: wrap; /* tabs wrap onto a second row instead of horizontal scroll */ align-items: center; gap: 4px; align-self: center; /* keep vertical alignment with label/add when single-row */ } .inputs-rail-tab { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px 8px 9px; /* slightly more bottom padding so the active tab visually sits on the seam */ margin-bottom: -1px; /* overlap the rail's bottom seam so the active tab can punch through */ border: 1px solid transparent; border-bottom: 0; border-radius: 7px 7px 0 0; background: transparent; color: var(--ink-2); font-family: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; position: relative; transition: background 120ms, border-color 120ms, color 120ms; } .inputs-rail-tab:hover { background: color-mix(in oklch, var(--bg), var(--ink) 4%); color: var(--ink); } .inputs-rail-tab[data-active] { background: var(--bg-elev); /* same color as the panel below — visually merges */ border-color: var(--line); color: var(--ink); box-shadow: none; } .inputs-rail-tab-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: var(--bg-sunken); border: 1px solid var(--line); color: var(--ink-2); } .inputs-rail-tab[data-channel="push"] .inputs-rail-tab-icon { color: oklch(0.42 0.12 150); } .inputs-rail-tab[data-channel="pull"] .inputs-rail-tab-icon { color: oklch(0.48 0.14 250); } .inputs-rail-tab-name { font-weight: 500; } /* Inline-rename input replaces .inputs-rail-tab-name when user double-clicks. We mimic the static label's typography exactly so width doesn't visibly jump on enter/exit. */ .inputs-rail-tab-name-input { font: inherit; font-weight: 500; color: inherit; background: var(--bg); border: 1px solid var(--line-strong, var(--line)); border-radius: 4px; padding: 1px 5px; margin: -2px 0; /* keep tab vertical rhythm; input is 4px taller than the span */ outline: none; min-width: 80px; width: 14ch; box-shadow: 0 0 0 2px color-mix(in oklch, var(--accent, oklch(0.55 0.18 250)), transparent 80%); } .inputs-rail-tab[data-renaming] { cursor: text; } .inputs-rail-tab[data-renaming]:hover { background: var(--bg-elev); } .inputs-rail-tab-state { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; padding: 1px 5px; border-radius: 4px; color: var(--ink-3); background: var(--bg-sunken); border: 1px solid var(--line); font-weight: 600; } .inputs-rail-tab-state[data-state="live"] { color: oklch(0.42 0.12 150); background: oklch(0.96 0.04 150); border-color: oklch(0.86 0.08 150); } .inputs-rail-tab-state[data-state="paused"] { color: oklch(0.48 0.14 60); background: oklch(0.97 0.03 85); border-color: oklch(0.86 0.08 80); } .inputs-rail-tab-state[data-state="waiting"], .inputs-rail-tab-state[data-state="draft"] { color: var(--ink-3); background: var(--bg-sunken); border-color: var(--line); } /* Onboarding hint chips — surface inline next to the (single) tab when there's only one input. The point is to make it OBVIOUS that this source can also accept other channels, not just the one already shown. We render only in the single-input state so the chips don't compete with real tabs once the user adds more. */ .inputs-rail-hint { display: inline-flex; align-items: center; gap: 6px; padding: 0 0 0 10px; margin-left: 4px; border-left: 1px dashed var(--line-2); align-self: stretch; min-height: 30px; flex-wrap: wrap; } .inputs-rail-hint-or { font-family: var(--ui); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); font-weight: 600; padding-right: 2px; } .inputs-rail-hint-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px 4px 6px; border: 1px dashed var(--line); border-radius: 999px; background: var(--bg); color: var(--ink-2); cursor: pointer; font-family: inherit; font-size: 11.5px; font-weight: 500; transition: background 120ms, border-color 120ms, color 120ms; } .inputs-rail-hint-chip:hover { background: var(--bg-elev); border-style: solid; border-color: var(--ink-2); color: var(--ink); } .inputs-rail-hint-chip-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; color: var(--ink-3); } .inputs-rail-hint-chip[data-channel="push"]:hover .inputs-rail-hint-chip-icon { color: oklch(0.42 0.12 150); } .inputs-rail-hint-chip[data-channel="pull"]:hover .inputs-rail-hint-chip-icon { color: oklch(0.48 0.14 250); } .inputs-rail-hint-chip-name { white-space: nowrap; } .inputs-rail-hint-more { appearance: none; background: transparent; border: none; padding: 4px 6px; color: var(--ink-3); cursor: pointer; font-family: inherit; font-size: 11.5px; font-weight: 500; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; } .inputs-rail-hint-more:hover { color: var(--ink); } .inputs-rail-add-wrap { position: relative; margin-left: auto; padding-left: 4px; border-left: 1px dashed var(--line-2); display: inline-flex; align-items: center; gap: 6px; } /* Archived disclosure — sits next to "Add input" so the user always knows previous inputs aren't lost. We hide it entirely when there are zero archived items so it doesn't add noise; appears the moment something gets archived. */ .inputs-rail-archived { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink-3); cursor: pointer; font-family: inherit; font-size: 11.5px; font-weight: 500; transition: background 120ms, border-color 120ms, color 120ms; } .inputs-rail-archived:hover { border-color: var(--ink-2); color: var(--ink); } .inputs-rail-archived svg { color: var(--ink-3); } .inputs-rail-archived:hover svg { color: var(--ink-2); } .inputs-rail-archived-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--bg-elev); border: 1px solid var(--line-2); color: var(--ink-2); font-family: var(--mono); font-size: 10px; font-weight: 600; } .inputs-rail-archived-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: 320px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04); overflow: hidden; } .inputs-rail-archived-pop-head { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 12px 8px; border-bottom: 1px solid var(--line-2); font-family: var(--ui); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); } .inputs-rail-archived-pop-hint { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 10.5px; color: var(--ink-3); } .inputs-rail-archived-list { list-style: none; margin: 0; padding: 4px 0; max-height: 280px; overflow-y: auto; } .inputs-rail-archived-item { display: flex; align-items: center; gap: 9px; padding: 7px 12px; font-size: 12px; } .inputs-rail-archived-item:hover { background: color-mix(in oklch, var(--bg), var(--ink) 3%); } .inputs-rail-archived-item-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--bg); color: var(--ink-2); flex-shrink: 0; } .inputs-rail-archived-item-icon[data-channel="push"] { color: oklch(0.42 0.12 150); } .inputs-rail-archived-item-icon[data-channel="pull"] { color: oklch(0.48 0.14 250); } .inputs-rail-archived-item-name { flex: 1; min-width: 0; color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .inputs-rail-archived-item-meta { font-size: 10.5px; color: var(--ink-3); flex-shrink: 0; } .inputs-rail-archived-item-restore { appearance: none; border: 1px solid var(--line); background: var(--bg-elev); color: var(--ink); font-family: inherit; font-size: 11px; font-weight: 500; padding: 4px 9px; border-radius: 4px; cursor: pointer; flex-shrink: 0; } .inputs-rail-archived-item-restore:hover { background: color-mix(in oklch, var(--bg-elev), var(--ink) 6%); border-color: var(--ink-2); } .inputs-rail-add { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px dashed var(--line-2); border-radius: 8px; background: transparent; color: var(--ink-2); font-family: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background 120ms, border-color 120ms, color 120ms; } .inputs-rail-add:hover { border-color: var(--ink-2); color: var(--ink); background: var(--bg); } /* Tabs row — close the gap to the content below */ .source-tabs + * { margin-top: -16px; } .source-tabs + .stream-block { border-top-left-radius: 0; border-top-right-radius: 0; } /* Split LIVE / PAUSE pill — connection state on left, pause control on right */ .pill-live-split { display: inline-flex; align-items: stretch; gap: 0; flex-shrink: 0; border: 1px solid var(--accent-line); border-radius: 4px; overflow: hidden; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } .pill-live-split .pls-state { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; background: var(--accent-soft); color: oklch(0.42 0.12 150); white-space: nowrap; } .pill-live-split .pls-state i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: livepulse 1.8s ease-in-out infinite; } .pill-live-split[data-paused] .pls-state { background: oklch(0.97 0.03 85); color: oklch(0.48 0.14 60); } .pill-live-split[data-paused] .pls-state i { animation: none; background: oklch(0.62 0.14 60); border-radius: 1px; } .pill-live-split[data-waiting] .pls-state { background: var(--bg-sunken); color: var(--ink-2); } .pill-live-split[data-waiting] .pls-state i { animation: none; background: oklch(0.65 0.005 250); } .pill-live-split .pls-action { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; background: var(--bg-elev); color: var(--ink-2); border: none; border-left: 1px solid var(--accent-line); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; } .pill-live-split .pls-action:hover { background: var(--bg-sunken); color: var(--ink); } .pill-live-split[data-paused] .pls-action { border-left-color: oklch(0.86 0.08 80); } /* Inline "Show me how" link inside the blurb paragraph */ .url-blurb-link { background: transparent; border: none; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; } .url-blurb-link:hover { color: oklch(0.50 0.14 150); } /* Structured URL render: muted protocol/path + highlighted slug */ .big-url { flex-wrap: wrap; } .big-url .url-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; word-break: break-all; white-space: normal; } .big-url .url-text .muted { color: var(--ink-3); } .big-url .url-slug { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: none; padding: 0; font: inherit; color: var(--ink); cursor: default; } .big-url .url-slug-text { font-weight: 600; } .big-url .url-slug-pencil { opacity: 0; transition: opacity 120ms ease; } .big-url .url-slug:hover .url-slug-pencil { opacity: 0.6; } .big-url .url-actions { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; } /* General instruction blurb below URL */ .url-blurb { margin: 14px 2px 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); max-width: 760px; } /* "First time? Show me how →" collapsible */ .how-block-toggle { margin: 12px 0 0; background: transparent; border: none; padding: 0; font-family: var(--mono); font-size: 12px; color: var(--ink-3); cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; } .how-block-toggle:hover { color: var(--ink); } .how-block { margin-top: 14px; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; } .lang-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); background: var(--bg-elev); overflow-x: auto; } .lang-tab { padding: 10px 14px; background: transparent; border: none; border-bottom: 2px solid transparent; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); cursor: pointer; flex-shrink: 0; transition: color 120ms, border-color 120ms, background 120ms; } .lang-tab[data-active="true"] { color: var(--ink); border-bottom-color: var(--accent); background: var(--bg-sunken); } .lang-tab:hover:not([data-active="true"]) { color: var(--ink-2); } .code { position: relative; padding: 16px 18px; padding-right: 70px; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; color: var(--ink); background: var(--bg-sunken); white-space: pre; overflow-x: auto; } .code pre { margin: 0; font: inherit; } .code-copy { position: absolute; top: 10px; right: 10px; padding: 4px 10px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 4px; font-family: var(--mono); font-size: 11px; color: var(--ink-2); cursor: pointer; transition: color 120ms, border-color 120ms; } .code-copy:hover { color: var(--ink); border-color: var(--line-2); } /* Stack URL + actions on narrow screens */ @media (max-width: 720px) { .big-url { flex-direction: column; align-items: stretch; gap: 10px; } .big-url .url-actions { justify-content: flex-end; } } /* Live event feed --------------------------------------------------------- */ .stream-block { background: var(--rail); color: var(--rail-ink); border-radius: 14px; overflow: hidden; } .stream-head { display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-bottom: 1px solid var(--rail-line); } .stream-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 oklch(0.58 0.12 150 / 0.4); animation: pulse 1.6s ease-out infinite; } .stream-pulse[data-waiting] { background: oklch(0.65 0.005 250); animation: none; box-shadow: none; } /* Inline error banner above the stream-block on the Live tab. Surfaces recent failed trigger runs so operators see them without clicking into the Errors tab. Amber-warning palette to distinguish from hard red errors and to read as "needs attention" not "system down". */ .error-banner { margin-bottom: 12px; padding: 10px 12px; background: oklch(0.96 0.06 80); border: 1px solid oklch(0.78 0.10 75); border-radius: 8px; font-size: 12.5px; color: oklch(0.32 0.06 70); } /* High-failure-rate variant — red instead of amber so the operator sees "this needs immediate attention" not "fyi some retries". */ .error-banner[data-rate-high] { background: oklch(0.95 0.06 25); border-color: oklch(0.65 0.18 25); color: oklch(0.30 0.10 25); } .error-banner[data-rate-high] .error-banner-icon { color: oklch(0.55 0.20 25); } .error-banner[data-rate-high] .error-banner-cta { border-color: oklch(0.65 0.18 25); color: oklch(0.40 0.14 25); } .error-banner[data-rate-high] .error-banner-cta:hover { border-color: oklch(0.50 0.20 25); background: oklch(0.99 0.02 25); } .error-banner[data-rate-high] .error-banner-row { border-top-color: oklch(0.65 0.18 25 / 0.4); } .error-banner[data-rate-high] .error-banner-trigger { color: oklch(0.30 0.14 25); } .error-banner-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .error-banner-icon { display: inline-flex; align-items: center; justify-content: center; color: oklch(0.55 0.14 60); } .error-banner-cta { margin-left: auto; border: 1px solid oklch(0.78 0.10 75); background: white; color: oklch(0.40 0.08 70); font-family: var(--ui); font-size: 11.5px; padding: 3px 10px; border-radius: 4px; cursor: pointer; } .error-banner-cta:hover { background: oklch(0.99 0.02 80); border-color: oklch(0.55 0.14 60); } .error-banner-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .error-banner-row { display: grid; grid-template-columns: minmax(80px, 1fr) 3fr auto; gap: 12px; align-items: baseline; padding: 4px 0; font-family: var(--mono); font-size: 11.5px; border-top: 1px solid oklch(0.78 0.10 75 / 0.4); } .error-banner-row:first-child { border-top: none; } .error-banner-trigger { color: oklch(0.30 0.08 70); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .error-banner-detail { color: oklch(0.42 0.06 70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .error-banner-when { color: oklch(0.55 0.04 70); font-size: 10.5px; white-space: nowrap; } .error-banner-more { margin-top: 8px; font-size: 11px; color: oklch(0.55 0.04 70); } @keyframes pulse { 0% { box-shadow: 0 0 0 0 oklch(0.58 0.12 150 / 0.4); } 100% { box-shadow: 0 0 0 12px oklch(0.58 0.12 150 / 0); } } .event-row { display: grid; grid-template-columns: 88px 56px 240px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 20px; border-bottom: 1px solid var(--rail-line); animation: eventSlide 400ms ease-out; } .event-row:hover { background: oklch(0.22 0.01 250); } .event-row:focus { outline: none; background: oklch(0.24 0.02 250); box-shadow: inset 2px 0 0 var(--accent); } .event-row:last-child { border-bottom: none; } .event-actions { display: inline-flex; align-items: center; gap: 6px; opacity: 0; transition: opacity 100ms; } .event-row:hover .event-actions, .event-row:focus .event-actions { opacity: 1; } .event-action-trigger { padding: 3px 9px; font-family: var(--mono); font-size: 10.5px; background: transparent; color: var(--rail-ink-2); border: 1px solid var(--rail-line); border-radius: 4px; cursor: pointer; text-transform: lowercase; letter-spacing: 0.04em; } .event-action-trigger:hover { color: var(--accent); border-color: var(--accent); background: oklch(0.22 0.01 250); } /* Header row above the live feed — same columns, no animation, sticky-ish look. */ .event-row-head { display: grid; grid-template-columns: 88px 56px 240px minmax(0, 1fr) auto; gap: 12px; padding: 8px 20px; border-bottom: 1px solid var(--rail-line); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--rail-ink-2); } /* Origin column — badges packed inline, no wrap. */ .event-source { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; } .event-source-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .event-source-badge { flex-shrink: 0; padding: 0 5px; font-size: 10px; font-family: var(--mono); background: var(--bg-elev); border-radius: 3px; color: var(--ink-3); } /* Payload column — single-line ellipsis, mono. */ .event-payload { font-family: var(--mono); font-size: 11px; color: var(--rail-ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .source-tab:hover { color: var(--ink) !important; background: var(--bg-elev); } @keyframes eventSlide { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } } .event-time { font-family: var(--mono); font-size: 11px; color: var(--rail-ink-2); font-variant-numeric: tabular-nums; } .event-method { display: inline-block; padding: 2px 7px; background: oklch(0.28 0.01 250); border-radius: 3px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--rail-ink); text-align: center; } .event-source { display: inline-flex; align-items: center; gap: 6px; padding: 3px 7px; background: oklch(0.18 0.01 250); border: 1px solid var(--rail-line); border-radius: 4px; font-family: var(--mono); font-size: 11px; color: var(--rail-ink-2); } .event-source-icon { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: oklch(0.78 0.12 150); } /* Collapsibles ------------------------------------------------------------ */ .collapse { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } .collapse-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 18px; cursor: pointer; } .collapse-head:hover { background: var(--bg-sunken); } .collapse-title { font-size: 14px; font-weight: 500; color: var(--ink); } .collapse-sub { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); margin-top: 2px; } .collapse-chev { font-family: var(--mono); color: var(--ink-3); transition: transform 150ms; } .collapse[data-open="true"] .collapse-chev { transform: rotate(90deg); } .collapse-body { display: none; padding: 0 18px 18px; border-top: 1px solid var(--line); } .collapse[data-open="true"] .collapse-body { display: block; padding-top: 16px; } /* Code -------------------------------------------------------------------- */ .code, pre.code { margin: 0; padding: 14px 16px; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 8px; font-family: var(--mono); font-size: 12px; line-height: 1.55; color: var(--ink); white-space: pre; overflow-x: auto; } .sig-tabs { display: inline-flex; gap: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; } .sig-tab { padding: 4px 10px; background: transparent; border: none; border-right: 1px solid var(--line); cursor: pointer; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } .sig-tab:last-child { border-right: none; } .sig-tab:hover { background: var(--bg-sunken); color: var(--ink); } .sig-tab.active { background: var(--ink); color: var(--bg); } /* Skeleton loaders — pulsing placeholders for async-loading content. Width varies via inline style so multiple bars feel like real text lines. */ .skel-bar { display: block; height: 12px; background: linear-gradient(90deg, var(--bg-sunken) 0%, var(--line) 50%, var(--bg-sunken) 100%); background-size: 200% 100%; border-radius: 3px; animation: skel-shimmer 1.4s ease-in-out infinite; } @keyframes skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skel-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 8px; padding: 14px; animation: skel-pulse 1.4s ease-in-out infinite; } @keyframes skel-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } /* ── Responsive ────────────────────────────────────────────────────────────── Tablet (≤ 1024px): drop padding, allow tab strips to scroll horizontally, wrap button rows. Mobile (≤ 768px): stack URL-hero buttons under the URL, reduce header padding, h1 down a notch, modals become near-fullscreen. */ @media (max-width: 1024px) { .shell { padding: 24px 20px 32px; max-width: 100%; } .topbar { padding: 10px 16px; } .url-hero { padding: 14px; } .page-head h1 { font-size: 24px; } } @media (max-width: 768px) { .shell { padding: 16px 12px 24px; gap: 12px; } .topbar { padding: 8px 12px; flex-wrap: wrap; gap: 8px; } .url-hero { padding: 12px; flex-direction: column; align-items: stretch; } .url-hero > div:last-child { flex-wrap: wrap; } .page-head h1 { font-size: 20px; line-height: 1.2; } .page-head .sub { font-size: 13px; } /* Tab strip: allow horizontal scroll instead of overflow. */ .source-tab { padding: 8px 14px !important; font-size: 12.5px !important; } /* Event row grid collapses to two visible lines on mobile: row 1 = time + method + origin · row 2 = payload. */ .event-row, .event-row-head { grid-template-columns: auto auto 1fr !important; grid-template-rows: auto auto; gap: 4px 8px !important; padding: 10px 14px !important; } .event-row .event-payload, .event-row-head > :nth-child(4) { grid-column: 1 / -1; } } @media (max-width: 480px) { .shell { padding: 12px 8px 20px; } .page-head h1 { font-size: 18px; } .url-hero { font-size: 11px; } }