:root{
  --brand:#0a6e4e;
  --brand-dark:#054a34;
  --brand-light:#e6f2ec;
  --navy:#0f1f2e;
  --ink:#16212b;
  --muted:#6b7686;
  --border:#e2e6e6;
  --bg:#f5f6f4;
  --card:#ffffff;
  --good:#1a7f4b;
  --good-bg:#e8f5ee;
  --bad:#b3261e;
  --bad-bg:#fbeae8;
  --warn:#a9660a;
  --warn-bg:#fdf1de;
  --info:#1d4ed8;
  --info-bg:#eaf0fd;
  --grey-bg:#eef0ef;
  --gold:#b9862f;
  --gold-bg:#faf1e2;
  --navy-2:#16344a;
  --chart-grid:#e8ecea; --chart-track:#f0f3f1; --chart-glow:rgba(10,110,78,.18);
  --radius:6px;
  --shadow:0 1px 2px rgba(15,31,46,.06), 0 1px 1px rgba(15,31,46,.04);
  --shadow-lg:0 10px 30px rgba(15,31,46,.10), 0 2px 8px rgba(15,31,46,.06);
  /* Fixed decorative dark-green surfaces (sidebar, hero, snapshot header/footer, tooltips) --
     these always stay dark with white text by design, in both themes, so they're intentionally
     NOT redefined under [data-theme="dark"] below (unlike --navy/--brand, which are theme-swapped). */
  --fixed-navy:#0f1f2e;
  --fixed-navy-2:#16344a;
  --fixed-brand:#0a6e4e;
  --fixed-brand-dark:#054a34;
}
/* ---------- dark theme (Sec. 74 director request: "black and white" theme toggle) ---------- */
html[data-theme="dark"]{
  --brand:#2fbf87; --brand-dark:#1a8f63; --brand-light:#12261f;
  --navy:#eef3f0; --ink:#e7ecec; --muted:#9aa8a4; --border:#2b3733;
  --bg:#11161a; --card:#1a2126;
  --good:#3fcf8e; --good-bg:#122a20; --bad:#ff6b60; --bad-bg:#2c1a19;
  --warn:#e0a23c; --warn-bg:#2b2416; --info:#6d94ff; --info-bg:#1a2036;
  --grey-bg:#232b30; --gold:#e0b45f; --gold-bg:#2b2317; --navy-2:#c7d6e0;
  --chart-grid:#2a3632; --chart-track:#232f2b; --chart-glow:rgba(47,191,135,.22);
  --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-lg:0 10px 30px rgba(0,0,0,.5);
}
html[data-theme="dark"] .snap-sheet, html[data-theme="dark"] .modal{background:var(--card);}
html[data-theme="dark"] img{filter:brightness(.92) contrast(1.05);}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Inter',Segoe UI,Arial,sans-serif; background:var(--bg); color:var(--ink);
  font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased;
}
a{color:var(--brand-dark); text-decoration:none;}
h1,h2,h3,h4{margin:0; font-weight:700; color:var(--navy);}
button{font-family:inherit; cursor:pointer;}
table{border-collapse:collapse; width:100%;}
.hidden{display:none !important;}

/* ---------- shell ---------- */
#shell{display:flex; min-height:100vh;}
#sidebar{
  width:248px; background:linear-gradient(190deg, var(--fixed-navy) 0%, #0a1826 100%); color:#dbe7e1; flex-shrink:0;
  display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0; overflow-y:auto; z-index:20;
  transition:width .16s ease;
  border-right:1px solid rgba(255,255,255,.05);
}
#sidebar .brand{display:flex; align-items:center; gap:10px; padding:14px 12px; border-bottom:1px solid rgba(255,255,255,.08);}
#sidebar .brand .mark{width:34px; height:34px; border-radius:7px; background:linear-gradient(135deg, var(--fixed-brand), var(--fixed-brand-dark)); display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; font-size:13px; box-shadow:0 3px 10px rgba(10,110,78,.4);}
#sidebar .brand .brand-seal{width:34px; height:34px; border-radius:50%; object-fit:cover; flex-shrink:0; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.35);}
#sidebar .brand .name{font-weight:700; font-size:13.5px; color:#fff; line-height:1.2; flex:1; min-width:0;}
#sidebar .brand .name small{display:block; font-weight:500; color:#9fb3ac; font-size:10.5px; letter-spacing:.04em;}
.sidebar-pin-btn{width:26px; height:26px; border-radius:6px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.06);
  color:#c7d6cf; display:flex; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer;}
