/**
 * project-nav.css — P2 left-panel project nav (token-only).
 */

.admin-shell__nav-column[data-project-nav-active] .sidebar {
  display: none;
}

.admin-shell__nav-column[data-project-nav-active] {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

[data-project-nav-mount] {
  display: none;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.admin-shell__nav-column[data-project-nav-active] [data-project-nav-mount] {
  display: flex;
}

/* Collapsed rail — hide project-nav body; grid narrows via data-sidebar="ribbon". */
.admin-shell[data-sidebar="ribbon"]
  .admin-shell__nav-column[data-project-nav-active]
  .project-nav__picker,
.admin-shell[data-sidebar="ribbon"]
  .admin-shell__nav-column[data-project-nav-active]
  .project-nav__sessions,
.admin-shell[data-sidebar="ribbon"]
  .admin-shell__nav-column[data-project-nav-active]
  .timeline-view-switcher {
  display: none;
}

.admin-shell[data-sidebar="ribbon"]
  .admin-shell__nav-column[data-project-nav-active]
  .project-nav {
  padding: 0;
  gap: 0;
  overflow: hidden;
  background: transparent;
  border-right: 1px solid var(--s-color-border-subtle);
}

.admin-shell[data-sidebar="ribbon"]
  .admin-shell__nav-column[data-project-nav-active]
  [data-project-nav-mount] {
  display: none;
}

.project-nav {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: var(--s-space-2);
  padding: var(--s-space-2);
  background: var(--s-color-surface-default);
}

.project-nav__picker {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-1);
  flex-shrink: 0;
}

.project-nav__picker-search {
  width: 100%;
  padding: var(--s-space-1) var(--s-space-2);
  border: var(--s-border-thin) solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-md);
  background: var(--s-color-surface-raised);
  color: var(--s-color-fg-default);
  font-size: var(--s-font-size-0);
}

.project-nav__picker-search:focus {
  outline: none;
  border-color: var(--s-color-border-default);
}

.project-nav__picker-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-1);
  max-height: calc(var(--s-space-6) * 5);
  overflow: auto;
}

.project-nav__picker-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--s-space-1) var(--s-space-2);
  border: var(--s-border-thin) solid transparent;
  border-radius: var(--s-radius-md);
  background: transparent;
  color: var(--s-color-fg-secondary);
  font-size: var(--s-font-size-0);
  cursor: pointer;
}

.project-nav__picker-item:hover {
  background: var(--s-color-surface-hover);
  color: var(--s-color-fg-default);
}

.project-nav__picker-item[data-active="true"] {
  background: var(--s-brand-alpha-10);
  border-color: var(--s-color-border-default);
  color: var(--s-color-fg-default);
  font-weight: var(--s-font-weight-medium);
}

.project-nav__picker-empty {
  padding: var(--s-space-2);
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-tertiary);
}

.project-nav__sessions {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  border-top: var(--s-border-thin) solid var(--s-color-border-subtle);
  padding-top: var(--s-space-2);
}

.project-nav__sessions-scroll {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.project-nav__timeline-cursor {
  position: absolute;
  left: 0;
  width: var(--s-border-thick);
  top: var(--project-nav-cursor-top, 0);
  height: var(--project-nav-cursor-height, var(--s-space-6));
  border-radius: var(--s-radius-sm);
  background: var(--s-color-accent-default);
  pointer-events: none;
  opacity: 0;
  transition:
    top var(--s-duration-fast) var(--s-motion-ease-standard),
    height var(--s-duration-fast) var(--s-motion-ease-standard),
    opacity var(--s-duration-fast) var(--s-motion-ease-standard);
}

.project-nav__timeline-cursor[data-visible="true"] {
  opacity: 1;
}

.project-nav__sessions-groups {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-2);
}

.project-nav__sessions-group-label {
  margin: 0;
  padding: 0 var(--s-space-1);
  font-size: var(--s-font-size-micro);
  font-weight: var(--s-font-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--s-color-fg-tertiary);
}

.project-nav__sessions-group-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-1);
}

.project-nav__session-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-space-2);
  width: 100%;
  padding: var(--s-space-1) var(--s-space-2);
  padding-left: var(--s-space-3);
  border: var(--s-border-thin) solid transparent;
  border-radius: var(--s-radius-md);
  background: transparent;
  color: var(--s-color-fg-secondary);
  font-size: var(--s-font-size-0);
  text-align: left;
  cursor: pointer;
}

.project-nav__session-row:hover {
  background: var(--s-color-surface-hover);
  color: var(--s-color-fg-default);
}

.project-nav__session-row[data-active="true"] {
  background: var(--s-brand-alpha-10);
  border-color: var(--s-color-border-default);
  color: var(--s-color-fg-default);
}

.project-nav__session-marker {
  flex-shrink: 0;
  width: 1em;
  font-size: var(--s-font-size-0);
  line-height: 1.4;
  color: var(--s-color-fg-tertiary);
}

.project-nav__session-marker[data-marker-kind="generative"] {
  color: var(--s-color-accent-default);
}

.project-nav__session-marker[data-marker-kind="steward"] {
  color: var(--s-color-fg-secondary);
}

.project-nav__session-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-view-switcher {
  flex-shrink: 0;
  border-top: var(--s-border-thin) solid var(--s-color-border-subtle);
  padding-top: var(--s-space-2);
}

.timeline-view-switcher__group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-space-1);
}

.timeline-view-switcher__mode {
  padding: var(--s-space-1) var(--s-space-2);
  border: var(--s-border-thin) solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-md);
  background: var(--s-color-surface-raised);
  color: var(--s-color-fg-secondary);
  font-size: var(--s-font-size-micro);
  cursor: pointer;
}

.timeline-view-switcher__mode:hover:not(:disabled) {
  border-color: var(--s-color-border-default);
  color: var(--s-color-fg-default);
}

.timeline-view-switcher__mode[data-active="true"] {
  background: var(--s-brand-alpha-10);
  border-color: var(--s-color-border-default);
  color: var(--s-color-fg-default);
  font-weight: var(--s-font-weight-medium);
}

.timeline-view-switcher__mode:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Session detail drawer (double-click) */
.project-nav__session-detail {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--s-color-backdrop-scrim);
}

.project-nav__session-detail[hidden] {
  display: none;
}

.project-nav__session-detail-panel {
  width: min(26rem, 100%);
  max-height: 50vh;
  margin: var(--s-space-4);
  padding: var(--s-space-3);
  border: var(--s-border-thin) solid var(--s-color-border-default);
  border-radius: var(--s-radius-lg);
  background: var(--s-color-surface-raised);
  box-shadow: none;
}

.project-nav__session-detail-title {
  margin: 0 0 var(--s-space-2);
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-default);
}

.project-nav__session-detail-meta {
  margin: 0 0 var(--s-space-3);
  font-size: var(--s-font-size-0);
  color: var(--s-color-fg-secondary);
}

.project-nav__session-detail-close {
  padding: var(--s-space-1) var(--s-space-2);
  border: var(--s-border-thin) solid var(--s-color-border-subtle);
  border-radius: var(--s-radius-md);
  background: var(--s-color-surface-default);
  color: var(--s-color-fg-secondary);
  font-size: var(--s-font-size-0);
  cursor: pointer;
}