/* ★★ 2026-10-25 THE NEW SHELL on a PC (his mockup rounds 1-21, _preview/shell-rework-21.html, built by
   tools/shell/mk_shell.py). shell2.js adds html.sh2 and the new parts; this file is the look. A floating sidebar card
   with the wordmark at its top; over the page, one block: a row of tabs (the staff app's) joined to a bar with back,
   forward, refresh, the path / address field, and the app's own Connection, Undo and notifications. The phone, and a PC
   narrower than 901px or shorter than 701px, keep the old bars. Colours are tokens so a theme can change them. */
html.sh2{
  --sh2-card:var(--panel2,#161d29);
  --sh2-lift:linear-gradient(#27334b,#1d2638);
  --sh2-liftsh:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px rgba(255,255,255,.05),0 1px 2px rgba(0,0,0,.4),0 6px 14px -6px rgba(0,0,0,.65);
  --sh2-liftsh2:inset 0 1px 0 rgba(255,255,255,.13),0 0 0 1px rgba(255,255,255,.07),0 2px 4px rgba(0,0,0,.4),0 10px 20px -8px rgba(0,0,0,.7);
  --sh2-cardsh:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(255,255,255,.04),0 2px 6px rgba(0,0,0,.35),0 22px 44px -14px rgba(0,0,0,.85);
  --sh2-join:rgb(32 39 50);--sh2-tabhov:#222b38;--sh2-sep:#3a4555;--sh2-field:#090c13;--sh2-home:#26303f;
  --sh2-fg:var(--fg,#f2f4f7);--sh2-mid:var(--mid,#b4bcc7);--sh2-dim:var(--dim,#868e9a);--sh2-ac:#5b9cff;--sh2-slash:rgb(255 255 255 / .2);--sh2-hov:rgb(255 255 255 / .06)}
:root[data-theme="light"].sh2{
  --sh2-lift:linear-gradient(#ffffff,#f2f5fa);
  --sh2-liftsh:0 0 0 1px rgb(20 32 56 / .09),0 1px 2px rgb(24 42 76 / .1),0 4px 10px -4px rgb(24 42 76 / .18);
  --sh2-liftsh2:0 0 0 1px rgb(20 32 56 / .11),0 2px 4px rgb(24 42 76 / .12),0 8px 16px -6px rgb(24 42 76 / .22);
  --sh2-cardsh:0 1px 2px rgba(24,42,76,.06),0 8px 20px rgba(24,42,76,.07),inset 0 0 0 1px rgb(20 32 56 / .06);
  --sh2-join:#f6f8fb;--sh2-tabhov:#eef2f7;--sh2-sep:#d3dae5;--sh2-field:#eef1f6;--sh2-home:#e9eef5;--sh2-ac:#2f6be0;--sh2-slash:rgb(20 32 56 / .25);--sh2-hov:rgb(20 32 56 / .06)}
/* ★ A THEME SETS --panel2 ON body (Glass = a white film), so the card colour is read there, not on html: read on html
   it stayed the solid default and the sidebar and bar looked darker than the Statistics panels (his 10-25). */
html.sh2 body{--sh2-card:var(--panel2,#161d29)}
html.sh2 body.xt-glass{--sh2-join:rgb(255 255 255 / .035);--sh2-tabhov:rgb(255 255 255 / .06)}
:root[data-theme="light"].sh2 body.xt-glass{--sh2-join:rgb(255 255 255 / .5);--sh2-tabhov:rgb(255 255 255 / .6)}
/* ★★ his 10-25 night: EVERY PANEL ONE COLOUR, DARKER (the mockup's "Darker"): the sidebar, the tab row, the bar and
   Statistics' panels, the raised parts darker with them; the field is the page's own colour ("almost the same colour
   as the background"). The dark theme only: Glass and Midnight keep their own panels, light keeps its own. */
:root:not([data-theme="light"]).sh2 body:not(.xt-glass):not(.xt-midnight){--sh2-card:#111620;--sh2-join:rgb(27 32 42);--sh2-tabhov:#1c2430;
  --sh2-lift:linear-gradient(#1f2737,#171e2a);--sh2-home:#222b3b;--sh2-field:#0a0e18}
:root:not([data-theme="light"]).sh2 body:not(.xt-glass):not(.xt-midnight) #st2,
:root:not([data-theme="light"]).sh2 body:not(.xt-glass):not(.xt-midnight) #st2w{--card:#111620;--card2:#161c27;--lift1:#1f2737;--lift2:#171e2a;--pop:#1a2130}
/* the light layer on (Appearance): the panels keep their soft blue under-glow */
html.sh2[data-bg-light="on"]{--sh2-cardsh:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(255,255,255,.04),0 2px 6px rgba(0,0,0,.35),0 22px 44px -14px rgba(0,0,0,.85),0 46px 80px -46px rgba(59,130,246,.5)}
.sh2tabs,.sh2nav,.sh2field,.sh2barbg,.sh2brand,#sh2blank,#sh2fold{display:none}

@media (min-width:901px) and (min-height:701px){
  /* ---- the frame: the sidebar floats on the left, the bar and the page in the column beside it ---- */
  html.sh2 #app{padding:16px 16px 0 280px;box-sizing:border-box}
  html.sh2 #app #sideBar{position:fixed;left:16px;top:16px;bottom:16px;width:248px;z-index:4;padding:0 8px 8px;border:0;border-radius:20px;
    background:linear-gradient(180deg,rgb(255 255 255 / .043),transparent 80px),var(--sh2-card);box-shadow:var(--sh2-cardsh)}
  /* the page lines up with the bar's edges; its own 11px stays as room for the panels' shadows */
  html.sh2 #app main{margin:0 -11px;padding-bottom:16px}
  /* Statistics fills the page column, as in the mockup */
  html.sh2 #app main > section#stats{padding-left:0;padding-right:0}
  html.sh2 #app #statsPanel{max-width:none}
  /* ---- the sidebar ---- */
  html.sh2 .sh2brand{display:flex;align-items:center;justify-content:center;height:64px;flex:none;margin-bottom:4px;cursor:pointer;border-radius:14px}
  html.sh2 .sh2brand .brandwm{height:32px!important;width:auto;display:block;max-width:none}
  html.sh2 #app #sideBar .wswrap{display:none}
  /* his 10-25 night: the step from the wordmark to MENU: a little more room, and the menu fades out at its edges as it
     scrolls instead of being cut off under the wordmark */
  html.sh2 #app #sideBar .sh2brand{margin-bottom:6px}
  html.sh2 #app #sideBar .sidescroll{padding-top:10px;padding-bottom:12px;
    -webkit-mask-image:linear-gradient(transparent 0,#000 10px,#000 calc(100% - 12px),transparent 100%);mask-image:linear-gradient(transparent 0,#000 10px,#000 calc(100% - 12px),transparent 100%)}
  html.sh2 #app #sideBar .tab{transition:background-color .15s,color .15s,box-shadow .15s}
  html.sh2 #app #sideBar nav .tab.active{background:var(--sh2-lift);box-shadow:var(--sh2-liftsh);color:var(--sh2-fg);border-radius:12px}
  html.sh2 #app #sideBar nav .tab.active .ic{color:var(--sh2-ac)}
  html.sh2 #app #sideBar .shiftpill{min-height:46px;border-radius:13px;font-size:14.5px;padding:0 14px}
  /* Support, On shift and the account row: the same 8px between each (his 10-25 night: "bring them closer") */
  html.sh2 #app #sideBar #sideShift{margin-top:8px}
  html.sh2 #app #sideBar .acctrow{min-height:58px;border-radius:14px;background:var(--sh2-lift);box-shadow:var(--sh2-liftsh);transition:transform .15s,box-shadow .15s}
  html.sh2 #app #sideBar .acctrow:hover{transform:translateY(-1px);box-shadow:var(--sh2-liftsh2)}
  /* ---- the block over the page: a row of tabs, joined to the bar under it ---- */
  html.sh2 #app > .top{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:46px 60px;row-gap:0;column-gap:14px;height:auto;transition:grid-template-rows .24s ease;
    padding:0;margin:0 0 16px;border:0;background:none;box-shadow:none;position:relative;z-index:3}
  html.sh2 #app > .top::after{display:none!important}
  html.sh2 #app > .top > .tbleft,html.sh2 #app > .top > .tblogo{display:none!important}
  html.sh2 .sh2barbg{display:block;grid-column:1/-1;grid-row:2;align-self:stretch;justify-self:stretch;border-radius:0 0 20px 20px;background:linear-gradient(180deg,var(--sh2-join),transparent 80px),var(--sh2-card);
    box-shadow:0 2px 6px rgba(0,0,0,.35),0 22px 44px -14px rgba(0,0,0,.85)}
  html.sh2[data-bg-light="on"] .sh2barbg{box-shadow:0 2px 6px rgba(0,0,0,.35),0 22px 44px -14px rgba(0,0,0,.85),0 46px 80px -46px rgba(59,130,246,.5)}
  html.sh2 #app > .top > .tbright{grid-column:3;grid-row:2;align-self:center;margin-right:12px;position:relative;z-index:1;gap:6px}
  /* the tab row: its own band (the panels' colour), the staff app's tabs on it */
  html.sh2 .sh2tabs{display:flex;grid-column:1/-1;grid-row:1;align-self:stretch;align-items:flex-end;height:46px;padding:8px 10px 0;border-radius:20px 20px 0 0;user-select:none;min-width:0;
    background:linear-gradient(180deg,rgb(255 255 255 / .03),transparent 46px),var(--sh2-card);box-shadow:inset 0 1px 0 rgba(255,255,255,.055)}
  html.sh2 #sh2home{flex:none;display:grid;place-items:center;width:36px;height:32px;margin:0 0 6px;border:0;border-radius:9px;background:var(--sh2-home);color:var(--sh2-mid);cursor:pointer;transition:background-color .12s,color .12s,transform .12s}
  html.sh2 #sh2home:hover{background:rgb(59 130 246 / .22);color:#8fb8ff} html.sh2 #sh2home:active{transform:scale(.94)}
  html.sh2 #sh2home svg{width:18px;height:18px;fill:currentColor}
  html.sh2 #sh2tl{flex:1;min-width:0;display:flex;align-items:flex-end;height:100%;padding:0 0 0 7px}
  html.sh2 .sh2tab{position:relative;display:flex;align-items:center;gap:8px;flex:0 1 224px;min-width:76px;height:32px;margin:0 3px 6px;padding:0 6px 0 10px;border-radius:9px;
    color:var(--sh2-mid);font-size:13px;font-weight:600;white-space:nowrap;touch-action:none;cursor:pointer;
    transition:background-color .12s,color .12s}
  html.sh2 #sh2tl.regrow .sh2tab{transition:background-color .12s,color .12s,flex-basis .24s ease,min-width .24s ease,padding .24s ease}
  html.sh2 .sh2tab .ic{flex:none;width:16px;height:16px;display:grid;place-items:center;color:var(--sh2-mid)}
  html.sh2 .sh2tab .ic svg{width:16px;height:16px;fill:currentColor} html.sh2 .sh2tab .ic svg .p{opacity:.45}
  html.sh2 .sh2tab .ic img{width:14px;height:14px;object-fit:contain}
  html.sh2 .sh2tab .tn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:left}
  html.sh2 .sh2tab .x{flex:none;display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:none;color:var(--sh2-dim);cursor:pointer;transition:background-color .12s,color .12s}
  html.sh2 .sh2tab .x:hover{background:var(--sh2-hov);color:var(--sh2-fg)}
  html.sh2 .sh2tab .x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round}
  html.sh2 .sh2tab:not(.on):hover{background:var(--sh2-tabhov);color:var(--sh2-fg)}
  html.sh2 .sh2tab::before{content:"";position:absolute;left:-3.5px;top:7px;bottom:7px;width:1px;background:var(--sh2-sep);transition:opacity .15s}
  html.sh2 .sh2tab:first-child::before,html.sh2 .sh2tab.on::before,html.sh2 .sh2tab.on + .sh2tab::before,html.sh2 .sh2tab:hover::before,html.sh2 .sh2tab:hover + .sh2tab::before,
  html.sh2 .sh2tab.drag::before,html.sh2 .sh2tab.drag + .sh2tab::before{opacity:0}
  html.sh2 .sh2tab.on{height:38px;margin-bottom:0;padding-bottom:6px;border-radius:12px 12px 0 0;min-width:150px;background:var(--sh2-join);color:var(--sh2-fg)}
  html.sh2 .sh2tab.on .ic{color:var(--sh2-ac)}
  html.sh2 .sh2tab.on::after{content:"";position:absolute;left:-14px;right:-14px;bottom:0;height:14px;pointer-events:none;
    background:radial-gradient(circle at 0 0,transparent 13px,var(--sh2-join) 14px) left / 14px 14px no-repeat,radial-gradient(circle at 100% 0,transparent 13px,var(--sh2-join) 14px) right / 14px 14px no-repeat}
  html.sh2 .sh2tab.drag{z-index:5;cursor:grabbing;pointer-events:none;transition:none}
  html.sh2 .sh2tab.drag:not(.on){background:var(--sh2-tabhov);color:var(--sh2-fg)}
  html.sh2 .sh2tab.slide{transition:transform .16s ease,background-color .12s,color .12s}
  html.sh2 .sh2tab.new{animation:sh2In .2s ease-out}
  html.sh2 .sh2tab.bye{animation:sh2Out .16s ease-in forwards;pointer-events:none}
  html.sh2 #sh2tl.regrow:not(.mini) .sh2tab .tn{animation:sh2Fade .24s ease}
  @keyframes sh2In{from{max-width:0;min-width:0;padding-left:0;padding-right:0;opacity:0}to{max-width:224px;opacity:1}}
  @keyframes sh2Out{from{max-width:var(--w,180px);opacity:1}to{max-width:0;min-width:0;padding-left:0;padding-right:0;margin-left:0;margin-right:0;opacity:0}}
  @keyframes sh2Fade{from{opacity:0}}
  /* crowded: icons only (Chrome's squeeze), the open one keeps its x */
  html.sh2 #sh2tl.mini .sh2tab:not(.on){min-width:30px;padding:0 4px;gap:0;justify-content:center}
  html.sh2 #sh2tl.mini .sh2tab .tn{display:none} html.sh2 #sh2tl.mini .sh2tab:not(.on) .x{display:none}
  html.sh2 #sh2tl.mini .sh2tab.on .ic{display:none} html.sh2 #sh2tl.mini .sh2tab.on{min-width:30px;justify-content:center;padding:0 4px 6px}
  html.sh2 #sh2plus{position:relative;flex:none;display:grid;place-items:center;width:30px;height:30px;margin:0 0 7px 7px;border:0;border-radius:50%;background:none;color:var(--sh2-mid);cursor:pointer;transition:background-color .12s,color .12s}
  html.sh2 #sh2plus:hover{background:var(--sh2-tabhov);color:var(--sh2-fg)}
  html.sh2 #sh2plus svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round}
  html.sh2 #sh2plus::before{content:"";position:absolute;left:-5px;top:7px;bottom:7px;width:1px;background:var(--sh2-sep);transition:opacity .15s}
  html.sh2 .sh2tab.on + #sh2plus::before,html.sh2 .sh2tab:hover + #sh2plus::before,html.sh2 #sh2tl > #sh2plus:first-child::before{opacity:0}
  /* hide the tabs (his 10-25): the row folds away, the bar stays, rounded all round like the home page's; Home moves
     into the bar. The button sits at the bar's right end, always in the same place. */
  /* folding: the row keeps its height and slides down BEHIND the bar while it fades (it used to squash in the shrinking
     row: the glitch he saw); the bar rises with it and rounds its corners */
  /* ★ his 10-25 night: it OPENS like a drawer instead of fading in "out of nowhere": the tab row stays where it is, at
     the top, and the bar slides down off it (and back up over it to close); nothing fades. Home slides into the bar. */
  html.sh2 .sh2tabs{position:relative;z-index:0;align-self:start!important;height:46px}
  html.sh2 .sh2barbg{position:relative;z-index:1;transition:border-radius .3s cubic-bezier(.3,.7,.3,1)}
  html.sh2 .sh2nav,html.sh2 .sh2field,html.sh2 #app > .top > .tbright{z-index:2!important}
  html.sh2 #app > .top{transition:grid-template-rows .3s cubic-bezier(.3,.7,.3,1)!important}
  html.sh2.sh2fold #app > .top{grid-template-rows:0px 60px}
  html.sh2.sh2fold .sh2tabs{pointer-events:none}
  html.sh2.sh2fold .sh2barbg{border-radius:20px}
  /* Glass: the bar is see-through, so there the row also fades as the bar covers it */
  html.sh2 body.xt-glass .sh2tabs{transition:opacity .25s ease} html.sh2.sh2fold body.xt-glass .sh2tabs{opacity:0}
  html.sh2 #sh2home2{display:grid;width:0;margin-right:-4px;opacity:0;overflow:hidden;pointer-events:none;
    transition:width .3s cubic-bezier(.3,.7,.3,1),margin .3s cubic-bezier(.3,.7,.3,1),opacity .2s ease,background-color .15s,color .15s}
  html.sh2.sh2fold #sh2home2{width:38px;margin-right:0;opacity:1;pointer-events:auto}
  html.sh2 #sh2fold{display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:11px;background:none;color:var(--sh2-mid);cursor:pointer;transition:background-color .15s,color .15s}
  html.sh2 #sh2fold:hover{background:var(--sh2-hov);color:var(--sh2-fg)}
  html.sh2 #sh2fold svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .24s ease}
  html.sh2.sh2fold #sh2fold svg{transform:rotate(180deg)}
  /* the bar: back, forward, refresh | the field | Connection, Undo, notifications */
  html.sh2 .sh2nav{display:flex;grid-column:1;grid-row:2;align-items:center;gap:4px;margin-left:12px;position:relative;z-index:1}
  html.sh2 .sh2nav button{display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:11px;background:none;color:var(--sh2-mid);cursor:pointer;transition:background-color .15s,color .15s,transform .12s}
  html.sh2 .sh2nav button:hover:not(:disabled){background:var(--sh2-hov);color:var(--sh2-fg)}
  html.sh2 .sh2nav button:disabled{opacity:.3;cursor:default}
  html.sh2 .sh2nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
  html.sh2 #sh2bk:active:not(:disabled){transform:translateX(-2px)} html.sh2 #sh2fw:active:not(:disabled){transform:translateX(2px)}
  html.sh2 #sh2rf.spin svg{animation:sh2Spin .55s cubic-bezier(.3,.7,.3,1)}
  @keyframes sh2Spin{to{transform:rotate(360deg)}}
  /* ★ his 10-26: a thin line before the back arrow, after Home when the tabs are folded away and after the fold
     arrow when they are open (the line that sat on the right, between Undo and the bell, is gone) */
  html.sh2 .sh2nav #sh2bk{position:relative;margin-left:9px}
  html.sh2 .sh2nav #sh2bk::before{content:"";position:absolute;left:-7px;top:9px;bottom:9px;width:1px;background:var(--sh2-sep);pointer-events:none}
  html.sh2 #app > .top > .tbright .tbdiv{display:none!important}
  /* ★ his 10-26 ("two highlights in the search bar"): the field has the one blue ring; the app's own input focus
     style never reaches the text box inside it */
  html.sh2 #sh2in,html.sh2 #sh2in:focus,html.sh2 #sh2in:focus-visible{outline:0!important;box-shadow:none!important;border:0!important;border-radius:0!important;background:none!important}
  html.sh2 .sh2field:focus-visible,html.sh2 .sh2nav button:focus-visible,html.sh2 #sh2fold:focus-visible{outline:0}
  html.sh2 .sh2field{display:flex;grid-column:2;grid-row:2;align-self:center;position:relative;z-index:1;height:40px;align-items:center;gap:10px;padding:0 10px 0 14px;border-radius:13px;min-width:0;cursor:text;
    background:var(--sh2-field);box-shadow:inset 0 1px 3px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.045);transition:box-shadow .18s}
  html.sh2 .sh2field > svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--sh2-dim);stroke-width:2.7;stroke-linecap:round}
  html.sh2 .sh2path{flex:1;display:flex;align-items:baseline;gap:9px;min-width:0;font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;color:var(--sh2-dim);user-select:none}
  html.sh2 .sh2path .sl{color:var(--sh2-slash);font-weight:500}
  html.sh2 .sh2path button{padding:0;border:0;background:none;font:inherit;color:var(--sh2-dim);cursor:pointer;transition:color .15s}
  html.sh2 .sh2path button:hover{color:var(--sh2-fg)}
  html.sh2 .sh2path b{color:var(--sh2-fg);font-weight:650;overflow:hidden;text-overflow:ellipsis}
  html.sh2 .sh2path .ph0{color:var(--sh2-dim);font-weight:500}
  html.sh2 #sh2in{display:none;flex:1;min-width:0;height:100%;border:0;outline:0;background:none;color:var(--sh2-fg);font:500 13.5px "Cascadia Mono","Cascadia Code",Consolas,ui-monospace,monospace;caret-color:var(--sh2-ac)}
  html.sh2 #sh2in::placeholder{color:var(--sh2-dim)} html.sh2 #sh2in::selection{background:rgba(59,130,246,.5)}
  html.sh2 .sh2field.ed{box-shadow:inset 0 1px 3px rgba(0,0,0,.6),0 0 0 1.5px #3b82f6}
  html.sh2 .sh2field.ed .sh2path{display:none} html.sh2 .sh2field.ed #sh2in{display:block}
  html.sh2 .sh2field.no{animation:sh2No .32s ease}
  @keyframes sh2No{20%{transform:translateX(-5px)}45%{transform:translateX(5px)}70%{transform:translateX(-3px)}}
  /* a new tab: blank until you pick a page */
  html.sh2 #sh2blank.active{display:grid;place-items:center;min-height:calc(100vh - 160px);color:var(--sh2-dim);font-size:13.5px}
  /* Statistics: a page (a dish, a table...) keeps its own title, the back arrow and its name (his 10-26) */
  html.sh2 #st2 .ttl8 > .crumb36 + .mseg{margin-left:auto}
  /* refresh: the page fades back in */
  html.sh2 main section.sh2re{animation:sh2Fade .25s ease}
  /* a short message */
  html.sh2 .sh2toast{position:fixed;left:50%;bottom:28px;z-index:9000;transform:translate(-50%,12px);opacity:0;padding:11px 16px;border-radius:13px;font-size:13.5px;font-weight:600;color:var(--sh2-fg);
    background:var(--sh2-lift);box-shadow:var(--sh2-liftsh2);transition:opacity .18s,transform .18s;pointer-events:none}
  html.sh2 .sh2toast.on{opacity:1;transform:translate(-50%,0)}
}

/* the light layer off (Appearance; plain is the default since 2026-10-25): no blue under the Statistics panels either */
html[data-bg-light="off"] #st2 .card,html[data-bg-light="off"] #st2 .hdr{box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(255,255,255,.04),0 2px 6px rgba(0,0,0,.35),0 22px 44px -14px rgba(0,0,0,.85)}
:root[data-theme="light"][data-bg-light="off"] #st2 .card,:root[data-theme="light"][data-bg-light="off"] #st2 .hdr{box-shadow:0 1px 2px rgba(24,42,76,.06),0 8px 20px rgba(24,42,76,.07),inset 0 0 0 1px rgb(20 32 56 / .05)}

/* ★★ 2026-10-25 THE PHONE (his mockup's phone): the bar on top and the tab bar at the bottom FLOAT as cards; the open
   tab raised like the Money tab, its icon blue; no dividers between the tabs. Same elements, same handlers. */
@media (max-width:600px){
  html.sh2 #app > .top{margin:10px 10px 0;height:58px;border:0;border-radius:18px;padding:0 6px 0 16px;
    background:linear-gradient(180deg,rgb(255 255 255 / .043),transparent 58px),var(--sh2-card);box-shadow:var(--sh2-cardsh)}
  html.sh2 #app > .top .tblogo .brandwm{height:20px}
  html.sh2 #app main{padding-top:12px;padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  /* ★ his 10-26: the tab bar sits ON the bottom edge, full width (it floated with a gap under it); round top corners only */
  html.sh2 #app nav{left:0;right:0;bottom:0;padding:6px 8px calc(6px + env(safe-area-inset-bottom));gap:2px;border:0;border-radius:22px 22px 0 0;
    background:linear-gradient(180deg,rgb(255 255 255 / .043),transparent 66px),var(--sh2-card);box-shadow:inset 0 1px 0 rgb(255 255 255 / .06),0 -12px 32px -14px rgba(0,0,0,.8)}
  /* ★ his 10-26: no scrollbars on the phone (people swipe); one also pushed the page off centre */
  html.sh2,html.sh2 *{scrollbar-width:none}
  html.sh2::-webkit-scrollbar,html.sh2 *::-webkit-scrollbar{display:none;width:0;height:0}
  html.sh2 #app nav .tab,html.sh2 #app nav .tab + .tab,html.sh2 #app nav .tab + .tab.active{border-left:none!important}
  html.sh2 #app nav .tab{min-height:54px;border-radius:16px;transition:background-color .15s,color .15s,box-shadow .15s}
  html.sh2 #app nav .tab.active{background:var(--sh2-lift);box-shadow:var(--sh2-liftsh);color:var(--sh2-fg)}
  html.sh2 #app nav .tab.active .ic{color:var(--sh2-ac)}
}

/* ★★ 2026-10-25 THE HOME PAGE in the same shell: the floating sidebar with the wordmark, a floating bar over the page
   (where you are: Home page; the plan and Alerts on the right). No tabs: tabs belong to a workspace. */
@media (min-width:901px) and (min-height:701px){
  html.sh2 #hub{padding:16px 16px 0 280px;box-sizing:border-box}
  html.sh2 #hub .side{position:fixed;left:16px;top:16px;bottom:16px;width:248px;z-index:4;padding:0 8px 8px;border:0;border-radius:20px;
    background:linear-gradient(180deg,rgb(255 255 255 / .043),transparent 80px),var(--sh2-card);box-shadow:var(--sh2-cardsh)}
  /* Workspaces is the home page's one page, so it is always the one you are on (the app's tab handler clears .active) */
  html.sh2 #hub .side .tab.active,html.sh2 #hub #hubWsTab{background:var(--sh2-lift);box-shadow:var(--sh2-liftsh);color:var(--sh2-fg);border-radius:12px}
  html.sh2 #hub .side .tab.active .ic,html.sh2 #hub #hubWsTab .ic{color:var(--sh2-ac)}
  html.sh2 #hub .side .acctrow{min-height:58px;border-radius:14px;background:var(--sh2-lift);box-shadow:var(--sh2-liftsh);transition:transform .15s,box-shadow .15s}
  html.sh2 #hub .side .acctrow:hover{transform:translateY(-1px);box-shadow:var(--sh2-liftsh2)}
  html.sh2 #hub > .top{display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:60px;height:60px;column-gap:14px;padding:0 12px 0 24px;margin:0 0 16px;border:0;border-radius:20px;
    background:linear-gradient(180deg,var(--sh2-join),transparent 80px),var(--sh2-card);box-shadow:0 2px 6px rgba(0,0,0,.35),0 22px 44px -14px rgba(0,0,0,.85);position:relative;z-index:3}
  html.sh2[data-bg-light="on"] #hub > .top{box-shadow:0 2px 6px rgba(0,0,0,.35),0 22px 44px -14px rgba(0,0,0,.85),0 46px 80px -46px rgba(59,130,246,.5)}
  html.sh2 #hub > .top::after{display:none!important}
  html.sh2 #hub > .top > .tblogo,html.sh2 #hub #hubSideToggle,html.sh2 #hub #hubHomeIc,html.sh2 #hub #hubGear,html.sh2 #hub > .top .wsdiv{display:none!important}
  html.sh2 #hub > .top .wslabel{grid-column:1;grid-row:1;align-self:center;padding-left:0;font-size:15.5px;font-weight:650;color:var(--sh2-fg)}
  html.sh2 #hub > .top > .tbright{grid-column:2;grid-row:1;align-self:center}
}
@media (max-width:600px){
  html.sh2 #hub > .top{margin:10px 10px 0;height:58px;border:0;border-radius:18px;padding:0 6px 0 16px;
    background:linear-gradient(180deg,rgb(255 255 255 / .043),transparent 58px),var(--sh2-card);box-shadow:var(--sh2-cardsh)}
  html.sh2 #hub > .top .tblogo .brandwm{height:20px}
}

/* the page fades in at its top edge where it scrolls under the bar, instead of being cut there (his 10-25) */
@media (min-width:901px) and (min-height:701px){ html.sh2 #app main{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12px);mask-image:linear-gradient(to bottom,transparent 0,#000 12px)} }
@media (max-width:600px){ html.sh2 #app main{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12px);mask-image:linear-gradient(to bottom,transparent 0,#000 12px)} }