/* ── static/css/topic-tree.css ───────────────────────────────────────────────
   Hierarchical topic-tree browse page styles.
   Structural layout uses Bootstrap 5 utilities in topics.html.
   Token pattern: --tt-* defaults aliased to global theme vars from theme.css,
   then overridden in [data-bs-theme="dark"], following the graph.css convention.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Design tokens — light default ──────────────────────────────────────── */
:root {
  --tt-bg:              var(--bg,          #f0f4f8);
  --tt-card-bg:         var(--bg-elevated, #f7fafc);
  --tt-card-border:     var(--border,      #c8d8e8);
  --tt-text:            var(--text,        #1a2a38);
  --tt-text-muted:      var(--text-muted,  #5a7888);
  --tt-accent:          #b07a10;
  --tt-accent-hover:    #d09520;
  --tt-crumb-link:      var(--link,        #2a6080);
  --tt-topic-bg:        var(--bg-surface,  #e8eef5);
  --tt-topic-border:    var(--border,      #c8d8e8);
  --tt-topic-hover-bg:  #dce6f0;
  --tt-topic-hover-bdr: #9aadc0;
}

/* ── Dark mode ────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] {
  --tt-bg:              var(--bg,          #090e14);
  --tt-card-bg:         var(--bg-elevated, #0b1520);
  --tt-card-border:     var(--border,      #1a2e40);
  --tt-text:            var(--text,        #c4d8e8);
  --tt-text-muted:      var(--text-muted,  #4a6a7c);
  --tt-accent:          #e8c36a;
  --tt-accent-hover:    #f5d880;
  --tt-crumb-link:      var(--link,        #6ab4cc);
  --tt-topic-bg:        var(--bg-surface,  #0d1621);
  --tt-topic-border:    var(--border,      #1a2e40);
  --tt-topic-hover-bg:  #0f1e2e;
  --tt-topic-hover-bdr: #2a4a60;
}

/* ── Page root ────────────────────────────────────────────────────────────── */
#topic-tree-page {
  padding: 1.5rem;
  max-width: var(--measure, 900px);
  margin: 0 auto;
  color: var(--tt-text);
}

/* ── Description (post count) ────────────────────────────────────────────── */
.tt-description {
  font-size: 13px;
  color: var(--tt-text-muted);
  margin-bottom: 1rem;
  min-height: 1.4em;
}
.tt-description:empty { display: none; }

/* ── Breadcrumb ───────────────────────────────────────────────────────────── */
.tt-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 0.5rem;
  font-size: 14px;
}

.tt-crumb-link {
  color: var(--tt-crumb-link);
  text-decoration: none;
}
.tt-crumb-link:hover { text-decoration: underline; }

.tt-crumb-current {
  color: var(--tt-text);
  font-weight: 600;
}

.tt-crumb-sep {
  color: var(--tt-text-muted);
  user-select: none;
  padding: 0 2px;
}

.tt-crumb-count {
  font-size: 11px;
  color: var(--tt-text-muted);
  font-weight: 400;
  margin-left: 2px;
}

/* ── Card grid ────────────────────────────────────────────────────────────── */
.tt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

/* ── Topic card (drillable cluster) ──────────────────────────────────────── */
.tt-card-topic {
  background: var(--tt-topic-bg);
  border: 1px solid var(--tt-topic-border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.tt-card-topic:hover,
.tt-card-topic:focus-visible {
  background: var(--tt-topic-hover-bg);
  border-color: var(--tt-topic-hover-bdr);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  outline: 2px solid var(--tt-accent);
  outline-offset: 2px;
}

.tt-card-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--tt-text);
  line-height: 1.35;
}

.tt-card-rep {
  font-size: 12px;
  color: var(--tt-text-muted);
  font-style: italic;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tt-card-rep:empty { display: none; }

.tt-card-count {
  font-size: 11px;
  color: var(--tt-accent);
  font-weight: 500;
  margin-top: auto;
  padding-top: 0.25rem;
}

/* ── Post leaf card ───────────────────────────────────────────────────────── */
.tt-card-post {
  background: var(--tt-card-bg);
  border: 1px solid var(--tt-card-border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-decoration: none;
  color: var(--tt-text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.tt-card-post:hover {
  border-color: var(--tt-accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  color: var(--tt-text);
  text-decoration: none;
}


.tt-card-type {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tt-text-muted);
}

.tt-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--tt-text);
  line-height: 1.35;
}

.tt-card-desc {
  font-size: 12px;
  color: var(--tt-text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tt-card-desc:empty { display: none; }

.tt-card-date {
  font-size: 11px;
  color: var(--tt-text-muted);
  margin-top: auto;
  padding-top: 0.25rem;
}
.tt-card-date:empty { display: none; }

/* ── Empty state ──────────────────────────────────────────────────────────── */
.tt-empty {
  color: var(--tt-text-muted);
  font-size: 14px;
  grid-column: 1 / -1;
  padding: 2rem 0;
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  #topic-tree-page { padding: 1rem; }
  .tt-grid { grid-template-columns: 1fr; gap: 0.75rem; }
  .tt-breadcrumb { font-size: 13px; }
}