@import url("./custom.css");

.tree {
  margin: 0;
  padding: .65rem;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: .4rem;
  background: var(--surface);
}

.tree ul {
  margin: .2rem 0 0 1.1rem;
  padding-left: 1rem;
  list-style: none;
  border-left: 1px solid var(--line);
}

.tree .tree-row,
.tree summary {
  display: flex;
  align-items: center;
  min-height: 2.6rem;
  gap: .65rem;
  padding: .45rem .55rem;
  border-radius: .3rem;
}

.tree summary {
  cursor: pointer;
  color: var(--navy);
  font-weight: 650;
  list-style: none;
}

.tree summary::-webkit-details-marker {
  display: none;
}

.tree summary::before {
  content: "▸";
  flex: 0 0 .7rem;
  color: var(--muted);
  font-size: .8rem;
  transition: transform .15s ease;
}

.tree details[open] > summary::before {
  transform: rotate(90deg);
}

.tree details[id] {
  scroll-margin-top: 1rem;
}

.tree .icon {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--blue);
}

.tree .folder-icon {
  color: #c59624;
}

.tree .youtube-icon {
  color: #c5221f;
}

.tree .news-icon {
  color: #475569;
}

.tree .external-icon {
  color: var(--blue);
}

.tree .audio-icon {
  color: #6d4cc2;
}

.tree .tree-divider hr {
  margin: 1.25rem .55rem;
  border: 0;
  border-top: 1px solid var(--line);
}

.tree .tree-section-heading {
  margin: 1rem .55rem .35rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--line);
}

.tree .tree-section-heading:first-child {
  margin-top: .35rem;
}

.tree .tree-section-heading h3 {
  margin: 0;
  color: var(--navy);
  font-size: 1rem;
}

.tree .tree-section-heading-black h3 {
  color: #000;
}

@media (max-width: 520px) {
  .tree {
    padding: .35rem;
  }

  .tree ul {
    margin-left: .6rem;
    padding-left: .65rem;
  }

  .tree .tree-row,
  .tree summary {
    padding-inline: .35rem;
  }
}

/* Preserve paragraph breaks in complete passages from meeting minutes. */
.tree-preserve-paragraphs > p {
  white-space: pre-line;
}
/* Keep consecutive public comments easy to scan without adding heavy cards. */
.city-oversight-tree .tree-public-comment {
  padding: .8rem .2rem;
}

.city-oversight-tree .tree-public-comment > p {
  margin: 0;
}

.city-oversight-tree .tree-public-comment ~ .tree-public-comment {
  border-top: 1px solid var(--line);
}