/* =========================================================================
   Method 8 — Engagement screens · component CSS
   Hi-fi, lifted from the production organisation-health control tower and
   extended for: program builder, geo map, rollup matrix, stream lanes,
   BOM block journey, and the quiet "rest of the OS" rail.
   Everything scoped under .e8 so it can't collide with the design canvas.
   ========================================================================= */

.e8 {
  --ink: #101828; --ink2: #344054; --ink3: #475467; --ink4: #667085;
  --line: #e4e7ec; --line2: #f2f4f7; --line3: #d0d5dd;
  --paper: #ffffff; --wash: #f9fafb; --wash2: #f2f4f7;
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-feature-settings: "cv02","cv03","cv04","cv11";
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.e8 *, .e8 *::before, .e8 *::after { box-sizing: border-box; }
.e8 a { color: inherit; text-decoration: none; }

/* ---------- Screen frame (fixed size, no inner scroll) ---------- */
.e8.scr { display: grid; grid-template-columns: 60px 1fr; background: var(--wash); overflow: hidden; }

/* ---------- Sidebar ---------- */
.e8 .sb { background: var(--paper); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; padding: 14px 0; gap: 4px; }
.e8 .sb-logo { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg,#84caff,#2e90fa); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; letter-spacing: -0.02em; }
.e8 .sb-icon { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; color: var(--ink4); }
.e8 .sb-icon svg { width: 19px; height: 19px; }
.e8 .sb-icon.active { background: #eff8ff; color: #175cd3; }
.e8 .sb-icon.locked { color: #cdd5df; }
.e8 .sb-sp { flex: 1; }
.e8 .sb-av { width: 30px; height: 30px; border-radius: 999px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.e8 .sb-av img { width: 100%; height: 100%; display: block; }

/* ---------- Topbar ---------- */
.e8 .main { display: flex; flex-direction: column; min-width: 0; }
.e8 .topbar { display: flex; align-items: center; gap: 14px; padding: 11px 24px; background: var(--paper); border-bottom: 1px solid var(--line); }
.e8 .crumb { display: flex; align-items: center; gap: 8px; font: 400 13px/18px 'Inter'; color: var(--ink4); }
.e8 .crumb a { color: var(--ink2); }
.e8 .crumb .sep { opacity: .5; }
.e8 .crumb .current { color: var(--ink); font-weight: 500; }
.e8 .tb-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.e8 .searchbox { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 11px; min-width: 230px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink4); }
.e8 .searchbox svg { width: 15px; height: 15px; }
.e8 .searchbox span.ph { font: 400 13px/1 'Inter'; flex: 1; }
.e8 .kbd { font: 500 11px/1 ui-monospace, monospace; padding: 2px 5px; background: var(--wash); border: 1px solid var(--line); border-radius: 4px; color: var(--ink4); }
.e8 .icon-btn { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: var(--ink2); position: relative; }
.e8 .icon-btn svg { width: 18px; height: 18px; }
.e8 .icon-btn .dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 999px; background: #d92d20; border: 2px solid var(--paper); }

/* By-Onwards chip */
.e8 .byline { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; background: #f5f7fa; border: 1px solid var(--line); font: 500 11px/1 'Inter'; color: var(--ink3); }
.e8 .byline b { color: var(--ink2); font-weight: 600; }
.e8 .byline .o-dot { width: 13px; height: 13px; border-radius: 4px; background: linear-gradient(135deg,#1f2939,#475467); display: inline-block; }

/* ---------- Page ---------- */
.e8 .page { padding: 22px 28px 30px; }
.e8 .pg-head { display: flex; align-items: flex-start; gap: 24px; margin-bottom: 20px; }
.e8 .pg-head-l { flex: 1; min-width: 0; }
.e8 .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; font: 500 11px/16px 'Inter'; text-transform: uppercase; letter-spacing: .5px; color: var(--ink4); }
.e8 .eyebrow .dot { width: 3px; height: 3px; border-radius: 999px; background: var(--ink4); opacity: .5; }
.e8 .eyebrow .live { display: inline-flex; align-items: center; gap: 5px; color: #067647; }
.e8 .eyebrow .live::before { content:""; width: 6px; height: 6px; border-radius: 999px; background: #17b26a; box-shadow: 0 0 0 3px #d1fadf; }
.e8 .pg-head h1 { margin: 0 0 5px; font: 600 27px/34px 'Inter'; letter-spacing: -0.02em; }
.e8 .pg-head .sub { font: 400 14px/22px 'Inter'; color: var(--ink3); max-width: 760px; }
.e8 .pg-head .sub b { color: var(--ink2); font-weight: 500; }
.e8 .pg-head-r { display: flex; align-items: center; gap: 8px; flex: none; padding-top: 2px; }

/* ---------- Buttons ---------- */
.e8 .btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 8px; font: 500 13px/1 'Inter'; border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.e8 .btn svg { width: 15px; height: 15px; flex: none; }
.e8 .btn-pri { background: #1f242f; color: #fff; }
.e8 .btn-sec { background: var(--paper); color: var(--ink2); border-color: var(--line3); }
.e8 .btn-ai { background: #fff; color: #5925dc; border-color: #d6bbfb; }
.e8 .btn-sm { height: 30px; padding: 0 11px; font-size: 12px; border-radius: 7px; }

/* ---------- Badges / pills ---------- */
.e8 .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font: 500 11px/16px 'Inter'; border: 1px solid transparent; }
.e8 .badge.gray { background: var(--wash); color: var(--ink3); border-color: var(--line); }
.e8 .badge.green { background: #ecfdf3; color: #067647; border-color: #abefc6; }
.e8 .badge.amber { background: #fffaeb; color: #b54708; border-color: #fedf89; }
.e8 .badge.red { background: #fef3f2; color: #b42318; border-color: #fecdca; }
.e8 .badge.blue { background: #eff8ff; color: #175cd3; border-color: #b2ddff; }
.e8 .badge.violet { background: #f4f3ff; color: #5925dc; border-color: #d6bbfb; }
.e8 .badge .d { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

/* ---------- Stat cards ---------- */
.e8 .stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 20px; }
.e8 .stat { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 9px; }
.e8 .stat-top { display: flex; align-items: center; justify-content: space-between; }
.e8 .stat-icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; }
.e8 .stat-icon svg { width: 18px; height: 18px; }
.e8 .stat-icon.sky { background: #eff8ff; color: #0ba5ec; }
.e8 .stat-icon.violet { background: #f4f3ff; color: #6938ef; }
.e8 .stat-icon.fuchsia { background: #fdf4ff; color: #ba24d5; }
.e8 .stat-icon.orange { background: #fef6ee; color: #e04f16; }
.e8 .stat-icon.teal { background: #f0fdf9; color: #0e9384; }
.e8 .stat-trend { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; font: 500 11px/14px 'Inter'; }
.e8 .stat-trend svg { width: 11px; height: 11px; }
.e8 .stat-trend.up { background: #ecfdf3; color: #067647; }
.e8 .stat-trend.dn { background: #fef3f2; color: #b42318; }
.e8 .stat-trend.flat { background: var(--wash); color: var(--ink3); }
.e8 .stat-lbl { font: 400 13px/18px 'Inter'; color: var(--ink4); }
.e8 .stat-val { font: 600 27px/32px 'Inter'; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.e8 .stat-val small { font-size: 14px; color: var(--ink4); font-weight: 400; margin-left: 3px; }
.e8 .stat-foot { font: 400 12px/16px 'Inter'; color: var(--ink4); display: flex; align-items: center; gap: 6px; }
.e8 .stat-foot b { color: var(--ink2); font-weight: 500; }
.e8 .stat-foot .pip { width: 3px; height: 3px; border-radius: 999px; background: var(--ink4); opacity: .5; }

/* ---------- Generic card ---------- */
.e8 .card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.e8 .card-head { padding: 16px 20px 13px; display: flex; align-items: flex-start; gap: 12px; border-bottom: 1px solid var(--line2); }
.e8 .card-head-l { flex: 1; min-width: 0; }
.e8 .card-head h2 { margin: 0; font: 600 16px/22px 'Inter'; }
.e8 .card-head .sub { font: 400 12px/18px 'Inter'; color: var(--ink4); margin-top: 2px; }
.e8 .card-head-r { display: flex; align-items: center; gap: 8px; }
.e8 .card-body { padding: 18px 20px 20px; }
.e8 .card-link { font: 500 12px/16px 'Inter'; color: #175cd3; display: inline-flex; align-items: center; gap: 4px; }
.e8 .card-link svg { width: 12px; height: 12px; }

/* Pill tabs */
.e8 .pill-tabs { display: inline-flex; background: var(--wash); border-radius: 8px; padding: 3px; }
.e8 .pill-tab { border: none; background: transparent; padding: 5px 11px; border-radius: 6px; font: 500 12px/15px 'Inter'; color: var(--ink4); cursor: pointer; }
.e8 .pill-tab.active { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(16,24,40,.06); }

/* ---------- Gauge ---------- */
.e8 .gauge { position: relative; flex: none; }
.e8 .gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.e8 .gauge .track { fill: none; stroke: var(--wash2); }
.e8 .gauge .arc { fill: none; stroke-linecap: round; }
.e8 .gauge .arc.good { stroke: #17b26a; }
.e8 .gauge .arc.ok { stroke: #f79009; }
.e8 .gauge .arc.bad { stroke: #f04438; }
.e8 .gauge .num { position: absolute; inset: 0; display: grid; place-items: center; font: 600 15px/1 'Inter'; font-variant-numeric: tabular-nums; }
.e8 .gauge .num small { font-size: 9px; font-weight: 400; color: var(--ink4); }

/* ---------- Building-block strip ---------- */
.e8 .blocks { display: flex; gap: 4px; align-items: center; }
.e8 .blk { flex: 1; height: 6px; border-radius: 3px; background: var(--wash2); }
.e8 .blk.done { background: #17b26a; }
.e8 .blk.partial { background: #f79009; }
.e8 .blk.active { background: #7a5af8; }

/* ---------- OM / site portfolio card ---------- */
.e8 .portfolio { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; }
.e8 .om { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 15px; display: flex; flex-direction: column; gap: 11px; position: relative; }
.e8 .om.attention { border-color: #fec84b; background: linear-gradient(180deg,#fffaeb,#fff 60%); }
.e8 .om-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.e8 .om-title { font: 600 15px/20px 'Inter'; letter-spacing: -0.005em; }
.e8 .om-sub { margin-top: 3px; display: inline-flex; align-items: center; gap: 6px; font: 400 12px/16px 'Inter'; color: var(--ink4); }
.e8 .om-sub b { color: var(--ink2); font-weight: 500; }
.e8 .om-foot { display: flex; align-items: center; gap: 10px; font: 400 11px/14px 'Inter'; color: var(--ink4); }
.e8 .om-foot b { color: var(--ink2); font-weight: 500; }
.e8 .om-foot .pip { width: 3px; height: 3px; border-radius: 999px; background: var(--ink4); opacity: .5; }
.e8 .om-foot .trend { display: inline-flex; align-items: center; gap: 3px; }
.e8 .om-foot .trend svg { width: 10px; height: 10px; }
.e8 .om-foot .trend.up { color: #067647; }
.e8 .om-foot .trend.dn { color: #b42318; }

/* ---------- Layout grids ---------- */
.e8 .grid-2 { display: grid; grid-template-columns: 1fr 340px; gap: 18px; }
.e8 .grid-2w { display: grid; grid-template-columns: 1fr 300px; gap: 18px; }

/* ---------- Feed ---------- */
.e8 .feed-item { display: grid; grid-template-columns: 30px 1fr; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--line2); }
.e8 .feed-item:last-child { border-bottom: none; }
.e8 .feed-ic { width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line2); }
.e8 .feed-ic svg { width: 14px; height: 14px; }
.e8 .feed-ic.ai { background: linear-gradient(135deg,#6941c6,#2e90fa); color: #fff; border: none; }
.e8 .feed-ic.warn { background: #fef0c7; color: #b54708; border-color: #fde68a; }
.e8 .feed-ic.ok { background: #ecfdf3; color: #067647; border-color: #abefc6; }
.e8 .feed-msg { font: 400 13px/18px 'Inter'; color: var(--ink2); }
.e8 .feed-msg b { color: var(--ink); font-weight: 500; }
.e8 .feed-meta { font: 400 11px/14px 'Inter'; color: var(--ink4); margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.e8 .feed-meta .tag { padding: 1px 6px; border-radius: 4px; font: 500 10px/14px 'Inter'; background: var(--wash); border: 1px solid var(--line); color: var(--ink3); }
.e8 .feed-meta .tag.ai { background: #f4f3ff; color: #5925dc; border-color: #d6bbfb; }

/* =========================================================================
   Rollup matrix — locations × standards (or function × stage)
   ========================================================================= */
.e8 .matrix { width: 100%; border-collapse: separate; border-spacing: 3px; }
.e8 .matrix th { font: 500 10px/13px 'Inter'; color: var(--ink4); text-transform: uppercase; letter-spacing: .3px; padding: 4px 2px; vertical-align: bottom; text-align: center; }
.e8 .matrix th.rowh, .e8 .matrix td.rowh { text-align: left; font: 500 12px/15px 'Inter'; color: var(--ink); text-transform: none; letter-spacing: 0; white-space: nowrap; padding-right: 10px; }
.e8 .matrix td.rowh .reg { display: block; font: 400 10px/13px 'Inter'; color: var(--ink4); }
.e8 .cell { height: 34px; border-radius: 6px; display: grid; place-items: center; font: 600 11px/1 'Inter'; font-variant-numeric: tabular-nums; cursor: pointer; }
.e8 .cell.g3 { background: #d1fadf; color: #067647; }
.e8 .cell.g2 { background: #ecfdf3; color: #067647; }
.e8 .cell.y2 { background: #fef0c7; color: #b54708; }
.e8 .cell.y1 { background: #fffaeb; color: #b54708; }
.e8 .cell.r1 { background: #fee4e2; color: #b42318; }
.e8 .cell.na { background: var(--wash); color: var(--ink4); cursor: default; }
.e8 .cell.todo { background: var(--wash); border: 1px dashed var(--line3); color: var(--ink4); }
.e8 .cell.prog { background: repeating-linear-gradient(45deg,#eff8ff,#eff8ff 4px,#fff 4px,#fff 8px); color: #175cd3; border: 1px solid #b2ddff; }
.e8 .legend { margin-top: 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.e8 .legend .li { display: inline-flex; align-items: center; gap: 6px; font: 400 12px/16px 'Inter'; color: var(--ink3); }
.e8 .legend .sw { width: 15px; height: 15px; border-radius: 4px; }

/* =========================================================================
   Program builder
   ========================================================================= */
.e8 .builder { display: grid; grid-template-columns: 280px 1fr 300px; gap: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--paper); }
.e8 .bld-col { padding: 16px 18px; }
.e8 .bld-col + .bld-col { border-left: 1px solid var(--line); }
.e8 .bld-col.mid { background: var(--wash); }
.e8 .bld-h { font: 600 12px/16px 'Inter'; text-transform: uppercase; letter-spacing: .4px; color: var(--ink4); margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
.e8 .bld-h .ct { font: 500 11px/14px 'Inter'; color: var(--ink3); background: var(--wash); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; text-transform: none; letter-spacing: 0; }
.e8 .catitem { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; margin-bottom: 7px; background: var(--paper); }
.e8 .catitem.on { border-color: #b2ddff; background: #f5faff; }
.e8 .catitem .ck { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line3); display: grid; place-items: center; flex: none; color: #fff; }
.e8 .catitem.on .ck { background: #1570ef; border-color: #1570ef; }
.e8 .catitem .ck svg { width: 12px; height: 12px; }
.e8 .catitem .nm { font: 500 13px/16px 'Inter'; flex: 1; min-width: 0; }
.e8 .catitem .mt { font: 400 11px/14px 'Inter'; color: var(--ink4); }
.e8 .bld-assembly { display: flex; flex-direction: column; gap: 9px; }
.e8 .asm-line { display: flex; align-items: center; gap: 10px; padding: 11px 13px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
.e8 .asm-num { width: 22px; height: 22px; border-radius: 999px; background: #1f242f; color: #fff; font: 600 11px/1 'Inter'; display: grid; place-items: center; flex: none; }
.e8 .asm-body { flex: 1; min-width: 0; }
.e8 .asm-title { font: 600 13px/17px 'Inter'; }
.e8 .asm-meta { font: 400 11px/15px 'Inter'; color: var(--ink4); margin-top: 1px; }

/* =========================================================================
   Geo map hero
   ========================================================================= */
.e8 .geomap { position: relative; height: 380px; background:
    radial-gradient(120% 130% at 50% -10%, #f0f6ff 0%, #f9fafb 55%);
    border-radius: 12px; overflow: hidden; }
.e8 .geomap .continent { fill: #e7ecf3; stroke: #dde3ec; stroke-width: 1; }
.e8 .geo-pin { position: absolute; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; gap: 3px; }
.e8 .geo-dot { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; font: 600 11px/1 'Inter'; color: #fff; box-shadow: 0 2px 6px rgba(16,24,40,.22); border: 2px solid #fff; }
.e8 .geo-dot.good { background: #17b26a; }
.e8 .geo-dot.ok { background: #f79009; }
.e8 .geo-dot.bad { background: #f04438; }
.e8 .geo-lbl { font: 500 11px/14px 'Inter'; color: var(--ink2); background: rgba(255,255,255,.86); padding: 1px 6px; border-radius: 5px; white-space: nowrap; }
.e8 .geo-region { position: absolute; transform: translate(-50%,-50%); font: 600 11px/1 'Inter'; text-transform: uppercase; letter-spacing: .5px; color: var(--ink4); }

/* Region cluster board (alt to literal map) */
.e8 .regions { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.e8 .region { background: var(--wash); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.e8 .region-h { font: 600 12px/16px 'Inter'; text-transform: uppercase; letter-spacing: .4px; color: var(--ink3); margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
.e8 .site-chip { display: flex; align-items: center; gap: 10px; padding: 9px 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 9px; margin-bottom: 8px; }
.e8 .site-chip .nm { font: 500 13px/16px 'Inter'; flex: 1; }
.e8 .site-chip .pct { font: 600 12px/1 'Inter'; font-variant-numeric: tabular-nums; }

/* =========================================================================
   Stream lanes (Talison EOM / BOM / Quick wins) + BOM block journey
   ========================================================================= */
.e8 .streams { display: flex; flex-direction: column; gap: 12px; }
.e8 .stream { border: 1px solid var(--line); border-radius: 13px; overflow: hidden; background: var(--paper); }
.e8 .stream-h { display: flex; align-items: center; gap: 11px; padding: 13px 16px; border-bottom: 1px solid var(--line2); }
.e8 .stream-tag { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; color: #fff; font: 700 13px/1 'Inter'; flex: none; }
.e8 .stream-tag.eom { background: linear-gradient(135deg,#7a5af8,#5925dc); }
.e8 .stream-tag.bom { background: linear-gradient(135deg,#2e90fa,#175cd3); }
.e8 .stream-tag.qw { background: linear-gradient(135deg,#17b26a,#067647); }
.e8 .stream-h .ti { font: 600 15px/19px 'Inter'; }
.e8 .stream-h .de { font: 400 12px/16px 'Inter'; color: var(--ink4); margin-top: 1px; }
.e8 .stream-body { padding: 13px 16px; }

/* Gantt-ish week grid for BOM blocks */
.e8 .gantt { display: grid; gap: 6px; }
.e8 .gantt-head { display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: center; }
.e8 .gantt-weeks { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; }
.e8 .gantt-week { font: 500 9.5px/13px 'Inter'; color: var(--ink4); text-align: center; padding: 2px 0; background: var(--wash); border-radius: 4px; }
.e8 .gantt-row { display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: center; }
.e8 .gantt-lbl { font: 500 12px/15px 'Inter'; display: flex; align-items: center; gap: 7px; }
.e8 .gantt-lbl .gd { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.e8 .gantt-track { position: relative; height: 26px; background: var(--wash); border-radius: 6px; }
.e8 .gantt-bar { position: absolute; top: 3px; bottom: 3px; border-radius: 5px; display: flex; align-items: center; padding: 0 8px; font: 500 10px/1 'Inter'; color: #fff; overflow: hidden; }

/* BOM block journey (6-week, staged) */
.e8 .journey { display: grid; grid-template-columns: repeat(5,1fr); gap: 0; }
.e8 .jstage { position: relative; padding: 0 6px; }
.e8 .jstage .cap { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.e8 .jnode { width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center; border: 2px solid var(--line3); background: #fff; color: var(--ink4); position: relative; z-index: 2; }
.e8 .jnode svg { width: 18px; height: 18px; }
.e8 .jstage.done .jnode { background: #ecfdf3; border-color: #17b26a; color: #067647; }
.e8 .jstage.active .jnode { background: #1f242f; border-color: #1f242f; color: #fff; }
.e8 .jstage::before { content:""; position: absolute; top: 21px; left: -50%; width: 100%; height: 2px; background: var(--line); z-index: 1; }
.e8 .jstage:first-child::before { display: none; }
.e8 .jstage.done::before, .e8 .jstage.active::before { background: #17b26a; }
.e8 .jstage .jt { font: 600 12px/15px 'Inter'; }
.e8 .jstage .jd { font: 400 10.5px/14px 'Inter'; color: var(--ink4); }
.e8 .jstage .jwk { font: 500 10px/13px 'Inter'; color: var(--ink4); background: var(--wash); border-radius: 999px; padding: 1px 7px; }

/* =========================================================================
   Quiet "rest of the OS" rail
   ========================================================================= */
.e8 .osrail { border: 1px dashed var(--line3); border-radius: 12px; padding: 14px 16px; background: var(--wash); }
.e8 .osrail-h { font: 500 11px/15px 'Inter'; text-transform: uppercase; letter-spacing: .4px; color: var(--ink4); margin-bottom: 11px; display: flex; align-items: center; gap: 7px; }
.e8 .osspine { display: flex; align-items: center; gap: 5px; }
.e8 .osstop { flex: 1; text-align: center; padding: 7px 4px; border-radius: 8px; font: 500 11px/14px 'Inter'; position: relative; }
.e8 .osstop.on { background: #eef4ff; color: #175cd3; border: 1px solid #b2ddff; font-weight: 600; }
.e8 .osstop.off { color: var(--ink4); border: 1px dashed var(--line3); }
.e8 .osstop.off .lk { font-size: 9px; }
.e8 .osspine .arr { color: var(--line3); font-size: 12px; flex: none; }
.e8 .osrail-foot { margin-top: 10px; font: 400 12px/17px 'Inter'; color: var(--ink4); }
.e8 .osrail-foot a { color: #175cd3; font-weight: 500; }

/* ---------- Assessment runtime ---------- */
.e8 .asmt-q { padding: 13px 16px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 9px; background: var(--paper); }
.e8 .asmt-q.flag { border-color: #fecdca; background: #fffbfa; }
.e8 .asmt-qtop { display: flex; align-items: flex-start; gap: 10px; }
.e8 .asmt-qn { font: 600 11px/16px 'Inter'; color: var(--ink4); flex: none; }
.e8 .asmt-qt { font: 500 13px/19px 'Inter'; flex: 1; }
.e8 .asmt-opts { display: flex; gap: 7px; margin-top: 11px; padding-left: 26px; }
.e8 .opt { padding: 6px 13px; border-radius: 7px; border: 1px solid var(--line3); font: 500 12px/1 'Inter'; color: var(--ink3); }
.e8 .opt.sel.yes { background: #ecfdf3; border-color: #17b26a; color: #067647; }
.e8 .opt.sel.partial { background: #fffaeb; border-color: #f79009; color: #b54708; }
.e8 .opt.sel.no { background: #fef3f2; border-color: #f04438; color: #b42318; }
.e8 .asmt-note { margin-top: 9px; margin-left: 26px; font: 400 12px/17px 'Inter'; color: var(--ink3); background: var(--wash); border-radius: 7px; padding: 8px 11px; }
.e8 .asmt-note .ai-tag { display: inline-flex; align-items: center; gap: 4px; font: 600 10px/14px 'Inter'; color: #5925dc; margin-right: 6px; }

/* progress rail for assessment */
.e8 .arail { display: flex; flex-direction: column; gap: 3px; }
.e8 .arail-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; font: 500 12px/16px 'Inter'; color: var(--ink3); }
.e8 .arail-item.on { background: #eff8ff; color: #175cd3; }
.e8 .arail-item .rn { width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid var(--line3); display: grid; place-items: center; font-size: 10px; flex: none; }
.e8 .arail-item.done .rn { background: #17b26a; border-color: #17b26a; color: #fff; }
.e8 .arail-item.on .rn { border-color: #175cd3; color: #175cd3; }

/* small helper */
.e8 .muted { color: var(--ink4); }
/* safety net: stray icons in contexts without an explicit size rule */
.e8 .badge svg { width: 12px; height: 12px; flex: none; }
.e8 .osrail-h svg { width: 14px; height: 14px; flex: none; }
.e8 .mono { font-family: ui-monospace, monospace; }
.e8 .hr { height: 1px; background: var(--line2); margin: 14px 0; border: 0; }

/* AI summary banner (top of every screen) */
.e8 .aisum { display: flex; align-items: center; gap: 13px; padding: 12px 16px; margin-bottom: 18px; border: 1px solid #e0e3ff; border-radius: 12px; background: linear-gradient(90deg, #f6f4ff, #eff6ff); }
.e8 .aisum-ic { width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, #6941c6, #2e90fa); display: grid; place-items: center; flex: none; }
.e8 .aisum-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.e8 .aisum-text { font: 500 13px/19px 'Inter'; color: var(--ink2); }
.e8 .aisum-text b { color: var(--ink); font-weight: 600; }
.e8 .aisum-do { font: 500 12px/17px 'Inter'; color: #5925dc; }
.e8 .aisum-do b { color: #5925dc; font-weight: 700; }
.e8 .aisum-tag { font: 600 10px/14px 'Inter'; letter-spacing: .4px; text-transform: uppercase; color: #5925dc; background: #fff; border: 1px solid #d6bbfb; border-radius: 999px; padding: 3px 9px; flex: none; }

/* =========================================================================
   Control room — AI chat, toggles, registry
   ========================================================================= */
.e8 .tgl { width: 38px; height: 22px; border-radius: 999px; background: var(--line3); position: relative; flex: none; cursor: pointer; transition: background .15s; }
.e8 .tgl.on { background: #17b26a; }
.e8 .tgl::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 999px; background: #fff; transition: left .15s; }
.e8 .tgl.on::after { left: 18px; }
.e8 .tglrow { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line2); }
.e8 .tglrow:last-child { border-bottom: none; }
.e8 .tglrow .tt { font: 600 13px/17px 'Inter'; }
.e8 .tglrow .td { font: 400 11px/15px 'Inter'; color: var(--ink4); }

.e8 .cmd { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border: 1px solid var(--line3); border-radius: 999px; font: 500 12px/1 'Inter'; color: var(--ink2); background: #fff; }
.e8 .cmd svg { color: #5925dc; }
.e8 .filechip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 7px; background: rgba(255,255,255,.14); font: 500 11px/1 'Inter'; margin-top: 7px; }
.e8 .chat-msg.me .filechip { background: rgba(255,255,255,.16); }

/* registry status cells */
.e8 .st { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font: 500 11px/15px 'Inter'; border: 1px solid transparent; white-space: nowrap; }
.e8 .st .d { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.e8 .st.none { background: var(--wash); color: var(--ink4); border-style: dashed; border-color: var(--line3); }
.e8 .st.draft { background: #f4f3ff; color: #5925dc; border-color: #d6bbfb; }
.e8 .st.issued { background: #eff8ff; color: #175cd3; border-color: #b2ddff; }
.e8 .st.prog { background: #fffaeb; color: #b54708; border-color: #fedf89; }
.e8 .st.partial { background: #fff6ed; color: #c4320a; border-color: #f9dbaf; }
.e8 .st.submitted { background: #f0f9ff; color: #0e7090; border-color: #b9e6fe; }
.e8 .st.reviewed { background: #ecfdf3; color: #067647; border-color: #abefc6; }

/* =========================================================================
   Setup wizard (Onwards delivery flow)
   ========================================================================= */
.e8.wzscr { grid-template-columns: 272px 1fr; }
.e8 .wz-rail { background: var(--paper); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 18px 16px; }
.e8 .wz-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.e8 .wz-brand .lg { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg,#84caff,#2e90fa); display: grid; place-items: center; color: #fff; font: 700 12px/1 'Inter'; }
.e8 .wz-brand .nm { font: 600 14px/18px 'Inter'; }
.e8 .wz-ttl { font: 600 12px/16px 'Inter'; color: var(--ink4); text-transform: uppercase; letter-spacing: .4px; margin: 16px 0 6px; }
.e8 .wz-sub { font: 400 12px/16px 'Inter'; color: var(--ink4); margin-bottom: 14px; }
.e8 .wz-progwrap { height: 6px; background: var(--wash2); border-radius: 3px; overflow: hidden; margin-bottom: 16px; }
.e8 .wz-prog { height: 100%; background: linear-gradient(90deg,#2e90fa,#175cd3); border-radius: 3px; }
.e8 .wz-steps { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.e8 .wz-step { display: flex; align-items: flex-start; gap: 11px; padding: 9px 10px; border-radius: 9px; }
.e8 .wz-step.on { background: #eff8ff; }
.e8 .wz-step .sn { width: 22px; height: 22px; 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 .wz-step.done .sn { background: #17b26a; border-color: #17b26a; color: #fff; }
.e8 .wz-step.on .sn { background: #175cd3; border-color: #175cd3; color: #fff; }
.e8 .wz-step .sl { font: 500 13px/16px 'Inter'; color: var(--ink2); }
.e8 .wz-step.on .sl { color: #175cd3; font-weight: 600; }
.e8 .wz-step .sd { font: 400 11px/14px 'Inter'; color: var(--ink4); margin-top: 2px; }
.e8 .wz-foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line2); font: 500 12px/16px 'Inter'; color: var(--ink4); display: flex; align-items: center; gap: 7px; }

/* Chat / AI-load */
.e8 .chat { display: flex; flex-direction: column; gap: 14px; }
.e8 .chat-msg { display: flex; gap: 10px; align-items: flex-start; }
.e8 .chat-msg.me { flex-direction: row-reverse; }
.e8 .chat-av { width: 30px; height: 30px; border-radius: 999px; flex: none; display: grid; place-items: center; overflow: hidden; }
.e8 .chat-av.ai { background: linear-gradient(135deg,#6941c6,#2e90fa); color: #fff; }
.e8 .chat-av img { width: 100%; height: 100%; }
.e8 .chat-bub { max-width: 78%; padding: 11px 14px; border-radius: 12px; background: var(--wash); font: 400 13px/19px 'Inter'; color: var(--ink2); }
.e8 .chat-msg.me .chat-bub { background: #1f242f; color: #fff; }
.e8 .chat-input { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 11px 14px; border: 1px solid var(--line3); border-radius: 11px; color: var(--ink4); font: 400 13px/1 'Inter'; }

/* Upload list */
.e8 .up-row { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; }
.e8 .up-ic { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; flex: none; font: 700 9px/1 'Inter'; color: #fff; letter-spacing: .3px; }
.e8 .up-ic.xls { background: #079455; } .e8 .up-ic.doc { background: #1570ef; } .e8 .up-ic.pdf { background: #d92d20; }
.e8 .up-name { font: 600 13px/17px 'Inter'; }
.e8 .up-meta { font: 400 11px/14px 'Inter'; color: var(--ink4); }

/* Critical (safety) marker */
.e8 .crit { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; background: #fef3f2; border: 1px solid #fecdca; color: #b42318; font: 600 11px/16px 'Inter'; }
.e8 .crit .d { width: 7px; height: 7px; border-radius: 999px; background: #f04438; }
.e8 .critrow { border-color: #fecdca !important; background: #fffbfa; }

/* Generic data table */
.e8 .gtable { width: 100%; border-collapse: collapse; }
.e8 .gtable th { text-align: left; font: 500 11px/16px 'Inter'; color: var(--ink4); text-transform: uppercase; letter-spacing: .3px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.e8 .gtable td { padding: 11px 12px; border-bottom: 1px solid var(--line2); font: 400 13px/18px 'Inter'; color: var(--ink2); vertical-align: middle; }
.e8 .gtable tr:last-child td { border-bottom: none; }
.e8 .gtable td b { font-weight: 600; color: var(--ink); }
.e8 .av-sm { width: 24px; height: 24px; border-radius: 999px; overflow: hidden; display: inline-block; vertical-align: middle; box-shadow: 0 0 0 1px var(--line); }
.e8 .av-sm img { width: 100%; height: 100%; }
.e8 .av-row { display: flex; align-items: center; }
.e8 .av-row .av-sm { margin-left: -6px; border: 2px solid #fff; }
.e8 .av-row .av-sm:first-child { margin-left: 0; }
.e8 .av-add { width: 24px; height: 24px; border-radius: 999px; border: 1px dashed var(--line3); display: grid; place-items: center; color: var(--ink4); margin-left: -6px; background: #fff; }

/* Email preview */
.e8 .email { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.e8 .email-bar { padding: 10px 14px; background: var(--wash); border-bottom: 1px solid var(--line); font: 400 12px/16px 'Inter'; color: var(--ink4); }
.e8 .email-bar b { color: var(--ink2); font-weight: 500; }
.e8 .email-body { padding: 20px 22px; }
.e8 .email-logo { width: 34px; height: 34px; border-radius: 8px; background: linear-gradient(135deg,#84caff,#2e90fa); display: grid; place-items: center; color: #fff; font: 700 13px/1 'Inter'; margin-bottom: 14px; }
.e8 .email-btn { display: inline-block; padding: 10px 18px; background: #1f242f; color: #fff; border-radius: 8px; font: 600 13px/1 'Inter'; margin-top: 8px; }

/* Wave/release option */
.e8 .relopt { display: flex; gap: 12px; }
.e8 .reltile { flex: 1; border: 1px solid var(--line3); border-radius: 11px; padding: 15px; cursor: pointer; }
.e8 .reltile.on { border-color: #175cd3; background: #f5faff; box-shadow: 0 0 0 1px #175cd3 inset; }
.e8 .reltile .rt { font: 600 14px/18px 'Inter'; }
.e8 .reltile .rd { font: 400 12px/17px 'Inter'; color: var(--ink4); margin-top: 3px; }

/* Guide / training card */
.e8 .guide { border: 1px solid var(--line); border-radius: 11px; padding: 14px; display: flex; flex-direction: column; gap: 9px; }
.e8 .guide-ic { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; }
.e8 .guide-t { font: 600 13px/17px 'Inter'; }
.e8 .guide-m { font: 400 11px/15px 'Inter'; color: var(--ink4); }