/* Design tokens for Vantage dashboard — Option A (Floating Card) */
/* All --vantage-* variables are defined here. Component styles live in vantage.css. */

:root {
  /* Brand */
  --vantage-brand:        #22377D;
  --vantage-brand-light:  #7EB8DE;
  --vantage-brand-muted:  #8B95B8;

  /* Backgrounds
     Login bg:  Option A #EEF2FB | Option B n/a (split layout) | Option C #F4F7FF
     App bg:    all options #F4F7FF */
  --vantage-login-bg: #EEF2FB;
  --vantage-app-bg:   #F4F7FF;

  /* Surfaces */
  --vantage-surface:        #FFFFFF;
  --vantage-surface-raised: #F8F9FB;

  /* Borders */
  --vantage-border:        #E8ECF4;
  --vantage-border-subtle: #F0F3FB;

  /* Text */
  --vantage-text-heading: #1A1A2E;
  --vantage-text-body:    #6B7280;
  --vantage-text-muted:   #9CA3AF;
  --vantage-text-label:   #374151;

  /* Navigation
     Option A & B: white nav / brand text
     Option C:     brand nav / white text */
  --vantage-nav-bg:     #FFFFFF;
  --vantage-nav-text:   var(--vantage-brand);
  --vantage-nav-height: 64px;

  /* Cards */
  --vantage-card-radius: 8px;
  --vantage-card-shadow: 0 2px 8px rgba(0,0,0,0.03);

  /* Login card (more prominent than content cards) */
  --vantage-login-card-radius: 10px;
  --vantage-login-card-shadow: 0 8px 40px rgba(34,55,125,0.09),
                               0 2px 6px rgba(0,0,0,0.03);
  --vantage-login-card-width:  440px;

  /* Typography */
  --vantage-font: 'Inter', sans-serif;

  /* Derived tokens — used in component CSS and JS to avoid hardcoded values */
  --vantage-brand-dark: #1a2d69;   /* primary button hover background */
  --vantage-sparkline:  #22c55e;   /* portfolio sparkline line color */

  /* PR classification label colours — stable across all design options */
  --vantage-label-feature:  #3B82F6;
  --vantage-label-bugfix:   #EF4444;
  --vantage-label-ktlo:     #F59E0B;
  --vantage-label-refactor: #8B5CF6;
  --vantage-label-test:     #14B8A6;
  --vantage-label-docs:     #6B7280;

  /* PR size-tier ramp — neutral XS→XL, light→dark */
  --vantage-size-xs: #cbd5e1;
  --vantage-size-s:  #94a3b8;
  --vantage-size-m:  #64748b;
  --vantage-size-l:  #475569;
  --vantage-size-xl: #334155;

  /* Model family palette — per-developer model-mix bar. Mirrored in Python at
     vantage/labels.py:_MODEL_FAMILY_HEX_COLORS. Keys are the ModelFamily slugs,
     a closed set, so adding a provider means adding a token here. */
  --vantage-model-opus:   #7C3AED;
  --vantage-model-fable:  #DB2777;
  --vantage-model-sonnet: #2563EB;
  --vantage-model-haiku:  #0D9488;
  --vantage-model-auto:   #CA8A04;
  --vantage-model-other:  #6B7280;

  /* AI vendor palette — keys are the AiVendor slugs (vantage/labels.py). Two
     hues, because the usage-by-surface bar colours by vendor and names the
     surface in its legend: the hue answers "whose tool", the label answers
     "which one". Deliberately outside the model-family and signal hues, since a
     reader meets all three on one page.
     Validated as a categorical pair against both chart surfaces: adjacent CVD
     ΔE 31.7 protan / 35.6 normal on light, 31.5 / 35.7 on dark. */
  --vantage-vendor-anthropic: #C2410C;
  --vantage-vendor-openai:    #4F46E5;

  /* AI-agent palette — the AI Agents in Use panel. Mirrored by the AiTool
     slugs, a closed set, so registering an agent means adding a token here.
     Assignment is by agent, never by rank — the bars reorder, these must not,
     which is why every pair is validated, not just the adjacent ones.
     Codex's magenta was searched for rather than picked: the reference
     palette's fourth slot, and every indigo near --vantage-vendor-openai, fails
     the normal-vision floor against Copilot's blue (ΔE 11.8 for #4F46E5, below
     the 15 minimum). This hue leaves the worst pair where it already was —
     cursor↔claude at ΔE 9.2 deutan — so it costs the palette nothing.
     A fifth agent needs the same search; the neutral fallback is not a colour
     slot and must not be spent on one.
     --vantage-agent-codex is reserved, not live: these tokens are selected by
     pr_ai_attribution.ai_tool, which never holds 'codex' because Codex PR
     attribution is unbuilt. Codex's visible colour today is
     --vantage-vendor-openai, on the contributor surface-share bar. */
  --vantage-agent-claude:  #eb6834;
  --vantage-agent-codex:   #A6288F;
  --vantage-agent-copilot: #2a78d6;
  --vantage-agent-cursor:  #1baf7a;
  --vantage-agent-other:   #6B7280;

  /* Attribution tier palette — used across Company, Contributor, PR Detail */
  --vantage-signal-ai_coauthor: #16A34A;   /* bright green: declared AI co-author */
  --vantage-signal-file_overlap: #84CC16;  /* muted lime: session file overlap */
  --vantage-signal-none: #9CA3AF;          /* neutral gray: no signal found */

  /* Row highlight for scatter→table linking */
  --vantage-highlight: rgba(250, 204, 21, 0.25);

  /* Team comparison — one team is lit at a time against a grey population.

     Fuchsia, and it is the one genuinely new hue in this file. Brand navy was
     tried first and fails in use: it is also --bulma-primary, so a lit team was
     the same colour as the axis toggles sitting directly above the chart, and
     the selection read as more page chrome.

     Nothing else on the comparison page carries a hue — the ground is grey and
     the unassigned marks are hollow — so the only collision to avoid is with
     that chrome, and fuchsia is about as far from navy as the wheel allows.

     Valence is the second reason. Amber and green both carry a verdict, and
     this page is constrained not to deliver one: its own framing word is
     *unusual*, not *behind*. Fuchsia says "this one" and nothing more. */
  --vantage-team-selected: #C026D3;
  --vantage-team-selected-wash: rgba(192, 38, 211, 0.14);

  /* Keyboard focus, which is a different state from selection and must stay
     legible on top of it — you can focus a chip that is already lit. */
  --vantage-focus-ring: #FACC15;
}

