/* Desk shell — the frame every desk page sits in (Sep 2026).
   One glass slab: a sidebar (logo, icon tiles, list, you) on the left, a
   greeting bar on top, the page in the middle. Built by desk-shell.js after
   sign-in; the page's own header is folded into the top bar on desktop and
   left alone on phones, where the sidebar becomes a bottom sheet. */

.sh{position:relative;z-index:1;display:grid;grid-template-columns:264px minmax(0,1fr);max-width:1640px;margin:18px auto;
  min-height:calc(100dvh - 36px);border-radius:32px;overflow:clip;
  background:rgba(255,255,255,.34);border:1px solid var(--glass-border);box-shadow:var(--shadow-panel);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.15);backdrop-filter:blur(var(--blur)) saturate(1.15)}
body.has-shell{padding:0 18px}
body.has-shell #app{max-width:none;margin:0;min-height:0;overflow:visible;position:static}

/* ---------- sidebar ---------- */
.sh-side{display:flex;flex-direction:column;gap:22px;padding:22px 16px 18px;
  border-right:1px solid var(--glass-border);background:rgba(255,255,255,.28);
  position:sticky;top:0;height:calc(100dvh - 36px);overflow:auto;-webkit-overflow-scrolling:touch}
.sh-brand{display:flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink);padding:2px 6px}
.sh-brand img{width:34px;height:34px;display:block}
.sh-brand b{font:700 22px/1 var(--body);letter-spacing:-.03em;margin-top:2px}
.sh-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sh-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  aspect-ratio:1.12;border-radius:18px;background:var(--raise);border:1px solid var(--glass-border);
  color:var(--ink);text-decoration:none;font:600 13px var(--body);box-shadow:var(--shadow-soft);
  transition:background .15s,transform .05s}
.sh-tile svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sh-tile:hover{background:#fff}
.sh-tile:active{transform:translateY(1px)}
.sh-tile.is-on{background:var(--dark);color:var(--on-dark);border-color:transparent}
.sh-tile.is-on:hover{background:var(--dark-press)}
.sh-list{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line);padding-top:12px}
.sh-item{display:flex;align-items:center;gap:12px;padding:8px 6px;border-radius:14px;text-decoration:none;
  color:var(--ink);font:500 14px var(--body);background:transparent;border:0;cursor:pointer;text-align:left;width:100%}
.sh-item svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sh-item i{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--raise);border:1px solid var(--glass-border);color:var(--muted)}
.sh-item:hover{background:rgba(var(--ink-rgb),.04)}
.sh-item.is-on i,.sh-item:hover i{color:var(--ink)}
.sh-foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px;border-radius:18px;
  background:var(--raise);border:1px solid var(--glass-border)}
.sh-foot .sh-avatar{width:36px;height:36px;font-size:14px}
.sh-foot b{display:block;font:600 13.5px var(--body);color:var(--ink)}
.sh-foot span{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.sh-foot button{margin-left:auto;background:transparent;border:0;color:var(--muted);font:500 12.5px var(--body);cursor:pointer;padding:6px 4px}
.sh-foot button:hover{color:var(--ink)}

/* ---------- main + top bar ---------- */
.sh-main{display:flex;flex-direction:column;min-width:0}
.sh-top{display:flex;align-items:center;gap:12px;padding:24px 30px 8px;flex-wrap:wrap}
.sh-greet h1{margin:0;font:700 30px/1.05 var(--display);letter-spacing:-.015em;color:var(--ink)}
.sh-meta{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-top:5px;color:var(--muted);font-size:13.5px}
.sh-meta .bar-sub{margin:0;text-align:left;font-size:13.5px;color:var(--muted)}
.sh-meta .bar-sub:not(:empty)::before{content:"·";margin-right:10px;color:var(--faint)}
.sh-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.sh-actions .back{align-self:auto}
.sh-actions .ds-link{display:inline-flex;align-items:center;padding:9px 14px;border-radius:var(--r-pill);
  background:var(--raise);border:1px solid var(--glass-border);color:var(--ink);text-decoration:none;
  font:600 13px var(--body);box-shadow:var(--shadow-soft)}
.sh-avatar{width:40px;height:40px;border-radius:50%;background:var(--dark);color:var(--on-dark);
  display:grid;place-items:center;font:600 15px var(--body);flex:none;border:2px solid rgba(255,255,255,.7)}
.sh-top > .sh-avatar{margin-left:4px}
.sh-page{padding:10px 30px 30px;flex:1;min-width:0}

/* the page's own chrome folds into the shell on desktop */
@media (min-width:960px){
  body.has-shell header.bar,body.has-shell header.mg-bar,body.has-shell .statsbar{display:none}
  body.has-shell.sh-home .display-sm{display:none}
  body.has-shell #app .body{padding:6px 0 0}
  body.has-shell.mgr .mg-wrap{padding-top:0}
  body.has-shell.sh-calls #app{max-width:none;margin:0}
  body.has-shell.sh-calls .body.desk{grid-template-columns:minmax(0,1fr) minmax(400px,560px)}
  body.has-shell.mgr .mg-wrap{max-width:none}
  body.has-shell.sh-analytics .mg-kpis,body.has-shell.sh-manager .mg-kpis{grid-template-columns:repeat(6,minmax(0,1fr))}
  body.has-shell.sh-text #app,body.has-shell.sh-email #app,body.has-shell.sh-optext #app{max-width:640px}
  body.has-shell.sh-home .body{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:14px;align-content:start}
  body.has-shell.sh-home .body > .rv{grid-column:1/-1}
  body.has-shell.sh-home .situ{grid-column:auto}
}

/* ---------- home: the numbers before the list ---------- */
.sh-kpis{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--r-lg);box-shadow:var(--shadow-panel);overflow:hidden}
.sh-kpi{padding:18px 20px 16px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:6px;min-width:0;
  border-left:1px solid var(--line)}
