/* ═══════════════════════════════════════════════════════════════════════════
   TSCWORLD AI™ — Dashboard Components  (โหลดต่อจาก app.css + ui.css)
   chart · map · scorecard · task table · timeline
   Blueprint ref: เล่ม 06 Executive Command Center · เล่ม 07 AI Operations Center
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   1. TOPBAR SEARCH
   ───────────────────────────────────────────────────────────── */
.gsearch{position:relative;display:flex;align-items:center;flex:0 1 380px;margin-inline:auto}
.gsearch svg{position:absolute;left:14px;color:var(--tx-3);pointer-events:none}
.gsearch input{width:100%;height:42px;padding:0 58px 0 40px;border-radius:12px;
  border:1px solid var(--line);background:var(--bg-input);color:var(--tx);font-size:14px;
  transition:border-color .2s,box-shadow .2s}
.gsearch input::placeholder{color:var(--tx-4)}
.gsearch input:focus{outline:none;border-color:var(--line-hot);box-shadow:0 0 0 3px rgba(46,139,255,.14)}
.gsearch kbd{position:absolute;right:11px;padding:3px 8px;border-radius:6px;font:600 11px/1 inherit;
  color:var(--tx-4);border:1px solid var(--line);background:var(--bg-tile)}

/* ─────────────────────────────────────────────────────────────
   2. PAGE HEAD
   ───────────────────────────────────────────────────────────── */
.eyebrow2{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;
  letter-spacing:1.4px;color:var(--blue-hi);margin-bottom:6px}