/* Spoof banner — deliberately the loudest thing in the palette, because it is
   the only signal that a write is about to land in someone else's account. Not
   drawn from the brand ramp for that reason: it should read as an alarm rather
   than as chrome. White on this ground is 5.02:1. */
:root {
  --vantage-spoof-bg:     #B45309;
  --vantage-spoof-text:   #FFFFFF;
  --vantage-spoof-border: #92400E;
}

/* -------------------------------------------------------------------------
   Bulma v1.x CSS custom property overrides
   Bulma exposes --bulma-* variables; pointing them at --vantage-* values
   means Bulma components inherit brand colours automatically.
   ------------------------------------------------------------------------- */

:root {
  --bulma-primary:       var(--vantage-brand);
  --bulma-primary-light: var(--vantage-brand-light);
  --bulma-link:          var(--vantage-brand);
  --bulma-link-hover:    var(--vantage-brand-light);

  --bulma-background:    var(--vantage-app-bg);
  --bulma-border:        var(--vantage-border);

  --bulma-text:          var(--vantage-text-body);
  --bulma-text-strong:   var(--vantage-text-heading);

  --bulma-card-radius:   var(--vantage-card-radius);
  --bulma-card-shadow:   var(--vantage-card-shadow);

  --bulma-navbar-height: var(--vantage-nav-height);
}

/* -------------------------------------------------------------------------
   Dark theme — overrides all color tokens when data-theme="dark" is set on
   <html>. Non-color tokens (radii, shadows shapes, font) are inherited from
   :root above. The inline script in base.html sets this attribute before
   first paint to prevent a flash of wrong theme.
   ------------------------------------------------------------------------- */

