/* Career mode — desktop: projects | EDITOR | AI; mobile: drawer labs + full-width editor */

.career-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.85rem;
  padding: 0.55rem 1rem;
  background: #1a1010;
  border-bottom: 1px solid rgba(139, 30, 30, 0.45);
  color: #f2e8e8;
  font-size: 0.85rem;
  grid-column: 1 / -1;
  z-index: 30;
}

.career-banner strong {
  color: #e8b4b4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

.career-banner span {
  flex: 1 1 12rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.career-banner a {
  margin-left: auto;
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
}

body.career-mode .app,
.app.career-mode {
  grid-template-rows: var(--topbar-h) auto minmax(0, 1fr);
  grid-template-columns: 220px minmax(0, 1fr) 260px;
}

body.career-mode .app > .topbar,
.app.career-mode > .topbar {
  grid-column: 1 / -1;
  grid-row: 1;
}

body.career-mode .app > .career-banner,
.app.career-mode > .career-banner {
  grid-column: 1 / -1;
  grid-row: 2;
}

body.career-mode .app > .sidebar,
.app.career-mode > .sidebar {
  grid-column: 1;
  grid-row: 3;
  min-height: 0;
}

body.career-mode .app > .main,
.app.career-mode > .main {
  grid-column: 2;
  grid-row: 3;
  min-height: 0;
}

body.career-mode .app > .ai-panel,
.app.career-mode > .ai-panel {
  grid-column: 3;
  grid-row: 3;
  min-height: 0;
}

body.career-mode {
  --lab-max: min(100%, 1080px);
}

body.career-mode .lab-column {
  width: min(100%, var(--lab-max));
  max-width: none;
  margin-inline: auto;
}

body.career-mode .project-head {
  text-align: left;
  margin-bottom: 1.15rem;
}

body.career-mode .project-head-row {
  justify-content: flex-start;
}

body.career-mode .project-head h1 {
  text-align: left;
}

body.career-mode .CodeMirror {
  min-height: 220px;
  font-size: 0.9rem;
}

body.career-mode .cell .CodeMirror {
  height: auto !important;
}

body.career-mode .project-list::before {
  content: "Your career projects";
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c98989;
  padding: 0.15rem 0.35rem 0.55rem;
}

body.career-mode .btn.mark-done {
  min-height: 40px;
}

/* Tablet: editor still largest; AI strip under (matches lab.css ~1100) */
@media (max-width: 1100px) {
  body.career-mode .app,
  .app.career-mode {
    grid-template-columns: 200px minmax(0, 1fr);
    grid-template-rows: var(--topbar-h) auto minmax(0, 1fr) auto;
  }

  body.career-mode .app > .sidebar,
  .app.career-mode > .sidebar {
    grid-column: 1;
    grid-row: 3;
  }

  body.career-mode .app > .main,
  .app.career-mode > .main {
    grid-column: 2;
    grid-row: 3;
  }

  body.career-mode .app > .ai-panel,
  .app.career-mode > .ai-panel {
    grid-column: 1 / -1;
    grid-row: 4;
    max-height: 32vh;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
}

/*
 * Phone: do NOT pin sidebar/AI into the grid — lab.css turns them into
 * drawer / bottom sheet. Main editor fills the viewport between banner & tabs.
 */
@media (max-width: 760px) {
  body.career-mode .app,
  .app.career-mode {
    grid-template-columns: 1fr !important;
    grid-template-rows:
      var(--topbar-h)
      auto
      minmax(0, 1fr)
      calc(var(--mobile-nav-h, 64px) + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.career-mode .app > .topbar,
  .app.career-mode > .topbar {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  body.career-mode .app > .career-banner,
  .app.career-mode > .career-banner {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  body.career-mode .app > .main,
  .app.career-mode > .main {
    grid-column: 1 !important;
    grid-row: 3 !important;
    width: 100%;
    padding: 0.85rem 0.75rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
  }

  /* Unset desktop/tablet placement so fixed drawers from lab.css win */
  body.career-mode .app > .sidebar,
  .app.career-mode > .sidebar {
    grid-column: unset !important;
    grid-row: unset !important;
  }

  body.career-mode .app > .ai-panel,
  .app.career-mode > .ai-panel {
    grid-column: unset !important;
    grid-row: unset !important;
    max-height: none !important;
    border-top: 0;
  }

  body.career-mode .app > .mobile-nav,
  .app.career-mode > .mobile-nav {
    grid-column: 1 !important;
    grid-row: 4 !important;
  }

  body.career-mode .lab-column {
    width: 100%;
  }

  body.career-mode .project-head h1 {
    font-size: 1.2rem;
    line-height: 1.2;
  }

  body.career-mode .btn.mark-done {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }

  body.career-mode .CodeMirror {
    min-height: 200px !important;
    font-size: 15px !important;
  }

  .career-banner {
    gap: 0.3rem 0.55rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.78rem;
  }

  .career-banner strong {
    font-size: 0.65rem;
  }

  .career-banner span {
    flex: 1 1 100%;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .career-banner a {
    margin-left: 0;
    min-height: 36px;
    padding: 0.15rem 0;
  }
}