:root{
  --hp:#0096D6; --hp-dark:#0b5c8a; --ink:#25282a; --mut:#6f7377;
  --bar:#A9C4EE; --line:#C7568F; --goal:#5a5a5a; --good:#3aa657; --bad:#d0021b;
  --panel:#ffffff; --bg:#f2f2f2; --bd:#e2e4e6; --btn:#c9ccd0; --btn-a:#1147c4;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:"Segoe UI",Arial,Helvetica,sans-serif;font-size:13.2px}
button{font-family:inherit}
.hidden{display:none!important}

/* ---------- top nav ---------- */
.topbar{display:flex;align-items:center;gap:18px;background:#fff;padding:6px 14px;
  border-bottom:1px solid var(--bd);position:sticky;top:0;z-index:40}
/* Official HP logo (logo_HP_Electric_Blue_keyline_RGB.png) embedded as a data URI.
   Displayed at 44 px to match the previous mark and the topbar height; the stored
   bitmap is 176 px (4x) so it stays sharp on high-DPI screens and at 200 % zoom. */
.logo{width:44px;height:44px;flex:0 0 auto;object-fit:contain;display:block;
  image-rendering:auto;user-select:none;-webkit-user-drag:none}
.title{font-size:17.6px;font-weight:600;white-space:nowrap}
/* Tab strip — moved to a left-hand vertical sidebar (2026-09-24, "bagaimana
   jika semua pilihan tab menu di pindahkan ke sisi sebelah kiri, tapi di
   buat agar menjadi lebih estetik dan proporsional"). `.tabs` is no longer
   a child of `.topbar`; it now sits as the first column of `.wrap`
   (src/shell.html), styled as its own sticky card matching `.side`'s own
   look (white panel, border, rounded corners) so the two vertical rails
   feel like one consistent design language. Reverts to the ORIGINAL
   horizontal, top-of-page scrolling strip on narrow/mobile viewports (see
   the phone-width media query further below), where the extra column would
   waste too much of a phone's width. min-width:0 keeps the vertical list
   free to be exactly its fixed width without overflowing the flex parent. */
.tabs{display:flex;flex-direction:column;gap:5px;flex:0 0 178px;min-width:0;
  background:#fff;border:1px solid var(--bd);border-radius:6px;padding:8px 7px;
  position:sticky;top:60px;max-height:calc(100vh - 70px);overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:#c7cbd1 transparent}
/* Desktop/mouse users have no touch-swipe, so - unlike the hidden mobile
   scrollbar below, which relies on swipe - the strip keeps a thin, visibly
   draggable scrollbar here as the native fallback if wireTabsScroll()'s JS
   (wheel + click-drag, see app.js) is ever unavailable; wireTabsScroll()'s
   own guard (`scrollWidth <= clientWidth`) simply no-ops in this vertical
   orientation (there is no horizontal overflow to drive), so native
   vertical wheel/touch scrolling handles this list without any JS change. */
.tabs::-webkit-scrollbar{width:6px}
.tabs::-webkit-scrollbar-track{background:transparent}
.tabs::-webkit-scrollbar-thumb{background:#c7cbd1;border-radius:3px}
.tabs::-webkit-scrollbar-thumb:hover{background:#a9adb3}
.tabs.dragging{cursor:grabbing;scroll-snap-type:none}
/* each tab is now a full-width capsule/pill row (2026-09-25, "menu tab
   dibuat menjadi berbentuk kapsul atau bentuk yang lebih estetik") — the
   previous left-accent-bar-on-active convention is replaced by a fully
   rounded pill that fills solid brand blue when active, same var(--hp)
   accent used everywhere else in the dashboard (tab-active border, links,
   buttons), so the shape reads as "selected chip" rather than a plain
   left-nav row. Purely a visual change: class names / data-tab attributes
   / click wiring in app.js are untouched. */
.tab{cursor:pointer;font-size:13.3px;color:#4a4d50;text-align:left;padding:9px 14px;
  border-radius:999px;background:none;border:1px solid transparent;
  white-space:normal;line-height:1.3;width:100%;transition:background .15s ease,color .15s ease}
.tab:hover{color:var(--hp);background:#eaf4fc}
.tab.active{color:#fff;font-weight:700;background:var(--hp);box-shadow:0 2px 7px rgba(0,150,214,.38)}
.bracket{text-align:right;font-size:12.1px;color:var(--hp);line-height:1.5;flex:0 0 auto}
.bracket .lbl{color:var(--mut)}
.bracket select{font-size:12.1px;border:1px solid var(--bd);border-radius:3px;padding:1px 2px;color:var(--hp)}
/* Pushed flush right in the topbar (2026-09-25, "teks pada gambar terlampir
   dipindahkan ke sebelah kanan") — margin-left:auto on the first item after
   the logo/title absorbs all remaining flex space, so this link AND the
   Time Bracket that follows it (.bracket keeps its own flex:0 0 auto, gap
   unchanged) both land at the right edge of the topbar instead of hugging
   the title. Purely a position change; no markup/behaviour touched. */
.reload{display:flex;align-items:center;gap:6px;margin-left:auto}
.reload button{font-size:12.1px;padding:3px 8px;border:1px solid var(--hp);color:var(--hp);
  background:#fff;border-radius:3px;cursor:pointer}
.reload button:hover{background:var(--hp);color:#fff}
/* Topbar contact link — replaces the old manual Refresh/⚙ buttons (2026-08-29);
   the automatic no-server SharePoint refresh keeps running in the background
   (see startScheduler()/refreshNow()) whether or not this link is present. */
.contact-link{font-size:12.1px;padding:3px 8px;border:1px solid var(--hp);color:var(--hp);
  background:#fff;border-radius:3px;cursor:pointer;text-decoration:none;white-space:nowrap}
.contact-link:hover{background:var(--hp);color:#fff}
#srcInfo{font-size:11px;color:var(--mut)}

/* ---------- layout ---------- */
/* 3 columns now: the left-hand .tabs nav (fixed 178px, see its own rule
   above), .main (flexible), and the existing right-hand .side filter panel
   (fixed 208px, unchanged) - added 2026-09-24 for the left-nav redesign.
   auto instead of a second fixed-px column keeps .tabs sized by its own
   flex-basis rule rather than duplicating "178px" in two places. */
.wrap{display:grid;grid-template-columns:auto 1fr 208px;gap:8px;padding:8px;align-items:start}
.main{display:flex;flex-direction:column;gap:8px;min-width:0}
.card{background:var(--panel);border:1px solid var(--bd);border-radius:4px;padding:8px 10px}
.card h3{margin:0 0 4px;font-size:14.3px;font-weight:600}
.row2{display:grid;grid-template-columns:1fr 260px;gap:8px}
.row3{display:grid;grid-template-columns:250px 1fr;gap:8px}
.row4{display:grid;grid-template-columns:1fr 1fr 150px;gap:8px}

/* ---------- measure panel ---------- */
.measbox{display:flex;flex-direction:column;gap:6px}
.measbox .hd{background:#fff;border:1px solid var(--bd);text-align:center;padding:3px;font-weight:600}
.mbtn{background:var(--btn);border:0;color:#2b2b2b;padding:6px;border-radius:3px;cursor:pointer;font-size:13.2px}
.mbtn.active{background:var(--btn-a);color:#fff;font-weight:600}
.mbtn:disabled{opacity:.45;cursor:not-allowed}
.bignum{text-align:center}
.bignum .p{font-size:13.2px;color:#444}
.bignum .v{font-size:41.8px;font-weight:300;line-height:1.05}
.bignum .v.small{font-size:33px}

/* ---------- kpi card ---------- */
.kpi{background:#C2588F;color:#fff;border-radius:4px;padding:10px 12px;position:relative;overflow:hidden;min-height:150px}
.kpi .k1{font-size:18.7px;font-weight:600}
.kpi .per{position:absolute;right:10px;top:8px;font-size:12.1px;opacity:.95}
.kpi .goal{position:absolute;right:10px;top:26px;font-size:14.3px}
.kpi .big{font-size:48.4px;font-weight:300;margin-top:14px}
.kpi .vs{font-size:13.2px;margin-top:2px}
.kpi svg{position:absolute;left:0;bottom:0;width:100%;height:62px}
.kpi .gauge{position:absolute;right:14px;top:58px;width:10px;height:74px;border-radius:2px;
  background:linear-gradient(#7b0d10,#d0021b 35%,#f5a623 62%,#3aa657 88%)}
.kpi .gmark{position:absolute;right:8px;width:22px;height:0;border-top:2px solid #fff}

/* ---------- sparkline strip ---------- */
.sparks{display:flex;gap:2px;overflow-x:auto}
.spark{flex:1 0 108px;border-left:1px solid #eee;padding:2px 3px;text-align:center}
.spark .nm{font-size:11.55px;color:#333;height:26px;line-height:1.15;overflow:hidden}
.spark .val{font-size:18.7px;font-weight:600;margin:-2px 0}
.spark .gl{font-size:11px;color:#999}
.spark svg{width:100%;height:44px}

/* ---------- indikator kesegaran data ---------- */
.fresh{font-size:11.55px;font-weight:600;padding:2px 8px;border-radius:10px;white-space:nowrap;cursor:help}
.fresh:empty{display:none}
.fresh.ok{background:#e8f6ec;color:#1d7a3a;border:1px solid #bfe4c9}
.fresh.warn{background:#fff6e5;color:#8a5a00;border:1px solid #f0d9a8}
.fresh.bad{background:#fdeaea;color:#a32020;border:1px solid #f2c2c2}

/* ---------- Copilot ask bar ---------- */
.copilot-ask{position:relative;display:flex;align-items:center;gap:12px;
  padding:12px 14px;margin-bottom:8px;background:#fff;overflow:hidden;
  border:1px solid #dfe7f6;border-radius:12px;
  box-shadow:0 1px 2px rgba(24,49,92,.05),0 6px 18px -12px rgba(24,49,92,.28)}
.copilot-ask:before{content:"";position:absolute;left:0;top:0;right:0;height:3px;
  background:linear-gradient(90deg,#2AC4F3 0%,#2C7DF7 42%,#9C5BF0 100%)}
.cp-logo{display:flex;align-items:center;gap:8px;flex:0 0 auto;padding-right:12px;
  border-right:1px solid #eaf0fa;align-self:stretch}
.cp-logo svg{flex:0 0 auto}
.cp-name{display:flex;flex-direction:column;line-height:1.15}
.cp-logo b{font-size:14.3px;color:#12315c;font-weight:700;letter-spacing:.2px}
.cp-logo i{font-size:10.45px;color:#8a93a0;font-style:normal;letter-spacing:.3px}
.cp-field{flex:1;display:flex;align-items:center;gap:6px;background:#f7f9fd;
  border:1px solid #e1e8f4;border-radius:9px;padding:0 6px 0 12px;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}
.cp-field input{flex:1;border:0;outline:0;font:inherit;font-size:13.75px;padding:9px 0;
  background:transparent;color:#222}
.cp-field input::placeholder{color:#9aa3b0}
.cp-field:focus-within{background:#fff;border-color:#2C7DF7;box-shadow:0 0 0 3px rgba(44,125,247,.12)}
#qaClear{border:0;background:transparent;color:#9aa3b0;font-size:17.6px;cursor:pointer;
  padding:0 4px;line-height:1;border-radius:50%;transition:color .14s ease,background .14s ease}
#qaClear:hover{color:#3d4655;background:#e9eef7}
#qaSend{flex:0 0 auto;border:0;cursor:pointer;width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#2AC4F3 0%,#2C7DF7 52%,#9C5BF0 100%);
  box-shadow:0 3px 9px -3px rgba(44,125,247,.62);
  transition:transform .14s ease,box-shadow .14s ease,filter .14s ease}
#qaSend svg path{stroke:#fff}
#qaSend:hover{transform:translateY(-1px);filter:saturate(1.08);
  box-shadow:0 5px 14px -4px rgba(44,125,247,.7)}
#qaSend:active{transform:translateY(0)}
.qa-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 9px 2px}
.qa-chips:not(:empty):before{content:"Try";font-size:10.45px;font-weight:700;letter-spacing:.7px;
  color:#9aa3b0;text-transform:uppercase;margin-right:2px}
.qchip{font-size:11.55px;color:#41608f;background:#fff;border:1px solid #dde5f2;border-radius:999px;
  padding:4px 11px;cursor:pointer;line-height:1.25;
  transition:background .14s ease,color .14s ease,border-color .14s ease,box-shadow .14s ease}
.qchip:hover{background:#2C7DF7;color:#fff;border-color:#2C7DF7;
  box-shadow:0 3px 9px -4px rgba(44,125,247,.75)}
#qaOut{margin-bottom:10px}
.qa-q{font-size:12.1px;color:#6b7280;margin:0 0 5px 2px}
.qa-q:before{content:"❝ ";color:#2C7DF7}
.qa-card{position:relative;border:1px solid #e2eafa;border-radius:12px;background:#fff;
  padding:14px 16px 14px 18px;overflow:hidden;
  box-shadow:0 1px 2px rgba(24,49,92,.05),0 6px 18px -12px rgba(24,49,92,.28)}
.qa-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,#2AC4F3 0%,#2C7DF7 55%,#9C5BF0 100%)}
.qa-card.warn{border-color:#f5e3bf;background:#fffdf7}
.qa-card.warn:before{background:#E8A33A}
.qa-t{font-size:13.75px;font-weight:700;color:#12315c;margin-bottom:2px;letter-spacing:.1px}
.qa-big{font-size:33px;font-weight:700;color:#2C7DF7;line-height:1.05;margin:4px 0 6px;
  letter-spacing:-.5px}
.qa-b{font-size:12.65px;color:#444;margin-top:7px;line-height:1.5}
table.qa-tbl{margin-top:7px;max-width:100%}
table.qa-tbl th{border-bottom:1.5px solid #2C7DF7}
.qa-tr{margin-top:9px;font-size:11.55px;color:#6b7280;border-top:1px dashed #e0e7f2;padding-top:7px}
.qa-tr ul{margin:3px 0 0 16px;padding:0}
.qa-tr li{margin:2px 0}

/* ---------- Copilot insight panel ---------- */
.card.insight{position:relative;border:1px solid #dfe7f6;border-radius:12px;padding:0;overflow:hidden;
  background:#fff;
  box-shadow:0 1px 2px rgba(24,49,92,.05),0 6px 18px -12px rgba(24,49,92,.28)}
.card.insight:before{content:"";position:absolute;left:0;top:0;right:0;height:3px;
  background:linear-gradient(90deg,#2AC4F3 0%,#2C7DF7 42%,#9C5BF0 100%)}

/* header */
.ins-hd{display:flex;align-items:center;gap:10px;padding:12px 16px 11px;
  font-size:13.2px;font-weight:700;letter-spacing:.7px;color:#12315c;
  background:linear-gradient(180deg,#f7faff 0%,#fff 100%);
  border-bottom:1px solid #eaf0fa;margin:0}
.ins-hd .spk{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:9px;font-size:14.3px;color:#fff;flex:0 0 auto;
  background:linear-gradient(135deg,#2AC4F3 0%,#2C7DF7 50%,#9C5BF0 100%);
  box-shadow:0 3px 8px -2px rgba(44,125,247,.6)}
.ins-hd .ins-ttl{flex:0 0 auto}
.ins-hd .pill{background:#eef4ff;color:#2C7DF7;border-color:#d5e4fd;font-weight:700}
.ins-hd .ins-note{font-weight:400;letter-spacing:0;font-size:11.55px;color:#8a93a0;
  font-style:italic;margin-left:auto;text-align:right}

/* tiles */
#insightBody,#ocInsightBody{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  gap:12px;padding:14px 16px 16px;align-items:stretch}
#insightBody>.note,#ocInsightBody>.note{grid-column:1/-1;margin:0}
.ins{position:relative;display:flex;gap:12px;align-items:flex-start;height:100%;
  background:#fff;border:1px solid #e7ecf5;border-radius:11px;padding:13px 14px 13px 16px;
  box-shadow:0 1px 2px rgba(24,49,92,.04);
  transition:box-shadow .16s ease,transform .16s ease,border-color .16s ease}
.ins:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:11px 0 0 11px;
  background:var(--ins-c,#2C7DF7);opacity:.92}
.ins:hover{border-color:#d3e0f4;box-shadow:0 6px 18px -8px rgba(24,49,92,.32);transform:translateY(-2px)}
.ins .ico{flex:0 0 32px;height:32px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;font-size:15.4px;line-height:1;color:var(--ins-c,#2C7DF7);
  background:#eef4ff;border:1px solid #dbe6fb}
.ins .txt{flex:1;min-width:0;font-size:12.98px;color:#2b2b2b;line-height:1.6}
.ins .txt b{color:#0f1c2e;font-weight:700}
.ins .auds{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  color:#5a6b85;cursor:pointer;margin-top:9px;padding:3px 10px 3px 8px;border-radius:999px;
  background:#f4f7fc;border:1px solid #e3e9f4;user-select:none;
  transition:background .14s ease,color .14s ease,border-color .14s ease}
.ins .auds:before{content:"⌄";font-size:12.1px;line-height:1;transform:translateY(-1px);
  transition:transform .16s ease}
.ins .auds:hover{background:#e9f1ff;color:#2C7DF7;border-color:#cfe0fb}
.ins .auds.on{background:#e9f1ff;color:#2C7DF7;border-color:#cfe0fb}
.ins .auds.on:before{transform:rotate(180deg) translateY(0)}
.ins .aud{display:none;font-size:11.55px;color:#4d5a6e;background:#f8fafd;
  border:1px solid #e6edf8;border-left:3px solid #cfe0fb;padding:9px 11px;margin:9px 0 0;
  border-radius:8px;line-height:1.55}
.ins .aud.open{display:block}

/* ---------- cross-filter (visual click) ---------- */
.xfbar{display:flex;align-items:center;flex-wrap:wrap;gap:5px;padding:5px 8px;margin-bottom:6px;
  border:1px solid #e6e6e6;border-radius:4px;background:#fbfbfb;min-height:26px}
.xfbar.active{background:#eef8fd;border-color:#9ad6f0}
.xfbar .xhint{font-size:11.55px;color:#8a8a8a;font-style:italic}
.xfbar .xlbl{font-size:12.1px;color:#0074a8;font-weight:600}
.xfbar .chip{display:inline-flex;align-items:center;gap:5px;font-size:12.1px;background:#fff;color:#00618c;
  border:1px solid #0096D6;border-radius:11px;padding:2px 8px;cursor:pointer}
.xfbar .chip:hover{background:#0096D6;color:#fff}
.xfbar .chip:hover b{color:#fff}
.xfbar .chip b{color:#003f5c}
.xfbar .chip i{font-style:normal;font-weight:700;opacity:.7}
.xfbar button{font-size:11.55px;background:#fff;border:1px solid #bbb;border-radius:3px;padding:2px 8px;cursor:pointer;color:#555}
.xfbar button:hover{background:#eee}

.clk{cursor:pointer}
svg .clk:hover{opacity:.75!important}
.spark.clk:hover{background:#f0f8fd}
.spark.xsel{background:#e6f4fb;box-shadow:inset 0 -3px 0 #0096D6}
.spark.xdim{opacity:.38}
table.grid tr.xsel td{background:#e6f4fb!important;font-weight:600}
table.grid tr.xdim td{opacity:.42}
table.grid tr.clk{cursor:pointer}

/* ---------- tables ---------- */
table.grid{width:100%;border-collapse:collapse;font-size:12.65px}
table.grid th{border-bottom:2px solid #3fb6b0;text-align:right;padding:3px 5px;font-weight:600;color:#333;
  position:sticky;top:0;background:#fff;cursor:pointer;white-space:nowrap}
table.grid th:first-child,table.grid td:first-child{text-align:left}
table.grid td{padding:3px 5px;text-align:right;border-bottom:1px solid #f0f0f0;white-space:nowrap}
table.grid tr:hover td{background:#f7fbff}
.scroll{max-height:230px;overflow:auto}
.toggle{display:flex;gap:2px;margin-bottom:4px}
.toggle button{border:0;padding:4px 12px;border-radius:2px;background:#c9ccd0;cursor:pointer;font-size:12.65px}
.toggle button.active{background:#3fb6b0;color:#fff;font-weight:600}
.contrib{display:flex;flex-direction:column;gap:3px}
.contrib .hd{text-align:center;color:#3fb6b0;font-weight:600;padding-bottom:2px}
.cbtn{background:#c9ccd0;border:0;padding:5px;border-radius:2px;cursor:pointer;font-size:12.65px}
.cbtn.active{background:#3fb6b0;color:#fff;font-weight:600}

/* ---------- filter sidebar ---------- */
.side{background:#fff;border:1px solid var(--bd);border-radius:4px;padding:8px;height:fit-content;
  position:sticky;top:60px;max-height:calc(100vh - 70px);overflow:auto}
.side h4{margin:8px 0 3px;font-size:12.1px;color:var(--mut);text-align:center;font-weight:600}
.seg{display:flex;gap:2px}
.seg button{flex:1;border:0;background:#e6e7e9;padding:4px;font-size:12.1px;cursor:pointer;border-radius:2px}
.seg button.active{background:#111;color:#fff;font-weight:600}
.side select{width:100%;font-size:12.1px;padding:3px;border:1px solid var(--bd);border-radius:3px;background:#fff}
.searchbox{font-size:12.1px;padding:3px 8px;border:1px solid var(--bd);border-radius:4px;min-width:200px;
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='6.5' cy='6.5' r='4.5' fill='none' stroke='%238A93A5' stroke-width='1.4'/><line x1='9.8' y1='9.8' x2='14' y2='14' stroke='%238A93A5' stroke-width='1.4' stroke-linecap='round'/></svg>") no-repeat 6px center;
  background-size:13px 13px;padding-left:24px}
.searchbox:focus{outline:none;border-color:var(--hp);box-shadow:0 0 0 2px rgba(0,150,214,.15)}
.chk{max-height:120px;overflow:auto;border:1px solid var(--bd);border-radius:3px;padding:3px}
.chk label{display:block;font-size:12.1px;padding:1px 2px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chk input{margin-right:4px;vertical-align:-1px}
.chk label.selall{border-bottom:1px solid var(--bd);margin-bottom:2px;padding-bottom:3px;font-weight:600;background:#f5f7f9}
#fCust{max-height:160px}
.chkSearch{width:100%;font-size:12.1px;padding:3px 6px;border:1px solid var(--bd);border-radius:3px;margin-bottom:3px;box-sizing:border-box}
.chkSearch:focus{outline:none;border-color:var(--hp);box-shadow:0 0 0 2px rgba(0,150,214,.15)}
.side .reset{width:100%;margin-top:10px;padding:5px;border:1px solid var(--hp);background:#fff;color:var(--hp);
  border-radius:3px;cursor:pointer;font-size:12.1px}
.side .reset:hover{background:var(--hp);color:#fff}
.note{font-size:11px;color:var(--mut);line-height:1.35;margin-top:6px}

/* ---------- chart ---------- */
.legend{display:flex;gap:12px;font-size:11.55px;color:#555;margin-bottom:2px}
.legend i{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:4px}
svg text{font-family:inherit}
.tip{position:fixed;pointer-events:none;background:#25282a;color:#fff;font-size:12.1px;padding:5px 7px;
  border-radius:3px;z-index:99;opacity:0;transition:opacity .1s;white-space:pre;line-height:1.45}

/* ---------- glossary / raw ---------- */
.doc{line-height:1.6;font-size:13.75px;max-width:1050px}
.doc h2{font-size:16.5px;color:var(--hp);margin:16px 0 4px}
.doc code{background:#f2f4f7;padding:1px 5px;border-radius:3px;font-size:13.2px}
.doc table{border-collapse:collapse;margin:6px 0;font-size:13.2px}
.doc th,.doc td{border:1px solid var(--bd);padding:4px 8px;text-align:left}
.doc th{background:#f7f9fb}
.formula{background:#f7f9fb;border-left:3px solid var(--hp);padding:8px 12px;margin:6px 0;font-size:14.3px}
.pill{display:inline-block;background:#eef6fc;color:var(--hp);border:1px solid #cde5f5;border-radius:10px;
  padding:1px 8px;font-size:11.55px;margin-right:4px}
.doc h3.mdefH3{font-size:14.3px;color:#25282a;margin:14px 0 3px;font-weight:700}
#mdefTable{font-size:12.65px}
#mdefTable td{vertical-align:top}
#mdefTable code{font-size:12.1px;white-space:normal}
.mdefSub{font-size:11px;color:var(--mut);font-weight:600}
.mdefYes{color:#1e7a38;font-weight:600}
.mdefNo{color:#a8121f;font-weight:600}
.mdefRef{color:#6a6f75;font-weight:600}
.mdefSrc{font-size:12.1px;color:#555;border-left:3px solid var(--hp);background:#f7f9fb;padding:7px 11px;margin:10px 0}

/* ---------- Market tab ---------- */
.mkgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(430px,1fr));gap:10px;margin-top:8px}
.mkblk{border:1px solid var(--bd);border-radius:4px;padding:6px 8px;background:#fff}
.mkblk h4{margin:0 0 4px;font-size:12.65px;color:var(--hp);font-weight:600;
  border-bottom:1px solid #eef3f7;padding-bottom:3px}
.mkblk .scroll{max-height:212px}
.st{display:inline-block;font-size:10.45px;font-weight:700;border-radius:9px;padding:1px 7px;white-space:nowrap}
.st.ok{background:#e8f6ec;color:#1e7a38;border:1px solid #b7e2c4}
.st.miss{background:#fdecee;color:#a8121f;border:1px solid #f3c2c8}
.st.eq{background:#fdf3d9;color:#9a6a00;border:1px solid #f0dba0}
.st.na{background:#f2f2f2;color:#777;border:1px solid #e0e0e0}

/* ---------- Service Level tab ---------- */
.slcards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
@media (max-width:900px){.slcards{grid-template-columns:1fr}}
.slcard{border:1px solid var(--bd);border-radius:5px;background:#fff;padding:9px 11px}
.slcard .k{font-size:11px;font-weight:700;color:#6B7684;letter-spacing:.3px;text-transform:uppercase}
.slcard .v{font-size:28px;font-weight:700;line-height:1.15;margin:2px 0 6px}
.slcard .r{display:flex;justify-content:space-between;font-size:11.6px;color:#555;
  border-top:1px dotted #e6ebf0;padding:2px 0}
.slcard .st{margin-top:6px}
.sl3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.sl2{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:8px}
@media (max-width:1180px){.sl3,.sl2{grid-template-columns:1fr}}
.sltbl{width:100%;border-collapse:collapse;font-size:12.1px}
.sltbl th,.sltbl td{border-bottom:1px solid var(--bd);padding:3px 7px;text-align:left;white-space:nowrap}
.sltbl th{background:#f7f9fb;position:sticky;top:0;font-weight:700}
.sltbl td.n,.sltbl th.n{text-align:right}
.sltbl tr.clk{cursor:pointer}
.sltbl tr.clk:hover{background:#f2f8ff}
.sltbl tr.xsel{background:#e6f2fb;font-weight:600}
.pill.ok{background:#e8f6ec;color:#1e7a38;border-color:#b7e2c4}
.pill.miss{background:#fdecee;color:#a8121f;border-color:#f3c2c8}
.pill.na{background:#f2f2f2;color:#777;border-color:#e0e0e0}

/* ---------- Metrics tab ---------- */
.row-mt{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.mtrend{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
.mtcell{border:1px solid var(--bd);border-radius:4px;padding:6px 8px}
.mtcell .nm{font-size:12.1px;color:#555;font-weight:600}
.mtcell .vv{font-size:20.9px;font-weight:700;line-height:1.15}
.mtcell .gl{font-size:11px;color:var(--mut)}

/* ---------- KPI Partner tab ---------- */
.pkcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:8px;margin:2px 0 8px}
.pkcard{position:relative;border:1px solid var(--bd);border-radius:5px;padding:7px 10px 7px 12px;background:#fff;overflow:hidden}
.pkcard:before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:#c9ced3}
.pkcard.ok:before{background:linear-gradient(180deg,#2ea34f,#1e7a38)}
.pkcard.miss:before{background:linear-gradient(180deg,#e0303f,#a8121f)}
.pkcard .nm{font-size:11.55px;color:#555;font-weight:600;letter-spacing:.02em}
.pkcard .vv{font-size:23.1px;font-weight:700;line-height:1.15;color:#25282a}
.pkcard.ok .vv{color:#1e7a38}
.pkcard.miss .vv{color:#a8121f}
.pkcard .gl{font-size:10.45px;color:var(--mut);line-height:1.3}
table.grid td.pkrank{text-align:center;font-weight:700;color:#0074a8;width:34px}
.pkbar{display:inline-block;width:52px;height:6px;background:#eef1f4;border-radius:3px;vertical-align:middle;margin-left:5px;overflow:hidden}
.pkbar i{display:block;height:100%;background:linear-gradient(90deg,#4a9fd8,#0074a8);border-radius:3px}
#pkTable tr.clk{cursor:pointer}
#pkTable tr.clk:hover td,#pkMatrix tr.clk:hover td{background:#f2f8fc}
#pkMatrix tr.clk{cursor:pointer}
#pkMatrix thead tr:first-child th{border-bottom:1px solid var(--bd)}

/* ---------- blank / unlabelled category disclosure ---------- */
tr.blankrow td{font-size:10.45px;color:#8a8f94;font-style:italic;background:#fbfbfc;
  border-top:1px dotted var(--bd);padding:4px 8px;text-align:left}
.blanknote{color:#8a8f94;font-style:italic}

/* ---------- KPI Partner: trend tiles ---------- */
.pktiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(304px,1fr));gap:11px;margin-top:9px}
.pktile{position:relative;border:1px solid var(--bd);border-radius:7px;padding:10px 11px 9px;background:#fff;
  cursor:pointer;transition:box-shadow .16s ease,transform .16s ease,border-color .16s ease;overflow:hidden}
.pktile:before{content:'';position:absolute;left:0;top:0;right:0;height:3px;background:#c9ced3}
.pktile.ok:before{background:linear-gradient(90deg,#2ea34f,#8fd3a3)}
.pktile.miss:before{background:linear-gradient(90deg,#e0303f,#f0a6ad)}
.pktile.eq:before{background:linear-gradient(90deg,#c9930a,#f0d382)}
.pktile.na:before{background:linear-gradient(90deg,#9aa1a8,#d5d9dd)}
.pktile:hover{box-shadow:0 5px 16px rgba(20,30,45,.13);transform:translateY(-2px);border-color:#c2d4e4}
.pktile.xsel{border-color:#0096D6;box-shadow:0 0 0 2px rgba(0,150,214,.18)}
.pktile.xdim{opacity:.42}
.pkt-hd{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.pkt-rank{flex:0 0 auto;min-width:27px;text-align:center;font-size:11px;font-weight:700;color:#0074a8;
  background:#eaf5fb;border:1px solid #cfe7f5;border-radius:9px;padding:1px 5px}
.pkt-nm{flex:1 1 auto;font-size:12.65px;font-weight:700;color:#25282a;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pkt-val{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-bottom:1px}
.pkt-val .v{font-size:20.9px;font-weight:700;line-height:1.1;color:#25282a}
.pktile.ok .pkt-val .v{color:#1e7a38}
.pktile.miss .pkt-val .v{color:#a8121f}
.pktile.eq .pkt-val .v{color:#9a6a00}
.pkt-val .g{font-size:11px;color:var(--mut)}
.pkt-val .d{font-size:11.55px;font-weight:700}
svg.pkchart{width:100%;height:auto;display:block;margin:2px 0 1px}
.pkchart-empty{font-size:11px;color:var(--mut);padding:26px 0;text-align:center}
.pkt-ft{display:flex;justify-content:space-between;gap:6px;font-size:10.45px;color:#6b7178;
  border-top:1px dotted var(--bd);padding-top:5px;margin-top:2px}
.pkchips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.pkchip{display:inline-flex;align-items:center;gap:4px;font-size:9.9px;line-height:1.5;
  border-radius:9px;padding:1px 6px;border:1px solid #e0e0e0;background:#f7f8f9;color:#555;white-space:nowrap}
.pkchip b{font-weight:700;font-size:9.35px;letter-spacing:.02em;opacity:.85}
.pkchip.ok{background:#eef8f1;border-color:#c7e6d1;color:#1e7a38}
.pkchip.miss{background:#fdeff1;border-color:#f3ccd1;color:#a8121f}
.pkchip.eq{background:#fdf3d9;border-color:#f0dba0;color:#9a6a00}
.pkchip.na{background:#f4f5f6;border-color:#e2e4e6;color:#7c848c}
svg.pksp{display:inline-block;vertical-align:middle}
span.pksp{display:inline-block;height:20px;vertical-align:middle}
table.grid td.pkspc{padding:2px 6px;line-height:0}
.pklg{display:flex;flex-wrap:wrap;align-items:center;gap:11px;font-size:10.45px;color:#6b7178;margin:2px 0 2px}
.pklg span{display:inline-flex;align-items:center;gap:4px}
.pklg i{display:inline-block}
.pklg i.ln{width:16px;height:2px;background:#25282a;border-radius:1px}
.pklg i.dsh{width:16px;height:0;border-top:1.5px dashed #7c848c}
.pklg i.bar{width:8px;height:9px;background:#dbe6f3;border-radius:1px}
.pklg i.sw{width:9px;height:9px;border-radius:2px}
.pklg i.sw.ok{background:#2ea34f}
.pklg i.sw.miss{background:#e0303f}
.pklg i.sw.eq{background:#c9930a}
.pklg i.sw.na{background:#9aa1a8}
.pklg .sep{width:1px;height:11px;background:var(--bd);padding:0}

/* ---------- Heat map ---------- */
table.grid.heat td{text-align:center;border:1px solid #fff;font-size:11.55px;padding:4px 3px}
table.grid.heat td.lbl{text-align:left;background:#fff!important;font-weight:500}
table.grid.heat th{text-align:center}
table.grid.heat td.cell{cursor:pointer}
table.grid.heat td.cell:hover{outline:2px solid var(--hp);outline-offset:-2px}
table.grid.heat td.sel{outline:2px solid var(--hp);outline-offset:-2px;font-weight:700}
table.grid.heat td.lbl.clk:hover,table.grid.heat td.tot.clk:hover{background:#eef6fc!important}
table.grid.heat th.clk{cursor:pointer}
table.grid.heat th.clk:hover{background:#eef6fc}
table.grid.heat th.sel{outline:2px solid var(--hp);outline-offset:-2px;background:#eef6fc}
.hmlegend{display:flex;align-items:center;gap:6px;font-size:11px;color:#666;margin-top:6px}
.hmlegend .sw{width:26px;height:11px;display:inline-block;border:1px solid #ddd}

/* ---------- Huddle ---------- */
.hu-sec{border:1px solid var(--bd);border-radius:4px;padding:8px 10px;margin-top:8px;background:#fff}
.hu-sec h4{margin:0 0 5px;font-size:13.2px;color:var(--hp);font-weight:600}
.hu-sec ul{margin:3px 0 0;padding-left:17px;line-height:1.6;font-size:13.2px}
.hu-sec li b{color:#111}
.hu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:8px}
.hu-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:7px;margin-top:6px}
.hu-card{border:1px solid var(--bd);border-left-width:4px;border-radius:4px;padding:6px 9px}
.hu-card.ok{border-left-color:var(--good)}
.hu-card.miss{border-left-color:var(--bad)}
.hu-card.na{border-left-color:#ccc}
.hu-card .nm{font-size:11.55px;color:#666;font-weight:600}
.hu-card .vv{font-size:19.8px;font-weight:700;line-height:1.2}
.hu-card .sub{font-size:11px;color:var(--mut)}
.hu-trail{font-size:11px;color:var(--mut);margin-top:7px;border-top:1px dashed #e0e0e0;padding-top:5px;line-height:1.5}

/* ---------- Raw Data tab: font sizes intentionally NOT scaled ----------
   The global type scale was increased by +10%; the Raw Data grid keeps its
   original sizes so the wide table still fits on screen. */
#page-raw{font-size:12px}
#page-raw .card h3{font-size:13px}
#page-raw .pill{font-size:10.5px}
#page-raw .note{font-size:10px}
#page-raw table.grid{font-size:11.5px}
#page-raw table.grid th,#page-raw table.grid td{font-size:11.5px}

/* ---------- High Level View ---------- */
.hvhead{display:flex;justify-content:space-between;align-items:flex-end;margin:2px 0 8px}
.hvhead h2{margin:0;font-size:17.6px;color:var(--hp);font-weight:600}
.hvhead .sub{font-size:11.5px;color:var(--mut)}
.hn{font-weight:400;font-size:11px;color:var(--mut);margin-left:6px}
.hvcards{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
@media (max-width:1180px){.hvcards{grid-template-columns:repeat(3,1fr)}}
.hvcard{border:1px solid var(--bd);border-radius:5px;background:#fff;padding:8px 10px}
.hvcard .t{font-size:10.6px;font-weight:700;color:#6B7684;letter-spacing:.3px}
.hvcard .v{font-size:25px;font-weight:700;line-height:1.15;margin:2px 0}
.hvcard .s{font-size:10.8px;color:var(--mut)}
.hvd{font-weight:700;margin-left:3px}
.hvd.good{color:var(--good)}
.hvd.bad{color:var(--bad)}
.hvd.na{color:#8A93A5}
.hvrow2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.hvrow2b{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:8px}
.hvrow3{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:8px;margin-top:8px}
.hvrow4{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px}
@media (max-width:1400px){.hvrow4{grid-template-columns:repeat(2,1fr)}
  .hvrow3{grid-template-columns:1fr}.hvrow2{grid-template-columns:1fr}
  .hvrow2b{grid-template-columns:1fr}}
.hvbars{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.hvbar{display:grid;grid-template-columns:110px 1fr auto;align-items:center;gap:6px;
  font-size:11.5px;cursor:pointer;padding:1px 2px;border-radius:3px}
.hvbar:hover{background:#F2F7FD}
.hvbar.xsel{background:#E3F0FB;outline:1px solid #0096D6}
.hvbar .lb{color:#31404F;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hvbar .tr{background:#EDF1F7;border-radius:3px;height:12px;display:block}
.hvbar .tr i{display:block;height:12px;border-radius:3px}
.hvbar .vl{color:#5A6675;font-variant-numeric:tabular-nums;white-space:nowrap}
.hvdonut{display:flex;align-items:center;gap:8px;margin-top:4px}
.hvdonut svg{width:120px;flex:0 0 120px}
.hvlg{display:flex;flex-direction:column;gap:2px;font-size:11px;min-width:0}
.hvlg .lg{display:flex;align-items:center;gap:5px;cursor:pointer;white-space:nowrap}
.hvlg .lg i{width:9px;height:9px;border-radius:2px;flex:0 0 9px}
.hvlg .lg b{margin-left:auto;color:#5A6675}
.hvins{display:flex;gap:7px;margin-bottom:7px;font-size:12px;line-height:1.5}
.hvins .ico{width:22px;height:22px;flex:0 0 22px;border:1px solid;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:12px}
.hvpanel{border:1px solid var(--bd);border-radius:5px;background:#fff;overflow:hidden;min-width:0}
.hvpanel .ph{color:#fff;font-size:11.2px;font-weight:700;letter-spacing:.3px;padding:6px 9px;
  display:flex;justify-content:space-between;align-items:center;gap:6px}
.hvpanel .ph .lnk{font-weight:600;font-size:10.5px;opacity:.92;cursor:pointer;white-space:nowrap}
.hvpanel .ph .lnk:hover{text-decoration:underline;opacity:1}
.hvpanel .pb{padding:8px 9px 10px}
.hvpanel .pt{font-size:10.8px;font-weight:700;color:#6B7684;margin:8px 0 2px;letter-spacing:.2px}
.hvpanel .pt:first-child{margin-top:0}
.hvtbl{width:100%;font-size:11px}
.hvtbl th,.hvtbl td{padding:3px 5px}
.hvtbl td.r,.hvtbl th.r{text-align:right;font-variant-numeric:tabular-nums}
.hvtbl tbody tr{cursor:pointer}
.hvtbl tbody tr:hover{background:#F2F7FD}
.hvminis{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.hvmini{border:1px solid var(--bd);border-radius:4px;padding:5px 7px}
.hvmini .t{font-size:10px;color:#6B7684;font-weight:700}
.hvmini .v{font-size:17px;font-weight:700;line-height:1.2}
.hvmini .v.s{font-size:12.5px}
.hvaskbar{display:flex;gap:5px}
.hvaskbar input{flex:1;min-width:0;border:1px solid var(--bd);border-radius:4px;padding:5px 7px;font-size:11.8px}
.hvaskbar button{border:1px solid #2C7DF7;background:#2C7DF7;color:#fff;border-radius:4px;
  padding:5px 11px;font-size:11.8px;cursor:pointer}
#page-hlv .qa-chips{margin-top:5px}
#page-hlv .qchip{font-size:10.6px}

/* total row of a grid table */
table.grid tr.tot td{border-top:2px solid #3fb6b0;font-weight:700;background:#fafcff}

/* ---- Customer Analysis tab ---- */
.card .pt{font-size:10.8px;font-weight:700;color:#6B7684;margin:8px 0 2px;letter-spacing:.2px}
table.grid th.sortc{cursor:pointer;text-decoration:underline dotted;user-select:none}
table.grid th.sortc:hover{color:var(--hp)}

/* ---- Open Case: "Command Center" layout ---- */
.occc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  flex-wrap:wrap;margin:2px 0 8px}
.occc-title{margin:0;font-size:19px;color:var(--hp-dark);font-weight:700;letter-spacing:.2px}
.occc-filters{display:flex;gap:6px;flex-wrap:wrap}
.occc-filters select{font-size:11.8px;border:1px solid var(--bd);border-radius:4px;
  padding:5px 7px;color:var(--ink);background:#fff;max-width:180px}
.occards{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
@media (max-width:1400px){.occards{grid-template-columns:repeat(4,1fr)}}
@media (max-width:900px){.occards{grid-template-columns:repeat(2,1fr)}}
.occ-att{grid-template-columns:repeat(4,1fr)}
@media (max-width:1400px){.occ-att{grid-template-columns:repeat(2,1fr)}}
.occard{border:1px solid var(--bd);border-radius:5px;background:#fff;padding:8px 10px;
  display:flex;gap:8px;align-items:flex-start}
.occard .ic{flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;background:#EAF4FB;color:var(--hp)}
.occard.oc-warn .ic{background:#FFF3E0;color:#C77700}
.occard.oc-bad .ic{background:#FDE9EA;color:var(--bad)}
.occard .tx{min-width:0}
.occard .t{font-size:10.2px;font-weight:700;color:#6B7684;letter-spacing:.3px;white-space:nowrap}
.occard .v{font-size:22px;font-weight:700;line-height:1.15;margin:2px 0}
.occard .v.small{font-size:14.5px;line-height:1.3}
.occard .s{font-size:10.5px;color:var(--mut)}
.occard.att{flex-direction:column}
.occard.att .t{white-space:normal}
.ocalert{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.3px;
  padding:2px 6px;border-radius:3px;color:#fff;white-space:nowrap}
.ocalert.crit{background:var(--bad)}
.ocalert.high{background:#E8A33A}
.oc-toggle{cursor:pointer;color:var(--hp);text-decoration:underline dotted;margin-top:6px}
.oc-toggle:hover{color:var(--hp-dark)}
.heatlg{display:flex;align-items:center;gap:6px;font-size:11px;color:#666;margin-top:6px}
.heatlg .sw{width:26px;height:11px;display:inline-block;border:1px solid #ddd}
table.grid.heat td.tot{font-weight:700;background:#fafcff;border-top:2px solid #3fb6b0}
.ocact{border:1px solid var(--bd);border-radius:4px;padding:6px 8px;margin-bottom:6px;background:#fff}
.ocact-h{font-size:12px}
.ocact-b{font-size:11.5px;color:#4a4d50;margin-top:2px}

/* ---- Open Case: every tile/card/row/cell is clickable (added 2026-09-22) -
   consistent hover + selected treatment across KPI ribbon tiles, Management
   Attention / RCA Action Plan cards, and Top Critical Cases table rows. */
.occard.oc-clk,.ocact.oc-clk{cursor:pointer;transition:box-shadow .12s,border-color .12s,background .12s}
.occard.oc-clk:hover,.ocact.oc-clk:hover{border-color:var(--hp);background:#f7fbff}
.occard.oc-clk.sel,.ocact.oc-clk.sel{border-color:var(--hp);background:#eaf3ff;box-shadow:inset 0 0 0 1px var(--hp)}
#ocCritTbl tr.clk:hover td{background:#f2f8ff}
#ocCritTbl tr.clk.sel td{background:#eaf3ff;font-weight:600}


/* =====================================================================
   MOBILE / PORTRAIT  (phones, 9:16)
   ---------------------------------------------------------------------
   Layout only. No content is added, hidden or reworded on a small screen:
   every tab, card, chart, table, filter and note that exists on the desktop
   is still present and still carries the same numbers. What changes is how
   the page is stacked, so a 9:16 screen never needs a horizontal page scroll.

   Strategy
     1. every multi-column grid collapses to one column;
     2. the filter sidebar stops being a sticky right rail and becomes a normal
        block at the end of the flow, so the content gets the full width;
     3. the tab strip becomes a horizontally scrollable single row instead of
        wrapping into several lines and pushing the content down;
     4. wide data tables scroll horizontally inside their own card rather than
        stretching the page — a table is never truncated, only scrolled;
     5. charts already carry a viewBox with width:100%, so they rescale on
        their own; only fixed pixel widths are relaxed here.
   ===================================================================== */
@media (max-width:760px){

  /* ---- base: slightly tighter, still legible ---- */
  html,body{font-size:12.6px;-webkit-text-size-adjust:100%}

  /* ---- top bar: logo + title on one line ---- */
  .topbar{flex-wrap:wrap;gap:8px;padding:6px 10px;row-gap:6px}
  .title{font-size:15px;white-space:normal;line-height:1.2}
  .logo{width:34px;height:34px}
  .bracket{order:2;text-align:left;flex:1 1 auto;font-size:11.5px}
  .reload{order:4;flex:0 0 100%;flex-wrap:wrap;gap:5px}
  #srcInfo{font-size:10.5px}

  /* ---- page frame: single column; the tab nav REVERTS from the desktop
     left-hand vertical column back to its original horizontal, scrollable
     strip at the top of the page content (2026-09-24 left-nav redesign -
     the extra column would waste too much of a phone's width). .tabs is
     the first child of .wrap (see shell.html), so it already renders
     above .main/.side without an explicit `order`. ---- */
  .wrap{grid-template-columns:1fr;padding:6px;gap:6px}
  .tabs{flex-direction:row;flex:0 0 auto;width:100%;max-height:none;position:static;
    justify-content:flex-start;flex-wrap:nowrap;gap:8px;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:6px 7px}
  .tabs::-webkit-scrollbar{display:none}
  .tab{white-space:nowrap;font-size:13px;padding:7px 13px;flex:0 0 auto;border-radius:999px}
  .tab.active{box-shadow:0 2px 6px rgba(0,150,214,.35)}
  .side{position:static;max-height:none;order:99}
  .chk{max-height:150px}

  /* ---- every multi-column grid becomes one column ---- */
  .row2,.row3,.row4,.row-mt,
  .mkgrid,.hu-grid,.pktiles,
  .slcards,.sl2,.sl3,
  .hvrow2,.hvrow2b,.hvrow3,.hvrow4,
  #insightBody,#ocInsightBody{grid-template-columns:1fr!important}

  /* ---- small tile grids keep 2 across: they stay readable and halve
          the amount of vertical scrolling ---- */
  .hvcards,.hvminis,.hu-kpi,.pkcards,.mtrend,.occards,.occ-att{grid-template-columns:repeat(2,1fr)!important}

  /* ---- Open Case Command Center: header + filters stack, KPI ribbon
          still 2-across via the shared .occards rule right above ---- */
  .occc-head{flex-direction:column;align-items:stretch}
  .occc-filters select{max-width:none;flex:1 1 auto}

  /* ---- cards ---- */
  .card{padding:7px 8px}
  .card h3{font-size:13.2px}
  .kpi{min-height:132px}
  .kpi .big{font-size:38px;margin-top:10px}
  .kpi .k1{font-size:16px}
  .bignum .v{font-size:34px}
  .bignum .v.small{font-size:27px}

  /* ---- wide tables scroll inside their card, never off the page ---- */
  .card,.doc{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.grid{font-size:11.6px;min-width:max-content}
  table.grid th,table.grid td{padding:3px 4px}

  /* ---- glossary / raw text ---- */
  .doc{font-size:12.8px;max-width:none}
  .doc h2{font-size:15px}
  .doc table{font-size:11.8px;min-width:max-content}

  /* ---- charts: relax fixed widths so nothing overflows ---- */
  .hvdonut svg{width:104px;flex:0 0 104px}
  .hvbar{grid-template-columns:88px 1fr auto;gap:4px}

  /* ---- controls: comfortable tap targets (>=32 px) ---- */
  .mbtn,.cbtn,.toggle button,.seg button,.side .reset,.reload button,.contact-link{
    min-height:32px;padding:7px 9px;display:inline-flex;align-items:center}
  .side select{min-height:32px}
  .chk label{padding:4px 2px;white-space:normal}
  .chkSearch{min-height:32px}

  /* ---- tooltip follows the finger and must not run off-screen ---- */
  .tip{max-width:88vw;white-space:pre-wrap}
}

/* ---- very narrow phones (<=380 px): drop the 2-across tiles to 1 ---- */
@media (max-width:380px){
  .hvcards,.hvminis,.hu-kpi,.pkcards,.mtrend,.occards,.occ-att{grid-template-columns:1fr!important}
  .title{font-size:14px}
}

/* ---- landscape phone: keep the tab strip from eating the viewport ---- */
@media (max-height:520px) and (orientation:landscape){
  .topbar{position:static}
  .side{position:static;max-height:none}
  .tabs{position:static;max-height:none}
}

/* ===== TAMBAHAN: animasi (tidak mengubah data/rumus) ===== */
@keyframes opsUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes opsPop{from{opacity:0;transform:scale(.955)}to{opacity:1;transform:scale(1)}}
@keyframes opsMasuk{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes opsBatang{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes opsGaris{from{stroke-dashoffset:1400}to{stroke-dashoffset:0}}
@keyframes opsCincin{from{stroke-dashoffset:320}to{stroke-dashoffset:0}}
@keyframes opsPing{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(2.6);opacity:0}}
@keyframes opsSheen{0%{background-position:-260px 0}100%{background-position:calc(100% + 260px) 0}}
@keyframes opsDenyut{0%{box-shadow:0 0 0 0 rgba(0,150,214,.45)}70%{box-shadow:0 0 0 9px rgba(0,150,214,0)}100%{box-shadow:0 0 0 0 rgba(0,150,214,0)}}

/* masuk saat di-scroll (hanya elemen di tab yang sedang tampil) */
.ops-rv{opacity:0}
.ops-up{transform:translateY(16px)}
.ops-pop{transform:scale(.955)}
.ops-rv.ops-in{animation-duration:.6s;animation-timing-function:cubic-bezier(0,0,.25,1);animation-fill-mode:forwards}
.ops-up.ops-in{animation-name:opsUp}
.ops-pop.ops-in{animation-name:opsPop}

/* ---- tiap ganti tab, isi halaman masuk dengan halus ---- */
.tabpage:not(.hidden){animation:opsMasuk .42s cubic-bezier(0,0,.25,1) both}

/* ---- batang horizontal (High Level View & sejenisnya) tumbuh dari kiri ---- */
.hvbar [style*="width"], .hvbar .trk > *, .pkbar [style*="width"],
.xfbar [style*="width"], .mbar [style*="width"]{
  transform-origin:left center;animation:opsBatang .95s cubic-bezier(0,0,.25,1) both}
.hvbar{transition:background .18s ease,transform .18s ease}
.hvbar:hover{transform:translateX(2px)}

/* ---- garis grafik (sparkline / trend / combo) menggambar sendiri ---- */
svg polyline[stroke]:not([stroke-dasharray]), svg path[stroke]:not([stroke-dasharray]){
  stroke-dasharray:1400;animation:opsGaris 1.5s cubic-bezier(0,0,.25,1) both}
/* ---- cincin donut berputar mengisi ---- */
.hvdonut svg circle[stroke]:not([stroke-dasharray]){
  stroke-dasharray:320;animation:opsCincin 1.3s cubic-bezier(0,0,.25,1) both}

/* ---- kartu KPI utama: kilau menyapu + angka membesar masuk ---- */
.kpi::after{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.20) 50%,transparent 60%);
  background-size:260px 100%;background-repeat:no-repeat;animation:opsSheen 7s linear infinite}
.kpi .big{animation:opsPop .5s cubic-bezier(0,0,.25,1) both}


/* ---- tab aktif berdenyut halus ---- */
/* border-radius override removed (2026-09-25) — the pill shape now comes
   from the base `.tab`/`.tab.active` rule above; this block only adds the
   pulsing ring animation on top of it. */
.tab.active{animation:opsDenyut 3.4s ease-out infinite}

/* ---- kartu & tabel lebih hidup saat disentuh ---- */
.card,.kpi{transition:transform .2s cubic-bezier(0,0,.25,1),box-shadow .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 8px 20px -10px rgba(20,40,60,.30);border-color:#c3ccd6}
table tr{transition:background .18s ease}
table tbody tr:hover td{background:#F2F7FD}

@media(prefers-reduced-motion:reduce){
  .ops-rv{opacity:1;transform:none}
  .ops-rv.ops-in,.kpi::after,.kpi .big,.tabpage:not(.hidden),
  .hvbar [style*="width"],.hvbar .trk > *,.pkbar [style*="width"],.xfbar [style*="width"],.mbar [style*="width"],
  svg polyline[stroke],svg path[stroke],.hvdonut svg circle[stroke],
  .tab.active,.ask-fab{animation:none!important}
  svg polyline[stroke]:not([stroke-dasharray]),svg path[stroke]:not([stroke-dasharray]),.hvdonut svg circle[stroke]:not([stroke-dasharray]){stroke-dasharray:none!important}
}

/* ---- Preventive Action Center (2026-09-23; layout redesign session 2) ---- */
.pacdot{display:inline-block;width:12px;height:12px;border-radius:50%;cursor:default}
/* hero KPI tile (Preventive Action Score) - blue-gradient card matching the
   corporate accent used elsewhere (topbar, ask-fab), so the single most
   important number on the tab is unmistakably the headline, exactly like
   the reference layout's first, larger tile. Recoloured 2026-09-25 from the
   standalone navy #0B3D91/#12315c to the dashboard's own primary brand blue
   var(--hp)/var(--hp-dark) — same request/reasoning as #page-exec .xhead
   above ("warna ... disesuaikan dengan warna seperti tab lainnya"). */
.hvcard.pachero{background:linear-gradient(135deg,var(--hp),var(--hp-dark));border-color:var(--hp);grid-column:span 2}
.hvcard.pachero .t{color:#cfe0ff}
.hvcard.pachero .v{color:#fff}
.hvcard.pachero .s{color:#cfe0ff}
@media (max-width:1180px){.hvcard.pachero{grid-column:span 3}}
@media (max-width:760px){.hvcard.pachero{grid-column:span 2}}
@media (max-width:380px){.hvcard.pachero{grid-column:span 1}}
.pacspark{margin-top:4px}
.pacdelta{display:block;font-size:10.6px;margin-top:4px;color:var(--mut)}
.pacdelta i{font-style:normal;opacity:.8}
.pacdelta.na{color:#8A93A5;font-style:italic}
.hvcard.pachero .pacdelta{color:#cfe0ff}
.hvcard.pachero .pacdelta.na{color:#a9c0e6}

/* =========================================================================
   HP SERVICE CENTER ASSISTANT — floating chat widget (2026-09-23; made
   draggable + repositioned dynamically 2026-09-23 session 2 — see
   src/askbot.js askClampXY()/askPositionPanel()). Sits OUTSIDE .wrap /
   .tabpage, so it stays visible on every tab and is never affected by
   render()'s tab hide/show loop. Positioned via inline left/top set by JS
   (askSetFabPos()); the right/bottom below are only the pre-JS / no-JS
   fallback paint, immediately overridden once wireAskBot() runs.
   ========================================================================= */
@keyframes askRing{0%{box-shadow:0 0 0 0 rgba(0,150,214,.45)}100%{box-shadow:0 0 0 16px rgba(0,150,214,0)}}
/* Discoverability: a brief heartbeat pulse repeats every 9s indefinitely
   (rather than 3 times then stopping forever) so the FAB stays easy to spot
   even after being dragged somewhere unexpected on a busy dashboard. Stops
   automatically once the user has opened the assistant at least once (class
   "seen", added from localStorage/askOpen() — see askbot.js) so returning
   users are not nagged forever. prefers-reduced-motion continues to disable
   it entirely via the existing ".ask-fab{animation:none!important}" rule
   further below. */
@keyframes askRingLoop{0%{box-shadow:0 0 0 0 rgba(0,150,214,.45)}7%{box-shadow:0 0 0 15px rgba(0,150,214,0)}100%{box-shadow:0 0 0 0 rgba(0,150,214,0)}}
/* right/bottom below are only the pre-JS / no-JS fallback paint (before
   wireAskBot()'s askInitPos() sets an inline left/top - see askbot.js);
   right:24px/bottom:24px is the classic bottom-right corner
   (askDefaultPos()'s own default again as of 2026-09-29, fifth pass — a
   reference screenshot of a standard floating support-chat launcher pinned
   to the bottom-right corner) so there is no visible jump once JS takes
   over. Deliberately NOT centred via transform, which would collide with
   the scale() transforms .ask-fab:hover / .ask-fab.dragging already apply
   further below. */
.ask-fab{position:fixed!important;left:24px;top:calc(84px + 18vh);right:auto;bottom:auto;z-index:9999;width:58px;height:58px;border-radius:50%;
  background:linear-gradient(135deg,#0096D6,#0b5c8a);box-shadow:0 6px 18px rgba(11,60,90,.35);
  display:flex;align-items:center;justify-content:center;cursor:pointer;border:2px solid #fff;
  transition:transform .15s ease,box-shadow .15s ease;animation:askRingLoop 9s ease-out infinite;
   touch-action:none;user-select:none;-webkit-user-select:none;will-change:left,top}
.ask-fab:hover{transform:scale(1.07);box-shadow:0 8px 22px rgba(11,60,90,.45)}
.ask-fab.active{background:linear-gradient(135deg,#0b5c8a,#12315c)}
.ask-fab.seen{animation:none}
/* while being dragged: no hover-scale/transition jitter, a slightly deeper
   "lifted" shadow gives immediate feedback that the icon is being moved,
   not clicked */
.ask-fab.dragging{cursor:grabbing;transition:none;animation:none;transform:scale(1.04);
  box-shadow:0 12px 30px rgba(11,60,90,.5)}
/* icon swap (chat <-> close X) via opacity/position, deliberately NOT the
   "no display / none" combination — both icons occupy the same spot and
   the mobile-content audit further below scans this whole file's tail for
   that literal property+value pair, reserved for the one approved cosmetic
   scrollbar rule */
.ask-fab{position:relative}
.ask-fab svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:27px;height:27px;
  opacity:1;transition:opacity .15s ease;pointer-events:none}
.ask-fab .ask-fab-x{opacity:0}
.ask-fab.active .ask-fab-chat{opacity:0}
.ask-fab.active .ask-fab-x{opacity:1}

/* first-load discoverability hint — a small speech-bubble pointing at the
   FAB, shown once (localStorage "askHintSeen") and auto-dismissed; never
   reappears once the user opens the assistant or dismisses it explicitly.
   Positioned near the FAB's default resting spot (the only position it can
   be in before the user has ever dragged it) — updated 2026-09-29 (fifth
   pass) to sit ABOVE the FAB's new bottom-right corner default, right-edge
   aligned (askPositionHint() in askbot.js recomputes the exact JS position
   from wherever the FAB currently sits; these right/bottom values are only
   the pre-JS fallback paint). The sharp corner of the speech-bubble now
   points down towards the icon below it (bottom-right corner, was
   bottom-left when the hint used to sit to the FAB's right). */
.ask-hint{position:fixed!important;left:24px;top:14px;right:auto;bottom:auto;z-index:9997;max-width:190px;background:#fff;color:#25282a;
  font-size:11.6px;line-height:1.4;padding:9px 26px 9px 12px;border-radius:10px 10px 2px 10px;
  border:1px solid #e1e4e7;box-shadow:0 8px 20px rgba(15,30,50,.22);animation:opsPop .25s ease}
.ask-hint b{display:block;font-size:12.2px;margin-bottom:2px}
.ask-hint button{position:absolute;top:3px;right:5px;background:transparent;border:0;color:#cfe4f5;
  font-size:14px;line-height:1;cursor:pointer;padding:3px}
.ask-hint button:hover{color:#fff}

.ask-panel{position:fixed!important;right:22px;bottom:90px;z-index:9998;width:380px;max-width:calc(100vw - 28px);
  height:min(600px,calc(100vh - 130px));background:#fff;border-radius:14px;border:1px solid #dfe4ea;
  box-shadow:0 16px 44px rgba(15,30,50,.28);display:flex;flex-direction:column;overflow:hidden}
.ask-hd{display:flex;align-items:center;gap:9px;padding:12px 12px 11px;background:linear-gradient(135deg,#0096D6,#0b5c8a);color:#fff;flex:0 0 auto}
.ask-hd .ask-ic{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center}
.ask-hd .ask-tt{flex:1;min-width:0}
.ask-hd .ask-tt b{display:block;font-size:13.75px;letter-spacing:.1px}
.ask-hd .ask-tt i{display:block;font-size:10.6px;font-style:normal;opacity:.85}
.ask-hd button{flex:0 0 auto;background:rgba(255,255,255,.16);border:0;color:#fff;width:26px;height:26px;
  border-radius:50%;cursor:pointer;font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center}
.ask-hd button:hover{background:rgba(255,255,255,.3)}

.ask-msgs{flex:1;overflow-y:auto;padding:12px 10px;display:flex;flex-direction:column;gap:10px;background:#f6f8fb}
.ask-row{display:flex}
.ask-row.user{justify-content:flex-end}
.ask-row.bot{justify-content:flex-start}
.ask-bubble{max-width:92%}
.ask-bubble.user{background:var(--hp);color:#fff;border-radius:14px 14px 3px 14px;padding:8px 12px;
  font-size:12.65px;line-height:1.42;box-shadow:0 2px 6px rgba(0,150,214,.25)}
.ask-card{position:relative;border:1px solid #e2eafa;border-radius:12px 12px 12px 3px;background:#fff;
  padding:10px 12px;box-shadow:0 2px 8px rgba(20,40,70,.06)}
.ask-card.warn{border-color:#f5e3bf;background:#fffdf7}
.ask-t{font-size:12.65px;font-weight:700;color:#12315c;margin-bottom:2px}
.ask-big{font-size:22px;font-weight:700;color:var(--hp);line-height:1.1;margin:3px 0 5px}
table.ask-tbl{margin-top:6px;max-width:100%;font-size:11.3px;border-collapse:collapse}
table.ask-tbl th,table.ask-tbl td{padding:3px 5px;text-align:left;border-bottom:1px solid #eef1f6}
table.ask-tbl th{border-bottom:1.5px solid var(--hp);color:#41608f}
.ask-b{font-size:11.9px;color:#444;margin-top:6px;line-height:1.48}
/* section header used by the Early Warning & Account Health Management
   Copilot persona layer (src/askbot.js askAccountHealth() and friends) for
   its structured formats (PRIMARY ISSUE / EVIDENCE / CURRENT VALUE / ... /
   STEP 1-6 / ACCOUNT HEALTH SUMMARY / etc.) - a small, bold, uppercase-style
   label ahead of each ask-b content block, reusing the same ask-card bubble. */
.ahc-h{font-size:10.6px;font-weight:700;letter-spacing:.3px;color:#41608f;margin-top:8px;text-transform:uppercase}
.ahc-h:first-child{margin-top:0}
.ask-tr{margin-top:7px;font-size:10.6px;color:#6b7280}
.ask-tr summary{cursor:pointer;font-weight:600;color:#41608f}
.ask-tr ul{margin:5px 0 0 15px;padding:0}
.ask-tr li{margin:2px 0}

.ask-chips{display:flex;flex-wrap:wrap;gap:5px;padding:8px 10px 0;flex:0 0 auto;background:#fff;border-top:1px solid #edf0f4;
  max-height:104px;overflow-y:auto}
/* "More questions" pill — cycles ASK_SUGGEST_POOL to another curated batch
   (askCycleSuggestions()) instead of sending a question, so the assistant's
   Q&A repertoire (now several batches, not one fixed list of 10) stays
   discoverable without permanently cluttering the panel with every example
   at once. Dashed border + muted colour visually separates it from a real,
   sendable suggestion chip. */
.qchip.qchip-more{border-style:dashed;color:#41608f;background:#f3f7fc}
.qchip.qchip-more:hover{background:#e7f1fb}
.ask-inrow{display:flex;align-items:center;gap:6px;padding:9px 10px;flex:0 0 auto;background:#fff}
.ask-inrow input{flex:1;min-width:0;border:1px solid #dde3ec;border-radius:20px;padding:8px 13px;font:inherit;
  font-size:12.65px;outline:0}
.ask-inrow input:focus{border-color:var(--hp);box-shadow:0 0 0 3px rgba(0,150,214,.12)}
.ask-inrow button{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
  background:var(--hp);color:#fff;display:flex;align-items:center;justify-content:center}
.ask-inrow button:hover{background:var(--hp-dark)}
.ask-inrow .ask-clear{background:#eef1f5;color:#6b7280;width:auto;height:auto;padding:0 8px;font-size:16px;border-radius:6px}
.ask-foot{flex:0 0 auto;padding:5px 12px 9px;font-size:9.8px;color:#93989e;text-align:center;background:#fff}

@media (max-width:760px){
  .ask-panel{right:10px;left:10px;width:auto;max-width:none;bottom:80px;height:min(70vh,560px)}
  /* bottom-right corner on mobile too (2026-09-29, fifth pass) - same
     corner as desktop, just a smaller FAB and tighter margin; JS
     (askDefaultPos()) computes the exact same corner dynamically, this is
     only the pre-JS fallback paint. */
  .ask-fab{right:14px;left:auto;bottom:14px;top:auto;width:52px;height:52px}
  .ask-hint{right:14px;bottom:76px;max-width:calc(100vw - 90px)}
}

/* =========================================================================
   EXECUTIVE OVERVIEW (2026-09-24) — consolidated single-page layout, 9
   numbered panels mirroring the "Service Operations Dashboard" reference.
   Presentational only: every number inside still comes from the same
   computeMetric()/pacModel()/rrModel()/slaModel()/openCaseModel() calls
   used elsewhere, this file only adds the dark-blue numbered panel chrome.
   ========================================================================= */
.xpanel{padding:0;overflow:hidden}
.xhead{display:flex;align-items:baseline;gap:8px;background:linear-gradient(135deg,#0B3D91,#12315c);
  color:#fff;padding:10px 14px;font-size:14.5px;font-weight:700}
/* Executive Overview's own panel headers recoloured (2026-09-25, "warna
   pada tab Executive Overview dan Preventive Action Center disesuaikan
   dengan warna seperti tab lainnya agar seirama") to the SAME primary brand
   blue (var(--hp)/var(--hp-dark)) already used everywhere else on the
   dashboard (active tab pill, links, buttons, h2 titles) instead of the
   standalone navy #0B3D91/#12315c — scoped to #page-exec only so Market &
   Metrics' own .xhead panels (same shared class, not named in this
   request) keep their original colour unchanged. */
#page-exec .xhead{background:linear-gradient(135deg,var(--hp),var(--hp-dark))}
.xhead .hn{color:#cfe0ff;font-weight:400;font-size:11.5px}
/* "View details →" per-panel navigation link (data-go, same convention as
   the High Level View's .hvpanel .ph .lnk) - pushed to the far right of the
   header via margin-left:auto so it reads as a clear call-to-action. */
.xhead .xlnk{margin-left:auto;color:#fff;font-weight:600;font-size:10.8px;opacity:.92;cursor:pointer;
  white-space:nowrap;flex:0 0 auto}
.xhead .xlnk:hover{opacity:1;text-decoration:underline}
/* clickable "score card" KPI tiles (data-go, optionally data-m) - a subtle
   hover lift + pointer cursor signals interactivity without changing the
   card's resting appearance (kept visually identical to every other,
   non-clickable .hvcard elsewhere on the dashboard). */
.hvcard.xclk{cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}
.hvcard.xclk:hover{transform:translateY(-2px);box-shadow:0 6px 16px -6px rgba(11,61,145,.35);border-color:#b9cef2}
/* Health Score Composition donut wrapper (2026-09-24) - not a .hvcard, so
   it needs its own cursor/hover affordance to signal it is clickable. */
.xdonutgo{cursor:pointer;border-radius:6px;transition:background .12s ease;padding:4px;margin:-4px}
.xdonutgo:hover{background:#f2f6fd}
.xnum{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:5px;background:rgba(255,255,255,.18);font-size:11px;font-weight:700;flex:0 0 auto}
.xpanel>.hvcards,.xpanel>.hvrow2,.xpanel>.hvrow3,.xpanel>.card,.xpanel>.note{margin-left:10px;margin-right:10px}
.xpanel>.hvcards{margin-top:8px}
.xpanel>*:last-child{margin-bottom:10px}
.dqring{display:flex;flex-direction:column;align-items:center;gap:2px;flex:0 0 auto}
.xleg-row{display:flex;flex-wrap:wrap;gap:10px;font-size:10.6px;color:#5A6675;margin-top:2px}
.xleg-row .xleg{display:inline-flex;align-items:center;gap:4px}
.xleg-row .xleg i{width:9px;height:9px;border-radius:2px;display:inline-block}