:root[data-theme="dark"] {
  /* Brand — navy is invisible on the dark card (1.57:1), so the population
     ground swaps to the dark muted grey exactly as the nav swaps to
     brand-light. Reusing the light ground here would collapse the separation
     between a selected team and the population to ΔE 2.1. */
  --vantage-brand-muted: #6E7681;

  /* Lifted for the dark card, as the model palette below is: the light fuchsia
     reads 3.67:1 on #161B22 and this reads 7.03:1. Separation from the dark
     ground is ΔE 75, against a floor of 15. The focus ring is not overridden —
     yellow holds on both surfaces. */
  --vantage-team-selected: #E879F9;
  --vantage-team-selected-wash: rgba(232, 121, 249, 0.18);

  /* Backgrounds */
  --vantage-login-bg: #0D1117;
  --vantage-app-bg:   #0D1117;

  /* Surfaces */
  --vantage-surface:        #161B22;
  --vantage-surface-raised: #1C2128;

  /* Borders */
  --vantage-border:        #30363D;
  --vantage-border-subtle: #21262D;

  /* Text */
  --vantage-text-heading: #E6EDF3;
  --vantage-text-body:    #8B949E;
  --vantage-text-muted:   #6E7681;
  --vantage-text-label:   #C9D1D9;

  /* Navigation */
  --vantage-nav-bg:   #161B22;
  --vantage-nav-text: var(--vantage-brand-light);  /* more legible on dark bg */

  /* Spoof banner — the light ground glares against #0D1117, so the amber is
     deepened and the text lifted rather than left white. 6.92:1. */
  --vantage-spoof-bg:     #7C2D12;
  --vantage-spoof-text:   #FED7AA;
  --vantage-spoof-border: #9A3412;

  /* Shadows (stronger contrast on dark backgrounds) */
  --vantage-card-shadow:       0 2px 8px rgba(0,0,0,0.4);
  --vantage-login-card-shadow: 0 8px 40px rgba(0,0,0,0.5),
                               0 2px 6px rgba(0,0,0,0.2);

  /* Derived tokens */
  --vantage-brand-dark: #2a3f8a;  /* slightly lighter hover for dark bg */

  /* Attribution tier palette — dark overrides */
  --vantage-signal-ai_coauthor: #22C55E;
  --vantage-signal-file_overlap: #A3E635;
  --vantage-signal-none: #6B7280;

  /* Model family palette — dark overrides. Lifted in lightness: the mix bar is
     only 8px tall, so the light-theme values lose definition on #0D1117. */
  --vantage-model-opus:   #A78BFA;
  --vantage-model-fable:  #F472B6;
  --vantage-model-sonnet: #60A5FA;
  --vantage-model-haiku:  #2DD4BF;
  --vantage-model-auto:   #FACC15;
  --vantage-model-other:  #9CA3AF;

  /* AI vendor palette — dark steps, one stop lighter than the light theme so a
     6px bar holds its hue on #161B22 while staying inside the dark lightness
     band. Re-validated against the dark surface rather than flipped. */
  --vantage-vendor-anthropic: #EA580C;
  --vantage-vendor-openai:    #6366F1;

  /* AI-agent palette — dark overrides. Deepened rather than lifted, unlike the
     model families above: these are saturated hues where the light values
     glare on #161B22, and each clears 3:1 against it. Codex is the exception to
     "deepened" — re-stepped slightly lighter, because deepening the magenta
     drops it under the contrast floor while lifting it collides with the dark
     blue. Validated against this surface rather than flipped from the light
     value. */
  --vantage-agent-claude:  #d95926;
  --vantage-agent-codex:   #B2349D;
  --vantage-agent-copilot: #3987e5;
  --vantage-agent-cursor:  #199e70;
  --vantage-agent-other:   #9CA3AF;

  /* Row highlight */
  --vantage-highlight: rgba(250, 204, 21, 0.15);
}

/* -------------------------------------------------------------------------
   Pattern view: scatter chart + attribution side panel
   ------------------------------------------------------------------------- */

.per-dev-scatter-section { display: flex; align-items: stretch; overflow: hidden; margin-bottom: 1.5rem; }

.scatter-chart-col { flex: 1; min-width: 0; padding: 1rem; }

.scatter-scale-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.scatter-scale-label {
  font-size: 0.75rem;
  color: var(--vantage-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.scatter-scale-toggle .tabs { margin-bottom: 0; }
.scatter-scale-toggle .tabs:not(:last-child) { margin-bottom: 0; }

/* Scale + filter checkboxes live below the chart (frees the toggle row up top).
   The row is natural-height and sits after the flex:1 chart container, so it
   doesn't disturb the equal-height flex chain shared with the Woven Timeline
   panel. */
.scatter-below-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
}
.scatter-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--vantage-text-muted);
  cursor: pointer;
  user-select: none;
}
.scatter-check input {
  cursor: pointer;
  margin: 0;
}

