1@layer reset, layout, components, accents;
2
3@layer reset {
4  *, *::before, *::after { box-sizing: border-box; }
5  html { overflow-x: clip; }
6}
7
8@layer layout {
9  body {
10    font-family: var(--font-body);
11    max-width: 860px;
12    margin: 0 auto;
13    padding: 0;
14    background: var(--background);
15    color: var(--primary);
16  }
17
18  header {
19    padding: .75rem 1rem;
20    margin-bottom: .75rem;
21  }
22
23  header ul {
24    list-style: none;
25    margin: 0;
26    padding: 0;
27    display: flex;
28    align-items: center;
29    gap: .25rem;
30    font-size: 1.2rem;
31    min-width: 0;
32  }
33
34  header li {
35    white-space: nowrap;
36    overflow: hidden;
37    text-overflow: ellipsis;
38    min-width: 0;
39  }
40
41  header li:first-child { flex-shrink: 0; }
42  header li:last-child { flex-shrink: 1; }
43
44  header li + li::before {
45    content: '/';
46    margin-right: .25rem;
47    color: var(--secondary);
48  }
49
50  header a {
51    color: var(--primary);
52    text-decoration: none;
53  }
54
55  header a:hover {
56    color: var(--emphasized);
57    text-decoration: underline;
58    text-underline-offset: 3px;
59  }
60
61  main > h1, main > p { padding-inline: 1rem; }
62  main > h1 { margin-bottom: .75rem; }
63  main > p { margin-top: 0; }
64  main > article { padding: 0 1rem; }
65
66  footer {
67    padding: 1rem;
68    margin-top: 2rem;
69    color: var(--secondary);
70    font-size: .875rem;
71    text-align: center;
72  }
73
74  footer a { color: var(--blue); text-decoration: none; }
75  footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
76}
77
78@layer components {
79  /* Repo list */
80  .repo-list { display: flex; flex-direction: column; }
81
82  .repo-card {
83    display: flex;
84    flex-direction: column;
85    gap: .5rem;
86    padding: 1rem 1.25rem;
87    text-decoration: none;
88    color: inherit;
89  }
90
91  .repo-card:hover { background: var(--highlight); }
92  .repo-name { font-size: 1.1rem; font-weight: 600; color: var(--emphasized); }
93  .repo-desc { color: var(--primary); }
94  .repo-meta { display: flex; justify-content: space-between; color: var(--secondary); }
95
96  /* Repo nav items */
97  .repo-nav-item {
98    display: flex;
99    align-items: center;
100    gap: 1rem;
101    padding: 0 1rem;
102    min-height: 50px;
103    text-decoration: none;
104    color: var(--primary);
105    font-family: var(--font-mono);
106    border-top: 1px solid var(--secondary);
107    }
108
109  .repo-nav-item + .repo-nav-item { border-top: 1px solid var(--highlight); }
110  .repo-nav-item:last-child { border-bottom: 1px solid var(--secondary); }
111  .repo-nav-item:active { background-color: var(--highlight); }
112  .repo-nav-item:hover > span:first-of-type { text-decoration: underline; text-underline-offset: 3px; }
113  .repo-nav-item-meta { margin-left: auto; color: var(--secondary); }
114  .repo-nav-item-arrow { color: var(--secondary); }
115
116  /* Tag info */
117  .tag-info {
118    display: grid;
119    grid-template-columns: max-content 1fr;
120    gap: .2rem 1.5rem;
121    font-family: var(--font-mono);
122    margin: 1.5rem 1rem 1.5rem;
123  }
124
125  .tag-info dt { color: var(--secondary); }
126  .tag-info dd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; }
127  .tag-info a { color: var(--primary); text-decoration: none; }
128  .tag-info a:hover { text-decoration: underline; text-underline-offset: 3px; }
129
130  .tag-message {
131    font-family: var(--font-mono);
132    padding: 1rem;
133    margin: 0 1rem 1rem;
134    background: var(--highlight);
135    border-radius: 6px;
136    white-space: pre-wrap;
137    color: var(--primary);
138  }
139
140  /* Branch / tag lists */
141  .branch-list, .tag-list { display: flex; flex-direction: column; }
142
143  .branch-row, .tag-row {
144    display: flex;
145    justify-content: space-between;
146    align-items: baseline;
147    padding: .75rem 1rem;
148    text-decoration: none;
149    color: inherit;
150    font-family: var(--font-mono);
151  }
152
153  .branch-row:hover, .tag-row:hover { background: var(--highlight); }
154
155  .branch-name, .tag-name {
156    overflow: hidden;
157    text-overflow: ellipsis;
158    white-space: nowrap;
159    min-width: 0;
160  }
161
162  .branch-default { color: var(--secondary); margin-right: 1rem; }
163
164  .branch-date, .tag-date {
165    display: flex;
166    align-items: baseline;
167    flex-shrink: 0;
168    color: var(--secondary);
169    padding-left: 1rem;
170  }
171
172  /* Commit log */
173  .commit-log { display: flex; flex-direction: column; }
174
175  .commit-row {
176    display: grid;
177    grid-template-columns: 5rem 1fr;
178    grid-template-rows: auto auto;
179    gap: .15rem 1rem;
180    padding: .75rem 1rem;
181    text-decoration: none;
182    color: inherit;
183    font-family: var(--font-mono);
184  }
185
186  .commit-row:hover { background: var(--highlight); }
187  .commit-sha { color: var(--secondary); grid-row: 1; }
188
189  .commit-message {
190    color: var(--primary);
191    grid-row: 1;
192    overflow: hidden;
193    text-overflow: ellipsis;
194    white-space: nowrap;
195  }
196
197  .commit-meta {
198    display: flex;
199    justify-content: space-between;
200    color: var(--secondary);
201    grid-column: 2;
202    grid-row: 2;
203    min-width: 0;
204  }
205
206  .commit-meta span:first-child {
207    overflow: hidden;
208    text-overflow: ellipsis;
209    white-space: nowrap;
210    min-width: 0;
211  }
212
213  .commit-meta span:last-child { flex-shrink: 0; padding-left: 1rem; }
214
215  /* Commit graph layout */
216  .commit-graph-layout {
217    display: flex;
218    align-items: flex-start;
219    overflow-x: auto;
220  }
221
222  .commit-graph-svg {
223    flex-shrink: 0;
224    max-width: 12rem;
225    overflow-x: auto;
226  }
227
228  .commit-graph-svg > svg {
229    display: block;
230  }
231
232  .commit-graph-rows {
233    flex: 1;
234    display: flex;
235    flex-direction: column;
236    min-width: 0;
237  }
238
239  .commit-graph-row {
240    height: 40px;
241    display: flex;
242    align-items: center;
243    gap: 1rem;
244    padding-right: 1rem;
245    min-width: max-content;
246    text-decoration: none;
247    color: inherit;
248    font-family: var(--font-mono);
249  }
250
251  .commit-graph-row:hover { background: var(--highlight); }
252
253  .commit-graph-row .commit-message {
254    flex: 1;
255    overflow: hidden;
256    text-overflow: ellipsis;
257    white-space: nowrap;
258  }
259
260  .commit-date {
261    flex-shrink: 0;
262    color: var(--secondary);
263  }
264
265  /* Pagination */
266  .pagination { display: flex; justify-content: space-between; padding: .75rem 1rem; font-size: 1rem; font-family: var(--font-mono); }
267  .pagination a, .pagination span { flex: 1; text-align: center; }
268  .pagination a { color: var(--secondary); text-decoration: none; }
269  .pagination a:hover span:not(.pagination-sym) { text-decoration: underline; text-underline-offset: 3px; }
270
271  /* Details / summary */
272  details { border-top: 1px solid var(--highlight); }
273  details:first-of-type { border-top: 1px solid var(--secondary); }
274  details:last-of-type { border-bottom: 1px solid var(--highlight); }
275
276  summary {
277    cursor: pointer;
278    display: flex;
279    align-items: center;
280    gap: 1rem;
281    padding: 0 1rem;
282    min-height: 50px;
283    font-family: var(--font-mono);
284    background: var(--highlight);
285  }
286
287  .summary-icon { width: 1rem; height: 1rem; flex-shrink: 0; }
288
289  details[open] summary { color: var(--emphasized); }
290  summary::after { content: '[+]'; color: var(--secondary); }
291  summary:not(:has(span))::after { margin-left: auto; }
292  details[open] summary::after { content: '[−]'; }
293  summary span { color: var(--secondary); margin-left: auto; }
294
295  details > *:not(summary) { padding: 0 1rem .75rem; margin-bottom: 0; }
296  details > ul { list-style: none; padding: 0; margin: 0; }
297  details ul li + li { border-top: 1px solid var(--highlight); }
298
299  details ul li {
300    display: flex;
301    align-items: center;
302    gap: 1rem;
303    min-height: 50px;
304    padding: 0 1rem;
305    color: var(--secondary);
306    font-family: var(--font-mono);
307  }
308
309  details ul li:has(a),
310  details ul li:has(button) { padding: 0; }
311
312  details ul li a,
313  details ul li button {
314    display: flex;
315    align-items: center;
316    gap: 1rem;
317    padding: 0 1rem;
318    min-height: 50px;
319    width: 100%;
320    text-align: left;
321    text-decoration: none;
322    color: inherit;
323    background: transparent;
324    border: none;
325    cursor: pointer;
326    font-family: var(--font-mono);
327    font-size: 1rem;
328    }
329
330  details ul li a:active { background-color: var(--highlight); }
331
332  details ul li a:hover span:first-child,
333  details ul li button:hover span:first-child { text-decoration: underline; text-underline-offset: 3px; }
334
335  details ul li a.see-all span:first-child { color: var(--secondary); }
336
337  /* First span grows; truncates on overflow */
338  details ul li a span:first-child,
339  details ul li button span:first-child {
340    flex: 1;
341    min-width: 0;
342    overflow: hidden;
343    text-overflow: ellipsis;
344    white-space: nowrap;
345    color: var(--primary);
346  }
347
348  /* Clone rows: URL animates on copy */
349  details ul li button span:first-child { transition: opacity .1s; }
350  details ul li button span:nth-child(2) {
351    flex-shrink: 0;
352    min-width: 4rem;
353    text-align: right;
354    color: var(--secondary);
355  }
356
357  /* Branch/tag rows: remaining spans fixed right */
358  details ul li a span:not(:first-child) { flex-shrink: 0; color: var(--secondary); }
359}
360
361@layer accents {
362  .branch-name { color: var(--blue); }
363  .tag-name { color: var(--violet); }
364  .archive-link { color: var(--orange); }
365  .commit-sha { color: var(--cyan); }
366}