/* ============================================================================
   Assay — AGENT PAGES · part 3  (doer signature-demo components)
   Loaded AFTER agent2.css. Components for AI RevOps + AI Sales Enablement whose
   demos the earlier pages didn't need. Same tokens, same craft.

     · .sec.warm      a warm recessed band (GC kit, receipts row)
     · .tiers         the control-layer diagram (who writes → the gate → seats)
     · .flowmap       the no-sender architecture (your tools, your seats)
     · .meter         the earned-autonomy meter (approve-each until it earns auto)
     · .cfg           the play-settings card (author/owner/runner/approver)
     · .learn         claim-level learning (one claim node → plays inherit)
     · .kit-list      the GC-kit contents (mono index + one-liners)
     · .brief         the pre-call brief card (buyer context, never a score)
     · .life          the rep's-day lifecycle rows (stage · narration · artifact)
     · .readiness     the leadership readiness panel (attributed, coaching-framed)
   ========================================================================== */

.sec.warm { background: var(--cream-2); color: var(--color-on-surface); }

/* ============================================================================
   TIERS — the control-layer diagram (RevOps: one gate between team and buyers)
   ========================================================================== */
.tiers { margin-top: clamp(30px, 4vw, 46px); display: flex; flex-direction: column; align-items: center; gap: 0; }
.tier-cap { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 14px; }
.sec.cream .tier-cap, .sec.warm .tier-cap { color: var(--color-outline); }
.tier-chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: 760px; }
.tier-chip { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.78); border: 1px solid var(--ink-line); background: rgba(255,255,255,0.03); padding: 11px 15px; }
.sec.cream .tier-chip, .sec.warm .tier-chip { color: var(--color-on-surface-variant); border-color: var(--color-outline-variant); background: #fff; }
.tier-chip.grn { color: #6fe0c4; border-color: rgba(0,184,148,0.5); }
.sec.cream .tier-chip.grn, .sec.warm .tier-chip.grn { color: var(--color-verification); border-color: rgba(0,184,148,0.5); }
.tier-conn { width: 1.5px; height: 30px; background: var(--ink-line); }
.sec.cream .tier-conn, .sec.warm .tier-conn { background: var(--color-outline-variant); }
.tier-gate {
  border: 1.5px solid var(--color-primary); background: rgba(99,14,212,0.16);
  box-shadow: 6px 6px 0 rgba(99,14,212,0.4); padding: 20px 30px; text-align: center; max-width: 640px;
}
.sec.cream .tier-gate, .sec.warm .tier-gate { background: rgba(99,14,212,0.06); box-shadow: 6px 6px 0 var(--color-primary); }
.tier-gate .tg-name { font-family: var(--font-headline); font-size: clamp(20px, 2.1vw, 27px); font-weight: 500; color: #fff; letter-spacing: -0.015em; margin-bottom: 8px; }
.sec.cream .tier-gate .tg-name, .sec.warm .tier-gate .tg-name { color: var(--color-obsidian); }
.tier-gate .tg-props { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #c6a2f7; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.sec.cream .tier-gate .tg-props, .sec.warm .tier-gate .tg-props { color: var(--color-primary); }
.tier-gate .tg-props span::after { content: "·"; margin-left: 8px; color: var(--color-outline); }
.tier-gate .tg-props span:last-child::after { content: ""; }
.tier-out { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.tier-out .to-arrow { font-family: var(--font-body); color: var(--color-outline); font-size: 15px; }
.tier-caption { margin-top: 22px; font-family: var(--font-headline); font-weight: 400; font-style: italic; font-size: clamp(16px, 1.7vw, 20px); line-height: 1.4; color: rgba(255,255,255,0.82); text-align: center; max-width: 620px; }
.sec.cream .tier-caption, .sec.warm .tier-caption { color: var(--color-on-surface); }

/* ============================================================================
   FLOWMAP — the no-sender architecture (RevOps fear 2)
   ========================================================================== */
.flowmap { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.fm-box { flex: 1; min-width: 140px; border: 1.5px solid var(--ink-line); background: rgba(255,255,255,0.03); padding: 15px 16px; display: flex; flex-direction: column; gap: 6px; }
.fm-box .fb-k { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
.fm-box .fb-v { font-family: var(--font-body); font-size: 13.5px; line-height: 1.4; color: #fff; font-weight: 500; }
.fm-box.grn { border-color: rgba(0,184,148,0.45); }
.fm-box.grn .fb-k { color: #6fe0c4; }
.fm-arrow { display: flex; align-items: center; font-family: var(--font-body); font-size: 18px; color: var(--color-outline); }
.fm-strike { margin-top: 14px; border: 1px dashed var(--ink-line); padding: 14px 16px; display: flex; gap: 22px; flex-wrap: wrap; }
.fm-strike .fs-item { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: rgba(255,255,255,0.5); text-transform: uppercase; }
.fm-strike .fs-item .x { color: #ff9a9a; text-decoration: line-through; text-decoration-thickness: 1.5px; }

/* ============================================================================
   METER — the earned-autonomy meter (RevOps fear 3)
   ========================================================================== */
.meter { border: 1.5px solid var(--color-primary); background: var(--ink-800); box-shadow: 6px 6px 0 rgba(99,14,212,0.4); padding: 20px 22px; }
.meter .mtr-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.meter .mtr-play { font-family: var(--font-headline); font-size: 18px; font-weight: 500; color: #fff; letter-spacing: -0.012em; }
.meter .mtr-mode { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-amber-truth); border: 1px solid var(--color-amber-truth); padding: 4px 9px; }
.meter .mtr-track { height: 8px; background: var(--ink-900); border: 1px solid var(--ink-line); position: relative; overflow: hidden; }
.meter .mtr-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--color-verification); transition: width 900ms var(--ease-decelerate); }
.meter.drawn .mtr-fill { width: 42%; }
.no-js .meter .mtr-fill { width: 42%; }
.meter .mtr-lbl { margin-top: 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: rgba(255,255,255,0.62); }
.meter .mtr-lbl b { color: var(--color-verification); }
.meter .mtr-rows { margin-top: 16px; border-top: 1px solid var(--ink-line); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.meter .mtr-fixed { display: flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 13px; color: rgba(255,255,255,0.78); }
.meter .mtr-fixed .lk { width: 16px; height: 16px; flex: none; border: 1px solid var(--color-amber-truth); color: var(--color-amber-truth); font-size: 9px; display: inline-flex; align-items: center; justify-content: center; }
.meter .mtr-fixed.kill .lk { border-color: var(--color-error); color: #ff9a9a; }

/* ============================================================================
   CFG — the play-settings card (RevOps: who writes / owns / runs / approves)
   ========================================================================== */
.cfg { border: 1.5px solid var(--color-obsidian); background: #fff; box-shadow: var(--shadow-deep); }
.cfg-row { display: grid; grid-template-columns: 130px 1fr; gap: 18px; padding: 16px 22px; border-bottom: 1px solid var(--receipt-line); align-items: baseline; }
.cfg-row:last-child { border-bottom: none; }
.cfg-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-outline); }
.cfg-v { font-family: var(--font-body); font-size: 15px; color: var(--color-on-surface); }
.cfg-v b { color: var(--color-primary); font-weight: 600; }
.cfg-v .seat { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; color: var(--color-on-surface-variant); text-transform: uppercase; }

/* ============================================================================
   LEARN — claim-level learning (RevOps: one claim node → every play inherits)
   ========================================================================== */
.learn { margin-top: clamp(28px, 3.5vw, 44px); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,0.9fr); gap: clamp(20px, 3vw, 40px); align-items: center; }
.learn-node { border: 1.5px solid var(--color-primary); background: rgba(99,14,212,0.14); box-shadow: 6px 6px 0 rgba(99,14,212,0.4); padding: 20px 22px; }
.learn-node .ln-id { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #c6a2f7; margin-bottom: 14px; display: flex; align-items: center; gap: 9px; }
.learn-node .ln-id .di { width: 7px; height: 7px; background: var(--color-primary); }
.learn-seg { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--ink-line-soft); }
.learn-seg:last-of-type { border-bottom: none; }
.learn-seg .ls-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.learn-seg .ls-v { font-family: var(--font-mono); font-size: 14px; color: var(--color-verification); }
.learn-flow { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #6fe0c4; margin-top: 14px; border-top: 1px solid rgba(0,184,148,0.3); padding-top: 12px; display: flex; align-items: center; gap: 9px; }
.learn-plays { display: flex; flex-direction: column; gap: 10px; }
.learn-play { border: 1.5px solid var(--ink-line); background: rgba(255,255,255,0.028); padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.learn-play .lp-name { font-family: var(--font-headline); font-size: 17px; font-weight: 500; color: #fff; letter-spacing: -0.012em; }
.learn-play .lp-tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-verification); border: 1px solid var(--color-verification); padding: 4px 9px; }

/* ============================================================================
   KIT-LIST — the GC-kit contents (AI Legal S8)
   ========================================================================== */
.kit-list { display: flex; flex-direction: column; }
.kit-row { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--receipt-line); align-items: start; }
.kit-row:first-child { padding-top: 0; }
.kit-row:last-child { border-bottom: none; }
.kit-row .kt-n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--color-primary); border: 1px solid var(--color-outline-variant); width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; }
.kit-row .kt-h { font-family: var(--font-headline); font-size: 18px; font-weight: 500; color: var(--color-obsidian); letter-spacing: -0.012em; margin: 0 0 5px; }
.kit-row .kt-b { font-family: var(--font-body); font-size: 13.5px; line-height: 1.5; color: var(--color-on-surface-variant); margin: 0; }

/* ============================================================================
   BRIEF — the pre-call brief card (AI Sales Enablement: buyer context)
   ========================================================================== */
.brief { border: 1.5px solid var(--ink-line); background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)); box-shadow: 10px 10px 0 rgba(99,14,212,0.5); }
.brief.on-light { border-color: var(--color-obsidian); background: #fff; box-shadow: var(--shadow-deep); }
.brief .bf-head { padding: 15px 20px; border-bottom: 1px solid var(--ink-line); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.brief.on-light .bf-head { border-color: var(--receipt-line); }
.brief .bf-acct { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; display: flex; align-items: center; gap: 9px; }
.brief.on-light .bf-acct { color: var(--color-obsidian); }
.brief .bf-acct .di { width: 7px; height: 7px; background: var(--color-verification); }
.brief .bf-when { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.brief.on-light .bf-when { color: var(--color-outline); }
.brief .bf-body { padding: 8px 20px 6px; }
.brief .bf-row { padding: 12px 0; border-bottom: 1px solid var(--ink-line-soft); }
.brief.on-light .bf-row { border-color: var(--receipt-line); }
.brief .bf-row:last-child { border-bottom: none; }
.brief .bf-k { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.brief.on-light .bf-k { color: var(--color-outline); }
.brief .bf-v { font-family: var(--font-body); font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,0.9); }
.brief.on-light .bf-v { color: var(--color-on-surface); }
.brief .bf-v b { color: #fff; font-weight: 600; }
.brief.on-light .bf-v b { color: var(--color-obsidian); }
.brief .bf-v .src { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-verification); display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; }
.brief .bf-k.amber { color: var(--color-amber-truth); }
.brief .bf-k.amber .di, .brief .bf-k .di { width: 6px; height: 6px; background: currentColor; }
.brief .bf-chip { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-verification); border: 1px solid rgba(0,184,148,0.5); padding: 3px 8px; display: inline-flex; align-items: center; gap: 6px; }
.brief .bf-foot { padding: 13px 20px; border-top: 1px solid var(--ink-line); background: rgba(0,0,0,0.18); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.brief.on-light .bf-foot { border-color: var(--receipt-line); background: var(--cream-2); color: var(--color-on-surface-variant); }

/* ============================================================================
   LIFE — the rep's-day lifecycle rows (stage · narration · artifact mock)
   ========================================================================== */
.life { margin-top: clamp(30px, 4vw, 48px); display: flex; flex-direction: column; }
.life-row { display: grid; grid-template-columns: 150px minmax(0,1fr) minmax(0,0.92fr); gap: clamp(18px, 3vw, 40px); padding: clamp(24px, 3vw, 36px) 0; border-bottom: 1px solid var(--receipt-line); align-items: center; }
.life-row:first-child { padding-top: 0; }
.life-row:last-child { border-bottom: none; }
.lf-stage { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); }
.lf-stage .lf-time { display: block; margin-top: 6px; color: var(--color-outline); font-size: 9px; letter-spacing: 0.08em; }
.lf-h { font-family: var(--font-headline); font-size: clamp(20px, 2.1vw, 27px); font-weight: 500; letter-spacing: -0.015em; line-height: 1.16; color: var(--color-obsidian); margin: 0 0 9px; }
.lf-narr { font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: var(--color-on-surface-variant); margin: 0; max-width: 460px; }
.lf-narr b { color: var(--color-on-surface); font-weight: 600; }
/* the artifact mock */
.lf-art { border: 1.5px solid var(--color-obsidian); background: #fff; box-shadow: var(--shadow-deep); padding: 14px 16px; }
.lf-art .la-top { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.lf-art .la-badge { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-primary); border: 1px solid var(--color-outline-variant); padding: 3px 7px; display: inline-flex; align-items: center; gap: 6px; }
.lf-art .la-badge .di { width: 5px; height: 5px; background: var(--color-primary); }
.lf-art .la-badge.grn { color: var(--color-verification); } .lf-art .la-badge.grn .di { background: var(--color-verification); }
.lf-art .la-when { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-outline); margin-left: auto; }
.lf-art .la-q { font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: var(--color-on-surface); margin: 0 0 8px; }
.lf-art .la-q b { color: var(--color-obsidian); font-weight: 600; }
.lf-art .la-a { font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: var(--color-on-surface-variant); border-left: 2px solid var(--color-verification); padding-left: 12px; margin: 0; }
.lf-art .la-chip { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-verification); display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; }
.lf-art .la-chip .sl { width: 13px; height: 13px; border: 1px solid var(--color-verification); font-size: 8px; display: inline-flex; align-items: center; justify-content: center; }
.lf-art .la-chip.amber { color: var(--color-amber-truth); } .lf-art .la-chip.amber .sl { border-color: var(--color-amber-truth); }
.lf-art .la-row { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 12px; color: var(--color-on-surface-variant); padding: 5px 0; }
.lf-art .la-row .dot { width: 5px; height: 5px; background: var(--color-verification); flex: none; }
.lf-art .la-foot { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--receipt-line); font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-outline); }
.lf-art .la-lines .ln { height: 5px; background: var(--cream-2); margin-bottom: 6px; }
.lf-art .la-lines .ln.w80 { width: 80%; } .lf-art .la-lines .ln.w60 { width: 60%; }

/* ============================================================================
   READINESS — the leadership panel (AI Sales Enablement: attributed, coaching)
   ========================================================================== */
.readiness-grid { margin-top: clamp(28px, 3.5vw, 44px); display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,0.85fr); gap: 18px; align-items: start; }
.readiness { border: 1.5px solid var(--color-obsidian); background: #fff; box-shadow: 8px 8px 0 var(--color-verification); }
.readiness .rd-head { padding: 15px 20px; border-bottom: 1px solid var(--receipt-line); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-on-surface-variant); display: flex; align-items: center; gap: 9px; }
.readiness .rd-head .di { width: 7px; height: 7px; background: var(--color-verification); }
.rd-row { display: grid; grid-template-columns: 1.1fr 0.9fr 1.3fr; gap: 14px; padding: 15px 20px; border-bottom: 1px solid var(--receipt-line); align-items: center; }
.rd-row:last-of-type { border-bottom: none; }
.rd-name { font-family: var(--font-headline); font-size: 16px; font-weight: 500; color: var(--color-obsidian); letter-spacing: -0.01em; }
.rd-name .rd-role { display: block; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-outline); margin-top: 3px; }
.rd-score { font-family: var(--font-mono); font-size: 18px; color: var(--color-obsidian); display: flex; align-items: baseline; gap: 8px; }
.rd-score .rd-tr { font-size: 10px; letter-spacing: 0.04em; }
.rd-score .rd-tr.up { color: var(--color-verification); }
.rd-score .rd-tr.flat { color: var(--color-outline); }
.rd-gap { font-family: var(--font-body); font-size: 12.5px; line-height: 1.4; color: var(--color-on-surface-variant); }
.rd-gap .rd-mat { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-primary); border: 1px solid var(--color-outline-variant); padding: 3px 8px; }
.readiness .rd-src { padding: 13px 20px; border-top: 1px solid var(--receipt-line); background: var(--cream-2); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-on-surface-variant); }
/* the org freshness vital */
.freshness { border: 1.5px solid var(--color-obsidian); background: var(--color-obsidian); color: #fff; padding: 22px; box-shadow: 8px 8px 0 var(--color-primary); }
.freshness .fr-lbl { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 12px; }
.freshness .fr-big { font-family: var(--font-headline); font-size: clamp(38px, 4.4vw, 56px); font-weight: 500; color: #fff; letter-spacing: -0.025em; line-height: 1; }
.freshness .fr-big .pct { color: var(--color-verification); }
.freshness .fr-sub { font-family: var(--font-body); font-size: 13px; line-height: 1.45; color: rgba(255,255,255,0.7); margin: 10px 0 16px; }
.freshness .fr-bar { height: 8px; background: var(--ink-800); border: 1px solid var(--ink-line); position: relative; overflow: hidden; }
.freshness .fr-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--color-verification); transition: width 1000ms var(--ease-decelerate); }
.freshness.drawn .fr-fill { width: 94%; }
.no-js .freshness .fr-fill { width: 94%; }
.freshness .fr-cap { margin-top: 10px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.5); }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .learn { grid-template-columns: 1fr; }
  .readiness-grid { grid-template-columns: 1fr; }
  .life-row { grid-template-columns: 130px 1fr; }
  .life-row .lf-art { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .flowmap { flex-direction: column; align-items: stretch; }
  .fm-arrow { transform: rotate(90deg); justify-content: center; }
  .cfg-row { grid-template-columns: 1fr; gap: 5px; }
  .life-row { grid-template-columns: 1fr; gap: 12px; }
  .rd-row { grid-template-columns: 1fr; gap: 8px; }
  .rd-score { }
}