.woven-timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}
/* Title + expand button, occupying a full line of the wrapping header so the
   button reaches the card's right edge on the title's own row. Without the 100%
   basis the toggles share the line, and the button wraps below them. */
.woven-timeline-title {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
/* The label's bottom margin is the header's job here; keeping it would ride the
   title text above the button it is centred against. */
.woven-timeline-title .company-chart-label {
  margin-bottom: 0;
}
.woven-timeline-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.woven-overlay-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.woven-overlay-label {
  font-size: 0.75rem;
  color: var(--vantage-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.woven-overlay-toggle .tabs { margin-bottom: 0; }
.woven-overlay-toggle .tabs:not(:last-child) { margin-bottom: 0; }

/* Two columns, because this is what actually sets the section's height. Five
   stacked panels run to roughly 620px, so shortening the chart beside them
   changed nothing — the aside simply drove the row instead. Stacking the two
   charts freed the horizontal room to lay these out in a grid, which halves
   their height and needs no scrollbar.
   auto-fit collapses back to one column on a narrow viewport. */
.scatter-attribution-panel {
  flex: 0 1 420px;
  min-width: 200px;
  border-left: 1px solid var(--vantage-border);
  padding: 1.25rem 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-content: start;
  gap: 0.75rem 1rem;
}

/* The same two-column grid, without the aside. On AI Usage these panels are
   the section rather than a sidebar beside a chart, so there is no left border
   and no fixed basis — nothing here has to hold a chart open. */
.ai-usage-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-content: start;
  gap: 0.75rem 1rem;
}

/* The separator reads as "the panel above ended", so the top row has nothing to
   separate itself from. Two-wide, hence the first two children. Positional
   rather than a class on the panel, so a panel that moves between containers
   cannot arrive carrying the wrong answer. */
.scatter-attribution-panel > .adoption-section:nth-child(-n + 2),
.ai-usage-panels > .adoption-section:nth-child(-n + 2) {
  border-top: none;
  padding-top: 0;
}

.attribution-panel-header { display: flex; align-items: center; gap: 0.4rem; }
.attribution-panel-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--vantage-text-muted);
}

.attribution-headline { line-height: 1.1; }
.attribution-pct { display: block; font-size: 2rem; font-weight: 700; color: var(--vantage-text-heading); }
.attribution-sublabel { font-size: 0.8rem; color: var(--vantage-text-muted); }
.attribution-total-label { font-size: 0.8rem; color: var(--vantage-text-muted); margin-top: -0.25rem; }

.adoption-section {
  border-top: 1px solid var(--vantage-border);
  padding-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}


.attribution-signal-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--vantage-border);
}
.attribution-signal-bar .asig-seg { height: 100%; }
.attribution-signal-bar .asig-ai_coauthor { background: var(--vantage-signal-ai_coauthor); }
.attribution-signal-bar .asig-file_overlap { background: var(--vantage-signal-file_overlap); }
.attribution-signal-bar .asig-none { background: var(--vantage-signal-none); }

.attribution-signal-breakdown { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; }
.asig-row { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; }
.asig-row .legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.asig-row dt { flex: 1; color: var(--vantage-text-body); }
.asig-row dd { font-weight: 600; color: var(--vantage-text-heading); margin: 0; }

/* AI-agent mix — one row per agent, each bar under its own label rather than
   beside it. The panel is 200px wide, so an inline label-bar-count row leaves
   the bar around 60px, and a 3% share of that is 2px: the sliver that says "two
   agents, lopsided" would read as an empty track. Full-width bars keep it. */
.agent-row { display: flex; flex-direction: column; gap: 2px; }
.agent-row + .agent-row { margin-top: 0.4rem; }
.agent-label { display: flex; align-items: baseline; gap: 0.4rem; font-size: 0.8rem; }
.agent-name { flex: 1; color: var(--vantage-text-body); }
.agent-count { font-weight: 600; color: var(--vantage-text-heading); }
.agent-bar {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--vantage-border);
  overflow: hidden;
}
/* min-width so a share that rounds to 0% still shows as present rather than as
   an empty track — every row here has a non-zero count by construction. */
