:root{--bg:#e8f0fb;--bg-img:linear-gradient(180deg,#d6e6fc 0,#e8f0fb 300px,#e8f0fb);--fg:#14213a;--card:#fff;--line:#bfd0e8;--acc:#1558d6;--err:#c0261f;--ok:#12803f;--head:#d9e7fa;--head-hi:#f3f8ff;--warn:#8a5a00;--nav-bg:linear-gradient(180deg,#1c63e0,#1249b4);--nav-link:#fff;--nav-hl:rgba(255,255,255,.22);--nav-ul:#ffd23f}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#14181f;--bg-img:none;--fg:#e6e9ee;--card:#1e242e;--line:#333b48;--acc:#6ea4f5;--err:#ff8a80;--ok:#6fd18b;--head:#262d39;--head-hi:#2f3745;--warn:#f0c060;--nav-bg:#1e242e;--nav-link:#6ea4f5;--nav-hl:rgba(110,164,245,.18);--nav-ul:#6ea4f5}}
:root[data-theme=dark]{--bg:#14181f;--bg-img:none;--fg:#e6e9ee;--card:#1e242e;--line:#333b48;--acc:#6ea4f5;--err:#ff8a80;--ok:#6fd18b;--head:#262d39;--head-hi:#2f3745;--warn:#f0c060;--nav-bg:#1e242e;--nav-link:#6ea4f5;--nav-hl:rgba(110,164,245,.18);--nav-ul:#6ea4f5}
:root{color-scheme:light dark}:root[data-theme=light]{color-scheme:light}:root[data-theme=dark]{color-scheme:dark}
*{box-sizing:border-box}body{margin:0;background:var(--bg);background-image:var(--bg-img);background-attachment:fixed;color:var(--fg);font:15px/1.45 system-ui,sans-serif}
header{background:var(--nav-bg);--acc:var(--nav-link);border-bottom:1px solid var(--line);padding:8px 16px;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;box-shadow:0 2px 8px rgba(10,30,70,.18)}
header a{color:var(--nav-link);text-decoration:none;font-weight:600;padding:6px 12px;border-radius:6px}header .muted{color:var(--nav-link)}header select{color:var(--fg);background:var(--card)}header .sp{flex:1}
header nav{display:flex;flex-wrap:wrap;gap:12px;align-items:center}header .right{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
#menu-btn{display:none}
header select.theme-select{width:auto;padding:4px 6px}
main{max-width:1100px;margin:0 auto;padding:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:14px;margin-bottom:14px;overflow-x:auto}
table{border-collapse:collapse;width:100%}th,td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:color-mix(in srgb,var(--fg) 72%,var(--head))}td.n,th.n{text-align:right}
input,select,textarea,button{font:inherit;color:inherit;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:7px 9px}
input,select,textarea{width:100%}input[type=checkbox]{width:auto;transform:scale(1.2)}textarea{min-height:80px}
label{display:block;font-size:13px;font-weight:600;margin:10px 0 3px}
button,.btn{background:var(--acc);color:#fff;border:0;cursor:pointer;text-decoration:none;display:inline-block;padding:7px 12px;border-radius:6px}
button.sec,.btn.sec{background:transparent;color:var(--acc);border:1px solid var(--acc)}button.del{background:var(--err)}
button:disabled{opacity:.4;cursor:not-allowed}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 16px}
.msg{padding:9px 12px;border-radius:6px;margin-bottom:10px;border:1px solid}.msg.err{color:var(--err);border-color:var(--err)}.msg.ok{color:var(--ok);border-color:var(--ok)}.msg.warn{color:var(--warn);border-color:var(--warn)}
.muted{opacity:.65}form.inline{display:inline}.row{display:flex;gap:8px;flex-wrap:wrap;align-items:end}.row>*{flex:1;min-width:120px}.row>button,.row>a{flex:0 0 auto}
.pre{white-space:pre-wrap}h1{font-size:20px;margin:0 0 12px}h2{font-size:16px;margin:0 0 8px}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}.toolbar .sp{flex:1}
.toolbar input#del-confirm{width:110px}
/* dashboard grouped list */
.wide{overflow-x:auto}table.glist{min-width:1500px;font-size:13px}table.glist td,table.glist th{white-space:nowrap}
tr.grp td{background:var(--head);font-weight:600;border-top:1px solid var(--line)}
button.gtoggle{background:transparent;color:var(--fg);border:0;padding:2px 4px;font-weight:600;text-align:left}
button.gtoggle::before{content:"\25BE  ";color:var(--acc)}tbody.collapsed button.gtoggle::before{content:"\25B8  "}
tbody.collapsed tr.item{display:none}
.flag{font-size:11px;opacity:.7}
.js .nav-collapsible{display:flex}
/* tablet */
@media(max-width:1024px){main{padding:12px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* phone */
@media(max-width:640px){
 body{font-size:16px}main{padding:10px}
 .grid{grid-template-columns:1fr}
 input,select,textarea,button,.btn{min-height:44px;font-size:16px}
 input[type=checkbox]{min-height:0;transform:scale(1.5)}
 header{gap:8px}#menu-btn{display:inline-block}
 .js header nav.nav-collapsible,.js header .right.nav-collapsible{display:none;width:100%;flex-direction:column;align-items:stretch}
 .js header.open nav.nav-collapsible,.js header.open .right.nav-collapsible{display:flex}
 header nav a{padding:10px 0}
 .toolbar>*{flex:1 1 auto}.toolbar .sp{display:none}
 table.cards,table.cards tbody,table.cards tr,table.cards td{display:block;min-width:0;width:100%}
 table.cards{min-width:0!important}
 table.cards thead{display:none}
 table.cards tr.item{border:1px solid var(--line);border-radius:8px;margin:8px 0;padding:6px 10px;background:var(--card)}
 table.cards td{border:0;padding:3px 0;white-space:normal;display:none}
 table.cards td.k{display:flex;justify-content:space-between;gap:12px;text-align:right}
 table.cards td.k::before{content:attr(data-label);font-weight:600;text-align:left;opacity:.7;flex:0 0 38%}
 table.cards td.k.tk{display:flex}table.cards td.k.tk::before{content:""}
 table.cards td.tk{padding:6px 0}
 table.glist tr.grp td{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;background:var(--head)}
 table.glist tr.grp td.gl{display:block;width:100%}
 table.glist tr.grp td.gn{display:flex}table.glist tr.grp td.gn::before{content:attr(data-label);opacity:.7;font-weight:400}
 table.glist tr.grp td.ge{display:none}
}
/* big monitors */
@media(min-width:1500px){main{max-width:1500px}body{font-size:16px}}
@media(min-width:2200px){main{max-width:2400px}body{font-size:17px}}
main a:not(.btn){color:var(--acc)}
/* ---- v3: pinned menu + headers, scroll frame, sorting, summary, % box */
header{position:sticky;top:0;z-index:50}
.msg{flex:none}
body.fit{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
body.fit header{flex:none}
body.fit main{flex:1;min-height:0;display:flex;flex-direction:column;width:100%;max-width:none;margin:0;padding:10px 16px}
.pagehead{flex:none;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:end;margin-bottom:8px}.pagehead h1{margin:0}
form.compact{flex:1;min-width:260px}form.compact label{margin:0 0 2px}
.fitcol{display:flex;flex-direction:column;flex:1;min-height:0}.fitcol .toolbar{flex:none}
.tablewrap{flex:1;min-height:0;overflow:scroll;border:1px solid var(--line);border-radius:8px;background:var(--card);scrollbar-width:auto;scrollbar-color:var(--acc) var(--head)}
.tablewrap::-webkit-scrollbar{width:14px;height:14px}.tablewrap::-webkit-scrollbar-track{background:var(--head)}
.tablewrap::-webkit-scrollbar-thumb{background:var(--acc);border-radius:7px;border:3px solid var(--head)}
.tablewrap table{margin:0}
table.glist thead th{position:sticky;top:0;z-index:3;background-color:var(--head);opacity:1;box-shadow:0 1px 0 var(--line)}
th.tickcol{width:34px}
th[data-sort]{cursor:pointer;user-select:none}th[data-sort]:hover{color:var(--fg)}
th[aria-sort=ascending]::after{content:" \25B2";font-size:10px}th[aria-sort=descending]::after{content:" \25BC";font-size:10px}
.phone-sort{display:none;gap:6px;align-items:center;flex-wrap:wrap}
.pctbox{position:relative}.pctbox input{padding-right:26px}.pctbox span{position:absolute;right:10px;top:50%;transform:translateY(-50%);opacity:.7;pointer-events:none}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-bottom:12px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:12px 14px}.tl{font-size:12px;text-transform:uppercase;letter-spacing:.04em;opacity:.7}.tv{font-size:26px;font-weight:700;line-height:1.2;overflow-wrap:anywhere}.ts{font-size:13px;opacity:.7}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}.two .card{margin-bottom:14px}
.proj .phead{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-bottom:6px}
.badge{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:1px 9px;font-size:12px}
.badge.st-delayed{color:var(--err);border-color:var(--err);font-weight:600}.badge.st-on-time{color:var(--ok);border-color:var(--ok)}
.stext{margin:4px 0}.sl{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;opacity:.7}
details summary{cursor:pointer}
@media(max-width:820px){.two{grid-template-columns:1fr}}
@media(max-width:640px){
 body.fit{height:auto;display:block;overflow:visible}body.fit main{display:block;padding:10px}
 .fitcol{display:block}.tablewrap{overflow:visible;border:0;background:transparent}
 .phone-sort{display:flex;width:100%}.phone-sort select{flex:1}
 .tv{font-size:22px}
}
/* ---- v4: palette, alive buttons/tabs, project page, charts, column drag */
:root{--c1:#1558d6;--c2:#f08c00;--c3:#12a150;--c4:#e0312d;--c5:#7a3fe0;--c6:#0891b2;--c7:#c28a00;--c8:#d6277a;--shadow:0 1px 2px rgba(20,30,50,.12),0 4px 10px rgba(20,30,50,.08)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--c1:#6ea4f5;--c2:#f5a14a;--c3:#6fd18b;--c4:#ff8a80;--c5:#b794f6;--c6:#5ccbe0;--c7:#e6c35c;--c8:#f58ac0;--shadow:0 1px 2px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.35)}}
:root[data-theme=dark]{--c1:#6ea4f5;--c2:#f5a14a;--c3:#6fd18b;--c4:#ff8a80;--c5:#b794f6;--c6:#5ccbe0;--c7:#e6c35c;--c8:#f58ac0;--shadow:0 1px 2px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.35)}
button,.btn,.tab,.stg,.card,.tile,select,input,textarea{transition:background-color .18s,color .18s,border-color .18s,box-shadow .18s,transform .18s,opacity .18s}
button,.btn{box-shadow:0 1px 2px rgba(0,0,0,.2);font-weight:600}
button:hover:not(:disabled),.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow);filter:brightness(1.08)}
button:active:not(:disabled),.btn:active{transform:translateY(0);box-shadow:none;filter:brightness(.95)}
button.sec:hover:not(:disabled),.btn.sec:hover{background:color-mix(in srgb,var(--acc) 14%,transparent);filter:none}
button.small,.btn.small{padding:3px 9px;font-size:13px}
button:focus-visible,.btn:focus-visible,a:focus-visible,summary:focus-visible,th:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 30%,transparent)}
.card,.tile{box-shadow:var(--shadow)}.tile:hover,.proj.card:hover{transform:translateY(-2px)}
header nav a{border-bottom:2px solid transparent}
tr.item:hover td{background:color-mix(in srgb,var(--acc) 8%,transparent)}
button.gtoggle:hover{color:var(--acc);transform:none;box-shadow:none;filter:none}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}.chip{border:1px solid var(--acc);color:var(--acc);border-radius:999px;padding:1px 10px;font-size:13px}
tr.grp td.gname{overflow:visible}.gwrap{display:flex;gap:4px 18px;align-items:center;position:sticky;left:0;width:max-content;max-width:60vw;padding:0}
tr.grp td.gnum{font-weight:600;font-size:13px}
.gtot{font-weight:400;font-size:13px}.gtot i{font-style:normal;opacity:.65;margin-right:4px}
th[draggable=true]{cursor:grab}th.dragging{opacity:.4}
th.drop-before{box-shadow:inset 3px 0 0 var(--acc)}th.drop-after{box-shadow:inset -3px 0 0 var(--acc)}
.hint-drag{font-size:12px}
.crumbs{font-size:13px;margin-bottom:6px;opacity:.8}
/* project page */
.stagebar{background:var(--card);border:1px solid var(--line);border-radius:8px;margin-bottom:12px;box-shadow:var(--shadow);overflow:hidden}
.stages{display:flex;overflow-x:auto;padding:6px;gap:0;scrollbar-width:thin}
form.stg-form{display:contents}
.stg{flex:0 0 auto;display:inline-block;background:var(--head);color:var(--fg);border:0;border-radius:0;padding:8px 22px 8px 26px;margin-right:-8px;font-size:13px;font-weight:600;white-space:nowrap;
 clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%,14px 50%);box-shadow:none}
