/* ── The app ──────────────────────────────────────────────────────────────────────
   Tokens from the app's light theme (globals.css), bar shapes from gantt.css, so the
   demo reads as the product. Switzer is the app's typeface. */
@font-face{font-family:"Switzer";src:url(fonts/Switzer-Variable.woff2) format("woff2");font-weight:100 900;font-display:swap}
.app{
  --ec-surface:#fff;--ec-text:#1A1D21;--ec-text-2:#5A6472;--ec-muted:#8A94A3;--ec-border:#E2E6EB;
  --ec-chrome:#F3F4F6;--ec-heading:#F1F2F4;--ec-line:rgba(26,29,33,.13);--ec-faint:rgba(26,29,33,.06);
  --ec-blue:#35A7FF;--ec-blue-soft:#E3F3FF;--ec-green:#6BF178;--ec-yellow:#FFE74C;--ec-amber:#EBAE76;--ec-red:#FF5964;--ec-violet:#A78BFA;
  --ec-cols:32px minmax(140px,1fr) 64px 92px 92px 62px;
  --ec-ew:1.5px;--ec-ewb:2.5px;
  --lw:0px;--rw:44px;--dh:0px;
  position:relative;
  width:min(1240px,100%,calc(100vw - 280px));
  background:var(--ec-surface);color:var(--ec-text);
  font-family:"Switzer",var(--f-body);font-size:12px;line-height:1.2;
  border:1px solid var(--rule);border-radius:10px;
  box-shadow:0 1px 0 rgba(20,24,40,.03),0 24px 60px -30px rgba(30,40,80,.28);
  overflow:hidden;opacity:0;pointer-events:none;
}
.spacer{flex:1}
.muted{color:var(--ec-muted)}
.ec-btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ec-border);border-radius:6px;padding:3px 10px;font-size:11.5px;background:var(--ec-surface);white-space:nowrap}
.ec-btn.pri{background:var(--ec-blue);border-color:var(--ec-blue);color:#fff;font-weight:600}
.ec-btn.red{background:var(--ec-red);border-color:var(--ec-red);color:#fff;font-weight:600}
.ec-btn.wide{display:flex;margin:8px 0}
.ec-btn.hot{box-shadow:0 0 0 3px rgba(53,167,255,.3)}

.ec-appbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:40px;padding:0 14px;background:var(--ec-chrome);border-bottom:1px solid var(--ec-border);font-size:13px}
.ec-appbar .mark{width:15px;height:20px}
.ec-appbar .mark svg{width:100%;height:100%;display:block}
.ec-appbar strong{font-weight:600}
.ec-user{justify-self:end;display:flex;align-items:center;gap:8px}
.ec-who{display:flex;flex-direction:column;align-items:flex-end;font-size:11.5px;font-weight:500;line-height:1.15}
.ec-who small{font-size:10px;color:var(--ec-muted);font-weight:400}
.ec-avatar{width:24px;height:24px;border-radius:50%;background:var(--ec-blue);color:#fff;font-size:10px;font-weight:600;display:grid;place-items:center}
.ec-tabs{position:relative;display:flex;align-items:center;gap:4px;height:36px;padding:0 10px;border-bottom:1px solid var(--ec-border);background:var(--ec-chrome);white-space:nowrap;z-index:9}
.ec-tab{padding:4px 10px;border-radius:6px;color:var(--ec-text-2)}
.ec-tab.on{background:var(--ec-surface);color:var(--ec-text);box-shadow:0 0 0 1px var(--ec-border);font-weight:500}
.ec-tabs .ec-btn{margin-left:6px}
.ec-mode{font-size:11px;color:var(--ec-muted);margin-right:2px}
.ec-mode.amber{color:#EA9500;font-weight:600}

/* menus: the rail's glass */
.ec-menu{position:absolute;top:32px;min-width:170px;display:flex;flex-direction:column;padding:4px;background:rgba(255,255,255,.88);backdrop-filter:blur(8px) saturate(1.25);border:1px solid var(--ec-border);border-radius:8px;box-shadow:0 10px 30px -10px rgba(20,30,60,.3);opacity:0;transform:translateY(-4px);z-index:20}
.ec-menu.right{right:10px}
.ec-menu span{display:flex;flex-direction:column;gap:2px;padding:6px 8px;border-radius:5px;font-size:12px}
.ec-menu span small{font-size:10.5px;color:var(--ec-muted)}
.ec-menu span.hot,.ec-menu span.sel{background:var(--ec-blue-soft)}
.ec-menu>small{padding:4px 8px 2px;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ec-text-2)}

.ec-main{display:flex;height:calc(38px + var(--rowH) * 16 + 24px);position:relative}
.ec-center{position:relative;flex:1;min-width:0;display:flex;flex-direction:column}
.ec-body{flex:1;min-height:0;display:grid;grid-template-columns:auto minmax(0,1fr);overflow:hidden}
.ec-grid{width:500px;border-right:1px solid var(--ec-border);position:relative;overflow:hidden}
.ec-gh,.ec-tlh{height:38px;border-bottom:1px solid var(--ec-border);background:var(--ec-chrome)}
.ec-gh,.ec-gr{display:grid;grid-template-columns:var(--ec-cols)}
.ec-gh span{display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ec-text-2);border-right:1px solid var(--ec-faint)}
.ec-grows{position:relative;height:calc(var(--rowH) * 16);overflow:hidden}
.ec-gr{position:absolute;left:0;right:0;top:0;height:var(--rowH);border-bottom:1px solid var(--ec-line);background:var(--ec-surface)}
.ec-gr span{display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;border-right:1px solid var(--ec-line);font-variant-numeric:tabular-nums}
.ec-gr .nm{justify-content:flex-start;padding-left:calc(8px + var(--lv) * 16px)}
.ec-gr .ln{color:var(--ec-muted);font-size:10px}
.ec-gr .fi.late{color:var(--ec-red)}
.ec-gr.h{background:var(--ec-heading);font-weight:600}
.ec-gr.h .nm::before{content:"▾";font-size:10px;margin-right:6px;color:var(--ec-text-2)}
.ec-gr.runway{background:transparent}
.ec-gr,.ec-tr{box-shadow:inset 0 0 0 999px rgba(53,167,255,calc(.1 * var(--fa,0)))}
.ec-gr.wash,.ec-tr.wash{box-shadow:inset 0 0 0 999px rgba(53,167,255,.1)}
.ec-gr.added,.ec-tr.added{box-shadow:inset 0 0 0 999px rgba(107,241,120,.16)}
.ec-gr.removed,.ec-tr.removed{box-shadow:inset 0 0 0 999px rgba(255,89,100,.08)}
.ec-gr.removed .nm{color:var(--ec-red);text-decoration:line-through}

.ec-tl{position:relative;min-width:0;overflow:hidden}
.ec-tlh{position:relative;font-size:10px;color:var(--ec-text-2);overflow:hidden}
.ec-tlh span{position:absolute;height:19px;display:flex;align-items:center;white-space:nowrap}
.ec-tlh .mo{top:0;font-size:11px;font-weight:500;color:var(--ec-text)}
.ec-tlh .mo.c{transform:translateX(-50%)}
.ec-tlh .wk{top:19px;padding-left:3px;border-left:1px solid var(--ec-faint);font-variant-numeric:tabular-nums}
.ec-rows{position:relative;height:calc(var(--rowH) * 16);overflow:hidden}
.ec-under{position:absolute;inset:0}
.ec-vl{position:absolute;top:0;bottom:0;width:1px;background:var(--ec-faint)}
.ec-vl.s{background:rgba(26,29,33,.12)}
.ec-nw{position:absolute;top:0;bottom:0;background:rgba(26,29,33,.05)}
.ec-tr{position:absolute;left:0;right:0;top:0;height:var(--rowH);border-bottom:1px solid var(--ec-faint)}
.ec-tr.h{background:rgba(241,242,244,.8)}
.ec-bars{position:absolute;inset:0}

/* the Asta-style bevel: lit top/left, shaded bottom/right, eating INTO the bar */
.ec-p{position:absolute;border-radius:3px;border-style:solid;border-width:var(--ec-ew) var(--ec-ew) var(--ec-ewb);border-color:rgba(255,255,255,.55) rgba(0,0,0,.35) rgba(0,0,0,.45) rgba(255,255,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.2)}
.ec-p.done{background:var(--ec-green)}
.ec-p.rem{background:var(--ec-blue)}
.ec-p.cut-r{border-right-width:0;border-top-right-radius:0;border-bottom-right-radius:0}
.ec-p.cut-l{border-left-width:0;border-top-left-radius:0;border-bottom-left-radius:0}
.ec-tr.crit .ec-p.rem,.ec-tr.crit .ec-ms{border-color:#ffa6a6 #c42f38 #a8222b #ff8088}
.ec-tr.crit .ec-sum{--blue-edge:var(--ec-red)}
/* the delay band: the bar erased, a hatched amber strip standing in it */
.ec-band{position:absolute}
.ec-band::after{content:"";position:absolute;left:0;right:0;top:12%;height:76%;background-color:var(--ec-amber);background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 4px,rgba(0,0,0,.03) 4px 8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.32),inset 2px 0 0 rgba(255,255,255,.2),inset -2px 0 0 rgba(0,0,0,.32),inset 0 3px 0 rgba(255,255,255,.4),inset 0 -3px 0 rgba(0,0,0,.26)}
.ec-base{position:absolute;background:var(--ec-yellow);border-radius:1px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.18);opacity:0}
.ec-base.ms{transform:translate(-50%,-50%) rotate(45deg)}
.ec-cmp{position:absolute;border:1.5px solid var(--ec-violet);background:rgba(167,139,250,.25);border-radius:2px;opacity:0}
.ec-cmp.ghost{border:1.5px dashed var(--ec-red);background:none}
.ec-sum{position:absolute;background:linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,0) 45%,rgba(0,0,0,.22)),linear-gradient(90deg,var(--ec-green) var(--g),var(--ec-blue) var(--g))}
.ec-tr.crit .ec-sum{background:linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,0) 45%,rgba(0,0,0,.25)),linear-gradient(90deg,var(--ec-green) var(--g),var(--ec-red) var(--g))}
.ec-ms{position:absolute;background:var(--ec-blue);border-style:solid;border-width:var(--ec-ew) var(--ec-ewb) var(--ec-ewb) var(--ec-ew);border-color:rgba(255,255,255,.55) rgba(0,0,0,.35) rgba(0,0,0,.45) rgba(255,255,255,.3)}
.ec-label{position:absolute;transform:translateY(-50%);white-space:nowrap;font-size:11.5px;text-shadow:1px 0 0 #fff,-1px 0 0 #fff,0 1px 0 #fff,0 -1px 0 #fff}
.ec-label.h{font-weight:600}
.ec-var{display:inline-block;margin-left:6px;padding:0 5px;border-radius:3px;background:var(--ec-red);color:#fff;font-size:10.5px;font-weight:600;text-shadow:none}
.ec-cap{position:absolute;transform:translate(-50%,-100%);white-space:nowrap;font-size:11.5px;opacity:0;background:rgba(255,255,255,.92);padding:0 4px;border-radius:3px}
.ec-status{position:absolute;top:0;bottom:0;width:0;border-left:2px solid var(--ec-blue)}
.ec-status span{position:absolute;top:3px;left:4px;background:var(--ec-blue);color:#fff;font-size:10px;font-weight:600;padding:1px 6px;border-radius:3px;white-space:nowrap}
.ec-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ec-links path{fill:none;stroke:#5A6472;stroke-width:1}
.ec-links path.crit{stroke:var(--ec-red);stroke-width:1.5}

/* bottom drawer: the strip, and the panel it pushes up */
.ec-drawer{flex:none;border-top:1px solid var(--ec-border);background:var(--ec-surface)}
.ec-strip{display:grid;grid-template-columns:repeat(4,1fr);height:24px;background:var(--ec-chrome)}
.ec-strip span{display:grid;place-items:center;font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ec-text-2);border-right:1px solid var(--ec-border)}
.ec-strip span.on{background:#e4e7eb;color:var(--ec-blue)}
.ec-dpanel{height:var(--dh);overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) 260px;border-top:1px solid var(--ec-border)}
.ai-conv{padding:12px 16px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;overflow:hidden;font-size:12.5px}
.ai-conv>*{display:none}
.ai-hint{margin:0 0 8px;color:var(--ec-text-2)}
.ai-chips{display:flex;flex-wrap:wrap;gap:6px}
.ai-chips span{border:1px solid var(--ec-border);border-radius:99px;padding:3px 10px;font-size:11.5px}
.ai-user{align-self:flex-end;background:#F1F3F5;border-radius:10px;padding:6px 10px;max-width:80%}
.ai-think{color:var(--ec-muted)}
.ai-card{border:1px solid var(--ec-border);border-radius:8px;padding:10px 12px;display:none;flex-direction:column;gap:8px;max-width:560px}
.ai-card ul{margin:0;padding-left:16px;color:var(--ec-text-2);font-size:11.5px}
.ai-opts{display:flex;gap:6px;align-items:center}
.ai-opts span{border:1px solid var(--ec-border);border-radius:6px;padding:3px 12px}
.ai-opts span.hot{background:var(--ec-blue);border-color:var(--ec-blue);color:#fff}
.ai-opts em{font-style:normal;color:var(--ec-muted);border:1px solid var(--ec-border);border-radius:6px;padding:3px 8px;font-size:11px}
.ai-warn{margin:0;color:#B45309;font-size:11.5px}
.ai-acts{display:flex;gap:6px;justify-content:flex-end;align-items:center}
.ai-done{display:none;color:#1f9d55;font-weight:600}
.ai-compose{border-left:1px solid var(--ec-border);padding:10px;display:flex;flex-direction:column;gap:8px}
.ai-input{flex:1;border:1px solid var(--ec-border);border-radius:6px;padding:8px;font-size:12.5px;line-height:1.4}
.ai-input .ph{color:var(--ec-muted)}
.ai-input .caret{display:inline-block;width:1px;height:1em;background:var(--ec-text);vertical-align:-2px;margin-left:1px}
.ai-row{display:flex;justify-content:space-between;align-items:center}
.ai-clear{font-size:11px;color:var(--ec-muted)}

/* left panel: CONFIGURE (AreaLibrarySidebar) */
.ec-left{position:relative;flex:none;width:var(--lw);overflow:hidden;border-right:1px solid var(--ec-border);background:var(--ec-surface)}
.ec-left-in{position:absolute;inset:0 auto 0 0;width:260px;display:flex;flex-direction:column}
.lp-head{flex:none;height:38px;display:grid;place-items:center;background:#F1F3F5;border-bottom:1px solid #CDD3DB;font-size:9.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ec-text-2)}
.lp-query{flex:none;display:none;padding:6px 8px;border-bottom:1px solid var(--ec-border);font-size:10.5px;line-height:1.35;color:var(--ec-text-2)}
.lp-scroll{flex:1;min-height:0;overflow:hidden;padding:0 14px 0 14px;box-shadow:inset 0 10px 10px -10px rgba(0,0,0,.07)}
.lp-i{width:14px;height:14px;flex:none}
.lp-pane{--pane-fill:#E3F3FF;position:relative;display:flex;align-items:center;gap:8px;min-height:32px;margin:4px 0;padding-left:10px;border-radius:6px;border:1px solid rgba(53,167,255,.45);background:#E3F3FF;box-shadow:inset 3px 0 0 #35A7FF;font-size:12.5px}
.lp-pane b{flex:1;font-weight:600}
.lp-ic{display:flex;color:#35A7FF}
.lp-pane:not(.open){--pane-fill:#F1F3F5;background:#F1F3F5;border-color:#CDD3DB;box-shadow:none}
.lp-pane:not(.open) .lp-ic{color:var(--ec-text-2)}
.lp-pane:not(.open) .lp-chev{transform:none}
.lp-hide{display:none!important}
.lp-chev{padding:0 8px 0 6px;color:var(--ec-text-2);transform:rotate(90deg);font-size:13px}
.lp-funnel{display:flex;padding:3px;border-radius:6px;border:1px solid transparent;color:var(--ec-text-2)}
.lp-funnel.on{border-color:#35A7FF;background:#fff;color:#35A7FF}
.lp-search{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:4px;padding:4px 0 6px}
.lp-box{display:flex;align-items:center;border:1px solid #CDD3DB;border-radius:6px;padding:3px 4px 3px 7px;color:#8A94A3;font-size:12px}
.lp-box span{flex:1}
.lp-sw{width:12px;height:12px}
.lp-select{border:1px solid #CDD3DB;border-radius:4px;padding:3px 5px;font-size:10.5px;color:var(--ec-text-2);white-space:nowrap}
.lp-switch{width:30px;height:17px;border-radius:9px;background:rgba(0,0,0,.2);padding:2px}
.lp-switch i{display:block;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.lp-tree{display:flex;flex-direction:column;padding-bottom:6px}
.lp-tr,.lp-fr,.lp-v{display:flex;align-items:center;gap:4px;height:24px;padding:0 4px 0 2px;border-radius:4px;font-size:12px;color:var(--ec-text-2);white-space:nowrap}
.lp-tr span,.lp-fr span,.lp-v span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.cv{width:14px;flex:none;font-style:normal;font-size:10px;color:#8A94A3;text-align:center}
.lp-fold{width:14px;height:14px;flex:none}
.lp-body{display:flex;flex-direction:column;padding:4px 0 50px}
.lp-saved{display:flex;gap:4px;padding:2px 2px 6px;border-bottom:1px solid var(--ec-border);margin-bottom:6px}
.lp-dd{flex:1;display:flex;justify-content:space-between;border:1px solid #CDD3DB;border-radius:6px;padding:3px 7px;font-size:10.5px}
.lp-dd i,.lp-only i{font-style:normal;color:#8A94A3}
.lp-btn{border:1px solid #CDD3DB;border-radius:6px;padding:3px 7px;font-size:10px;font-weight:500}
.lp-seg{display:flex;gap:4px;padding:0 2px 5px}
.lp-seg span{flex:1;text-align:center;border:1px solid #CDD3DB;border-radius:6px;padding:3px 0;font-size:10.5px;font-weight:500;color:var(--ec-text-2)}
.lp-seg span.on{border-color:#35A7FF;background:#E3F3FF;color:#35A7FF}
.lp-only{display:flex;justify-content:space-between;margin:0 2px 6px;border:1px solid #CDD3DB;border-radius:6px;padding:3px 7px;font-size:10.5px;color:var(--ec-text-2)}
.lp-grp{display:flex;align-items:center;gap:2px;padding:6px 2px 4px;border-top:1px solid var(--ec-border);font-size:9.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:#8A94A3}
.lp-grp span{flex:1}
.lp-gi{width:11px;height:11px;margin-right:4px}
.lp-clock{display:flex;margin-right:2px}
.lp-fr b,.lp-v b{font-weight:400;font-size:10.5px;color:#8A94A3}
.lp-fr .dot{display:none;font-style:normal;color:#35A7FF;margin:0 2px}
.lp-fr.has .dot{display:inline}
.lp-vr{display:flex;align-items:stretch}
.lp-vr .rule{width:12px;flex:none;margin-left:7px;border-left:1px solid rgba(226,230,235,.9)}
.lp-vr .lp-v{flex:1;min-width:0}
.lp-v .lp-i,.lp-v .lp-fold{width:13px;height:13px}
.lp-v.on{background:#E3F3FF;color:#35A7FF;font-weight:500}
.lp-v.zero{color:rgba(138,148,163,.7)}
.lp-asearch{margin:2px 2px 4px;border:1px solid #CDD3DB;border-radius:6px;padding:3px 7px;font-size:10.5px;color:#8A94A3}
.lp-foot{position:absolute;left:0;right:0;bottom:0;padding:7px;background:#F1F3F5;border-top:1px solid var(--ec-border);opacity:0}
.lp-foot span#clearBtn{display:block;padding:5px;border-radius:6px;border:1px solid rgba(53,167,255,.4);background:#E3F3FF;color:#35A7FF;text-align:center;font-weight:500;font-size:11.5px}

/* right rail (ribbon/Rail.tsx): icon cells at rest; open, the labels slide out over the
   chart on the rail's glass. Functions in the top half, Format in the bottom. */
.ec-rail{position:relative;flex:none;width:44px;z-index:8}
.rl-panel{position:absolute;top:0;bottom:0;right:0;width:var(--rw);overflow:hidden;background:#F3F4F6;border-left:1px solid var(--ec-border)}
.rl-panel.open{background:linear-gradient(to left,#F3F4F6,rgba(243,244,246,.1));backdrop-filter:blur(4px) saturate(1.25);box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
.rl-in{position:absolute;top:0;bottom:0;right:0;width:210px;display:flex;flex-direction:column}
.rl-half{flex:1;min-height:0;overflow:hidden;padding:5px 4px;display:flex;flex-direction:column;gap:2px}
.rl-half+.rl-half{border-top:1px solid var(--ec-border)}
.rl-g{padding:4px 6px 1px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ec-text-2);opacity:var(--rl,0);white-space:nowrap}
.rl-row{display:flex;align-items:center;height:30px;border-radius:6px;flex:none}
.rl-lab{flex:1;min-width:0;padding-left:8px;font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:var(--rl,0)}
.rl-caret{padding:0 4px;color:#8A94A3;font-size:12px;opacity:var(--rl,0)}
.rl-ic{width:32px;height:30px;flex:none;display:grid;place-items:center;border-radius:6px}
.rl-ic svg{width:24px;height:24px}
.rl-row.hot{background:#E6E9ED}
.rl-row.red .rl-ic{background:rgba(255,89,100,.28)}
.rl-row.off .rl-ic svg{opacity:.45;filter:grayscale(.6)}
.rl-foot{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:2px;height:32px;padding:0 4px;border-top:1px solid var(--ec-border);font-size:11px;color:var(--ec-text-2)}
.rl-foot b{opacity:var(--rl,0)}
.rl-foot span{display:grid;place-items:center;width:20px;height:24px;border-radius:5px;font-size:15px;color:#35A7FF;font-weight:600}
.rl-foot em{font-style:normal;opacity:var(--rl,0);margin-right:auto;padding-left:8px}
/* its menus: the rail's glass, bordered rows, the pick marked by a dot */
.rm{position:absolute;width:236px;right:calc(var(--rw) + 6px);display:flex;flex-direction:column;gap:4px;padding:4px;border-radius:8px;border:1px solid var(--ec-border);background:rgba(243,244,246,.86);backdrop-filter:blur(4px) saturate(1.25);box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);opacity:0;z-index:20}
.rm-i{display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:6px;border:1px solid var(--ec-border);background:rgba(255,255,255,.5);font-size:12px;white-space:nowrap}
.rm-i i{width:5px;height:5px;border-radius:50%;flex:none}
.rm-i.sel{border-color:#35A7FF;background:#E3F3FF;color:#35A7FF;font-weight:500}
.rm-i.sel i{background:#35A7FF}
.rm-i.hot{border-color:#CDD3DB;background:#F0F4F8}

/* pages that replace the schedule */
.ec-page{position:absolute;inset:0;background:var(--ec-surface);opacity:0;z-index:8;overflow:hidden}
/* off the schedule the header loses the schedule's own controls; on the import page (outside any project) the tabs go too */
.app .ec-tabs>*{transition:opacity .15s}
.app.on-page .ec-tabs>.ec-mode,.app.on-page .ec-tabs>.ec-btn{opacity:0}
.app.on-import .ec-tabs>*{opacity:0}
.imp{max-width:460px;margin:0 auto;padding:28px 16px;display:flex;flex-direction:column;gap:8px}
.imp h3{margin:0 0 6px;font-size:17px;font-weight:600}
.imp label{font-size:11px;font-weight:600;color:var(--ec-text-2);margin-top:4px}
.imp-file{display:flex;align-items:center;gap:10px}
.imp-hint{margin:0;font-size:11px;color:var(--ec-muted)}
.imp-reading{margin:0;color:var(--ec-text-2);opacity:0}
.imp-card{border:1px solid var(--ec-border);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;opacity:0}
.imp-card p{margin:0}
.imp-card b{font-variant-numeric:tabular-nums}
.imp-card .ok{color:#1f9d55;font-weight:600;opacity:0}
.imp-card .fold{color:var(--ec-text-2)}
.imp-field{border:1px solid var(--ec-border);border-radius:6px;padding:6px 8px}
.mx{height:100%;display:flex;flex-direction:column;font-size:12px}
.mx-bar{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:9px 18px;border-bottom:1px solid #E2E6EB}
.mx-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mx-back{width:28px;height:28px;display:grid;place-items:center;border:1px solid #E2E6EB;border-radius:6px;color:#5A6472}
.mx-back svg,.mx-btn svg{width:13px;height:13px}
.mx-title{display:flex;flex-direction:column;gap:1px}
.mx-title b{font-size:14px;font-weight:600;line-height:1.15}
.mx-title small{font-size:11px;color:#8A94A3}
.mx-tally{display:flex;gap:6px;flex-wrap:wrap}
.mx-tally span{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:99px;background:#F1F3F5;font-size:11px;color:#5A6472}
.mx-tally i{width:9px;height:9px;border-radius:3px}
.mx-tally b{font-weight:600;color:#1A1D21}
.mx-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.mx-seg{display:inline-flex;align-items:stretch;height:28px;border:1px solid #CDD3DB;border-radius:6px;box-shadow:0 1px 2px rgba(0,0,0,.05);overflow:hidden;font-size:11px;font-weight:500;color:#5A6472}
.mx-seg>span{display:grid;place-items:center;padding:0 9px}
.mx-seg>span+span{border-left:1px solid #E2E6EB}
.mx-seg>span.off{opacity:.4}
.mx-seg .sq{width:28px;padding:0;font-size:14px}
.mx-seg b{display:grid;place-items:center;min-width:46px;border-left:1px solid #E2E6EB;border-right:1px solid #E2E6EB;font-weight:500;color:#1A1D21;font-variant-numeric:tabular-nums}
.mx-seg b+span{border-left:0}
.mx-btn{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1px solid #CDD3DB;border-radius:6px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.05);font-size:12.5px;font-weight:500}
.mx-grid{flex:1;min-height:0;display:grid;gap:3px;padding:14px;align-content:start;grid-auto-rows:minmax(26px,calc(var(--rowH) * 1.05))}
.mx-grid>.ch{display:flex;align-items:flex-end;justify-content:center;padding:4px 4px 6px;font-size:11.5px;font-weight:600;line-height:1.15;text-align:center}
.mx-grid>.anc{display:flex;align-items:center;gap:4px;padding-right:10px;font-size:11.5px;font-weight:600;white-space:nowrap}
.mx-grid>.anc i{font-style:normal;font-size:9px;color:#8A94A3}
.mx-grid>.lab{display:flex;align-items:center;padding:0 8px 0 4px;font:11.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:#5A6472;font-variant-numeric:tabular-nums}
.mx-t{display:grid;place-items:center;border-radius:5px;font-size:10.5px;font-weight:500;line-height:1;font-variant-numeric:tabular-nums}
/* the bevel (.mx-bevel): the chart's own lighting on each tile */
.mx-t.c,.mx-t.g,.mx-t.a,.mx-t.r{border-style:solid;border-width:2px 2px 3px;border-color:rgba(255,255,255,.55) rgba(0,0,0,.35) rgba(0,0,0,.45) rgba(255,255,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.25)}
.mx-t.c{background:rgba(43,127,255,.7);color:#fff}
.mx-t.g{background:#6BF178;color:#0E1116}
.mx-t.a{background-color:#EBAE76;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 4px,rgba(0,0,0,.03) 4px 8px);color:#fff}
.mx-t.r{background:rgba(251,44,54,.75);color:#fff}
.mx-t.n{background:rgba(0,0,0,.1);color:rgba(0,0,0,.6)}
.mx-t.hov{filter:brightness(.95)}
.mx-tally .c,.mx-chip.c{background:rgba(43,127,255,.7)}.mx-tally .g,.mx-chip.g{background:#6BF178}.mx-tally .a,.mx-chip.a{background:#EBAE76}.mx-tally .r,.mx-chip.r{background:rgba(251,44,54,.75)}.mx-tally .n{background:rgba(0,0,0,.1)}
.mx-card{position:absolute;width:260px;padding:11px;border:1px solid #E2E6EB;border-radius:8px;background:#fff;box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);display:flex;flex-direction:column;gap:5px;font-size:11.5px;opacity:0;pointer-events:none}
.mx-card code{font:10.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:#8A94A3}
.mx-card b{font-size:13px;font-weight:600}
.mx-chip{align-self:flex-start;padding:2px 6px;border-radius:4px;font-size:10.5px;font-weight:500;color:#0E1116}
.mx-card dl{margin:2px 0 0;display:grid;grid-template-columns:auto 1fr;gap:3px 10px}
.mx-card dt{color:#8A94A3}
.mx-card dd{margin:0}
.mx-card em{font-style:normal;color:#8A94A3}
.ec-frame{position:absolute;inset:0;border:3px solid rgba(167,139,250,.6);border-radius:2px;pointer-events:none;opacity:0;z-index:5}
.ec-frame span{position:absolute;top:44px;right:10px;background:var(--ec-violet);color:#fff;font-weight:600;font-size:11px;padding:3px 10px;border-radius:99px}

/* the dashboard (DashboardShell, WidgetGrid, WidgetFrame, charts/) */
.db-bar{position:absolute;right:10px;top:0;height:36px;display:flex;align-items:center;gap:7px;opacity:0;pointer-events:none}
.app.on-dash .db-bar{opacity:1}
.db-bar small{font-size:10.5px;color:#8A94A3;margin-left:2px}
.db-pill{padding:4px 10px;border-radius:6px;background:rgba(0,0,0,.1);font-size:12px;font-weight:500}
.db-pick{display:inline-flex;align-items:center;gap:4px;max-width:190px;padding:3px 7px;border:1px solid #E2E6EB;border-radius:6px;background:#fff;font-size:11px}
.db-pick b{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.db-pick svg{width:12px;height:12px;flex:none}
.db-edit{padding:4px 10px;border:1px solid rgba(0,0,0,.15);border-radius:6px;font-size:12px;font-weight:500}
.db-menu{position:absolute;top:34px;width:250px;padding:4px;border:1px solid #E2E6EB;border-radius:8px;background:#fff;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);display:flex;flex-direction:column;opacity:0;z-index:20}
.db-menu span{display:flex;flex-direction:column;gap:1px;padding:5px 9px;border-radius:5px;font-size:12px}
.db-menu small{font-size:10.5px;color:#8A94A3}
.db-menu span.sel{color:#35A7FF;font-weight:500}
.db-menu span.hot{background:#F0F4F8}
.ec-page.db{background:#F7F8FA}
.db-scroll{position:absolute;inset:0;overflow:hidden}
.db-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:10px;padding:14px 18px;will-change:transform}
.db-card{background:#fff;border:1px solid #E2E6EB;border-radius:8px;padding:12px 13px;display:flex;flex-direction:column;gap:6px;min-width:0}
.db-card>b{font-size:12.5px;font-weight:500;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.db-card>small{margin-top:-5px;font-size:10.5px;color:#8A94A3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s3{grid-column:span 3}.s4{grid-column:span 4}.s5{grid-column:span 5}.s7{grid-column:span 7}.s8{grid-column:span 8}.s12{grid-column:span 12}
.db-num{flex:1;display:flex;align-items:center;gap:10px}
.db-num span{display:flex;flex-direction:column;gap:3px}
.db-num em{font-style:normal;font-size:25px;font-weight:600;line-height:1}
.db-num small{font-size:10.5px;color:#8A94A3}
.db-spark{width:84px;height:21px;align-self:flex-end;margin-bottom:16px;overflow:visible}
.db-spark path{fill:none;stroke:#35A7FF;stroke-opacity:.55;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.db-spark circle{fill:#35A7FF;stroke:#fff;stroke-width:2}
.db-pcs{display:flex;flex-wrap:wrap;gap:6px 22px}
.db-pcs span{display:flex;flex-direction:column}
.db-pcs b{font-size:17px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.db-pcs small{font-size:10.5px;color:#8A94A3}
.db-sc{width:100%;height:auto;display:block}
.db-sc text{font-size:10px;fill:#8A94A3;font-variant-numeric:tabular-nums}
.db-sc .end{font-size:11px;fill:#1A1D21}
.db-leg{display:flex;gap:14px;font-size:10.5px;color:#5A6472}
.db-leg span{display:inline-flex;align-items:center;gap:6px}
.db-leg i{width:9px;height:9px;border-radius:2px}
.db-slip{display:grid;grid-template-columns:minmax(0,110px) 1fr auto;gap:5px 10px;align-items:center;margin-top:4px}
.db-slip span{font-size:10.5px;color:#5A6472;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.db-slip b{font-size:10.5px;font-weight:400;font-variant-numeric:tabular-nums;min-width:40px;text-align:right}
.db-track{position:relative;height:17px;border-radius:4px;background:#F1F3F5}
.db-track::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:#CDD3DB}
.db-track i{position:absolute;top:0;bottom:0;border-radius:4px}
.db-foot{margin:auto 0 0;font-size:10.5px;color:#8A94A3}
.db-donut{flex:1;display:flex;align-items:center;gap:16px}
.db-donut svg{width:104px;height:104px;flex:none}
.db-donut ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;font-size:11px;color:#5A6472}
.db-donut li{display:flex;align-items:center;gap:6px}
.db-donut li i{width:9px;height:9px;border-radius:2px}
.db-donut li b{margin-left:auto;padding-left:10px;font-weight:600;color:#1A1D21}
.db-prog{display:grid;grid-template-columns:minmax(0,120px) 1fr auto;gap:6px 10px;align-items:center;margin-top:4px}
.db-prog span{font-size:10.5px;color:#5A6472;white-space:nowrap}
.db-prog .db-track::after{display:none}
.db-prog .db-track i{left:0;background:#35A7FF}
.db-prog b{font-size:10.5px;font-weight:400;font-variant-numeric:tabular-nums;min-width:40px;text-align:right}
@media (max-width:1150px){.db-bar .db-pill,.db-bar .db-edit{display:none}}
@media (max-width:760px){.db-bar,.db-spark{display:none}.db-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.s3{grid-column:span 3}.s4,.s5,.s7,.s8,.s12{grid-column:span 6}}

/* windows: the FloatingWindow glass */
.ec-dim{position:absolute;inset:0;background:rgba(20,24,32,.28);opacity:0;z-index:9}
.ec-win{position:absolute;left:50%;top:50%;width:min(var(--w),calc(100% - 24px));transform:translate(-50%,-50%) scale(.96);background:rgba(255,255,255,.93);backdrop-filter:blur(14px) saturate(1.3);border:1px solid rgba(255,255,255,.7);border-radius:12px;box-shadow:0 0 0 1px rgba(20,30,60,.08),0 30px 60px -20px rgba(20,30,60,.35);opacity:0;z-index:10;overflow:hidden}
.ec-win.small{left:auto;top:52px;right:52px;transform:none}
.win-h{display:flex;align-items:baseline;gap:8px;padding:10px 14px;border-bottom:1px solid var(--ec-border);font-weight:600;font-size:13px}
.win-h small{font-weight:400;color:var(--ec-muted);font-size:11.5px}
.win-h span{margin-left:auto;color:var(--ec-muted)}
.win-b{padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.win-b p{margin:0}
.win-b label{font-size:11px;font-weight:600;color:var(--ec-text-2)}
.win-f{display:flex;gap:6px;padding:10px 14px;border-top:1px solid var(--ec-border)}
.cal-tick{display:flex;align-items:center;gap:8px}
.cal-tick i{width:13px;height:13px;border:1px solid #b8bec8;border-radius:3px;display:grid;place-items:center;font-style:normal;font-size:10px;color:#fff}
.cal-tick i.on{background:var(--ec-blue);border-color:var(--ec-blue)}
.cal-tick i.on::after{content:"✓"}
.hi{display:grid;grid-template-columns:42% 1fr;height:340px}
.hi-list{border-right:1px solid var(--ec-border);overflow:hidden;display:flex;flex-direction:column}
.hi-filt{display:flex;gap:4px;padding:8px}
.hi-filt span{border:1px solid var(--ec-border);border-radius:5px;padding:2px 6px;font-size:10.5px;color:var(--ec-text-2)}
.hi-list>div:not(.hi-filt){position:relative;display:flex;flex-direction:column;gap:2px;padding:6px 10px;border-top:1px solid var(--ec-faint);font-size:12px}
.hi-list small{color:var(--ec-muted);font-size:10.5px}
.hi-unsaved{color:#EA9500;font-weight:600}
.hi-rev{background:var(--ec-heading);font-weight:600}
.hi-rev i{font-style:normal;font-size:10px;background:var(--ec-blue-soft);color:#1d7fd0;padding:1px 6px;border-radius:4px;font-weight:600}
.hi-save em{position:absolute;right:10px;top:8px;font-style:normal;font-size:11px}
.hi-save em.up{color:#EA9500}.hi-save em.dn{color:#1f9d55}
.hi-list .sel{box-shadow:inset 0 0 0 999px rgba(53,167,255,.12)}
.hi-insp{position:relative;padding:12px 14px}
.hi-st{position:absolute;inset:12px 14px;display:flex;flex-direction:column;gap:6px;opacity:0}
.hi-st p{margin:0}
.hi-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.hi-btns .ec-btn{margin:0}
.hi-grp{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ec-text-2);margin-top:6px!important}
.td{display:grid;grid-template-columns:150px 1fr;height:330px}
.td-nav{display:flex;flex-direction:column;gap:2px;padding:10px;border-right:1px solid var(--ec-border)}
.td-nav span{padding:6px 8px;border-radius:6px;color:var(--ec-text-2)}
.td-nav span.on{background:var(--ec-blue-soft);color:#1d7fd0;font-weight:500}
.td-body{padding:12px 14px;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.td-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.td-top p{margin:0 0 3px}
.td-top em{font-style:normal;color:#EA9500}
.td-card{border:1px solid var(--ec-border);border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;gap:3px}
.td-card small{font-size:10px;font-weight:600;letter-spacing:.04em}
.td-card p{margin:0}
.td-thru{margin:0;color:var(--ec-text-2)}
.flt-logic{background:var(--ec-heading);border-radius:6px;padding:6px 8px}
.flt-logic small{font-size:9.5px;font-weight:700;letter-spacing:.06em;color:var(--ec-text-2);margin-right:6px}
.flt-box{border:1px solid var(--ec-border);border-radius:8px;padding:6px 10px}
.flt-box p{margin:4px 0}
.flt-box i{font-style:normal;color:var(--ec-muted);margin-right:8px}
.flt-box .and{font-size:10px;font-weight:700;color:var(--ec-text-2)}

/* the operator's phone: the mobile app's StyleSheets (ActivityScreen, ScanScreen,
   GlassTabBar, theme.ts) at its own 390 × 844 points, scaled into the frame by --ps */
.phone{--ps:.6;--bz:11px;position:absolute;left:63%;top:50%;width:calc(390px * var(--ps) + 2 * var(--bz));height:calc(844px * var(--ps) + 2 * var(--bz));margin:calc((844px * var(--ps) + 2 * var(--bz)) / -2) 0 0 calc((390px * var(--ps) + 2 * var(--bz)) / -2);padding:var(--bz);border-radius:calc(55px * var(--ps) + var(--bz));background:#16181c;box-shadow:inset 0 0 0 1.5px #44474e,inset 0 0 0 4px #1d1f24,0 40px 80px -30px rgba(20,30,60,.55);opacity:0;z-index:25;pointer-events:none}
.ph-glass{position:relative;width:calc(390px * var(--ps));height:calc(844px * var(--ps));border-radius:calc(55px * var(--ps));overflow:hidden;background:#F7F8FA}
.ph-native{position:absolute;left:0;top:0;width:390px;height:844px;transform:scale(var(--ps));transform-origin:0 0;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;color:#1A1D21;-webkit-font-smoothing:antialiased;line-height:1.2}
.ph-native p,.ph-native h4{margin:0}
.ph-native .ion{display:block;flex:none}
.ph-glassy{background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 1px 4px rgba(0,0,0,.1),0 0 0 .5px rgba(0,0,0,.07)}
@keyframes phspin{to{transform:rotate(360deg)}}
.ph-spin{display:inline-block;width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:phspin .8s linear infinite}

/* status bar, island, home indicator */
.ph-sb{position:absolute;left:0;right:0;top:0;height:54px;display:flex;align-items:center;justify-content:space-between;padding:4px 34px 0 52px;font-size:17px;font-weight:600;z-index:5}
.ph-island{position:absolute;left:50%;top:11px;width:124px;height:36px;margin-left:-62px;border-radius:20px;background:#000}
.ph-sbi{font-size:11px;letter-spacing:1px}
.ph-homebar{position:absolute;left:50%;bottom:8px;width:134px;height:5px;margin-left:-67px;border-radius:3px;background:#000;z-index:5}
.phone.scan .ph-sb{color:#fff}
.phone.scan .ph-homebar{background:#fff}

/* Scan: the camera, a printed area label on a wall, the white frame */
.ph-scan{position:absolute;inset:0;background:#000;overflow:hidden}
.ph-wall{position:absolute;inset:-20px;background:radial-gradient(90% 60% at 45% 42%,rgba(255,255,255,.18),rgba(0,0,0,0) 70%),repeating-linear-gradient(90deg,rgba(0,0,0,0) 0 118px,rgba(0,0,0,.18) 118px 120px),linear-gradient(180deg,#a7a39b 0%,#8e8a82 55%,#5d5a55 100%);filter:blur(1.2px)}
.ph-sticker{position:absolute;left:50%;top:47%;width:176px;padding:12px 12px 10px;background:#fff;border-radius:3px;box-shadow:0 8px 20px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.3);display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;color:#000;transform:translate(-50%,-50%) rotate(-2.5deg) scale(var(--zoom,1))}
.ph-qr{width:150px;height:150px;padding:9px;background:#fff}
.ph-qr svg{display:block;width:100%;height:100%}
.ph-sticker b{margin-top:4px;font-size:18px;font-weight:700;line-height:1.1}
.ph-sticker span{font-size:11px;color:#222}
.ph-sticker code{font:12px ui-monospace,SFMono-Regular,Menlo,monospace}
.ph-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:66px 0 128px}
.ph-hint{color:#fff;font-size:16px;font-weight:600;text-shadow:0 0 6px rgba(0,0,0,.6)}
.ph-target{width:240px;height:240px;border-radius:24px;border:3px solid rgba(255,255,255,.9)}
.ph-foot{min-height:48px}
.ph-pill{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:rgba(11,27,58,.85);color:#fff;font-size:14px;opacity:0}

/* Activity */
.ph-act{position:absolute;inset:0;padding:70px 16px 0;display:flex;flex-direction:column;gap:18px;background:#F7F8FA;opacity:0}
.ph-top{display:flex;align-items:flex-start}
.ph-round{width:40px;height:40px;border-radius:20px;display:grid;place-items:center;flex:none;color:#1A1D21;background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 1px 4px rgba(0,0,0,.1),0 0 0 .5px rgba(0,0,0,.07)}
.ph-none{visibility:hidden}
.ph-chipwrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}
.ph-chip{display:flex;align-items:center;gap:8px;padding:10px 18px;border-radius:12px;background:#E3F3FF;color:#35A7FF;font-size:22px;font-weight:700}
.ph-areaname{font-size:15px;color:#5A6472}
.ph-car{display:flex;align-items:center;gap:6px}
.ph-slots{flex:1;min-width:0;display:flex;gap:6px}
.ph-slots>div{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px}
.ph-slots span{max-width:100%;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-slots .cur span{color:#35A7FF;font-weight:700}
.ph-slots i{height:24px;display:flex;align-items:center}
.ph-slots b{align-self:stretch;height:4px;border-radius:2px}
.ph-slots .g{color:#6BF178}.ph-slots b.g{background:#6BF178}
.ph-slots .b{color:#35A7FF}.ph-slots b.b{background:#35A7FF}
.ph-slots .f{color:#8A94A3}.ph-slots b.f{background:#8A94A3}
.ph-wbs{align-self:center;margin-top:8px;width:112px;height:112px;border-radius:56px;display:grid;place-items:center;background:#E3F3FF;color:#35A7FF;box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),0 2px 8px rgba(53,167,255,.15)}
.ph-title{margin-top:-4px!important;font-size:28px;font-weight:800;text-align:center}
.ph-code{margin-top:-12px!important;font-size:13px;color:#5A6472;text-align:center}
.ph-dates{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ph-dates>div:not(.ph-bubble){display:flex;flex-direction:column;gap:4px;min-width:100px}
.ph-dates>.r{align-items:flex-end}
.ph-dates p{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:#5A6472}
.ph-dates span{font-size:15px;color:#5A6472}
.ph-dates .ion.g{color:#16A34A}.ph-dates .ion.b{color:#35A7FF}
.ph-bubble{display:flex;flex-direction:column;align-items:center}
.ph-bubble b{padding:8px 14px;border-radius:12px;background:#fff;border:1px solid #E2E6EB;font-size:16px;font-weight:700;color:#6BF178}
.ph-bubble i{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #E2E6EB}
.ph-slider{position:relative;height:40px;margin:0 14px}
.ph-slider::before{content:"";position:absolute;left:0;right:0;top:18px;height:4px;border-radius:2px;background:#E2E6EB}
.ph-slider i{position:absolute;left:0;top:18px;height:4px;border-radius:2px;background:#6BF178}
.ph-slider b{position:absolute;top:6px;width:28px;height:28px;margin-left:-14px;border-radius:50%;background:#6BF178;box-shadow:0 3px 8px rgba(0,0,0,.18),0 0 0 .5px rgba(0,0,0,.08)}
.ph-scale{display:flex;justify-content:space-between;padding:0 4px;margin-top:-18px}
.ph-scale span{color:#35A7FF;font-weight:600;font-size:14px}
.ph-scale em{font-style:normal;color:#5A6472;font-size:14px}
.ph-status{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:-8px!important;min-height:18px;font-size:13px;color:#5A6472;text-align:center}
.ph-si{display:none}
.ph-status.pending .p,.ph-status.saving .s,.ph-status.saved .k{display:flex}
.ph-status.pending{color:#B45309}.ph-status.saving{color:#35A7FF}.ph-status.saved{color:#16A34A}
.ph-tiles{display:flex;gap:14px}
.ph-tiles>div{position:relative;flex:1;height:120px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#35A7FF;background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 1px 4px rgba(0,0,0,.08),0 0 0 .5px rgba(0,0,0,.08)}
.ph-tiles span{font-size:15px;font-weight:600;color:#1A1D21}
.ph-tiles em{position:absolute;top:10px;right:10px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#35A7FF;color:#fff;font-size:12px;font-weight:700;font-style:normal;line-height:22px;text-align:center;opacity:0}
.ph-areacard{display:flex;align-items:center;gap:16px;padding:14px 16px;border-radius:16px;color:#5A6472;background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 1px 4px rgba(0,0,0,.08),0 0 0 .5px rgba(0,0,0,.08)}
.ph-areacard>div{flex:1;display:flex;flex-direction:column}
.ph-areacard b{font-size:16px;font-weight:700;color:#1A1D21}
.ph-areacard span{font-size:13px;margin-top:2px}
.ph-ring{width:58px;height:58px;flex:none}
.ph-ring text{font-size:15px;font-weight:600;fill:#1A1D21}

/* the floating glass tab bar */
.ph-tabbar{position:absolute;left:25px;bottom:30px;width:340px;height:62px;z-index:4}
.ph-pillbar{height:62px;border-radius:31px;display:flex;align-items:center;padding:0 10px;background:rgba(255,255,255,.74);backdrop-filter:blur(14px) saturate(1.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),0 4px 12px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.08)}
.ph-pillbar>span{flex:1;height:62px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#1A1D21}
.ph-pillbar>span.on{color:#35A7FF}
.ph-pillbar em{font-style:normal;font-size:11px;font-weight:600}
.ph-pillbar .ph-gap{flex:none;width:80px}
.ph-scanbtn{position:absolute;left:140px;top:-13px;width:60px;height:60px;border-radius:30px;display:grid;place-items:center;background:#35A7FF;color:#fff;box-shadow:0 4px 8px rgba(53,167,255,.35),inset 0 1px 0 rgba(255,255,255,.35)}
.ph-scanbtn.on{background:#1B8FE0}

@media (max-width:1150px){
  .ec-grid{width:330px}
  .app{--ec-cols:28px minmax(120px,1fr) 58px 84px}
  .ec-gh .st,.ec-gh .pr,.ec-gr .st,.ec-gr .pr{display:none}
}
@media (max-width:760px){
  .ec-grid,.ec-btn.wide-only,.ec-who,.ec-tabs .ec-btn,.ec-mode{display:none}
  .ec-body{grid-template-columns:minmax(0,1fr)}
  .app{width:580px;zoom:var(--az,1)}
  .ec-left{position:absolute;left:0;top:0;bottom:0;z-index:7}
  .ec-dpanel{grid-template-columns:minmax(0,1fr)}
  .ai-compose{display:none}
  .phone{left:50%;top:var(--phy,50%);--ps:var(--phs,.5)}
  .ec-tlh .wk{color:transparent}
}