/* =============================================================================
   ui/shell.css — navigation surfaces.
   One nav model, three shapes: bottom bar (phone), icon rail (tablet),
   full sidebar (desktop). Same classes throughout, only the layout changes.
   ========================================================================== */

/* --------------------------- shared nav item ------------------------------ */
.nav-item {
  display:flex; align-items:center; gap:var(--s3);
  position:relative;
  border:0; background:transparent; cursor:pointer;
  color:var(--on-surface-v);
  font-weight:700; font-size:13.5px;
  border-radius:var(--r-sm);
  transition:color var(--t-med) var(--e-standard), background var(--t-med) var(--e-standard);
  text-decoration:none;
}
.nav-item .ni-ic { display:flex; align-items:center; justify-content:center; flex:none; }
.nav-item.on { color:var(--primary); }

.ni-badge {
  position:absolute;
  inset-inline-end:6px; top:50%; transform:translateY(-50%);
}

/* ------------------------------ bottom nav -------------------------------- */
#bottomnav .nav-item {
  flex-direction:column; gap:3px;
  flex:1; height:100%;
  justify-content:center;
  font-size:10.5px; font-weight:700;
}
#bottomnav .nav-item .ni-ic {
  width:44px; height:30px; border-radius:99px;
  transition:background var(--t-med) var(--e-standard), transform var(--t-med) var(--e-spring);
}
#bottomnav .nav-item.on .ni-ic { background:var(--primary-c); transform:translateY(-1px); }
#bottomnav .nav-item:active .ni-ic { transform:scale(.9); }
#bottomnav .ni-badge { inset-inline-end:14px; top:6px; transform:none; }

#bottomnav .nav-fab {
  width:52px; height:52px; flex:none;
  margin-top:-22px;
  border:4px solid var(--bg);
  border-radius:19px;
  background:linear-gradient(140deg, var(--primary), var(--grad-a));
  color:var(--on-primary);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(var(--primary-rgb)/.4);
  cursor:pointer;
  transition:transform var(--t-med) var(--e-spring);
}
#bottomnav .nav-fab:active { transform:scale(.9) rotate(-6deg); }

/* --------------------------------- side ----------------------------------- */
#sidebar {
  position:sticky; top:0; height:100dvh;
  border-inline-start:1px solid var(--outline-v);
  background:var(--surface);
}
.side-inner {
  display:flex; flex-direction:column;
  height:100%; padding:var(--s4) var(--s3);
  gap:var(--s2); overflow-y:auto; overflow-x:hidden;
}

.side-brand { display:flex; align-items:center; gap:var(--s2); padding:0 var(--s2) var(--s2); }
.side-brand .logo {
  width:36px; height:36px; flex:none; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(140deg, var(--primary), var(--grad-a));
  color:var(--on-primary);
}
.side-brand b { font-size:16px; font-weight:900; letter-spacing:.2px; }
.side-toggle { margin-inline-start:auto; }

.side-cta {
  display:flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:46px; margin:var(--s2) 0 var(--s3);
  border:0; border-radius:var(--r-sm);
  background:linear-gradient(140deg, var(--primary), var(--grad-a));
  color:var(--on-primary); font-weight:800; font-size:14px;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(var(--primary-rgb)/.26);
  transition:transform var(--t-fast) var(--e-standard), filter var(--t-fast) var(--e-standard);
}
.side-cta:hover { filter:brightness(1.06); }
.side-cta:active { transform:scale(.97); }

.side-nav { display:flex; flex-direction:column; gap:2px; }
#sidebar .nav-item { padding:10px var(--s3); min-height:44px; }
#sidebar .nav-item:hover { background:var(--surface-v); color:var(--on-surface); }
#sidebar .nav-item.on { background:var(--primary-c); color:var(--on-primary-c); }
/* the active-destination marker — a small bar on the inline edge */
#sidebar .nav-item.on::before {
  content:''; position:absolute;
  inset-inline-start:0; top:50%; transform:translateY(-50%);
  width:3px; height:20px; border-radius:99px; background:var(--primary);
}

.side-sep {
  font-size:11px; font-weight:800; color:var(--on-surface-v);
  padding:var(--s3) var(--s3) var(--s1);
}
.side-foot { margin-top:auto; display:flex; flex-direction:column; gap:2px; padding-top:var(--s3); }

