/* ================= MBPHA HRM ================= */
:root{
  --bg:#f1f4f6; --card:#fff; --ink:#16232c; --muted:#5b6b78; --line:#dde4e9;
  --line-soft:#edf1f4;
  --brand:#0c4a3c; --brand-2:#0f6b52; --brand-3:#14866a; --brand-ink:#fff;
  --navy:#1c3d5a; --gold:#a8791d;
  --accent:#b3341f; --ok:#107e3e; --warn:#b7791f; --bad:#bb0000;
  --radius:8px; --radius-sm:6px;
  --shadow:0 1px 2px rgba(20,40,60,.06),0 1px 4px rgba(20,40,60,.07);
  --shadow-lg:0 12px 34px rgba(15,40,62,.22);
  --bar:60px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--brand-2);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- top bar ---------- */
.topbar{height:var(--bar);background:#fff;border-bottom:1px solid #cfdae4;
  display:flex;align-items:center;gap:14px;padding:0 18px;position:sticky;top:0;z-index:40}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);min-width:0}
.brand:hover{text-decoration:none}
.brand img{width:32px;height:32px;object-fit:contain;flex:0 0 32px}
.brand span{font-weight:700;font-size:14.5px;letter-spacing:-.01em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:260px}

.menu-btn{background:none;border:0;font:inherit;font-weight:600;font-size:14.5px;color:var(--brand);
  cursor:pointer;padding:8px 10px;border-radius:6px;white-space:nowrap}
