/* ============================================================================
 * lab.css — Tokenomics Lab (sample harness) page-scoped styles.
 * ANTHROME-DS-LAB-UX-CONFORM-01 F6: relocated out of the dashboard.js
 * `_harnessStyle()` string (2026-07-22). CANONICAL components live in
 * lib/components.css (buttons, alert, atable, roster list, curve, filter pill,
 * seedbox, pill-track segmented) — this file is page LAYOUT + Lab-only widgets.
 * Rules: tokens only (no raw hex outside sanctioned filled-contrast #fff);
 * type sizes from --font-*; tints via color-mix. DS page:
 * docs/anthrome-design-system/app/pages/lab.md
 * ========================================================================== */

/* --- page layout ------------------------------------------------------------ */
.h-wrap{max-width:1280px;margin:0 auto;padding:6px 4px 90px;color:var(--eu-text)}  /* match the #content/shell standard width */
.h-wrap .h-hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.h-wrap .alert{margin:16px 0}
.h-wrap .actionbar{margin-top:20px}
.h-wrap .harness{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:18px;align-items:start;margin-top:18px}
@media(max-width:1080px){.h-wrap .harness{grid-template-columns:1fr}}

/* --- header + field rows ---------------------------------------------------- */
.h-wrap .adminpill{font-size:var(--font-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--eu-warn);background:color-mix(in srgb, var(--eu-warn) 14%, transparent);border:1px solid color-mix(in srgb, var(--eu-warn) 35%, transparent);padding:2px 8px;border-radius:6px}
.h-wrap .fieldrow{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:13px}
.h-wrap .fieldrow:last-child{margin-bottom:0}
.h-wrap .fieldlbl{font-size:12.5px;font-weight:500}
.h-wrap .fieldlbl small{display:block;color:var(--eu-muted-2);font-size:11px;font-weight:400}
.h-wrap .subhd{font-size:var(--font-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--eu-muted-2);margin:2px 0 9px}
.h-wrap .h-chips{display:inline-flex;gap:7px;flex-wrap:wrap}
.h-wrap .h-arrivals-ctl{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.h-wrap .h-arrivals-custom{display:inline-flex;align-items:center;gap:5px;font-size:var(--font-sm);color:var(--eu-muted);font-weight:600}
.h-wrap .h-arrivals-custom input{width:58px;padding:4px 7px;border-radius:7px;border:1px solid var(--eu-border-strong);background:var(--eu-bg);color:var(--eu-text);font-size:var(--font-sm);font-weight:600}
.h-wrap .who{font-weight:600}
.h-wrap .who small{display:block;color:var(--eu-muted-2);font-weight:400;font-size:var(--font-xs)}
.h-wrap .runinfo{font-size:var(--font-sm);color:var(--eu-muted-2)}
.h-wrap .runinfo b{color:var(--eu-muted)}
.h-wrap .h-note{font-size:11px;color:var(--eu-muted-2);margin-top:9px;font-style:italic}
.h-wrap .h-soon{font-size:var(--font-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--eu-muted-2);border:1px solid var(--eu-border);border-radius:5px;padding:1px 5px;margin-left:6px}
.h-wrap .h-result{margin-top:12px;font-size:12px;line-height:1.6}
.h-wrap .tk2-card h4 .num{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--eu-accent);color:#fff;font-size:11px;margin-right:8px;flex:none}

/* --- live drip indicator ----------------------------------------------------- */
.h-wrap .livedot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
.h-wrap .livedot.pulse{animation:h-pulse 1.2s ease-in-out infinite}
@keyframes h-pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 color-mix(in srgb, var(--eu-good) 55%, transparent)}50%{opacity:.5;box-shadow:0 0 0 5px transparent}}
.h-wrap #h-driplive{color:var(--eu-good);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.h-wrap #h-driplive .livedot{background:var(--eu-good)}

