/* ═══════════════════════════════════════════════════════════════════════
   app_shell.css — the ONE menu for every signed-in tool page.

   Design: Nate's approved "Career Fast Pass App Shell" canvas (2026-10-10),
   plan in audit/app_shell_plan.md.

   1. The sidebar (.sidebar-shell). These rules moved here from
      kit_detail.html so the kit page and every other tool page share one
      copy. Layout and colours are unchanged; only the text got bigger
      (Nate, 2026-10-10): menu items 13.5 → 15px, section labels 10 → 12px,
      lock pills 9 → 12px, kit switcher 10/13.5 → 12/15px, icons 16 → 18px.
      The kit page keeps its OWN phone rules (the sideways strip) in
      kit_detail.html.
   2. The app layout for pages that extend templates/app_base.html.
   3. Phone: top bar, bottom tab bar, "More" sheet. One bar on every
      signed-in page, the kit page included. A page's own steps (a builder's
      Content / Design / Improve / Preview) sit at the top of its sheet, never
      in a second bottom bar.

   Breakpoint: 720px, the same one the kit page already uses.
   Colour: everything accent-coloured reads var(--color-primary). On a tool
   page app_base.html sets it to the tool's colour (core/app_shell.py
   TOOL_COLORS: Cover Letter green, Interview orange, Jobs teal, Résumé blue;
   Nate 2026-10-11), and --tool-soft tints the active menu item. School
   accounts get the school colour instead.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Sidebar ─────────────────────────────────────────────────────── */
.sidebar-shell {
  background: var(--color-bg-card);
  border-right: 1px solid var(--color-border-default);
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
}
.sidebar-shell .school-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  margin-bottom: var(--space-4);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}
.sidebar-shell .wordmark {
  padding: 0 var(--space-2);
  margin-bottom: var(--space-5);
  color: var(--color-text-primary);
}
.sidebar-shell .kit-switcher {
  background: var(--color-gray-50);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}
.sidebar-shell .kit-switcher-label {
  font-size: 12px;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  margin-bottom: 2px;
}
.sidebar-shell .kit-switcher-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.3;
}
.sidebar-shell .section-group { margin-bottom: var(--space-5); }
.sidebar-shell .section-group-label {
  font-size: 12px;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  padding: 0 var(--space-2);
  margin-bottom: var(--space-2);
}
.sidebar-shell .nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 40px;
  box-sizing: border-box;
  padding: 7px var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 1px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  position: relative;
  text-decoration: none;
}
.sidebar-shell .nav-item:hover {
  background: var(--color-gray-50);
  color: var(--color-text-primary);
}
.sidebar-shell .nav-item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
.sidebar-shell .nav-item.active {
  background: var(--tool-soft, var(--color-info-bg));
  color: var(--tool-ink, var(--color-primary));
  font-weight: 600;
}
.sidebar-shell .nav-item.active::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--color-primary);
  border-radius: 0 2px 2px 0;
}
.sidebar-shell .nav-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
/* Plus / Pro / Starter badges are gold everywhere (Nate, 2026-10-15), so they
   never look like a tool's colour (Career Paths is indigo-purple). */
.sidebar-shell .lock-pill {
  margin-left: auto;
  background: #fdf0c4;
  border: 1px solid #e9c262;
  color: #7a4d00;
  font-size: 12px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  /* The kit page has a generic .lock-pill (uppercase, spaced) for its
     locked-feature cards; reset it here so the menu reads the same on
     every page. */
  text-transform: none;
  letter-spacing: normal;
}
.sidebar-shell .completion-dot {
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success);
  flex-shrink: 0;
}
.sidebar-shell .completion-dot.partial { background: var(--color-warning); }
.sidebar-shell .completion-dot.none    { background: var(--color-border-strong); }
.sidebar-shell .sidebar-divider {
  height: 1px;
  background: var(--color-border-default);
  margin: var(--space-2) var(--space-2) var(--space-4);
}
.sidebar-shell .section-group-tools { margin-top: var(--space-4); margin-bottom: 0; }
.sidebar-shell .sidebar-footer {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-default);
}

/* ── 2. App layout (templates/app_base.html) ────────────────────────── */
/* Pages on the shell no longer render nav.html, so nothing else zeroes the
   browser's default 8px body margin. */
body:has(.app-shell) { margin: 0; }
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width, 260px) minmax(0, 1fr);
  min-height: 100vh;
  /* A tool page tints its background in its own colour (app_base.html). */
  background: var(--tool-page, var(--color-bg-page));
}
.app-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.app-content { min-width: 0; flex: 1; }
.app-topbar { display: none; }

/* ── 3. Phone ───────────────────────────────────────────────────────── */
.app-tabbar, .app-more { display: none; }

