/* THE CLIENT'S TOP BAR ON THE STAFF APP'S ONE CLIENT SCREEN (Plan & billing) — director's UI upgrade, 1 Oct 2026.
   A client sees ONE frame: the same bar as the portal (/assets/tvp-client.css), drawn here because index.html is the
   staff app and must not take the client sheet. Every rule is scoped under .cshell, which start() sets only for a
   signed-in client — no staff screen can change. Tokens only. */
.cshell #app .side,.cshell #app .sbackdrop,.cshell #app .top>:not(.cs){display:none!important}
.cshell #app .top{height:56px;gap:var(--tvp-space-24);padding:0 max(var(--tvp-space-24),calc((100vw - 1200px)/2));z-index:40}
.cshell #app .shell{display:block;min-height:0}
.cshell #app main.wrap{max-width:1200px;margin:0 auto;padding:var(--tvp-space-28) var(--tvp-space-24) 80px}
.cs[data-i]::before{content:"";flex:none;display:inline-block;width:16px;height:16px;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.cs.nav [data-i]::before{content:"";flex:none;display:none;width:20px;height:20px;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.cshell [data-i=case]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2M3 13h18'/%3E%3C/svg%3E")}
.cshell [data-i=layers]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 9 5-9 5-9-5 9-5zM3 12l9 5 9-5M3 17l9 5 9-5'/%3E%3C/svg%3E")}
.cshell [data-i=chat]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E")}
.cshell [data-i=plus]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
.cshell [data-i=bell]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E")}
.cs.brand{display:flex;align-items:center;gap:var(--tvp-space-10);color:var(--tvp-on-navy);text-decoration:none;flex:none}
.cs.brand img{height:28px;width:auto;display:block}
.cs.brand b{display:block;font-size:14px;font-weight:600;letter-spacing:.01em;line-height:1.2}
.cs.brand i{display:block;font:500 11px/1.2 var(--tvp-font-app-mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--tvp-steel-silver);margin-top:2px}
.cs.nav{flex:1;display:flex;align-items:stretch;gap:var(--tvp-space-4);height:100%;min-width:0}
.cs.nav a{display:inline-flex;align-items:center;gap:var(--tvp-space-8);color:var(--tvp-on-navy-body);text-decoration:none;font-size:14px;font-weight:500;padding:0 var(--tvp-space-12);white-space:nowrap;border-bottom:2px solid transparent;border-top:2px solid transparent}
.cs.nav a:hover{color:var(--tvp-on-navy)}
.cs.cta{display:inline-flex;align-items:center;gap:var(--tvp-space-6);height:34px;padding:0 var(--tvp-space-14);border-radius:var(--tvp-radius-md);background:var(--tvp-surface);color:var(--tvp-navy);font:600 13.5px/1 var(--tvp-font-app);text-decoration:none;white-space:nowrap}
.cs.cta:hover{background:var(--tvp-steel-tint)}
.cs.cta::before{width:14px;height:14px}
.cs.ub{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:var(--tvp-radius-md);color:var(--tvp-on-navy-body);text-decoration:none}
.cs.ub::before{width:18px;height:18px}
.cs.ub:hover{color:var(--tvp-on-navy);background:color-mix(in srgb,var(--tvp-on-navy) 9%,transparent)}
.cs.who{display:inline-flex;align-items:center;gap:var(--tvp-space-8);color:var(--tvp-on-navy-body);font:500 13px/1 var(--tvp-font-app);max-width:220px;min-width:0}
.cs.who .av{width:28px;height:28px;border-radius:50%;background:var(--tvp-steel-strong);color:var(--tvp-on-navy);font:600 11.5px/1 var(--tvp-font-app);display:inline-grid;place-items:center;flex:none}
.cs.who .anm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs.out{height:34px;padding:0 var(--tvp-space-12);border:1px solid var(--tvp-on-navy-line);border-radius:var(--tvp-radius-md);background:transparent;color:var(--tvp-on-navy-body);font:500 13px/1 var(--tvp-font-app);cursor:pointer;white-space:nowrap}
.cs.out:hover{color:var(--tvp-on-navy);background:color-mix(in srgb,var(--tvp-on-navy) 9%,transparent)}
.cshell #app .top :focus-visible{outline:2px solid var(--tvp-steel-silver);outline-offset:2px}
@media(max-width:1180px){.cs.who .anm{display:none}.cshell #app .top{gap:var(--tvp-space-16)}}
@media(max-width:1020px){.cs.brand b{display:none}}
@media(max-width:860px){
 .cshell #app .top{padding:0 var(--tvp-space-16);gap:var(--tvp-space-12)}
 .cs.brand{margin-right:auto}
 .cs.nav{position:fixed;left:0;right:0;bottom:0;height:auto;z-index:45;background:var(--tvp-navy);gap:0;justify-content:space-around;padding:var(--tvp-space-4) var(--tvp-space-4) calc(var(--tvp-space-4) + env(safe-area-inset-bottom));border-top:1px solid var(--tvp-on-navy-line)}
 .cs.nav a{flex:1 1 0;flex-direction:column;justify-content:center;gap:var(--tvp-space-2);font-size:12px;padding:var(--tvp-space-6) var(--tvp-space-4);min-height:52px;border-bottom:0}
 .cs.nav [data-i]::before{display:block}
 .cs.cta{width:36px;padding:0;justify-content:center;font-size:0;gap:0}
 .cs.cta::before{width:16px;height:16px}
 .cshell body,.cshell #app{padding-bottom:64px}
 .cshell #app main.wrap{padding:var(--tvp-space-20) var(--tvp-space-16) var(--tvp-space-40)}
}