/* Analytics dashboard theme scope — issue #379, docs/bot-analytics-ui-port-plan.md §2.
Faithful port of the retired robotmoney-bot-analytics app's shadcn/Tailwind
design system (src/index.css) into a single stylesheet, scoped ENTIRELY
under `.a3` so nothing here can leak onto marketing pages and no marketing
rule can leak in. Every dashboard fragment puts `class="a3"` on its own
root element (never on or the shell shared with marketing).
Two brand-covenant conflicts force this dedicated scope instead of reusing
tokens.css directly (see the plan §2 for the full rationale):
1. Radius: repo-wide --radius is 2px; the dashboard needs 0.25rem (lg),
with -2px/-4px md/sm steps, matching the original's tailwind.config.
2. tokens.css declares cyan a LINE-only accent and retires --color-purple;
the dashboard look uses cyan FILLS (chips, active nav) and purple
throughout, so it re-derives its own local HSL tokens rather than
reference the marketing palette vars.
Class names for PORTED components (.metric-card, .glow-cyan/.glow-purple,
.status-active/.status-inactive, .data-label/.data-value,
.hide-x-scrollbar/.scrollbar-thin/.no-scrollbar) are the ORIGINAL's own
class names verbatim (src/index.css) — fidelity, not a naming choice, so a
later ported fragment can be pasted in without a rename. Hand-rolled UI
PRIMITIVES that have no original class name (they were unnamed shadcn/
Tailwind utility soup in the source) use an `a3-` prefix so they read as
"primitive I built for this scope" and never collide with a ported name. */
.a3 {
/* Re-derived shadcn HSL tokens (src/index.css :root), scoped locally so they
never read as (or overwrite) the marketing tokens.css set. */
--background: 222 33% 4%; /* #06080c void, matches --color-void */
--foreground: 230 15% 90%; /* #e2e4ec, matches --color-text */
--card: 218 28% 9%; /* #10141c surface, matches --color-surface */
--popover: 218 28% 9%;
--primary: 186 100% 50%; /* cyan #00e5ff */
--primary-foreground: 222 33% 4%;
--accent: 186 100% 50%;
--ring: 186 100% 50%;
--secondary: 270 60% 55%; /* purple — retired in tokens.css, live here */
--secondary-foreground: 0 0% 100%;
--muted: 218 25% 12%;
--muted-foreground: 220 12% 60%;
--destructive: 0 65% 55%;
--border: 216 24% 18%; /* #222a38 */
--input: 216 24% 18%;
/* Ad-hoc hues the original used as raw hsl() literals throughout pages
rather than tokens — tokenized here so every ported fragment references
one source instead of re-guessing the literal. */
--success: 142 70% 45%;
--amber: 38 90% 55%;
/* Chart.js dash theme (P0.5) draws from these five, matching the
original's --chart-1..5. Declared here (P0.1 scope) since they are
tokens, not chart wiring. */
--chart-1: 186 100% 50%;
--chart-2: 270 60% 55%;
--chart-3: 142 70% 45%;
--chart-4: 38 90% 55%;
--chart-5: 340 75% 55%;
--radius: 0.25rem;
--radius-md: calc(var(--radius) - 0.125rem);
--radius-sm: calc(var(--radius) - 0.25rem);
background: hsl(var(--background));
color: hsl(var(--foreground));
font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
font-size: 16px;
line-height: 1.5;
}
.a3 *, .a3 *::before, .a3 *::after { box-sizing: border-box; }
.a3 a { color: inherit; text-decoration: none; }
.a3 button { font: inherit; color: inherit; }
/* ── Typography ──────────────────────────────────────────────────────────
"all h1-h6 = JetBrains Mono 700" (src/index.css base layer) — the one
deliberate exception is AgentProfile's dossier name heading (non-mono,
§5.8), handled locally by that fragment, not here. */
.a3 h1, .a3 h2, .a3 h3, .a3 h4, .a3 h5, .a3 h6 {
font-family: 'JetBrains Mono', 'Fira Code', monospace;
font-weight: 700;
margin: 0;
}
.a3 code, .a3 .font-mono { font-family: 'JetBrains Mono', 'Fira Code', monospace; }
/* ── Ported component classes (verbatim names, src/index.css) ───────────── */
.a3 .metric-card {
background: hsl(var(--card));
border: 1px solid hsl(var(--border));
border-radius: var(--radius);
padding: 1.25rem;
}
.a3 .glow-cyan { box-shadow: 0 0 20px hsl(187 100% 45% / 0.15); }
.a3 .glow-purple { box-shadow: 0 0 20px hsl(270 60% 55% / 0.15); }
.a3 .status-active,
.a3 .status-inactive {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.15rem 0.55rem;
border-radius: 9999px;
font-family: 'JetBrains Mono', monospace;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
border: 1px solid transparent;
}
.a3 .status-active {
color: hsl(var(--success));
background: hsl(var(--success) / 0.12);
border-color: hsl(var(--success) / 0.25);
}
.a3 .status-inactive {
color: hsl(var(--muted-foreground));
background: hsl(var(--muted) / 0.5);
border-color: hsl(var(--border));
}
.a3 .data-label {
display: block;
font-family: 'JetBrains Mono', monospace;
font-size: 0.75rem;
color: hsl(var(--muted-foreground));
text-transform: uppercase;
letter-spacing: 0.05em;
}
.a3 .data-value {
display: block;
font-family: 'JetBrains Mono', monospace;
font-size: 1.5rem;
font-weight: 700;
color: hsl(var(--foreground));
}
/* Scrollbar utilities (src/index.css). .hide-x-scrollbar hides ONLY the
horizontal webkit scrollbar (used by the Projects dual-scroll, P2.8);
.no-scrollbar/.scrollbar-thin cover the general table-shell cases here. */
.a3 .hide-x-scrollbar::-webkit-scrollbar:horizontal { display: none; }
.a3 .hide-x-scrollbar { scrollbar-width: none; }
.a3 .no-scrollbar::-webkit-scrollbar { display: none; }
.a3 .no-scrollbar { scrollbar-width: none; }
.a3 .scrollbar-thin::-webkit-scrollbar { width: 8px; height: 8px; }
.a3 .scrollbar-thin::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 9999px; }
.a3 .scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.a3 .scrollbar-thin { scrollbar-width: thin; scrollbar-color: hsl(var(--border)) transparent; }
/* ── Table shell (every list page reuses this: sticky header, tinted sort
column, mono uppercase header cells) ──────────────────────────────────── */
.a3 .a3-table-wrap { overflow-x: auto; border: 1px solid hsl(var(--border)); border-radius: var(--radius); }
.a3 .a3-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.a3 .a3-table thead { background: hsl(var(--muted) / 0.3); position: sticky; top: 0; z-index: 1; }
.a3 .a3-table th {
font-family: 'JetBrains Mono', monospace;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: hsl(var(--muted-foreground));
text-align: left;
padding: 0.6rem 0.85rem;
border-bottom: 1px solid hsl(var(--border));
white-space: nowrap;
}
.a3 .a3-table th[aria-sort] { cursor: pointer; user-select: none; }
.a3 .a3-table td {
padding: 0.6rem 0.85rem;
border-bottom: 1px solid hsl(var(--border) / 0.6);
vertical-align: middle;
}
.a3 .a3-table tbody tr:last-child td { border-bottom: none; }
.a3 .a3-table tbody tr:hover { background: hsl(var(--muted) / 0.2); }
/* Sorted column gets a subtle tint on both header + cells (§5.1). */
.a3 .a3-table th.is-sorted, .a3 .a3-table td.is-sorted { background: hsl(var(--primary) / 0.05); }
/* ── Badge / pill variants (protocol/type badges throughout list pages) ── */
.a3 .a3-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.1rem 0.5rem;
border-radius: 9999px;
border: 1px solid hsl(var(--border));
font-family: 'JetBrains Mono', monospace;
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: hsl(var(--muted-foreground));
background: transparent;
}
.a3 .a3-badge--solid { background: hsl(var(--muted)); }
.a3 .a3-badge--cyan { color: hsl(var(--primary)); border-color: hsl(var(--primary) / 0.4); }
.a3 .a3-badge--purple { color: hsl(var(--secondary)); border-color: hsl(var(--secondary) / 0.4); }
.a3 .a3-badge--green { color: hsl(var(--success)); border-color: hsl(var(--success) / 0.4); }
.a3 .a3-badge--amber { color: hsl(var(--amber)); border-color: hsl(var(--amber) / 0.4); }
.a3 .a3-badge--destructive { color: hsl(var(--destructive)); border-color: hsl(var(--destructive) / 0.4); }
.a3 .a3-badge--muted { color: hsl(var(--muted-foreground)); }
/* ── Animations (src/index.css keyframes, renamed a3* to avoid any global
@keyframes collision — @keyframes cannot itself be class-scoped) ──────── */
@keyframes a3FadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes a3FadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes a3Pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes a3Shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes a3SlideInRight { from { transform: translateX(1rem); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes a3SheetInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
.a3 .a3-fade-in { animation: a3FadeIn 0.5s ease-out both; }
.a3 .a3-fade-in-up { animation: a3FadeInUp 0.5s ease-out both; }
.a3 .a3-pulse { animation: a3Pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
/* ══ UI primitives (P0.2, alpine/dash-ui.js) ═══════════════════════════════
Hand-rolled equivalents of the ~13 shadcn primitives actually imported by
the original (D1, docs/bot-analytics-ui-port-plan.md §8): buildless, no
Radix — Alpine supplies the behavior, these classes supply the pixels. */
/* Tabs / pills (Tabs primitive + the filter-pill pattern used on /list etc.) */
.a3 .a3-tabs { display: inline-flex; gap: 0.25rem; padding: 0.2rem; background: hsl(var(--muted) / 0.4); border-radius: var(--radius); }
.a3 .a3-tab {
padding: 0.35rem 0.85rem;
border-radius: var(--radius-sm);
border: none;
background: transparent;
color: hsl(var(--muted-foreground));
font-family: 'JetBrains Mono', monospace;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.04em;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.a3 .a3-tab:hover { background: hsl(var(--muted) / 0.6); }
.a3 .a3-tab.is-active { background: hsl(var(--primary) / 0.12); color: hsl(var(--primary)); font-weight: 600; }
/* Tooltip (hover + rich content) — bubble is appended to by the
x-a3-tooltip directive, so it is NOT a `.a3` descendant; style it globally
under its own a3- prefix instead, one exception the directive's doc comment
explains. */
.a3-tooltip-bubble {
position: fixed;
transform: translate(-50%, -100%);
z-index: 80;
max-width: 18rem;
padding: 0.4rem 0.6rem;
border-radius: var(--radius-sm, 2px);
border: 1px solid hsl(216 24% 18%);
background: hsl(218 28% 9%);
color: hsl(230 15% 90%);
font-family: 'Space Grotesk', system-ui, sans-serif;
font-size: 0.75rem;
line-height: 1.4;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
pointer-events: none;
}
/* Dialog (centered modal) + Sheet (right slide-over, sm:max-w-xl / -md) */
.a3 .a3-overlay {
position: fixed;
inset: 0;
z-index: 60;
background: rgba(6, 8, 12, 0.7);
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
}
.a3 .a3-dialog {
width: 100%;
max-width: 32rem;
max-height: 85vh;
overflow: auto;
background: hsl(var(--card));
border: 1px solid hsl(var(--border));
border-radius: var(--radius);
padding: 1.5rem;
animation: a3FadeInUp 0.2s ease-out both;
}
.a3 .a3-sheet-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(6, 8, 12, 0.7); display: flex; justify-content: flex-end; }
.a3 .a3-sheet {
height: 100%;
width: 100%;
max-width: 24rem; /* sm:max-w-md */
overflow: auto;
background: hsl(var(--card));
border-left: 1px solid hsl(var(--border));
padding: 1.5rem;
animation: a3SheetInRight 0.25s ease-out both;
}
.a3 .a3-sheet--xl { max-width: 36rem; } /* sm:max-w-xl */
.a3 .a3-dialog-close, .a3 .a3-sheet-close {
position: absolute;
top: 0.85rem;
right: 0.85rem;
width: 1.75rem;
height: 1.75rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
border: 1px solid hsl(var(--border));
background: transparent;
color: hsl(var(--muted-foreground));
cursor: pointer;
}
.a3 .a3-dialog-close:hover, .a3 .a3-sheet-close:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
/* Select (custom listbox) */
.a3 .a3-select { position: relative; display: inline-block; }
.a3 .a3-select-trigger {
display: inline-flex;
align-items: center;
gap: 0.5rem;
height: 2rem;
padding: 0 0.65rem;
border: 1px solid hsl(var(--border));
border-radius: var(--radius-sm);
background: hsl(var(--card));
color: hsl(var(--foreground));
font-size: 0.8rem;
cursor: pointer;
min-width: 8.75rem; /* h-8 w-[140px] (§5.7) */
justify-content: space-between;
}
.a3 .a3-select-list {
position: absolute;
top: calc(100% + 0.35rem);
left: 0;
min-width: 100%;
z-index: 40;
background: hsl(var(--popover));
border: 1px solid hsl(var(--border));
border-radius: var(--radius-sm);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
overflow: hidden;
}
.a3 .a3-select-option { display: block; width: 100%; text-align: left; padding: 0.45rem 0.75rem; background: transparent; border: none; color: hsl(var(--foreground)); font-size: 0.8rem; cursor: pointer; }
.a3 .a3-select-option:hover, .a3 .a3-select-option.is-active { background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); }
/* Switch */
.a3 .a3-switch { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.a3 .a3-switch-track {
width: 2.25rem;
height: 1.25rem;
border-radius: 9999px;
background: hsl(var(--muted));
border: 1px solid hsl(var(--border));
position: relative;
transition: background 0.15s ease;
flex: none;
}
.a3 .a3-switch-thumb {
position: absolute;
top: 1px;
left: 1px;
width: 1rem;
height: 1rem;
border-radius: 9999px;
background: hsl(var(--foreground));
transition: transform 0.15s ease;
}
.a3 .a3-switch.is-on .a3-switch-track { background: hsl(var(--primary) / 0.5); }
.a3 .a3-switch.is-on .a3-switch-thumb { transform: translateX(1rem); background: hsl(var(--primary-foreground)); }
.a3 .a3-switch-label { font-size: 0.8rem; color: hsl(var(--muted-foreground)); }
/* Toggle group (segmented control — period pickers, 30D/90D/1Y etc.) */
.a3 .a3-toggle-group { display: inline-flex; border: 1px solid hsl(var(--border)); border-radius: var(--radius-sm); overflow: hidden; }
.a3 .a3-toggle {
padding: 0.3rem 0.75rem;
background: transparent;
border: none;
border-right: 1px solid hsl(var(--border));
color: hsl(var(--muted-foreground));
font-family: 'JetBrains Mono', monospace;
font-size: 0.7rem;
cursor: pointer;
}
.a3 .a3-toggle:last-child { border-right: none; }
.a3 .a3-toggle.is-active { background: hsl(var(--primary) / 0.12); color: hsl(var(--primary)); }
/* Progress */
.a3 .a3-progress { width: 100%; height: 0.4rem; border-radius: 9999px; background: hsl(var(--muted)); overflow: hidden; }
.a3 .a3-progress-bar { height: 100%; background: hsl(var(--primary)); border-radius: 9999px; transition: width 0.2s ease; }
/* Skeleton (loading placeholder) */
.a3 .a3-skeleton {
display: block;
border-radius: var(--radius-sm);
background: linear-gradient(90deg, hsl(var(--muted)) 25%, hsl(var(--muted) / 0.6) 37%, hsl(var(--muted)) 63%);
background-size: 400% 100%;
animation: a3Shimmer 1.4s ease infinite;
}
/* Scroll area (styled overflow container — reuses .scrollbar-thin above) */
.a3 .a3-scroll-area { overflow: auto; }
/* Toast (sonner-look stack, bottom-right) */
.a3 .a3-toast-viewport { position: fixed; right: 1rem; bottom: 1rem; z-index: 90; display: flex; flex-direction: column; gap: 0.5rem; width: 21rem; max-width: calc(100vw - 2rem); }
.a3 .a3-toast {
background: hsl(var(--card));
border: 1px solid hsl(var(--border));
border-radius: var(--radius);
padding: 0.75rem 0.9rem;
font-size: 0.82rem;
color: hsl(var(--foreground));
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
animation: a3SlideInRight 0.2s ease-out both;
}
.a3 .a3-toast--success { border-color: hsl(var(--success) / 0.4); }
.a3 .a3-toast--destructive { border-color: hsl(var(--destructive) / 0.4); }
/* Copy button — reuses the SITE-WIDE data-copy handler already wired in
main.js (no new JS needed here); this only supplies the dashboard's own
pixels for that same element. */
.a3 .a3-copy-btn {
display: inline-flex;
align-items: center;
gap: 0.3rem;
border: 1px solid hsl(var(--border));
background: transparent;
color: hsl(var(--muted-foreground));
border-radius: var(--radius-sm);
padding: 0.2rem 0.5rem;
font-size: 0.7rem;
cursor: pointer;
}
.a3 .a3-copy-btn:hover { color: hsl(var(--foreground)); background: hsl(var(--muted)); }
.a3 .a3-copy-btn.is-copied { color: hsl(var(--success)); border-color: hsl(var(--success) / 0.4); }
/* Icon sprite sizing helper (assets/img/dash-icons.svg, referenced via
) */
.a3 .a3-icon { width: 1rem; height: 1rem; display: inline-block; vertical-align: -0.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.a3 .a3-icon--lg { width: 1.5rem; height: 1.5rem; }
/* ══ Dashboard shell — sidebar + topbar + outlet (P0.3, issue #380) ════════
views/dash/_layout.html + alpine/views/dash-shell.js, §5.0. Pixel targets:
8×8 (2rem) cyan-tinted logo box in the sidebar header, 16×16 nav icons,
text-xs mono uppercase nav labels, h-12 topbar, collapse-to-icon-rail. */
/* The sitewide nav (components.css .nav) is position:fixed, height 4rem,
across every route including the dashboard — this shell sits BELOW it
(not underneath) rather than losing its own top strip's clicks to the
nav's overlapping hit area, the same clearance problem the P0.1 styleguide
fixture solved with top padding on its own single-column layout. */
.a3-shell { display: flex; min-height: calc(100vh - 4rem); margin-top: 4rem; }
.a3-shell__sidebar {
width: 15rem;
flex: none;
display: flex;
flex-direction: column;
background: hsl(var(--card));
border-right: 1px solid hsl(var(--border));
transition: width 0.15s ease;
overflow: hidden;
}
.a3-shell--collapsed .a3-shell__sidebar { width: 4rem; }
.a3-shell__brand {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.9rem;
border-bottom: 1px solid hsl(var(--border));
}
.a3-shell__logo {
width: 2rem;
height: 2rem;
flex: none;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius);
background: hsl(var(--primary) / 0.1);
border: 1px solid hsl(var(--primary) / 0.2);
color: hsl(var(--primary));
}
.a3-shell__brand-text { display: flex; flex-direction: column; line-height: 1.2; overflow: hidden; white-space: nowrap; }
.a3-shell--collapsed .a3-shell__brand-text { display: none; }
.a3-shell__brand-name { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; }
.a3-shell__brand-sub { font-family: 'JetBrains Mono', monospace; font-size: 0.625rem; color: hsl(var(--muted-foreground)); text-transform: uppercase; letter-spacing: 0.1em; }
.a3-shell__nav { flex: 1; overflow-y: auto; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.15rem; }
.a3-shell__tools { border-top: 1px solid hsl(var(--border)); padding: 0.5rem; display: flex; flex-direction: column; gap: 0.15rem; }
.a3-shell__nav-link,
.a3-shell__signout {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.6rem;
border-radius: var(--radius-sm);
border: none;
background: transparent;
color: hsl(var(--muted-foreground));
font-family: 'JetBrains Mono', monospace;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
text-align: left;
white-space: nowrap;
}
.a3-shell__nav-link:hover, .a3-shell__signout:hover { background: hsl(var(--muted) / 0.5); }
.a3-shell__nav-link.is-active { background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); font-weight: 600; }
.a3-shell__nav-icon { width: 1rem; height: 1rem; flex: none; }
.a3-shell--collapsed .a3-shell__nav-label { display: none; }
.a3-shell__frame { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.a3-shell__topbar {
height: 3rem;
flex: none;
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0 1rem;
border-bottom: 1px solid hsl(var(--border));
}
.a3-shell__hamburger { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; color: hsl(var(--muted-foreground)); cursor: pointer; padding: 0.25rem; }
.a3-shell__hamburger:hover { color: hsl(var(--foreground)); }
.a3-shell__title { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; font-weight: 600; color: hsl(var(--muted-foreground)); text-transform: uppercase; letter-spacing: 0.08em; }
.a3-shell__main { flex: 1; padding: 1.5rem; overflow: auto; }
@media (max-width: 768px) {
.a3-shell__sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; transform: translateX(-100%); }
.a3-shell:not(.a3-shell--collapsed) .a3-shell__sidebar { transform: translateX(0); }
}
/* ══ Dashboard gate — full-screen centered login (P0.4, issue #380) ═══════
alpine/views/dash-gate.js + views/dash/_layout.html, §5.0. */
.a3-gate { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.a3-gate__card { width: 100%; max-width: 24rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
.a3-gate__logo {
width: 3.5rem;
height: 3.5rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius);
background: hsl(var(--primary) / 0.1);
border: 1px solid hsl(var(--primary) / 0.2);
color: hsl(var(--primary));
}
.a3-gate__title { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.06em; }
.a3-gate__subtitle { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: hsl(var(--muted-foreground)); text-transform: uppercase; letter-spacing: 0.14em; }
.a3-gate__alert {
width: 100%;
display: flex;
gap: 0.5rem;
align-items: flex-start;
padding: 0.6rem 0.75rem;
border-radius: var(--radius);
border: 1px solid hsl(var(--destructive) / 0.4);
background: hsl(var(--destructive) / 0.08);
color: hsl(var(--destructive));
font-size: 0.8rem;
text-align: left;
}
.a3-gate__form { width: 100%; display: flex; flex-direction: column; gap: 0.75rem; }
.a3-gate__field { position: relative; display: flex; align-items: center; }
.a3-gate__field-icon { position: absolute; left: 0.75rem; color: hsl(var(--muted-foreground)); pointer-events: none; }
.a3-gate__input {
width: 100%;
padding: 0.55rem 2.25rem 0.55rem 2.25rem;
border-radius: var(--radius);
border: 1px solid hsl(var(--border));
background: hsl(var(--card));
color: hsl(var(--foreground));
font-family: 'JetBrains Mono', monospace;
font-size: 0.85rem;
}
.a3-gate__toggle { position: absolute; right: 0.6rem; display: inline-flex; background: transparent; border: none; color: hsl(var(--muted-foreground)); cursor: pointer; padding: 0; }
.a3-gate__toggle:hover { color: hsl(var(--foreground)); }
.a3-gate__submit {
width: 100%;
padding: 0.65rem;
border-radius: var(--radius);
border: none;
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
font-family: 'JetBrains Mono', monospace;
font-weight: 700;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
cursor: pointer;
}
.a3-gate__submit:disabled { opacity: 0.5; cursor: not-allowed; }
.a3-gate__link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
.a3-gate__link:hover { color: hsl(var(--primary)); }
/* Shared "coming soon" placeholder (views/dash/coming-soon.html) — every
nav-wired dashboard route (issue #380) points here until its own phase
issue (§8) lands real content. */
.a3-coming-soon { display: flex; flex-direction: column; gap: 0.5rem; padding: 3rem 0; text-align: center; color: hsl(var(--muted-foreground)); }
/* ── /list "Total Market" (issue #384, P2.1) ──────────────────────────────
TotalMarketOverview grid, RowSparkline, and the last-viewed highlight
(§4.4: "scrollIntoView center + bg-primary/10 ring-1 ring-primary/40
animate-pulse for 4s"). Table shell / badges / tabs / switch above are
shared P0.1/P0.2 primitives — nothing list-specific there. */
.a3 .a3-overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.a3 .a3-leader-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.a3 .a3-ticker-card {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius);
padding: 1rem 1.25rem; margin-bottom: 1.5rem; cursor: pointer;
}
.a3 .a3-ticker-card:hover { border-color: hsl(var(--primary) / 0.4); }
.a3 .a3-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; justify-content: space-between; margin: 1.5rem 0 1rem; }
.a3 .a3-spark-empty { color: hsl(var(--muted-foreground)); font-size: 0.8rem; }
.a3 .a3-row-highlight { background: hsl(var(--primary) / 0.1); box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.4); animation: a3Pulse 1s ease-in-out 4; }
.a3 tr.opacity-60 { opacity: 0.6; }
/* ── Form primitives (issue #393, /submit §5.17) ──────────────────────────
P0.2 shipped tabs/dialog/sheet/select/switch/toast but no text-entry
controls (no form existed yet to need them). Generic (not submit-page-
specific) so a later dashboard form can reuse these rather than re-derive
them — same rationale as the P0.2 primitives above. */
.a3 .a3-field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; }
.a3 .a3-label { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: hsl(var(--muted-foreground)); }
.a3 .a3-label .a3-required { color: hsl(var(--destructive)); margin-left: 0.15rem; }
.a3 .a3-input,
.a3 .a3-textarea,
.a3 .a3-native-select {
width: 100%;
padding: 0.55rem 0.75rem;
border-radius: var(--radius);
border: 1px solid hsl(var(--input));
background: hsl(var(--card));
color: hsl(var(--foreground));
font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
font-size: 0.85rem;
}
.a3 .a3-input:focus, .a3 .a3-textarea:focus, .a3 .a3-native-select:focus { outline: none; border-color: hsl(var(--primary) / 0.6); }
.a3 .a3-textarea { resize: vertical; min-height: 5rem; }
.a3 .a3-field-hint { font-size: 0.72rem; color: hsl(var(--muted-foreground)); }
.a3 .a3-field-error { font-size: 0.72rem; color: hsl(var(--destructive)); }
.a3 .a3-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
padding: 0.6rem 1rem; border-radius: var(--radius); border: 1px solid transparent;
font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 0.75rem;
text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer;
}
.a3 .a3-btn--primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.a3 .a3-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
.a3 .a3-btn--outline { background: transparent; border-color: hsl(var(--border)); color: hsl(var(--foreground)); }
.a3 .a3-btn--outline:hover { border-color: hsl(var(--primary) / 0.4); color: hsl(var(--primary)); }
.a3 .a3-card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.5rem; }
.a3 .a3-card--purple { border-color: hsl(var(--secondary) / 0.4); }
.a3 .a3-card-title { display: flex; align-items: center; gap: 0.5rem; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 0.5rem; }
.a3 .a3-card-title .a3-icon { color: hsl(var(--secondary)); }
/* Amber "Claimed Metrics (optional · unverified)" sub-section (§5.17). */
.a3 .a3-claimed-metrics {
border: 1px solid hsl(var(--amber) / 0.35);
background: hsl(var(--amber) / 0.06);
border-radius: var(--radius);
padding: 0.9rem 1rem;
margin-top: 0.5rem;
}
.a3 .a3-claimed-metrics-title { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: hsl(var(--amber)); margin: 0 0 0.6rem; }
/* ── /submit — public intake (issue #393, §5.17) ──────────────────────────
Centered max-w-xl column; the "$ submit-commit" collapsible CommitForm
header, the purple-toned MCP-card replacement, and the plain
Programmatic API card. Form controls above are shared primitives. */
.a3-submit { max-width: 36rem; margin: 0 auto; }
.a3-submit__logo { width: 3.5rem; height: 3.5rem; border-radius: var(--radius); background: hsl(var(--primary) / 0.1); border: 1px solid hsl(var(--primary) / 0.2); display: flex; align-items: center; justify-content: center; color: hsl(var(--primary)); margin: 0 auto 1rem; }
.a3-submit__intro { text-align: center; margin-bottom: 1.5rem; }
.a3-submit__form-header { display: flex; align-items: center; justify-content: space-between; cursor: pointer; margin-bottom: 1rem; }
.a3-submit__form-title { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 0.85rem; color: hsl(var(--primary)); }
.a3-submit__back { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: hsl(var(--muted-foreground)); margin-top: 0.5rem; }
.a3-submit__back:hover { color: hsl(var(--primary)); }
.a3 pre.a3-code { background: hsl(var(--muted) / 0.4); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 0.75rem; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; overflow-x: auto; white-space: pre; }
/* ── /market + /dashboard "Agent Activity Log" TerminalFeed (issue #392,
§5.6, P4.1) — macOS-terminal pastiche: emerald-on-black card, traffic-light
dots, `$ tail -f ...` line, max-h-420px scroll of activity entries, ✓/⏳/✗
status glyphs, blinking block cursor (frozen by playwright.config.ts's
`animations: "disabled"` under a visual golden, per §5.6's acceptance). */
.a3 .a3-terminal {
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(6px);
border: 1px solid hsl(var(--success) / 0.2);
border-radius: var(--radius);
overflow: hidden;
}
.a3 .a3-terminal__titlebar {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.5rem 0.75rem;
border-bottom: 1px solid hsl(var(--success) / 0.2);
background: hsl(var(--success) / 0.05);
}
.a3 .a3-terminal__dots { display: flex; gap: 0.4rem; }
.a3 .a3-terminal__dot { width: 0.65rem; height: 0.65rem; border-radius: 9999px; }
.a3 .a3-terminal__dot--red { background: #ff5f56; }
.a3 .a3-terminal__dot--amber { background: #ffbd2e; }
.a3 .a3-terminal__dot--green { background: #27c93f; }
.a3 .a3-terminal__title {
font-family: 'JetBrains Mono', monospace;
font-size: 0.7rem;
color: hsl(var(--success));
opacity: 0.8;
}
.a3 .a3-terminal__body {
max-height: 420px;
overflow-y: auto;
padding: 0.75rem 1rem;
font-family: 'JetBrains Mono', monospace;
font-size: 0.78rem;
color: hsl(var(--success));
}
.a3 .a3-terminal__prompt { color: hsl(var(--success) / 0.7); margin: 0 0 0.6rem; }
.a3 .a3-terminal__entry { display: block; padding: 0.25rem 0; line-height: 1.5; }
.a3 .a3-terminal__entry + .a3-terminal__entry { border-top: 1px solid hsl(var(--success) / 0.08); }
.a3 .a3-terminal__ts { color: hsl(var(--success) / 0.55); }
.a3 .a3-terminal__status--success { color: hsl(var(--success)); }
.a3 .a3-terminal__status--pending { color: hsl(var(--amber)); }
.a3 .a3-terminal__status--rejected { color: hsl(var(--destructive)); }
.a3 .a3-terminal__agent { color: hsl(var(--primary)); }
.a3 .a3-terminal__agent:hover { text-decoration: underline; }
.a3 .a3-terminal__meta { color: hsl(var(--success) / 0.6); font-size: 0.72rem; display: block; padding-left: 1.2rem; }
.a3 .a3-terminal__cursor {
display: inline-block;
width: 0.5rem;
height: 1em;
background: hsl(var(--success));
vertical-align: text-bottom;
margin-left: 0.2rem;
animation: a3Pulse 1s step-end infinite;
}
.a3 .a3-terminal__empty { color: hsl(var(--success) / 0.6); padding: 0.5rem 0; }
/* ── /agents "OpenClaw Agents" (issue #385, P2.2) ─────────────────────────
Summary strip + toolbar row are page-specific; tabs/select/badges/table
shell above are shared P0.1/P0.2 primitives reused as-is. */
.a3 .a3-agents-summary {
border: 1px solid hsl(var(--border)); background: hsl(var(--muted) / 0.2); border-radius: var(--radius);
padding: 0.6rem 1rem; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem;
color: hsl(var(--muted-foreground)); margin: 1rem 0;
}
.a3 .a3-agents-summary strong { color: hsl(var(--primary)); font-weight: 600; }
.a3 .a3-agents-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.5rem 0 1rem; }
/* ── List-page shell (issue #386, §5.9/§5.11/§5.13): every directory list
page — /lobster, /vaults, /wallets and future siblings (/agents, /list,
/list2) — reuses this same page header / outline-button / empty-state /
summary-line / filter-chip set, matching the precedent §2's comment sets
for `.a3-table`. ─────────────────────────────────────────────────────── */
.a3 .a3-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.a3 .a3-page-title { font-family: 'JetBrains Mono', monospace; font-size: 1.4rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; margin: 0; }
.a3 .a3-page-subtitle { margin: 0.25rem 0 0; font-size: 0.85rem; color: hsl(var(--muted-foreground)); }
.a3 .a3-page-header-actions { display: flex; align-items: center; gap: 0.6rem; }
/* Outline button (Refresh / Scan now / Retry) — same visual family as
.a3-copy-btn, just a touch larger for a primary page action. */
.a3 .a3-outline-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
border: 1px solid hsl(var(--border));
background: transparent;
color: hsl(var(--foreground));
border-radius: var(--radius-sm);
padding: 0.4rem 0.75rem;
font-family: 'JetBrains Mono', monospace;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.04em;
cursor: pointer;
}
.a3 .a3-outline-btn:hover:not(:disabled) { background: hsl(var(--muted)); }
.a3 .a3-outline-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.a3 .a3-summary-line { font-size: 0.8rem; color: hsl(var(--muted-foreground)); margin: 0 0 0.85rem; }
.a3 .a3-summary-line strong { color: hsl(var(--foreground)); font-weight: 600; }
.a3 .a3-empty-state { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 3rem 0; text-align: center; color: hsl(var(--muted-foreground)); }
.a3 .a3-empty-state .a3-icon { width: 2rem; height: 2rem; opacity: 0.5; }
.a3 .a3-pct-up { color: hsl(var(--success)); }
.a3 .a3-pct-down { color: hsl(var(--destructive)); }
/* Filter/toggle chips (wallets §5.13 "X402 only" / "Hide empty"). Reuses the
.a3-tab pill look with an on/off dot rather than inventing a new control. */
.a3 .a3-chip {
display: inline-flex;
align-items: center;
gap: 0.35rem;
border: 1px solid hsl(var(--border));
background: transparent;
color: hsl(var(--muted-foreground));
border-radius: 9999px;
padding: 0.3rem 0.7rem;
font-family: 'JetBrains Mono', monospace;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.04em;
cursor: pointer;
}
.a3 .a3-chip.is-on { color: hsl(var(--primary)); border-color: hsl(var(--primary) / 0.4); }
.a3 .a3-chip-dot { width: 0.4rem; height: 0.4rem; border-radius: 9999px; background: currentColor; opacity: 0.5; }
.a3 .a3-chip.is-on .a3-chip-dot { opacity: 1; }
/* Hover-revealed row action buttons (wallets §5.13 copy/explorer icons). */
.a3 .a3-row-actions { display: inline-flex; gap: 0.3rem; opacity: 0; transition: opacity 0.1s ease; }
.a3 .a3-table tbody tr:hover .a3-row-actions { opacity: 1; }
/* ── /methodology + /about (issue #395, P4.2/P4.3) ────────────────────────
Both are static content pages (no API): page-scoped max-width wrappers
(same convention as .a3-submit above) and the four entity-type left-border
accents §5.16 calls for on /about's metric-cards (Agent cyan / Lobster
Coin purple / Vault green / Wallet amber). */
.a3-methodology { max-width: 56rem; margin: 0 auto; }
.a3-about { max-width: 48rem; margin: 0 auto; }
.a3 .a3-about__entity--agent { border-left: 3px solid hsl(var(--primary)); }
.a3 .a3-about__entity--coin { border-left: 3px solid hsl(var(--secondary)); }
.a3 .a3-about__entity--vault { border-left: 3px solid hsl(var(--success)); }
.a3 .a3-about__entity--wallet { border-left: 3px solid hsl(var(--amber)); }
/* ── /ask-mr-roboto — AI recommendation assistant + comparison tool (issue
#394, docs/bot-analytics-ui-port-plan.md §5.18, P5.1). Chat-styled shell
over dash-ask-roboto.js's deterministic rule-based matcher — no LLM, no
fabricated negotiation/payment theater. Card/table/badge/switch/tab
primitives above are reused as-is; only the chat-specific layout is new. */
.a3-roboto { max-width: 48rem; margin: 0 auto; }
.a3-roboto__header { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.a3-roboto__logo {
width: 3rem; height: 3rem; flex: none; border-radius: var(--radius);
background: hsl(var(--primary) / 0.1); border: 1px solid hsl(var(--primary) / 0.2);
display: flex; align-items: center; justify-content: center; color: hsl(var(--primary));
}
.a3 .a3-roboto__chat { display: flex; flex-direction: column; gap: 1rem; }
.a3-roboto__pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.a3-roboto__log { display: flex; flex-direction: column; gap: 0.85rem; max-height: 26rem; overflow-y: auto; padding-right: 0.25rem; }
.a3-roboto__msg--user { display: flex; justify-content: flex-end; }
.a3-roboto__msg--roboto { display: flex; justify-content: flex-start; }
.a3-roboto__bubble { max-width: 32rem; border-radius: var(--radius); padding: 0.65rem 0.9rem; font-size: 0.85rem; }
.a3-roboto__bubble--user { background: hsl(var(--primary) / 0.12); border: 1px solid hsl(var(--primary) / 0.3); }
.a3-roboto__bubble--roboto { background: hsl(var(--muted) / 0.3); border: 1px solid hsl(var(--border)); display: flex; flex-direction: column; gap: 0.5rem; }
.a3-roboto__matches { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem; }
.a3 .a3-roboto__match { margin-bottom: 0; padding: 0.85rem; }
.a3-roboto__match-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 0.85rem; }
.a3-roboto__match-metrics { display: flex; gap: 1rem; margin-bottom: 0.5rem; }
.a3-roboto__input-row { display: flex; gap: 0.5rem; }
.a3-roboto__input-row .a3-input { flex: 1; }
/* ── /agents/:id "Money-agent dossier" AgentProfile (issue #390, §5.8, P3.2) ──
DossierHeader is the one deliberate non-mono heading in the whole app
(`.a3-dossier-name`, §5.8) — pixel-QA hotspot, kept exact: sans-serif,
negative tracking, weight 500. Everything else here composes existing
P0.1/P0.2 primitives (.metric-card, .a3-badge, .a3-progress, .a3-table). */
.a3 .a3-back-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: hsl(var(--muted-foreground)); margin-bottom: 1rem; }
.a3 .a3-back-link:hover { color: hsl(var(--primary)); }
.a3 .a3-dossier-head {
display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
background: linear-gradient(180deg, hsl(var(--card)), hsl(var(--muted) / 0.2));
border: 1px solid hsl(var(--border)); border-radius: var(--radius);
padding: 1.5rem; margin-bottom: 1.5rem;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
}
.a3 .a3-dossier-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; letter-spacing: 0.28em; text-transform: uppercase; color: hsl(var(--muted-foreground)); display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.a3 .a3-dossier-identity { display: flex; align-items: flex-start; gap: 1rem; flex: 1; min-width: 16rem; }
.a3 .a3-dossier-avatar {
width: 3.5rem; height: 3.5rem; flex: none; border-radius: 9999px;
background: hsl(var(--primary) / 0.12); border: 1px solid hsl(var(--primary) / 0.3); color: hsl(var(--primary));
display: flex; align-items: center; justify-content: center;
font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 1.25rem;
}
/* The one deliberate non-mono heading in the app (§5.8's pixel-QA note). */
.a3 .a3-dossier-name {
font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
font-weight: 500;
letter-spacing: -0.04em;
font-size: clamp(1.5rem, 2vw, 2.25rem);
margin: 0 0 0.35rem;
}
.a3 .a3-dossier-desc { color: hsl(var(--muted-foreground)); font-size: 0.85rem; max-width: 40rem; margin: 0 0 0.6rem; }
.a3 .a3-dossier-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.a3 .a3-dossier-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; }
.a3 .a3-dossier-pill {
display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem;
border-radius: 9999px; border: 1px solid hsl(var(--border)); background: hsl(var(--muted) / 0.3);
color: hsl(var(--foreground)); font-size: 0.75rem;
}
.a3 .a3-dossier-pill:hover { border-color: hsl(var(--primary) / 0.4); color: hsl(var(--primary)); }
.a3 .a3-money-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.a3 .a3-money-strip .metric-card { display: flex; flex-direction: column; gap: 0.3rem; border-radius: 1rem; }
.a3 .a3-evidence-layout { display: grid; grid-template-columns: 1.35fr 0.9fr; gap: 1rem; margin-bottom: 1.5rem; }
@media (max-width: 900px) { .a3 .a3-evidence-layout { grid-template-columns: 1fr; } }
.a3 .a3-evidence-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid hsl(var(--border) / 0.6); font-size: 0.85rem; }
.a3 .a3-evidence-row:last-child { border-bottom: none; }
.a3 .a3-gap-list, .a3 .a3-why-list { margin: 0; padding-left: 1.1rem; font-size: 0.8rem; color: hsl(var(--muted-foreground)); }
.a3 .a3-gap-list li, .a3 .a3-why-list li { margin-bottom: 0.35rem; }
.a3 .a3-lever-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.a3 .a3-lever-card .data-label { margin-bottom: 0.4rem; }
.a3 .a3-lever-next { font-size: 0.8rem; color: hsl(var(--primary)); margin-top: 0.5rem; }
.a3 .a3-chart-card { height: 12rem; margin-bottom: 1.5rem; }
.a3 .a3-chart-placeholder {
height: 12rem; display: flex; align-items: center; justify-content: center;
border: 1px dashed hsl(var(--border)); border-radius: var(--radius); color: hsl(var(--muted-foreground));
font-size: 0.85rem; margin-bottom: 1.5rem;
}
.a3 .a3-usage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; text-align: center; }
.a3 .a3-copy-wallet.is-copied { color: hsl(var(--success)); border-color: hsl(var(--success) / 0.4); }
/* ── /projects/:slug ProjectProfile "dossier" (issue #389, §5.5, P3.1) ────
Hero/KPI/ratio/history/activity layout; table shell/badges/metric-card
above are shared P0.1/P0.2 primitives reused as-is. */
.a3 .a3-profile__back { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: hsl(var(--muted-foreground)); }
.a3 .a3-profile__back:hover { color: hsl(var(--primary)); }
.a3 .a3-profile__hero { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; margin-top: 0.75rem; }
.a3 .a3-profile__hero-main { display: flex; gap: 1rem; min-width: 0; }
.a3 .a3-profile__logo {
width: 4rem; height: 4rem; flex: none; border-radius: var(--radius);
background: hsl(var(--muted)); display: flex; align-items: center; justify-content: center;
font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 1.1rem; color: hsl(var(--muted-foreground));
overflow: hidden;
}
.a3 .a3-profile__pills { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.4rem 0; }
.a3 .a3-profile__links { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem; }
.a3 .a3-profile__links a { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: hsl(var(--muted-foreground)); }
.a3 .a3-profile__links a:hover { color: hsl(var(--primary)); }
.a3 .a3-profile__score {
min-width: 14rem; flex: none; border-left: 1px solid hsl(var(--border)); padding-left: 1.5rem;
display: flex; flex-direction: column; gap: 0.5rem;
}
.a3 .a3-profile__scorebar { display: flex; align-items: center; gap: 0.5rem; font-size: 0.7rem; color: hsl(var(--muted-foreground)); }
.a3 .a3-profile__scorebar-track { flex: 1; height: 4px; border-radius: 9999px; background: hsl(var(--muted)); overflow: hidden; }
.a3 .a3-profile__scorebar-fill { height: 100%; background: hsl(var(--primary)); }
.a3 .a3-profile__notice { border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 0.6rem 0.9rem; margin: 0.75rem 0 0; text-transform: none; letter-spacing: normal; }
.a3 .a3-profile__kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.75rem; margin: 1.5rem 0; }
.a3 .a3-profile__kpi-tile { display: flex; flex-direction: column; gap: 0.35rem; }
.a3 .a3-profile__kpi-sub { font-size: 0.7rem; color: hsl(var(--muted-foreground)); }
.a3 .a3-profile__section { margin: 1.75rem 0; }
.a3 .a3-profile__charts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 0.75rem; }
/* The fixed height lives on this WRAPPER div, never the `