/* ============================================================
   CLAY TABLE v2 — "living interface" styling for the 3 versions.
   Authentic Clay look: white table, app-tile column headers, run
   buttons, green-check status cells, person rows w/ avatars.
   Scoped under .clay2. Four brand colors used as accents only.
   ============================================================ */

.clay2 {
  --c-mag: #E0379E;  --c-cyan: #37D6D6;  --c-grn: #52C964;  --c-ind: #6E7BE6;
  --c-ink: #15161A;  --c-sub: #6B7177;   --c-faint: #9AA0A6;
  --c-line: #ECEDEF; --c-line2: #E2E3E6; --c-head: #F7F8F9;
  --c-ok: #1FA463;
  --c-sans: "Kumbh Sans","Helvetica Neue",Arial,sans-serif;
  --c-mono: "Kumbh Sans","Helvetica Neue",Arial,sans-serif;
  color: var(--c-ink);
  font-family: var(--c-sans);
}
.clay2 *, .clay2 *::before, .clay2 *::after { box-sizing: border-box; }

/* ---- section wrap (light, NOT dark) ---- */
.clay2-sec { background: #FBFBFA; padding: 78px 0 96px; position: relative; }
.clay2-wrap { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
.clay2-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; font-family: var(--c-mono);
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-sub);
}
.clay2-eyebrow .dot { width: 8px; height: 8px; border-radius: 2px; }
.clay2-h2 {
  font-family: var(--abm-display, var(--c-sans)); font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(30px, 3.4vw, 46px); line-height: 1.04; margin: 16px 0 0; max-width: 18ch; color: #0E0F12;
}
.clay2-lede { font-size: 17px; line-height: 1.5; color: var(--c-sub); max-width: 52ch; margin: 14px 0 0; }
.clay2-headrow { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: end; margin-bottom: 34px; }