.agent-seg { display: block; height: 100%; min-width: 2px; border-radius: 4px; }

/* Session-window PRs: same agent, weaker evidence. A texture over that agent's
   own hue rather than a fourth colour, so the distinction survives CVD and
   print and never rests on colour alone. */
.agent-seg--unconfirmed {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.55) 0 2px,
    transparent 2px 5px
  );
}

/* Roster agent chips. The dot carries the agent's colour and the label carries
   the name, rather than a colour-filled pill: at chip size a tinted background
   either fails contrast against body text or washes the hue out, and the same
   four tokens have to work on a white row and a dark one. */
.agent-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.agent-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--vantage-border);
  border-radius: 10px;
  font-size: 0.7rem;
  white-space: nowrap;
  color: var(--vantage-text-body);
}
.agent-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--chip-color);
  flex-shrink: 0;
}
.agent-chip-count { font-weight: 600; color: var(--vantage-text-heading); }

/* -------------------------------------------------------------------------
   Per-developer comparison table
   ------------------------------------------------------------------------- */

.per-developer-section { margin-bottom: 1.5rem; }
.per-developer-table th { cursor: pointer; }
.per-developer-table th.is-clickable:hover { background: var(--vantage-surface-raised); }
.per-developer-table .developer-cell a { display: flex; align-items: center; gap: 0.5rem; }
.per-developer-table .avatar,
.per-developer-table .initials-avatar { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; color: white; }
.per-developer-table .weighted-inner { display: flex; align-items: center; gap: 0.5rem; }
.per-developer-table .row-sparkline { vertical-align: middle; }
.per-developer-table .tier-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; min-width: 60px; }
.per-developer-table .signal-segment.signal-ai_coauthor { background: var(--vantage-signal-ai_coauthor); }
.per-developer-table .signal-segment.signal-file_overlap { background: var(--vantage-signal-file_overlap); }
.per-developer-table .signal-segment.signal-none { background: var(--vantage-signal-none); }
.per-developer-table .tier-total { font-size: 0.75rem; color: var(--vantage-text-muted); }
.per-developer-table .work-mix-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; min-width: 60px; }
.per-developer-table .work-mix-segment.label-feature   { background: var(--vantage-label-feature); }
.per-developer-table .work-mix-segment.label-bugfix    { background: var(--vantage-label-bugfix); }
.per-developer-table .work-mix-segment.label-ktlo      { background: var(--vantage-label-ktlo); }
.per-developer-table .work-mix-segment.label-refactor  { background: var(--vantage-label-refactor); }
.per-developer-table .work-mix-segment.label-test      { background: var(--vantage-label-test); }
.per-developer-table .work-mix-segment.label-docs      { background: var(--vantage-label-docs); }
.per-developer-table .model-mix-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; min-width: 60px; }
.per-developer-table .model-mix-segment.model-opus   { background: var(--vantage-model-opus); }
.per-developer-table .model-mix-segment.model-fable  { background: var(--vantage-model-fable); }
.per-developer-table .model-mix-segment.model-sonnet { background: var(--vantage-model-sonnet); }
.per-developer-table .model-mix-segment.model-haiku  { background: var(--vantage-model-haiku); }
.per-developer-table .model-mix-segment.model-auto   { background: var(--vantage-model-auto); }
.per-developer-table .model-mix-segment.model-other  { background: var(--vantage-model-other); }
.per-developer-table .ai-primary { font-size: 0.875rem; }
.per-developer-table .ai-secondary { font-size: 0.75rem; color: var(--vantage-text-muted); }
.per-developer-table .repo-chip { display: inline-block; padding: 0.1rem 0.4rem; margin-right: 0.25rem; background: var(--vantage-surface-raised); border-radius: 12px; font-size: 0.75rem; }
.per-dev-pagination { display: flex; justify-content: center; align-items: center; gap: 1rem; padding: 0.75rem; }
.per-dev-pagination button { padding: 0.25rem 0.75rem; }
.per-dev-pagination button:disabled { opacity: 0.5; cursor: not-allowed; }
.per-dev-pagination .pagination-info { font-size: 0.85rem; color: var(--vantage-text-muted); }

/* Per-developer scatter section */
.per-dev-scatter-section { margin-bottom: 1.5rem; }

