/* --- project banner --- */

.project-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 1320px;
  margin: 0 auto;
  font-size: 13px;
  padding: 10px 24px 0;
}

.project-banner-icon {
  display: inline-flex;
  width: 15px;
  height: 15px;
  color: var(--ink-soft);
  flex-shrink: 0;
}

.project-banner strong {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}

.project-banner .num {
  color: var(--ink-soft);
}

/* which of the two guided pipelines this project uses - see PIPELINE_ICON/PIPELINE_LABEL
   in app.js. The one place this is shown (see renderWorkspaceRail's single cta button,
   which doesn't repeat the project's name/id already here). */
.project-banner-pipeline {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  padding: 3px 10px 3px 6px;
  border-radius: 20px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}

.project-banner-pipeline svg {
  width: 12px;
  height: 12px;
}

/* --- category nav: modules live in their own right-hand column (see renderCategoryNav() in
   app.js) - a mirror of the left rail's "your stuff" column, so the two sides read as one
   consistent pattern instead of one flat list. Every category shown at once, each its own
   vertical list - nothing hidden behind a click. Sticky, same offset as .rail. */

.category-nav {
  grid-column: 3;
  grid-row: 1;
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.category-nav[hidden] {
  display: none;
}

.category-section-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

.category-section-label svg {
  width: 13px;
  height: 13px;
}

.category-chips {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rail-roadmap-begin {
  width: 100%;
  margin-bottom: 10px;
}

.nav-item-icon--number {
  font-size: 12px;
  font-weight: 700;
}

.category-chip {
  position: relative;
}

/* absolute so it never grows the chip or eats into the title's ellipsis width */
.nav-item-optional {
  position: absolute;
  top: 3px;
  right: 10px;
  font-size: 8px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-soft);
  opacity: .6;
  pointer-events: none;
}

.tool-categories .category-section + .category-section {
  margin-top: 24px;
}

.roadmap-group-label {
  margin: 14px 0 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: .8;
}

.category-section > .roadmap-group-label:first-of-type {
  margin-top: 4px;
}

.roadmap-group-note {
  margin-bottom: 6px;
  font-size: 11px;
  color: var(--ink-soft);
  line-height: 1.4;
}

.rail-more-tools-toggle {
  width: 100%;
  padding: 6px 0;
  border: none;
  background: none;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  text-align: left;
  cursor: pointer;
}

.rail-more-tools-toggle:hover {
  color: var(--ink);
}

/* --- error toast: replaces alert() so a failed call can't block the tab --- */

.toast-stack {
  position: fixed;
  top: 76px;
  right: 16px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 340px;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--paper-raised);
  border: 1px solid var(--risk-soft);
  border-left: 3px solid var(--risk);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ink);
  box-shadow: var(--shadow);
  animation: toast-in .15s ease-out;
}

.toast--success {
  border: 1px solid var(--accent-soft);
  border-left: 3px solid var(--accent);
}

.toast-dismiss {
  margin-left: auto;
  border: none;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0 0 0 8px;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- shell: rail + stage --- */

.shell {
  max-width: 1320px;
  margin: 0 auto;
  padding: 40px 24px 120px;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 240px;
  gap: 32px;
  align-items: start;
}

/* The rail only holds "your stuff" now (projects, outputs, admin) - the step/tool modules
   live in their own column on the right instead (#category-nav, see renderCategoryNav in
   app.js) - so this stays short enough that it doesn't need to scroll independently of the
   page. */
.rail {
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* No inner scrollbar on the project list on purpose - now that modules live in the top bar
   (not the rail), a long project list has nothing below it left to push down. If it grows
   past the viewport, the whole page just scrolls, same as any normal page. */

.rail-overlay[hidden] {
  display: none;
}

/* invisible wrapper on desktop - .rail/.category-nav stay direct grid children; the mobile
   media query below turns it into an actual box */
.mobile-drawer {
  display: contents;
}

.mobile-drawer-close {
  display: none;
}

@media (max-width: 860px) {
  .rail-toggle-btn {
    display: inline-flex;
  }

  /* buttons never fit the header in one row below ~860px - wrap as whole units onto a
     second row instead of letting individual button text wrap (e.g. "Sign out" breaking
     into two lines), which should never happen */
  header {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .shell {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 16px 100px;
  }

  /* one drawer, not two - two 85vw panels from opposite edges used to overlap on narrow
     screens with no overlay gap left to tap-dismiss */
  .mobile-drawer {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 320px;
    max-width: 85vw;
    margin: 0;
    padding: 76px 20px 24px;
    background: var(--paper-raised);
    border-right: 1px solid var(--line);
    box-shadow: var(--shadow);
    z-index: 50;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .22s ease;
  }

  .mobile-drawer--open {
    transform: translateX(0);
  }

  .mobile-drawer-close {
    display: inline-flex;
    position: absolute;
    top: 16px;
    right: 16px;
  }

  .rail {
    position: static;
    padding: 0;
  }

  .rail-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(10, 12, 9, .45);
    z-index: 40;
  }

  .category-nav {
    position: static;
    padding: 20px 0 0;
    margin-top: 20px;
    border-top: 1px solid var(--line);
  }

  .category-nav[hidden] {
    display: none;
  }
}

.rail-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rail-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.rail-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-soft);
  flex-shrink: 0;
}