.menu-btn:hover{background:#eaf1ee}
.menu-btn .caret{font-size:10px;opacity:.75;margin-left:2px;display:inline-block;transition:transform .15s}
.menu-btn[aria-expanded="true"] .caret{transform:rotate(180deg)}

.searchpill{flex:1;max-width:520px;margin:0 auto;display:flex;align-items:center;gap:9px;
  background:#fff;border:1px solid #c3d0d8;border-radius:999px;padding:8px 14px;cursor:pointer;
  color:#7b8fa1;font:inherit;font-size:13.5px;transition:border-color .12s,box-shadow .12s}
.searchpill:hover{border-color:var(--brand-3);box-shadow:0 0 0 3px rgba(18,137,224,.1)}
.searchpill .txt{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.searchpill kbd{background:#f1f5f9;border:1px solid #d8e2ea;border-radius:4px;padding:1px 5px;
  font:600 10.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:#7b8fa1}

.topbar-icons{display:flex;align-items:center;gap:6px;margin-left:auto}
.ticon{position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  color:#5f7484;font-size:17px}
.ticon:hover{background:#eaf1ee;color:var(--brand);text-decoration:none}
/* A standing reminder for the Director/CEO accounts: they read, they do not write. */
.viewonly{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;
  border:1px solid #d6c39a;background:#fdf6e6;color:#7a5a12;border-radius:13px;
  font:600 11.5px/1 system-ui;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.viewonly::before{content:"";width:6px;height:6px;border-radius:50%;background:#a8791d}
@media (max-width:760px){.viewonly{display:none}}
.ticon .dot{position:absolute;top:2px;right:0;min-width:16px;height:16px;padding:0 4px;
  background:var(--accent);color:#fff;border:2px solid #fff;border-radius:999px;
  font:700 10px/12px system-ui;display:grid;place-items:center}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:700;margin-left:4px}
.avatar:hover{text-decoration:none;color:#fff}
.signout{font-size:13px;color:#5f7484;padding:6px 10px;border-radius:6px;white-space:nowrap}
.signout:hover{background:#eaf1ee;text-decoration:none}

/* ---------- mega menu ---------- */
.megamenu{position:sticky;top:var(--bar);z-index:39;background:#fff;
  border-bottom:1px solid #cfdae4;box-shadow:0 10px 24px rgba(15,40,62,.12)}
.megamenu[hidden]{display:none}
.mega-inner{max-width:1500px;margin:0 auto;padding:20px 22px 24px;
  display:grid;gap:10px 26px;grid-template-columns:repeat(auto-fit,minmax(182px,1fr))}
.mega-col h4{margin:0 0 7px;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
  color:#8298aa;font-weight:700;padding-bottom:6px;border-bottom:1px solid var(--line)}
.mega-col a{display:flex;align-items:center;gap:6px;padding:5px 7px;border-radius:5px;
  font-size:13.5px;color:var(--ink)}
.mega-col a:hover{background:#eaf1ee;text-decoration:none;color:var(--brand)}
.mega-col a.on{color:var(--brand);font-weight:650;background:#e3eee9}
.pill{margin-left:auto;background:var(--accent);color:#fff;border-radius:999px;padding:0 7px;
  font:700 10.5px/17px system-ui}

/* ---------- page shell ---------- */
.pagehead{max-width:1500px;margin:0 auto;padding:20px 22px 0}
.pagehead h1{margin:0;font-size:24px;font-weight:700;letter-spacing:-.02em}
.content{max-width:1500px;margin:0 auto;padding:18px 22px 34px;width:100%}
.content.is-home{max-width:none;padding:0}
.foot{padding:16px 22px;color:#6f8496;font-size:12px;text-align:center}

/* ---------- home: authority header ---------- */
/* A department masthead, not a marketing banner: crest, name, business of the
   day. Restrained on purpose - this is a government payroll system. */
.masthead{background:var(--brand);color:#fff;border-bottom:3px solid var(--gold)}
.masthead-in{max-width:1500px;margin:0 auto;padding:20px 22px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.masthead img{width:52px;height:52px;object-fit:contain;flex:0 0 52px;
  background:#fff;border-radius:50%;padding:4px}
.masthead-txt{flex:1;min-width:200px}
.masthead-txt h1{margin:0;font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.masthead-txt p{margin:3px 0 0;font-size:12.5px;color:#a9c9bd;letter-spacing:.04em;
  text-transform:uppercase;font-weight:600}
.masthead-when{text-align:right;font-size:12.5px;color:#cfe3db;line-height:1.5}
.masthead-when strong{display:block;color:#fff;font-size:14px;font-weight:650}

.wrap{max-width:1500px;margin:0 auto;padding:24px 22px 34px}
h2.sec{margin:0 0 13px;font-size:13px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted)}
.wrap h2.sec:not(:first-child){margin-top:28px}

/* ---------- home: quick actions ---------- */
/* White cards with a tinted icon. The old full-colour blocks shouted for
   attention that a menu does not deserve - the data should be the loudest
   thing on the page, not the navigation. */
.tiles{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(164px,1fr))}
.tile{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:11px 13px;color:var(--ink);
  box-shadow:0 1px 1px rgba(20,40,60,.04);transition:border-color .12s,box-shadow .12s,transform .12s}
.tile:hover{text-decoration:none;color:var(--ink);border-color:var(--brand-3);transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(16,40,60,.09)}
.tile .ti{display:grid;place-items:center;width:32px;height:32px;border-radius:7px;flex:0 0 32px}
.tile .ti svg{width:18px;height:18px}
.tile .tl{font-size:13px;font-weight:600;line-height:1.3}
.tile.c1 .ti{background:#e8f1ee;color:#0f6b52}
.tile.c2 .ti{background:#e9eef4;color:#1c3d5a}
.tile.c3 .ti{background:#f4efe3;color:#8a6417}
.tile.c4 .ti{background:#eceaf3;color:#4a3aa7}
.tile.c5 .ti{background:#e8f1ee;color:#0f6b52}
.tile.c6 .ti{background:#e9eef4;color:#1c3d5a}
.tile.c7 .ti{background:#f4efe3;color:#8a6417}
.tile.c8 .ti{background:#eceaf3;color:#4a3aa7}
.tile.c9 .ti{background:#eef1f3;color:#5b6b78}

/* ---------- home: for you today ---------- */
.foryou{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.fy{background:#fff;border-radius:var(--radius);padding:15px 17px;box-shadow:var(--shadow)}
.fy-cap{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#5f7484;font-weight:600}
.fy-cap span{color:var(--brand-3);display:grid;place-items:center}
.fy-head{margin-top:9px;font-size:16px;font-weight:700;letter-spacing:-.01em}
.fy-sub{margin-top:3px;font-size:13px;color:#5f7484}
.fy a{display:inline-block;margin-top:9px;font-size:13px;font-weight:600}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);margin-bottom:18px;overflow:hidden}
.card-head{padding:12px 16px;border-bottom:1px solid var(--line-soft);background:#fcfdfe;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card-head h2{font-size:14.5px;margin:0;font-weight:650;flex:1;letter-spacing:-.005em}
.card-body{padding:16px}
.card-body.tight{padding:0}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}

/* ---------- stats ---------- */
.stat{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;box-shadow:var(--shadow);overflow:hidden;
  transition:box-shadow .14s,transform .14s,border-color .14s}
a.stat:hover{box-shadow:0 4px 14px rgba(16,24,40,.09);transform:translateY(-1px);
  border-color:#d3dde7;text-decoration:none}
.stat .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:600}
.stat .v{font-size:25px;font-weight:700;margin-top:3px;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.15}
.stat .s{font-size:12px;color:var(--muted);margin-top:1px}
.stat.accent::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--brand-3),var(--brand-2))}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
table.tbl th{text-align:left;background:#f7fafc;color:var(--muted);font-size:10.5px;
  text-transform:uppercase;letter-spacing:.06em;font-weight:700;padding:9px 12px;
  border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;z-index:1}
table.tbl td{padding:10px 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
table.tbl tbody tr{transition:background .1s}
table.tbl tbody tr:hover{background:#f7fbfa}
table.tbl tr.muted td{opacity:.55}
table.tbl tr:last-child td{border-bottom:0}
.num{text-align:right;font-variant-numeric:tabular-nums}
.empty{padding:28px;text-align:center;color:var(--muted)}

/* ---------- forms ---------- */
.frm{display:grid;gap:14px}
.frm .row{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
label{display:block;font-size:12px;font-weight:600;color:#41505f;margin-bottom:4px}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=time],
input[type=number],input[type=search],select,textarea{
  width:100%;padding:8px 10px;border:1px solid #cfd8e3;border-radius:8px;background:#fff;font:inherit;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(20,128,106,.25);border-color:var(--brand-2)}
textarea{min-height:80px;resize:vertical}
.hint{font-size:11.5px;color:var(--muted);margin-top:3px}
fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin:0 0 4px}
legend{font-size:12px;font-weight:700;color:var(--brand);padding:0 6px;text-transform:uppercase;letter-spacing:.05em}
.checkline{display:flex;align-items:center;gap:8px;font-size:13px}
.checkline input{width:auto}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--radius-sm);
  border:1px solid transparent;background:var(--brand-2);color:#fff;font:inherit;font-weight:600;
  font-size:13px;cursor:pointer;box-shadow:0 1px 2px rgba(16,24,40,.08);
  transition:background .12s,box-shadow .12s,transform .06s}
.btn:hover{background:var(--brand);text-decoration:none;color:#fff;box-shadow:0 2px 6px rgba(15,92,77,.22)}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:#fff;color:var(--ink);border-color:#cfd8e3}
.btn-ghost:hover{background:#f2f5f9;color:var(--ink)}
.btn-danger{background:var(--bad)}
.btn-danger:hover{background:#96281b}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:end;margin-bottom:14px}
.toolbar .grow{flex:1;min-width:180px}

/* ---------- badges & alerts ---------- */
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.02em}
.badge.ok{background:#e6f6ec;color:#0f8a4d}
.badge.warn{background:#fdf3e2;color:#b7791f}
.badge.bad{background:#fdeceb;color:#c0392b}
.badge.muted{background:#eef1f5;color:#6b7787}
.alert{padding:11px 14px;border-radius:8px;margin-bottom:14px;font-size:13.5px;border:1px solid}
.alert.success{background:#e9f7ef;border-color:#bfe6cd;color:#14663f}
.alert.error{background:#fdecea;border-color:#f5c6c0;color:#a02418}
.alert.info{background:#e8f1fb;border-color:#c5dcf5;color:#17527f}
.alert.warn{background:#fdf6e5;border-color:#f0dfb2;color:#8a6212}

/* ---------- misc ---------- */
.meter{height:7px;background:#eef1f5;border-radius:999px;overflow:hidden}
.meter span{display:block;height:100%;background:var(--brand-2)}
.kv{display:grid;grid-template-columns:150px 1fr;gap:6px 14px;font-size:13.5px}
.kv dt{color:var(--muted);font-weight:600;font-size:12px}
.kv dd{margin:0}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap}
.tabs a{padding:8px 13px;border-bottom:2px solid transparent;color:var(--muted);
  font-weight:600;font-size:13px;border-radius:6px 6px 0 0;transition:color .12s,background .12s}
.tabs a:hover{background:#f5f8fa}
.tabs a.on{color:var(--brand-2);border-bottom-color:var(--brand-2);background:#f3faf7}
.tabs a:hover{text-decoration:none;color:var(--ink)}
.pager{display:flex;gap:6px;padding:12px;justify-content:center;flex-wrap:wrap}
.pager a,.pager span{padding:5px 10px;border:1px solid var(--line);border-radius:6px;font-size:12.5px}
.pager .on{background:var(--brand-2);color:#fff;border-color:var(--brand-2)}
.tree{list-style:none;padding-left:18px;margin:0}
.tree li{padding:4px 0;border-left:1px solid var(--line);padding-left:14px;position:relative}
.tree li:before{content:'';position:absolute;left:0;top:14px;width:10px;height:1px;background:var(--line)}
.cal{width:100%;border-collapse:collapse;table-layout:fixed}
.cal th{background:#f8fafc;font-size:11px;text-transform:uppercase;color:var(--muted);padding:6px;border:1px solid var(--line)}
.cal td{border:1px solid var(--line);height:76px;vertical-align:top;padding:4px;font-size:12px}
.cal td.off{background:#fafbfc;color:#b6bec8}
.cal .d{font-weight:700;font-size:11px;color:var(--muted)}
.cal .ev{display:block;background:#e6f6ec;color:#0f6b3e;border-radius:4px;padding:1px 4px;margin-top:2px;font-size:10.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal .ev.hol{background:#fdecea;color:#a02418}
.cal .ev.pend{background:#fdf3e2;color:#8a6212}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;
  background:linear-gradient(135deg,#0d2b26,#14806a)}
.login-card{background:#fff;width:100%;max-width:390px;border-radius:14px;padding:28px;box-shadow:0 20px 45px rgba(0,0,0,.25)}
.login-card h1{margin:0 0 4px;font-size:19px;line-height:1.25;text-align:center}
.login-card p.sub{margin:0 0 20px;color:var(--muted);font-size:13px;text-align:center}
.login-logo{display:block;width:120px;height:auto;margin:0 auto 16px}


/* ---------- quick jump ---------- */
.jump-back{position:fixed;inset:0;background:rgba(12,39,35,.42);backdrop-filter:blur(2px);
  z-index:60;display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px}
.jump-back[hidden]{display:none}
.jump-box{width:100%;max-width:520px;background:#fff;border-radius:14px;box-shadow:var(--shadow-lg);
  overflow:hidden;animation:jumpIn .13s ease-out}
@keyframes jumpIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.jump-box input{width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;
  padding:15px 18px;font-size:15px}
.jump-box input:focus{outline:0;border-color:var(--brand-2)}
.jump-list{list-style:none;margin:0;padding:6px;max-height:46vh;overflow-y:auto}
.jump-list li{border-radius:var(--radius-sm)}
.jump-list li.on{background:#eef7f4}
.jump-list a{display:block;padding:9px 12px;color:var(--ink);font-size:13.5px}
.jump-list a:hover{text-decoration:none}
.jump-list li.on a{color:var(--brand);font-weight:600}
.jump-none{padding:18px 14px;text-align:center;color:var(--muted);font-size:13px}
.jump-foot{border-top:1px solid var(--line-soft);padding:8px 14px;font-size:11px;color:var(--muted);background:#fbfcfd}
.jump-foot kbd{background:#fff;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;
  padding:0 4px;font:600 10px ui-monospace,SFMono-Regular,Menlo,monospace;margin:0 1px}

/* ---------- setup page ---------- */
.setup-section{margin:0 0 22px}
.setup-heading{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  font-weight:700;margin:0 0 9px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.setup-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(236px,1fr))}
.setup-card{display:flex;flex-direction:column;gap:5px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:13px 15px;color:var(--ink);box-shadow:var(--shadow);
  transition:box-shadow .14s,transform .14s,border-color .14s}
.setup-card:hover{text-decoration:none;border-color:var(--brand-3);transform:translateY(-1px);
  box-shadow:0 5px 16px rgba(16,24,40,.1)}
.setup-card-top{display:flex;align-items:center;gap:10px}
.setup-card-top strong{flex:1;font-size:13.5px;font-weight:650;letter-spacing:-.005em}
.setup-count{background:#eef7f4;color:var(--brand);border-radius:999px;padding:1px 9px;
  font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums}
.setup-count.zero{background:#fdf3e2;color:var(--warn)}
.setup-card.is-empty{border-style:dashed}
.setup-blurb{font-size:12px;color:var(--muted);line-height:1.45}
.setup-steps{margin:8px 0 0;padding-left:20px}
.setup-steps li{margin-bottom:5px;font-size:13.5px}
.setup-steps strong{font-weight:650}

/* ---------- print ---------- */
.print-page{max-width:800px;margin:20px auto;background:#fff;padding:34px;border:1px solid var(--line);border-radius:8px}
@media print{
  .topbar,.megamenu,.foot,.no-print,.jump-back,.pagehead{display:none!important}
  .print-page img{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body{background:#fff}
  .print-page{border:0;margin:0;padding:0;max-width:none}
}

@media(max-width:1100px){
  .searchpill .txt{display:none}
  .searchpill{max-width:none;flex:0 0 auto}
  .signout{display:none}
}
@media(max-width:760px){
  .brand span{display:none}
  .searchpill kbd{display:none}
  .content{padding:14px}
  .wrap{padding:18px 14px 28px}
  .pagehead{padding:16px 14px 0}
  .pagehead h1{font-size:20px}
  .hero{height:168px}
  .tiles{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
  .tile{height:82px}
  .kv{grid-template-columns:1fr}
  .setup-grid{grid-template-columns:1fr}
  .mega-inner{grid-template-columns:1fr 1fr;padding:16px 14px}
}

/* ---------- install-as-app ---------- */
.installbtn{display:inline-flex;align-items:center;gap:6px;background:#eaf3fb;border:1px solid #b9d4ea;
  color:var(--brand);border-radius:999px;padding:6px 13px;font:600 12.5px system-ui;cursor:pointer;
  white-space:nowrap;margin-right:4px}
.installbtn:hover{background:#dcecf8;border-color:var(--brand-3)}
.installbtn[hidden]{display:none}
.installbtn span{font-size:13px}
@media(max-width:900px){ .installbtn{display:none} }

/* In the installed app the browser chrome is gone, so give the bar back its
   own top edge and hide the prompt that is no longer relevant. */
@media all and (display-mode:standalone){
  .installbtn{display:none!important}
  .topbar{border-top:3px solid var(--gold)}
}

/* ================= figures ================= */
/* All charts are inline SVG rendered by the server. Every one carries its
   numbers as text as well as colour, so nothing depends on telling two hues
   apart. */
.figgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.fig-caption{margin-top:10px;font-size:12px;color:var(--muted);line-height:1.5}

/* meter */
.meterfig + .meterfig{margin-top:15px}
.meterfig-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:13px;margin-bottom:6px}
.meterfig-top strong{font-variant-numeric:tabular-nums;font-weight:700;font-size:15px}
.meterfig-top strong span{font-weight:400;color:var(--muted);font-size:12.5px}
.meterfig-bar{display:block;width:100%;height:8px}
.meterfig-note{margin-top:5px;font-size:11.5px;color:var(--muted)}

/* horizontal bars */
.barfig-row{display:grid;grid-template-columns:minmax(118px,40%) 1fr auto;align-items:center;
  gap:11px;padding:5px 0}
.barfig-label{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--ink)}
.barfig-track{display:block;min-width:40px}
.barfig-track svg{display:block;width:100%;height:10px}
.barfig-val{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;
  min-width:30px;text-align:right}

/* columns */
.colfig{display:flex;align-items:flex-end;gap:8px;height:160px;padding-top:4px}
.colfig-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%}
.colfig-val{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;margin-bottom:4px}
.colfig-bar-wrap{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;
  border-bottom:1px solid var(--line)}
.colfig-bar{display:block;width:100%;max-width:46px;border-radius:4px 4px 0 0;min-height:3px}
.colfig-label{margin-top:7px;font-size:11px;color:var(--muted);text-align:center;line-height:1.3}
.colfig-col[data-flag="1"] .colfig-label{color:var(--warn);font-weight:650}

/* donut */
.donutfig{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.donutfig-ring{position:relative;flex:0 0 132px;width:132px;height:132px}
.donutfig-svg{width:132px;height:132px;transform:rotate(-90deg)}
.donutfig-centre{position:absolute;inset:0;display:grid;place-content:center;text-align:center;
  line-height:1.2}
.donutfig-centre strong{display:block;font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}
.donutfig-centre span{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.donutfig-legend{list-style:none;margin:0;padding:0;flex:1;min-width:180px}
.donutfig-legend li{display:grid;grid-template-columns:11px 1fr auto auto;align-items:center;
  gap:9px;padding:4px 0;font-size:12.5px;border-bottom:1px solid var(--line-soft)}
.donutfig-legend li:last-child{border-bottom:0}
.donutfig-legend .sw{width:11px;height:11px;border-radius:3px}
.donutfig-legend .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.donutfig-legend .vl{font-weight:700;font-variant-numeric:tabular-nums}
.donutfig-legend .pc{color:var(--muted);font-variant-numeric:tabular-nums;min-width:32px;text-align:right}

/* split bar */
.splitfig-bar{display:flex;height:12px;border-radius:6px;overflow:hidden;gap:2px;background:var(--line)}
.splitfig-bar span{display:block;height:100%}
.splitfig-key{list-style:none;margin:11px 0 0;padding:0;display:flex;gap:18px;flex-wrap:wrap;
  font-size:12.5px}
.splitfig-key li{display:flex;align-items:center;gap:7px}
.splitfig-key .sw{width:11px;height:11px;border-radius:3px}
.splitfig-key .pc{color:var(--muted)}

@media print{ .figgrid{grid-template-columns:1fr 1fr} }