/* ============================================================
   NICK YOUNG - BRAND LAYER
   Loaded after styles.css. Holds brand corrections that apply
   across every room, so the rooms themselves stay untouched.
   Source: Official Brand Guidelines, Dentsu Creative, 19.12.25.
   Roll back by removing the link tag in index.html.
   ============================================================ */

/* --- 1. Sharp corners always. Brand rule, no exceptions. ---
   Uses !important so it also corrects rooms that set radius inline. */
*, *::before, *::after{ border-radius:0 !important; }

/* --- 2. Left rail, per the agreed nav design --- */
.side{
  flex:0 0 236px;
  display:flex; flex-direction:column;
  background:var(--yellow); border-right:3px solid var(--black);
}

/* Wordmark sitting in the yellow (markup added in a later step). */
.side-head{ flex:0 0 auto; padding:26px 20px 24px; }
.side-head .wordmark{
  display:block; padding:0; font-family:var(--display); font-weight:700;
  font-size:23px; letter-spacing:.5px; text-transform:uppercase; color:var(--black);
}

.nav{
  display:flex; flex-direction:column; gap:2px;
  padding:14px 10px 18px;
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
}
.nav::-webkit-scrollbar{ width:8px; }
.nav::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.35); }
.nav::-webkit-scrollbar-track{ background:transparent; }

/* Group headings: quiet, tracked, no rules or borders. */
.navgroup{
  padding:16px 10px 6px; border:none;
  font-family:var(--display); font-weight:700; font-size:9.5px;
  letter-spacing:2.2px; text-transform:uppercase; color:rgba(0,0,0,.45);
  user-select:none;
}
.nav .navgroup:first-child{ padding-top:2px; }

/* Nav rows: inset blocks, no dividers, no shifting on hover. */
.navbtn, .navbtn.sub, .navbtn.top{
  display:block; width:100%; text-align:left;
  background:transparent; border:none;
  color:var(--black); cursor:pointer; position:relative;
  font-family:var(--display); font-weight:600; font-size:13px;
  letter-spacing:1.6px; text-transform:uppercase;
  padding:13px 14px;
  transition:background .12s var(--snap), color .12s var(--snap);
}
.navbtn.sub{ font-size:12.5px; }
.nav .navbtn:first-child{ border-top:none; }
.navbtn:hover, .navbtn.sub:hover{ background:rgba(0,0,0,.10); padding-left:14px; }
.navbtn.on, .navbtn.sub.on{ background:var(--black); color:var(--yellow); padding-left:14px; }

/* Active marker: a small yellow square on the right, not a left bar. */
.navbtn.on::after{
  content:""; position:absolute;
  left:auto; right:12px; top:50%; bottom:auto;
  transform:translateY(-50%);
  width:7px; height:7px; background:var(--yellow);
}

/* --- 3. Rail footer: who you are, and the way out --- */
.side-foot{
  flex:0 0 auto;
  background:var(--paper); border-top:3px solid var(--black);
  padding:16px 14px 14px;
  font-family:var(--display); color:var(--black);
  font-size:12px; letter-spacing:1.6px; text-transform:uppercase;
}
.side-foot .who{ font-weight:700; line-height:1.25; color:var(--black); }
.side-foot .role{
  margin-top:2px; font-weight:500; font-size:11px;
  letter-spacing:1.6px; color:var(--muted);
}
.side-foot .logout{
  display:block; width:100%; margin-top:12px;
  text-align:left; cursor:pointer; border:none;
  background:var(--black); color:var(--yellow);
  font-family:var(--display); font-weight:700; font-size:12px;
  letter-spacing:1.8px; text-transform:uppercase; padding:13px 14px;
}
.side-foot .logout:hover{ background:#141414; }

/* --- 4. Narrow screens: the rail becomes a top strip --- */
@media(max-width:940px){
  .side{ flex-direction:row; align-items:center; border-right:none; border-bottom:3px solid var(--black); overflow:hidden; }
  .side-head{ padding:14px 16px; }
  .side-head .wordmark{ font-size:17px; }
  .nav{ flex-direction:row; gap:0; padding:0; overflow-x:auto; overflow-y:hidden; flex:1; }
  .navgroup{ display:none; }
  .navbtn, .navbtn.sub{ white-space:nowrap; padding:16px 14px; font-size:12px; }
  .navbtn:hover, .navbtn.sub:hover, .navbtn.on, .navbtn.sub.on{ padding-left:14px; }
  .navbtn.on::after{ display:none; }
  .side-foot{ display:none; }
}

/* --- 5. The rail owns the top edge --- */
/* These rules only bite once index.html carries the .side-head markup,
   so this stylesheet can ship ahead of the markup with no interim wobble. */
body:has(.side-head) header{ display:none; }
body:has(.side-head) .side{ top:0; height:100vh; }

.side-head .wordmark small{
  display:block; margin-top:7px;
  font-family:var(--display); font-weight:600; font-size:10px;
  letter-spacing:2.5px; text-transform:uppercase; color:rgba(0,0,0,.55);
  background:transparent; padding:0; margin-left:0; transform:none;
}

/* Footer identity. brand.js turns the sign-in email into a readable name. */
.side-foot .who{ overflow-wrap:anywhere; }

/* --- 6. Retire the stepped strip that sat under the old header --- */
/* It was a device for the header band. With the header gone it just
   sits on top of the working area, so it is hidden rather than deleted. */
body:has(.side-head) #appView > .notch{ display:none; }