/* ==========================================================================
   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; }

/* The marketing navbar, after The Story Doctor's: sticky, a hairline under it,
   brand on the left and everything else pushed right. Sticky matters here
   because the sales page band now runs up to meet it — the seam has to hold
   while the page scrolls. */
.imm-site__header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--imm-ink);
  color: var(--imm-on-dark);
  border-bottom: 1px solid var(--imm-ink-line);
}

/* Nav joins the actions on the right rather than sitting beside the brand. */
.imm-site__header .imm-nav { margin-left: auto; }
.imm-site__header .imm-site__header-actions { margin-left: 0; }

.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-3) 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; }

/* --- The footer inside the app shell ---------------------------------------
   Karel: "Create a footer menu area with copyright caption and links to
   about, Privacy and Terms."

   The footer used to render only on the marketing chrome, so the dashboard,
   course, progress and drill had no route to those pages at all. It is shared
   now — but the app's content sits on the light canvas, not the marketing
   chrome's dark ground, so a black slab across the bottom would read as a
   different site. Quiet rule and muted text instead.
   -------------------------------------------------------------------------- */

.imm-app__content .imm-site__footer {
  margin-top: var(--imm-s-12);
  background: transparent;
  border-top: 1px solid var(--imm-line);
  color: var(--imm-faint);
}

.imm-app__content .imm-site__footer-inner {
  max-width: none;
  padding: var(--imm-s-6) var(--imm-s-9);
}

.imm-app__content .imm-nav--footer a { color: var(--imm-muted); }
.imm-app__content .imm-nav--footer a:hover { color: var(--imm-link); }

/* The drill is a full-bleed focus screen; a footer there is a way out of it. */
.imm-drill-body .imm-site__footer { display: none; }

@media (max-width: 782px) {
  .imm-app__content .imm-site__footer-inner {
    padding: var(--imm-s-5);
    gap: var(--imm-s-4);
  }

  .imm-site__colophon { margin-left: 0; }
}

/* --- 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);
  }
}

/* --- Sidebar sections ------------------------------------------------------
   The design groups the nav: Today, then YOUR COURSES with the active course
   and its shortcuts, then everything else.
   -------------------------------------------------------------------------- */

.imm-sidebar__label {
  margin: var(--imm-s-6) var(--imm-s-3) var(--imm-s-2);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: var(--imm-track-eyebrow);
  text-transform: uppercase;
  color: var(--imm-faint-dark);
}

.imm-sidebar__list--tail { margin-top: var(--imm-s-6); }

/* Course shortcuts sit indented beneath the active course. */
.imm-sidebar__sub a {
  display: block;
  padding: 7px 12px 7px var(--imm-s-7);
  border-radius: var(--imm-r-nav);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--imm-faint-dark-2);
  text-decoration: none;
  transition: background-color var(--imm-t-btn), color var(--imm-t-btn);
}

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

@media (max-width: 900px) {
  /* The bottom tab bar has no room for labels or sub-items. */
  .imm-sidebar__label,
  .imm-sidebar__sub { display: none; }

  .imm-sidebar__nav { display: flex; width: 100%; }

  .imm-sidebar__list--tail { margin-top: 0; }

  .imm-sidebar__nav .imm-sidebar__list { flex: 1; }
}