/* rail mode: tablet width, or a desktop user who collapsed the sidebar */
@media (min-width:900px) and (max-width:1279px) {
  .side-only { display:none !important; }
  .side-inner { align-items:center; padding-inline:var(--s2); }
  #sidebar .nav-item { justify-content:center; width:56px; padding:10px 0; }
  #sidebar .nav-item .ni-lb { display:none; }
  #sidebar .nav-item.on::before { display:none; }
  .side-cta { width:56px; padding:0; }
  .side-cta span { display:none; }
  .side-brand { justify-content:center; padding-inline:0; }
}
body.side-collapsed .side-only { display:none !important; }
body.side-collapsed .side-inner { align-items:center; padding-inline:var(--s2); }
body.side-collapsed #sidebar .nav-item { justify-content:center; width:56px; padding:10px 0; }
body.side-collapsed #sidebar .nav-item .ni-lb { display:none; }
body.side-collapsed #sidebar .nav-item.on::before { display:none; }
body.side-collapsed .side-cta { width:56px; padding:0; }
body.side-collapsed .side-cta span { display:none; }
body.side-collapsed .side-brand { justify-content:center; }
body.side-collapsed .side-sep { display:none; }

/* the collapsed sidebar keeps a toggle, reachable on hover of the brand */
body.side-collapsed #sideToggle { display:none; }

/* --------------------------------- aside ---------------------------------- */
#aside {
  position:sticky; top:0; height:100dvh; overflow-y:auto;
  border-inline-end:1px solid var(--outline-v);
  background:var(--surface);
  padding:var(--s5) var(--s4);
}

/* -------------------------------- topbar ---------------------------------- */
.only-phone { display:inline-flex; }
@media (min-width:900px) { .only-phone { display:none !important; } }

#tbNotif { position:relative; }
#tbNotif .tb-badge { position:absolute; top:5px; inset-inline-end:5px; }

body.no-chrome #topbar,
body.no-chrome #bottomnav { display:none; }
body.no-chrome #content { padding:0; max-width:none; }

/* Full-bleed screens (study space) hide the frame on phones only. */
@media (max-width:899px) {
  body.immersive #bottomnav, body.immersive #topbar { display:none; }
  body.immersive #content { padding-bottom:var(--s6); }
}

/* ------------------------------ boot splash -------------------------------- */
#boot {
  position:fixed; inset:0; z-index:100;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  background:var(--bg);
  transition:opacity 340ms var(--e-standard);
}
#boot.gone { opacity:0; pointer-events:none; }
#boot .mark {
  width:74px; height:74px; border-radius:24px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(140deg, var(--primary), var(--grad-a));
  color:var(--on-primary);
  animation:bootPulse 1.6s var(--e-standard) infinite;
}
@keyframes bootPulse {
  0%,100% { transform:scale(1); box-shadow:0 10px 30px rgba(var(--primary-rgb)/.3); }
  50% { transform:scale(1.07); box-shadow:0 16px 44px rgba(var(--primary-rgb)/.5); }
}
#boot .dots { display:flex; gap:6px; }
#boot .dots i { width:7px; height:7px; border-radius:99px; background:var(--outline); animation:bootDot 1s infinite; }
#boot .dots i:nth-child(2) { animation-delay:.15s; }
#boot .dots i:nth-child(3) { animation-delay:.3s; }
@keyframes bootDot { 0%,100% { opacity:.3; transform:translateY(0); } 50% { opacity:1; transform:translateY(-4px); background:var(--primary); } }

/* ------------------------------ offline pill ------------------------------- */
#offline {
  position:fixed; z-index:88;
  inset-inline:0; top:calc(var(--safe-t) + 8px);
  margin:0 auto; width:max-content; max-width:calc(100% - 24px);
  padding:6px 14px; border-radius:99px;
  background:var(--error); color:var(--on-error);
  font-size:12px; font-weight:800;
  display:none; align-items:center; gap:6px;
  box-shadow:var(--shadow);
  animation:toastIn 300ms var(--e-decel) both;
}
body.offline #offline { display:flex; }

/* ===================== patch 15: four-tab bottom nav ===================== */
#bottomnav .nav-fab { display:none !important; }
#bottomnav .nav-item { min-height:56px; padding-top:4px; }
#bottomnav .nav-item .ni-ic { width:52px; height:32px; }
#bottomnav .nav-item .ni-lb { line-height:1.2; }
#bottomnav .nav-item.on { font-weight:800; }
#bottomnav .nav-item.on .ni-ic { background:rgba(var(--primary-rgb) / .16); }
@media (max-width:899px) {
  #content { padding-bottom:calc(var(--nav-h) + var(--s6)); }
}