/* =========================================================================
   Method 8 — Gold Fields interactive demo · shell + new modules
   Builds on engagements.css (everything scoped under .e8). Adds:
   full-viewport app shell, labelled nav, view transitions, OS spine,
   live workshop polling, survey compose/send/results.
   ========================================================================= */

/* ---------- Full-viewport app shell ---------- */
.e8.appshell { display: grid; grid-template-columns: 256px 1fr; height: 100vh; width: 100vw; background: var(--wash); overflow: hidden; }

/* ---------- Labelled sidebar ---------- */
.e8 .nav { background: var(--paper); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.e8 .nav-brand { display: flex; align-items: center; gap: 10px; padding: 16px 18px 13px; }
.e8 .nav-logo { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg,#84caff,#2e90fa); display: grid; place-items: center; color: #fff; font: 700 14px/1 'Inter'; letter-spacing: -0.02em; flex: none; }
.e8 .nav-brand .nm { font: 600 15px/18px 'Inter'; }
.e8 .nav-brand .ws { font: 500 11px/14px 'Inter'; color: var(--ink4); margin-top: 1px; }
.e8 .nav-brand .byo { margin-left: auto; }
.e8 .nav-search { margin: 2px 14px 8px; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink4); }
.e8 .nav-search svg { width: 15px; height: 15px; }
.e8 .nav-search span.ph { font: 400 13px/1 'Inter'; flex: 1; }
.e8 .nav-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 12px 12px; }
.e8 .nav-group { margin-top: 12px; }
.e8 .nav-group-h { display: flex; align-items: center; gap: 7px; padding: 0 10px 6px; font: 600 10px/14px 'Inter'; text-transform: uppercase; letter-spacing: .5px; color: var(--ink4); }
.e8 .nav-group-h .live-dot { width: 6px; height: 6px; border-radius: 999px; background: #17b26a; box-shadow: 0 0 0 3px #d1fadf; }
.e8 .nav-group-h .lk { margin-left: auto; opacity: .6; }
.e8 .nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; font: 500 13.5px/17px 'Inter'; color: var(--ink2); cursor: pointer; user-select: none; transition: background .12s, color .12s; }
.e8 .nav-item svg { width: 18px; height: 18px; color: var(--ink4); flex: none; transition: color .12s; }
.e8 .nav-item:hover { background: var(--wash); }
.e8 .nav-item.active { background: #eff8ff; color: #175cd3; font-weight: 600; }
.e8 .nav-item.active svg { color: #175cd3; }
.e8 .nav-item .nb { margin-left: auto; font: 600 11px/1 'Inter'; padding: 2px 7px; border-radius: 999px; background: var(--wash2); color: var(--ink3); }
.e8 .nav-item.active .nb { background: #d1e9ff; color: #175cd3; }
.e8 .nav-item .crit-dot { margin-left: auto; width: 7px; height: 7px; border-radius: 999px; background: #f04438; }
.e8 .nav-item.locked { color: var(--ink4); cursor: pointer; }
.e8 .nav-item.locked svg { color: #cdd5df; }
.e8 .nav-item.locked .lk { margin-left: auto; }
.e8 .nav-item.locked:hover { background: var(--wash); color: var(--ink3); }
.e8 .nav-foot { border-top: 1px solid var(--line2); padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.e8 .nav-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; }
.e8 .nav-user img { width: 30px; height: 30px; border-radius: 999px; box-shadow: 0 0 0 1px var(--line); flex: none; }
.e8 .nav-user .un { font: 600 13px/16px 'Inter'; }
.e8 .nav-user .ur { font: 400 11px/14px 'Inter'; color: var(--ink4); }

/* ---------- Main column ---------- */
.e8 .app-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.e8 .app-top { display: flex; align-items: center; gap: 14px; padding: 11px 28px; background: var(--paper); border-bottom: 1px solid var(--line); flex: none; }
.e8 .app-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.e8 .app-view { padding: 24px 30px 56px; max-width: 1280px; margin: 0 auto; }
.e8 .app-view.wide { max-width: 1440px; }
/* subtle entrance — never animates opacity from 0 (stays visible if the
   animation timeline is throttled, e.g. during capture / background tabs) */
.e8 .app-view { animation: viewIn .28s cubic-bezier(.2,.7,.3,1); }
@keyframes viewIn { from { transform: translateY(8px); } to { transform: none; } }

.e8 .seg { margin-left: auto; }
.e8 .role-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 6px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font: 500 12px/1 'Inter'; color: var(--ink2); cursor: pointer; }
.e8 .role-pill img { width: 22px; height: 22px; border-radius: 999px; }
.e8 .role-pill .chev { color: var(--ink4); }

/* clickable affordance for demo */
.e8 .clk { cursor: pointer; }
.e8 .quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.e8 .qcard { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 18px; cursor: pointer; transition: box-shadow .15s, border-color .15s, transform .15s; display: flex; flex-direction: column; gap: 11px; }
.e8 .qcard:hover { box-shadow: var(--shadow-md); border-color: var(--line3); transform: translateY(-2px); }
.e8 .qcard .qic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; }
.e8 .qcard .qt { font: 600 15px/20px 'Inter'; }
.e8 .qcard .qd { font: 400 12.5px/18px 'Inter'; color: var(--ink4); flex: 1; }
.e8 .qcard .qgo { font: 600 12px/16px 'Inter'; color: #175cd3; display: inline-flex; align-items: center; gap: 5px; }

/* =========================================================================
   Operating-system spine (the OS mockup)
   ========================================================================= */
.e8 .spine { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; }
.e8 .phase { position: relative; padding: 0 9px; }
.e8 .phase::before { content: ""; position: absolute; top: 26px; left: -50%; width: 100%; height: 3px; background: var(--line); z-index: 0; }
.e8 .phase:first-child::before { display: none; }
.e8 .phase.live::before { background: linear-gradient(90deg,#84caff,#2e90fa); }
.e8 .phase-node { position: relative; z-index: 1; width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 999px; display: grid; place-items: center; background: var(--paper); border: 2px solid var(--line3); color: var(--ink4); }
.e8 .phase-node svg { width: 24px; height: 24px; }
.e8 .phase.live .phase-node { background: linear-gradient(135deg,#2e90fa,#175cd3); border-color: #175cd3; color: #fff; box-shadow: 0 6px 16px rgba(21,92,211,.28); }
.e8 .phase-card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 16px; min-height: 220px; display: flex; flex-direction: column; gap: 8px; transition: box-shadow .15s, border-color .15s, transform .15s; }
.e8 .phase.live .phase-card { border-color: #b2ddff; }
.e8 .phase-card.clk:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.e8 .phase-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.e8 .phase-name { font: 700 15px/20px 'Inter'; letter-spacing: -0.01em; }
.e8 .phase-tag { font: 600 9.5px/14px 'Inter'; text-transform: uppercase; letter-spacing: .4px; padding: 2px 8px; border-radius: 999px; }
.e8 .phase-tag.on { background: #ecfdf3; color: #067647; border: 1px solid #abefc6; }
.e8 .phase-tag.off { background: var(--wash); color: var(--ink4); border: 1px solid var(--line); }
.e8 .phase-desc { font: 400 12px/17px 'Inter'; color: var(--ink4); }
.e8 .phase-mods { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.e8 .phase-mod { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; background: var(--wash); font: 500 12px/15px 'Inter'; color: var(--ink2); }
.e8 .phase.live .phase-mod.act { background: #eff8ff; color: #175cd3; cursor: pointer; }
.e8 .phase-mod .md { width: 6px; height: 6px; border-radius: 999px; background: var(--ink4); opacity: .45; flex: none; }
.e8 .phase.live .phase-mod.act .md { background: #2e90fa; opacity: 1; }
.e8 .phase-mod.lk { color: var(--ink4); }
.e8 .phase-mod.lk svg { width: 12px; height: 12px; margin-left: auto; }

/* flywheel / loop strip */
.e8 .loop { display: flex; align-items: stretch; gap: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--paper); }
.e8 .loop-step { flex: 1; padding: 16px 18px; display: flex; flex-direction: column; gap: 5px; position: relative; }
.e8 .loop-step + .loop-step { border-left: 1px solid var(--line2); }
.e8 .loop-step .ls-k { font: 600 11px/14px 'Inter'; color: #175cd3; text-transform: uppercase; letter-spacing: .4px; }
.e8 .loop-step .ls-t { font: 600 14px/19px 'Inter'; }
.e8 .loop-step .ls-d { font: 400 12px/17px 'Inter'; color: var(--ink4); }

/* =========================================================================
   Formative workshop · live polling
   ========================================================================= */
.e8 .wk-stage { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.e8 .wk-head { display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-bottom: 1px solid var(--line2); background: linear-gradient(90deg,#fbfcfe,#fff); }
.e8 .wk-live { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; background: #fef3f2; border: 1px solid #fecdca; font: 700 11px/1 'Inter'; color: #b42318; text-transform: uppercase; letter-spacing: .4px; }
.e8 .wk-live::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: #f04438; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1);} 50% { opacity: .4; transform: scale(.7);} }
.e8 .wk-join { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1 'Inter'; color: var(--ink3); }
.e8 .wk-join b { color: var(--ink); font-weight: 600; }
.e8 .wk-body { padding: 26px 30px 30px; }
.e8 .wk-qn { font: 600 11px/16px 'Inter'; text-transform: uppercase; letter-spacing: .5px; color: #5925dc; margin-bottom: 8px; }
.e8 .wk-q { font: 600 26px/33px 'Inter'; letter-spacing: -0.02em; max-width: 820px; }
.e8 .wk-scale-cap { display: flex; justify-content: space-between; font: 500 12px/16px 'Inter'; color: var(--ink4); margin: 22px 0 10px; }
.e8 .wk-bars { display: flex; flex-direction: column; gap: 10px; }
.e8 .wk-bar { display: grid; grid-template-columns: 130px 1fr 46px; gap: 14px; align-items: center; }
.e8 .wk-bar .bl { font: 500 13px/17px 'Inter'; color: var(--ink2); }
.e8 .wk-bar .bl small { display: block; font: 400 11px/14px 'Inter'; color: var(--ink4); }
.e8 .wk-track { position: relative; height: 30px; background: var(--wash); border-radius: 8px; overflow: hidden; }
.e8 .wk-seg { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; }
.e8 .wk-fill.s1 { background: #f04438; } .e8 .wk-fill.s2 { background: #f79009; }
.e8 .wk-fill.s3 { background: #fdb022; } .e8 .wk-fill.s4 { background: #66c61c; } .e8 .wk-fill.s5 { background: #17b26a; }
.e8 .wk-bar .bv { font: 600 14px/1 'Inter'; font-variant-numeric: tabular-nums; text-align: right; color: var(--ink2); }
.e8 .wk-ctrl { display: flex; align-items: center; gap: 12px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line2); }
.e8 .wk-tally { font: 500 13px/1 'Inter'; color: var(--ink4); }
.e8 .wk-tally b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.e8 .wk-avg { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.e8 .wk-avg .av-n { font: 700 30px/1 'Inter'; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.e8 .wk-avg .av-l { font: 500 11px/14px 'Inter'; color: var(--ink4); text-transform: uppercase; letter-spacing: .4px; }

/* big circular button */
.e8 .btn-launch { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 20px; border-radius: 10px; border: none; cursor: pointer; font: 600 14px/1 'Inter'; }
.e8 .btn-launch.go { background: #17b26a; color: #fff; }
.e8 .btn-launch.stop { background: #1f242f; color: #fff; }
.e8 .btn-launch:disabled { opacity: .5; cursor: default; }

/* agenda rail */
.e8 .wk-agenda { display: flex; flex-direction: column; gap: 3px; }
.e8 .wk-ag-item { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 10px; cursor: pointer; }
.e8 .wk-ag-item:hover { background: var(--wash); }
.e8 .wk-ag-item.on { background: #f4f3ff; }
.e8 .wk-ag-item .agn { width: 24px; height: 24px; border-radius: 999px; border: 1.5px solid var(--line3); display: grid; place-items: center; font: 600 11px/1 'Inter'; color: var(--ink4); flex: none; }
.e8 .wk-ag-item.done .agn { background: #17b26a; border-color: #17b26a; color: #fff; }
.e8 .wk-ag-item.on .agn { border-color: #5925dc; color: #5925dc; }
.e8 .wk-ag-item .agt { font: 500 12.5px/16px 'Inter'; color: var(--ink2); flex: 1; min-width: 0; }
.e8 .wk-ag-item.on .agt { color: #5925dc; font-weight: 600; }
.e8 .wk-ag-item .agv { font: 700 13px/1 'Inter'; font-variant-numeric: tabular-nums; }

/* profile sparkline rows */
.e8 .prof-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line2); }
.e8 .prof-row:last-child { border-bottom: none; }
.e8 .prof-row .pn { font: 500 12.5px/16px 'Inter'; flex: 1; }
.e8 .prof-meter { width: 120px; height: 7px; border-radius: 4px; background: var(--wash2); overflow: hidden; }
.e8 .prof-meter > i { display: block; height: 100%; border-radius: 4px; }
.e8 .prof-row .pv { font: 700 13px/1 'Inter'; width: 34px; text-align: right; font-variant-numeric: tabular-nums; }

/* =========================================================================
   Culture survey · compose / send / results
   ========================================================================= */
.e8 .sv-steps { display: inline-flex; background: var(--wash); border-radius: 10px; padding: 4px; gap: 2px; }
.e8 .sv-step { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 7px; font: 600 12.5px/1 'Inter'; color: var(--ink4); background: transparent; border: none; cursor: pointer; }
.e8 .sv-step .sx { width: 18px; height: 18px; border-radius: 999px; border: 1.5px solid var(--line3); display: grid; place-items: center; font: 700 10px/1 'Inter'; }
.e8 .sv-step.active { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(16,24,40,.06); }
.e8 .sv-step.active .sx { border-color: #175cd3; color: #175cd3; }
.e8 .sv-step.done .sx { background: #17b26a; border-color: #17b26a; color: #fff; }

.e8 .aud-chip { display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 11px; }
.e8 .aud-chip .ac-n { font: 700 18px/1 'Inter'; font-variant-numeric: tabular-nums; }
.e8 .aud-chip .ac-l { font: 400 12px/15px 'Inter'; color: var(--ink4); }

.e8 .q-likert { padding: 13px 16px; border: 1px solid var(--line); border-radius: 11px; margin-bottom: 9px; background: var(--paper); }
.e8 .q-likert .qt { font: 500 14px/20px 'Inter'; }
.e8 .q-likert .qmeta { font: 400 11.5px/15px 'Inter'; color: var(--ink4); margin-top: 3px; display: flex; align-items: center; gap: 8px; }
.e8 .likert-row { display: flex; gap: 6px; margin-top: 11px; }
.e8 .likert-dot { flex: 1; height: 30px; border-radius: 7px; background: var(--wash); border: 1px solid var(--line); display: grid; place-items: center; font: 500 11px/1 'Inter'; color: var(--ink4); }
.e8 .chan { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; margin-bottom: 9px; }
.e8 .chan .ci { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.e8 .chan .cn { font: 600 13px/17px 'Inter'; }
.e8 .chan .cd { font: 400 11.5px/15px 'Inter'; color: var(--ink4); }

/* send overlay */
.e8 .send-wrap { position: relative; }
.e8 .sending { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 60px 20px; text-align: center; }
.e8 .send-ring { width: 84px; height: 84px; position: relative; }
.e8 .send-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.e8 .send-ring .rt { fill: none; stroke: var(--wash2); stroke-width: 7; }
.e8 .send-ring .ra { fill: none; stroke: #17b26a; stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset .15s linear; }
.e8 .send-ring .sc { position: absolute; inset: 0; display: grid; place-items: center; }
.e8 .send-ring .sc svg { width: 34px; height: 34px; transform: none; color: #17b26a; }
.e8 .send-stat { font: 600 18px/24px 'Inter'; }
.e8 .send-sub { font: 400 13px/19px 'Inter'; color: var(--ink4); }
.e8 .send-count { font: 700 40px/1 'Inter'; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* results */
.e8 .score-hero { display: flex; align-items: center; gap: 24px; }
.e8 .score-big { font: 700 64px/1 'Inter'; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.e8 .score-big small { font: 500 22px/1 'Inter'; color: var(--ink4); }
.e8 .dim-row { display: grid; grid-template-columns: 220px 1fr 54px; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line2); }
.e8 .dim-row:last-child { border-bottom: none; }
.e8 .dim-row .dn { font: 500 13.5px/18px 'Inter'; }
.e8 .dim-row .dn small { display: block; font: 400 11px/14px 'Inter'; color: var(--ink4); }
.e8 .dim-track { position: relative; height: 10px; border-radius: 6px; background: var(--wash2); overflow: hidden; }
.e8 .dim-seg { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; }
.e8 .dim-row .dv { font: 700 16px/1 'Inter'; text-align: right; font-variant-numeric: tabular-nums; }
.e8 .verbatim { padding: 12px 14px; border-radius: 11px; background: var(--wash); border: 1px solid var(--line2); margin-bottom: 9px; }
.e8 .verbatim .vt { font: 400 13px/19px 'Inter'; color: var(--ink2); font-style: italic; }
.e8 .verbatim .vm { font: 400 11px/14px 'Inter'; color: var(--ink4); margin-top: 6px; display: flex; align-items: center; gap: 8px; }
.e8 .sent-tag { font: 600 10px/14px 'Inter'; padding: 1px 7px; border-radius: 999px; }
.e8 .sent-tag.pos { background: #ecfdf3; color: #067647; }
.e8 .sent-tag.neg { background: #fef3f2; color: #b42318; }
.e8 .sent-tag.neu { background: var(--wash2); color: var(--ink3); }

/* live response counter */
.e8 .resp-live { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1 'Inter'; color: var(--ink3); }
.e8 .resp-live b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.e8 .resp-live .pulse-dot { width: 8px; height: 8px; border-radius: 999px; background: #17b26a; animation: pulse 1.4s ease-in-out infinite; }

/* =========================================================================
   Formative Health Report · de-branded Operating Model Health playback
   ========================================================================= */
.e8 .rep-cover { display: flex; align-items: center; gap: 24px; padding: 24px 28px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(120deg,#fbfcfe,#f4f7fb); }
.e8 .rep-cover-l { flex: 1; min-width: 0; }
.e8 .rep-eyebrow { font: 600 11px/16px 'Inter'; text-transform: uppercase; letter-spacing: .5px; color: #175cd3; margin-bottom: 7px; }
.e8 .rep-cover-l h1 { font: 700 27px/33px 'Inter'; letter-spacing: -0.02em; margin: 0; color: var(--ink); }
.e8 .rep-sub { font: 500 13.5px/19px 'Inter'; color: var(--ink4); margin-top: 6px; }
.e8 .rep-cover-r { display: flex; align-items: center; gap: 18px; flex: none; }
.e8 .rep-cover-meta { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.e8 .rep-prep { display: inline-flex; align-items: center; gap: 7px; font: 500 12px/1 'Inter'; color: var(--ink3); }
.e8 .rep-prep b { color: var(--ink2); font-weight: 600; }

.e8 .rep-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.e8 .rep-cat { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 13px; background: var(--paper); }
.e8 .rep-cat-l { min-width: 0; }
.e8 .rep-cat-n { font: 600 13.5px/18px 'Inter'; color: var(--ink); }
.e8 .rep-cat-a { font: 400 11.5px/15px 'Inter'; color: var(--ink4); margin-top: 1px; }
.e8 .rep-cat-sq { background: #f6fef9; border-color: #abefc6; }
.e8 .rep-sq-n { font: 700 30px/1 'Inter'; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; flex: none; width: 62px; text-align: center; }
.e8 .rep-findings { position: relative; padding: 14px 16px 14px 16px; border-radius: 12px; background: var(--wash); border: 1px solid var(--line2); font: 400 13px/20px 'Inter'; color: var(--ink2); }
.e8 .rep-kf-tag { display: inline-block; font: 700 10px/14px 'Inter'; text-transform: uppercase; letter-spacing: .4px; color: #5925dc; margin-right: 8px; }

.e8 .rep-ba { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 8px 0 16px; }
.e8 .rep-ba-cell { text-align: center; min-width: 88px; }
.e8 .rep-ba-k { font: 600 10.5px/14px 'Inter'; text-transform: uppercase; letter-spacing: .4px; color: var(--ink4); }
.e8 .rep-ba-v { font: 700 38px/1 'Inter'; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 5px; }
.e8 .rep-ba-a { font: 500 12px/1 'Inter'; color: var(--ink4); margin-top: 5px; }
.e8 .rep-insight { display: flex; gap: 9px; padding: 12px 14px; border-radius: 11px; background: #f9f8ff; border: 1px solid #e4e0fb; font: 400 12.5px/19px 'Inter'; color: var(--ink2); }

.e8 .rep-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.e8 .rep-tile { padding: 14px 10px; border: 1.5px solid var(--line); border-radius: 12px; text-align: center; background: var(--paper); }
.e8 .rep-tile-v { font: 700 22px/1 'Inter'; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.e8 .rep-tile-n { font: 500 11px/14px 'Inter'; color: var(--ink3); margin-top: 7px; }

.e8 .rep-el { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.e8 .rep-el-head { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: linear-gradient(90deg,#fbfcfe,#fff); border-bottom: 1px solid var(--line2); }
.e8 .rep-el-num { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #fff; font: 700 14px/1 'Inter'; flex: none; }
.e8 .rep-el-name { font: 600 15px/20px 'Inter'; color: var(--ink); }
.e8 .rep-el-stmt { font: 400 12px/16px 'Inter'; color: var(--ink4); margin-top: 2px; }
.e8 .rep-el-score { text-align: right; font: 700 22px/1 'Inter'; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; flex: none; }
.e8 .rep-el-score small { display: block; font: 500 11px/14px 'Inter'; color: var(--ink4); margin-top: 3px; }
.e8 .rep-el-body { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; padding: 14px 16px; }
.e8 .rep-el-col p { font: 400 12.5px/19px 'Inter'; color: var(--ink2); margin: 0; }
.e8 .rep-el-k { font: 700 10px/14px 'Inter'; text-transform: uppercase; letter-spacing: .4px; color: var(--ink4); margin-bottom: 6px; display: inline-flex; align-items: center; gap: 5px; }
.e8 .rep-el-k.ai { color: #5925dc; }
.e8 .rep-el-note { margin-top: 9px; padding-left: 11px; border-left: 2px solid var(--line3); font: italic 400 12px/18px 'Inter'; color: var(--ink3); }

.e8 .rep-dist { display: flex; align-items: flex-end; gap: 4px; height: 48px; flex: none; width: 130px; }
.e8 .rep-dist-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.e8 .rep-dist-bar { width: 100%; border-radius: 3px 3px 0 0; min-height: 3px; }
.e8 .rep-dist-n { font: 600 9px/1 'Inter'; color: var(--ink3); position: absolute; top: -2px; }
.e8 .rep-dist-x { font: 500 8.5px/1 'Inter'; color: var(--ink4); margin-top: 3px; }

.e8 .rep-actions { width: 100%; border-collapse: collapse; }
.e8 .rep-actions thead th { font: 700 10px/14px 'Inter'; text-transform: uppercase; letter-spacing: .4px; color: var(--ink4); text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line2); }
.e8 .rep-actions tbody td { font: 400 12.5px/18px 'Inter'; color: var(--ink2); padding: 11px 12px; border-bottom: 1px solid var(--line2); vertical-align: top; }
.e8 .rep-actions tbody tr:last-child td { border-bottom: none; }
.e8 .rep-actions .ra-n { color: var(--ink4); font-weight: 700; width: 28px; }
.e8 .rep-actions .ra-t { color: var(--ink); max-width: 360px; }
.e8 .rep-actions .ra-e, .e8 .rep-actions .ra-o { color: var(--ink4); white-space: nowrap; }
.e8 .pill { display: inline-block; font: 600 11px/1 'Inter'; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.e8 .pill.green { background: #ecfdf3; color: #067647; }
.e8 .pill.amber { background: #fffaeb; color: #b54708; }
.e8 .pill.red { background: #fef3f2; color: #b42318; }
.e8 .pill.gray { background: var(--wash2); color: var(--ink3); }

/* High-Priority badge + evidence line on gap criteria */
.e8 .hp-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: 9px; padding: 2px 8px; border-radius: 999px; background: #fef3f2; color: #b42318; font: 700 9.5px/14px 'Inter'; text-transform: uppercase; letter-spacing: .3px; vertical-align: middle; }
.e8 .gap-ev { margin: 7px 0 11px; font: 400 11.5px/16px 'Inter'; color: var(--ink4); }
.e8 .gap-ev-k { font: 700 9.5px/14px 'Inter'; text-transform: uppercase; letter-spacing: .4px; color: var(--ink4); margin-right: 8px; padding: 1px 6px; border-radius: 5px; background: var(--wash2); }