/* ============================================================
   RadioGrub — base.css
   Reset, page shell, sidebar, header/nav, buttons, .wrap container.
   ============================================================ */

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

.page{
  display:grid;
  grid-template-columns: 88px 1fr;
  min-height:100vh;
}

.sidebar{
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid var(--line2);
  background: var(--surface);
  padding: 14px 10px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.sideIcon{
  width: 52px;
  height: 52px;
  border-radius: 14px;
  border: 1px solid transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: .15s ease;
  color:var(--text);
  position:relative;
}
.sideIcon:hover{
  background: var(--surface2);
  border-color: var(--line);
}
.sideIcon.active{
  background: var(--accentSoft);
  border-color: var(--accentLine);
  color:var(--accentText);
}
.sideIcon svg{ width: 22px; height: 22px; }
.sideLabel{
  font-size: 11px;
  font-weight: 700;
  color: var(--muted2);
  text-align:center;
  margin-top: -6px;
}
.sideGroup{ margin-top: 6px; display:flex; flex-direction:column; gap:8px; }
.sideSpacer{ flex:1; }

.main{
  min-width: 0;
  display:flex;
  flex-direction:column;
}

/* ============================================================
   THE HEADER
   ---------------------------------------------------------------------------
   It was a red gradient bar with eight links set to `flex:1` and centred,
   and three buttons beside them. The links carry `white-space:nowrap`, so
   when the flex container shrank the links did not — they ran straight out
   of it and over the login buttons. Measured before the change: the last
   link's right edge sat 14px past the actions at 1440px and 158px past them
   at 981px. That is the login bar "bleeding into the nav", and it was there
   at every desktop width, worst just before the hamburger took over.

   Now it is a three-column GRID: brand, links, actions. The middle column is
   the only one allowed to give, it cannot overflow (`min-width:0` with the row
   hidden rather than spilling), and there is a real divider and real space
   between the links and the account area so the two read as separate things.
   The hamburger takes over at 1120px — before the links are squeezed, not
   after — and the link set has been cut to the five that earn a place in a
   top bar. The rest live in the drawer, where they are easier to read anyway.

   And it is BLACK now, not red. The logo is a white mark: it was fighting a
   red bar, and on near-black it simply sits there and reads.
   ============================================================ */
header{
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--surfaceGlass);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
/* a hairline of brand red under the header: the only red in the chrome, and
   the thing that stops a black bar on a black page looking like nothing */
header::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background: linear-gradient(90deg, transparent, var(--accent) 22%, var(--accentHot) 50%, var(--accent) 78%, transparent);
  opacity:.55;
  pointer-events:none;
}
.nav{
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px 18px;
  display:grid;
  grid-template-columns: auto minmax(0,1fr) auto;   /* only the middle gives */
  align-items:center;
  gap: 20px;
}

.brand{
  display:flex;
  align-items:center;
  text-decoration:none;
  color: var(--text);
  white-space: nowrap;
}
.brand img{
  /* ---- 96px SQUARE WAS DRIVING A 125px HEADER ----
     The mark is a 360x360 square, so a 96px width is also a 96px height, and
     with the row's padding that made the bar taller than the hero's own
     headline. 56px reads at a glance, leaves the bar at 84px, and gives the
     page back 40px above the fold. The brief asked for the top TIGHTENED. */
  width: 56px;
  height: 56px;
  display:block;
  /* the mark is white already; a whisper of depth lifts it off the black */
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.6));
  transition: transform var(--t2) var(--easeOut);
}
.brand:hover img{ transform: scale(1.04); }

.navLinks{
  display:flex;
  align-items:center;
  gap: 4px;
  justify-content:center;
  min-width: 0;
  overflow: hidden;          /* it clips before it ever crosses the actions */
}
.navLinks a{
  text-decoration:none;
  color: var(--muted);
  font-weight: 750;
  font-size: 14px;
  letter-spacing:-.01em;
  padding: 9px 13px;
  border-radius: 10px;
  transition: color var(--t1) var(--ease), background var(--t1) var(--ease);
  white-space: nowrap;
  position:relative;
}
.navLinks a:hover{
  background: var(--surface2);
  color: var(--text);
}
/* the current page is marked in red, underneath, where it cannot be mistaken
   for a button */
.navLinks a.cur{ color: var(--text); }
.navLinks a.cur::after{
  content:""; position:absolute; left:13px; right:13px; bottom:3px; height:2px;
  border-radius:2px; background: var(--accentGrad);
}

/* ---- THE ACCOUNT AREA IS A SEPARATE PLACE ----
   A divider and 20px of grid gap, so "Log in" is plainly not another nav
   link. This is the separation that was missing. */
.navActions{
  display:flex; gap:10px; align-items:center;
  padding-left: 20px;
  border-left: 1px solid var(--line);
}

/* ------------------------------------------------------------
   ONE BUTTON.

   .btn used to be styled for the red header only (translucent white),
   so every light surface re-declared it: the hero, the drawer, the
   featured strip, the station page and the dashboard each carried their
   own copy, and any surface that forgot — the 404 — rendered a white
   button on a white background.

   Now .btn is the light button, correct anywhere by default, and the
   red header opts into the on-accent treatment below. New surfaces get
   the right button without adding CSS.
   ------------------------------------------------------------ */