/* Floating inline detail card — appears on scatter dot click */
.per-dev-detail-card {
  position: absolute;
  background: var(--vantage-surface-raised);
  border: 1px solid var(--vantage-text-muted);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 0.75rem 1rem;
  min-width: 220px;
  max-width: 280px;
  z-index: 10;
}
.per-dev-detail-card .card-close { position: absolute; top: 4px; right: 8px; background: none; border: none; cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--vantage-text-muted); }
.per-dev-detail-card .card-header { display: flex; gap: 0.5rem; align-items: baseline; margin-bottom: 0.5rem; }
.per-dev-detail-card .card-name { font-weight: 600; }
.per-dev-detail-card .card-login { color: var(--vantage-text-muted); font-size: 0.85rem; }
.per-dev-detail-card dl.card-stats { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.75rem; margin: 0 0 0.5rem 0; font-size: 0.85rem; }
.per-dev-detail-card dt { color: var(--vantage-text-muted); }
.per-dev-detail-card dd { margin: 0; font-weight: 500; }
.per-dev-detail-card .card-actions { display: flex; gap: 0.75rem; padding-top: 0.5rem; border-top: 1px solid var(--vantage-text-muted); font-size: 0.85rem; }
.per-dev-detail-card .card-actions button { background: none; border: none; color: var(--vantage-brand); cursor: pointer; padding: 0; }

/* Phase 6 — three-section page structure */
.section-block { margin-bottom: 2.5rem; }
.section-heading { font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--vantage-text-muted); }

/* Phase 7 — contributor woven timeline + summary card */
.summary-card-stat { padding: 1rem; }
.summary-stat-label { color: var(--vantage-text-muted); font-size: 0.85rem; margin-bottom: 0.25rem; }
.summary-stat-value { font-size: 1.5rem; font-weight: 600; color: var(--vantage-text-heading); margin-bottom: 0.5rem; }
.signal-share-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; width: 140px; margin-top: 0.25rem; }
.signal-share-segment.signal-ai_coauthor { background: var(--vantage-signal-ai_coauthor); }
.signal-share-segment.signal-file_overlap { background: var(--vantage-signal-file_overlap); }
.signal-share-segment.signal-none { background: var(--vantage-signal-none); }
.signal-share-legend { font-size: 0.75rem; color: var(--vantage-text-muted); margin-top: 0.25rem; }

/* Usage-by-surface bar. Same 6px part-to-whole idiom as .signal-share-bar, with
   two differences it needs and that one does not.
   `gap` rather than a bare flex: adjacent segments of one vendor carry the same
   hue, so the 2px surface gap is the only thing separating them — without it a
   CLI + desktop split reads as one segment.
   The legend is a flex row of dot+label pairs instead of a text run, because
   identity here must not rest on hue alone: two Anthropic surfaces are one
   colour and only the label tells them apart. */
.surface-share-bar { display: flex; gap: 2px; height: 6px; width: 100%; max-width: 220px; margin-top: 0.25rem; }
.surface-share-segment { border-radius: 2px; min-width: 3px; }
.surface-share-segment.vendor-anthropic { background: var(--vantage-vendor-anthropic); }
.surface-share-segment.vendor-openai { background: var(--vantage-vendor-openai); }
.surface-share-legend { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.4rem; }
.surface-share-item { display: flex; align-items: baseline; gap: 0.35rem; font-size: 0.75rem; color: var(--vantage-text-muted); }
.surface-share-dot { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 8px; }
.surface-share-dot.vendor-anthropic { background: var(--vantage-vendor-anthropic); }
.surface-share-dot.vendor-openai { background: var(--vantage-vendor-openai); }
.surface-share-name { color: var(--vantage-text-heading); font-weight: 600; }
.surface-share-nocost { font-style: italic; }
.company-subsection-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.25rem; }
.section-caption { font-size: 0.85rem; color: var(--vantage-text-muted); margin-bottom: 0.75rem; }

/* Phase 11 — attribution signal badge */
.signal-badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 4px; font-weight: 600; font-size: 0.75rem; color: white; vertical-align: middle; white-space: nowrap; }
.signal-badge.signal-ai_coauthor { background: var(--vantage-signal-ai_coauthor); }
.signal-badge.signal-file_overlap { background: var(--vantage-signal-file_overlap); color: #1f2937; }
.signal-badge.signal-none { background: var(--vantage-signal-none); }