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
75@layer components {
76  /* Repo list */
77  .repo-list { display: flex; flex-direction: column; }
78
79  .repo-card {
80    display: flex;
81    flex-direction: column;
82    gap: .5rem;
83    padding: 1rem 1.25rem;
84    text-decoration: none;
85    color: inherit;
86  }
87
88  .repo-card:hover { background: var(--highlight); }
89  .repo-name { font-size: 1.1rem; font-weight: 600; color: var(--emphasized); }
90  .repo-desc { color: var(--primary); }
91  .repo-meta { display: flex; justify-content: space-between; color: var(--secondary); }
92
93  /* Repo nav items */
94  .repo-nav-item {
95    display: flex;
96    align-items: center;
97    gap: 1rem;
98    padding: 0 1rem;
99    min-height: 50px;
100    text-decoration: none;
101    color: var(--primary);
102    font-family: var(--font-mono);
103    border-top: 1px solid var(--secondary);
104    transition: background-color .15s ease-out;
105  }
106
107  .repo-nav-item + .repo-nav-item { border-top: 1px solid var(--highlight); }
108  .repo-nav-item:last-child { border-bottom: 1px solid var(--secondary); }
109  .repo-nav-item:active { background-color: var(--highlight); transition: none; }
110  .repo-nav-item:hover > span:first-of-type { text-decoration: underline; text-underline-offset: 3px; }
111  .repo-nav-item-meta { margin-left: auto; color: var(--secondary); }
112  .repo-nav-item-arrow { color: var(--secondary); }
113
114  /* Tag info */
115  .tag-info {
116    display: grid;
117    grid-template-columns: max-content 1fr;
118    gap: .2rem 1.5rem;
119    font-family: var(--font-mono);
120    margin: 1.5rem 1rem 1.5rem;
121  }
122
123  .tag-info dt { color: var(--secondary); }
124  .tag-info dd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; }
125  .tag-info a { color: var(--primary); text-decoration: none; }
126  .tag-info a:hover { text-decoration: underline; text-underline-offset: 3px; }
127
128  .tag-message {
129    font-family: var(--font-mono);
130    padding: 1rem;
131    margin: 0 1rem 1rem;
132    background: var(--highlight);
133    border-radius: 6px;
134    white-space: pre-wrap;
135    color: var(--primary);
136  }
137
138  /* Branch / tag lists */
139  .branch-list, .tag-list { display: flex; flex-direction: column; }
140
141  .branch-row, .tag-row {
142    display: flex;
143    justify-content: space-between;
144    align-items: baseline;
145    padding: .75rem 1rem;
146    text-decoration: none;
147    color: inherit;
148    font-family: var(--font-mono);
149  }
150
151  .branch-row:hover, .tag-row:hover { background: var(--highlight); }
152
153  .branch-name, .tag-name {
154    overflow: hidden;
155    text-overflow: ellipsis;
156    white-space: nowrap;
157    min-width: 0;
158  }
159
160  .branch-default { color: var(--secondary); margin-right: 1rem; }
161
162  .branch-date, .tag-date {
163    display: flex;
164    align-items: baseline;
165    flex-shrink: 0;
166    color: var(--secondary);
167    padding-left: 1rem;
168  }
169
170  /* Commit log */
171  .commit-log { display: flex; flex-direction: column; }
172
173  .commit-row {
174    display: grid;
175    grid-template-columns: 5rem 1fr;
176    grid-template-rows: auto auto;
177    gap: .15rem 1rem;
178    padding: .75rem 1rem;
179    text-decoration: none;
180    color: inherit;
181    font-family: var(--font-mono);
182  }
183
184  .commit-row:hover { background: var(--highlight); }
185  .commit-sha { color: var(--secondary); grid-row: 1; }
186
187  .commit-message {
188    color: var(--primary);
189    grid-row: 1;
190    overflow: hidden;
191    text-overflow: ellipsis;
192    white-space: nowrap;
193  }
194
195  .commit-meta {
196    display: flex;
197    justify-content: space-between;
198    color: var(--secondary);
199    grid-column: 2;
200    grid-row: 2;
201    min-width: 0;
202  }
203
204  .commit-meta span:first-child {
205    overflow: hidden;
206    text-overflow: ellipsis;
207    white-space: nowrap;
208    min-width: 0;
209  }
210
211  .commit-meta span:last-child { flex-shrink: 0; padding-left: 1rem; }
212
213  /* Pagination */
214  .pagination { display: flex; justify-content: space-between; padding: .75rem 1rem; }
215  .pagination a { color: var(--secondary); text-decoration: none; }
216  .pagination a:hover { color: var(--primary); }
217
218  /* Details / summary */
219  details { border-top: 1px solid var(--highlight); }
220  details:first-of-type { border-top: 1px solid var(--secondary); }
221  details:last-of-type { border-bottom: 1px solid var(--highlight); }
222
223  summary {
224    cursor: pointer;
225    display: flex;
226    align-items: center;
227    gap: 1rem;
228    padding: 0 1rem;
229    min-height: 50px;
230    font-family: var(--font-mono);
231    background: var(--highlight);
232  }
233
234  .summary-icon { width: 1rem; height: 1rem; flex-shrink: 0; }
235
236  details[open] summary { color: var(--emphasized); }
237  summary::after { content: '[+]'; color: var(--secondary); }
238  summary:not(:has(span))::after { margin-left: auto; }
239  details[open] summary::after { content: '[−]'; }
240  summary span { color: var(--secondary); margin-left: auto; }
241
242  details > *:not(summary) { padding: 0 1rem .75rem; margin-bottom: 0; }
243  details > ul { list-style: none; padding: 0; margin: 0; }
244  details ul li + li { border-top: 1px solid var(--highlight); }
245
246  details ul li {
247    display: flex;
248    align-items: center;
249    gap: 1rem;
250    min-height: 50px;
251    padding: 0 1rem;
252    color: var(--secondary);
253    font-family: var(--font-mono);
254  }
255
256  details ul li:has(a),
257  details ul li:has(button) { padding: 0; }
258
259  details ul li a,
260  details ul li button {
261    display: flex;
262    align-items: center;
263    gap: 1rem;
264    padding: 0 1rem;
265    min-height: 50px;
266    width: 100%;
267    text-align: left;
268    text-decoration: none;
269    color: inherit;
270    background: transparent;
271    border: none;
272    cursor: pointer;
273    font-family: var(--font-mono);
274    font-size: 1rem;
275    transition: background-color .15s ease-out;
276  }
277
278  details ul li a:active,
279  details ul li button:active { background-color: var(--highlight); transition: none; }
280
281  details ul li a:hover span:first-child,
282  details ul li button:hover span:first-child { text-decoration: underline; text-underline-offset: 3px; }
283
284  /* First span grows; truncates on overflow */
285  details ul li a span:first-child,
286  details ul li button span:first-child {
287    flex: 1;
288    min-width: 0;
289    overflow: hidden;
290    text-overflow: ellipsis;
291    white-space: nowrap;
292    color: var(--primary);
293  }
294
295  /* Clone rows: URL animates on copy */
296  details ul li button span:first-child { transition: opacity .1s; }
297  details ul li button span:nth-child(2) {
298    flex-shrink: 0;
299    min-width: 4rem;
300    text-align: right;
301    color: var(--secondary);
302  }
303
304  /* Branch/tag rows: remaining spans fixed right */
305  details ul li a span:not(:first-child) { flex-shrink: 0; color: var(--secondary); }
306}
307
308@layer accents {
309  .branch-name { color: var(--blue); }
310  .tag-name { color: var(--violet); }
311  .archive-link { color: var(--orange); }
312  .commit-sha { color: var(--cyan); }
313}