/* ---- the Clay window frame ---- */
.clay2-frame {
  background: #fff; border: 1px solid var(--c-line2); border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 0 rgba(16,17,20,0.02), 0 24px 60px -28px rgba(16,17,20,0.22), 0 8px 20px -12px rgba(16,17,20,0.12);
}
.clay2-bar {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--c-line);
}
.clay2-bar .claylogo { height: 22px; width: auto; display: block; }
.clay2-bar .ico { width: 26px; height: 26px; border-radius: 7px; background: #0E0F12; color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.clay2-bar .ttl { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.clay2-bar .live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-family: var(--c-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-sub); }
.clay2-bar .live .ld { width: 7px; height: 7px; border-radius: 50%; background: var(--c-grn); box-shadow: 0 0 0 3px rgba(82,201,100,0.18); animation: clay2pulse 1.8s ease-in-out infinite; }
@keyframes clay2pulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* toolbar: Default view / Filter / Sort */
.clay2-tools { display: flex; align-items: center; gap: 4px; padding: 9px 14px; border-bottom: 1px solid var(--c-line); background: #fff; }
.clay2-tool { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 7px; font-size: 13px; font-weight: 500; color: #3A3E44; cursor: default; }
.clay2-tool:hover { background: #F4F5F6; }
.clay2-tool .cv { color: var(--c-faint); }
.clay2-tool.spacer { margin-left: auto; }
.clay2-tool.rowct { color: var(--c-sub); font-family: var(--c-mono); font-size: 12px; letter-spacing: 0.02em; }

/* ---- table ---- */
.clay2-scroll { overflow-x: auto; }
.clay2-tbl { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; }
.clay2-tbl th, .clay2-tbl td { border-bottom: 1px solid var(--c-line); border-right: 1px solid var(--c-line); text-align: left; }
.clay2-tbl th:last-child, .clay2-tbl td:last-child { border-right: 0; }
.clay2-tbl tr:last-child td { border-bottom: 0; }

/* gutter (row number + checkbox) */
.clay2-gut { width: 64px; min-width: 64px; }
.clay2-tbl th.clay2-gut { background: var(--c-head); }
.clay2-tbl td.clay2-gut { color: var(--c-faint); font-family: var(--c-mono); font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
.clay2-gut .cbx { width: 14px; height: 14px; border: 1.5px solid #CDD0D4; border-radius: 4px; display: inline-block; vertical-align: middle; }

/* header cells = app tile + label + run button */
.clay2-tbl thead th { background: var(--c-head); padding: 0; vertical-align: middle; position: sticky; top: 0; z-index: 3; }
.clay2-th { display: flex; align-items: center; gap: 9px; padding: 11px 14px; min-height: 46px; }
.clay2-th .lbl { font-size: 13px; font-weight: 600; color: #3A3E44; white-space: nowrap; letter-spacing: -0.005em; }
.clay2-th .run {
  margin-left: auto; width: 24px; height: 24px; flex: 0 0 auto; border-radius: 6px; border: 1px solid var(--c-line2);
  background: #fff; display: grid; place-items: center; color: #6B7177; transition: all .18s;
}
.clay2-th .run.on { color: #fff; border-color: transparent; }
.clay2-th .run.done { color: #fff; border-color: transparent; }
.clay2-th .run.spin { background: #fff; border-color: transparent; }
.clay2-th .runring { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(0,0,0,0.12); border-top-color: currentColor; display: block; animation: clay2sp .6s linear infinite; }
.clay2-th .trgflag { margin-left: auto; }

/* the app tile (provider icon) */
.clay2-app { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 6px; display: grid; place-items: center; }
.clay2-app svg { width: 13px; height: 13px; }
.clay2-app .mo { font-family: var(--c-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.02em; }

/* body cells */
.clay2-tbl td { padding: 0; height: 60px; vertical-align: middle; background: #fff; transition: background .2s; }
.clay2-cell { padding: 9px 14px; display: flex; align-items: center; gap: 9px; height: 100%; }
.clay2-row:hover td { background: #FCFCFB; }
.clay2-row.sel td { background: #FBF6FB; }

/* person cell */
.clay2-person { display: flex; align-items: center; gap: 11px; padding: 9px 14px; }
.clay2-ava { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; background: #ECEDEF; display: grid; place-items: center; font-family: var(--c-mono); font-size: 12px; font-weight: 700; color: #fff; overflow: hidden; }
.clay2-person .nm { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; white-space: nowrap; }
.clay2-person .co { font-family: var(--c-mono); font-size: 11.5px; color: var(--c-faint); margin-top: 2px; }

/* status cell states: empty / running / done */
.clay2-stat { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: #3A3E44; }
.clay2-stat .chk { width: 17px; height: 17px; border-radius: 4px; background: var(--c-ok); color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.clay2-stat .chk svg { width: 11px; height: 11px; }
.clay2-empty { width: 38px; height: 9px; border-radius: 3px; background: #F0F1F2; }
.clay2-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #E6E7E9; border-top-color: var(--c-cyan); animation: clay2sp .7s linear infinite; }
@keyframes clay2sp { to { transform: rotate(360deg); } }
.clay2-run-pct { font-family: var(--c-mono); font-size: 12px; color: var(--c-sub); }

/* signal cell (satellite + news text) */
.clay2-sig { display: flex; align-items: center; gap: 9px; padding: 9px 14px; }
.clay2-sig .stx { font-size: 13px; color: #3A3E44; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 230px; }
.clay2-sig .stx b { font-weight: 600; }

/* score cell */
.clay2-score { display: inline-flex; align-items: center; gap: 9px; font-family: var(--c-mono); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; }
.clay2-score .bar { width: 34px; height: 6px; border-radius: 3px; background: #EEF0F1; position: relative; overflow: hidden; }
.clay2-score .bar i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; transition: width .6s cubic-bezier(.2,.7,.2,1); }
.clay2-score.high { color: #1FA463; } .clay2-score.high .bar i { background: #1FA463; }
.clay2-score.mid  { color: #C77C2A; } .clay2-score.mid .bar i  { background: #E8943A; }
.clay2-score.low  { color: #9AA0A6; } .clay2-score.low .bar i  { background: #C2C6CB; }

/* stage chip */
.clay2-tier { font-family: var(--c-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; padding: 4px 9px; border-radius: 6px; white-space: nowrap; }
.clay2-tier.t1 { background: rgba(82,201,100,0.16);  color: #15823F; }
.clay2-tier.t2 { background: rgba(110,123,230,0.15); color: #4A56C4; }
.clay2-tier.t3 { background: #F0F1F2;                color: #8A9097; }

/* route cell (next app action) */
.clay2-route { display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px; }
.clay2-route .rg { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 6px; display: grid; place-items: center; color: #fff; font-size: 12px; font-family: var(--c-mono); font-weight: 600; }
.clay2-route .rg svg { width: 14px; height: 14px; }
.clay2-route .rl { font-size: 13px; font-weight: 500; white-space: nowrap; }
.clay2-route.pending .rg { background: #EBECEE !important; color: #B7BBC0; }
.clay2-route.pending .rl { color: #B7BBC0; }
.clay2-route .rg.lock { animation: clay2lock .5s cubic-bezier(.2,.8,.2,1); }
@keyframes clay2lock { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }

/* enrichment run progress bar (Version A) */
.clay2-prog { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-top: 1px solid var(--c-line); background: #fff; }
.clay2-prog .ptxt { font-family: var(--c-mono); font-size: 12px; color: var(--c-sub); white-space: nowrap; }
.clay2-prog .ptrack { flex: 1; height: 6px; border-radius: 4px; background: #EEF0F1; overflow: hidden; }
.clay2-prog .pfill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--c-mag), var(--c-ind), var(--c-cyan), var(--c-grn)); transition: width .25s linear; }
.clay2-prog .ppct { font-family: var(--c-mono); font-size: 12px; font-weight: 700; color: var(--c-ink); font-variant-numeric: tabular-nums; }

/* pinned scroll scaffolding */
.clay2-pin { position: relative; }
.clay2-stick { position: sticky; top: 64px; min-height: calc(100vh - 64px); display: flex; flex-direction: column; justify-content: flex-start; padding: 2vh 0 40px; }
.clay2-cap { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 22px; font-family: var(--c-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-faint); }
.clay2-cap .pgline { width: 120px; height: 3px; border-radius: 2px; background: #E6E7E9; overflow: hidden; }
.clay2-cap .pgline i { display: block; height: 100%; background: var(--c-ind); }

/* ---- Version C: routing board lanes ---- */
.clay2-board { display: grid; gap: 12px; margin-top: 22px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.clay2-lane { background: #fff; border: 1px solid var(--c-line2); border-radius: 12px; padding: 12px 11px; min-height: 156px; display: flex; flex-direction: column; gap: 10px; transition: box-shadow .25s, border-color .25s, transform .25s; }
.clay2-lane.hot { border-color: currentColor; box-shadow: 0 12px 34px -16px currentColor; transform: translateY(-3px); }
.clay2-lane-hd { display: flex; align-items: center; gap: 7px; }
.clay2-lane-hd .rg { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 700; font-family: var(--c-mono); flex: 0 0 auto; }
.clay2-lane-hd .rg svg { width: 13px; height: 13px; }
.clay2-lane-hd .ln { font-size: 11.5px; font-weight: 700; letter-spacing: -0.01em; color: #2A2E33; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clay2-lane-hd .ct { margin-left: auto; font-family: var(--c-mono); font-size: 14px; font-weight: 700; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.clay2-lane-body { display: flex; flex-direction: column; gap: 6px; }
.clay2-chip { display: flex; align-items: center; gap: 7px; padding: 5px 6px; border-radius: 8px; background: #F7F8F9; border: 1px solid var(--c-line); animation: clay2drop .45s cubic-bezier(.2,.8,.2,1); }
@keyframes clay2drop { 0% { transform: translateY(-10px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
.clay2-chip .ava { width: 21px; height: 21px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; background: #E2E3E6; display: grid; place-items: center; font-size: 9px; font-weight: 700; color: #fff; font-family: var(--c-mono); overflow: hidden; }
.clay2-chip .cn { font-size: 11px; font-weight: 600; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clay2-chip .cc { font-family: var(--c-mono); font-size: 9px; color: var(--c-faint); }

/* source rail (Version C) */
.clay2-rail { background: #fff; border: 1px solid var(--c-line2); border-radius: 12px; overflow: hidden; }
.clay2-rail-hd { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--c-line); }
.clay2-rail-hd .ico { width: 24px; height: 24px; border-radius: 7px; background: #0E0F12; color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.clay2-rail-hd .ttl { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.clay2-rail-hd .meta { margin-left: auto; font-family: var(--c-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-sub); }
.clay2-railcards { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; }
.clay2-pc { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-right: 1px solid var(--c-line); transition: background .25s, opacity .25s; }
.clay2-pc:last-child { border-right: 0; }
.clay2-pc.cur { background: #FBF6FB; box-shadow: inset 0 -2px 0 currentColor; }
.clay2-pc.done { opacity: 0.5; }
.clay2-pc .ava { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; background: #E2E3E6; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; font-family: var(--c-mono); overflow: hidden; }
.clay2-pc .nm { font-size: 12.5px; font-weight: 600; line-height: 1.1; white-space: nowrap; }
.clay2-pc .mc { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.clay2-pc .ft { font-family: var(--c-mono); font-size: 10px; font-weight: 700; color: var(--c-sub); }
.clay2-pc .td { width: 7px; height: 7px; border-radius: 2px; }

/* ---- tab switcher shell ---- */
.clay2-shell { background: #FBFBFA; min-height: 100vh; }
.clay2-tabbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 10px; padding: 16px 40px; background: rgba(251,251,250,0.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--c-line); }
.clay2-tabbar .brand { font-family: var(--c-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-sub); margin-right: 8px; }
.clay2-tab {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 9px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: #4A4F55; border: 1px solid transparent; background: transparent; transition: all .16s; font-family: var(--c-sans);
}
.clay2-tab:hover { background: #F1F2F3; }
.clay2-tab .sw { width: 10px; height: 10px; border-radius: 3px; }
.clay2-tab.on { background: #fff; border-color: var(--c-line2); box-shadow: 0 2px 8px -4px rgba(16,17,20,0.18); color: #0E0F12; }
.clay2-tab .vk { font-family: var(--c-mono); font-size: 10px; color: var(--c-faint); }
.clay2-hint { margin-left: auto; font-family: var(--c-mono); font-size: 11px; color: var(--c-faint); letter-spacing: 0.04em; }

/* ---- Version A compact (whole table in one viewport) ---- */
.clay2-a .clay2-tbl td { height: 52px; }
.clay2-a .clay2-person { padding: 7px 14px; }
.clay2-a .clay2-ava { width: 30px; height: 30px; }

/* ---- embedded on the main ABM page: sticky stage, grid-centered ---- */
.clay2-embed .clay2-stage { position: sticky; top: 0; height: 100vh; min-height: 0; display: grid; place-items: center; overflow: hidden; padding: 0 24px; }
.clay2-embed .clay2-fitwrap { width: min(1560px, 94vw); }
.clay2-embed .clay2-frame { width: 100%; border-radius: 18px; box-shadow: 0 1px 0 rgba(16,17,20,0.02), 0 40px 90px -34px rgba(16,17,20,0.30), 0 12px 30px -16px rgba(16,17,20,0.16); }
.clay2-embed .clay2-cap { margin-top: clamp(14px, 2.4vh, 24px); }
/* table fills the frame exactly — no inner scrollbar */
.clay2-tbl--full { width: 100%; min-width: 0; table-layout: fixed; }
.clay2-tbl--full th, .clay2-tbl--full td { overflow: hidden; }
.clay2-tbl--full .clay2-stat { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* roomy chrome + clamped row height so all 7 rows fit any viewport height */
.clay2-embed .clay2-bar { padding: clamp(13px, 1.8vh, 18px) 24px; }
.clay2-embed .clay2-bar .claylogo { height: clamp(22px, 2.6vh, 27px); }
.clay2-embed .clay2-tools { padding: clamp(9px, 1.3vh, 13px) 20px; }
.clay2-embed .clay2-th { min-height: clamp(44px, 5.6vh, 58px); padding: clamp(10px, 1.4vh, 14px) 16px; }
.clay2-embed .clay2-tbl td { height: clamp(44px, 6.4vh, 74px); }
.clay2-embed .clay2-cell, .clay2-embed .clay2-person, .clay2-embed .clay2-sig, .clay2-embed .clay2-route { padding-left: 16px; padding-right: 16px; }
.clay2-embed .clay2-ava { width: clamp(30px, 4vh, 38px); height: clamp(30px, 4vh, 38px); }
.clay2-embed .clay2-prog { padding: clamp(12px, 1.6vh, 16px) 22px; }

/* ---- Version C compact (table + board must share one viewport) ---- */
.clay2-c .clay2-tbl td { height: 46px; }
.clay2-c .clay2-person { padding: 6px 14px; }
.clay2-c .clay2-ava { width: 28px; height: 28px; }
.clay2-c .clay2-person .nm { font-size: 13.5px; }
.clay2-c .clay2-bar { padding: 11px 18px; }
.clay2-c .clay2-board { margin-top: 18px; }
.clay2-c .clay2-lane { min-height: 124px; }

@media (prefers-reduced-motion: reduce) {
  .clay2-chip, .clay2-route .rg.lock { animation: none !important; }
  .clay2-spin { animation: none; }
}