@media (max-width: 720px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .app-shell > .sidebar-shell { display: none; }

  .app-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 60;
    min-height: 60px;
    padding: 0 12px 0 16px;
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border-default);
    box-sizing: border-box;
  }
  .app-topbar-school {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
  }
  .app-topbar-account {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    text-decoration: none;
    flex-shrink: 0;
  }
  .app-topbar-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
  }

  /* Bottom tab bar. Keeps the class "tabbar" so the AI assistant bubble and
     the cookie banner, which already lift above a .tabbar, keep working. */
  /* 2026-10-14 (audit/bottom_bar_plan.md): a sideways-scrolling strip of
     every page + More pinned on the right. Buttons are 68px, so about 4½
     show on a 390px phone and the cut-off one says "swipe". */
  .app-tabbar {
    display: flex;
    align-items: stretch;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    /* 2026-10-29: the iPhone home bar only needs about 16px under the labels,
       not the full 34px safe area plus 6px (Nate: "trim that empty space"). */
    padding: 6px 0 max(6px, calc(env(safe-area-inset-bottom, 0px) - 18px));
    background: var(--color-bg-card);
    border-top: 1px solid var(--color-border-default);
    box-shadow: 0 -2px 10px rgba(15, 23, 42, .05);
  }
  .app-tabstrip {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-left: 4px;
  }
  .app-tabstrip::-webkit-scrollbar { display: none; }
  .app-tabfade {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 72px;
    width: 44px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--color-bg-card, #fff));
    pointer-events: none;
    transition: opacity .2s;
  }
  .app-tabbar-end .app-tabfade { opacity: 0; }
  .app-tab {
    /* 4½ items in view, so the half one reads as "scroll for more" rather
       than a cut-off label (live pages audit, 2026-10-15). */
    flex: 0 0 max(60px, calc((100vw - 76px) / 4.5));
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-height: 52px;
    padding: 4px 0 0;
    border: 0;
    background: transparent;
    color: var(--color-text-secondary);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }
  .app-tab-more {
    flex: 0 0 72px;
    border-left: 1px solid var(--color-border-default);
  }
  .app-tab-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 30px;
    border-radius: 999px;
  }
  .app-tab-icon svg { width: 22px; height: 22px; }
  .app-tab-pill {
    position: absolute;
    top: -4px;
    right: -6px;
    padding: 1px 5px;
    border-radius: 999px;
    background: #fdf0c4;
    border: 1px solid #e9c262;
    color: #7a4d00;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
  }
  .app-tab.active { color: var(--tool-ink, var(--color-primary)); font-weight: 700; }
  .app-tab.active .app-tab-icon {
    background: var(--color-info-bg);
    background: color-mix(in srgb, var(--tool-ink, var(--color-primary)) 14%, #fff);
  }
  @media (prefers-reduced-motion: reduce) { .app-tabstrip { scroll-behavior: auto; } }
  .app-tab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; border-radius: 10px; }

  /* Room for the fixed bar under the last thing on the page. */
  body:has(.app-tabbar) { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  /* …and the shell fills the screen minus that room, not the whole screen,
     or every page scrolls 66px more than it has (the builders, which are
     exactly one screen tall, slid up to show the page behind them). */
  body:has(.app-tabbar) .app-shell {
    min-height: calc(100vh - 66px - env(safe-area-inset-bottom, 0px));
    min-height: calc(100dvh - 66px - env(safe-area-inset-bottom, 0px));
  }

  /* Pages' own pop-up toasts sat 24-32px from the bottom, which is now
     behind the bar. Lift the low ones above it. (Toasts already at 88px,
     e.g. the kit's .rt-toast, clear it as they are.) */
  body:has(.app-tabbar) .toast,
  body:has(.app-tabbar) .sim-toast,
  body:has(.app-tabbar) .cls-studio .cls-toast {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }

  /* No site footer inside the app on phones (Nate 2026-11-02): the bottom
     bar and More already do its job, and under the Résumé and Cover Letter
     builders (one screen tall) a swipe scrolled the builder up to show it.
     Its links are in More (Help & info). Desktop and public pages keep it. */
  body:has(.app-shell) .site-foot { display: none; }

  /* "More" sheet: a native <dialog>, shown from the bottom. */
  .app-more[open] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: fixed;
    inset: auto 0 0 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-radius: 20px 20px 0 0;
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    box-shadow: 0 -8px 30px rgba(15, 23, 42, .18);
  }
  .app-more::backdrop { background: rgba(15, 23, 42, .5); }
}
.app-more-grab {
  align-self: center;
  width: 40px;
  height: 5px;
  border-radius: 999px;
  background: var(--color-border-strong);
}
.app-more-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 2px;
}
.app-more-head h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--color-text-primary); }
.app-more-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.app-more-kit {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 14px;
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  background: var(--color-gray-50);
  box-sizing: border-box;
}
.app-more-kit select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; }
.app-more-kit-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-tertiary); }
.app-more-kit-name { font-size: 15px; font-weight: 600; color: var(--color-text-primary); }
.app-more-label {
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.app-more-item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  color: var(--color-text-primary);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}
.app-more-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--tool-soft, var(--color-info-bg));
  color: var(--tool-ink, var(--color-primary));
  flex-shrink: 0;
}
.app-more-item-icon svg { width: 20px; height: 20px; }
.app-more-links {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 12px;
}
.app-more-links a {
  display: flex;
  align-items: center;
  min-height: 42px;
  color: var(--color-text-secondary);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.app-more-item .lock-pill {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid #e9c262;
  background: #fdf0c4;
  color: #7a4d00;
  background: var(--color-bg-page);
  color: var(--color-text-secondary);
}
.app-more-sep { height: 1px; background: var(--color-border-default); margin: 8px 0 2px; }
/* Profile picture in the top bar (design pass C) */
.app-topbar-avatar.has-photo { padding: 0; overflow: hidden; background: #e2e8f0; }
.app-topbar-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }