/* ==========================================================================
   IMMERSION — app shell
   The 236px dark sidebar, the content frame, and the marketing header.
   Ref: handoff § Phase 1.3 (app chrome), § Phase 12 (mobile).
   ========================================================================== */

/* --- App frame ------------------------------------------------------------ */

.imm-app {
  display: grid;
  grid-template-columns: var(--imm-sidebar) 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}

.imm-app__content {
  display: flex;
  flex-direction: column;
  min-width: 0; /* lets wide tables and code blocks scroll instead of pushing */
  background: var(--imm-canvas);
}

.imm-app__main { flex: 1; }

/* --- Sidebar -------------------------------------------------------------- */

.imm-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--imm-s-9);
  padding: var(--imm-s-8) var(--imm-s-4);
  background: var(--imm-ink);
  color: var(--imm-on-dark-2);
}

.imm-sidebar__brand {
  display: flex;
  align-items: center;
  padding-inline: var(--imm-s-3);
  text-decoration: none;
}

.imm-sidebar__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.imm-sidebar__list a,
.imm-sidebar__item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--imm-s-2);
  padding: 10px 12px;
  border-radius: var(--imm-r-nav);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--imm-on-dark-2);
  text-decoration: none;
  transition: background-color var(--imm-t-btn), color var(--imm-t-btn);
}

.imm-sidebar__list a:hover {
  background: rgba(255, 255, 255, .06);
  color: #fff;
}

/* Active item gets a lighter fill. `.current-menu-item` covers a nav assigned
   through Appearance → Menus; `.is-current` covers the built-in fallback. */
.imm-sidebar__item.is-current > a,
.imm-sidebar__list .current-menu-item > a,
.imm-sidebar__list .current_page_item > a {
  background: rgba(255, 255, 255, .10);
  color: #fff;
}

.imm-sidebar__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding-inline: 6px;
  border-radius: var(--imm-r-pill);
  background: var(--imm-red);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
}

/* --- Top bar -------------------------------------------------------------- */

.imm-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--imm-s-3);
  padding: var(--imm-s-4) var(--imm-s-12);
}

.imm-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--imm-r-pill);
  background: var(--imm-ink);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
}

.imm-avatar:hover { color: #fff; background: var(--imm-teal); }

/* --- Marketing chrome ----------------------------------------------------- */

.imm-site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.imm-site__main { flex: 1; }

.imm-site__header {
  background: var(--imm-ink);
  color: var(--imm-on-dark);
}

.imm-site__header-inner,
.imm-site__footer-inner {
  display: flex;
  align-items: center;
  gap: var(--imm-s-7);
  max-width: var(--imm-content-max);
  margin-inline: auto;
  padding: var(--imm-s-4) var(--imm-s-12);
}

.imm-brand {
  display: flex;
  align-items: center;
  gap: var(--imm-s-2);
  color: #fff;
  font-weight: 800;
  letter-spacing: var(--imm-track-h1);
  text-decoration: none;
}

.imm-brand__name { font-size: 17.5px; }
.imm-brand__fallback { font-weight: 800; }

.imm-site__header-actions { margin-left: auto; }

.imm-nav {
  display: flex;
  gap: var(--imm-s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.imm-nav a {
  color: var(--imm-on-dark-2);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
}

.imm-nav a:hover { color: #fff; }

.imm-site__footer {
  background: var(--imm-ink);
  color: var(--imm-faint-dark-2);
}

.imm-site__footer-inner { flex-wrap: wrap; }

.imm-site__colophon {
  margin: 0 0 0 auto;
  font-size: 13.5px;
}

.imm-nav--footer a { font-weight: 400; }

/* --- Mobile ---------------------------------------------------------------
   Handoff § Phase 12: the sidebar collapses to a bottom tab bar and every hit
   target stays at or above 44px. The full mobile pass lands with Phase 12 —
   this is the shell-level behaviour so narrow screens are usable before then.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .imm-app { grid-template-columns: 1fr; }

  .imm-sidebar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 100;
    flex-direction: row;
    align-items: center;
    gap: var(--imm-s-2);
    padding: var(--imm-s-2);
    border-top: 1px solid var(--imm-ink-line);
  }

  .imm-sidebar__brand { display: none; }

  .imm-sidebar__nav { flex: 1; }

  .imm-sidebar__list {
    flex-direction: row;
    justify-content: space-between;
    gap: 0;
  }

  .imm-sidebar__list a {
    justify-content: center;
    min-height: 44px;
    padding: var(--imm-s-2);
    font-size: 12px;
    text-align: center;
  }

  /* Clear the fixed bar so the last element is never trapped behind it. */
  .imm-app__content { padding-bottom: 64px; }

  .imm-wrap { padding: var(--imm-s-7) var(--imm-s-5) var(--imm-s-11); }

  .imm-site__header-inner,
  .imm-site__footer-inner {
    flex-wrap: wrap;
    padding-inline: var(--imm-s-5);
  }
}