/* Navigation and read-only views for revisiting saved Giddyapp project state. */
.app-navigation,
.project-browser-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  margin-block: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background: rgba(4, 12, 24, 0.48);
}

.app-navigation button,
.project-browser-nav button {
  min-height: 2.35rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.86rem;
}

.app-navigation button[aria-current="page"],
.project-browser-nav button[aria-current="page"],
.project-browser-nav button[data-active="true"] {
  border-color: var(--color-accent-strong);
  background: rgba(95, 159, 215, 0.18);
  color: var(--color-text);
}

.project-browser,
.project-browser-view,
.project-browser-section,
.project-browser-record-list {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.project-browser-heading,
.project-browser-view-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.project-browser-heading h2,
.project-browser-view-heading h2,
.project-browser-section h3 {
  margin-bottom: 0.3rem;
}

.project-browser-heading p,
.project-browser-view-heading p {
  margin-bottom: 0;
}

.project-browser-status,
.project-browser-current,
.project-browser-record {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: rgba(4, 12, 24, 0.42);
}

.project-browser-status,
.project-browser-current {
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.project-browser-status[data-status="running"],
.project-browser-status[data-status="in_progress"] {
  border-color: rgba(240, 198, 116, 0.42);
}

.project-browser-status[data-status="completed"],
.project-browser-status[data-status="ready"] {
  border-color: rgba(125, 227, 172, 0.4);
}

.project-browser-status[data-status="paused"],
.project-browser-status[data-status="error"],
.project-browser-status[data-status="stopped"] {
  border-color: rgba(240, 138, 138, 0.42);
}

.project-browser-record-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-browser-record h3,
.project-browser-record h4 {
  margin-bottom: 0.35rem;
  overflow-wrap: anywhere;
}

.project-browser-record p:last-child {
  margin-bottom: 0;
}

.project-browser-record pre,
.project-browser-content {
  max-height: 32rem;
  overflow: auto;
  margin: 0.65rem 0 0;
  padding: 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: rgba(4, 12, 24, 0.72);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.84rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.project-browser-empty {
  padding: 1rem;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-small);
  color: var(--color-text-quiet);
  text-align: center;
}

.project-browser :where(button, a, summary):focus-visible,
.app-navigation button:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

@media (max-width: 680px) {
  .app-navigation,
  .project-browser-nav {
    align-items: stretch;
    flex-direction: column;
  }

  .app-navigation button,
  .project-browser-nav button {
    width: 100%;
  }

  .project-browser-heading,
  .project-browser-view-heading {
    flex-direction: column;
  }
}