.btn{
  border: 1px solid var(--line);
  background: var(--surface2);
  color:var(--text);
  padding: 11px 14px;
  border-radius: 999px;
  font-weight: 950;
  font-size: 14px;
  cursor:pointer;
  transition: .15s ease;
  white-space: nowrap;
  font-family: inherit;
}
.btn:hover{ border-color: var(--accentLine); background: var(--accentSoft); color:var(--accentText); }

.btn.primary{ background: var(--accent); border-color:var(--accentText); color:#fff; }
.btn.primary:hover{ background: var(--accent2); color:#fff; }

/* ---- "warm" IS RED NOW ----
   The palette is RED, BLACK and WHITE. `.btn.warm` was amber — the most
   important button on the page, "Start your station", rendered mustard on
   black at a contrast ratio of 1.57, and it belonged to no identity at all.
   The class name is kept so nothing downstream has to change; what it means
   has moved. Amber survives in exactly one place, the LIVE dot, and that is
   the only exception in the palette. */
.btn.warm{
  background: var(--accentGrad); border-color: transparent; color: var(--onAccent);
  box-shadow: 0 6px 18px rgba(226,27,35,.30);
}
.btn.warm:hover{
  background: var(--accentGrad); color: var(--onAccent);
  box-shadow: 0 10px 26px rgba(226,27,35,.44); transform: translateY(-1px);
}
.btn.warm:active{ transform: translateY(0); }

.btn.ghost{ background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover{ background: var(--surface2); color: var(--text); border-color: var(--line); }

.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn:disabled:hover{ border-color: var(--line); background: var(--surface2); color:var(--text); }

/* On the red header the same button goes translucent-white. */
header .btn{
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.95);
}
header .btn:hover{ background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); color:#fff; }
header .btn.primary{ background:var(--surface3); border-color:var(--text); color:#fff; }
header .btn.primary:hover{ background:var(--surface3); opacity:.92; }
header 
/* ------------------------------------------------------------
   Signed-in identity in the header.
   The same account is a RadioGrub station owner and a LEWIS III user,
   so once you are signed in the shell says so on every route.
   ------------------------------------------------------------ */
.whoChip{
  display:flex; align-items:center; gap:9px;
  padding:5px 13px 5px 5px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.12);
  color:rgba(255,255,255,.95);
  text-decoration:none; font-weight:900; font-size:13px;
  transition:.15s ease; max-width:210px;
}
.whoChip:hover{ background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.42); }
.whoAvatar{
  width:28px; height:28px; flex:0 0 auto; border-radius:50%;
  background:rgba(255,255,255,.9) center/cover no-repeat;
  color:var(--accentText); display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:950; letter-spacing:.3px;
}
.whoName{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* the chip is a button that opens a two-item menu (Dashboard, Sign out) */
.whoMenu{ position:relative; }
.whoChip{ cursor:pointer; font:inherit; font-weight:900; font-size:13px; }
.whoChip[aria-expanded="true"]{ background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.42); }
.whoChip:focus-visible{ outline:2px solid var(--accentHot); outline-offset:2px; }
.whoCaret{ width:15px; height:15px; flex:0 0 auto; margin-left:-3px; opacity:.75; transition:transform .15s ease; }
.whoChip[aria-expanded="true"] .whoCaret{ transform:rotate(180deg); }
.whoMenuList{
  position:absolute; right:0; top:calc(100% + 8px); z-index:60; min-width:170px;
  display:grid; padding:6px; border-radius:14px;
  background:var(--surface2); border:1px solid var(--line2); box-shadow:var(--shadow2);
}
.whoMenuList[hidden]{ display:none; }
.whoMenuList a, .whoMenuList button{
  display:block; width:100%; text-align:left; padding:9px 12px; border-radius:9px;
  font:inherit; font-size:14px; font-weight:800; color:var(--text); text-decoration:none;
  background:none; border:0; cursor:pointer;
}
.whoMenuList a:hover, .whoMenuList button:hover, .whoMenuList a:focus-visible, .whoMenuList button:focus-visible{ background:var(--surface3); outline:none; }

@media (max-width: 1100px){ .whoName{ display:none; } .whoChip{ padding:5px 8px 5px 5px; } }

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 18px 120px;
  width: 100%;
}

/* ============================================================
   TYPE, ON BLACK
   White on near-black renders heavier than black on white — the same
   weight looks a step bolder — so headings come down slightly and body
   copy comes up, and everything tightens. This is the difference
   between "a dark theme" and something that was designed dark.
   ============================================================ */
body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
h1,h2,h3{ text-wrap:balance; }
p{ text-wrap:pretty; }

/* buttons: one transition, one lift, and a real focus ring */
.btn{
  transition: background var(--t1) var(--ease), border-color var(--t1) var(--ease),
              color var(--t1) var(--ease), transform var(--t1) var(--easeOut),
              box-shadow var(--t2) var(--ease);
}
.btn:active{ transform: translateY(1px); }
.btn:focus-visible{ outline:2px solid var(--accentHot); outline-offset:2px; }
a:focus-visible{ outline:2px solid var(--accentHot); outline-offset:3px; border-radius:6px; }

/* the sidebar's active rail: red, and on the left where the eye starts */
.sideIcon.active{ color:var(--accentText); }
.sideIcon.active::before{
  content:""; position:absolute; left:-10px; top:50%; transform:translateY(-50%);
  width:3px; height:22px; border-radius:0 3px 3px 0; background:var(--accentGrad);
}