/* --- Live Activity Stream (harness view of the drip / sample_events) --------- */
/* box = canonical .tk2-card.flush; these are the internal head/rows */
.h-wrap .hs-card{margin-top:18px}
.h-wrap .hs-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--eu-border)}
.h-wrap .hs-title{font-size:15px;font-weight:700}
.h-wrap .hs-count{font-size:var(--font-md);color:var(--eu-muted-2);font-weight:500}
.h-wrap .hs-live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--eu-muted-2)}
.h-wrap .hs-live .dot{width:8px;height:8px;border-radius:50%;background:var(--eu-muted-2)}
.h-wrap .hs-live.on{color:var(--eu-good)}
.h-wrap .hs-live.on .dot{background:var(--eu-good);animation:h-pulse 1.2s ease-in-out infinite}
.h-wrap .hs-colhd,.h-wrap .hs-row{display:grid;grid-template-columns:78px minmax(0,1fr) 130px 116px 64px;gap:14px;align-items:center;padding:11px 18px}
.h-wrap .hs-colhd{font-size:var(--font-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--eu-muted-2);border-bottom:1px solid var(--eu-border)}
.h-wrap .hs-body{max-height:430px;overflow-y:auto}
.h-wrap .hs-row{border-bottom:1px solid var(--eu-border);font-size:var(--font-md)}
.h-wrap .hs-row:last-child{border-bottom:none}
.h-wrap .hs-row.new{animation:hs-in .6s ease}
@keyframes hs-in{from{background:var(--eu-accent-soft-2)}to{background:transparent}}
.h-wrap .hs-time{font-variant-numeric:tabular-nums;color:var(--eu-muted-2);font-size:12px}
.h-wrap .hs-who{display:flex;align-items:center;gap:10px;min-width:0}
.h-wrap .hs-av{width:30px;height:30px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff}
.h-wrap .hs-work{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.h-wrap .hs-tool{display:inline-flex;align-items:center;gap:7px;color:var(--eu-muted);font-weight:500;min-width:0}
.h-wrap .hs-tool span.nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h-wrap .hs-tool .tdot{width:8px;height:8px;border-radius:50%;flex:none}
.h-wrap .hs-wf{justify-self:start;font-size:11px;font-weight:700;letter-spacing:.03em;padding:4px 10px;border-radius:7px;background:var(--eu-accent-soft-2);color:var(--eu-accent)}
.h-wrap .hs-tok{text-align:right;font-variant-numeric:tabular-nums;color:var(--eu-muted);font-size:12px}
.h-wrap .hs-empty{padding:30px 18px;text-align:center;color:var(--eu-muted-2);font-size:13px}
.h-wrap .hs-foot{padding:8px 18px;text-align:center;font-size:11px;color:var(--eu-muted-2);font-style:italic;border-top:1px solid var(--eu-border)}

/* --- §1 AI Solutions + §2 Models controls ------------------------------------ */
.h-wrap .h-solcat{margin-bottom:10px}
.h-wrap .h-solcat:last-child{margin-bottom:0}
.h-wrap .h-solcat-h{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--eu-muted-2);margin-bottom:6px}
.h-wrap .h-solcount{font-weight:600;letter-spacing:0;text-transform:none}
/* section-header pill group (All / Clear / Reset) — pills sit to the right of the §-title */
.h-wrap .h-pills{display:inline-flex;gap:6px;align-items:center}
.h-wrap .clearbtn{font:inherit;font-size:var(--font-xs);font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--eu-muted);background:var(--eu-bg);border:1px solid var(--eu-border-strong);border-radius:6px;padding:3px 9px;cursor:pointer}
.h-wrap .clearbtn:hover{background:var(--eu-panel-2);color:var(--eu-text)}
.h-wrap .h-soltools{display:flex;flex-wrap:wrap;gap:6px}
.h-wrap .h-soltool{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:var(--font-sm);font-weight:600;border:1px solid var(--eu-border-strong);border-radius:7px;padding:5px 9px;background:var(--eu-bg);color:var(--eu-muted);cursor:pointer}
.h-wrap .h-soltool.on{background:var(--eu-accent-soft-2);border-color:var(--eu-accent-ring);color:var(--eu-accent)}
.h-wrap .h-soltool .cbx{width:14px;height:14px;border-radius:4px;border:1.5px solid var(--eu-border-strong);font-size:var(--font-xs)}
.h-wrap .h-soltool.on .cbx{background:var(--eu-accent);border-color:var(--eu-accent);color:#fff}
.h-wrap .brand{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.h-wrap .brand.t-claude{background:var(--badge-claude)}
.h-wrap .brand.t-openai{background:var(--badge-openai)}
.h-wrap .brand.t-gemini{background:var(--badge-gemini)}
.h-wrap .brand.t-pplx{background:var(--badge-perplexity)}
.h-wrap .surfbadge{font-size:var(--font-xs);font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:1px 5px;border-radius:4px;color:var(--eu-muted-2);background:var(--eu-panel-3)}
.h-wrap .surfbadge.web{color:var(--eu-accent);background:var(--eu-accent-soft-2)}
.h-wrap .surfbadge.client{color:var(--eu-accent-2);background:color-mix(in srgb, var(--eu-accent-2) 12%, transparent)}
.h-wrap .surfbadge.ide{color:#7c5cff;background:rgba(124,92,255,.14)}  /* deliberate one-off: no purple token exists; propose one before reusing */
.h-wrap .surfbadge.soon{color:var(--eu-muted-2);background:var(--eu-panel-3)}
.h-wrap .h-mtabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.h-wrap .h-mtab{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:var(--font-sm);font-weight:600;border:1px solid var(--eu-border-strong);border-radius:7px;padding:4px 9px;background:var(--eu-bg);color:var(--eu-muted);cursor:pointer}
.h-wrap .h-mtab.on{background:var(--eu-accent);border-color:var(--eu-accent);color:#fff}
.h-wrap .h-mtab.on .brand{outline:1px solid #fff}
.h-wrap .provhd{font-size:11px;font-weight:600;color:var(--eu-muted);margin:4px 0 8px;display:flex;align-items:center;gap:6px}
.h-wrap .mixrow{display:grid;grid-template-columns:120px 1fr 42px;gap:10px;align-items:center;margin-bottom:7px;font-size:12px}
.h-wrap .mixrow .mname{font-weight:600}
.h-wrap .mixrow .mval{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.h-wrap .slider{-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;background:var(--eu-panel-3);outline:none}
.h-wrap .slider::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--eu-accent);cursor:pointer;border:2px solid var(--eu-bg)}


/* LAB-RUN-ID-VISIBLE-01 — the run id on saved-run rows and the "Last run" line. Monospace so ids are
   scannable and comparable at a glance; click-to-copy on the row variant. */
.hs-runid {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--eu-muted);
  letter-spacing: .02em;
  cursor: pointer;
  user-select: all;
}
.hs-runid:hover { color: var(--eu-text); }
/* bold variant on the Last-run line inherits the b weight; keep the mono treatment consistent. */
b.hs-runid { font-weight: 700; }