.ptitle--row{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.chip--live{display:inline-flex;align-items:center;gap:7px;padding:4px 12px;border-radius:999px;
  font-size:11px;font-weight:700;color:#BEDCFF;background:rgba(46,139,255,.16);border:1px solid rgba(77,163,255,.3)}
.chip--rt{color:#9DEBC4;background:rgba(46,212,122,.13);border-color:rgba(46,212,122,.28)}
.ctlrow{display:flex;align-items:center;gap:11px;flex-wrap:wrap;justify-content:flex-end;margin:-8px 0 20px}
.daterange{display:flex;align-items:center;gap:9px;height:40px;padding:0 14px;border-radius:11px;
  font-size:13px;color:var(--tx-2);border:1px solid var(--line);background:var(--bg-tile)}
.daterange:hover{border-color:var(--line-hot);color:var(--tx)}
.livepill{display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:11px;
  font-size:13px;font-weight:600;color:var(--up);border:1px solid rgba(46,212,122,.26);background:rgba(46,212,122,.08)}

/* ─────────────────────────────────────────────────────────────
   3. KPI VARIANTS
   ───────────────────────────────────────────────────────────── */
.kpis--6{grid-template-columns:repeat(6,1fr)}
.kpis--7{grid-template-columns:repeat(7,1fr)}
.kpi--col{flex-direction:column;align-items:stretch;gap:0;padding:16px 17px}
.kpi--col .kpi__k{margin:0 0 10px;font-size:12px;color:var(--tx-3);font-weight:500}
.kpi__row{display:flex;align-items:center;gap:12px}
.kpi__num{font-size:23px;font-weight:800;letter-spacing:-.6px;font-variant-numeric:tabular-nums;line-height:1.1}
.kpi__num--sm{font-size:19px}
.kpi__spark{margin-top:12px;width:100%;height:26px}
.kpi__gauge{width:52px;height:52px;flex-shrink:0}
.kpi__gauge text{font-size:15px;font-weight:800;fill:var(--tx)}

/* ─────────────────────────────────────────────────────────────
   4. PANEL + CHART SHELL
   ───────────────────────────────────────────────────────────── */
.pnl{padding:18px}
.pnl__hd{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.pnl__t{font-size:16.5px;font-weight:800;letter-spacing:-.3px}
.pnl__s{font-size:12px;color:var(--tx-3);margin-top:3px}
.pnl__a{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--blue-hi)}
.pnl__a:hover{text-decoration:underline}

.seg{display:flex;gap:2px;padding:3px;border-radius:10px;border:1px solid var(--line-soft);background:var(--bg-tile)}
.seg button{padding:6px 14px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--tx-3);transition:all .2s}
.seg button:hover{color:var(--tx)}
.seg button.on{color:#fff;background:linear-gradient(135deg,#3B92FF,#1C63D6)}

.chart2{width:100%;height:auto;display:block;overflow:visible}
.gridln{stroke:var(--line-soft);stroke-width:1}
.axlbl{font-size:10px;fill:var(--tx-4)}

/* tooltip chip inside charts */
.ttip{fill:rgba(10,20,42,.96);stroke:rgba(77,163,255,.34);stroke-width:1}
.ttip-t{font-size:9.5px;fill:var(--tx-3)}
.ttip-v{font-size:11px;font-weight:800;fill:#EAF2FF}
.ttip-d{font-size:9px;font-weight:700;fill:#2ED47A}

/* ─────────────────────────────────────────────────────────────
   5. DONUT + LEGEND
   ───────────────────────────────────────────────────────────── */
.dpair{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.dpair svg{width:168px;height:168px;flex-shrink:0}
.dcore-v{font-size:13px;font-weight:800;fill:#EAF2FF}
.dcore-v--xl{font-size:22px}
.dcore-k{font-size:8px;fill:var(--tx-3)}
.lgd{flex:1;min-width:170px;display:grid;gap:9px}
.lgd li{display:flex;align-items:center;gap:9px;font-size:12px}
.lgd i{width:9px;height:9px;border-radius:3px;flex-shrink:0;background:var(--c,#3B8CFF)}
.lgd b{flex:1;font-weight:500;color:var(--tx-2)}
.lgd span{color:var(--tx-3);font-variant-numeric:tabular-nums}
.lgd em{font-style:normal;font-weight:700;color:var(--tx);font-variant-numeric:tabular-nums;min-width:62px;text-align:right}

/* ─────────────────────────────────────────────────────────────
   6. MAP PANEL
   ───────────────────────────────────────────────────────────── */
.mapbox{position:relative;border-radius:12px;overflow:hidden;background:
  radial-gradient(120% 100% at 50% 0%,rgba(23,58,120,.5),rgba(8,16,34,.7));border:1px solid var(--line-soft)}
.mapbox svg{width:100%;height:auto;display:block}
.mapzoom{position:absolute;top:11px;right:11px;display:grid;gap:5px}
.mapzoom button{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  color:var(--tx-2);border:1px solid var(--line);background:rgba(8,16,34,.8);transition:all .2s}
.mapzoom button:hover{color:#fff;border-color:var(--line-hot)}
.pin{transform-box:fill-box;transform-origin:center}
.pin circle.halo{animation:ping 2.6s ease-out infinite}
@keyframes ping{0%{r:4;opacity:.85}70%{r:13;opacity:0}100%{opacity:0}}

.geo{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft)}
.geo--6{grid-template-columns:repeat(6,1fr)}
.geo__i{padding:0 12px;border-right:1px solid var(--line-soft)}
.geo__i:last-child{border-right:0}
.geo__n{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--tx-2)}
.geo__n i{width:7px;height:7px;border-radius:50%;background:var(--c,#2ED47A);flex-shrink:0}
.geo__v{font-size:18px;font-weight:800;margin-top:4px;font-variant-numeric:tabular-nums}
.geo__s{font-size:10.5px;color:var(--tx-4)}

/* ─────────────────────────────────────────────────────────────
   7. INSIGHT / ALERT / APPROVAL ROWS
   ───────────────────────────────────────────────────────────── */
.rows{display:grid;gap:10px}
.row2{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:12px;
  border:1px solid var(--line-soft);background:var(--bg-tile);transition:all .22s var(--ease)}
.row2:hover{border-color:var(--line-hot);background:var(--bg-hover);transform:translateX(3px)}
.row2__tx{flex:1;min-width:0}
.row2__t{font-size:13px;font-weight:700;line-height:1.35}
.row2__s{font-size:11.5px;color:var(--tx-3);margin-top:3px;line-height:1.45}
.row2__r{flex-shrink:0;text-align:right;font-size:11.5px;color:var(--tx-3)}
.tagx{padding:3px 10px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.3px;white-space:nowrap;
  color:var(--tone,var(--blue-hi));
  background:color-mix(in srgb,var(--tone,#3B8CFF) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--tone,#3B8CFF) 30%,transparent)}
.tag-pos{--tone:#2ED47A} .tag-warn{--tone:#FBBF24} .tag-ins{--tone:#8B7CFF}
.tag-op{--tone:#38BDF8}  .tag-risk{--tone:#FB7185}
.tag-high{--tone:#FB7185} .tag-med{--tone:#FBBF24} .tag-low{--tone:#38BDF8} .tag-ok{--tone:#2ED47A}

/* ─────────────────────────────────────────────────────────────
   8. RADAR / SCORECARD
   ───────────────────────────────────────────────────────────── */
.radar{width:100%;height:auto;display:block}
.radar-web{stroke:rgba(84,133,213,.28);fill:none;stroke-width:1}
.radar-ax{stroke:rgba(84,133,213,.22);stroke-width:1}
.radar-fill{fill:rgba(46,139,255,.28);stroke:#5AAEFF;stroke-width:2}
.radar-dot{fill:#EAF2FF}
.radar-lbl{font-size:9px;fill:var(--tx-3)}
.radar-val{font-size:9.5px;font-weight:800;fill:#CFE3FF}
.radar-core{font-size:19px;font-weight:800;fill:#EAF2FF}
.radar-sub{font-size:8.5px;fill:var(--tx-3)}

/* ─────────────────────────────────────────────────────────────
   9. HEALTH ROWS
   ───────────────────────────────────────────────────────────── */
.hrow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.hrow:last-of-type{border-bottom:0}
.hrow__tx{flex:1;min-width:0}
.hrow__k{font-size:11.5px;color:var(--tx-3)}
.hrow__v{font-size:14.5px;font-weight:800;margin-top:2px}

/* ─────────────────────────────────────────────────────────────
   10. ACTIVITY CARDS + QUICK ACTIONS
   ───────────────────────────────────────────────────────────── */
.acts{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.act{padding:14px;border-radius:13px;border:1px solid var(--line-soft);background:var(--bg-tile);
  transition:all .22s var(--ease)}
.act:hover{border-color:var(--line-hot);transform:translateY(-3px)}
.act__hd{display:flex;align-items:center;gap:10px}
.act__t{font-size:12.8px;font-weight:700;line-height:1.3}
.act__s{font-size:11.5px;color:var(--tx-3);margin-top:6px;line-height:1.4}
.act__w{font-size:11px;color:var(--tx-4);margin-top:9px}

.qa{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.qa--5{grid-template-columns:repeat(5,1fr)}
.qa__i{display:flex;flex-direction:column;align-items:center;gap:11px;padding:17px 9px;border-radius:14px;
  border:1px solid var(--line-soft);background:var(--bg-tile);transition:all .22s var(--ease)}
.qa__i:hover{border-color:var(--line-hot);transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(12,60,140,.3)}
.qa__i .tile{width:52px;height:52px;border-radius:15px}
.qa__n{font-size:12.5px;font-weight:600;text-align:center;line-height:1.3}

/* ─────────────────────────────────────────────────────────────
   11. OBJECTIVES + RATIOS
   ───────────────────────────────────────────────────────────── */
.obj{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.obj:last-child{border-bottom:0}
.obj__tx{flex:1;min-width:0}
.obj__t{font-size:12.8px;font-weight:700}
.obj__s{font-size:10.5px;color:var(--tx-4);margin-top:2px}
.obj__bar{height:5px;border-radius:99px;background:var(--bg-tile);overflow:hidden;margin-top:7px}
.obj__fill{height:100%;border-radius:99px;width:0;transition:width 1.1s var(--ease);
  background:linear-gradient(90deg,var(--tone,#3B8CFF),color-mix(in srgb,var(--tone,#3B8CFF) 50%,#5AAEFF))}
.obj__p{font-size:12px;font-weight:800;min-width:38px;text-align:right;font-variant-numeric:tabular-nums}

.ratio{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9.5px 0;
  border-bottom:1px solid var(--line-soft);font-size:12.8px}
.ratio:last-child{border-bottom:0}
.ratio__k{color:var(--tx-3)}
.ratio__v{display:flex;align-items:center;gap:11px}
.ratio__n{font-weight:800;font-variant-numeric:tabular-nums}
.ratio__d{font-size:11px;font-weight:700;min-width:44px;text-align:right}

/* ─────────────────────────────────────────────────────────────
   12. DATA TABLE (compact)
   ───────────────────────────────────────────────────────────── */
.dt{width:100%;border-collapse:collapse;font-size:12.5px}
.dt th,.dt td{padding:10px 11px;text-align:left;border-bottom:1px solid var(--line-soft);white-space:nowrap}
.dt thead th{font-size:11px;font-weight:700;color:var(--tx-4);letter-spacing:.3px}
.dt tbody tr:hover{background:var(--bg-hover)}
.dt tbody tr:last-child td,.dt tbody tr:last-child th{border-bottom:0}
.dt .num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.dt__wrap{overflow-x:auto}

/* ─────────────────────────────────────────────────────────────
   13. MEETINGS + DOCUMENTS
   ───────────────────────────────────────────────────────────── */
.meets{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.meet{display:flex;gap:14px;padding:15px;border-radius:13px;border:1px solid var(--line-soft);
  background:var(--bg-tile);transition:all .22s var(--ease)}
.meet:hover{border-color:var(--line-hot);transform:translateY(-3px)}
.meet__d{text-align:center;flex-shrink:0}
.meet__dd{font-size:24px;font-weight:800;line-height:1;color:var(--blue-hi)}
.meet__dm{font-size:10.5px;color:var(--tx-3);margin-top:3px}
.meet__t{font-size:13px;font-weight:700;line-height:1.3}
.meet__s{font-size:11.5px;color:var(--tx-3);margin-top:4px}
.meet__l{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--tx-4);margin-top:7px}
.meet__in{display:inline-block;margin-top:9px;padding:3px 9px;border-radius:999px;font-size:10.5px;font-weight:700;
  color:var(--blue-hi);background:rgba(46,139,255,.13);border:1px solid rgba(77,163,255,.24)}

.docs4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.doc{display:flex;align-items:center;gap:12px;padding:14px;border-radius:13px;
  border:1px solid var(--line-soft);background:var(--bg-tile);transition:all .22s var(--ease)}
.doc:hover{border-color:var(--line-hot);transform:translateY(-3px)}
.doc__t{font-size:12.5px;font-weight:700;line-height:1.3}
.doc__s{font-size:11px;color:var(--tx-4);margin-top:5px}

/* ─────────────────────────────────────────────────────────────
   14. COMPANY COMPARISON
   ───────────────────────────────────────────────────────────── */
.peers{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:18px}
.peer{position:relative;display:flex;align-items:flex-start;gap:12px;padding:15px 14px;border-radius:14px;
  border:1.5px solid var(--line-soft);background:var(--bg-tile);text-align:left;transition:all .22s var(--ease)}
.peer:hover{border-color:var(--line-hot);transform:translateY(-3px)}
.peer[aria-checked="true"]{border-color:color-mix(in srgb,var(--tone,#3B8CFF) 55%,transparent);
  background:color-mix(in srgb,var(--tone,#3B8CFF) 8%,transparent)}
.peer__mk{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;
  font-size:13px;font-weight:800;letter-spacing:-.3px;color:#fff;
  background:linear-gradient(135deg,var(--tone,#3B8CFF),color-mix(in srgb,var(--tone,#3B8CFF) 55%,#0A1830))}
.peer__n{font-size:13.5px;font-weight:800}
.peer__s{font-size:11px;color:var(--tx-3);margin-top:3px;line-height:1.35}
.peer__c{display:inline-block;margin-top:8px;padding:2.5px 9px;border-radius:999px;font-size:10px;font-weight:700;
  color:var(--tx-3);background:var(--bg-card);border:1px solid var(--line-soft)}
.peer__box{position:absolute;top:12px;right:12px;width:19px;height:19px;border-radius:5px;display:grid;place-items:center;
  color:transparent;border:1.5px solid var(--line);background:var(--bg-card)}
.peer[aria-checked="true"] .peer__box{color:#04101F;border-color:transparent;background:var(--tone,#3B8CFF)}

.kpo{display:grid;grid-template-columns:repeat(7,1fr)}
.kpo__i{padding:15px;border-right:1px solid var(--line-soft)}
.kpo__i:last-child{border-right:0}
.kpo__k{font-size:11.5px;color:var(--tx-3);margin-top:11px}
.kpo__v{font-size:20px;font-weight:800;letter-spacing:-.5px;margin-top:5px;font-variant-numeric:tabular-nums}
.kpo__r{font-size:11px;font-weight:700;color:var(--up);margin-top:5px}

.cmp td.self,.cmp th.self{background:rgba(46,139,255,.08)}
.cmp thead th.self{border-top:2px solid var(--blue);border-radius:8px 8px 0 0}
.best{color:#2ED47A;font-weight:800}
.above{color:#5AAEFF;font-weight:700}
.avgv{color:var(--tx-2)}
.below{color:#FBBF24;font-weight:700}
.needs{color:#FB7185;font-weight:700}
.keylgd{display:flex;gap:20px;flex-wrap:wrap;padding:14px 4px 2px;font-size:12px;color:var(--tx-3)}
.keylgd span{display:flex;align-items:center;gap:8px}
.keylgd i{width:8px;height:8px;border-radius:50%;background:var(--c)}

.strength{display:grid;gap:11px}
.strength li{display:grid;grid-template-columns:76px 1fr 54px;align-items:center;gap:11px;font-size:12px}
.strength b{font-weight:500;color:var(--tx-3)}
.strength span{text-align:right;color:var(--tx-2);font-variant-numeric:tabular-nums}
.sbar{height:6px;border-radius:99px;background:var(--bg-tile);overflow:hidden}
.sbar i{display:block;height:100%;border-radius:99px;width:0;transition:width 1.1s var(--ease);
  background:linear-gradient(90deg,#8B7CFF,#5AAEFF)}

.srcbar{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:18px;padding:14px 18px;
  border-radius:var(--r-lg);border:1px solid var(--line);background:var(--bg-card);
  font-size:12px;color:var(--tx-3)}
.srcbar b{color:var(--tx-2);font-weight:600}

/* ─────────────────────────────────────────────────────────────
   15. AI NETWORK MAP
   ───────────────────────────────────────────────────────────── */
.netwrap{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line-soft);
  background:radial-gradient(circle at 50% 48%,rgba(30,72,150,.42),rgba(6,12,26,.9) 68%)}
.netwrap svg{width:100%;height:auto;display:block}
.nlbl{font-size:11px;font-weight:800}
.nsub{font-size:8.5px;fill:var(--tx-3)}
.ncore-a{font-size:13px;font-weight:800;fill:#8FC7FF}
.ncore-b{font-size:34px;font-weight:800;fill:#EAF2FF}
.ncore-c{font-size:10px;font-weight:700;fill:#7FB6EE;letter-spacing:1px}
.netlgd{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line-soft);font-size:11.5px;color:var(--tx-3)}
.netlgd span{display:flex;align-items:center;gap:9px}
.netlgd i{width:26px;height:0;border-top:2px solid var(--c);flex-shrink:0}
.netlgd i.dash{border-top-style:dashed;border-top-width:1.5px}

.wload{display:grid;gap:12px}
.wload li{display:grid;grid-template-columns:132px 1fr 38px;align-items:center;gap:11px;font-size:12px}
.wload b{font-weight:500;color:var(--tx-2)}
.wload span{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}

.impact{display:flex;align-items:center;gap:11px;padding:9px 5px;border-radius:10px;transition:background .2s}
.impact:hover{background:var(--bg-hover)}
.impact__i{width:15px;font-size:11.5px;font-weight:800;color:var(--tx-4);flex-shrink:0}
.impact__n{flex:1;min-width:0;font-size:12.8px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.impact__v{font-size:12.8px;font-weight:800;font-variant-numeric:tabular-nums}

.health4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;text-align:center}
.health4 .hz__k{font-size:10.5px}
.health4 .hz__v{font-size:14.5px}
.health4 .hz__s{font-size:10.5px;color:var(--up);font-weight:700;margin-top:3px}

/* ─────────────────────────────────────────────────────────────
   16. TASK TABLE + TIMELINE
   ───────────────────────────────────────────────────────────── */
.tk__n{display:flex;align-items:center;gap:10px}
.tk__t{font-size:12.8px;font-weight:700}
.tk__s{font-size:10.5px;color:var(--tx-4);margin-top:2px}
.stat{padding:3.5px 11px;border-radius:8px;font-size:11px;font-weight:700;white-space:nowrap;
  color:var(--tone,var(--blue-hi));
  background:color-mix(in srgb,var(--tone,#3B8CFF) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--tone,#3B8CFF) 28%,transparent)}
.st-done{--tone:#2ED47A} .st-prog{--tone:#38BDF8} .st-pend{--tone:#FBBF24} .st-fail{--tone:#FB7185}
.prio{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600}
.prio i{width:7px;height:7px;border-radius:50%;background:var(--c);flex-shrink:0}
.tkbar{display:flex;align-items:center;gap:10px;min-width:132px}
.tkbar__b{flex:1;height:5px;border-radius:99px;background:var(--bg-tile);overflow:hidden}
.tkbar__f{height:100%;border-radius:99px;width:0;transition:width 1s var(--ease);
  background:linear-gradient(90deg,var(--tone,#3B8CFF),color-mix(in srgb,var(--tone,#3B8CFF) 50%,#5AAEFF))}
.tkbar span{font-size:11px;font-weight:700;min-width:34px;text-align:right;font-variant-numeric:tabular-nums}

.pager{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding-top:14px;margin-top:4px;border-top:1px solid var(--line-soft);font-size:12px;color:var(--tx-3)}
.pager__n{display:flex;align-items:center;gap:4px}
.pager__n button{min-width:30px;height:30px;padding:0 8px;border-radius:8px;font-size:12px;font-weight:600;
  color:var(--tx-3);transition:all .2s}
.pager__n button:hover{color:var(--tx);background:var(--bg-hover)}
.pager__n button.on{color:#fff;background:linear-gradient(135deg,#3B92FF,#1C63D6)}

.tline{display:grid;gap:0;position:relative;padding-left:22px}
.tline::before{content:"";position:absolute;left:6px;top:8px;bottom:14px;width:1.5px;background:var(--line-soft)}
.tline li{position:relative;padding:8px 0}
.tline li::before{content:"";position:absolute;left:-22px;top:12px;width:13px;height:13px;border-radius:50%;
  border:2.5px solid var(--bg-card);background:var(--up)}
.tline__t{font-size:12.5px;font-weight:600}
.tline__s{font-size:11px;color:var(--tx-4);margin-top:2px}
.tline__w{position:absolute;right:0;top:9px;font-size:11px;color:var(--tx-4)}

.filelist{display:grid;gap:9px}
.filerow{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;
  border:1px solid var(--line-soft);background:var(--bg-tile);font-size:12.5px;transition:all .2s}
.filerow:hover{border-color:var(--line-hot)}
.filerow b{flex:1;font-weight:500;color:var(--tx-2)}
.filerow span{font-size:10.5px;font-weight:700;color:var(--tx-4)}

/* ─────────────────────────────────────────────────────────────
   17. FOOTER QUOTE
   ───────────────────────────────────────────────────────────── */
.quote{margin-top:26px;padding:20px;text-align:center;border-top:1px solid var(--line-soft)}
.quote p{font-size:15px;font-style:italic;color:var(--blue-hi)}
.quote span{display:block;font-size:12.5px;color:var(--tx-3);margin-top:8px}

/* ─────────────────────────────────────────────────────────────
   16b. HORIZONTAL BAR CHART  (decisions by type)
   ───────────────────────────────────────────────────────────── */
.hbars{display:grid;gap:13px}
.hbars li{display:grid;grid-template-columns:104px 1fr 92px;align-items:center;gap:11px;font-size:12px}
.hbars b{font-weight:500;color:var(--tx-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbars span{text-align:right;color:var(--tx-3);font-variant-numeric:tabular-nums}
.hbars i{display:block;height:9px;border-radius:99px;width:0;transition:width 1.1s var(--ease);
  background:linear-gradient(90deg,var(--c,#3B8CFF),color-mix(in srgb,var(--c,#3B8CFF) 55%,#0A1830))}
.haxis{display:flex;justify-content:space-between;margin-top:12px;padding-top:9px;
  border-top:1px solid var(--line-soft);font-size:10px;color:var(--tx-4)}

/* ─────────────────────────────────────────────────────────────
   16c. HEATMAP
   ───────────────────────────────────────────────────────────── */
.heat{width:100%;border-collapse:separate;border-spacing:2px;font-size:11px}
.heat th{font-weight:600;color:var(--tx-3);padding:5px 7px;font-size:10.5px;white-space:nowrap}
.heat thead th{text-align:center}
.heat tbody th{text-align:left;color:var(--tx-2);font-weight:500}
.heat td{text-align:center;padding:7px 6px;border-radius:5px;font-weight:800;color:#08131F;
  font-variant-numeric:tabular-nums}
.h5{background:#22C77A} .h4{background:#8BD44E} .h3{background:#E8D046}
.h2{background:#F0A93C} .h1{background:#EE6D4A} .h0{background:#E0524C}
.heatlgd{display:flex;align-items:center;gap:12px;margin-top:13px;font-size:11px;color:var(--tx-3)}
.heatlgd i{flex:1;height:8px;border-radius:99px;
  background:linear-gradient(90deg,#E0524C,#EE6D4A,#F0A93C,#E8D046,#8BD44E,#22C77A)}

/* ─────────────────────────────────────────────────────────────
   16d. RANK MEDAL + SPARK CELL
   ───────────────────────────────────────────────────────────── */
.rankm{display:inline-grid;place-items:center;width:21px;height:21px;border-radius:50%;
  font-size:11px;font-weight:800;color:var(--tx-4);background:var(--bg-tile);border:1px solid var(--line-soft)}
.rankm--1{color:#3A2A05;background:linear-gradient(135deg,#FFD75E,#E0A500);border-color:transparent}
.rankm--2{color:#232B33;background:linear-gradient(135deg,#D8E2EC,#A5B4C4);border-color:transparent}
.rankm--3{color:#3B2410;background:linear-gradient(135deg,#E8A567,#C2762F);border-color:transparent}
.sparkc{width:56px;height:16px;display:block}

/* ─────────────────────────────────────────────────────────────
   16e. HEALTH TILES
   ───────────────────────────────────────────────────────────── */
.tiles6{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.htile{padding:14px;border-radius:13px;border:1px solid var(--line-soft);background:var(--bg-tile);
  transition:all .22s var(--ease)}
.htile:hover{border-color:var(--line-hot);transform:translateY(-3px)}
.htile__k{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--tx-3)}
.htile__v{font-size:19px;font-weight:800;margin-top:7px;font-variant-numeric:tabular-nums}
.htile__s{font-size:11px;font-weight:700;color:var(--up);margin-top:3px}

.summary2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line-soft)}
.summary2 .hz__k{font-size:11.5px}
.summary2 .hz__v{font-size:19px}

/* ─────────────────────────────────────────────────────────────
   17b. SWATCH COLOURS — set --c for legend dots / bars / pins
   ───────────────────────────────────────────────────────────── */
.c-blue{--c:#3B6BFF}   .c-sky{--c:#38BDF8}    .c-violet{--c:#8B7CFF}
.c-teal{--c:#2DD4BF}   .c-amber{--c:#FBBF24}  .c-green{--c:#4ADE80}
.c-red{--c:#FB7185}    .c-orange{--c:#FB923C} .c-pink{--c:#F472B6}
.c-indigo{--c:#818CF8} .c-grey{--c:#7E97BC}   .c-mint{--c:#2ED47A}

.ok2{color:#38BDF8;font-weight:700}
.badge--in{position:static;box-shadow:none;margin-left:auto;
  background:linear-gradient(135deg,#FB7185,#E11D48)}
.rail.mini .badge--in{display:none}
.rv-a{margin-top:14px}

/* ─────────────────────────────────────────────────────────────
   18. GRID HELPERS
   ───────────────────────────────────────────────────────────── */
.g-2-1-1{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1.15fr) minmax(0,1.5fr);gap:16px}
.g-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.g-1-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:16px}
.g-2-1{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1fr);gap:16px}
.g-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mb16{margin-bottom:16px}
.split--tasks{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:start;margin-bottom:16px}
@media (max-width:1480px){.split--tasks{grid-template-columns:minmax(0,1fr)}}

/* ─────────────────────────────────────────────────────────────
   19. RESPONSIVE
   ───────────────────────────────────────────────────────────── */
@media (max-width:1660px){
  .kpis--7{grid-template-columns:repeat(4,1fr)}
  .kpis--6{grid-template-columns:repeat(3,1fr)}
  .kpo{grid-template-columns:repeat(4,1fr)}
  .peers{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1480px){
  .g-2-1-1{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .acts{grid-template-columns:repeat(3,1fr)}
  .g-1-2,.g-2-1{grid-template-columns:minmax(0,1fr)}
  .docs4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1180px){
  .g-2-1-1,.g-3,.meets{grid-template-columns:minmax(0,1fr)}
  .kpis--7,.kpis--6{grid-template-columns:repeat(2,1fr)}
  .kpo{grid-template-columns:repeat(2,1fr)}
  .geo,.geo--6{grid-template-columns:repeat(3,1fr)}
  .qa--5{grid-template-columns:repeat(3,1fr)}
  .gsearch{display:none}
}
@media (max-width:680px){
  .kpis--7,.kpis--6,.g-4,.acts,.qa,.qa--5,.peers,.kpo,.docs4,.health4{grid-template-columns:minmax(0,1fr)}
  .geo,.geo--6{grid-template-columns:repeat(2,1fr)}
  .geo__i{border-right:0;margin-bottom:12px}
  .dpair svg{width:140px;height:140px}
  .strength li{grid-template-columns:66px 1fr 44px}
  .wload li{grid-template-columns:104px 1fr 34px}
}
@media (prefers-reduced-motion:reduce){
  .pin circle.halo{animation:none!important}
  .obj__fill,.sbar i,.tkbar__f{transition:none!important}
}