/* lab-shared.css — shared Lab styles across Declare / Validate / Assess / Leaderboard
   (activity feed rows, lifecycle stage badges, own-declaration notice). Colors use theme
   tokens so they adapt to light/dark automatically; #FFB400 is the brand gold
   (lighter gold only ever via rgba(255,180,0,a) — never a different hex).
   Kept deliberately compact — it's a secondary strip above each page's content. */

.labx {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch;
  margin: 0 0 16px;
}
.labx-credits, .labx-costs {
  background: var(--surface); border: 1px solid var(--border-card);
  border-radius: var(--radius); padding: 12px 15px; min-width: 0;
}
.labx-credits { flex: 1 1 320px; display: flex; flex-direction: column; gap: 9px; }
.labx-costs   { flex: 1 1 300px; }

/* shared eyebrow */
.labx-title, .labx-costs-title {
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted);
}

/* ── Credits left + reset ── */
.labx-cred-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.labx-title { margin-bottom: 5px; }
.labx-amount { display: flex; align-items: baseline; gap: 6px; }
.labx-big { font-family: var(--font-mono); font-size: 21px; font-weight: 700; line-height: 1; color: #FFB400; }
.labx-of { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }

.labx-reset-pill {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(255, 180, 0, 0.08); border: 1px solid rgba(255, 180, 0, 0.22);
}
.labx-reset-pill svg { width: 12px; height: 12px; color: #FFB400; }
.labx-reset-pill b { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; color: var(--text); letter-spacing: 0.02em; }

.labx-bar { height: 6px; background: var(--gray-100); border-radius: 999px; overflow: hidden; }
.labx-fill {
  width: 0; height: 100%; border-radius: 999px; transition: width 0.4s ease;
  background: linear-gradient(90deg, rgba(255, 180, 0, 0.55), #FFB400);
}

.labx-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.labx-foot-muted { font-size: 10.5px; color: var(--text-muted); }
.labx-link { font-size: 11px; font-weight: 600; color: var(--text-secondary); text-decoration: none; white-space: nowrap; }
.labx-link:hover { color: #FFB400; }

/* ── Action costs (synced with settings page) — inline chips that wrap ── */
.labx-costs { display: flex; flex-direction: column; gap: 9px; }
.labx-costs-title { display: block; }
.labx-costs-list { display: flex; flex-wrap: wrap; gap: 7px; }
.labx-cost {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 6px; border-radius: 8px;
  background: var(--gray-50); border: 1px solid var(--border-card);
}
.labx-cost-ic {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 21px; height: 21px; border-radius: 6px;
  background: var(--surface); border: 1px solid var(--border-card); color: var(--text-secondary);
}
.labx-cost-ic svg { width: 11px; height: 11px; }
.labx-cost-name { font-size: 12px; font-weight: 500; color: var(--text); }
.labx-cost-val { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; }
.labx-cost-unit { font-size: 9.5px; font-weight: 600; color: var(--text-muted); margin-left: 2px; }

@media (max-width: 640px) { .labx { flex-direction: column; } }

/* ── Unified activity feed rows (declare / assess / review + reward attribution) ──
   Shared by the Declare history, the Assess history, and the Leaderboard feed so a
   user sees the same per-event "instant earned + retrospective status" everywhere. */
.lab-feed { display: flex; flex-direction: column; }
.lab-feed-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--gray-100); }
.lab-feed-row:last-child { border-bottom: none; }
.lab-feed-logo { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.lab-feed-sym { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--text); flex-shrink: 0; }
.lab-feed-title { font-size: 11px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.lab-feed-kind { font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 1px 6px; border-radius: var(--radius-full); flex-shrink: 0; }
.lab-feed-kind.is-declare { background: rgba(255, 180, 0, 0.14); color: var(--brand-amber-strong, #B07A00); }
.lab-feed-kind.is-assess  { background: rgba(59, 130, 246, 0.14); color: #3b82f6; }
.lab-feed-kind.is-review  { background: rgba(139, 92, 246, 0.14); color: #8b5cf6; }
.lab-feed-pts { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: #FFB400; white-space: nowrap; flex-shrink: 0; }
/* Declaration lifecycle stage badge: VALIDATION → ASSESSMENT → FINALIZED (or REJECTED). */
.lab-feed-stage { font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 1px 6px; border-radius: var(--radius-full); flex-shrink: 0; }
.lab-feed-stage.st-validation { background: rgba(59, 130, 246, 0.14); color: #3b82f6; }
.lab-feed-stage.st-assessment { background: rgba(255, 180, 0, 0.16); color: var(--brand-amber-strong, #B07A00); }
.lab-feed-stage.st-finalized  { background: rgba(22, 163, 74, 0.14); color: #16a34a; }
.lab-feed-stage.st-closed     { background: rgba(113, 113, 122, 0.14); color: #71717a; }
.lab-feed-stage.st-rejected   { background: rgba(220, 38, 38, 0.12); color: #dc2626; }
.lab-feed-stage.st-awaiting-event { background: rgba(139, 92, 246, 0.14); color: #8b5cf6; }
.lab-feed-stage.st-rumored    { background: rgba(217, 70, 239, 0.14); color: #d946ef; }
.lab-feed-stage.st-busted     { background: rgba(234, 88, 12, 0.14); color: #ea580c; }
.lab-feed-retro { font-family: var(--font-mono); font-size: 9px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.lab-feed-retro.is-pending  { color: var(--text-muted); }
.lab-feed-retro.is-resolved { color: #16a34a; }
.lab-feed-retro.is-settled  { color: var(--text-muted); }
.lab-feed-retro.is-expired  { color: var(--text-muted); opacity: 0.75; font-style: italic; }
.lab-feed-time { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); flex-shrink: 0; }
.lab-feed-view { font-family: var(--font-mono); font-size: 9px; color: var(--brand-amber-strong, #B07A00); text-decoration: none; flex-shrink: 0; }
.lab-feed-view:hover { color: #FFB400; }
@media (max-width: 640px) { .lab-feed-title { display: none; } }

/* ── Activity table — shared "recent activity" table (leaderboard + assess history).
   Typography + the sticky-token-column scroll effect are MADE IDENTICAL to the
   /markets table (see index.css § "Sticky token column"): the token logo pins to
   the left edge while the symbol + the rest of the row scroll away behind it and
   the symbol DISSOLVES (opacity is scroll-linked, set by JS). The pinned logo gains
   an opaque bg + hairline right divider only once scrolled (.scrolled toggled by
   the same rAF scroll handler, here scoped to .lab-activity-scroll). ── */
.lab-activity-scroll {
  overflow-x: auto; margin-top: 16px;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.lab-activity-table { overflow: visible; }

/* Match markets typography exactly */
.lab-activity-table th {
  position: static;   /* a section table shouldn't have a sticky HEADER (vertical) */
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 10px 12px;
}
.lab-activity-table td { padding: 8px 12px; font-size: 12px; font-variant-numeric: tabular-nums; }
.lab-activity-table .lat-num, .lab-activity-table th.lat-num { text-align: right; }
.lab-activity-table .lat-num { font-family: var(--font-mono); font-size: 11px; }
/* Declaration cell — explicitly the same size as the token symbol (12px), so it
   never falls back to the base `table { font-size:13px }` and reads larger than the
   rest of the row. Higher specificity than `.lab-activity-table td` to lock it. */
.lab-activity-table td.lat-decl { max-width: 280px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.lat-act { text-align: right; white-space: nowrap; }
.lat-dash { color: var(--text-muted); }

/* Sticky token column (logo pinned, symbol scrolls) — mirrors index.css values */
.lab-activity-table th.tk-logo-h, .lab-activity-table td.tk-logo-cell {
  position: sticky; left: 0; z-index: 3;
  width: 44px; min-width: 44px; max-width: 44px;
  padding: 8px 6px; text-align: center;
}
.lab-activity-table thead th.tk-logo-h { z-index: 12; }
.lab-activity-table td.tk-logo-cell .lab-feed-logo { margin: 0; display: inline-block; vertical-align: middle; }
/* Symbol cell scrolls behind the pinned logo; never wraps so it slides cleanly. */
.lab-activity-table td.tk-name-cell { white-space: nowrap; }
.lab-activity-table td.tk-name-cell .tk-id { display: flex; align-items: center; min-width: 0; }
.lab-activity-table .lab-feed-sym { font-size: 12px; }
/* Opaque pinned cell + hairline divider once scrolled (paint-only → cheap) */
.lab-activity-scroll.scrolled .lab-activity-table td.tk-logo-cell {
  background: var(--surface);
  box-shadow: inset -1.5px 0 0 0 var(--dock-divider);
}
.lab-activity-scroll.scrolled .lab-activity-table thead th.tk-logo-h {
  background: var(--dock-cell-bg) !important;   /* beats the global `th { background: transparent !important }` */
  box-shadow: inset -1.5px 0 0 0 var(--dock-divider);
}

/* Read-only banner — viewing your OWN declaration in the assess flow (can't self-assess) */
/* Own-declaration notice — in-card (assess), so it always matches the visible card. */
.ac-own-note { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 4px; padding: 11px 16px; border-bottom: 1px solid rgba(255, 180, 0, 0.22); background: rgba(255, 180, 0, 0.06); }
.ac-own-note svg { flex-shrink: 0; color: #B07A00; margin-top: 1px; }
.ac-own-note span { font-size: 12px; color: var(--text-secondary); line-height: 1.45; min-width: 0; }
.ac-own-note b { color: var(--text); }
body.dark .ac-own-note svg { color: #FFB400; }

/* ── Lab credits pill (Trust + credits left + reset timer) — declare/validate/assess top bars ── */
.tabs-credits {
  display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0;
  padding: 5px 12px; border-radius: var(--radius-full);
  background: var(--surface); border: 1px solid var(--border-card);
  box-shadow: var(--shadow-xs);
}
.tabs-credits-grp { display: inline-flex; align-items: center; gap: 6px; }
.tabs-credits-trust { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; padding: 2px 8px; border-radius: var(--radius-full); background: rgba(255, 180, 0, 0.14); color: #B07A00; }
.tabs-credits-ic { color: #B07A00; flex-shrink: 0; }
.tabs-credits-val { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--text); }
.tabs-credits-of { font-size: 10px; font-weight: 600; color: var(--text-muted); margin-left: 3px; }
.tabs-credits-sep { width: 1px; align-self: stretch; background: var(--border-card); }
.tabs-credits-reset { color: var(--text-muted); }
.tabs-credits-reset b { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
body.dark .tabs-credits-trust { color: #FFB400; }
body.dark .tabs-credits-ic { color: #FFB400; }
@media (max-width: 560px) { .tabs-credits-of { display: none; } }
.tabs-spacer { flex: 1 1 auto; }

/* ── Catalyst chart container (shared by Assess + Validate; engine in lab-catalyst-chart.js) ── */
.ac-chart { position: relative; background: var(--gray-50); border-top: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); height: 280px; overflow: hidden; }
.ac-chart-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); }
.ac-chart-msg { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 10px; color: var(--text-muted); }
.ac-chart-msg.is-err { color: var(--red); }
@media (max-width: 640px) { .ac-chart { height: 200px; } }

/* ── Mobile: category tabs scroll instead of cramming ──
   Utility/Products/Categories/Catalysts/Rumors were flex:1 (equal-width), which
   forced the label + count badge to wrap to two lines and squeezed 5 tabs into a
   tiny row. Scroll horizontally with natural-width, single-line tabs instead.
   (lab-shared.css loads after the per-page lab CSS, so this wins.) */
@media (max-width: 640px) {
  .lab-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .lab-tabs::-webkit-scrollbar { display: none; }
  .lab-tabs .lab-tab, .assess-topbar .lab-tab { flex: 0 0 auto; white-space: nowrap; }
}