/* One side panel for every page. The look comes from Tilly's panel: same deep green, same fonts, same
   sizes. Width is 448px on wide screens, the same as Tilly's dashboard and time tracker. Loaded after
   common.css on the hub pages, so it wins over the older hub panel styles. */

.side{
  --pn-muted:#CFE0D6; --pn-line:rgba(255,255,255,.22); --pn-fill:rgba(255,255,255,.1); --pn-active:rgba(255,255,255,.16);
  width:var(--side); background:#183D32; color:#fff; border-right:0;
  padding:22px 14px 18px; gap:20px; font-family:var(--font-body); font-size:1rem;
}

/* top link */
.backlink{display:inline-block; margin:0 0 -6px 6px; font-size:.85rem; font-weight:700; color:#fff; text-decoration:none}
.backlink:hover,.backlink:focus-visible{text-decoration:underline}

/* brand box: face or logo, name, subtitle */
.side-brand,.logo{display:flex; align-items:center; gap:12px; padding:12px; border-radius:14px; background:var(--pn-fill)}
.pface{flex:none; width:52px; height:52px; border-radius:50%; background:#FFF9F4; overflow:hidden; display:block}
.pface svg{display:block; width:100%; height:auto; transform:scale(1.15); transform-origin:50% 30%}
.side-name,.logo b{display:block; font-family:var(--font-display); font-weight:400; font-size:1.35rem; line-height:1.1; color:#fff}
.side-sub,.logo span{display:block; font:400 .8rem var(--font-body); letter-spacing:0; text-transform:none; opacity:1; color:var(--pn-muted)}
.logo{padding:12px}
.logo i{width:52px; height:52px; border-radius:50%; font-size:28px}

/* clock box */
.clockbox{background:var(--pn-fill); border-radius:14px; padding:12px 14px; text-align:center}
.clock-time{font-family:var(--font-display); font-size:2rem; line-height:1.1; color:#fff; font-variant-numeric:tabular-nums}
.clock-date{font-size:.95rem; color:#fff}
.clock-label{display:flex; align-items:center; justify-content:center; gap:8px; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--pn-muted); margin-top:2px}
.clock-label i{width:9px; height:9px; border-radius:50%; background:#F2678E; animation:pnpulse 2s ease-in-out infinite}
@keyframes pnpulse{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.5; transform:scale(.8)}}

/* menu rows: the same on every page */
.side-nav ul{list-style:none; margin:0; padding:0; display:grid; gap:4px}
.nav-link,.nav{display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:11px 12px 11px 14px; border:0; border-left:4px solid transparent; border-radius:10px; background:transparent; color:#fff; font:500 1rem var(--font-body); text-align:left; text-decoration:none; cursor:pointer}
.nav-link:hover,.nav:hover,.nav-link:focus-visible,.nav:focus-visible{background:rgba(255,255,255,.12)}
.nav-link.is-active,.nav[aria-current="page"]{background:var(--pn-active); border-left-color:#F2678E; color:#fff; font-weight:700}
.nav-link span,.nav .tx{min-width:0}
.chev{width:8px; height:8px; flex:none; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(45deg); transition:transform .2s ease; margin-right:4px}
.nav-toggle[aria-expanded="true"] .chev{transform:rotate(-135deg)}
.sub{list-style:none; margin:2px 0 6px 18px; padding:0 0 0 10px; border-left:2px solid var(--pn-line); display:grid; gap:2px}
.sub[hidden]{display:none}
.sub a,.sub .soon{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border-radius:8px; color:#fff; text-decoration:none; font-size:.95rem; overflow-wrap:anywhere}
.sub a:hover,.sub a:focus-visible{background:rgba(255,255,255,.12)}
.sub .soon{color:var(--pn-muted)}
.sub small{font-size:.75rem; color:var(--pn-muted)}
.sub .codes a{flex-direction:column; align-items:flex-start; gap:0}
.sub .codes b{font-weight:700; font-size:.95rem; letter-spacing:.04em}
.sub-note{padding:8px 10px; font-size:.9rem; color:var(--pn-muted)}

/* headings and facts */
.side-h,.grp{font-family:var(--font-body); font-size:.8rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--pn-muted); opacity:1; padding:0 6px; margin:0}
.grp{padding:14px 10px 4px}
.facts{display:grid; gap:12px; padding:0 6px}
.facts p{display:grid; gap:2px; margin:0}
.facts .k{font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--pn-muted)}
.facts .v{font-size:.95rem; font-weight:500; color:#fff}

/* people menu and view switch (home and the coming soon pages) */
.seg{border-color:var(--pn-line); margin:0}
.seg button{font:500 .95rem var(--font-body)}
.seg button[aria-pressed="true"]{background:#FFF9F4; color:#183D32}
.nav{padding:8px 12px 8px 14px; justify-content:flex-start}
.nav small{margin-left:auto}
.nav .mini{width:44px; height:44px; background:#FFF9F4}
.nav .tx b{font-weight:inherit; font-size:1rem}
.nav .tx span{font-size:.8rem; opacity:1; color:var(--pn-muted)}
.nav small{font:700 .7rem var(--font-body); letter-spacing:.08em; opacity:1; color:var(--pn-muted)}
.nav[aria-current="page"] .tx span{color:var(--pn-muted)}

/* sign out style link and the footer */
.side-link{align-self:flex-start; margin-left:6px; padding:0; border:0; background:none; color:#fff; font:500 1rem var(--font-body); text-decoration:underline; text-decoration-color:#F2678E; text-decoration-thickness:2px; text-underline-offset:4px; cursor:pointer}
.side-link:hover{text-decoration-color:#fff}
.side-foot{margin:auto 0 0; padding-top:16px; border-top:1px solid rgba(255,255,255,.18); text-align:center; font-family:var(--font-display); font-size:1.15rem; color:#fff; opacity:.9}

/* wide screens: the panel stays put; below that it opens from the Menu button, as before */
@media (max-width:1280px){
  .side{width:auto}
}
@media (prefers-reduced-motion: reduce){
  .chev{transition:none} .clock-label i{animation:none}
}

/* Header bar on every team page: Bliss Studio Business Hub, then the page. Sticks to the top. */
:root{--hh:60px}
.site-header{position:sticky; top:0; z-index:45; height:var(--hh); box-sizing:border-box; display:flex; align-items:center; margin:-26px -28px 22px; padding:0 28px; background:#183D32; border-bottom:3px solid #F2678E; color:#fff}
.site-header .sh-in{width:100%; max-width:1300px; margin:0 auto; min-width:0}
.site-title{margin:0; font:400 clamp(1.05rem,3.6vw,1.5rem)/1.2 var(--font-display); letter-spacing:.01em; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.site-title .sep{margin:0 .35em; color:#F2678E}
@media (max-width:1280px){ .site-header{margin:-26px -16px 18px; padding:0 16px} }
@media (max-width:520px){ .site-title{white-space:normal; font-size:1rem; line-height:1.15} }

/* Icons in menu rows, status light, and people with faces */
.nl{display:flex; align-items:center; gap:12px; min-width:0}
.nav-link .ic{width:1.35em; height:1.35em}
.grp .ic{width:1.15em; height:1.15em; margin-right:8px; vertical-align:-3px}
.led{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:9px; background:#A5ADA7; vertical-align:0}
.led.green{background:#4ADE80; box-shadow:0 0 0 3px rgba(74,222,128,.28)}
.led.amber{background:#F6C453; box-shadow:0 0 0 3px rgba(246,196,83,.28)}
.led.red{background:#FF6B86; box-shadow:0 0 0 3px rgba(255,107,134,.28)}
.sub .prow{gap:10px; padding:6px 8px; justify-content:flex-start}
.pav{flex:none; width:38px; height:38px; border-radius:50%; background:#FFF9F4; overflow:hidden; display:block}
.pav svg{display:block; width:100%; height:100%}
.pt{display:flex; flex-direction:column; min-width:0; line-height:1.25}
.pt b{font-weight:500; font-size:.95rem; color:#fff}
.pt small{font-size:.75rem; color:var(--pn-muted)}
.prow em{margin-left:auto; font-style:normal; font:700 .7rem var(--font-body); letter-spacing:.08em; text-transform:uppercase; color:var(--pn-muted)}