.sidebar-pin-btn:hover{background:rgba(255,255,255,.14); color:#fff;}
html[data-sidebar="collapsed"] .sidebar-pin-btn{color:#22c98a;}
.navgroup{margin-top:14px;}
.navgroup .navlabel{padding:0 16px; font-size:10.5px; letter-spacing:.08em; color:#7f958d; text-transform:uppercase; margin-bottom:4px;}
.navitem{display:flex; align-items:center; gap:10px; padding:8px 16px; color:#c7d6cf; font-size:13px; border-left:3px solid transparent; cursor:pointer;}
.navitem:hover{background:rgba(255,255,255,.06); color:#fff;}
.navitem.active{background:linear-gradient(90deg, rgba(10,110,78,.35), rgba(10,110,78,.05)); color:#fff; border-left-color:#22c98a; font-weight:600;}
.navitem svg{flex-shrink:0; opacity:.85;}
.navitem.active svg{opacity:1;}
#sidebar-foot{margin-top:auto; padding:12px 16px; border-top:1px solid rgba(255,255,255,.08); font-size:11px; color:#7f958d;}

/* ---------- sidebar pin/unpin: collapses to an icon-only rail (desktop only) ---------- */
@media (min-width:901px){
  html[data-sidebar="collapsed"] #sidebar{width:64px;}
  html[data-sidebar="collapsed"] #main{margin-left:64px;}
  html[data-sidebar="collapsed"] .navgroup .navlabel{display:none;}
  html[data-sidebar="collapsed"] .navitem{justify-content:center; padding:10px 0;}
  html[data-sidebar="collapsed"] .navitem .nav-label{display:none;}
  html[data-sidebar="collapsed"] #sidebar .brand{flex-direction:column; padding:14px 6px;}
  html[data-sidebar="collapsed"] .brand .name{display:none;}
  html[data-sidebar="collapsed"] #sidebar-foot{display:none;}

  /* Hovering the collapsed rail temporarily peeks it open (overlaying the content, since #main
     stays at the 64px margin) without changing the pinned/unpinned state itself. */
  html[data-sidebar="collapsed"] #sidebar:hover{width:248px; box-shadow:6px 0 24px rgba(0,0,0,.35);}
  html[data-sidebar="collapsed"] #sidebar:hover .navgroup .navlabel{display:block;}
  html[data-sidebar="collapsed"] #sidebar:hover .navitem{justify-content:flex-start; padding:8px 16px;}
  html[data-sidebar="collapsed"] #sidebar:hover .navitem .nav-label{display:inline;}
  html[data-sidebar="collapsed"] #sidebar:hover .brand{flex-direction:row; padding:14px 12px;}
  html[data-sidebar="collapsed"] #sidebar:hover .brand .name{display:block;}
  html[data-sidebar="collapsed"] #sidebar:hover #sidebar-foot{display:block;}
  /* Collapsing the sidebar is meant to reclaim screen width -- don't waste it as empty margins
     by keeping the same 1360px reading-width cap; let content use the freed-up space instead. */
  html[data-sidebar="collapsed"] #page{max-width:none;}
}

#main{flex:1; margin-left:248px; min-width:0; display:flex; flex-direction:column;}
#topbar{
  height:56px; background:var(--card); border-bottom:1px solid var(--border); display:flex; align-items:center;
  padding:0 20px; gap:14px; position:sticky; top:0; z-index:10;
}
#topbar .page-title{font-weight:700; font-size:16px; color:var(--navy); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#topbar .btn{flex-shrink:0; white-space:nowrap;}
#topbar .spacer{flex:1;}
.pub-status{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:20px; font-size:11.5px; font-weight:700; letter-spacing:.02em;}
.pub-status.official{background:var(--good-bg); color:var(--good);}
.pub-status.provisional{background:var(--warn-bg); color:var(--warn);}
.iconbtn{position:relative; width:34px; height:34px; flex-shrink:0; border-radius:50%; border:1px solid var(--border); background:var(--card); color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center;}
.iconbtn .badge-count{position:absolute; top:-5px; right:-5px; z-index:1; box-sizing:border-box; white-space:nowrap; background:var(--bad); color:#fff; font-size:10.5px; line-height:13px; font-weight:700; border-radius:99px; padding:0 4px; min-width:18px; height:16px; text-align:center; border:1.5px solid var(--card); box-shadow:0 1px 2px rgba(0,0,0,.25);}
.userchip{display:flex; align-items:center; gap:8px; padding:4px 10px 4px 4px; border:1px solid var(--border); border-radius:20px; background:var(--card); font-size:12.5px; flex-shrink:0;}
.userchip .av{width:26px;height:26px;border-radius:50%;background:var(--brand-light); color:var(--brand-dark); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:11px;}
.role-tag{font-size:10px; font-weight:700; color:var(--brand-dark); background:var(--brand-light); border-radius:4px; padding:1px 6px; letter-spacing:.03em;}

#page{padding:22px 26px 60px; max-width:1360px; width:100%; margin:0 auto;}
.print-mode #sidebar,.print-mode #topbar,.print-mode .no-print{display:none !important;}
.print-mode #main{margin-left:0;}

/* ---------- primitives ---------- */
.grid{display:grid; gap:14px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:1100px){ .grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} }

.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);}
.card .card-hd{display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--border);}
.card .card-hd h3{font-size:13.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted);}
.card .card-bd{padding:16px;}
.card-hd .spacer{flex:1;}

.kpi{padding:16px;}
.kpi .lbl{font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; margin-bottom:8px;}
.kpi .val{font-size:28px; font-weight:800; color:var(--navy); letter-spacing:-.01em;}
.kpi .sub{font-size:12.5px; margin-top:6px; color:var(--muted);}
.kpi .sub.good{color:var(--good);} .kpi .sub.bad{color:var(--bad);}

.badge{display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; padding:3px 8px; border-radius:4px; letter-spacing:.01em;}
.badge.good{background:var(--good-bg); color:var(--good);}
.badge.bad{background:var(--bad-bg); color:var(--bad);}
.badge.warn{background:var(--warn-bg); color:var(--warn);}
.badge.info{background:var(--info-bg); color:var(--info);}
.badge.grey{background:var(--grey-bg); color:var(--muted);}

.pct{font-weight:700;}
.pct.up{color:var(--bad);} .pct.down{color:var(--good);} .pct.flat{color:var(--muted);}
.pct.up.goodup{color:var(--good);} .pct.down.baddown{color:var(--bad);}

.btn{display:inline-flex; align-items:center; gap:6px; border-radius:5px; border:1px solid var(--border); background:var(--card); color:var(--ink); padding:7px 13px; font-size:12.5px; font-weight:600;}
.btn:hover{border-color:#c7cfcd;}
.btn.primary{background:var(--brand); border-color:var(--brand); color:#fff;}
.btn.primary:hover{background:var(--brand-dark);}
.btn.danger{background:var(--bad); border-color:var(--bad); color:#fff;}
.btn.ghost{background:transparent; border-color:transparent;}
.btn.sm{padding:4px 9px; font-size:11.5px;}
.btn:disabled{opacity:.45; cursor:not-allowed;}

input[type=text],input[type=number],input[type=email],input[type=password],input[type=date],input[type=search],input[type=tel],select,textarea{
  width:100%; border:1px solid var(--border); border-radius:5px; padding:7px 10px; font-size:13px; font-family:inherit; background:var(--card); color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand-light); border-color:var(--brand);}
label.field-label{font-size:11.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; display:block; margin-bottom:4px;}

table.dtable{font-size:12.8px;}
table.dtable th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); padding:8px 10px; border-bottom:1px solid var(--border); background:#fafbfa; position:sticky; top:0; cursor:pointer; white-space:nowrap;}
table.dtable th[data-k]:hover{color:var(--ink);}
table.dtable td{padding:8px 10px; border-bottom:1px solid #eef0ef; white-space:nowrap;}
table.dtable tbody tr:hover{background:#fafcfb;}
.table-wrap{overflow:auto; max-height:560px; border:1px solid var(--border); border-radius:var(--radius);}
.table-wrap table.dtable{border:none;}
.table-wrap table.dtable th{border-top:none;}

.tabs{display:flex; gap:2px; border-bottom:1px solid var(--border); margin-bottom:14px;}
.tab{padding:8px 14px; font-size:12.8px; font-weight:600; color:var(--muted); border-bottom:2px solid transparent; cursor:pointer;}
.tab.active{color:var(--brand-dark); border-bottom-color:var(--brand);}

.progress{height:8px; border-radius:5px; background:var(--grey-bg); overflow:hidden;}
.progress > span{display:block; height:100%; background:var(--brand);}
.progress.thin{height:5px;}

.banner{border-radius:var(--radius); padding:10px 14px; font-size:12.8px; font-weight:600; display:flex; gap:8px; align-items:center;}
.banner.provisional{background:repeating-linear-gradient(135deg, var(--warn-bg) 0 10px, #fff6e8 10px 20px); border:1px solid #f0d4a0; color:var(--warn);}
.banner.official{background:var(--good-bg); border:1px solid #b9e3cb; color:var(--good);}
.banner.info{background:var(--info-bg); border:1px solid #c8d8fb; color:var(--info);}

.modal-bg{position:fixed; inset:0; background:rgba(15,31,46,.45); display:flex; align-items:center; justify-content:center; z-index:100;}
.modal{background:var(--card); border-radius:8px; width:460px; max-width:92vw; box-shadow:0 10px 40px rgba(0,0,0,.2);}
.modal.modal-wide{width:920px;}
.modal .modal-hd{padding:14px 18px; border-bottom:1px solid var(--border); font-weight:700; display:flex; justify-content:space-between;}
.modal .modal-bd{padding:16px 18px;}
.modal .modal-bd.scroll{max-height:72vh; overflow-y:auto;}
.modal .modal-ft{padding:12px 18px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px;}

.empty-state{text-align:center; padding:44px 20px; color:var(--muted);}
.empty-state .big{font-size:15px; font-weight:700; color:var(--ink); margin-bottom:6px;}

.wf-timeline{display:flex; align-items:center; gap:0;}
.wf-step{display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; position:relative;}
.wf-step .circ{width:26px; height:26px; border-radius:50%; background:var(--grey-bg); color:var(--muted); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; border:2px solid var(--border);}
.wf-step.done .circ{background:var(--good); color:#fff; border-color:var(--good);}
.wf-step.current .circ{background:var(--card); color:var(--brand); border-color:var(--brand);}
.wf-step .lbl{font-size:11px; color:var(--muted); text-align:center;}
.wf-step:not(:last-child)::after{content:''; position:absolute; top:13px; left:60%; right:-40%; height:2px; background:var(--border); z-index:0;}
.wf-step.done:not(:last-child)::after{background:var(--good);}

.chip-row{display:flex; flex-wrap:wrap; gap:6px;}
.chip{border:1px solid var(--border); border-radius:20px; padding:4px 10px; font-size:12px; background:var(--card);}

.map-wrap{display:flex; gap:18px;}
.map-detail-panel{width:320px; flex-shrink:0;}
@media (max-width:900px){ .map-wrap{flex-direction:column;} .map-detail-panel{width:100%;} }
.legend-item{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted);}
.legend-dot{width:10px;height:10px;border-radius:2px;}

.search-box{position:relative;}
.search-box input{padding-left:30px;}
.search-box .ic{position:absolute; left:9px; top:8px; color:var(--muted); font-size:13px;}

.link-row{cursor:pointer;}
.link-row:hover td{color:var(--brand-dark);}

::-webkit-scrollbar{width:9px; height:9px;}
::-webkit-scrollbar-thumb{background:#cfd6d3; border-radius:5px;}

/* ---------- login ---------- */
.login-wrap{min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:32px 16px; background:radial-gradient(1200px 600px at 85% 110%, rgba(47,191,135,.28), transparent 60%), radial-gradient(900px 500px at 0% -10%, rgba(22,52,74,.9), transparent 60%), linear-gradient(135deg,#0b1722,#0a4a37);}
.login-shell{display:grid; grid-template-columns:1.05fr 1fr; width:100%; max-width:920px; border-radius:18px; overflow:hidden; background:var(--card); box-shadow:0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06); animation:loginIn .45s cubic-bezier(.2,.7,.2,1) both;}
@keyframes loginIn{from{opacity:0; transform:translateY(12px) scale(.985);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce){.login-shell{animation:none;}}
.login-brand{position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:36px; padding:40px; color:#fff; background:linear-gradient(160deg,var(--fixed-navy-2) 0%,var(--fixed-navy) 45%,var(--fixed-brand-dark) 100%); overflow:hidden;}
.login-brand::before{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size:18px 18px; mask-image:linear-gradient(180deg,transparent,#000 40%,#000 70%,transparent); pointer-events:none;}
.login-brand::after{content:""; position:absolute; width:360px; height:360px; right:-140px; bottom:-140px; border-radius:50%; background:radial-gradient(circle,rgba(47,191,135,.35),transparent 65%); pointer-events:none;}
.login-brand > *{position:relative; z-index:1;}
.login-brand-top{display:flex; align-items:center; gap:14px;}
.login-seal{width:56px; height:56px; border-radius:50%; object-fit:cover; flex-shrink:0; background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.14), 0 6px 18px rgba(0,0,0,.35);}
.login-seal.sm{width:42px; height:42px;}
html[data-theme="dark"] img.login-seal{filter:none;}
.login-brand-org{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.7); line-height:1.5;}
.login-brand-org span{color:#fff; font-weight:700;}
.login-brand-title{color:#fff; font-size:30px; line-height:1.15; letter-spacing:-.01em;}
.login-brand-sub{margin:12px 0 0; color:rgba(255,255,255,.75); font-size:14px; line-height:1.6; max-width:34ch;}
.login-points{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:12px;}
.login-points li{display:flex; align-items:center; gap:10px; font-size:13.5px; color:rgba(255,255,255,.9);}
.login-points li svg{flex-shrink:0; color:#5fe0ad;}
.login-brand-foot{font-size:12px; color:rgba(255,255,255,.55); padding-top:16px; border-top:1px solid rgba(255,255,255,.1);}
.login-card{padding:48px 44px; display:flex; flex-direction:column; justify-content:center;}
.login-card h1{font-size:24px; letter-spacing:-.01em;}
.login-card p.sub{color:var(--muted); font-size:13.5px; margin:6px 0 26px;}
.login-mobile-head{display:none; align-items:center; gap:12px; margin-bottom:26px;}
.login-mobile-title{font-weight:700; color:var(--navy); font-size:15px;}
.login-label-row{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.login-label-row .field-label{margin-bottom:4px;}
.login-input{position:relative; display:flex; align-items:center;}
.login-input input[type]{width:100%; height:44px; padding:0 42px 0 40px; font-size:14px; border-radius:10px; background:var(--bg); transition:border-color .15s, box-shadow .15s, background .15s;}
.login-input input[type]:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--border));}
.login-input input[type]:focus{outline:none; background:var(--card); border-color:var(--brand); box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 18%,transparent);}
.login-input-icon{position:absolute; left:13px; display:flex; color:var(--muted); pointer-events:none; transition:color .15s;}
.login-input:focus-within .login-input-icon{color:var(--brand);}
.login-eye{position:absolute; right:6px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; border:0; border-radius:8px; background:transparent; color:var(--muted);}
.login-eye:hover{color:var(--ink); background:var(--grey-bg);}
.login-eye:focus-visible,.login-link:focus-visible,.login-remember input:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}
.login-link{border:0; background:none; padding:0 0 4px; font-size:12.5px; font-weight:600; color:var(--brand); cursor:pointer;}
.login-link:hover{text-decoration:underline;}
.login-caps{display:flex; align-items:center; gap:6px; margin-top:7px; font-size:12px; font-weight:600; color:var(--warn);}
.login-caps[hidden],.login-alert[hidden]{display:none;}
.login-remember{display:flex; align-items:center; gap:8px; margin-top:16px; font-size:13px; color:var(--muted); cursor:pointer; user-select:none;}
.login-remember input{width:16px; height:16px; margin:0; accent-color:var(--brand);}
.login-alert{margin-top:16px; padding:10px 12px; border-radius:10px; font-size:13px; line-height:1.45; border:1px solid;}
.login-alert.bad{color:var(--bad); background:var(--bad-bg); border-color:color-mix(in srgb,var(--bad) 30%,transparent);}
.login-alert.ok{color:var(--good); background:var(--good-bg); border-color:color-mix(in srgb,var(--good) 30%,transparent);}
.btn.login-submit{width:100%; height:46px; margin-top:20px; justify-content:center; font-size:14.5px; border-radius:10px; box-shadow:0 8px 20px color-mix(in srgb,var(--brand) 30%,transparent);}
.btn.login-submit:disabled{opacity:.85; cursor:progress;}
.login-spinner{display:none; width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; animation:loginSpin .7s linear infinite;}
.login-submit.loading .login-spinner{display:inline-block;}
@keyframes loginSpin{to{transform:rotate(360deg);}}
.login-secure{display:flex; align-items:center; justify-content:center; gap:6px; margin-top:22px; font-size:12px; color:var(--muted);}
.login-secure svg{color:var(--good);}
.login-copy{font-size:12px; color:rgba(255,255,255,.55); text-align:center;}
@media (max-width:760px){
  .login-shell{grid-template-columns:1fr; max-width:440px;}
  .login-brand{display:none;}
  .login-mobile-head{display:flex;}
  .login-card{padding:32px 24px;}
}
.tooltip-box{position:absolute; background:var(--fixed-navy); color:#fff; font-size:11.5px; padding:6px 9px; border-radius:5px; pointer-events:none; display:none; z-index:30; line-height:1.4;}

/* ---------- Sindh map: schematic but map-shaped (landmass silhouette + river), not floating dots ---------- */
.map-sea-bg{}
.map-landmass{stroke:#8fcaa8; stroke-width:2.5;}
.map-river{fill:none; stroke:#7bb8e4; stroke-width:4.5; stroke-linecap:round; opacity:.8;}
.map-river-glow{fill:none; stroke:#bfe0f5; stroke-width:9; stroke-linecap:round; opacity:.35;}
.map-graticule{stroke:#dce8e2; stroke-width:1; stroke-dasharray:3 5;}
.map-terrain-hill{fill:#b08a55; opacity:.16;}
.map-terrain-desert{fill:#d9b872; opacity:.22;}
.map-legend-strip{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:8px; padding-top:8px; border-top:1px solid var(--border);}
.map-legend-strip .ml-item{display:flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); font-weight:600;}
.map-legend-strip .ml-dot{width:10px; height:10px; border-radius:50%; flex-shrink:0; box-shadow:0 1px 2px rgba(0,0,0,.2);}
/* The map's own surfaces (land/sea, legend box) are deliberately fixed-light in both themes --
   it's meant to look like a real map, not a themed UI panel -- so every label/text drawn on top
   of it uses fixed dark colors too, never the theme-swapped --navy/--muted/--ink variables
   (which turn near-white in dark mode and would vanish against this always-light background). */
.map-compass{font-size:12px; font-weight:800; fill:#6b7686;}
.map-sea-label{font-size:11px; font-style:italic; fill:#8bb3cc; letter-spacing:.05em;}
.map-dot{filter:drop-shadow(0 1px 2px rgba(0,0,0,.28)); transition:r .12s;}
.map-dot:hover{filter:drop-shadow(0 2px 5px rgba(0,0,0,.4));}
.map-label{font-size:8.5px; fill:#16212b; pointer-events:none; font-weight:600; paint-order:stroke; stroke:#fff; stroke-width:2.5;}
.map-legend{position:absolute; right:14px; bottom:14px; background:rgba(255,255,255,.95); border:1px solid #e2e6e6; border-radius:8px; padding:10px 12px; font-size:11.5px; box-shadow:0 10px 30px rgba(15,31,46,.15); max-width:210px; color:#16212b;}
.map-legend .ml-title{font-weight:700; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:#6b7686; margin-bottom:6px;}
.map-legend .ml-row{display:flex; align-items:center; gap:7px; margin-top:4px; color:#16212b;}
.map-legend .ml-dot{width:10px; height:10px; border-radius:50%; flex-shrink:0; border:1px solid rgba(0,0,0,.15);}

.divider{height:1px; background:var(--border); margin:16px 0;}
.muted{color:var(--muted);}
.small{font-size:11.8px;}
.mono{font-family:Consolas,monospace;}
.text-right{text-align:right;}
.flex{display:flex; align-items:center;}
.flex.gap6{gap:6px;} .flex.gap10{gap:10px;} .flex.between{justify-content:space-between;} .flex.wrap{flex-wrap:wrap;}
.mt6{margin-top:6px;} .mt10{margin-top:10px;} .mt14{margin-top:14px;} .mt20{margin-top:20px;}

/* ---------- icon badges & KPI card v2 (eye-catching headline surfaces) ---------- */
.icon-badge{
  width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.icon-badge.lg{width:48px; height:48px; border-radius:14px;}
.icon-badge.tone-brand{background:linear-gradient(135deg, var(--brand), var(--brand-dark)); color:#fff;}
.icon-badge.tone-navy{background:linear-gradient(135deg, var(--fixed-navy-2), var(--fixed-navy)); color:#fff;}
.icon-badge.tone-good{background:linear-gradient(135deg, #22a866, var(--good)); color:#fff;}
.icon-badge.tone-bad{background:linear-gradient(135deg, #d1453a, var(--bad)); color:#fff;}
.icon-badge.tone-warn{background:linear-gradient(135deg, #cf8a2a, var(--warn)); color:#fff;}
.icon-badge.tone-info{background:linear-gradient(135deg, #3b6ae8, var(--info)); color:#fff;}
.icon-badge.tone-gold{background:linear-gradient(135deg, #d7a94f, var(--gold)); color:#fff;}

.kpi2{padding:17px 18px; position:relative; overflow:hidden; transition:transform .15s, box-shadow .15s;}
.kpi2::before{content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--brand), var(--gold));}
.kpi2:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg);}
.kpi2 .val{font-size:26px; font-weight:800; color:var(--navy); letter-spacing:-.01em;}
.kpi2.kpi2-big .val{font-size:34px;}
.kpi2 .lbl2{font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; margin-top:3px;}
.kpi2 .sub{font-size:12.5px; margin-top:6px; color:var(--muted);}

/* ---------- hero banner (Home / Overview / Snapshot headline) ---------- */
.hero-banner{
  border-radius:12px; padding:26px 28px; color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(120deg, var(--fixed-navy) 0%, var(--fixed-navy-2) 55%, var(--fixed-brand-dark) 100%);
  box-shadow:var(--shadow-lg);
}
.hero-banner::after{
  content:''; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:radial-gradient(circle at 85% 15%, rgba(255,255,255,.12), transparent 45%),
             radial-gradient(circle at 10% 100%, rgba(185,134,47,.18), transparent 40%);
}
.hero-banner .hero-top{position:relative; display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:14px;}
.hero-banner .hero-eyebrow{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#9fd8bd; font-weight:700;}
.hero-banner h1{color:#fff; font-size:24px; margin-top:4px;}
.hero-banner .hero-sub{color:#c7d6cf; font-size:12.8px; margin-top:4px;}
.hero-banner .hero-stats{position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:22px;}
.hero-stat{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:9px; padding:12px 14px; backdrop-filter:blur(2px);}
.hero-stat .hs-lbl{font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:#a9c2ba; font-weight:700;}
.hero-stat .hs-val{font-size:21px; font-weight:800; color:#fff; margin-top:4px; letter-spacing:-.01em;}
.hero-stat .hs-sub{font-size:11.5px; color:#b9c9c2; margin-top:3px;}
.hero-pub-pill{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:20px; font-size:11px; font-weight:700; letter-spacing:.02em; background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.22);}
.hero-pub-pill.official{background:rgba(34,200,138,.22); border-color:rgba(34,200,138,.4);}
.hero-pub-pill.provisional{background:rgba(201,148,60,.22); border-color:rgba(201,148,60,.4);}
@media (max-width:900px){ .hero-banner .hero-stats{grid-template-columns:repeat(1,1fr);} }

/* ---------- coverage stat circles ---------- */
.coverage-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.stat-circle-item{text-align:center; padding:14px 8px;}
.stat-circle-item .icon-badge{margin:0 auto 10px;}
.stat-circle-item .sc-val{font-size:24px; font-weight:800; color:var(--navy);}
.stat-circle-item .sc-lbl{font-size:11.5px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.03em; margin-top:2px;}
@media (max-width:700px){ .coverage-grid{grid-template-columns:repeat(2,1fr);} }

/* ---------- readiness ring (DG executive review) ---------- */
.ring-wrap{position:relative; width:116px; height:116px; flex-shrink:0;}
.ring-wrap svg{transform:rotate(-90deg);}
.ring-wrap .ring-bg{fill:none; stroke:rgba(255,255,255,.15); stroke-width:10;}
.ring-wrap .ring-fg{fill:none; stroke:#4fe0a0; stroke-width:10; stroke-linecap:round; transition:stroke-dashoffset .4s;}
.ring-center{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.ring-center .rc-val{font-size:22px; font-weight:800; color:#fff;}
.ring-center .rc-lbl{font-size:9.5px; color:#b9c9c2; text-transform:uppercase; letter-spacing:.04em; margin-top:1px;}

/* ---------- stage funnel bar (workflow-at-a-glance) ---------- */
.stage-bar{display:flex; height:14px; border-radius:8px; overflow:hidden; background:rgba(255,255,255,.1); margin-top:16px;}
.stage-bar .seg{height:100%; transition:width .3s;}
.stage-legend{display:flex; flex-wrap:wrap; gap:14px; margin-top:10px;}
.stage-legend .sl-item{display:flex; align-items:center; gap:6px; font-size:11.5px; color:#dbe7e1;}
.stage-legend .sl-dot{width:9px; height:9px; border-radius:3px; flex-shrink:0;}
.stage-legend .sl-item b{color:#fff;}

/* ---------- status filter tabs (pill style, with counts) ---------- */
.status-tabs{display:flex; flex-wrap:wrap; gap:8px;}
.status-tab{display:flex; align-items:center; gap:7px; padding:7px 13px; border-radius:20px; border:1px solid var(--border); background:var(--card); font-size:12.5px; font-weight:600; color:var(--muted); cursor:pointer;}
.status-tab .cnt{background:var(--grey-bg); color:var(--ink); border-radius:10px; padding:1px 7px; font-size:11px; font-weight:700;}
.status-tab:hover{border-color:#c7cfcd;}
.status-tab.active{background:var(--fixed-navy); border-color:var(--fixed-navy); color:#fff;}
.status-tab.active .cnt{background:rgba(255,255,255,.2); color:#fff;}
.status-tab.tone-bad.active{background:var(--bad); border-color:var(--bad);}
.status-tab.tone-warn.active{background:var(--warn); border-color:var(--warn);}
.status-tab.tone-good.active{background:var(--good); border-color:var(--good);}
.status-tab.tone-info.active{background:var(--info); border-color:var(--info);}

.district-card{border:1px solid var(--border); border-radius:9px; padding:14px; background:var(--card); transition:box-shadow .15s, border-color .15s;}
.district-card:hover{box-shadow:var(--shadow-lg); border-color:#d3dad8;}
.district-card.flagged{border-color:#f0c4bd; background:linear-gradient(180deg,#fffaf9,#fff);}

/* ---------- weekly snapshot poster ---------- */
.snap-sheet{background:var(--card); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid var(--border);}
.snap-header{
  background:linear-gradient(120deg, var(--fixed-brand-dark) 0%, var(--fixed-brand) 55%, #0d7f57 100%);
  color:#fff; padding:26px 30px; position:relative; overflow:hidden;
}
.snap-header::after{ content:''; position:absolute; inset:0; opacity:.55; pointer-events:none;
  background:radial-gradient(circle at 90% 0%, rgba(255,255,255,.14), transparent 45%); }
.snap-header .snap-top{position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px;}
.snap-emblem{flex-shrink:0;}
@media (max-width:640px){
  .snap-header{padding:20px 16px;}
  .snap-top{flex-direction:column;}
  .snap-title-block h1{font-size:17px;}
  .snap-body{padding:18px 16px;}
  .snap-footer{padding:14px 16px; flex-direction:column;}
}
.snap-emblem{width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.14); border:2px solid rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px; flex-shrink:0;}
.snap-title-block{text-align:center; flex:1;}
.snap-title-block .st-eyebrow{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#cdeadd;}
.snap-title-block h1{color:#fff; font-size:21px; letter-spacing:.02em; margin-top:2px;}
.snap-title-block .st-badge{display:inline-block; margin-top:8px; padding:4px 14px; border-radius:20px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35); font-size:11px; font-weight:700; letter-spacing:.05em;}
.snap-title-block .st-week{margin-top:8px; font-size:12px; color:#e3f3ea;}
.snap-body{padding:26px 30px;}
.snap-section-title{font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--navy); margin-bottom:12px; display:flex; align-items:center; gap:8px;}
.snap-section-title .bar{width:4px; height:14px; background:var(--brand); border-radius:2px; display:inline-block;}
.snap-mover-row{display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px dashed var(--border);}
.snap-mover-row:last-child{border-bottom:none;}
.snap-mover-row .mi{width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.snap-finding{display:flex; gap:10px; align-items:flex-start; padding:9px 0;}
.snap-finding .fi{width:26px; height:26px; border-radius:50%; background:var(--brand-light); color:var(--brand-dark); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.snap-footer{background:var(--fixed-navy); color:#b9c9c2; padding:14px 30px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:11.5px;}
.snap-footer b{color:#fff;}
.snap-division-table td, .snap-division-table th{padding:9px 10px;}
@page{ size:A4; margin:12mm; }
@media print{
  .no-print{display:none !important;}
  #sidebar, #topbar, #hamburger, #sidebarBackdrop{display:none !important;}
  #main{margin-left:0 !important;}
  *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; color-adjust:exact !important; }
  html, body{background:#fff;}
  #page{padding:0; max-width:none; width:100%;}
  .snap-sheet{box-shadow:none; border:none; border-radius:0;}
  .card, .snap-header, .snap-footer, .kpi2, .hero-banner, .snap-finding, .district-card{
    break-inside:avoid; page-break-inside:avoid;
  }
  canvas{ max-width:100% !important; }

  /* Weekly snapshot: packed as tight as the content allows, then left to reflow naturally across
     pages (no forced break -- a hard break wastes whatever room is left on the first page and
     was pushing this to 3 pages instead of 2). Chrome's own print header/footer (date, title,
     URL) eats extra space beyond the @page margin, so this errs well on the side of compact. */
  .snap-header{ padding:10px 16px; }
  .snap-title-block h1{ font-size:14px; margin-top:0; }
  .snap-title-block .st-eyebrow{ font-size:8px; }
  .snap-title-block .st-badge{ margin-top:2px; padding:1px 8px; font-size:8.5px; }
  .snap-title-block .st-week{ margin-top:2px; font-size:9.5px; }
  .snap-emblem{ width:30px; height:30px; font-size:10px; }
  .snap-body{ padding:8px 14px; }
  .snap-body .card{ margin-top:6px !important; }
  .snap-body .card-hd{ padding:5px 10px; }
  .snap-body .card-hd .icon-badge{ width:18px !important; height:18px !important; }
  .snap-body .card-bd{ padding:6px 10px; }
  .snap-body h3{ font-size:11px; margin:0; }
  .snap-body .grid{ gap:6px !important; }
  .snap-body .grid-3{ grid-template-columns:repeat(3,1fr) !important; }
  .snap-body .grid-2{ grid-template-columns:repeat(2,1fr) !important; }
  .coverage-grid{ grid-template-columns:repeat(4,1fr) !important; }
  .snap-footer{ padding:6px 16px; font-size:9px; }
  .coverage-grid{ gap:6px !important; }
  .coverage-grid .stat-circle-item{ padding:2px 4px; }
  .coverage-grid .icon-badge{ width:20px !important; height:20px !important; margin-bottom:3px !important; }
  .stat-circle-item .sc-val{ font-size:15px; }
  .stat-circle-item .sc-lbl{ font-size:8px; }
  .snap-mover-row{ padding:2px 0; }
  .snap-finding{ padding:3px 0; }
  .kpi2{ padding:6px 10px !important; }
  .kpi2 .val{ font-size:15px !important; }
  .kpi2.kpi2-big .val{ font-size:18px !important; }
  .kpi2 .lbl2{ font-size:8.5px; margin-top:1px; }
  .kpi2 .sub{ font-size:8.5px; margin-top:2px; }
  .snap-division-table td, .snap-division-table th{ padding:3px 8px; font-size:9.5px; }
  .small{ font-size:9.5px !important; }
  .snap-mover-row .mi{ width:16px !important; height:16px !important; }
  .snap-body .mt6, .snap-body .mt10, .snap-body .mt14, .snap-body .mt20{ margin-top:4px !important; }
}

/* ---------- home page: spinning seal, district marquee, sparkline table, theme toggle ---------- */
@keyframes badge-spin-3d{ 0%{transform:rotateY(0deg);} 100%{transform:rotateY(360deg);} }
.spin-seal{ width:64px; height:64px; border-radius:50%; overflow:hidden; flex-shrink:0; background:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.25); border:3px solid rgba(255,255,255,.6); }
.spin-seal img{ width:100%; height:100%; object-fit:cover; transform-style:preserve-3d; backface-visibility:visible;
  animation:badge-spin-3d 7s linear infinite; }

.district-marquee{ overflow:hidden; position:relative; padding:10px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.district-marquee .dm-track{ display:flex; gap:14px; width:max-content; animation:dm-scroll 42s linear infinite; }
.district-marquee:hover .dm-track{ animation-play-state:paused; }
@keyframes dm-scroll{ 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }
.dm-badge{ display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--border); border-radius:20px;
  padding:6px 14px 6px 6px; white-space:nowrap; box-shadow:var(--shadow); }
.dm-badge .dm-circle{ width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--brand-dark));
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; flex-shrink:0; }
.dm-badge .dm-name{ font-size:12px; font-weight:600; color:var(--ink); }

.district-rail{ width:230px; flex-shrink:0; min-height:0; display:flex; flex-direction:column; border-radius:12px;
  background:var(--fixed-navy); box-shadow:var(--shadow-lg); overflow:hidden; }
.district-rail .dr-head{ padding:12px 14px 9px; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:#9fb3ac; border-bottom:1px solid rgba(255,255,255,.08); flex-shrink:0; }
.district-rail .dr-viewport{ flex:1; min-height:0; overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 4%,#000 96%,transparent); }
.district-rail .dr-track{ display:flex; flex-direction:column; gap:8px; padding:10px 12px; animation:dr-scroll 36s linear infinite; }
.district-rail:hover .dr-track{ animation-play-state:paused; }
@keyframes dr-scroll{ 0%{transform:translateY(0);} 100%{transform:translateY(-50%);} }
.dr-badge{ display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:20px; padding:6px 12px 6px 6px; white-space:nowrap; cursor:pointer; transition:background .15s; }
.dr-badge:hover{ background:rgba(255,255,255,.16); }
.dr-badge .dm-circle{ width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,var(--fixed-brand),var(--fixed-brand-dark));
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; flex-shrink:0; }
.dr-badge .dm-name{ font-size:12px; font-weight:600; color:#fff; }
@media (max-width:900px){ .district-rail{ width:100%; min-height:220px; margin-top:14px; } }

.spark-table td.spark-cell{ padding:4px 10px; }
.spark{ display:block; }

.theme-toggle{ display:flex; align-items:center; gap:6px; border:1px solid var(--border); border-radius:20px; padding:4px 5px;
  background:var(--card); cursor:pointer; flex-shrink:0; }
.theme-toggle .tt-opt{ padding:3px 10px; border-radius:16px; font-size:11.5px; font-weight:700; color:var(--muted); transition:background .15s, color .15s; }
.theme-toggle .tt-opt:not(.active):hover{ background:var(--grey-bg); color:var(--ink); }
.theme-toggle .tt-opt.active{ background:var(--navy); color:#fff; }
html[data-theme="dark"] .theme-toggle .tt-opt.active{ background:var(--brand); color:#0b1210; }

.spi-def-card{ background:linear-gradient(135deg,var(--brand-light),var(--card)); border:1px solid var(--border); }
.rural-urban-split{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ru-tile{ border-radius:10px; padding:16px; text-align:center; }
.ru-tile.urban{ background:var(--info-bg); }
.ru-tile.rural{ background:var(--good-bg); }
.ru-tile .ru-val{ font-size:26px; font-weight:800; color:var(--navy); }
.ru-tile .ru-lbl{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; margin-top:2px;}

.cat-move-list{ max-height:250px; overflow-y:auto; }
.cat-move-row{ display:flex; align-items:center; gap:10px; padding:7px 2px; border-bottom:1px dashed var(--border); cursor:pointer; }
.cat-move-row:last-child{ border-bottom:none; }
.cat-move-row:hover{ background:var(--grey-bg); }
.cat-move-row .cmr-name{ width:128px; flex-shrink:0; font-size:12px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cat-move-row .cmr-bar{ flex:1; height:11px; border-radius:6px; overflow:hidden; display:flex; background:var(--grey-bg); box-shadow:inset 0 0 0 1px var(--border); }
.cat-move-row .cmr-bar .seg{ height:100%; }
.cat-move-row .cmr-bar .seg.inc{ background:var(--bad); }
.cat-move-row .cmr-bar .seg.dec{ background:var(--good); }
.cat-move-row .cmr-bar .seg.unc{ background:var(--muted); opacity:.3; }
.cat-move-row .cmr-counts{ display:flex; gap:7px; width:82px; flex-shrink:0; justify-content:flex-end; font-size:11px; font-weight:800; }
.cat-move-row .cmr-counts .up{ color:var(--bad); }
.cat-move-row .cmr-counts .down{ color:var(--good); }

.cat-chip-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.cat-chip{ border:1px solid var(--border); border-radius:8px; padding:10px 12px; background:var(--card); transition:box-shadow .15s; }
.cat-chip:hover{ box-shadow:var(--shadow-lg); cursor:pointer; }
.cat-chip .cc-name{ font-size:12px; font-weight:700; color:var(--ink); }
.cat-chip .cc-meta{ font-size:11px; color:var(--muted); margin-top:2px; }

/* ---------- Home refresh: presentation-only layer ----------
   Keeps all existing calculations and interactions unchanged while giving the landing
   page a clearer visual rhythm and a more polished, executive dashboard feel. */
.home-page{--home-gap:18px;}
.home-page > .flex:first-child{gap:20px !important; align-items:stretch !important;}
.home-page .spin-seal{width:72px;height:72px;border-width:4px;box-shadow:0 8px 22px rgba(15,31,46,.18);}
.home-page .flex.gap10[style*="margin-bottom"]{padding:4px 2px 2px; margin-bottom:18px !important;}
.home-page .flex.gap10[style*="margin-bottom"] h2{font-size:22px; letter-spacing:-.025em;}
.home-page .flex.gap10[style*="margin-bottom"] .small{color:var(--brand-dark); font-size:10.5px; letter-spacing:.13em;}
.home-page .hero-banner{min-height:278px; padding:30px 32px; border-radius:18px; box-shadow:0 18px 40px rgba(15,31,46,.16);}
.home-page .hero-banner h1{font-size:29px; letter-spacing:-.035em; max-width:560px;}
.home-page .hero-banner .hero-sub{font-size:13px; margin-top:8px;}
.home-page .hero-banner .hero-stats{gap:12px; margin-top:30px;}
.home-page .hero-stat{padding:15px 16px; border-radius:12px; background:rgba(255,255,255,.085); transition:background .18s, transform .18s;}
.home-page .hero-stat:hover{background:rgba(255,255,255,.14); transform:translateY(-2px);}
.home-page .hero-stat .hs-val{font-size:25px;}
.home-page .district-rail{width:244px; border-radius:16px; box-shadow:0 18px 38px rgba(15,31,46,.18);}
.home-page .district-rail .dr-head{padding:15px 16px 11px; font-size:10px; color:#b6cec4;}
.home-page .district-rail .dr-track{gap:7px; padding:12px 13px;}
.home-page .dr-badge{padding:7px 12px 7px 7px; background:rgba(255,255,255,.075);}
.home-page .dr-badge .dm-circle{width:28px;height:28px;}
.home-page > .mt20 > .card,
.home-page > .mt14 > .card,
.home-page > .card{border-radius:14px; box-shadow:0 8px 24px rgba(15,31,46,.055); overflow:hidden;}
.home-page .card .card-hd{padding:15px 18px; background:linear-gradient(180deg, color-mix(in srgb, var(--card) 94%, var(--brand-light)), var(--card));}
.home-page .card .card-hd h3{font-size:12px; letter-spacing:.08em; color:var(--navy);}
.home-page .card .card-bd{padding:18px;}
.home-page .spi-def-card{background:linear-gradient(120deg, color-mix(in srgb, var(--brand-light) 80%, var(--card)), var(--card) 72%); border-color:color-mix(in srgb, var(--brand) 18%, var(--border));}
.home-page .coverage-grid{gap:10px;}
.home-page .coverage-grid .stat-circle-item{padding:17px 10px; border-radius:12px; transition:background .18s, transform .18s;}
.home-page .coverage-grid .stat-circle-item:hover{background:var(--brand-light); transform:translateY(-2px);}
.home-page .coverage-grid .sc-val{font-size:26px;}
.home-page .grid.grid-2{gap:18px !important;}
.home-page .rural-urban-split{gap:12px;}
.home-page .ru-tile{padding:18px 14px; border:1px solid color-mix(in srgb, var(--brand) 10%, transparent);}
.home-page .cat-chip-grid{gap:11px;}
.home-page .cat-chip{padding:13px 14px; border-radius:10px; background:linear-gradient(145deg,var(--card),color-mix(in srgb, var(--brand-light) 32%, var(--card)));}
.home-page .cat-chip:hover{border-color:color-mix(in srgb, var(--brand) 45%, var(--border)); transform:translateY(-2px);}
.home-page .cat-chip .cc-name{font-size:12.5px;}
.home-page .map-wrap, .home-page .table-wrap{border-radius:10px;}
.home-page .map-legend-strip{padding-bottom:2px;padding-top:5px;margin-top:5px;gap:10px;}
.home-page .home-map-card{padding:8px !important;}
.home-page .spark-table tbody tr{transition:background .15s, transform .15s; cursor:pointer;}
.home-page .spark-table tbody tr:hover{background:var(--brand-light);}
.home-page .snap-finding{padding:10px 0; border-bottom:1px solid color-mix(in srgb, var(--border) 72%, transparent);}
.home-page .snap-finding:last-of-type{border-bottom:0;}

/* ---------- Home executive polish ---------- */
@keyframes home-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes map-ping{0%{opacity:.75;transform:scale(.7)}70%{opacity:0;transform:scale(1.8)}100%{opacity:0;transform:scale(1.8)}}
@keyframes live-blink{0%,100%{opacity:1}50%{opacity:.35}}
.home-page > *{animation:home-rise .55s cubic-bezier(.2,.7,.2,1) both;}
.home-page > *:nth-child(2){animation-delay:.05s}.home-page > *:nth-child(3){animation-delay:.1s}.home-page > *:nth-child(4){animation-delay:.15s}.home-page > *:nth-child(5){animation-delay:.2s}.home-page > *:nth-child(6){animation-delay:.25s}
.home-page .hero-banner{background:radial-gradient(circle at 96% 108%,rgba(255,58,105,.62),transparent 46%),radial-gradient(circle at 88% 8%,rgba(255,196,77,.30),transparent 30%),linear-gradient(118deg,#150f5c 0%,#2226a3 46%,#3a3fe0 100%);}
.home-page .hero-banner::before{content:'';position:absolute;inset:0;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='white' stroke-width='1.3'%3E%3Cpath d='M24 2 46 24 24 46 2 24Z'/%3E%3Cpath d='M24 13 35 24 24 35 13 24Z'/%3E%3C/g%3E%3Cg fill='white'%3E%3Ccircle cx='24' cy='24' r='2.2'/%3E%3Ccircle cx='0' cy='0' r='2.2'/%3E%3Ccircle cx='48' cy='0' r='2.2'/%3E%3Ccircle cx='0' cy='48' r='2.2'/%3E%3Ccircle cx='48' cy='48' r='2.2'/%3E%3C/g%3E%3C/svg%3E");background-size:48px 48px;-webkit-mask-image:linear-gradient(110deg,transparent 12%,#000 88%);mask-image:linear-gradient(110deg,transparent 12%,#000 88%);pointer-events:none;}
.home-page .hero-banner::after{background:none;}
.home-page .hero-banner::after{animation:hero-glow 8s ease-in-out infinite alternate;}
@keyframes hero-glow{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.08)}}
.home-page .hero-stat{backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.16);background:rgba(10,8,60,.34);}
.home-page .hero-stat:hover{background:rgba(10,8,60,.5);}
.home-page .hero-banner .hero-eyebrow{color:#ffd37a;}
.home-page .hero-banner .hero-sub{color:#dfe2ff;}
.home-page .hero-stat .hs-lbl{color:#c9cdfb;}
.home-page .hero-stat .hs-sub{color:#d3d6fb;}
.home-page .hero-pub-pill.official{background:rgba(52,232,160,.24);border-color:rgba(120,255,200,.55);}
.commodity-ticker{position:relative;margin:6px 0 2px;padding:8px 0;overflow:hidden;border-radius:14px;background:linear-gradient(100deg,#e11d52 0%,#b3153f 48%,#6d1146 100%);box-shadow:0 14px 28px rgba(179,21,63,.28)}
.commodity-ticker::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 12% 0%,rgba(255,196,77,.28),transparent 34%),radial-gradient(circle at 92% 100%,rgba(58,63,224,.45),transparent 40%);pointer-events:none}.ticker-label{position:relative;z-index:1;display:flex;align-items:center;gap:7px;padding:0 16px 8px;color:#ffe3a6;font-size:9px;font-weight:800;letter-spacing:.14em}.ticker-live-dot{width:6px;height:6px;border-radius:50%;background:#ffc44d;box-shadow:0 0 0 4px rgba(255,196,77,.25);animation:live-blink 1.7s ease-in-out infinite}.ticker-viewport{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}.ticker-track{display:flex;gap:9px;width:max-content;padding:2px 14px 6px;animation:commodity-scroll 110s linear infinite}.commodity-ticker:hover .ticker-track{animation-play-state:paused}@keyframes commodity-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.commodity-ticker-card{display:grid;grid-template-columns:30px minmax(92px,1fr) 70px;align-items:center;gap:8px;width:218px;min-height:56px;padding:8px 10px;border:1px solid rgba(255,255,255,.2);border-radius:11px;background:rgba(21,15,92,.62);color:#fff;text-align:left;cursor:pointer;transition:transform .18s,background .18s,border-color .18s}.commodity-ticker-card:hover{transform:translateY(-3px);background:rgba(34,38,163,.85);border-color:rgba(255,211,122,.7)}.ctc-icon{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.16);font-size:16px}.ctc-copy{min-width:0}.ctc-copy b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px}.ctc-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px;color:#c9cdfb;font-size:9px}.ctc-trend{display:flex;align-items:flex-end;flex-direction:column;gap:1px}.ctc-trend .spark{opacity:.9}.ctc-trend em{font-size:10px;font-style:normal;font-weight:800}.ctc-trend em.up,.ctc-trend .pct.up{color:#ffc4ba}.ctc-trend em.down,.ctc-trend .pct.down{color:#86f0bd}.ctc-trend .pct.flat{color:#d4d8ff}
.home-info-collapsible{border:0;border-radius:12px;overflow:visible;background:transparent}.home-info-toggle{display:inline-flex;align-items:center;gap:6px;width:fit-content;max-width:100%;padding:5px 8px 5px 6px;border:1px solid color-mix(in srgb,var(--brand) 24%,var(--border));border-radius:20px;background:var(--card);color:var(--brand-dark);font:inherit;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;text-align:left;cursor:pointer;box-shadow:0 2px 8px rgba(15,31,46,.05)}.home-info-toggle:hover{background:var(--brand-light);border-color:var(--brand)}.home-info-icon{display:inline-flex;align-items:center;justify-content:center;width:23px;height:23px;border-radius:50%;background:var(--brand);color:#fff;font-size:14px;font-family:Georgia,serif;font-weight:700;text-transform:none}.home-info-chevron{display:inline-flex;align-items:center;justify-content:center;width:12px;height:16px;margin-left:-2px;color:var(--brand);font-size:15px;font-weight:700;line-height:1;letter-spacing:0}.home-info-body{display:none;padding-top:10px}.home-info-collapsible.is-open .home-info-body{display:block}.home-info-body>.card{border:0;border-radius:12px;box-shadow:none}.home-info-body>.card .card-hd{display:none}
.map-card-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:10px;padding:1px 4px 4px}.map-card-head h3{color:var(--navy);margin:0;font-size:12.5px;justify-self:center;text-align:center;white-space:nowrap}
.map-kicker{font-size:8.5px;letter-spacing:.14em;font-weight:800;color:var(--brand);justify-self:start}.map-head-actions{display:flex;align-items:center;gap:9px;justify-self:end}.map-live{font-size:9px;letter-spacing:.12em;font-weight:800;color:var(--good);display:inline-flex;align-items:center;gap:5px}.map-live i{width:7px;height:7px;border-radius:50%;background:var(--good);animation:live-blink 1.7s ease-in-out infinite}
.home-map-shell{position:relative;height:175px;margin-top:2px;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#eef8fd 0%,#c9e6f7 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.home-map-shell::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.2),transparent 35%,rgba(10,110,78,.08));}
.map-status-card{position:absolute;z-index:2;left:11px;top:11px;padding:7px 10px;border-radius:9px;background:rgba(15,31,46,.86);color:#fff;box-shadow:0 8px 18px rgba(15,31,46,.16);backdrop-filter:blur(8px)}.msc-label{font-size:7.5px;letter-spacing:.12em;color:#a9c8bc;font-weight:800}.map-status-card strong{display:block;font-size:18px;line-height:1.1;margin-top:3px}.map-status-card strong span{font-size:11px;color:#a9c8bc;margin-left:2px}.msc-sub{font-size:9px;color:#cfe0da;margin-top:4px}.msc-sub b{color:#fff}.map-hint{position:absolute;z-index:2;right:13px;top:13px;text-align:right;color:#416172;font-size:10px;font-weight:700;line-height:1.35}.map-hint span{font-weight:500;color:#6b8c9d}
.map-pulse{transform-box:fill-box;transform-origin:center;animation:map-ping 2.4s ease-out infinite;pointer-events:none}.home-map-shell .map-dot{transition:transform .18s ease,filter .18s ease}.home-map-shell .map-dot:hover{transform:scale(1.35);filter:drop-shadow(0 3px 5px rgba(15,31,46,.45))}
@media (prefers-reduced-motion:reduce){.home-page > *,.home-page .hero-banner::after,.map-pulse,.map-live i,.ticker-live-dot{animation:none !important}.district-rail .dr-track,.district-marquee .dm-track,.commodity-ticker .ticker-track{animation:none !important}}
@media (max-width:900px){
  .home-page .hero-banner{min-height:0; padding:24px 22px;}
  .home-page .hero-banner h1{font-size:25px;}
  .home-page .district-rail{width:100%;}
}
@media (max-width:600px){
  .home-page .flex.gap10[style*="margin-bottom"] h2{font-size:18px;}
  .home-page .spin-seal{width:58px;height:58px;}
  .home-page .hero-banner{padding:20px 18px; border-radius:14px;}
  .home-page .hero-banner h1{font-size:22px;}
  .home-page .card .card-bd{padding:14px;}
  .home-page .card .card-hd{padding:13px 14px;}
  .map-card-head{grid-template-columns:1fr;row-gap:4px;justify-items:center;text-align:center;}
  .map-card-head h3{justify-self:center;white-space:normal;}
  .map-kicker{justify-self:center;}
  .map-head-actions{justify-self:center;}
}

/* ---------- responsive (Sec. 43): sidebar becomes an off-canvas drawer below 900px ---------- */
#hamburger{display:none;}
#sidebarBackdrop{display:none;}
@media (max-width:900px){
  #sidebar{ transform:translateX(-100%); transition:transform .22s ease; }
  #sidebar.open{ transform:translateX(0); box-shadow:0 0 40px rgba(0,0,0,.35); }
  #main{ margin-left:0; }
  #page{ padding:14px 14px 50px; }
  #hamburger{ display:flex; }
  #sidebarBackdrop.open{ display:block; position:fixed; inset:0; background:rgba(15,31,46,.4); z-index:19; }
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .pub-status{display:none;}
}
@media (max-width:700px){
  /* DG Executive Review's approval-summary row: a hardcoded 4-column inline grid (not the
     .grid-4 class above) squeezed into whatever's left beside the fixed-width approval ring,
     which cut "Overall Completion" off the edge on a phone. */
  .dg-kpi-grid{grid-template-columns:repeat(2,1fr) !important;}
}
@media (max-width:420px){
  .dg-kpi-grid{grid-template-columns:1fr !important;}
}
@media (max-width:560px){
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}
  #topbar{padding:0 10px; gap:8px;}
  .userchip > div{display:none;}
  /* Longer role names (SUPERVISOR, ADMIN) pushed the topbar past the edge even with the name
     hidden above -- the avatar initials plus the caret are enough to open the account menu,
     which still shows the full role tag inside. */
  .userchip .role-tag{display:none;}
  #topbar .page-title{display:none;}
  .theme-toggle .tt-opt{padding:3px 7px;}
}

/* ---------- Home: Leaflet district-tour map (js/leaflet-map.js) ---------- */
.home-map-card{position:relative;padding-top:14px !important}
.home-map-card::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#e11d52 0%,#ffc44d 34%,#3a3fe0 68%,#e11d52 100%)}
.home-map-card .map-kicker{color:#c8163f}
.home-page .home-map-shell{height:clamp(340px,50vh,470px);border-radius:14px;background:#d9e8f2}
.home-map-shell .map-status-card{background:rgba(21,15,92,.92);border:1px solid rgba(255,255,255,.14);z-index:6}
.home-map-shell .msc-label{color:#ffd37a}
.home-map-shell .map-status-card .pct.up{color:#ffb3a7}.home-map-shell .map-status-card .pct.down{color:#7cf0b8}.home-map-shell .map-status-card .pct.flat{color:#d4d8ff}
.home-map-shell.is-leaflet::after{display:none}
.home-map-fallback{position:absolute;inset:0}
.spi-lmap{position:absolute;inset:0;z-index:0;background:#d9e8f2;font-family:inherit}
.spi-lmap.is-dark-tiles .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.9) saturate(.8)}
.spi-lmap .leaflet-control-attribution{font-size:9.5px;background:rgba(255,255,255,.72)}
.spi-lmap .leaflet-bar{border:0;border-radius:10px;overflow:hidden;box-shadow:0 6px 16px rgba(21,15,92,.22)}
.spi-lmap .leaflet-bar a{color:#2226a3;font-weight:700}
/* markers */
.spi-mk-wrap{background:none;border:0}
.spi-mk{position:relative;display:block;width:26px;height:26px}
.spi-mk b{position:absolute;inset:5px;border-radius:50%;background:var(--c);border:2.5px solid #fff;box-shadow:0 2px 6px rgba(21,15,92,.45);transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s}
.spi-mk i{position:absolute;inset:1px;border-radius:50%;border:2px solid var(--c);opacity:0;pointer-events:none}
.spi-mk.big i{animation:map-ping 2.4s ease-out infinite}
.spi-mk-wrap.is-active .spi-mk b{transform:scale(1.55);box-shadow:0 0 0 4px rgba(255,196,77,.6),0 4px 12px rgba(21,15,92,.5)}
.spi-mk-wrap.is-active .spi-mk i{border-color:#ffc44d;opacity:1;animation:map-ping 1.6s ease-out infinite}
/* the little district card */
.spi-dcard{position:absolute;left:0;top:0;z-index:7;width:216px;padding:12px 14px 12px;border-radius:14px;overflow:visible;cursor:pointer;color:#fff;
  background:linear-gradient(150deg,rgba(21,15,92,.96),rgba(58,39,150,.96) 70%,rgba(140,20,70,.96));border:1px solid rgba(255,255,255,.22);
  box-shadow:0 14px 30px rgba(21,15,92,.42);will-change:transform}
.spi-dcard::after{content:'';position:absolute;left:var(--ax,50%);bottom:-7px;width:14px;height:14px;margin-left:-7px;transform:rotate(45deg);background:rgba(58,39,150,.96);border-right:1px solid rgba(255,255,255,.22);border-bottom:1px solid rgba(255,255,255,.22);border-radius:0 0 3px 0}
.spi-dcard.below::after{bottom:auto;top:-7px;transform:rotate(225deg);background:rgba(21,15,92,.96)}
.spi-dcard:focus-visible{outline:3px solid #ffc44d;outline-offset:2px}
.dc-in{position:relative;padding-bottom:10px;animation:dc-pop .38s cubic-bezier(.2,.8,.2,1) both}
@keyframes dc-pop{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
.dc-top{display:flex;justify-content:space-between;gap:8px;font-size:10px;font-weight:700;color:#c9cdfb}
.dc-div{color:#ffd37a}
.dc-name{margin:5px 0 0;color:#fff;font-size:18px;letter-spacing:-.02em;line-height:1.15}
.dc-main{display:flex;align-items:baseline;gap:8px;margin-top:8px}
.dc-pct{font-size:22px;font-weight:800;letter-spacing:-.02em}
.dc-pct.up,.dc-up{color:#ffb3a7}.dc-pct.down,.dc-down{color:#7cf0b8}.dc-pct.flat,.dc-flat{color:#d4d8ff}
.dc-main small{font-size:10.5px;color:#c9cdfb}
.dc-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.16);font-size:10.5px;color:#c9cdfb}
.dc-row b{color:#fff;font-weight:800}
.dc-row b.dc-up{color:#ffb3a7}.dc-row b.dc-down{color:#7cf0b8}.dc-row b.dc-flat{color:#d4d8ff}
.dc-bar{position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden}
.dc-bar::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#ffc44d,#ff5c86);transform-origin:left;animation:dc-countdown linear forwards;animation-duration:inherit}
@keyframes dc-countdown{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.home-map-shell.is-paused .dc-bar::after{animation-play-state:paused}
.spi-tour-btn{position:absolute;left:13px;bottom:13px;z-index:6;display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:0;border-radius:20px;background:rgba(21,15,92,.92);color:#fff;font-size:11px;font-weight:700;box-shadow:0 6px 16px rgba(21,15,92,.3)}
.spi-tour-btn:hover{background:#2226a3}
.spi-tour-btn:focus-visible{outline:3px solid #ffc44d;outline-offset:2px}
.spi-tour-btn span{font-size:9px}
@media (max-width:600px){
  .home-page .home-map-shell{height:360px}
  .spi-dcard{width:186px;padding:10px 12px 10px}
  .dc-name{font-size:16px}.dc-pct{font-size:19px}
  .home-map-shell .map-status-card{display:none}
}
@media (prefers-reduced-motion:reduce){.spi-mk i,.dc-in,.dc-bar::after{animation:none !important}.dc-bar::after{transform:none}}

/* ---------- Home: compact hero (no greeting / status pill, trend line in every tile) ---------- */
.home-page .hero-banner.hero-compact{min-height:0;padding:9px 16px 10px;border-radius:14px}
.home-page .hero-compact .hero-top-brand{display:flex;justify-content:flex-start;align-items:center;gap:10px;flex-wrap:nowrap}
.home-page .hero-compact .spin-seal{width:30px;height:30px;border-width:2px;box-shadow:0 4px 12px rgba(10,8,60,.35)}
.home-page .hero-compact .hero-brand-title{margin:0;font-size:13px;font-weight:800;color:#fff;letter-spacing:-.01em;line-height:1.2}
.home-page .hero-compact .hero-eyebrow{margin-top:2px;font-size:9.5px}
.home-page .hero-compact .hero-sub{margin-top:2px;font-size:11.5px;font-weight:600;color:#fff}
.home-page .hero-compact .hero-stats{gap:8px;margin-top:8px}
.home-page .hero-compact .hero-stat{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 9px 5px 11px;border-radius:10px}
.home-page .hero-compact .hero-stat:hover{transform:none}
.home-page .hero-compact .hs-txt{min-width:0}
.home-page .hero-compact .hs-lbl{font-size:9px}
.home-page .hero-compact .hs-val{font-size:16.5px;margin-top:1px;white-space:nowrap}
.home-page .hero-compact .hs-sub{font-size:10px;margin-top:1px}
.home-page .hero-compact .hs-chart{flex:0 0 auto;line-height:0}
.home-page .hero-compact .hs-trend{display:block}
@media (max-width:1180px){.home-page .hero-compact .hs-trend{width:104px}}
@media (max-width:900px){.home-page .hero-compact .hero-stats{grid-template-columns:1fr}.home-page .hero-compact .hs-trend{width:140px}}
@media (max-width:600px){
  .home-page .hero-banner.hero-compact{padding:8px 14px 10px}
  .home-page .hero-compact .hs-trend{width:112px}
  .home-page .hero-compact .spin-seal{width:28px;height:28px}
  .home-page .hero-compact .hero-brand-title{font-size:12px}
}

/* ---------- Home: commodity ticker refresh -- emerald band, light cards, clear icons ---------- */
.commodity-ticker{background:linear-gradient(100deg,#150f5c 0%,#1e2390 55%,#2a2fb8 100%);box-shadow:0 14px 28px rgba(21,15,92,.35)}
.commodity-ticker::before{background:radial-gradient(circle at 10% 0%,rgba(255,255,255,.10),transparent 34%),radial-gradient(circle at 92% 100%,rgba(255,196,77,.14),transparent 40%)}
.commodity-ticker .ticker-label{color:#eafff6}
.commodity-ticker .ticker-live-dot{background:#ffc44d;box-shadow:0 0 0 4px rgba(255,196,77,.35)}
.commodity-ticker-card{grid-template-columns:30px minmax(90px,1fr) 64px;width:226px;min-height:38px;gap:8px;padding:5px 9px;background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.9);color:#16212b;box-shadow:0 6px 14px rgba(3,50,60,.18)}
.commodity-ticker-card:hover{background:#fff;border-color:#ffc44d;transform:translateY(-3px);box-shadow:0 10px 20px rgba(3,50,60,.28)}
.commodity-ticker-card .ctc-icon{width:30px;height:30px;border-radius:50%;font-size:16px;line-height:1;background:linear-gradient(145deg,#fff8e8,#ffe9c2);border:1px solid #f2d9a6;box-shadow:inset 0 1px 0 #fff}
.commodity-ticker-card .ctc-copy b{color:#16212b;font-size:11.5px}
.commodity-ticker-card .ctc-copy small{color:#5f6c78;font-size:9px}
.ctc-trend em.up,.ctc-trend .pct.up{color:#c8163f}.ctc-trend em.down,.ctc-trend .pct.down{color:#0d8a58}.ctc-trend .pct.flat{color:#6b7686}
.ctc-trend em{font-size:10.5px}

/* small axis on the hero tiles' mini line charts */
.hst-axis{stroke:rgba(255,255,255,.32);stroke-width:1}
.hst-ytick,.hst-xtick{font-size:7.5px;font-family:inherit;fill:rgba(255,255,255,.78)}

/* ---------- App-wide footnote, appended after every page's content by js/app.js ---------- */
.app-footnote{margin:28px 0 4px;padding-top:14px;border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;gap:5px 0;justify-content:center;text-align:center;
  font-size:10.8px;line-height:1.6;color:var(--muted)}
.app-footnote .af-sep{margin:0 8px;opacity:.55}
@media (max-width:640px){.app-footnote{flex-direction:column;gap:2px}.app-footnote .af-sep{display:none}}

/* ---------- Home: Sindh Overview chart row -- make the trend line chart fill its card ---------- */
/* Grid items stretch to equal height by default, but a plain block .card-bd doesn't grow to
   fill that stretched height on its own -- without this, the shorter (line-chart) card just
   shows blank space below its fixed-height canvas. Turning the card into a column flexbox lets
   card-bd claim the full stretched height, which the JS above then measures and matches. */
.chart-fill-row{align-items:stretch}
.chart-fill-row .card{display:flex;flex-direction:column}
.chart-fill-row .card-bd{flex:1 1 auto}

/* ---------- Home: entrance polish + card interactivity ("catchier" home page) ---------- */
/* Each top-level section eases in on load, staggered slightly so the page feels composed
   rather than dumped on screen at once. Purely decorative -- respects prefers-reduced-motion
   via the existing ".home-page > *{animation:none}" override above. */
@keyframes homeFadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.home-page > *{animation:homeFadeUp .5s cubic-bezier(.2,.7,.25,1) both}
.home-page > *:nth-child(1){animation-delay:.02s}
.home-page > *:nth-child(2){animation-delay:.08s}
.home-page > *:nth-child(3){animation-delay:.14s}
.home-page > *:nth-child(4){animation-delay:.20s}
.home-page > *:nth-child(5){animation-delay:.26s}
.home-page > *:nth-child(6){animation-delay:.32s}
.home-page > *:nth-child(7){animation-delay:.38s}
.home-page > *:nth-child(8){animation-delay:.44s}
.home-page > *:nth-child(n+9){animation-delay:.5s}

/* Cards lift slightly on hover so the page feels responsive to the cursor, not static. */
.home-page .card{transition:transform .16s ease, box-shadow .16s ease}
.home-page .card:hover{transform:translateY(-3px); box-shadow:0 16px 30px rgba(15,31,46,.14)}
html[data-theme="dark"] .home-page .card:hover{box-shadow:0 16px 30px rgba(0,0,0,.4)}

/* Coverage strip (Districts/Markets/Shops/Commodities) icons get a small pop on hover, echoing
   the rest of the home page's interactivity. */
.home-page .stat-circle-item:hover .icon-badge{transform:scale(1.08) rotate(-4deg)}
.home-page .stat-circle-item .icon-badge{transition:transform .18s cubic-bezier(.34,1.56,.64,1)}


/* ---------- Account settings / self-service password change ---------- */
.account-chip{cursor:pointer;transition:background .16s,border-color .16s,box-shadow .16s,transform .16s;user-select:none}
.account-chip:hover,.account-chip:focus-visible{background:var(--brand-light);border-color:color-mix(in srgb,var(--brand) 55%,var(--border));box-shadow:0 3px 12px rgba(0,0,0,.08);outline:none}
.account-chip:active{transform:translateY(1px)}
.account-chip-copy{min-width:0;max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-caret{font-size:13px;color:var(--muted);margin-left:-2px;line-height:1}
.account-summary{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--border);border-radius:10px;background:color-mix(in srgb,var(--brand-light) 45%,var(--card));margin-bottom:18px}
.account-summary-avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--brand);color:#fff;font-weight:800}
.account-summary-name{font-weight:800;color:var(--navy);margin-bottom:2px}
.account-role-tag{display:inline-block;margin-top:5px}
.account-security-title{font-size:13px;font-weight:800;color:var(--navy);margin-bottom:3px}
.account-security-help{margin:0 0 13px}
.account-password-error{min-height:20px;margin-top:10px;color:var(--bad);font-size:12px;font-weight:600}
.modal-ft .btn:disabled{opacity:.62;cursor:not-allowed}

/* ---------- Home: keep the two Sindh analysis charts inside the viewport ---------- */
.home-page{width:100%;max-width:100%;min-width:0}
.chart-fill-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%;max-width:100%;min-width:0}
.chart-fill-row>.card{width:100%;max-width:100%;min-width:0;overflow:hidden}
.chart-fill-row .card-hd,.chart-fill-row .card-bd{min-width:0;max-width:100%}
.chart-fill-row .card-hd h3{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chart-fill-row canvas{display:block;width:100% !important;max-width:100% !important}
@media (max-width:1050px){.chart-fill-row{grid-template-columns:1fr}}


/* =====================================================================
   HOME EXPERIENCE UPGRADE — animated rankings, category icon cards,
   richer buttons and app-wide action tooltips
   ===================================================================== */

/* Subtle premium motion on the compact hero without distracting from data. */
.home-page .hero-compact .hero-stat{position:relative;overflow:hidden;isolation:isolate}
.home-page .hero-compact .hero-stat::after{content:'';position:absolute;top:-80%;left:-55%;width:34%;height:250%;transform:rotate(22deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);animation:heroStatSheen 8s ease-in-out infinite;pointer-events:none;z-index:-1}
.home-page .hero-compact .hero-stat:nth-child(2)::after{animation-delay:1.4s}.home-page .hero-compact .hero-stat:nth-child(3)::after{animation-delay:2.8s}
@keyframes heroStatSheen{0%,68%{left:-55%;opacity:0}72%{opacity:1}88%{left:125%;opacity:.8}100%{left:125%;opacity:0}}

/* Commodity categories: clear, professional line icon per category. */
.category-icon-grid{grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:12px!important}
.category-icon-card{appearance:none;width:100%;min-height:76px;display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:11px;text-align:left;position:relative;overflow:hidden;border-radius:13px!important;padding:12px 13px!important;cursor:pointer;font:inherit;color:var(--ink);animation:categoryCardIn .46s cubic-bezier(.2,.75,.25,1) both;animation-delay:var(--cat-delay)}
.category-icon-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--cat-accent);opacity:.92}
.category-icon-card::after{content:'';position:absolute;width:86px;height:86px;border-radius:50%;right:-32px;top:-42px;background:color-mix(in srgb,var(--cat-accent) 11%,transparent);transition:transform .22s ease,opacity .22s ease;pointer-events:none}
.category-icon-card:hover{transform:translateY(-4px)!important;border-color:color-mix(in srgb,var(--cat-accent) 55%,var(--border))!important;box-shadow:0 13px 26px rgba(15,31,46,.13)!important}
.category-icon-card:hover::after{transform:scale(1.45);opacity:.9}
.category-icon-wrap{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--cat-accent);background:color-mix(in srgb,var(--cat-accent) 12%,var(--card));border:1px solid color-mix(in srgb,var(--cat-accent) 24%,var(--border));box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 60%,transparent);transition:transform .22s cubic-bezier(.34,1.56,.64,1),background .2s}
.category-icon-card:hover .category-icon-wrap{transform:scale(1.08) rotate(-4deg);background:color-mix(in srgb,var(--cat-accent) 18%,var(--card))}
.category-chip-copy{min-width:0;display:flex;flex-direction:column;gap:4px}.category-icon-card .cc-name{font-size:12.5px!important;line-height:1.25}.category-icon-card .cc-meta{margin:0!important;font-size:10.5px!important}.category-chip-trend{position:relative;z-index:1;white-space:nowrap;font-size:11px;font-weight:800}.category-chip-trend .pct{font-size:11px}
@keyframes categoryCardIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
html[data-theme="dark"] .category-icon-card:hover{box-shadow:0 15px 30px rgba(0,0,0,.34)!important}

/* District & division animated leaderboard. */
.district-motion-card{position:relative;overflow:hidden;border-color:color-mix(in srgb,var(--navy) 22%,var(--border))!important}
.district-motion-card::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--brand),var(--gold),var(--good),var(--brand));background-size:220% 100%;animation:districtAccentFlow 7s linear infinite}
@keyframes districtAccentFlow{to{background-position:220% 0}}
.district-motion-head{padding-top:16px!important}.district-motion-head>div:nth-child(2){min-width:0}.district-motion-head h3{margin:0!important}.district-motion-head .small{margin-top:2px}
.live-rank-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:color-mix(in srgb,var(--good) 10%,var(--card));border:1px solid color-mix(in srgb,var(--good) 26%,var(--border));color:var(--good);font-size:9.5px;font-weight:800;letter-spacing:.06em;white-space:nowrap}.live-rank-pill i{width:6px;height:6px;border-radius:50%;background:var(--good);box-shadow:0 0 0 4px color-mix(in srgb,var(--good) 18%,transparent);animation:liveRankPulse 1.7s ease-in-out infinite}@keyframes liveRankPulse{50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--good) 0%,transparent);opacity:.65}}
.district-motion-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}
.movement-panel{position:relative;padding:13px;border:1px solid var(--border);border-radius:13px;background:linear-gradient(155deg,var(--card),color-mix(in srgb,var(--grey-bg) 72%,var(--card)));overflow:hidden}
.movement-panel::after{content:'';position:absolute;inset:auto -34px -48px auto;width:115px;height:115px;border-radius:50%;background:color-mix(in srgb,var(--panel-accent,var(--navy)) 7%,transparent);pointer-events:none}
.division-panel{--panel-accent:var(--navy)}.increase-panel{--panel-accent:var(--bad)}.decrease-panel{--panel-accent:var(--good)}
.movement-panel-head{display:flex;align-items:center;gap:9px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--border)}.movement-panel-head .mph-icon{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:9px;color:var(--panel-accent);background:color-mix(in srgb,var(--panel-accent) 10%,var(--card));border:1px solid color-mix(in srgb,var(--panel-accent) 20%,var(--border))}.movement-panel-head>div{display:flex;flex-direction:column;gap:1px}.movement-panel-head b{font-size:11.7px;color:var(--ink)}.movement-panel-head small{font-size:9.6px;color:var(--muted)}
.movement-rank-list{display:flex;flex-direction:column;gap:7px}.movement-rank-row{appearance:none;width:100%;display:grid;grid-template-columns:24px minmax(88px,1fr) minmax(54px,.7fr) auto;align-items:center;gap:8px;padding:7px 7px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;position:relative;z-index:1;opacity:0;animation:rankRowIn .42s cubic-bezier(.2,.75,.25,1) forwards;animation-delay:calc(.14s + var(--rank-delay));transition:background .16s,border-color .16s,transform .16s,box-shadow .16s}.movement-rank-row:hover{transform:translateX(3px);background:var(--card);border-color:var(--border);box-shadow:0 6px 16px rgba(15,31,46,.08)}
.movement-rank-no{width:22px;height:22px;border-radius:7px;display:flex;align-items:center;justify-content:center;background:var(--grey-bg);color:var(--muted);font-size:9.5px;font-weight:900}.movement-rank-row:nth-child(1) .movement-rank-no{background:color-mix(in srgb,var(--gold) 22%,var(--card));color:color-mix(in srgb,var(--gold) 68%,var(--ink))}.movement-rank-row:nth-child(2) .movement-rank-no{background:color-mix(in srgb,#9aa5b1 17%,var(--card));color:var(--ink)}.movement-rank-row:nth-child(3) .movement-rank-no{background:color-mix(in srgb,#b47b4f 16%,var(--card));color:#a86639}
.movement-rank-copy{min-width:0;display:flex;flex-direction:column;gap:1px}.movement-rank-copy b{font-size:10.7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.movement-rank-copy small{font-size:8.8px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.movement-rank-track{height:6px;border-radius:99px;background:color-mix(in srgb,var(--border) 74%,transparent);overflow:hidden}.movement-rank-track i{display:block;width:var(--rank-width);height:100%;border-radius:99px;transform-origin:left center;animation:rankBarGrow .75s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.26s + var(--rank-delay));background:var(--navy)}.movement-rank-row.up .movement-rank-track i{background:linear-gradient(90deg,color-mix(in srgb,var(--bad) 68%,#fff),var(--bad))}.movement-rank-row.down .movement-rank-track i{background:linear-gradient(90deg,color-mix(in srgb,var(--good) 66%,#fff),var(--good))}.movement-rank-row.flat .movement-rank-track i{background:var(--muted)}
.movement-rank-value{min-width:54px;text-align:right;font-size:10.5px;font-weight:800;white-space:nowrap}.movement-rank-value .pct{font-size:10.5px}
@keyframes rankRowIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}@keyframes rankBarGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.district-motion-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:13px;padding-top:12px;border-top:1px dashed var(--border)}

/* Buttons feel more tactile; tooltips explain their action on hover. */
.btn,.iconbtn,.sidebar-pin-btn{position:relative;overflow:hidden;transition:transform .15s ease,box-shadow .15s ease,background .15s,border-color .15s}.btn:not(:disabled):hover,.iconbtn:not(:disabled):hover,.sidebar-pin-btn:not(:disabled):hover{transform:translateY(-1px)}.btn:not(:disabled):active,.iconbtn:not(:disabled):active,.sidebar-pin-btn:not(:disabled):active{transform:translateY(0) scale(.985)}
#notifBtn{overflow:visible}
.btn.primary:not(:disabled):hover{box-shadow:0 8px 18px color-mix(in srgb,var(--brand) 25%,transparent)}
.app-action-tip{position:fixed;z-index:10000;max-width:290px;padding:8px 10px;border-radius:8px;background:#0c1721;color:#f7fafc;border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 30px rgba(0,0,0,.26);font-size:10.8px;line-height:1.35;font-weight:600;letter-spacing:.005em;pointer-events:none;opacity:0;transform:translateY(3px) scale(.98);transition:opacity .12s ease,transform .12s ease}.app-action-tip.show{opacity:1;transform:none}html[data-theme="dark"] .app-action-tip{background:#f4f7f9;color:#15212b;border-color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.45)}

@media (max-width:1180px){.district-motion-grid{grid-template-columns:1fr 1fr}.division-panel{grid-column:1/-1}.division-rank-list{display:grid;grid-template-columns:1fr 1fr;gap:7px 12px}}
@media (max-width:760px){.district-motion-grid{grid-template-columns:1fr}.division-panel{grid-column:auto}.division-rank-list{display:flex}.category-icon-grid{grid-template-columns:1fr}.district-motion-footer{align-items:flex-start;flex-direction:column}.live-rank-pill{display:none}.movement-rank-row{grid-template-columns:24px minmax(90px,1fr) 70px auto}}
@media (prefers-reduced-motion:reduce){.home-page .hero-compact .hero-stat::after,.district-motion-card::before,.live-rank-pill i,.category-icon-card,.movement-rank-row,.movement-rank-track i{animation:none!important}.movement-rank-row{opacity:1!important}}


/* =====================================================================
   Home detail polish v2 — movement, movers, findings, commodity table
   Presentation-only enhancements; calculations and Firebase data unchanged.
   ===================================================================== */

/* Coverage / field footprint */
.coverage-card{overflow:hidden;position:relative}
.coverage-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 10% 0%,color-mix(in srgb,var(--brand) 6%,transparent),transparent 36%),radial-gradient(circle at 90% 100%,color-mix(in srgb,var(--gold) 6%,transparent),transparent 34%);pointer-events:none}
.enhanced-coverage{position:relative;gap:12px!important}
.coverage-stat{--stat-accent:var(--brand);position:relative;min-height:164px;padding:20px 14px 18px;border:1px solid var(--border);border-radius:15px;background:linear-gradient(155deg,var(--card),color-mix(in srgb,var(--grey-bg) 58%,var(--card)));text-align:center;overflow:hidden;opacity:0;animation:coverageStatIn .48s cubic-bezier(.2,.75,.25,1) forwards;animation-delay:var(--stat-delay);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.coverage-stat.tone-info{--stat-accent:#3769e8}.coverage-stat.tone-gold{--stat-accent:var(--gold)}.coverage-stat.tone-good{--stat-accent:var(--good)}
.coverage-stat::before{content:'';position:absolute;left:20%;right:20%;top:0;height:2px;border-radius:0 0 8px 8px;background:linear-gradient(90deg,transparent,var(--stat-accent),transparent);opacity:.85}
.coverage-stat:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--stat-accent) 38%,var(--border));box-shadow:0 14px 30px color-mix(in srgb,var(--stat-accent) 12%,transparent)}
.coverage-stat-glow{position:absolute;width:120px;height:120px;border-radius:50%;left:50%;top:-70px;transform:translateX(-50%);background:color-mix(in srgb,var(--stat-accent) 12%,transparent);filter:blur(1px);transition:transform .25s ease,opacity .25s}.coverage-stat:hover .coverage-stat-glow{transform:translateX(-50%) scale(1.35);opacity:.8}
.coverage-stat-icon{position:relative;z-index:1;width:48px;height:48px;border-radius:14px;margin:0 auto 11px;display:flex;align-items:center;justify-content:center;color:var(--stat-accent);background:color-mix(in srgb,var(--stat-accent) 12%,var(--card));border:1px solid color-mix(in srgb,var(--stat-accent) 23%,var(--border));box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 65%,transparent);animation:coverageIconFloat 3.6s ease-in-out infinite;animation-delay:calc(var(--stat-delay) + .5s)}
.coverage-stat-value{font-size:28px;line-height:1;font-weight:900;letter-spacing:-.035em;color:var(--navy)}
.coverage-stat-label{margin-top:8px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.065em;color:var(--ink)}
.coverage-stat-note{margin-top:5px;font-size:9.5px;color:var(--muted)}
.coverage-stat-line{height:3px;border-radius:99px;background:color-mix(in srgb,var(--border) 70%,transparent);overflow:hidden;margin:13px auto 0;max-width:92px}.coverage-stat-line i{display:block;height:100%;width:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--stat-accent) 45%,transparent),var(--stat-accent));transform:scaleX(0);transform-origin:left;animation:coverageLineGrow .75s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--stat-delay) + .28s)}
@keyframes coverageStatIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}@keyframes coverageLineGrow{to{transform:scaleX(1)}}@keyframes coverageIconFloat{50%{transform:translateY(-3px)}}

/* Weekly movement overview */
.movement-overview-card{position:relative;overflow:hidden}.movement-overview-card::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--brand),#3769e8,var(--gold),var(--brand));background-size:220% 100%;animation:movementAccentFlow 8s linear infinite}.movement-overview-head h3{margin:0!important}.movement-overview-head .small{margin-top:2px}.movement-live-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:999px;background:color-mix(in srgb,var(--brand) 9%,var(--card));border:1px solid color-mix(in srgb,var(--brand) 22%,var(--border));color:var(--brand-dark);font-size:9.5px;font-weight:900;letter-spacing:.07em;white-space:nowrap}.movement-live-pill i{width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 14%,transparent);animation:movementLivePulse 1.8s ease-in-out infinite}
.movement-overview-grid{display:grid;grid-template-columns:minmax(300px,.84fr) minmax(0,1.55fr);gap:24px;align-items:stretch}.movement-donut-panel,.movement-category-panel{border:1px solid var(--border);border-radius:15px;background:linear-gradient(155deg,var(--card),color-mix(in srgb,var(--grey-bg) 60%,var(--card)));padding:16px;position:relative;overflow:hidden}.movement-donut-panel::after,.movement-category-panel::after{content:'';position:absolute;width:130px;height:130px;border-radius:50%;right:-60px;bottom:-78px;background:color-mix(in srgb,var(--brand) 6%,transparent);pointer-events:none}.movement-panel-kicker{font-size:9.5px;font-weight:900;letter-spacing:.09em;color:var(--muted);text-align:center;margin-bottom:3px}.movement-donut-shell{max-width:370px;margin:0 auto;position:relative}.movement-donut-shell canvas{filter:drop-shadow(0 7px 12px rgba(15,31,46,.06));animation:donutArrive .65s cubic-bezier(.2,.75,.25,1) both}
.movement-summary-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}.movement-summary-chip{appearance:none;border:1px solid var(--border);border-radius:11px;background:var(--card);color:var(--ink);padding:9px 8px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:6px;row-gap:2px;text-align:left;cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.movement-summary-chip:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(15,31,46,.08)}.movement-summary-chip i{width:7px;height:7px;border-radius:50%;grid-row:1/3}.movement-summary-chip span{font-size:9.5px;font-weight:700;color:var(--muted)}.movement-summary-chip b{font-size:13px;text-align:right}.movement-summary-chip em{grid-column:2/4;font-style:normal;font-size:9px;font-weight:800;color:var(--muted)}.movement-summary-chip.inc i{background:var(--bad)}.movement-summary-chip.inc:hover{border-color:color-mix(in srgb,var(--bad) 34%,var(--border))}.movement-summary-chip.dec i{background:var(--good)}.movement-summary-chip.dec:hover{border-color:color-mix(in srgb,var(--good) 34%,var(--border))}.movement-summary-chip.flat i{background:var(--muted)}
.movement-panel-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.movement-panel-title>span:first-child{display:flex;flex-direction:column;gap:2px}.movement-panel-title b{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em}.movement-panel-title small{font-size:9.5px;color:var(--muted)}.movement-legend{display:flex;align-items:center;gap:5px;font-size:8.8px;color:var(--muted);white-space:nowrap}.movement-legend i{width:6px;height:6px;border-radius:50%}.movement-legend i.inc{background:var(--bad)}.movement-legend i.dec{background:var(--good)}.movement-legend i.flat{background:var(--muted)}
.enhanced-cat-move-list{max-height:292px;padding-right:5px}.enhanced-cat-move-row{appearance:none;width:100%;display:grid;grid-template-columns:28px minmax(105px,145px) minmax(150px,1fr) 82px;align-items:center;gap:9px;padding:7px 7px;border:1px solid transparent;border-bottom-color:var(--border);border-radius:9px;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;opacity:0;animation:catMoveIn .4s cubic-bezier(.2,.75,.25,1) forwards;animation-delay:calc(.16s + var(--move-delay));transition:transform .15s ease,background .15s,border-color .15s}.enhanced-cat-move-row:hover{transform:translateX(3px);background:var(--card);border-color:color-mix(in srgb,var(--cat-accent) 28%,var(--border));box-shadow:0 5px 13px rgba(15,31,46,.055)}.enhanced-cat-move-row .cmr-icon{width:27px;height:27px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--cat-accent);background:color-mix(in srgb,var(--cat-accent) 10%,var(--card));border:1px solid color-mix(in srgb,var(--cat-accent) 18%,var(--border))}.enhanced-cat-move-row .cmr-name{width:auto!important}.enhanced-cat-move-row .cmr-bar{height:10px!important}.enhanced-cat-move-row .cmr-bar .seg{width:var(--seg-width)!important;transform:scaleX(0);transform-origin:left;animation:catSegGrow .75s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.32s + var(--move-delay))}.enhanced-cat-move-row .cmr-counts{width:82px!important}
@keyframes movementAccentFlow{to{background-position:220% 0}}@keyframes movementLivePulse{50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--brand) 0%,transparent);opacity:.72}}@keyframes donutArrive{from{opacity:0;transform:scale(.94) rotate(-3deg)}to{opacity:1;transform:none}}@keyframes catMoveIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}@keyframes catSegGrow{to{transform:scaleX(1)}}

/* Ranked weekly price movers */
.top-movers-card{position:relative;overflow:hidden}.section-mini-pill{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;background:var(--grey-bg);border:1px solid var(--border);font-size:9px;font-weight:900;letter-spacing:.07em;color:var(--muted);white-space:nowrap}.top-movers-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.top-mover-panel{--mover-accent:var(--bad);border:1px solid var(--border);border-radius:15px;padding:13px;background:linear-gradient(155deg,var(--card),color-mix(in srgb,var(--grey-bg) 58%,var(--card)));position:relative;overflow:hidden}.top-mover-panel.mover-down-panel{--mover-accent:var(--good)}.top-mover-panel::after{content:'';position:absolute;width:140px;height:140px;border-radius:50%;right:-75px;top:-85px;background:color-mix(in srgb,var(--mover-accent) 8%,transparent);pointer-events:none}.top-mover-panel-head{position:relative;z-index:1;display:flex;align-items:center;gap:9px;padding:2px 2px 10px;margin-bottom:3px;border-bottom:1px solid var(--border)}.top-mover-direction{width:31px;height:31px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--mover-accent);background:color-mix(in srgb,var(--mover-accent) 11%,var(--card));border:1px solid color-mix(in srgb,var(--mover-accent) 20%,var(--border))}.top-mover-panel-head>div{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}.top-mover-panel-head b{text-transform:uppercase;font-size:10.5px;letter-spacing:.045em;color:var(--mover-accent)}.top-mover-panel-head small{font-size:9.2px;color:var(--muted)}.top-mover-count{width:27px;height:27px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:color-mix(in srgb,var(--mover-accent) 9%,var(--card));color:var(--mover-accent);font-size:9.5px;font-weight:900}
.price-mover-list{position:relative;z-index:1}.price-mover-row{--mover-accent:var(--bad);appearance:none;width:100%;display:grid;grid-template-columns:25px 32px minmax(145px,1.15fr) minmax(70px,.55fr) 58px;align-items:center;gap:8px;padding:7px 5px;border:1px solid transparent;border-bottom-color:var(--border);border-radius:9px;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;opacity:0;animation:priceMoverIn .42s cubic-bezier(.2,.75,.25,1) forwards;animation-delay:calc(.12s + var(--mover-delay));transition:transform .15s ease,background .15s,border-color .15s,box-shadow .15s}.price-mover-row.down{--mover-accent:var(--good)}.price-mover-row:hover{transform:translateX(3px);background:var(--card);border-color:color-mix(in srgb,var(--mover-accent) 24%,var(--border));box-shadow:0 5px 14px rgba(15,31,46,.055)}.mover-rank{font-size:8.8px;font-weight:900;color:var(--muted);letter-spacing:.02em}.mover-emoji{width:31px;height:31px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;background:color-mix(in srgb,var(--mover-accent) 10%,var(--card));border:1px solid color-mix(in srgb,var(--mover-accent) 18%,var(--border))}.mover-copy{min-width:0;display:flex;flex-direction:column;gap:1px}.mover-copy b{font-size:10.7px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mover-copy small{font-size:8.7px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mover-track{height:5px;border-radius:99px;background:color-mix(in srgb,var(--border) 72%,transparent);overflow:hidden}.mover-track i{display:block;height:100%;width:var(--mover-width);border-radius:99px;background:linear-gradient(90deg,color-mix(in srgb,var(--mover-accent) 58%,#fff),var(--mover-accent));transform:scaleX(0);transform-origin:left;animation:moverBarGrow .7s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.28s + var(--mover-delay))}.mover-value{text-align:right;font-size:10.5px;font-weight:900;color:var(--mover-accent);white-space:nowrap}
@keyframes priceMoverIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes moverBarGrow{to{transform:scaleX(1)}}

/* Key findings as compact executive insight cards */
.findings-card{position:relative;overflow:hidden}.finding-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:10px}.finding-card{--finding-accent:var(--brand);position:relative;min-height:82px;display:grid;grid-template-columns:34px 34px 1fr;align-items:center;gap:8px;padding:12px;border:1px solid var(--border);border-radius:13px;background:linear-gradient(145deg,var(--card),color-mix(in srgb,var(--finding-accent) 4%,var(--card)));overflow:hidden;opacity:0;animation:findingIn .46s cubic-bezier(.2,.75,.25,1) forwards;animation-delay:calc(.12s + var(--finding-delay));transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.finding-card.tone-bad{--finding-accent:var(--bad)}.finding-card.tone-good{--finding-accent:var(--good)}.finding-card::before{content:'';position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 4px 4px 0;background:var(--finding-accent);opacity:.8}.finding-card::after{content:'';position:absolute;width:90px;height:90px;border-radius:50%;right:-48px;bottom:-58px;background:color-mix(in srgb,var(--finding-accent) 8%,transparent)}.finding-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--finding-accent) 30%,var(--border));box-shadow:0 10px 24px color-mix(in srgb,var(--finding-accent) 8%,transparent)}.finding-no{font-size:9px;font-weight:900;letter-spacing:.08em;color:var(--muted);text-align:center}.finding-icon{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--finding-accent);background:color-mix(in srgb,var(--finding-accent) 10%,var(--card));border:1px solid color-mix(in srgb,var(--finding-accent) 18%,var(--border));transition:transform .2s cubic-bezier(.34,1.56,.64,1)}.finding-card:hover .finding-icon{transform:scale(1.07) rotate(-4deg)}.finding-copy{position:relative;z-index:1;display:flex;flex-direction:column;gap:3px}.finding-copy small{font-size:8px;font-weight:900;letter-spacing:.09em;color:var(--finding-accent)}.finding-copy b{font-size:10.8px;line-height:1.42;font-weight:650}.findings-note{display:flex;align-items:flex-start;gap:9px;margin-top:12px;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--info-bg) 55%,var(--card));border:1px dashed color-mix(in srgb,var(--info) 25%,var(--border));color:var(--muted)}.findings-note>span{color:var(--info);margin-top:1px}.findings-note p{margin:0;font-size:9.7px;line-height:1.5}
@keyframes findingIn{from{opacity:0;transform:translateY(9px) scale(.99)}to{opacity:1;transform:none}}

/* All-commodity trend table */
.all-commodities-card{position:relative;overflow:hidden}.commodity-table-wrap{border:1px solid var(--border)!important;border-radius:12px!important;background:var(--card);scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--brand) 40%,var(--border)) transparent}.commodity-table-wrap::-webkit-scrollbar{width:8px}.commodity-table-wrap::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--brand) 30%,var(--border));border-radius:99px}.commodity-trend-table thead{position:sticky;top:0;z-index:4}.commodity-trend-table thead th{background:color-mix(in srgb,var(--grey-bg) 82%,var(--card));backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--border);font-size:9.3px;letter-spacing:.05em}.commodity-trend-row{--row-accent:var(--muted);opacity:0;animation:commodityRowIn .36s ease forwards;animation-delay:calc(.08s + var(--row-delay));transition:background .15s ease,box-shadow .15s ease}.commodity-trend-row.up{--row-accent:var(--bad)}.commodity-trend-row.down{--row-accent:var(--good)}.commodity-trend-row:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--row-accent) 5%,var(--card)),var(--card));box-shadow:inset 3px 0 0 var(--row-accent)}.commodity-trend-row td{padding-top:7px!important;padding-bottom:7px!important}.commodity-name-cell{display:flex;align-items:center;gap:9px;min-width:0}.commodity-emoji{width:29px;height:29px;display:flex;align-items:center;justify-content:center;border-radius:9px;font-size:14px;background:color-mix(in srgb,var(--row-accent) 8%,var(--grey-bg));border:1px solid color-mix(in srgb,var(--row-accent) 15%,var(--border));transition:transform .18s cubic-bezier(.34,1.56,.64,1)}.commodity-trend-row:hover .commodity-emoji{transform:scale(1.08) rotate(-4deg)}.commodity-copy{min-width:0;display:flex;flex-direction:column;gap:1px}.commodity-copy b{font-size:10.8px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.commodity-copy small{font-size:8.4px;color:var(--muted)}.category-mini-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 7px;border-radius:999px;border:1px solid color-mix(in srgb,var(--cat-accent) 18%,var(--border));background:color-mix(in srgb,var(--cat-accent) 7%,var(--card));color:var(--ink);font-size:9px;font-weight:650;white-space:nowrap}.category-mini-icon{display:flex;color:var(--cat-accent)}.commodity-price{font-weight:650;color:var(--ink)}.commodity-wow .pct{font-weight:850}.sparkline-shell{display:inline-flex;padding:3px 6px;border-radius:8px;background:color-mix(in srgb,var(--grey-bg) 65%,transparent);transition:background .15s}.commodity-trend-row:hover .sparkline-shell{background:var(--card)}
@keyframes commodityRowIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

html[data-theme="dark"] .coverage-stat,html[data-theme="dark"] .movement-donut-panel,html[data-theme="dark"] .movement-category-panel,html[data-theme="dark"] .top-mover-panel{box-shadow:inset 0 1px 0 rgba(255,255,255,.02)}
html[data-theme="dark"] .coverage-stat:hover,html[data-theme="dark"] .finding-card:hover,html[data-theme="dark"] .top-mover-panel{box-shadow:0 12px 28px rgba(0,0,0,.2)}

@media (max-width:1180px){.movement-overview-grid{grid-template-columns:1fr}.movement-donut-shell{max-width:330px}.enhanced-cat-move-row{grid-template-columns:28px minmax(100px,145px) minmax(150px,1fr) 82px}.finding-card-grid{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.top-movers-grid{grid-template-columns:1fr}.movement-summary-chips{grid-template-columns:1fr 1fr 1fr}.price-mover-row{grid-template-columns:25px 32px minmax(120px,1fr) 90px 56px}}
@media (max-width:700px){.enhanced-coverage{grid-template-columns:1fr 1fr!important}.coverage-stat{min-height:150px}.movement-summary-chips{grid-template-columns:1fr}.movement-legend{display:none}.enhanced-cat-move-row{grid-template-columns:28px minmax(100px,1fr) 95px}.enhanced-cat-move-row .cmr-bar{display:none}.finding-card-grid{grid-template-columns:1fr}.commodity-trend-table th:nth-child(2),.commodity-trend-table td:nth-child(2){display:none}.price-mover-row{grid-template-columns:24px 30px minmax(100px,1fr) 52px}.price-mover-row .mover-track{display:none}.section-mini-pill,.movement-live-pill{display:none}}
@media (prefers-reduced-motion:reduce){.coverage-stat,.coverage-stat-icon,.coverage-stat-line i,.movement-overview-card::before,.movement-live-pill i,.movement-donut-shell canvas,.enhanced-cat-move-row,.enhanced-cat-move-row .cmr-bar .seg,.price-mover-row,.mover-track i,.finding-card,.commodity-trend-row{animation:none!important;opacity:1!important}}


/* ---------- Home: enhanced Category Performance + Sindh Trend ---------- */
.home-analysis-row{gap:16px!important;align-items:stretch}
.home-analysis-card{position:relative;overflow:hidden;min-width:0;isolation:isolate}
.home-analysis-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--brand),var(--info),var(--gold));opacity:.9;z-index:2}
.category-performance-card::after,.sindh-trend-card::after{content:"";position:absolute;width:210px;height:210px;border-radius:50%;right:-120px;top:-125px;pointer-events:none;z-index:-1;background:radial-gradient(circle,color-mix(in srgb,var(--info) 10%,transparent),transparent 70%)}
.sindh-trend-card::after{background:radial-gradient(circle,color-mix(in srgb,var(--brand) 12%,transparent),transparent 70%)}
.home-analysis-card .card-hd{min-height:68px;padding:13px 15px;background:linear-gradient(180deg,color-mix(in srgb,var(--card) 96%,var(--brand-light)),var(--card));position:relative;z-index:1}
.home-analysis-card .card-hd>div:not(.spacer){min-width:0}
.home-analysis-card .card-hd h3{color:var(--navy);font-size:12.5px;letter-spacing:.05em}
.home-analysis-card .card-hd .small{margin-top:2px;font-size:9.5px;line-height:1.35}
.home-chart-icon{width:36px!important;height:36px!important;border-radius:11px!important;box-shadow:0 5px 13px color-mix(in srgb,var(--info) 18%,transparent);transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s}
.sindh-trend-card .home-chart-icon{box-shadow:0 5px 13px color-mix(in srgb,var(--brand) 22%,transparent)}
.home-analysis-card:hover .home-chart-icon{transform:translateY(-2px) rotate(-3deg) scale(1.04)}
.chart-period-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border-radius:999px;border:1px solid var(--border);background:color-mix(in srgb,var(--grey-bg) 70%,var(--card));color:var(--muted);font-size:8.5px;font-weight:850;letter-spacing:.08em;white-space:nowrap}
.chart-period-pill i{width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 15%,transparent);animation:chartPulse 1.8s ease-in-out infinite}
.home-chart-body{display:flex;flex-direction:column;min-height:418px;padding:14px!important}
.chart-insight-strip{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:9px}
.chart-insight{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:8px;min-width:0;padding:8px 9px;border:1px solid var(--border);border-radius:10px;background:linear-gradient(135deg,color-mix(in srgb,var(--card) 92%,var(--grey-bg)),var(--card));transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.chart-insight:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.chart-insight .ci-icon{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center}
.chart-insight.positive .ci-icon{background:var(--good-bg);color:var(--good)}
.chart-insight.negative .ci-icon{background:var(--bad-bg);color:var(--bad)}
.chart-insight span:nth-child(2){min-width:0;display:flex;flex-direction:column}
.chart-insight small,.trend-metric small{font-size:8.2px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:750}
.chart-insight b{font-size:10.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.chart-insight em{font-size:10.5px;font-style:normal;font-weight:900}
.chart-insight.positive em{color:var(--good)}.chart-insight.negative em{color:var(--bad)}
.trend-insights{grid-template-columns:repeat(3,1fr)}
.trend-metric{padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:linear-gradient(145deg,color-mix(in srgb,var(--brand-light) 42%,var(--card)),var(--card));display:flex;flex-direction:column;gap:2px;min-width:0}
.trend-metric b{font-size:13px;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trend-metric.rise b{color:var(--bad)}.trend-metric.fall b{color:var(--good)}
.enhanced-chart-shell{position:relative;min-width:0;overflow:hidden;border:1px solid color-mix(in srgb,var(--border) 82%,transparent);border-radius:12px;background:linear-gradient(180deg,color-mix(in srgb,var(--grey-bg) 28%,var(--card)),var(--card));box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 45%,transparent);transition:border-color .16s ease,box-shadow .16s ease}
.home-analysis-card:hover .enhanced-chart-shell{border-color:color-mix(in srgb,var(--brand) 24%,var(--border));box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 40%,transparent),0 8px 24px color-mix(in srgb,var(--brand) 7%,transparent)}
.enhanced-chart-shell canvas{display:block;width:100%!important;max-width:100%!important;cursor:crosshair}
.chart-foot-legend{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:9px;color:var(--muted);font-size:8.8px;font-weight:700}
.chart-foot-legend span{display:flex;align-items:center;gap:5px}.legend-dot{width:7px;height:7px;border-radius:50%;display:inline-block}.legend-dot.positive{background:var(--good)}.legend-dot.negative{background:var(--bad)}.legend-zero{height:12px;width:1px;background:var(--border);display:inline-block}
.chart-latest-note{display:flex;align-items:center;gap:7px;margin-top:9px;padding:7px 9px;border-radius:9px;background:color-mix(in srgb,var(--brand-light) 45%,transparent);color:var(--muted);font-size:9px}.chart-latest-note b{margin-left:auto;color:var(--brand);font-size:9.5px}.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 14%,transparent);animation:chartPulse 1.8s ease-in-out infinite}
@keyframes chartPulse{0%,100%{transform:scale(.9);opacity:.75}50%{transform:scale(1.15);opacity:1}}

/* Dark mode is intentionally authored, not merely inherited: keep charts luminous and legible. */
html[data-theme="dark"] .home-analysis-card{border-color:#2a3934;background:linear-gradient(160deg,#1b2428 0%,#171f23 100%);box-shadow:0 10px 28px rgba(0,0,0,.24)}
html[data-theme="dark"] .home-analysis-card::before{background:linear-gradient(90deg,#2fbf87,#6d94ff,#e0b45f)}
html[data-theme="dark"] .home-analysis-card .card-hd{background:linear-gradient(180deg,rgba(47,191,135,.055),rgba(26,33,38,.88));border-bottom-color:#2b3834}
html[data-theme="dark"] .chart-period-pill{background:#202a2e;border-color:#34413d;color:#aab8b4}
html[data-theme="dark"] .chart-insight{background:linear-gradient(145deg,#20292d,#192125);border-color:#303d39;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
html[data-theme="dark"] .trend-metric{background:linear-gradient(145deg,#1b2a25,#1a2226);border-color:#304039}
html[data-theme="dark"] .enhanced-chart-shell{background:linear-gradient(180deg,#171f23,#151c20);border-color:#2a3934;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
html[data-theme="dark"] .home-analysis-card:hover .enhanced-chart-shell{border-color:rgba(47,191,135,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 10px 28px rgba(0,0,0,.22),0 0 24px rgba(47,191,135,.035)}
html[data-theme="dark"] .chart-latest-note{background:rgba(47,191,135,.075);border:1px solid rgba(47,191,135,.10)}
html[data-theme="dark"] .tooltip-box{background:#07130f;border:1px solid rgba(47,191,135,.30);box-shadow:0 10px 26px rgba(0,0,0,.42);color:#f4fbf8}
@media(max-width:720px){.chart-insight-strip,.trend-insights{grid-template-columns:1fr}.home-chart-body{min-height:auto}.chart-period-pill{display:none}.chart-latest-note b{margin-left:0}.chart-latest-note{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.chart-period-pill i,.pulse-dot{animation:none!important}.home-analysis-card:hover .home-chart-icon{transform:none}}

/* ---------- Dark-mode cohesion for all enhanced Home visuals ---------- */
html[data-theme="dark"] .district-motion-card,
html[data-theme="dark"] .movement-overview-card,
html[data-theme="dark"] .top-movers-card,
html[data-theme="dark"] .findings-card,
html[data-theme="dark"] .all-commodities-card{
  background:linear-gradient(160deg,#1b2428 0%,#181f23 100%);
  border-color:#2a3934;
}
html[data-theme="dark"] .movement-panel,
html[data-theme="dark"] .movement-donut-panel,
html[data-theme="dark"] .movement-category-panel,
html[data-theme="dark"] .top-mover-panel,
html[data-theme="dark"] .finding-card{
  background:linear-gradient(145deg,#20292d 0%,#192125 100%);
  border-color:#303d39;
}
html[data-theme="dark"] .category-icon-card{
  background:linear-gradient(145deg,#20292d,#192125)!important;
  border-color:#303d39!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
html[data-theme="dark"] .category-icon-card:hover{border-color:color-mix(in srgb,var(--cat-accent) 52%,#303d39)!important;box-shadow:0 14px 30px rgba(0,0,0,.34),0 0 22px color-mix(in srgb,var(--cat-accent) 6%,transparent)!important}
html[data-theme="dark"] .category-icon-wrap{box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
html[data-theme="dark"] .movement-rank-row:hover,
html[data-theme="dark"] .price-mover-row:hover,
html[data-theme="dark"] .enhanced-cat-move-row:hover{background:#222d31;border-color:#35443f;box-shadow:0 8px 20px rgba(0,0,0,.22)}
html[data-theme="dark"] .movement-rank-track,
html[data-theme="dark"] .mover-track{background:#26322e}
html[data-theme="dark"] .finding-card:hover{border-color:color-mix(in srgb,var(--finding-accent) 35%,#303d39);box-shadow:0 12px 28px rgba(0,0,0,.26),0 0 18px color-mix(in srgb,var(--finding-accent) 5%,transparent)}
html[data-theme="dark"] .findings-note{background:#19252c;border-color:#2d4551}
html[data-theme="dark"] .commodity-table-wrap{background:#171f23;border-color:#2a3934!important}
html[data-theme="dark"] .commodity-trend-table thead th{background:rgba(35,45,49,.94);box-shadow:0 1px 0 #34413d}
html[data-theme="dark"] .commodity-trend-row:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--row-accent) 9%,#1a2126),#1a2126)}
html[data-theme="dark"] .sparkline-shell{background:#222c30}
html[data-theme="dark"] .coverage-stat{background:linear-gradient(145deg,#20292d,#192125);border-color:#303d39}
html[data-theme="dark"] .coverage-stat:hover{border-color:color-mix(in srgb,var(--coverage-accent,var(--brand)) 42%,#303d39);box-shadow:0 14px 30px rgba(0,0,0,.28)}


/* =====================================================================
   APP-WIDE TAB POLISH — cohesive motion and richer light/dark surfaces
   ===================================================================== */
@keyframes viewRiseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes cardSoftIn{from{opacity:0;transform:translateY(8px) scale(.992)}to{opacity:1;transform:none}}
@keyframes canvasReveal{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
@keyframes progressSweep{from{filter:brightness(.88);transform:scaleX(.05)}to{filter:none;transform:scaleX(1)}}
@keyframes viewLivePulse{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 13%,transparent)}50%{box-shadow:0 0 0 7px transparent}}

#page.app-view:not([data-view="home"]){--view-accent:var(--brand);--view-accent-2:var(--info)}
#page[data-view="snapshot"]{--view-accent:var(--gold);--view-accent-2:var(--brand)}
#page[data-view="districts"],#page[data-view="divisions"]{--view-accent:var(--info);--view-accent-2:var(--brand)}
#page[data-view="commodities"],#page[data-view="categories"]{--view-accent:var(--brand);--view-accent-2:var(--gold)}
#page[data-view="trends"]{--view-accent:var(--brand);--view-accent-2:var(--info)}
#page[data-view="compare"]{--view-accent:var(--gold);--view-accent-2:var(--info)}
#page[data-view="downloads"]{--view-accent:var(--info);--view-accent-2:var(--brand)}
#page[data-view="entry"],#page[data-view="my-submissions"]{--view-accent:var(--brand);--view-accent-2:var(--gold)}
#page[data-view="supervisor"],#page[data-view="packages"],#page[data-view="dg"],#page[data-view="workflow"],#page[data-view="quality"]{--view-accent:var(--gold);--view-accent-2:var(--brand)}
#page[data-view^="admin-"],#page[data-view="audit"]{--view-accent:var(--info);--view-accent-2:var(--gold)}

#page.app-view:not([data-view="home"])>*{animation:viewRiseIn .42s cubic-bezier(.2,.72,.25,1) both}
#page.app-view:not([data-view="home"])>*:nth-child(2){animation-delay:.035s}
#page.app-view:not([data-view="home"])>*:nth-child(3){animation-delay:.07s}
#page.app-view:not([data-view="home"])>*:nth-child(4){animation-delay:.105s}
#page.app-view:not([data-view="home"])>*:nth-child(n+5){animation-delay:.14s}
#page.app-view:not([data-view="home"]) h2{letter-spacing:-.02em;position:relative;width:fit-content;padding-bottom:5px}
#page.app-view:not([data-view="home"]) h2::after{content:"";position:absolute;left:0;bottom:0;width:42px;height:3px;border-radius:4px;background:linear-gradient(90deg,var(--view-accent),var(--view-accent-2));transition:width .22s ease}
#page.app-view:not([data-view="home"]) h2:hover::after{width:72px}

#page.app-view:not([data-view="home"]) .card{border-radius:13px;border-color:color-mix(in srgb,var(--border) 88%,var(--view-accent) 12%);box-shadow:0 5px 18px rgba(15,31,46,.055);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;overflow:hidden}
#page.app-view:not([data-view="home"]) .card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--view-accent) 28%,var(--border));box-shadow:0 13px 30px rgba(15,31,46,.10)}
#page.app-view:not([data-view="home"]) .card .card-hd{background:linear-gradient(180deg,color-mix(in srgb,var(--view-accent) 3%,var(--card)),var(--card));min-height:54px}
#page.app-view:not([data-view="home"]) .card .card-hd h3{color:var(--navy);letter-spacing:.055em;font-size:12.2px}
#page.app-view:not([data-view="home"]) .kpi2{border-radius:13px;animation:cardSoftIn .46s cubic-bezier(.2,.72,.25,1) both}
#page.app-view:not([data-view="home"]) .kpi2::before{height:3px;background:linear-gradient(90deg,var(--view-accent),var(--view-accent-2))}
#page.app-view:not([data-view="home"]) .kpi2 .icon-badge{transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s}
#page.app-view:not([data-view="home"]) .kpi2:hover .icon-badge{transform:translateY(-2px) rotate(-4deg) scale(1.06)}
#page.app-view:not([data-view="home"]) canvas{animation:canvasReveal .55s .08s cubic-bezier(.2,.72,.25,1) both}

#page.app-view:not([data-view="home"]) .tabs{display:inline-flex;max-width:100%;gap:4px;padding:4px;border:1px solid var(--border);border-radius:11px;background:color-mix(in srgb,var(--grey-bg) 58%,var(--card));box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 50%,transparent);margin-bottom:14px;overflow-x:auto}
#page.app-view:not([data-view="home"]) .tab{border:0;border-radius:8px;padding:7px 12px;white-space:nowrap;transition:background .16s,color .16s,box-shadow .16s,transform .16s}
#page.app-view:not([data-view="home"]) .tab:hover{color:var(--navy);transform:translateY(-1px)}
#page.app-view:not([data-view="home"]) .tab.active{background:var(--card);color:var(--view-accent);box-shadow:0 3px 10px rgba(15,31,46,.09)}

#page.app-view:not([data-view="home"]) .table-wrap{border-radius:11px;background:var(--card);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 45%,transparent)}
#page.app-view:not([data-view="home"]) table.dtable th{background:color-mix(in srgb,var(--grey-bg) 58%,var(--card));color:var(--muted);padding:10px 11px;z-index:1}
#page.app-view:not([data-view="home"]) table.dtable td{padding:10px 11px;border-bottom-color:color-mix(in srgb,var(--border) 74%,transparent)}
#page.app-view:not([data-view="home"]) table.dtable tbody tr{transition:background .14s ease,transform .14s ease,box-shadow .14s ease}
#page.app-view:not([data-view="home"]) table.dtable tbody tr:hover{background:color-mix(in srgb,var(--view-accent) 5%,var(--card));box-shadow:inset 3px 0 0 var(--view-accent)}
#page.app-view:not([data-view="home"]) table.dtable tbody tr.link-row:hover{cursor:pointer}

#page.app-view:not([data-view="home"]) .btn{border-radius:8px;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease,background .15s ease}
#page.app-view:not([data-view="home"]) .btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 5px 14px rgba(15,31,46,.10);border-color:color-mix(in srgb,var(--view-accent) 35%,var(--border))}
#page.app-view:not([data-view="home"]) .btn.primary:hover:not(:disabled){box-shadow:0 7px 17px color-mix(in srgb,var(--brand) 24%,transparent)}
#page.app-view:not([data-view="home"]) select,#page.app-view:not([data-view="home"]) input,#page.app-view:not([data-view="home"]) textarea{border-radius:8px;transition:border-color .15s,box-shadow .15s,background .15s}
#page.app-view:not([data-view="home"]) select:focus,#page.app-view:not([data-view="home"]) input:focus,#page.app-view:not([data-view="home"]) textarea:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--view-accent) 12%,transparent);outline:none}
#page.app-view:not([data-view="home"]) .progress>span{transform-origin:left;animation:progressSweep .65s cubic-bezier(.2,.72,.25,1) both}
#page.app-view:not([data-view="home"]) .banner{border-radius:10px;box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 35%,transparent)}
#page.app-view:not([data-view="home"]) .wf-step.current .circ{box-shadow:0 0 0 5px color-mix(in srgb,var(--brand) 12%,transparent);animation:viewLivePulse 1.9s ease-in-out infinite}
#page.app-view:not([data-view="home"]) .chip{transition:transform .15s,border-color .15s,background .15s,box-shadow .15s}
#page.app-view:not([data-view="home"]) .chip:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--view-accent) 35%,var(--border));box-shadow:0 4px 10px rgba(15,31,46,.07)}

/* Deliberately designed dark surfaces instead of a flat color inversion. */
html[data-theme="dark"] #page.app-view:not([data-view="home"]) .card{background:linear-gradient(155deg,#1c2429,#181f23);border-color:#2b3935;box-shadow:0 7px 20px rgba(0,0,0,.20)}
html[data-theme="dark"] #page.app-view:not([data-view="home"]) .card:hover{border-color:color-mix(in srgb,var(--view-accent) 35%,#2b3935);box-shadow:0 14px 32px rgba(0,0,0,.33),0 0 20px color-mix(in srgb,var(--view-accent) 4%,transparent)}
html[data-theme="dark"] #page.app-view:not([data-view="home"]) .card .card-hd{background:linear-gradient(180deg,color-mix(in srgb,var(--view-accent) 5%,#1c2429),#1a2126);border-bottom-color:#2c3935}
html[data-theme="dark"] #page.app-view:not([data-view="home"]) .tabs{background:#161e22;border-color:#2c3935;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
html[data-theme="dark"] #page.app-view:not([data-view="home"]) .tab.active{background:#222c30;box-shadow:0 4px 12px rgba(0,0,0,.28)}
html[data-theme="dark"] #page.app-view:not([data-view="home"]) .table-wrap{background:#171f23;border-color:#2c3935;box-shadow:inset 0 1px 0 rgba(255,255,255,.02)}
html[data-theme="dark"] #page.app-view:not([data-view="home"]) table.dtable th{background:#222b30;color:#a9b5b2;border-bottom-color:#34413d}
html[data-theme="dark"] #page.app-view:not([data-view="home"]) table.dtable td{border-bottom-color:#26312e}
html[data-theme="dark"] #page.app-view:not([data-view="home"]) table.dtable tbody tr:hover{background:color-mix(in srgb,var(--view-accent) 7%,#1a2126)}
html[data-theme="dark"] #page.app-view:not([data-view="home"]) select,html[data-theme="dark"] #page.app-view:not([data-view="home"]) input,html[data-theme="dark"] #page.app-view:not([data-view="home"]) textarea{background:#171f23;border-color:#33403c}

/* Download Centre */
.view-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}.view-title-row p{margin-bottom:0}
.view-live-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid color-mix(in srgb,var(--good) 28%,var(--border));background:color-mix(in srgb,var(--good) 8%,var(--card));border-radius:999px;color:var(--good);font-size:9.5px;font-weight:850;letter-spacing:.08em}.view-live-pill i{width:7px;height:7px;border-radius:50%;background:var(--good);animation:viewLivePulse 1.8s ease-in-out infinite}
.download-action-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:14px}.download-action-card{padding:17px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;position:relative;isolation:isolate}.download-action-card::after{content:"";position:absolute;right:-55px;top:-65px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--view-accent) 10%,transparent),transparent 70%);z-index:-1}.download-action-card.featured{border-color:color-mix(in srgb,var(--brand) 32%,var(--border));background:linear-gradient(145deg,color-mix(in srgb,var(--brand-light) 54%,var(--card)),var(--card))}.download-action-icon{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center}.download-action-icon.tone-brand{background:var(--brand-light);color:var(--brand)}.download-action-icon.tone-info{background:var(--info-bg);color:var(--info)}.download-action-icon.tone-gold{background:var(--gold-bg);color:var(--gold)}.download-action-copy{flex:1}.download-action-copy h3{font-size:16px!important;text-transform:none!important;letter-spacing:-.01em!important;color:var(--navy)!important;margin:3px 0 6px}.download-action-copy p{font-size:11.5px;color:var(--muted);margin:0;line-height:1.55}.download-eyebrow{font-size:9px;font-weight:850;letter-spacing:.10em;color:var(--view-accent)}.export-filter-card .card-hd>div{min-width:0}.export-safety-note{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border-radius:10px;border:1px solid color-mix(in srgb,var(--good) 22%,var(--border));background:color-mix(in srgb,var(--good) 6%,var(--card));color:var(--good)}.export-safety-note p{margin:2px 0 0;color:var(--muted);font-size:11px}.export-safety-note svg{flex-shrink:0;margin-top:1px}
html[data-theme="dark"] .download-action-card.featured{background:linear-gradient(145deg,#1a2924,#192125)}
@media(max-width:1050px){.download-action-grid{grid-template-columns:1fr 1fr}.download-action-card.featured{grid-column:1/-1}}
@media(max-width:700px){.download-action-grid{grid-template-columns:1fr}.download-action-card.featured{grid-column:auto}}

/* Weekly Snapshot: print/image exports always use the official light report palette. */
.snapshot-export-light{--brand:#0a6e4e;--brand-dark:#054a34;--brand-light:#e6f2ec;--navy:#0f1f2e;--ink:#16212b;--muted:#6b7686;--border:#e2e6e6;--bg:#f5f6f4;--card:#fff;--good:#1a7f4b;--good-bg:#e8f5ee;--bad:#b3261e;--bad-bg:#fbeae8;--warn:#a9660a;--warn-bg:#fdf1de;--info:#1d4ed8;--info-bg:#eaf0fd;--grey-bg:#eef0ef;--gold:#b9862f;--gold-bg:#faf1e2;color:#16212b!important;background:#fff!important;box-shadow:none!important}
.snapshot-export-light .card,.snapshot-export-light .kpi2{background:#fff!important;color:#16212b!important;border-color:#e2e6e6!important;box-shadow:none!important}.snapshot-export-light h1,.snapshot-export-light h2,.snapshot-export-light h3,.snapshot-export-light .kpi2 .val{color:#0f1f2e!important}.snapshot-export-light .muted,.snapshot-export-light .small{color:#6b7686}.snapshot-export-light img{filter:none!important}.snapshot-export-light table.dtable th{background:#fafbfa!important;color:#6b7686!important}.snapshot-export-light table.dtable td{border-bottom-color:#eef0ef!important}
.snapshot-exporting *, .snapshot-printing *{transition:none!important;animation:none!important}
html[data-theme="dark"] #page[data-view="snapshot"] .snap-sheet:not(.snapshot-export-light){border-color:#304039;box-shadow:0 12px 34px rgba(0,0,0,.30)}
html[data-theme="dark"] #page[data-view="snapshot"] .snap-body>.card,html[data-theme="dark"] #page[data-view="snapshot"] .snap-body .card{background:linear-gradient(155deg,#1e272c,#192125);border-color:#2e3c38}

@media print{
  html,body{background:#fff!important;color:#16212b!important}
  #snap_sheet{--brand:#0a6e4e;--brand-dark:#054a34;--brand-light:#e6f2ec;--navy:#0f1f2e;--ink:#16212b;--muted:#6b7686;--border:#e2e6e6;--bg:#f5f6f4;--card:#fff;--good:#1a7f4b;--good-bg:#e8f5ee;--bad:#b3261e;--bad-bg:#fbeae8;--warn:#a9660a;--warn-bg:#fdf1de;--info:#1d4ed8;--info-bg:#eaf0fd;--grey-bg:#eef0ef;--gold:#b9862f;--gold-bg:#faf1e2;background:#fff!important;color:#16212b!important}
  #snap_sheet .card,#snap_sheet .kpi2{background:#fff!important;color:#16212b!important;border-color:#e2e6e6!important;box-shadow:none!important}
  #snap_sheet h1,#snap_sheet h2,#snap_sheet h3,#snap_sheet .kpi2 .val{color:#0f1f2e!important}
  #snap_sheet .muted,#snap_sheet .small{color:#6b7686!important}
}

@media(prefers-reduced-motion:reduce){
  #page.app-view:not([data-view="home"])>*,#page.app-view:not([data-view="home"]) .kpi2,#page.app-view:not([data-view="home"]) canvas,#page.app-view:not([data-view="home"]) .progress>span{animation:none!important}
  #page.app-view:not([data-view="home"]) .card:hover,#page.app-view:not([data-view="home"]) .btn:hover,#page.app-view:not([data-view="home"]) .tab:hover{transform:none!important}
}

/* Extra dark-mode finishing for status surfaces and the standalone map tab. */
html[data-theme="dark"] #page.app-view:not([data-view="home"]) .banner.provisional{background:repeating-linear-gradient(135deg,#2b2416 0 10px,#261f14 10px 20px);border-color:#5a4722;color:#e0a23c}
html[data-theme="dark"] #page.app-view:not([data-view="home"]) .banner.official{background:#122a20;border-color:#285d45;color:#3fcf8e}
html[data-theme="dark"] #page.app-view:not([data-view="home"]) .banner.info{background:#1a2036;border-color:#334878;color:#8aabff}
html[data-theme="dark"] #page.app-view:not([data-view="home"]) .chip{background:#1a2226;border-color:#33403c}
html[data-theme="dark"] #page[data-view="map"] #mapSeaGrad stop:first-child{stop-color:#17262d!important}
html[data-theme="dark"] #page[data-view="map"] #mapSeaGrad stop:last-child{stop-color:#112029!important}
html[data-theme="dark"] #page[data-view="map"] #mapLandGrad stop:first-child{stop-color:#26372f!important}
html[data-theme="dark"] #page[data-view="map"] #mapLandGrad stop:nth-child(2){stop-color:#203229!important}
html[data-theme="dark"] #page[data-view="map"] #mapLandGrad stop:last-child{stop-color:#19281f!important}
html[data-theme="dark"] #page[data-view="map"] .map-label{fill:#dbe8e2!important;text-shadow:0 1px 2px #000}
html[data-theme="dark"] #page[data-view="map"] .map-sea-label{fill:#86a7b8!important}


/* ========================================================================== */
/* HOME HEADLINE KPI CARDS — animated executive treatment                    */
/* ========================================================================== */
.home-headline-kpis{gap:16px!important;perspective:1100px}
.home-headline-kpis .kpi2{
  --kpi-accent:var(--brand);--kpi-soft:var(--brand-light);
  min-height:184px;padding:20px 21px 18px;border-radius:15px;isolation:isolate;
  border:1px solid color-mix(in srgb,var(--kpi-accent) 18%,var(--border));
  background:linear-gradient(145deg,color-mix(in srgb,var(--kpi-soft) 36%,var(--card)) 0%,var(--card) 58%);
  box-shadow:0 8px 24px rgba(15,31,46,.07),inset 0 1px 0 rgba(255,255,255,.72);
  opacity:0;transform:translateY(14px) scale(.985);
  animation:homeKpiEnter .58s cubic-bezier(.2,.78,.24,1) forwards;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,border-color .22s;
}
.home-headline-kpis .kpi2:nth-child(2){animation-delay:.07s}.home-headline-kpis .kpi2:nth-child(3){animation-delay:.14s}.home-headline-kpis .kpi2:nth-child(4){animation-delay:.21s}
.home-headline-kpis .kpi2.tone-good{--kpi-accent:var(--good);--kpi-soft:var(--good-bg)}
.home-headline-kpis .kpi2.tone-bad{--kpi-accent:var(--bad);--kpi-soft:var(--bad-bg)}
.home-headline-kpis .kpi2.tone-info{--kpi-accent:var(--info);--kpi-soft:var(--info-bg)}
.home-headline-kpis .kpi2.tone-gold{--kpi-accent:var(--gold);--kpi-soft:var(--gold-bg)}
.home-headline-kpis .kpi2::before{height:4px;left:18px;right:18px;top:0;border-radius:0 0 99px 99px;background:linear-gradient(90deg,var(--kpi-accent),color-mix(in srgb,var(--kpi-accent) 48%,#fff));transform:scaleX(.22);transform-origin:left;animation:kpiAccentGrow .82s .22s cubic-bezier(.2,.8,.2,1) forwards}
.home-headline-kpis .kpi2::after{content:"";position:absolute;right:-62px;top:-72px;width:170px;height:170px;border-radius:50%;z-index:-1;background:radial-gradient(circle,color-mix(in srgb,var(--kpi-accent) 15%,transparent),transparent 68%);transition:transform .3s ease,opacity .3s}
.home-headline-kpis .kpi2:hover{transform:translateY(-5px) scale(1.012);border-color:color-mix(in srgb,var(--kpi-accent) 38%,var(--border));box-shadow:0 18px 38px color-mix(in srgb,var(--kpi-accent) 12%,rgba(15,31,46,.12)),inset 0 1px 0 rgba(255,255,255,.78)}
.home-headline-kpis .kpi2:hover::after{transform:translate(-8px,8px) scale(1.1)}
.home-headline-kpis .kpi2 .icon-badge{width:47px;height:47px;border-radius:13px;box-shadow:0 8px 18px color-mix(in srgb,var(--kpi-accent) 22%,transparent);transition:transform .24s cubic-bezier(.34,1.56,.64,1),box-shadow .22s;animation:kpiIconFloat 4s ease-in-out infinite}
.home-headline-kpis .kpi2:nth-child(2) .icon-badge{animation-delay:-.7s}.home-headline-kpis .kpi2:nth-child(3) .icon-badge{animation-delay:-1.4s}.home-headline-kpis .kpi2:nth-child(4) .icon-badge{animation-delay:-2.1s}
.home-headline-kpis .kpi2:hover .icon-badge{transform:translateY(-2px) scale(1.08) rotate(-2deg);box-shadow:0 12px 24px color-mix(in srgb,var(--kpi-accent) 30%,transparent)}
.home-headline-kpis .kpi2 .val{font-size:31px;margin-top:17px!important;line-height:1;font-weight:900;letter-spacing:-.045em;color:var(--navy)}
.home-headline-kpis .kpi2.tone-good .val{color:var(--good)}.home-headline-kpis .kpi2.tone-bad .val{color:var(--bad)}
.home-headline-kpis .kpi2 .lbl2{margin-top:11px;font-size:11px;letter-spacing:.065em;font-weight:850}
.home-headline-kpis .kpi2 .sub{margin-top:8px;font-size:12px}
@keyframes homeKpiEnter{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes kpiAccentGrow{to{transform:scaleX(1)}}
@keyframes kpiIconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* Snapshot-specific mover rows: always visible in UI, print and image export. */
.snapshot-mover-list{display:flex;flex-direction:column;gap:1px}
.snapshot-mover-item{display:grid!important;grid-template-columns:24px 28px minmax(0,1fr) 52px;align-items:center;gap:7px;padding:5px 3px!important;opacity:1!important;transform:none!important;animation:none!important;border-bottom:1px dashed var(--border)}
.snapshot-mover-item:last-child{border-bottom:none}.snapshot-mover-rank{font-size:8px;font-weight:900;color:var(--muted)}
.snapshot-mover-item .mi{width:26px;height:26px;font-size:13px;background:var(--bad-bg);color:var(--bad)}.snapshot-mover-item.down .mi{background:var(--good-bg);color:var(--good)}
.snapshot-mover-copy{min-width:0;display:flex;flex-direction:column;gap:1px}.snapshot-mover-copy b{font-size:9.6px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.snapshot-mover-copy small{font-size:7.8px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.snapshot-mover-value{text-align:right;font-size:9.5px;font-weight:900;color:var(--bad)}.snapshot-mover-item.down .snapshot-mover-value{color:var(--good)}
.snapshot-no-movers{padding:12px 0}

/* Explicit safe export/print treatment for mover rows and modern-effects cleanup. */
.snapshot-export-light .snapshot-mover-item,#snap_sheet.snapshot-export-light .snapshot-mover-item{opacity:1!important;animation:none!important;transform:none!important;background:#fff!important;border-bottom-color:#e2e6e6!important;box-shadow:none!important}
.snapshot-export-light .snapshot-mover-item .mi{box-shadow:none!important}
@media print{
  #snap_sheet .snapshot-mover-item{opacity:1!important;animation:none!important;transform:none!important;display:grid!important;padding:2px 0!important;grid-template-columns:18px 18px minmax(0,1fr) 38px;gap:4px}
  #snap_sheet .snapshot-mover-item .mi{width:17px!important;height:17px!important;font-size:9px!important}
  #snap_sheet .snapshot-mover-copy b{font-size:7.8px!important}#snap_sheet .snapshot-mover-copy small{font-size:6.8px!important}#snap_sheet .snapshot-mover-value{font-size:7.8px!important}
}

/* Dark-mode finish for the new Home KPI treatment. */
html[data-theme="dark"] .home-headline-kpis .kpi2{background:linear-gradient(145deg,color-mix(in srgb,var(--kpi-accent) 7%,#1d262b),#181f23 68%);border-color:color-mix(in srgb,var(--kpi-accent) 24%,#31403b);box-shadow:0 12px 28px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.035)}
html[data-theme="dark"] .home-headline-kpis .kpi2:hover{border-color:color-mix(in srgb,var(--kpi-accent) 44%,#31403b);box-shadow:0 18px 38px rgba(0,0,0,.42),0 0 24px color-mix(in srgb,var(--kpi-accent) 7%,transparent)}
html[data-theme="dark"] .home-headline-kpis .kpi2 .val{color:#f2f7f5}html[data-theme="dark"] .home-headline-kpis .kpi2.tone-good .val{color:#42d38e}html[data-theme="dark"] .home-headline-kpis .kpi2.tone-bad .val{color:#ff746c}
html[data-theme="dark"] .snapshot-mover-item{border-bottom-color:#2e3b37}
@media(max-width:900px){.home-headline-kpis{grid-template-columns:repeat(2,1fr)!important}.home-headline-kpis .kpi2{min-height:168px}}
@media(max-width:560px){.home-headline-kpis{grid-template-columns:1fr!important}}
@media(prefers-reduced-motion:reduce){.home-headline-kpis .kpi2,.home-headline-kpis .kpi2::before,.home-headline-kpis .kpi2 .icon-badge{animation:none!important;opacity:1!important;transform:none!important}}


/* ========================================================================== */
/* Snapshot full-image export + account menu refinements                      */
/* ========================================================================== */
/* Keep html2canvas on CSS2/3-safe computed colors while exporting. This avoids
   Chromium resolving color-mix() to CSS Color 4 `color(...)`, which html2canvas
   1.4.x cannot parse, while preserving the official light report appearance. */
body.snapshot-exporting #snap_sheet.snapshot-export-light{
  background:#fff!important;color:#16212b!important;box-shadow:none!important;border:1px solid #e2e6e6!important;
}
body.snapshot-exporting #snap_sheet.snapshot-export-light *,
body.snapshot-exporting #snap_sheet.snapshot-export-light *::before,
body.snapshot-exporting #snap_sheet.snapshot-export-light *::after{
  animation:none!important;transition:none!important;text-shadow:none!important;filter:none!important;
}
body.snapshot-exporting #snap_sheet.snapshot-export-light .card,
body.snapshot-exporting #snap_sheet.snapshot-export-light .kpi2{
  background:#fff!important;border-color:#e2e6e6!important;box-shadow:none!important;
}
body.snapshot-exporting #snap_sheet.snapshot-export-light .card-hd{
  background:#fff!important;border-bottom-color:#e2e6e6!important;
}
body.snapshot-exporting #snap_sheet.snapshot-export-light .card::before,
body.snapshot-exporting #snap_sheet.snapshot-export-light .card::after,
body.snapshot-exporting #snap_sheet.snapshot-export-light .kpi2::after{display:none!important}
body.snapshot-exporting #snap_sheet.snapshot-export-light .kpi2::before{
  background:linear-gradient(90deg,#0a6e4e,#b9862f)!important;
}
body.snapshot-exporting #snap_sheet.snapshot-export-light .snap-header{
  background:linear-gradient(120deg,#054a34 0%,#0a6e4e 55%,#0d7f57 100%)!important;
}
body.snapshot-exporting #snap_sheet.snapshot-export-light .snap-header::after{
  background:radial-gradient(circle at 90% 0%,rgba(255,255,255,.14),transparent 45%)!important;
}
body.snapshot-exporting #snap_sheet.snapshot-export-light .snap-footer{background:#0f1f2e!important}
body.snapshot-exporting #snap_sheet.snapshot-export-light .snap-finding .fi{background:#e6f2ec!important;color:#054a34!important}
body.snapshot-exporting #snap_sheet.snapshot-export-light .icon-badge{box-shadow:none!important}
body.snapshot-exporting #snap_sheet.snapshot-export-light .snapshot-mover-item{background:#fff!important}
body.snapshot-exporting #snap_sheet.snapshot-export-light .snap-division-table{width:100%!important;min-width:0!important}

/* Compact account menu shown before opening the password dialog. */
.account-popover{
  position:fixed;z-index:260;padding:9px;border:1px solid var(--border);border-radius:14px;background:var(--card);
  box-shadow:0 18px 45px rgba(15,31,46,.20),0 3px 10px rgba(15,31,46,.08);
  opacity:0;transform:translateY(-6px) scale(.985);transform-origin:top right;
  animation:accountPopoverIn .16s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes accountPopoverIn{to{opacity:1;transform:translateY(0) scale(1)}}
.account-popover-head{display:flex;align-items:center;gap:10px;padding:8px 9px 10px}
.account-popover-head .account-summary-avatar{width:38px;height:38px;font-size:11px}
.account-popover-identity{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.account-popover-identity>b{font-size:12.5px;color:var(--navy);max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-popover-identity>span:not(.role-tag){font-size:10px;color:var(--muted);max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-popover-identity .role-tag{margin-top:3px}
.account-popover-divider{height:1px;background:var(--border);margin:1px 3px 7px}
.account-popover-action{
  width:100%;display:grid;grid-template-columns:34px minmax(0,1fr) 16px;align-items:center;gap:9px;text-align:left;
  border:0;border-radius:10px;padding:9px;background:transparent;color:var(--ink);cursor:pointer;font:inherit;
  transition:background .15s ease,transform .15s ease;
}
.account-popover-action:hover,.account-popover-action:focus-visible{background:var(--brand-light);outline:none;transform:translateX(2px)}
.account-popover-action-icon{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--brand-light);color:var(--brand)}
.account-popover-action>span:nth-child(2){display:flex;flex-direction:column;gap:1px}
.account-popover-action b{font-size:11.5px;color:var(--navy)}
.account-popover-action small{font-size:9.5px;color:var(--muted)}
.account-popover-arrow{font-size:20px;line-height:1;color:var(--muted)}
html[data-theme="dark"] .account-popover{background:#1b2327;border-color:#31403b;box-shadow:0 20px 50px rgba(0,0,0,.48)}
html[data-theme="dark"] .account-popover-action:hover{background:#203b32}
html[data-theme="dark"] .account-popover-action-icon{background:#173c30;color:#45d49a}
@media(max-width:560px){.account-popover{left:12px!important;right:12px!important;width:auto!important}}

/* ---- Shop price-entry form (Sec.: data-entry usability pass) ---- */
.sf-save-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.sf-progress-wrap{display:flex;align-items:center;gap:10px;min-width:220px}
.sf-progress-track{width:120px;height:8px;border-radius:99px;background:var(--grey-bg,#eef0ef);overflow:hidden;flex-shrink:0}
.sf-progress-fill{height:100%;background:linear-gradient(90deg,var(--brand),var(--good));border-radius:99px;transition:width .25s ease}
.sf-section-card{border:1px solid var(--border);border-radius:8px;padding:12px;margin-bottom:14px;background:var(--card)}
.sf-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:10px}
.sf-table-wrap{border-radius:10px}
table.sf-table td, table.sf-table th{padding:11px 12px}
table.sf-table tbody tr.sf-row{transition:background .15s ease}
table.sf-table tbody tr.sf-row:hover{background:var(--grey-bg,#f5f7f6)}
table.sf-table select.sfAvail{min-height:34px;padding:4px 8px}
table.sf-table input.sfPrice{min-height:34px;font-weight:600}
table.sf-table .sfRowStatus{font-size:16px}
tr.sf-cat-row td{background:var(--brand-light,#e6f2ec);color:var(--brand-dark,var(--brand));font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;padding:8px 12px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
tr.sf-cat-row:first-child td{border-top:none}
.sf-cat-name{margin-right:8px}
.sf-cat-count{font-weight:600;opacity:.75;text-transform:none;letter-spacing:0}
html[data-theme="dark"] table.sf-table tbody tr.sf-row:hover{background:#1f2a2c}
html[data-theme="dark"] tr.sf-cat-row td{background:#173c30;color:#6fe0ac}
@media(max-width:640px){
  table.sf-table td, table.sf-table th{padding:9px 8px;font-size:12.5px}
  table.sf-table input.sfPrice{width:88px!important}
  /* The row is wider than the screen (Unit/Availability/Price only reach by scrolling right),
     so without this the commodity name scrolls out of view right when you need it most --
     while your thumb is on the price field for that row. Pin it so you always know what you're
     pricing, matching the behaviour of a frozen first column in a spreadsheet. */
  .sf-table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch;}
  table.sf-table td:first-child, table.sf-table th:first-child{
    position:sticky; left:0; z-index:2; background:var(--card);
    max-width:132px; overflow:hidden; text-overflow:ellipsis;
    box-shadow:2px 0 5px rgba(0,0,0,.10);
  }
  table.sf-table th:first-child{z-index:3;}
  tr.sf-cat-row td:first-child{position:static; max-width:none;}
  table.sf-table tbody tr.sf-row:hover td:first-child{background:var(--grey-bg,#f5f7f6)}
  html[data-theme="dark"] table.sf-table tbody tr.sf-row:hover td:first-child{background:#1f2a2c}

  /* Supervisor/DG commodity review table (District Package page): same problem as the shop
     entry table above -- Previous/Current/WoW%/Status/Actions only reach by scrolling right,
     which otherwise scrolls the commodity name away right when you need it to decide
     Approve vs Return. Pin the checkbox + name columns together. */
  table.pkg-obs-table{table-layout:auto;}
  table.pkg-obs-table td.obs-col-check, table.pkg-obs-table th.obs-col-check,
  table.pkg-obs-table td.obs-col-name, table.pkg-obs-table th.obs-col-name{
    position:sticky; left:0; z-index:2; background:var(--card);
  }
  table.pkg-obs-table th.obs-col-check, table.pkg-obs-table th.obs-col-name{ z-index:3; }
  table.pkg-obs-table td.obs-col-name, table.pkg-obs-table th.obs-col-name{
    max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    box-shadow:2px 0 5px rgba(0,0,0,.10);
  }
  table.pkg-obs-table th.obs-col-check + th.obs-col-name,
  table.pkg-obs-table td.obs-col-check + td.obs-col-name{ left:34px; }
}
@media(prefers-reduced-motion:reduce){.account-popover{animation:none!important;opacity:1!important;transform:none!important}}

/* ---------- homepage polish (Sep 2026) ---------- */
/* Top bar: keep the page title whole and stop the release pill wrapping on laptop widths. */
#topbar .page-title{flex-shrink:0;}
.pub-status{white-space:nowrap; flex-shrink:0;}
.pub-status .ps-short{display:none;}
@media (max-width:1280px){.pub-status .ps-long{display:none;} .pub-status .ps-short{display:inline;}}
/* Top 10 movers: columns used to need ~372px while the panel is ~343px wide on laptops, clipping the %. */
.price-mover-row{grid-template-columns:22px 30px minmax(0,1fr) minmax(36px,.45fr) auto;gap:7px;}
.mover-value{min-width:44px;}
@media (max-width:900px){.price-mover-row{grid-template-columns:22px 30px minmax(0,1fr) minmax(36px,.45fr) auto;}}
/* Line icons replacing emoji in ticker, movers and the commodities table. */
.commodity-ticker-card .ctc-icon{color:var(--cat-accent,#0a6e4e);background:color-mix(in srgb,var(--cat-accent,#0a6e4e) 12%,#fff);border:1px solid color-mix(in srgb,var(--cat-accent,#0a6e4e) 28%,#fff);font-size:0;}
.mover-emoji{color:var(--mover-accent);font-size:0;}
.commodity-line-icon{color:var(--cat-accent,var(--brand));font-size:0;}
/* Map status card: rising / falling / unchanged split. */
.msc-split{display:flex;flex-wrap:wrap;gap:4px 8px;margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.14);font-size:9.5px;font-weight:700;}
.msc-split .up{color:#ffb3a7;} .msc-split .down{color:#7cf0b8;} .msc-split .flat{color:#d4d8ff;}
/* Homepage round 2: wrapping chart titles, no nested scroll areas, "show all" toggles. */
.home-page .card-hd h3,.home-page .chart-fill-row .card-hd h3{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3;}
.home-page .home-trend-row{display:block;}
.enhanced-cat-move-list.is-collapsible{max-height:none;overflow:visible;padding-right:0;}
.commodity-table-wrap.is-collapsible{max-height:none;}
.is-collapsible:not(.is-expanded) .is-extra{display:none;}
.enhanced-cat-move-row .cmr-counts{width:auto!important;min-width:96px;white-space:nowrap;}
.enhanced-cat-move-row .cmr-counts .muted{font-weight:700;}
.home-show-more{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:10px;padding:9px 12px;border:1px dashed color-mix(in srgb,var(--brand) 40%,var(--border));border-radius:10px;background:color-mix(in srgb,var(--brand) 6%,transparent);color:var(--brand);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:background .15s,border-color .15s;}
.home-show-more:hover{background:color-mix(in srgb,var(--brand) 12%,transparent);border-style:solid;}
.home-show-more:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
/* ---------- Home hero v2: page heading + large KPI tiles with 14-week charts ---------- */
.home-page-head{padding:6px 2px 14px;}
.hph-eyebrow{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);}
.hph-title{margin-top:4px;font-size:28px;line-height:1.15;letter-spacing:-.02em;color:var(--navy);}
.home-hero{position:relative;overflow:hidden;isolation:isolate;padding:22px;border-radius:20px;color:#fff;
  background:radial-gradient(900px 420px at 100% 0%,rgba(255,196,77,.22),transparent 60%),
    radial-gradient(760px 420px at 0% 100%,rgba(47,191,135,.38),transparent 60%),
    linear-gradient(125deg,#071a33 0%,#0b3558 40%,#0b5f6b 72%,#0e8a6c 100%);
  box-shadow:0 24px 50px rgba(7,26,51,.35),inset 0 0 0 1px rgba(255,255,255,.08);}
.home-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(ellipse at 70% 40%,#000 20%,transparent 75%);}
.home-hero::after{content:"";position:absolute;z-index:-1;width:420px;height:420px;right:-160px;top:-200px;border-radius:50%;background:radial-gradient(circle,rgba(255,211,122,.25),transparent 65%);animation:hhGlow 9s ease-in-out infinite alternate;pointer-events:none;}
@keyframes hhGlow{to{transform:translate(-60px,40px) scale(1.1);opacity:.7;}}
.hh-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.hh-tile{--hh-accent:#5fe0ad;position:relative;display:flex;flex-direction:column;min-width:0;padding:18px 18px 14px;border-radius:16px;background:rgba(4,18,36,.38);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);transition:transform .2s ease,background .2s ease,border-color .2s ease;}
.hh-tile:hover{transform:translateY(-3px);background:rgba(4,18,36,.5);border-color:rgba(255,255,255,.22);}
.hh-tile.tone-gold{--hh-accent:#ffd37a;}
.hh-tile.tone-up{--hh-accent:#ff8b7d;}
.hh-tile.tone-down{--hh-accent:#5fe0ad;}
.hh-tile.tone-flat{--hh-accent:#a9c4d6;}
.hh-head{display:flex;align-items:center;gap:9px;}
.hh-icon{width:30px;height:30px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:9px;color:var(--hh-accent);background:color-mix(in srgb,var(--hh-accent) 16%,transparent);border:1px solid color-mix(in srgb,var(--hh-accent) 30%,transparent);}
.hh-lbl{flex:1;min-width:0;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.78);}
.hh-chip{flex-shrink:0;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:800;white-space:nowrap;background:rgba(255,255,255,.1);color:#dce8ef;}
.hh-chip.up{color:#ffb3a7;background:rgba(255,107,96,.16);}
.hh-chip.down{color:#86f0bd;background:rgba(63,207,142,.16);}
.hh-val{margin-top:14px;font-size:40px;line-height:1;font-weight:800;letter-spacing:-.03em;white-space:nowrap;}
.hh-sub{margin-top:6px;font-size:12.5px;color:rgba(255,255,255,.68);}
.hh-chart{margin-top:12px;min-height:90px;}
.hh-chart-svg{display:block;width:100%;height:auto;overflow:visible;}
.hh-chart-empty{padding:30px 0;text-align:center;font-size:12px;color:rgba(255,255,255,.55);}
.hh-gridline{stroke:rgba(255,255,255,.09);stroke-width:1;}
.hh-zero{stroke:rgba(255,255,255,.35);stroke-width:1;stroke-dasharray:3 3;}
.hh-ytick,.hh-xtick{fill:rgba(255,255,255,.55);font-size:9px;font-weight:600;}
.hh-line{fill:none;stroke:var(--hh-accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:hhDraw 1.2s cubic-bezier(.3,.7,.2,1) .15s forwards;filter:drop-shadow(0 2px 6px color-mix(in srgb,var(--hh-accent) 45%,transparent));}
@keyframes hhDraw{to{stroke-dashoffset:0;}}
.hh-area{opacity:0;animation:hhFade .6s ease .9s forwards;}
@keyframes hhFade{to{opacity:1;}}
.hh-dot{fill:#0b3558;stroke:var(--hh-accent);stroke-width:1.4;cursor:pointer;transition:r .15s;}
.hh-dot:hover{r:4;}
.hh-dot-last{fill:var(--hh-accent);stroke:#fff;stroke-width:1.6;cursor:pointer;}
.hh-pulse{fill:none;stroke:var(--hh-accent);stroke-width:1.5;opacity:.6;transform-box:fill-box;transform-origin:center;animation:hhPulse 2.2s ease-out infinite;}
@keyframes hhPulse{from{transform:scale(.5);opacity:.8;}to{transform:scale(1.6);opacity:0;}}
.hh-foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding-top:9px;border-top:1px solid rgba(255,255,255,.1);font-size:11px;color:rgba(255,255,255,.55);}
.hh-foot b{color:rgba(255,255,255,.85);font-weight:700;}
/* ticker matches the new hero palette */
.commodity-ticker{background:linear-gradient(100deg,#071a33 0%,#0b3558 55%,#0b5f6b 100%)!important;box-shadow:0 14px 28px rgba(7,26,51,.3)!important;}
@media (max-width:1100px){.hh-val{font-size:32px;}.home-hero{padding:18px;}.hh-grid{gap:12px;}.hh-tile{padding:15px 15px 12px;}}
@media (max-width:900px){.hh-grid{grid-template-columns:1fr;}.hh-val{font-size:36px;}.hph-title{font-size:23px;}}
@media (max-width:560px){.home-hero{padding:12px;border-radius:16px;}.hph-title{font-size:20px;}.hph-eyebrow{font-size:10.5px;}}
@media (prefers-reduced-motion:reduce){.home-hero::after,.hh-pulse{animation:none!important;}.hh-line{animation:none!important;stroke-dashoffset:0;}.hh-area{animation:none!important;opacity:1;}}
/* ---------- Home map row: map + vertical commodity panel, sized like the chart cards below ---------- */
.home-map-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:16px;align-items:stretch;}
.home-map-row > .home-map-card{display:flex;flex-direction:column;height:500px;margin:0;}
.home-page .home-map-row .home-map-shell{flex:1;height:auto;min-height:0;}
.home-map-card::before{background:linear-gradient(90deg,#0e8a6c 0%,#ffc44d 45%,#0b5f6b 100%)!important;}
.home-map-card .map-kicker{color:var(--gold)!important;}
/* vertical commodity panel */
.commodity-vticker{position:relative;display:flex;flex-direction:column;height:500px;margin:0;overflow:hidden;border-radius:14px;color:#fff;
  background:radial-gradient(420px 260px at 100% 0%,rgba(255,196,77,.16),transparent 60%),linear-gradient(160deg,#071a33 0%,#0b3558 55%,#0b5f6b 100%);
  border:1px solid rgba(255,255,255,.08);box-shadow:0 14px 30px rgba(7,26,51,.28);}
.cvt-head{display:flex;align-items:center;gap:10px;padding:14px 16px 12px;border-bottom:1px solid rgba(255,255,255,.1);}
.cvt-head h3{margin:0;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:#fff;}
.cvt-head .small{margin-top:2px;font-size:10.5px;color:rgba(255,255,255,.62);}
.cvt-head .icon-badge{background:rgba(255,255,255,.12)!important;color:#ffd37a!important;}
.cvt-live{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.1);font-size:10px;font-weight:800;letter-spacing:.08em;color:#eafff6;white-space:nowrap;}
.cvt-live i{width:6px;height:6px;border-radius:50%;background:#ffc44d;box-shadow:0 0 0 3px rgba(255,196,77,.3);animation:live-blink 1.7s ease-in-out infinite;}
.cvt-viewport{position:relative;flex:1;min-height:0;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);}
.cvt-track{display:flex;flex-direction:column;gap:8px;padding:10px 14px 2px;animation:cvtScroll var(--cvt-dur,120s) linear infinite;}
.commodity-vticker:hover .cvt-track,.cvt-track:focus-within{animation-play-state:paused;}
@keyframes cvtScroll{to{transform:translateY(-50%);}}
.commodity-vticker .commodity-ticker-card{width:100%;grid-template-columns:34px minmax(0,1fr) 84px;min-height:50px;padding:7px 11px;}
.commodity-vticker .commodity-ticker-card:hover{transform:translateX(-3px);}
.commodity-vticker .commodity-ticker-card .ctc-copy b{font-size:12.5px;}
.commodity-vticker .commodity-ticker-card .ctc-copy small{font-size:10px;}
.commodity-vticker .ctc-trend em{font-size:11px;}
/* map overlays: navy/teal to match the hero instead of indigo/purple */
.home-map-shell .map-status-card{background:rgba(7,26,51,.9)!important;border:1px solid rgba(255,255,255,.14);}
.spi-dcard{background:linear-gradient(150deg,rgba(7,26,51,.97),rgba(11,53,88,.97) 60%,rgba(11,95,107,.97))!important;box-shadow:0 14px 30px rgba(7,26,51,.45)!important;transition:opacity .18s ease;}
.spi-dcard::after{background:rgba(11,62,92,.97)!important;}
.spi-dcard.below::after{background:rgba(7,26,51,.97)!important;}
.spi-dcard.is-hidden{opacity:0;pointer-events:none;}
.spi-dcard.is-peek .dc-bar,.spi-dcard.is-peek .dc-seq{display:none;}
.dc-top,.dc-main small,.dc-row{color:#b9d3dd!important;}
.dc-bar::after{background:linear-gradient(90deg,#ffc44d,#2fbf87)!important;}
.spi-tour-btn{background:rgba(7,26,51,.9)!important;box-shadow:0 6px 16px rgba(7,26,51,.3)!important;}
.spi-tour-btn:hover{background:#0b5f6b!important;}
.spi-lmap .leaflet-bar a{color:#0b3558!important;}
.home-map-shell.is-user .spi-tour-btn{opacity:.55;}
.spi-mk-wrap.is-hover .spi-mk b{transform:scale(1.45);box-shadow:0 0 0 4px rgba(47,191,135,.55),0 4px 12px rgba(7,26,51,.5);}
.home-map-shell.is-user .spi-mk-wrap{cursor:pointer;}
@media (max-width:900px){
  .home-map-row{grid-template-columns:1fr;}
  .home-map-row > .home-map-card{height:420px;}
  .commodity-vticker{height:380px;}
}
@media (prefers-reduced-motion:reduce){.cvt-track,.cvt-live i{animation:none!important;}.cvt-viewport{overflow-y:auto;}}
/* Home heading lives in the top bar; a copy above the hero is used only on phones, where the top bar hides its title. */
#topbar .page-title.home-topbar-title{display:flex;flex-direction:column;justify-content:center;gap:1px;line-height:1.1;}
#topbar .home-topbar-title .hph-eyebrow{font-size:10px;letter-spacing:.14em;}
#topbar .home-topbar-title .hph-title{margin:0;font-size:19px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.home-head-mobile{display:none;}
@media (max-width:560px){.home-head-mobile{display:block;}}
/* ---------- Commodity panel cards v2: bigger icon, bigger animated sparkline, price line ---------- */
.commodity-vticker .cvt-track{gap:10px;padding:12px 14px 2px;}
.commodity-vticker .cvt-card{--trend:#7a8a96;position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:52px minmax(0,1fr) 136px;align-items:center;gap:14px;width:100%;min-height:88px;padding:12px 14px 12px 18px;border-radius:15px;background:linear-gradient(135deg,#ffffff 0%,#f4f8fa 100%);border:1px solid rgba(255,255,255,.9);box-shadow:0 8px 20px rgba(3,30,50,.22);color:#16212b;text-align:left;cursor:pointer;transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,border-color .22s;}
.commodity-vticker .cvt-card.dir-up{--trend:#e11d48;}
.commodity-vticker .cvt-card.dir-down{--trend:#0f9d63;}
/* category-coloured accent stripe */
.commodity-vticker .cvt-card::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:0 4px 4px 0;background:linear-gradient(180deg,var(--cat-accent),color-mix(in srgb,var(--cat-accent) 40%,#fff));}
/* light sweep that glides across each card in turn */
.commodity-vticker .cvt-card::after{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.95),transparent);transform:skewX(-18deg);animation:cvtSheen 6s ease-in-out infinite;animation-delay:var(--card-delay,0s);pointer-events:none;}
@keyframes cvtSheen{0%,70%{left:-40%;}100%{left:130%;}}
.commodity-vticker .cvt-card:hover{transform:translateX(-4px) scale(1.015);border-color:color-mix(in srgb,var(--trend) 55%,#fff);box-shadow:0 14px 30px rgba(3,30,50,.32),0 0 0 3px color-mix(in srgb,var(--trend) 18%,transparent);background:#fff;}
/* icon */
.commodity-vticker .cvt-card .ctc-icon{width:52px;height:52px;border-radius:16px;color:var(--cat-accent);background:radial-gradient(circle at 30% 25%,#fff,color-mix(in srgb,var(--cat-accent) 18%,#fff) 70%);border:1px solid color-mix(in srgb,var(--cat-accent) 30%,#fff);box-shadow:0 6px 14px color-mix(in srgb,var(--cat-accent) 25%,transparent),inset 0 1px 0 #fff;transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
.commodity-vticker .cvt-card .ctc-icon svg{width:26px;height:26px;}
.commodity-vticker .cvt-card:hover .ctc-icon{transform:scale(1.1) rotate(-6deg);}
/* text */
.commodity-vticker .cvt-card .ctc-copy b{font-size:14px;font-weight:750;color:#10202c;}
.commodity-vticker .cvt-card .ctc-copy small{margin-top:2px;font-size:11px;color:#667582;}
.commodity-vticker .ctc-price{display:block;margin-top:5px;font-size:13px;font-weight:800;color:#0b3558;font-variant-numeric:tabular-nums;}
/* sparkline */
.commodity-vticker .cvt-card .ctc-trend{display:flex;flex-direction:column;align-items:flex-end;gap:4px;}
.cvt-spark{display:block;width:128px;height:46px;overflow:visible;}
.cvt-line{fill:none;stroke:var(--trend);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:cvtDraw 1.4s cubic-bezier(.3,.7,.2,1) .2s forwards;filter:drop-shadow(0 2px 3px color-mix(in srgb,var(--trend) 35%,transparent));}
.cvt-card:hover .cvt-line{animation:cvtRedraw .9s cubic-bezier(.3,.7,.2,1) forwards;}
@keyframes cvtDraw{to{stroke-dashoffset:0;}}
@keyframes cvtRedraw{from{stroke-dashoffset:1;}to{stroke-dashoffset:0;}}
.cvt-area{opacity:0;animation:hhFade .6s ease 1s forwards;}
.cvt-dot{fill:var(--trend);stroke:#fff;stroke-width:1.6;}
.cvt-ping{fill:none;stroke:var(--trend);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:hhPulse 2.2s ease-out infinite;animation-delay:var(--card-delay,0s);}
/* % chip */
.commodity-vticker .cvt-pct{display:inline-flex;align-items:center;padding:3px 9px;border-radius:99px;font-size:12px!important;font-style:normal;font-weight:800;color:var(--trend)!important;background:color-mix(in srgb,var(--trend) 12%,#fff);}
.commodity-vticker .cvt-pct .pct{color:inherit!important;}
@media (max-width:1180px){.commodity-vticker .cvt-card{grid-template-columns:46px minmax(0,1fr) 112px;gap:11px;}.commodity-vticker .cvt-card .ctc-icon{width:46px;height:46px;}.cvt-spark{width:108px;height:40px;}}
@media (max-width:560px){.commodity-vticker .cvt-card{grid-template-columns:42px minmax(0,1fr) 96px;min-height:78px;padding:10px 10px 10px 14px;}.commodity-vticker .cvt-card .ctc-icon{width:42px;height:42px;border-radius:13px;}.commodity-vticker .cvt-card .ctc-icon svg{width:22px;height:22px;}.cvt-spark{width:92px;height:36px;}.commodity-vticker .cvt-card .ctc-copy b{font-size:13px;}}
@media (prefers-reduced-motion:reduce){.commodity-vticker .cvt-card::after,.cvt-ping{animation:none!important;display:none;}.cvt-line{animation:none!important;stroke-dashoffset:0;}.cvt-area{animation:none!important;opacity:1;}}
/* Top bar between phone and desktop widths: let the Home heading shrink and compact the account chip. */
#topbar .page-title.home-topbar-title{flex-shrink:1;min-width:0;}
#topbar .home-topbar-title .hph-eyebrow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media (max-width:900px){#topbar .userchip > div,#topbar .userchip .role-tag{display:none;}}
@media (max-width:700px){#topbar .home-topbar-title .hph-eyebrow{display:none;} #topbar .home-topbar-title .hph-title{font-size:16px;}}
/* Hero tiles are links */
a.hh-tile{color:#fff;text-decoration:none;cursor:pointer;}
a.hh-tile:hover{border-color:color-mix(in srgb,var(--hh-accent) 55%,transparent);box-shadow:0 14px 30px rgba(0,0,0,.25),0 0 0 1px color-mix(in srgb,var(--hh-accent) 35%,transparent);}
a.hh-tile:focus-visible{outline:3px solid var(--hh-accent);outline-offset:3px;}
a.hh-tile:active{transform:translateY(-1px) scale(.995);}
.hh-cta{display:inline-flex;align-items:center;gap:5px;color:var(--hh-accent)!important;font-weight:800;}
.hh-cta span{display:inline-block;transition:transform .2s ease;}
a.hh-tile:hover .hh-cta span{transform:translateX(4px);}
/* Map + commodity row: shorter cards, identical 58px title bars */
.home-map-row > .home-map-card,.home-map-row > .commodity-vticker{height:430px;}
.home-map-row > .home-map-card{padding:0!important;overflow:hidden;border-radius:14px;}
.home-map-row .map-card-head{box-sizing:border-box;height:58px;margin-top:4px;padding:0 14px;border-bottom:1px solid var(--border);}
.home-page .home-map-row .home-map-shell{margin:10px 10px 0;border-radius:12px;}
.home-map-row .map-legend-strip{padding:6px 10px 8px;margin-top:0;}
.home-map-row > .commodity-vticker::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;z-index:2;background:linear-gradient(90deg,#0e8a6c 0%,#ffc44d 45%,#0b5f6b 100%);}
.home-map-row .cvt-head{box-sizing:border-box;height:58px;margin-top:4px;padding:0 16px;}
/* slightly more compact commodity items so ~4 fit in the shorter panel */
.commodity-vticker .cvt-card{min-height:76px;padding:9px 12px 9px 16px;gap:12px;grid-template-columns:46px minmax(0,1fr) 120px;}
.commodity-vticker .cvt-card .ctc-icon{width:46px;height:46px;border-radius:14px;}
.commodity-vticker .cvt-card .ctc-icon svg{width:23px;height:23px;}
.commodity-vticker .cvt-card .ctc-copy b{font-size:13.5px;}
.commodity-vticker .ctc-price{margin-top:3px;}
.cvt-spark{width:116px;height:40px;}
@media (max-width:1180px){.commodity-vticker .cvt-card{grid-template-columns:42px minmax(0,1fr) 104px;}.commodity-vticker .cvt-card .ctc-icon{width:42px;height:42px;}.cvt-spark{width:100px;height:36px;}}
@media (max-width:900px){.home-map-row > .home-map-card{height:400px;}.home-map-row > .commodity-vticker{height:360px;}}
.home-map-row .map-card-head{grid-template-columns:auto minmax(0,1fr) auto;}
.home-map-row .map-card-head h3{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.home-map-row .map-head-actions{display:flex;align-items:center;gap:8px;white-space:nowrap;}
.home-map-row .map-head-actions .btn{white-space:nowrap;}
/* Hero: more compact */
.home-hero{padding:16px;}
.hh-grid{gap:14px;}
.hh-tile{padding:14px 16px 10px;}
.hh-val{margin-top:10px;font-size:34px;}
.hh-sub{margin-top:4px;font-size:12px;}
.hh-chart{margin-top:8px;min-height:0;}
.hh-foot{margin-top:4px;padding-top:7px;}
@media (max-width:1100px){.hh-val{font-size:29px;}.home-hero{padding:14px;}.hh-tile{padding:12px 13px 9px;}}
@media (max-width:900px){.hh-val{font-size:31px;}}
/* Commodity panel uses the same surface as the map card (theme-aware) */
.home-map-row > .commodity-vticker{background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow);color:var(--ink);}
.home-map-row .cvt-head{border-bottom:1px solid var(--border);}
.home-map-row .cvt-head h3{color:var(--navy);}
.home-map-row .cvt-head .small{color:var(--muted);}
.home-map-row .cvt-head .icon-badge{background:var(--brand-light)!important;color:var(--brand)!important;}
.home-map-row .cvt-live{background:var(--grey-bg);color:var(--ink);}
.home-map-row .commodity-vticker .cvt-card{border:1px solid var(--border);box-shadow:0 4px 12px rgba(15,31,46,.08);}
html[data-theme="dark"] .home-map-row .commodity-vticker .cvt-card{border-color:rgba(255,255,255,.9);box-shadow:0 8px 20px rgba(0,0,0,.3);}
/* Top bar title is now "Sensitive Price Index — Sindh" on every page: let it shrink with an ellipsis on narrow screens */
#topbar .page-title{flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* ---------- Commodity Quick Snapshot: compact, always light (matches the downloaded image) ---------- */
.comm-snap{background:#fff;border-radius:12px;overflow:hidden;border:1px solid #e2e6e6;color:#16212b;}
.comm-snap .cs-head{padding:14px 20px;color:#fff;background:linear-gradient(120deg,#054a34,#0a6e4e);}
.comm-snap .cs-kicker{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;opacity:.85;}
.comm-snap .cs-title{margin-top:3px;font-size:19px;font-weight:800;line-height:1.2;}
.comm-snap .cs-meta{margin-top:3px;font-size:11.5px;opacity:.85;}
.comm-snap .cs-body{padding:14px 16px 16px;}
.comm-snap .cs-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.comm-snap .cs-kpi{display:flex;align-items:center;gap:11px;padding:11px 13px;border:1px solid #e2e6e6;border-radius:11px;background:#f7f9f8;border-top:3px solid #0a6e4e;}
.comm-snap .cs-kpi.tone-bad{border-top-color:#b3261e;}
.comm-snap .cs-kpi.tone-good{border-top-color:#1a7f4b;}
.comm-snap .cs-kpi.tone-flat{border-top-color:#9aa5a1;}
.comm-snap .cs-kpi-icon{width:34px;height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:9px;color:#fff;background:#0a6e4e;}
.comm-snap .cs-kpi.tone-bad .cs-kpi-icon{background:#b3261e;}
.comm-snap .cs-kpi.tone-good .cs-kpi-icon{background:#1a7f4b;}
.comm-snap .cs-kpi.tone-flat .cs-kpi-icon{background:#7a8a96;}
.comm-snap .cs-kpi-val{font-size:20px;font-weight:800;line-height:1.1;color:#0f1f2e;white-space:nowrap;}
.comm-snap .cs-kpi-val .pct.up{color:#b3261e;}
.comm-snap .cs-kpi-val .pct.down{color:#1a7f4b;}
.comm-snap .cs-kpi-val .pct.flat{color:#6b7686;}
.comm-snap .cs-kpi-lbl{margin-top:2px;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#6b7686;}
.comm-snap .cs-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:12px;margin-top:12px;}
.comm-snap .cs-panel{min-width:0;padding:11px 13px;border:1px solid #e2e6e6;border-radius:11px;background:#fff;}
.comm-snap .cs-label{margin-bottom:6px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#0f1f2e;}
.comm-snap .cs-chart{position:relative;}
.comm-snap .cs-panel .small{color:#16212b;}
@media (max-width:760px){
  .comm-snap .cs-grid{grid-template-columns:1fr;}
  .comm-snap .cs-kpis{gap:7px;}
  .comm-snap .cs-kpi{flex-direction:column;align-items:flex-start;gap:6px;padding:9px 10px;}
  .comm-snap .cs-kpi-icon{width:28px;height:28px;}
  .comm-snap .cs-kpi-val{font-size:16px;}
  .comm-snap .cs-kpi-lbl{font-size:9.5px;}
}
/* Coverage tiles are links */
a.coverage-stat{display:block;color:inherit;text-decoration:none;cursor:pointer;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,border-color .2s;}
a.coverage-stat:hover{transform:translateY(-4px);border-color:rgba(47,191,135,.45);box-shadow:0 14px 28px rgba(0,0,0,.22);}
a.coverage-stat:hover .coverage-stat-icon{transform:scale(1.08);}
a.coverage-stat:active{transform:translateY(-1px) scale(.99);}
a.coverage-stat:focus-visible{outline:3px solid var(--brand);outline-offset:3px;}
a.coverage-stat .coverage-stat-icon{transition:transform .25s cubic-bezier(.34,1.56,.64,1);}
/* =====================================================================
   HOME -- responsive pass (phones <700px, tablets 700-1100px)
   ===================================================================== */
/* long names wrap to two lines instead of being cut off with "..." */
.home-page .mover-copy b,.home-page .movement-rank-copy b,.home-page .movement-rank-copy small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;overflow:hidden;line-height:1.25;}
/* readable minimum text sizes */
.home-page .map-kicker,.home-page .msc-label,.home-page .chart-period-pill,.home-page .chart-insight small,.home-page .trend-metric small{font-size:9.5px;}
.home-page .msc-sub,.home-page .msc-split,.home-page .coverage-stat-note,.home-page .chart-latest-note,.home-page .home-analysis-card .card-hd .small{font-size:10.5px;}
/* phone-only "show all" buttons (Top 10 movers) */
.home-show-more.m-only{display:none;}

/* ---------- tablets & small laptops ---------- */
@media (max-width:1100px){
  .hh-head{flex-wrap:wrap;row-gap:6px;}
}
@media (max-width:900px){
  /* keep the three hero tiles side by side on tablets instead of a 1000px+ stack */
  .hh-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
  .hh-tile{padding:12px 12px 9px;}
  .hh-val{font-size:26px;}
  .hh-lbl{font-size:10px;letter-spacing:.06em;}
  .hh-chip{font-size:10px;padding:2px 7px;}
  .hh-icon{width:26px;height:26px;}
  .hh-foot{font-size:10px;flex-wrap:wrap;gap:2px 8px;}
  /* Top 10 movers: two columns again on tablets */
  .top-movers-grid{grid-template-columns:1fr 1fr;gap:12px;}
  .price-mover-row{grid-template-columns:20px 28px minmax(0,1fr) auto;}
  .price-mover-row .mover-track{display:none;}
  /* comfortable touch targets */
  .home-page .map-head-actions .btn,.home-page .district-motion-footer .btn{min-height:36px;padding:8px 14px;}
  .spi-tour-btn{min-height:36px;padding:8px 14px;font-size:12px;}
  .home-show-more{min-height:40px;}
  .home-page .msc-label,.home-page .map-kicker{font-size:10px;}
  .home-page .msc-sub,.home-page .msc-split,.home-page .coverage-stat-note,.home-page .chart-insight small,.home-page .trend-metric small,.home-page .chart-period-pill{font-size:11px;}
}

/* ---------- phones ---------- */
@media (max-width:699px){
  /* hero becomes a swipeable row: one tile at a time with the next one peeking in */
  .home-hero{padding:12px 0 12px 12px;border-radius:16px;}
  .hh-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:10px;padding-right:12px;scrollbar-width:none;}
  .hh-grid::-webkit-scrollbar{display:none;}
  .hh-tile{flex:0 0 84%;scroll-snap-align:start;padding:13px 14px 10px;}
  .hh-val{font-size:30px;}
  .hh-lbl{font-size:11px;}
  .hh-icon{width:28px;height:28px;}
  .hh-foot{font-size:11px;}
  /* Top 10 movers: one column, top 5 each with a "show all" button */
  .top-movers-grid{grid-template-columns:1fr;}
  .home-show-more.m-only{display:flex;}
  .m-collapsible:not(.is-expanded) .m-extra{display:none;}
  /* chart cards: tighter padding so charts get the width */
  .home-page .card .card-bd{padding:12px;}
  .home-page .home-analysis-card .card-hd{min-height:0;}
  .home-page .coverage-grid{grid-template-columns:1fr 1fr!important;gap:8px;}
}
@media (max-width:380px){
  .hh-tile{flex-basis:88%;}
  .hh-val{font-size:27px;}
}
/* ---------- Home polish round: one accent, balanced findings, readable lists ---------- */
/* 2. every homepage card uses the same green / gold / teal top accent (was a mix of rainbow lines) */
.home-page .district-motion-card::before,.home-page .movement-overview-card::before,.home-page .home-analysis-card::before,
html[data-theme="dark"] .home-page .home-analysis-card::before,
.home-page .top-movers-card::before,.home-page .findings-card::before,.home-page .all-commodities-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;z-index:2;inset:0 0 auto 0;opacity:1;animation:none;background-size:auto;
  background:linear-gradient(90deg,#0e8a6c 0%,#ffc44d 45%,#0b5f6b 100%);}
.home-page .top-movers-card,.home-page .findings-card,.home-page .all-commodities-card{position:relative;}
/* 4. Key Findings: cards share each row evenly, so 5 findings read 3 + 2 with no empty slot */
.home-page .finding-card-grid{display:flex!important;flex-wrap:wrap;gap:10px;}
.home-page .finding-card-grid > .finding-card{flex:1 1 calc(33.333% - 10px);min-width:240px;}
/* 6. larger text in the ranking lists */
.home-page .mover-copy b,.home-page .movement-rank-copy b{font-size:12.5px;}
.home-page .mover-copy small,.home-page .movement-rank-copy small{font-size:10.5px;}
.home-page .mover-value,.home-page .movement-rank-value{font-size:12px;}
.home-page .mover-rank,.home-page .movement-rank-no{font-size:10px;}
.home-page .price-mover-row,.home-page .movement-rank-row{padding-top:8px;padding-bottom:8px;}
/* Donut: hint replaces the duplicate summary chips; keyboard/screen-reader links stay available */
.movement-donut-hint{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;font-size:11px;color:var(--muted);text-align:center;}
.movement-donut-hint svg{flex-shrink:0;color:var(--brand);}
.sr-only-links a{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.sr-only-links a:focus{position:static;width:auto;height:auto;clip:auto;display:inline-block;margin:6px 4px 0;padding:4px 8px;border-radius:6px;background:var(--brand-light);color:var(--brand);outline:2px solid var(--brand);}
/* Footer: official site link */
.app-footnote .af-link{color:var(--brand);font-weight:700;text-decoration:none;border-bottom:1px dashed color-mix(in srgb,var(--brand) 50%,transparent);transition:color .15s,border-color .15s;}
.app-footnote .af-link:hover{color:var(--brand-dark);border-bottom-style:solid;}
html[data-theme="dark"] .app-footnote .af-link:hover{color:#6fe0b0;}
.app-footnote .af-link:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:3px;}
/* ---------- Sindh Map page: map sized to the screen, rich district panel ---------- */
.map-page-wrap{align-items:stretch;}
.map-page-wrap .map-detail-panel{width:360px;}
.map-page-card{display:flex;flex-direction:column;min-width:0;}
.map-page-host{flex:1;min-height:380px;max-height:calc(100vh - 230px);}
.md-card{height:100%;display:flex;flex-direction:column;gap:12px;padding:16px;border-color:color-mix(in srgb,var(--brand) 25%,var(--border));position:relative;overflow:hidden;}
.md-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#0e8a6c 0%,#ffc44d 45%,#0b5f6b 100%);}
.md-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-top:2px;}
.md-name{font-size:18px;font-weight:800;color:var(--navy);line-height:1.2;}
.md-sub{margin-top:2px;font-size:12px;color:var(--muted);}
.md-rank{flex-shrink:0;padding:4px 10px;border-radius:99px;background:var(--brand-light);color:var(--brand);font-size:13px;font-weight:800;white-space:nowrap;}
.md-rank small{font-size:10.5px;font-weight:700;opacity:.8;}
.md-kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.md-kpi{padding:9px 11px;border:1px solid var(--border);border-radius:10px;background:var(--grey-bg);}
.md-kpi small{display:block;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);}
.md-kpi b{display:block;margin-top:3px;font-size:17px;font-weight:800;color:var(--navy);white-space:nowrap;}
.md-progress{display:block;height:4px;margin-top:6px;border-radius:99px;background:var(--border);overflow:hidden;}
.md-progress i{display:block;height:100%;border-radius:99px;background:var(--brand);}
.md-section{padding-top:10px;border-top:1px solid var(--border);}
.md-label{margin-bottom:6px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.md-label.up{color:var(--bad);} .md-label.down{color:var(--good);}
.md-chart{position:relative;}
.md-cmp-row{display:grid;grid-template-columns:96px minmax(0,1fr) 70px;align-items:center;gap:8px;margin-top:5px;font-size:12px;}
.md-cmp-lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-weight:600;}
.md-cmp-track{position:relative;height:8px;border-radius:99px;background:var(--grey-bg);}
.md-cmp-zero{position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:var(--muted);opacity:.5;}
.md-cmp-bar{position:absolute;top:0;bottom:0;border-radius:99px;background:var(--muted);}
.md-cmp-bar.up{background:var(--bad);} .md-cmp-bar.down{background:var(--good);}
.md-cmp-val{text-align:right;font-weight:700;white-space:nowrap;}
.md-movers-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.md-mover{display:flex;justify-content:space-between;align-items:center;gap:6px;width:100%;margin-top:4px;padding:5px 7px;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--ink);font:inherit;font-size:11.5px;text-align:left;cursor:pointer;transition:background .15s,border-color .15s;}
.md-mover:hover{background:var(--brand-light);border-color:color-mix(in srgb,var(--brand) 40%,var(--border));}
.md-mover span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.md-mover .pct{flex-shrink:0;font-weight:700;}
.md-empty{font-size:11.5px;color:var(--muted);padding:6px 0;}
.md-foot{margin-top:auto;padding-top:10px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:9px;}
.md-status{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;font-size:12px;color:var(--muted);}
.md-status b{color:var(--ink);}
.md-foot .btn{justify-content:center;min-height:36px;}
@media (max-width:1100px){.map-page-wrap .map-detail-panel{width:320px;}}
@media (max-width:900px){.map-page-wrap .map-detail-panel{width:100%;}.map-page-host{min-height:380px;max-height:none;height:420px;flex:none;}}
/* Map page fit: the row takes the screen height (minus header/filters); map fills it, panel is compact */
.map-page-wrap{height:clamp(560px,calc(100vh - 190px),780px);}
.map-page-host{max-height:none;min-height:0;}
.map-page-wrap .map-detail-panel{display:flex;flex-direction:column;min-height:0;}
.map-page-wrap .md-card{flex:1;min-height:0;overflow-y:auto;gap:9px;padding:14px 14px 12px;scrollbar-width:thin;}
.md-kpi{padding:7px 10px;}
.md-kpi b{font-size:16px;}
.md-section{padding-top:8px;}
.md-mover{padding:4px 7px;margin-top:3px;}
.md-foot{padding-top:8px;gap:7px;}
@media (max-width:900px){.map-page-wrap{height:auto;}.map-page-wrap .md-card{overflow:visible;}}

/* =====================================================================
   SHOP VISIT FORM (field data entry) -- professional, scannable layout
   ===================================================================== */
.modal.modal-wide.modal-shopform{width:1040px;}
.modal-shopform .modal-bd.scroll{max-height:78vh;padding:0 18px 16px;}
.modal-shopform .modal-hd{font-size:15px;}
.sf{display:flex;flex-direction:column;gap:14px;}
/* sticky progress + category navigator */
.sf-sticky{position:sticky;top:0;z-index:5;margin:0 -18px;padding:12px 18px 10px;background:var(--card);border-bottom:1px solid var(--border);box-shadow:0 6px 12px -10px rgba(0,0,0,.35);}
.sf-sticky-row{display:flex;align-items:center;gap:14px;}
.sf-progress{flex:1;min-width:0;}
.sf-progress-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:var(--navy);}
.sf .sf-progress-track{width:auto;height:8px;margin-top:6px;border-radius:99px;background:var(--grey-bg);overflow:hidden;}
.sf .sf-progress-fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#0e8a6c,#2fbf87);transition:width .3s ease;}
.sf-save{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--muted);}
.sf-save.is-saved{color:var(--good);} .sf-save.is-saving{color:var(--warn);}
.sf-spin{display:inline-block;width:11px;height:11px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:sfSpin .7s linear infinite;vertical-align:-1px;}
@keyframes sfSpin{to{transform:rotate(360deg);}}
.sf-cat-nav{display:flex;gap:6px;margin-top:10px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin;}
.sf-cat-chip{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--border);border-radius:99px;background:var(--grey-bg);color:var(--ink);font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;white-space:nowrap;}
.sf-cat-chip:hover{border-color:var(--brand);}
.sf-cat-chip b{font-size:10.5px;color:var(--muted);}
.sf-cat-chip b.is-done,.sf-cat-head b.is-done{color:var(--good);}
/* notes */
.sf-test-note{display:flex;align-items:flex-start;gap:8px;padding:9px 12px;border-radius:10px;font-size:12px;line-height:1.45;color:var(--ink);background:var(--info-bg);border:1px solid color-mix(in srgb,var(--info) 30%,var(--border));}
.sf-test-note svg{flex-shrink:0;margin-top:1px;color:var(--info);}
/* blocks */
.sf-block{border:1px solid var(--border);border-radius:14px;padding:14px 16px;background:var(--card);}
.sf-block-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;font-size:13px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--navy);}
.sf-step{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--brand);color:#fff;font-size:12px;}
html[data-theme="dark"] .sf-step{color:#0b1210;}
.sf-visit-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
.sf-field input{width:100%;}
.sf-info{padding:8px 11px;border:1px solid var(--border);border-radius:10px;background:var(--grey-bg);min-width:0;}
.sf-info small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);}
.sf-info b{display:block;margin-top:2px;font-size:13px;color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sf-info span{display:block;font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* GPS card */
.sf-gps{display:flex;align-items:center;gap:12px;margin-top:12px;padding:11px 13px;border-radius:12px;border:1px solid var(--border);background:var(--grey-bg);}
.sf-gps-icon{width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:10px;color:#fff;background:var(--muted);}
.sf-gps.tone-good .sf-gps-icon{background:var(--good);} .sf-gps.tone-warn .sf-gps-icon{background:var(--warn);} .sf-gps.tone-bad .sf-gps-icon{background:var(--bad);}
.sf-gps.tone-good{border-color:color-mix(in srgb,var(--good) 35%,var(--border));} .sf-gps.tone-bad{border-color:color-mix(in srgb,var(--bad) 45%,var(--border));}
.sf-gps-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;font-size:12px;color:var(--muted);}
.sf-gps-copy b{font-size:13.5px;color:var(--navy);}
.sf-gps-copy small{font-family:ui-monospace,Consolas,monospace;font-size:11px;}
/* toolbar */
.sf-toggle{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink);cursor:pointer;}
.sf-search{width:220px;text-transform:none;letter-spacing:0;font-weight:400;}
.sf-hint{margin:-4px 0 10px;}
.sf-hint kbd{padding:0 5px;border:1px solid var(--border);border-bottom-width:2px;border-radius:4px;font-size:10.5px;background:var(--grey-bg);}
/* list */
.sf-list{display:flex;flex-direction:column;gap:14px;}
.sf-cat{scroll-margin-top:120px;}
.sf-cat-head{display:flex;align-items:center;justify-content:space-between;padding:6px 2px 6px;margin-bottom:6px;border-bottom:2px solid color-mix(in srgb,var(--brand) 30%,var(--border));font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--brand);}
.sf-cat-head b{font-size:11px;color:var(--muted);}
.sf-item{display:grid;grid-template-columns:minmax(0,1.3fr) auto minmax(170px,.9fr) 24px;align-items:center;gap:12px;padding:9px 10px;border:1px solid transparent;border-radius:11px;transition:background .15s,border-color .15s;}
.sf-item + .sf-item{margin-top:2px;}
.sf-item:hover{background:var(--grey-bg);}
.sf-item:focus-within{background:var(--grey-bg);border-color:color-mix(in srgb,var(--brand) 45%,var(--border));}
.sf-item.is-outlier{background:color-mix(in srgb,var(--warn) 9%,transparent);border-color:color-mix(in srgb,var(--warn) 35%,transparent);}
.sf-item.is-critical{background:color-mix(in srgb,var(--bad) 9%,transparent);border-color:color-mix(in srgb,var(--bad) 40%,transparent);}
.sf-item.is-flash{animation:sfFlash 1.2s ease;}
@keyframes sfFlash{0%,60%{box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 45%,transparent);}100%{box-shadow:none;}}
.sf-item-name{font-size:13.5px;font-weight:700;color:var(--navy);line-height:1.25;}
.sf-item-meta{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:2px;font-size:11.5px;color:var(--muted);}
.sf-last{white-space:nowrap;}
/* availability segmented control */
.sf-avail{position:relative;display:inline-flex;border:1px solid var(--border);border-radius:9px;overflow:hidden;background:var(--card);}
.sf-avail-btn{padding:6px 10px;border:0;border-right:1px solid var(--border);background:transparent;color:var(--muted);font:inherit;font-size:11.5px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s;}
.sf-avail-btn:nth-child(3){border-right:0;}
.sf-avail-btn:hover:not(:disabled){color:var(--ink);background:var(--grey-bg);}
.sf-avail-btn.is-on{background:var(--brand);color:#fff;}
html[data-theme="dark"] .sf-avail-btn.is-on{color:#0b1210;}
.sf-avail-btn.is-on[data-avail="TEMP_UNAVAILABLE"]{background:var(--warn);color:#fff;}
.sf-avail-btn.is-on[data-avail="CONV_UNAVAILABLE"]{background:#7a8a96;color:#fff;}
.sf-avail-btn:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;}
.sf-avail-btn:disabled{cursor:default;}
.sf-avail .sfAvail{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
/* price */
.sf-price{display:flex;flex-direction:column;gap:3px;min-width:0;}
.sf-price-box{display:flex;align-items:center;height:38px;border:1px solid var(--border);border-radius:9px;background:var(--card);overflow:hidden;transition:border-color .15s,box-shadow .15s;}
.sf-price-box:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent);}
.sf-rs{padding:0 9px;height:100%;display:flex;align-items:center;font-size:12px;font-weight:700;color:var(--muted);background:var(--grey-bg);border-right:1px solid var(--border);}
.sf-price-box input.sfPrice{flex:1;min-width:0;height:100%;border:0!important;border-radius:0;outline:none!important;box-shadow:none!important;background:transparent;padding:0 10px;text-align:right;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;}
.sf-price-box input.sfPrice:disabled{opacity:.45;}
.sf-price-box:has(input:disabled){background:var(--grey-bg);}
.sf-change{min-height:15px;font-size:11px;font-weight:700;text-align:right;color:var(--muted);}
.sf-change.is-up{color:var(--bad);} .sf-change.is-down{color:var(--good);} .sf-change.is-na{color:var(--muted);font-weight:600;}
.sf-change.is-flag::after{content:" \00B7  check";color:var(--warn);}
.sf-item.is-critical .sf-change.is-flag::after{content:" \00B7  please verify";color:var(--bad);}
/* row status */
.sf-st{width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--muted);}
.sf-st.is-saved{color:var(--good);} .sf-st.is-saving{color:var(--warn);} .sf-st.is-error{color:var(--bad);}
.sf-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px;color:var(--good);font-weight:600;}
.sf-empty[hidden],.sf-cat[hidden],.sf-item[hidden]{display:none!important;}
/* review */
.sf-review{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
.sf-sum{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--border);border-radius:11px;background:var(--grey-bg);text-align:left;font:inherit;color:var(--muted);font-size:11.5px;}
.sf-sum b{font-size:20px;line-height:1.1;color:var(--navy);}
.sf-sum.tone-good{border-color:color-mix(in srgb,var(--good) 40%,var(--border));} .sf-sum.tone-good b{color:var(--good);}
button.sf-sum{cursor:default;} button.sf-sum.tone-warn{cursor:pointer;border-color:color-mix(in srgb,var(--warn) 45%,var(--border));} button.sf-sum.tone-warn b{color:var(--warn);}
button.sf-sum.tone-warn:hover{background:color-mix(in srgb,var(--warn) 10%,var(--grey-bg));}
.sf-certify{display:flex;align-items:flex-start;gap:9px;margin-top:12px;padding:10px 12px;border-radius:10px;border:1px dashed color-mix(in srgb,var(--brand) 45%,var(--border));font-size:12.5px;color:var(--ink);cursor:pointer;}
.sf-certify input{margin-top:2px;width:16px;height:16px;accent-color:var(--brand);}
.sf.is-locked .sf-item:hover{background:transparent;}
/* responsive */
@media (max-width:900px){
  .sf-visit-grid{grid-template-columns:1fr 1fr;}
  .sf-item{grid-template-columns:minmax(0,1fr) 24px;grid-template-areas:"main st" "avail avail" "price price";gap:8px;}
  .sf-item-main{grid-area:main;} .sf-avail{grid-area:avail;justify-self:start;} .sf-price{grid-area:price;} .sf-st{grid-area:st;}
  .sf-price{flex-direction:row;align-items:center;gap:10px;} .sf-price-box{flex:1;} .sf-change{text-align:left;min-width:120px;}
  .sf-review{grid-template-columns:1fr 1fr;}
  .sf-search{width:100%;}
}
@media (max-width:560px){
  .modal-shopform .modal-bd.scroll{max-height:calc(100vh - 140px);padding:0 12px 12px;}
  .sf-sticky{margin:0 -12px;padding:10px 12px 8px;}
  .sf-block{padding:12px;}
  .sf-avail{width:100%;} .sf-avail-btn{flex:1;padding:8px 4px;font-size:11px;}
  .sf-price{flex-direction:column;align-items:stretch;} .sf-change{text-align:left;}
  .sf-gps{flex-wrap:wrap;} .sf-gps .btn{width:100%;justify-content:center;}
}
@media (prefers-reduced-motion:reduce){.sf-spin{animation:none;}.sf-item.is-flash{animation:none;}}
/* date inputs follow the theme (calendar icon readable in dark mode) */
html[data-theme="dark"] input[type=date]{color-scheme:dark;}
.sf-field input[type=date]{height:40px;border-radius:9px;}
.sf textarea{border-radius:9px;}
@media (max-width:560px){.sf-avail-btn{min-height:42px;padding:10px 4px;}.sf-price-box{height:44px;}.sf-change:empty{display:none;}.sf-certify{padding:12px;}}
@media (max-width:900px){.sf-change:empty{display:none;}}

/* =====================================================================
   SUPERVISOR & DG REVIEW -- next-step panel, decision dialogs, cards
   ===================================================================== */
/* next-step panel on the district package page */
.next-step{position:relative;overflow:hidden;border-color:var(--border);}
.next-step::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--muted);}
.next-step.tone-warn::before{background:var(--warn);} .next-step.tone-good::before{background:var(--good);}
.next-step.tone-bad::before{background:var(--bad);} .next-step.tone-info::before{background:var(--info);}
.next-step.tone-bad{border-color:color-mix(in srgb,var(--bad) 40%,var(--border));}
.ns-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.ns-icon{width:42px;height:42px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:12px;color:#fff;background:var(--muted);}
.next-step.tone-warn .ns-icon{background:var(--warn);} .next-step.tone-good .ns-icon{background:var(--good);}
.next-step.tone-bad .ns-icon{background:var(--bad);} .next-step.tone-info .ns-icon{background:var(--info);}
.ns-copy{flex:1;min-width:240px;}
.ns-kicker{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.ns-title{margin-top:2px;font-size:17px;font-weight:800;color:var(--navy);}
.ns-text{margin-top:3px;font-size:12.5px;line-height:1.5;color:var(--muted);}
.ns-progress{width:220px;flex-shrink:0;}
.ns-progress-head{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);}
.ns-progress-head b{color:var(--navy);}
.ns-track{height:8px;margin-top:5px;border-radius:99px;background:var(--grey-bg);overflow:hidden;}
.ns-track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#0e8a6c,#2fbf87);}
.ns-quote{margin-top:12px;padding:9px 12px;border-radius:10px;font-size:12.5px;line-height:1.5;color:var(--ink);background:var(--grey-bg);border-left:3px solid var(--muted);}
.ns-quote small{display:block;margin-bottom:2px;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);}
.ns-quote.tone-bad{border-left-color:var(--bad);background:var(--bad-bg);} .ns-quote.tone-info{border-left-color:var(--info);background:var(--info-bg);}
.ns-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.ns-actions .btn{min-height:36px;}
/* observation rows */
.pkg-obs-table tr.obs-pending td{background:color-mix(in srgb,var(--warn) 5%,transparent);}
.pkg-obs-table td.obs-actions{white-space:nowrap;}
.pkg-obs-table td.obs-actions .btn + .btn{margin-left:6px;}
/* queue / DG district cards */
.wf-card{display:flex;flex-direction:column;}
.wf-card.is-urgent{border-color:color-mix(in srgb,var(--bad) 45%,var(--border));box-shadow:0 0 0 1px color-mix(in srgb,var(--bad) 20%,transparent);}
.wf-next{display:flex;align-items:flex-start;gap:6px;margin-top:8px;padding:7px 9px;border-radius:8px;font-size:11.5px;font-weight:600;line-height:1.35;background:var(--grey-bg);color:var(--muted);}
.wf-next svg{flex-shrink:0;margin-top:1px;}
.wf-next.tone-warn{color:var(--warn);background:var(--warn-bg);} .wf-next.tone-good{color:var(--good);background:var(--good-bg);}
.wf-next.tone-bad{color:var(--bad);background:var(--bad-bg);} .wf-next.tone-info{color:var(--info);background:var(--info-bg);}
.wf-card > .btn{align-self:flex-start;}
.wf-note{margin-top:8px;padding:6px 9px;border-radius:8px;font-size:11.5px;line-height:1.4;color:var(--ink);background:var(--grey-bg);border-left:3px solid var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.wf-note.tone-info{border-left-color:var(--info);} .wf-note.tone-bad{border-left-color:var(--bad);}
/* decision dialog */
.rd-intro{margin-bottom:10px;}
.rd-facts{display:flex;flex-wrap:wrap;gap:6px 16px;padding:9px 12px;border-radius:10px;background:var(--grey-bg);font-size:12.5px;color:var(--muted);}
.rd-facts b{color:var(--navy);}
.rd-label{margin:4px 0 6px;font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);}
.rd-chips{display:flex;flex-wrap:wrap;gap:6px;}
.rd-chip{padding:6px 10px;border:1px solid var(--border);border-radius:99px;background:var(--card);color:var(--ink);font:inherit;font-size:12px;text-align:left;cursor:pointer;transition:border-color .15s,background .15s;}
.rd-chip:hover{border-color:var(--brand);background:var(--brand-light);}
.rd-chip.is-used{border-color:var(--brand);color:var(--brand);}
.rd-foot{margin-top:8px;}
/* publication checklist */
.pub-checklist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.pc-item{display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid var(--border);border-radius:10px;font-size:12.5px;color:var(--ink);background:var(--grey-bg);}
.pc-item svg{flex-shrink:0;color:var(--warn);}
.pc-item span{flex:1;min-width:0;}
.pc-item b{white-space:nowrap;color:var(--warn);}
.pc-item.is-done svg,.pc-item.is-done b{color:var(--good);}
@media (max-width:900px){
  .ns-progress{width:100%;}
  .pub-checklist{grid-template-columns:1fr;}
  .pkg-obs-table td.obs-actions .btn + .btn{margin-left:0;margin-top:4px;}
  .pkg-obs-table td.obs-actions .btn{display:flex;width:100%;justify-content:center;}
}
.obs-bulk-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:10px 16px!important;border-top:1px solid var(--border);}
.obs-bulk-bar .btn{white-space:nowrap;}
@media (max-width:700px){.obs-bulk-bar .spacer,.obs-bulk-bar > .small.muted:last-child{display:none;}}
.sf-lock-note{background:var(--grey-bg);border-color:var(--border);} .sf-lock-note svg{color:var(--muted);}

/* Open next reporting week card (DG dashboard, Admin settings) */
.open-week-card{position:relative;overflow:hidden;}
.open-week-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--muted);}
.open-week-card.is-ready::before{background:linear-gradient(180deg,#0e8a6c,#2fbf87);}
.open-week-card.is-ready{border-color:color-mix(in srgb,var(--brand) 40%,var(--border));}
.ow-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.ow-icon{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:12px;color:#fff;background:var(--muted);}
.open-week-card.is-ready .ow-icon{background:var(--brand);}
.ow-copy{flex:1;min-width:260px;}
.ow-kicker{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.ow-title{margin-top:2px;font-size:16px;font-weight:800;color:var(--navy);}
.ow-text{margin-top:3px;font-size:12.5px;line-height:1.5;color:var(--muted);}
.ow-text b{color:var(--ink);}
.open-week-card .btn{min-height:38px;}
.ow-list{margin:8px 0 0 18px;padding:0;line-height:1.7;}
/* Flagged district / exception cards follow the theme (was hard-coded white, unreadable in dark mode) */
.district-card.flagged{border-color:color-mix(in srgb,var(--bad) 35%,var(--border));background:linear-gradient(180deg,color-mix(in srgb,var(--bad) 7%,var(--card)),var(--card));}

/* ---- Reporting week: missed-week candidates, skip, back-fill notice ---- */
.open-week-card.has-missed::before{background:linear-gradient(180deg,#d98a1c,#f0b44c);}
.open-week-card.has-missed .ow-icon{background:#d98a1c;}
.ow-cands-label{margin:16px 0 8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.ow-cands{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.ow-cand{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:color-mix(in srgb,var(--card) 92%,var(--muted));opacity:.75;}
.ow-cand.is-next{opacity:1;background:var(--card);border-color:color-mix(in srgb,var(--brand) 45%,var(--border));box-shadow:0 1px 6px rgba(0,0,0,.06);}
.ow-step{flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--border);color:var(--text);}
.ow-cand.is-next .ow-step{background:var(--brand);color:#fff;}
.ow-cand-main{flex:1;min-width:0;}
.ow-cand-title{font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.ow-tag{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:999px;}
.ow-tag.is-missed{background:color-mix(in srgb,#d98a1c 18%,transparent);color:#b86e0b;}
.ow-tag.is-current{background:color-mix(in srgb,var(--brand) 16%,transparent);color:var(--brand);}
[data-theme="dark"] .ow-tag.is-missed{color:#f0b44c;}
.ow-cand-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.ow-cand-acts .btn{min-height:34px;}
.ow-skipped{margin-top:12px;}
.ow-skipped summary{cursor:pointer;color:var(--muted);}
.ow-skipped ul{margin:6px 0 0 18px;padding:0;line-height:1.7;}
.ow-warn{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;margin-bottom:10px;border-radius:8px;background:color-mix(in srgb,#d98a1c 14%,transparent);border:1px solid color-mix(in srgb,#d98a1c 40%,transparent);}
.backfill-banner{display:flex;gap:10px;align-items:flex-start;margin:14px 0;padding:12px 14px;border-radius:10px;font-size:13.5px;line-height:1.5;background:color-mix(in srgb,#d98a1c 13%,var(--card));border:1px solid color-mix(in srgb,#d98a1c 45%,var(--border));color:var(--text);}
.backfill-banner svg{flex:0 0 auto;color:#d98a1c;margin-top:2px;}
input[type="date"].is-invalid{border-color:var(--bad);box-shadow:0 0 0 2px color-mix(in srgb,var(--bad) 25%,transparent);}
@media (max-width:640px){ .ow-cand{flex-wrap:wrap;} .ow-cand-acts{width:100%;justify-content:flex-start;} }

/* ---- Top bar: link to D4D Sindh Data Observatory (same pill as the theme toggle) ---- */
.tb-ext-link{display:inline-flex;align-items:center;gap:8px;height:33px;box-sizing:border-box;padding:0 12px 0 10px;border:1px solid var(--border);border-radius:20px;background:var(--card);color:var(--ink);text-decoration:none;font-size:11.5px;line-height:1;white-space:nowrap;flex-shrink:0;transition:border-color .15s,background .15s;}
.tb-ext-link svg{color:var(--brand);flex:0 0 auto;}
.tb-ext-text{display:inline-flex;align-items:center;gap:7px;}
.tb-ext-text b{font-weight:700;letter-spacing:.01em;}
.tb-ext-sub{color:var(--muted);font-weight:600;padding-left:7px;border-left:1px solid var(--border);}
.tb-ext-arrow{color:var(--muted);font-size:11px;transition:transform .15s,color .15s;}
.tb-ext-link:hover{border-color:color-mix(in srgb,var(--brand) 55%,var(--border));background:color-mix(in srgb,var(--brand) 8%,var(--card));}
.tb-ext-link:hover .tb-ext-arrow{color:var(--brand);transform:translate(1px,-1px);}
.tb-ext-link:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
@media (max-width:1180px){ .tb-ext-sub{display:none;} }
@media (max-width:760px){ .tb-ext-text,.tb-ext-arrow{display:none;} .tb-ext-link{width:33px;padding:0;justify-content:center;} }
/* D4D portal mark on a white chip so its grey "4" stays readable in dark theme */
.tb-ext-link{padding-left:4px;}
.tb-ext-logo{display:inline-flex;align-items:center;justify-content:center;height:25px;padding:0 8px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);flex:0 0 auto;}
.tb-ext-logo img{display:block;height:15px;width:auto;}
@media (max-width:760px){ .tb-ext-link{width:auto;padding:0 4px;} .tb-ext-logo{padding:0 6px;} }