.stages>:first-child{clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%);padding-left:14px;border-radius:12px 0 0 12px}
button.stg{cursor:pointer}button.stg:hover:not(:disabled){background:color-mix(in srgb,var(--acc) 22%,var(--head));transform:none;box-shadow:none;filter:none}
.stg.cur{background:var(--acc);color:#fff}
.phead2{display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.ptitle{font-size:24px;margin:0 0 6px}.pbadges{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.lm{margin:6px 0 0;font-size:13px}
.pact{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.pact input{width:240px}
.pbar{display:inline-block;width:140px;height:10px;border-radius:5px;background:var(--head);border:1px solid var(--line);overflow:hidden;vertical-align:middle}
.pbar i{display:block;height:100%;background:var(--ok);border-radius:5px;transition:width .5s}
.pform{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.frow{display:grid;grid-template-columns:minmax(120px,38%) 1fr;gap:10px;padding:5px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.fl{font-weight:600;font-size:13px;opacity:.75}.fv{overflow-wrap:anywhere;min-height:1.4em}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.tabs{margin-top:16px}
.tablist{position:relative;display:flex;flex-wrap:nowrap;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:thin}
.tab{flex:0 0 auto;white-space:nowrap;background:transparent;color:var(--fg);border:0;border-radius:6px 6px 0 0;box-shadow:none;padding:9px 12px;font-weight:600;opacity:.75}
.tab:hover{opacity:1;background:color-mix(in srgb,var(--acc) 10%,transparent);transform:none;box-shadow:none;filter:none}
.tab.on{opacity:1;color:var(--acc)}
.tab .cnt{display:inline-block;min-width:20px;text-align:center;margin-left:4px;padding:0 6px;border-radius:999px;background:var(--head);font-size:12px;font-weight:600}
.tab.on .cnt{background:var(--acc);color:#fff}
.tab-ink{position:absolute;bottom:-1px;height:3px;background:var(--acc);border-radius:2px;left:0;width:0;transition:left .25s,width .25s}
.tabpanel{padding:14px 2px}.js .tabpanel{display:none}.js .tabpanel.on{display:block;animation:tabin .25s}
@keyframes tabin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.scroll{overflow-x:auto}.nw{white-space:nowrap}td.acts{white-space:nowrap}
table.updates td{min-width:140px}
.tiles.small{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.tiles.small .tv{font-size:20px}
.formbar{position:sticky;bottom:0;display:flex;gap:10px;padding:10px 0;background:var(--bg);border-top:1px solid var(--line);margin-top:10px}
/* charts */
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:14px;margin-bottom:14px}
.chartcard{display:flex;flex-direction:column;margin:0}.chartcard.loading{opacity:.6}
.chartcard .ctl label{margin-top:0}.cbox{position:relative;height:280px;margin:8px 0}.c-empty{padding:30px;text-align:center}
.cfoot{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:flex-start}.cfoot details{flex:1;min-width:200px}
.c-table{margin-top:6px;font-size:13px}
.cfilters .chk{flex:0 0 auto;align-self:center}.cfilters .chk label{display:flex;gap:6px;align-items:center;margin:14px 0 0}
@media(max-width:640px){.charts{grid-template-columns:1fr}.pform,.grid2{grid-template-columns:1fr}.pact input{width:100%}.hint-drag{display:none}
 .gwrap{position:static;width:auto;max-width:none;flex-wrap:wrap}.cbox{height:240px}.ptitle{font-size:20px}.stg{padding:8px 18px 8px 22px}}
@media(max-width:900px){.pform,.grid2{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}.tile:hover,.proj.card:hover,button:hover:not(:disabled),.btn:hover{transform:none}}

/* v5: group totals sit under their own columns; phone shows them as labelled chips */
@media(max-width:640px){
 table.glist tr.grp{display:flex;flex-wrap:wrap;gap:2px 14px;background:var(--head);padding:6px 10px}
 table.glist tr.grp td{display:none;padding:0;background:transparent}
 table.glist tr.grp td.gname{display:block;width:100%}
 table.glist tr.grp td.gnum[data-t]{display:block;width:auto;font-weight:400}
 table.glist tr.grp td.gnum[data-t]::before{content:attr(data-label) " ";opacity:.65}
}
.stagepick{position:relative}.stagepick>summary{list-style:none;cursor:pointer;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:7px 9px;min-width:170px}
.stagepick>summary::-webkit-details-marker{display:none}.stagepick>summary::after{content:" \25BE";float:right}
.stagepick .sp-panel{position:absolute;z-index:20;margin-top:4px;min-width:260px;max-height:320px;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);padding:8px 10px}
.stagepick label{display:flex;gap:8px;align-items:center;font-weight:400;margin:4px 0;font-size:14px}.stagepick .sp-btns{display:flex;gap:6px;margin-bottom:6px}
.cfilters{overflow:visible}.cfilters .row{position:relative}

/* ---- v6: menu highlight, heading tabs, chart options, livelier light theme */
header a:hover{background:var(--nav-hl);border-bottom-color:transparent}
header a.cur{background:var(--nav-hl);box-shadow:inset 0 -3px 0 var(--nav-ul)}
header nav{gap:4px}header a.brand{font-size:17px;letter-spacing:.02em}
header button.sec{border-color:var(--nav-link)}
.chartcard,.tile,.proj.card{border-top:3px solid var(--acc)}
table.glist thead th{background-image:linear-gradient(180deg,var(--head-hi),var(--head));box-shadow:inset -1px 0 0 var(--line),0 1px 0 var(--line),inset 0 2px 0 color-mix(in srgb,var(--acc) 45%,transparent);padding:9px 12px 9px 10px}
th[data-col]::before{content:"\22EE\22EE";opacity:.5;margin-right:7px;letter-spacing:-3px;cursor:grab;color:var(--acc)}
th[data-col]:hover{background-image:linear-gradient(180deg,color-mix(in srgb,var(--acc) 12%,var(--head-hi)),color-mix(in srgb,var(--acc) 24%,var(--head)));box-shadow:inset -1px 0 0 var(--line),0 1px 0 var(--line),inset 0 3px 0 var(--acc)}
th[data-col]:hover::before{opacity:1}
th[data-col]:active{cursor:grabbing}
th.dragging{opacity:.5!important}
th.drop-before{box-shadow:inset 4px 0 0 var(--acc),0 1px 0 var(--line)!important}th.drop-after{box-shadow:inset -4px 0 0 var(--acc),0 1px 0 var(--line)!important}
.tab.on{background:color-mix(in srgb,var(--acc) 14%,var(--card));border:1px solid var(--line);border-bottom-color:transparent}
.csel{display:flex;gap:6px 18px;align-items:center;flex-wrap:wrap;margin:8px 0 2px}.csel label{display:inline-flex;gap:6px;align-items:center;margin:0;font-weight:500}.cmode{display:inline-flex;gap:14px}
.cpick{border:1px solid var(--line);border-radius:8px;padding:8px;margin:6px 0;background:var(--bg)}
.c-opts{max-height:170px;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:2px 12px}.c-opts label{display:flex;gap:6px;font-weight:400;margin:2px 0;font-size:14px}
.sp-btns input[type=search]{flex:1;min-width:120px;width:auto}
.cfilters .dates{margin-top:8px}.cfilters .row>*{min-width:130px}.cfilters .row>button{min-width:0}
header .muted{opacity:.92}