/* a folder groups a few project rows, not a whole rail section - smaller, no bullet, so it
   doesn't read as another top-level heading next to "Projects"/"Outputs" */
.rail-label--folder {
  font-size: 10px;
  margin-top: 6px;
}

.rail-label--folder::before {
  display: none;
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nav-list--sub {
  margin: 2px 0 8px 14px;
  padding-left: 10px;
  border-left: 1px solid var(--line);
  gap: 2px;
}

.nav-list--sub .nav-item {
  font-size: 12px;
  padding: 6px 10px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-raised);
  color: var(--ink);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background-color .12s ease, color .12s ease;
}

.nav-item-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  transition: inherit;
}

.nav-item-icon svg {
  width: 13px;
  height: 13px;
}

.nav-item-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* done state - a filled checkmark badge (not just coloured text) plus a soft tint on the
   whole row, so "already ran this" reads at a glance instead of requiring a close look at
   a small ✓ off to the side */

.nav-item-done {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--paper-raised);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.nav-item--done:not(.nav-item--active) {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
}

.nav-item--active .nav-item-done {
  background: var(--paper-raised);
  color: var(--accent);
}

/* locked state - dimmed but still clickable, so its prerequisite is visible when you open it */

.nav-item--locked {
  opacity: .5;
}

.nav-item--locked:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--line);
  background: var(--paper-raised);
  color: var(--ink);
}

.nav-item--locked:hover .nav-item-icon {
  transform: none;
}

.nav-item-lock {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--ink-soft);
}

.nav-item-lock svg {
  width: 13px;
  height: 13px;
}

/* pipeline-type tag on a project row (hub.js) - icon only, label lives in the tooltip */
.nav-item-tag {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--ink-soft);
}

.nav-item-tag svg {
  width: 13px;
  height: 13px;
}

/* always visible on touch (no real hover to reveal them there); a mouse gets the
   hide-until-hover treatment below instead, so the row stays clean at rest */
.nav-item-delete,
.nav-item-folder {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--ink-soft);
  border-radius: 5px;
  transition: opacity .12s ease, color .12s ease, background .12s ease;
}

@media (hover: hover) and (pointer: fine) {
  .nav-item-delete,
  .nav-item-folder {
    opacity: 0;
  }

  .nav-item:hover .nav-item-delete,
  .nav-item:hover .nav-item-folder {
    opacity: 1;
  }
}

.nav-item-delete:hover {
  color: var(--risk);
  background: var(--risk-soft);
}

.nav-item-folder:hover {
  color: var(--accent);
  background: var(--accent-soft);
}

.nav-item-delete svg,
.nav-item-folder svg {
  width: 14px;
  height: 14px;
}

.folder-picker-popover {
  position: absolute;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 160px;
  max-width: 220px;
  padding: 4px;
  border-radius: 10px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.folder-picker-option {
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}

.folder-picker-option:hover {
  background: var(--input-tint);
}

.folder-picker-option--active {
  color: var(--accent);
  font-weight: 600;
}

.folder-picker-input {
  margin: 4px 2px 2px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}

.nav-item:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -9px rgba(0, 0, 0, .4);
}

.nav-item:hover .nav-item-icon {
  transform: scale(1.12);
}

.nav-item:active {
  transform: translateY(0) scale(.97);
}

.nav-item--active,
.nav-item--active:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper-raised);
  font-weight: 700;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px var(--accent-soft);
}

.nav-item--active .nav-item-icon {
  background: rgba(255, 255, 255, .22);
  color: var(--paper-raised);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .28);
}

.nav-item--ghost {
  color: var(--ink-soft);
  border: 1px dashed var(--line);
}

.nav-item--ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: transparent;
}

.nav-item--ghost.nav-item--active,
.nav-item--ghost.nav-item--active:hover {
  background: var(--accent);
  border-style: solid;
  border-color: var(--accent);
  color: var(--paper-raised);
}

/* projects get a rounded-square badge + bolder weight so they read as a different kind of
   thing from step/tool modules (which stay circular, regular weight) at a glance */

.nav-item--project {
  font-weight: 600;
  background: var(--accent-soft);
  border-color: var(--accent-soft);
}

.nav-item--project:hover {
  border-color: var(--accent);
}

.nav-item--project .nav-item-icon {
  border-radius: 6px;
}

.rail-back {
  align-self: flex-start;
  font: inherit;
  font-size: 13px;
  color: var(--ink-soft);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.rail-back:hover {
  color: var(--accent);
}