1
/* Outline: lightweight heading TOC */
2
.tiptap-outline {
3
  display: flex;
4
  flex-direction: column;
5
  gap: 0.75rem;
6
  padding: 0.9rem 1rem;
7
  border: 1px solid var(--color-zinc-800);
8
  border-radius: 1rem;
9
  background: linear-gradient(180deg, rgba(27, 24, 26, 0.96), rgba(27, 24, 26, 0.92));
10
  color: var(--color-zinc-300);
11
  max-height: min(60vh, 32rem);
12
  overflow: auto;
13
}
14
 
15
.tiptap-outline__header {
16
  display: flex;
17
  align-items: center;
18
  gap: 0.5rem;
19
  color: var(--color-zinc-400);
20
  font-size: 0.7rem;
21
  font-weight: 600;
22
  letter-spacing: 0.08em;
23
  text-transform: uppercase;
24
}
25
 
26
.tiptap-outline__list {
27
  display: flex;
28
  flex-direction: column;
29
  gap: 0.2rem;
30
  min-width: 0;
31
}
32
 
33
.tiptap-outline__item {
34
  min-width: 0;
35
}
36
 
37
.tiptap-outline__button {
38
  display: flex;
39
  align-items: flex-start;
40
  gap: 0.45rem;
41
  width: 100%;
42
  min-width: 0;
43
  padding: 0.45rem 0.5rem;
44
  border: none;
45
  background: transparent;
46
  border-radius: 0.65rem;
47
  font: inherit;
48
  text-align: left;
49
  text-decoration: none;
50
  color: var(--color-zinc-400);
51
  cursor: pointer;
52
  transition:
53
    background-color 0.12s ease,
54
    color 0.12s ease;
55
}
56
 
57
.tiptap-outline__button:hover {
58
  background-color: var(--color-zinc-800);
59
  color: var(--color-zinc-100);
60
}
61
 
62
.tiptap-outline__button:focus-visible {
63
  outline: 1px solid var(--color-accent-500);
64
  outline-offset: 1px;
65
}
66
 
67
.tiptap-outline__button[data-active="true"] {
68
  background-color: color-mix(in srgb, var(--color-accent-500) 12%, transparent);
69
  color: var(--color-zinc-100);
70
}
71
 
72
.tiptap-outline__chevron {
73
  margin-top: 0.2rem;
74
  color: var(--color-zinc-600);
75
  flex-shrink: 0;
76
}
77
 
78
.tiptap-outline__button[data-active="true"] .tiptap-outline__chevron {
79
  color: var(--color-accent-400);
80
}
81
 
82
.tiptap-outline__text {
83
  min-width: 0;
84
  overflow: hidden;
85
  text-overflow: ellipsis;
86
  white-space: nowrap;
87
  font-size: 0.875rem;
88
  line-height: 1.45;
89
}
90
 
91
/* Rail variant: lightweight list without card container */
92
.tiptap-outline--rail {
93
  border: none;
94
  background: transparent;
95
  border-radius: 0;
96
  padding: 0;
97
  max-width: none;
98
  max-height: calc(100vh - 6rem);
99
}
100
 
101
.tiptap-outline--rail .tiptap-outline__button {
102
  border-radius: 0;
103
}