/* App shell: desktop sidebar, mobile header + bottom tabbar, main column. */

.app-shell { display: flex; align-items: stretch; background: var(--canvas); min-height: 100vh; }

/* ---- Desktop sidebar ---- */
.app-sidebar {
  width: var(--sidebar-w);
  flex: none;
  display: flex;
  flex-direction: column;
  padding: 20px 14px 16px;
  border-right: 1px solid var(--border);
  background: var(--card);
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
}

/* Only positioning — the lockup itself comes from .brand-lockup (components.css).
   padding-left matches .app-nav-item's 12px so the mark and the nav icons share
   one left edge; the same insets are used by the lesson rail + Comunitate rail. */
.app-sidebar-brand { padding: 4px 12px 18px; }

.app-nav { display: flex; flex-direction: column; gap: 2px; }

.app-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
}
.app-nav-item:hover { background: var(--surface); color: var(--ink); }
.app-nav-item.is-active { background: var(--teal-tint); color: var(--teal-ink); }
.app-nav-item.is-active:hover { background: var(--teal-tint); color: var(--teal-ink); }

.app-nav-badge {
  margin-left: auto;
  min-width: 18px; height: 18px;
  border-radius: var(--r-pill);
  background: var(--coral);
  color: #FFFFFF;
  font-size: 10.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

.app-sidebar-spacer { flex: 1; }

/* The profile foot (.app-sidebar-foot / .app-prof-* / .app-logout) moved to
   components.css: the lesson page's own rail uses the same block and does not
   load shell.css. Only this shell's collapsed overrides stay here. */

/* ---- Main column ----
   The app spends the horizontal room it has, the same way the lesson page does:
   the screen grows with the viewport up to --screen-max and only then leaves
   margins. Screens that need a narrower measure cap their own inner column. */
.app-main { flex: 1; min-width: 0; display: flex; justify-content: center; padding: 44px clamp(24px, 3vw, 52px) 64px; }

.screen {
  width: 100%;
  max-width: var(--screen-max, 1240px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.screen-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 16px; flex-wrap: wrap; }
.screen-title { font-size: clamp(27px, 6vw, 34px); line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); }
.screen-sub { margin-top: 8px; font-size: 13px; color: var(--muted-2); }

.screen-h2 { font-size: 20px; letter-spacing: -0.01em; color: var(--ink); }

/* ---- Mobile top header ---- */
.m-header {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: 54px;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
/* The two --brand-* sizes, not a bare font-size on .brand-word and not the
   template's `size` argument: the mark's baseline offset is derived from both
   (components.css). */
.m-header-brand { --brand-mark-size: 26px; --brand-word-size: 15.5px; display: flex; align-items: center; gap: 9px; color: var(--ink); }
.m-avatar {
  width: 34px; height: 34px;
  flex: none;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--border);
  display: block;
}
.m-avatar.is-active { box-shadow: 0 0 0 2px var(--teal); }

/* ---- Mobile bottom tabbar ---- */
.m-tabbar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 50;
  background: var(--card);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px rgba(28, 27, 25, .07);
}
.m-tabbar-row { display: flex; align-items: stretch; padding: 5px 6px calc(5px + env(safe-area-inset-bottom)); }

.m-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 5px 2px 3px;
  color: var(--muted-2);
  font-size: 10px;
  font-weight: 600;
}
.m-tab:hover { color: var(--muted-2); }
.m-tab.is-active { color: var(--teal-ink); }

.m-tab-pill { display: flex; align-items: center; justify-content: center; width: 54px; height: 31px; border-radius: var(--r-pill); }
.m-tab.is-active .m-tab-pill { background: var(--teal-tint); }

.m-tab-world { flex: none; width: 62px; display: flex; align-items: flex-start; justify-content: center; }
.m-tab-world-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  margin-top: -7px;
  border-radius: var(--r-pill);
  background: var(--ink);
  border: 3px solid var(--canvas);
  box-shadow: 0 8px 20px rgba(15, 34, 48, .28);
}
.m-tab-world-btn:hover { background: var(--navy-2); }
.m-tab-world-btn--teal { background: var(--teal); box-shadow: 0 8px 20px rgba(11, 95, 94, .32); }
.m-tab-world-btn--teal:hover { background: var(--teal-hover); }

/* ---- Breakpoints ----
   The order in which the shell gives things up as the window narrows:
     1. the sidebar drops its labels and becomes an icon rail (the main column
        keeps its width — chrome pays before content does),
     2. only on a phone does it leave altogether for the bottom tab bar.
   Everything keys off --sidebar-w, so the rail's width is one number. */
@media (max-width: 1279px) {
  :root { --sidebar-w: 72px; }
  .app-sidebar { padding: 20px 10px 16px; }
  .app-sidebar-brand { justify-content: center; padding: 4px 0 18px; }
  .app-nav-item { justify-content: center; padding: 10px; gap: 0; }
  .app-nav-item > span,
  .app-sidebar .brand-word,
  .app-prof-body { display: none; }
  /* the mark is alone now — nothing to align its cap band to (components.css) */
  .app-sidebar-brand svg { transform: none; }
  /* the badge would have nothing to sit next to — pin it to the icon */
  .app-nav-badge { position: absolute; margin: 0; transform: translate(12px, -12px); }
  .app-nav-item { position: relative; }
  .app-prof-row { justify-content: center; padding: 8px 0; }
  .app-prof-link { flex: none; justify-content: center; }
  /* The avatar keeps its 34px from components.css — it used to be shrunk here
     from 40px, and re-stating it now would just silently pin the collapsed rail
     to a size the docked one no longer uses. */
  .app-logout { display: none; }
  .app-main { padding: 32px 26px 64px; }
}

@media (max-width: 767px) {
  .app-sidebar { display: none; }
  .m-header { display: flex; }
  .m-tabbar { display: block; }
  .app-main { padding: 76px 16px 118px; }
}