.sh-kpi:first-child{border-left:0}
.sh-kpi b{font:700 34px/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sh-kpi b.dim{color:var(--faint)}
.sh-kpi span{font:500 12.5px var(--body);color:var(--muted)}
.sh-kpi small{font:400 12px var(--body);color:var(--faint)}
.sh-kpi:hover{background:rgba(var(--ink-rgb),.03)}
@media (max-width:959px){.sh-kpis{grid-template-columns:1fr 1fr}.sh-kpi:nth-child(3){border-left:0}.sh-kpi:nth-child(n+3){border-top:1px solid var(--line)}}

/* ---------- phone: no frame, sidebar is a sheet ---------- */
.sh-scrim{position:fixed;inset:0;z-index:79;background:rgba(var(--ink-rgb),.28);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .2s}
body.sh-open .sh-scrim{opacity:1;pointer-events:auto}
body.sh-open #desk-dock{visibility:hidden}
@media (max-width:959px){
  body.has-shell{padding:0}
  .sh{display:block;margin:0;min-height:0;border-radius:0;background:none;border:0;box-shadow:none;overflow:visible;
    -webkit-backdrop-filter:none;backdrop-filter:none}
  .sh-top{display:none}
  .sh-page{padding:0}
  .sh-side{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;max-height:84vh;z-index:80;
    border-right:0;border-top:1px solid var(--glass-border);border-radius:var(--r-xl) var(--r-xl) 0 0;
    background:var(--glass-strong);box-shadow:0 -24px 60px -30px rgba(var(--ink-rgb),.35);
    -webkit-backdrop-filter:blur(var(--blur)) saturate(1.2);backdrop-filter:blur(var(--blur)) saturate(1.2);
    transform:translateY(104%);transition:transform .26s cubic-bezier(.2,.8,.2,1);
    padding-bottom:max(18px,env(safe-area-inset-bottom))}
  body.sh-open .sh-side{transform:none}
  .sh-tiles{grid-template-columns:repeat(3,1fr)}
  .sh-tile{aspect-ratio:1.4}
  body.has-shell #app{max-width:560px;margin:0 auto}
  /* the brand in the page header opens the sheet */
  body.has-shell header.bar .brand,body.has-shell header.bar img.brand,body.has-shell header.bar .wordmark,
  body.has-shell header.mg-bar .wordmark{cursor:pointer}
  .sh-handle{width:40px;height:4px;border-radius:2px;background:rgba(var(--ink-rgb),.18);margin:-6px auto 0}
}
@media (min-width:960px){.sh-handle{display:none}}
@media (prefers-reduced-motion:reduce){.sh-side,.sh-scrim{transition:none}}

/* ---------- New booking, reachable from every page ---------- */
.sh-new{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 14px;border-radius:var(--r-pill);
  background:var(--dark);color:var(--on-dark);text-decoration:none;font:600 14px var(--body);box-shadow:var(--shadow-soft);
  transition:background .15s,transform .05s}
.sh-new svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}
.sh-new:hover{background:var(--dark-press)}
.sh-new:active{transform:translateY(1px)}
.sh-actions .sh-new-top{padding:9px 16px 9px 12px;font-size:13px}
.sh-new-ic{background:var(--dark)!important;color:var(--on-dark)!important;border-color:transparent!important;padding:0;font-size:0;
  width:34px;height:34px;flex:none;display:grid;place-items:center;box-shadow:var(--shadow-soft)}
.sh-new-ic svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}
@media (min-width:960px){.sh-new-ic{display:none}}
/* phone headers: the analytics glyph lives in the sheet's tiles now, so the row keeps room for the title */
@media (max-width:959px){body.has-shell header.bar > a.back[href="/va/analytics"]{display:none}}

/* ---------- page fades: arrive slowly, leave slowly ---------- */
html{background:var(--canvas)}
@keyframes pg-fade{from{opacity:0}to{opacity:1}}
body{animation:pg-fade .55s ease both}
body.pg-out{animation:none;opacity:0;transition:opacity .4s ease}
@media (prefers-reduced-motion:reduce){body{animation:none}body.pg-out{opacity:1;transition:none}}

/* dispatch is map-first: the frame's top bar folds away and the page runs edge to edge */
@media (min-width:960px){
  body.has-shell.sh-dispatch .sh-top{display:none}
  body.has-shell.sh-dispatch .sh-page{padding:0;display:flex;flex-direction:column;min-height:calc(100dvh - 36px)}
  body.has-shell.sh-dispatch #app{flex:1;display:flex;flex-direction:column}
  body.has-shell.sh-dispatch #app .body{padding:0;flex:1}
}

/* the dispatch map is a live compositor: no blur on the frame around it, no page fade */
body.has-shell.sh-dispatch .sh,body.has-shell.sh-dispatch .sh-side{-webkit-backdrop-filter:none;backdrop-filter:none}
body.sh-dispatch{animation:none}