1@layer components {
2 /* tables in a card, with a row cursor (j/k) */
3 .list {
4 width: 100%; table-layout: fixed;
5 background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r);
6 border-collapse: separate; overflow: hidden;
7 & th {
8 height: 40px; padding: 0 var(--s3); white-space: nowrap;
9 font: 600 var(--fs-xs) / 1 var(--font); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-mute);
10 background: var(--bg-raised); border-bottom: 1px solid var(--border);
11 }
12 & th a { text-decoration: none; }
13 & th a:hover { color: var(--ink-hi); }
14 & th[aria-sort="ascending"], & th[aria-sort="descending"] { color: var(--ink-hi); }
15 & td { height: 40px; padding: 0 var(--s3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-top: 1px solid var(--border); }
16 & tbody tr:first-child td { border-top: 0; }
17 & tbody tr:hover { background: var(--bg-raised); }
18 /* the cursor: the row raised, framed by one even line */
19 & tbody tr[data-cursor] { background: var(--bg-raised); outline: 1px solid var(--accent); outline-offset: -1px; }
20 & tbody tr[hidden] { display: none; }
21 & td > a { text-decoration: none; }
22 & td > a:first-child { color: var(--ink-hi); }
23 & tr:hover td > a:first-child, & tr[data-cursor] td > a:first-child { text-decoration: underline; }
24 & .c-sha, & .c-ref, & .c-kind, & .c-size, & .c-n { font-family: var(--mono); font-size: var(--fs-s); }
25 & .c-sha a { color: var(--ink-dim); }
26 & .c-when, & .c-who { font-size: var(--fs-s); }
27 & .c-sub { color: var(--ink-dim); }
28 }
29
30 /* home: the repositories as rows in a vertical list; the page is a stack of
31 sections, so others can sit beside or below */
32 .home {
33 display: flex; flex-direction: column; gap: var(--s5);
34 & .home-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s4); margin-bottom: var(--s4); }
35 & .home-bar .filter { flex: 1 1 260px; }
36 & .sort { display: flex; align-items: center; gap: var(--s1); font-size: var(--fs-s); }
37 & .sort > .mute { margin-right: var(--s1); }
38 & .sort a {
39 display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 var(--s2);
40 color: var(--ink-dim); text-decoration: none; border: 1px solid transparent; border-radius: var(--r-s);
41 }
42 & .sort a:hover { color: var(--ink-hi); background: var(--bg-raised); }
43 & .sort a[aria-current="true"] { color: var(--ink-hi); background: var(--bg-raised); border-color: var(--border-strong); }
44 }
45 /* a row: name, description and facts on the left; the state of the latest
46 run at the top right, the newest commits under it. Stacked on a phone. */
47 .repos {
48 display: flex; flex-direction: column; gap: var(--s3);
49 margin: 0; padding: 0; list-style: none;
50 & .repo {
51 display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "main head" "main recent";
52 grid-template-rows: auto 1fr; column-gap: var(--s6); row-gap: var(--s3); min-width: 0;
53 padding: var(--s4); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r);
54 }
55 & .repo:hover { background: var(--bg-raised); border-color: var(--border-strong); }
56 & .repo[data-cursor] { background: var(--bg-raised); border-color: var(--accent); }
57 & .repo[hidden] { display: none; }
58 & .repo-main { grid-area: main; display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
59 & .repo-name { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s1) var(--s2); font-family: var(--mono); font-size: 17px; line-height: 26px; overflow-wrap: anywhere; }
60 & .repo-name a { color: var(--ink-hi); text-decoration: none; }
61 & .repo:hover .repo-name a, & .repo[data-cursor] .repo-name a { text-decoration: underline; }
62 & .repo-name .pill { margin-left: 0; }
63 /* Every card has the same height: two lines of description, one of topics
64 (reserved when there are none), five of commits. */
65 & .repo-desc {
66 color: var(--ink-dim); min-height: calc(2 * var(--lh));
67 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
68 }
69 & .repo-desc.mute { color: var(--ink-mute); font-style: italic; }
70 /* topics: small quiet chips, as on GitHub, on one line. The chips that do
71 not fit wrap out of sight; ermite.fit (ermite.js) puts a … chip after
72 the last one shown, the hidden topics in its title. */
73 & .repo-topics {
74 display: flex; flex-wrap: wrap; gap: 6px; height: 22px; overflow: hidden;
75 margin: 0; padding: 0; list-style: none;
76 }
77 & .repo-topics li {
78 flex: none; padding: 1px 9px; border: 1px solid var(--border-strong); border-radius: 999px;
79 font-family: var(--mono); font-size: 12px; line-height: 18px; color: var(--teal); background: var(--bg-raised);
80 }
81 & .repo-topics li[hidden] { display: none; }
82 & .repo-topics li.more { padding: 0; }
83 & .repo-topics li.more button {
84 padding: 1px 7px; border: 0; border-radius: 999px; background: none; cursor: pointer;
85 font: inherit; line-height: 18px; color: var(--ink-mute);
86 }
87 & .repo-topics li.more button:hover { color: var(--accent); }
88 & .repo-topics[data-open] { height: auto; }
89 /* the pulse: the commits per day over 90 days, smoothed, under the text */
90 & .repo-pulse { margin: auto 0 0; padding-top: var(--s2); }
91 /* as tall as a drawn pulse: the padding comes on top of the ratio */
92 & div.repo-pulse { aspect-ratio: 600 / 64; box-sizing: content-box; }
93 & .repo-pulse svg { display: block; width: 100%; height: auto; overflow: visible; }
94 & .pulse-grid { fill: none; stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 4; }
95 & .pulse-stop-top { stop-color: var(--teal); stop-opacity: .32; }
96 & .pulse-stop-bottom { stop-color: var(--teal); stop-opacity: 0; }
97 & .pulse-line { fill: none; stroke: var(--teal); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
98 & .pulse-dot { fill: var(--teal); stroke: var(--bg-surface); stroke-width: 1.5; }
99 & .repo:hover .pulse-dot, & .repo[data-cursor] .pulse-dot { stroke: var(--bg-raised); }
100 & .repo-pulse:not([data-live]) .pulse-line { stroke: var(--ink-mute); }
101 & .repo-pulse:not([data-live]) .pulse-dot { fill: var(--ink-mute); }
102 & .repo-pulse:not([data-live]) .pulse-stop-top { stop-color: var(--ink-mute); stop-opacity: .18; }
103 /* the right column: figures, then the CI state, over the commits */
104 & .repo-head { grid-area: head; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3) var(--s5); min-width: 0; }
105 /* the figures: a small label over a mono value, side by side */
106 & .repo-stats { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin: 0; min-width: 0; }
107 & .repo-stats div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
108 & .repo-stats dt { font-size: 11px; line-height: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; }
109 & .repo-stats dd { margin: 0; font-family: var(--mono); font-size: 15px; line-height: 20px; color: var(--ink-hi); font-variant-numeric: tabular-nums; white-space: nowrap; }
110 & .repo-stats .rs-tag dd { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; }
111 & .repo-stats dd.mute { color: var(--ink-mute); }
112 & .repo-stats dd a { color: inherit; text-decoration: none; }
113 & .repo-stats dd a:hover { text-decoration: underline; }
114 & .repo-ci {
115 flex: none; display: inline-flex; align-items: center; gap: var(--s1); padding-top: 2px;
116 font-size: var(--fs-s); color: var(--ink-dim); text-decoration: none; white-space: nowrap;
117 }
118 & .repo-ci:hover { color: var(--ink-hi); text-decoration: underline; }
119 & .repo-ci .ck { margin: 0; }
120 & .repo-commits {
121 grid-area: recent; min-width: 0; margin: 0; padding: 0; list-style: none; font-size: var(--fs-s);
122 min-height: calc(5 * (var(--lh) + 4px)); /* five rows, full or not */
123 }
124 & p.repo-commits { font-style: italic; }
125 & .repo-commits li { display: flex; align-items: baseline; gap: var(--s2); min-width: 0; padding: 2px 0; }
126 & .rc-sha { flex: none; font-family: var(--mono); color: var(--ink-dim); text-decoration: none; }
127 & .rc-sha:hover { color: var(--ink-hi); text-decoration: underline; }
128 & .rc-subject { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-hi); }
129 & .repo-commits time { flex: none; white-space: nowrap; }
130 /* a full list goes on: its last commit fades */
131 & .repo-commits[data-full] li:last-child { opacity: .65; }
132 @media (max-width: 720px) {
133 & .repo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "head" "recent"; grid-template-rows: none; }
134 & .repo-head { flex-wrap: wrap; }
135 & .repo-commits { min-height: 0; }
136 }
137 }
138 /* Home layouts. The server renders "cards" (the rules above); a script
139 sets .home[data-layout] from the stored choice. The rows carry no markup
140 of their own for a layout, so a row swapped in by a live update fits. */
141 .home .layout-switch { display: flex; align-items: center; gap: 2px; }
142 .home .layout-switch .btn {
143 width: 28px; height: 28px; color: var(--ink-dim); background: none; border-color: transparent; border-radius: var(--r-s);
144 &:hover { color: var(--ink-hi); background: var(--bg-raised); }
145 &[aria-pressed="true"] { color: var(--ink-hi); background: var(--bg-raised); border-color: var(--border-strong); }
146 }
147 .home .home-bar .sort { margin-left: auto; }
148
149 /* split: two denser cards side by side. Name and CI state on top, the
150 description, the pulse as a band from edge to edge, the figures in one
151 row and the two newest commits. One column on a narrow screen. */
152 .home[data-layout="split"] {
153 & .repos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
154 & .repo {
155 grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s3); row-gap: 0;
156 grid-template-areas: "name ci" "desc desc" "topics topics" "pulse pulse" "stats stats" "recent recent";
157 grid-template-rows: auto 1fr auto auto auto auto;
158 overflow: hidden;
159 }
160 & .repo-main, & .repo-head { display: contents; }
161 & .repo-name { grid-area: name; align-self: center; font-size: 16px; }
162 & .repo-ci { grid-area: ci; align-self: center; padding-top: 0; }
163 & .repo-desc { grid-area: desc; margin-top: var(--s2); }
164 & .repo-topics { grid-area: topics; margin-top: var(--s2); }
165 & .repo-topics:empty { display: none; }
166 & .repo-pulse { grid-area: pulse; margin: var(--s3) calc(-1 * var(--s4)) 0; padding: 0; border-block: 1px solid var(--border); }
167 /* one row while it fits; a narrow card wraps the figures instead of
168 letting them overlap */
169 & .repo-stats { grid-area: stats; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s3); margin-top: var(--s3); }
170 & .repo-stats div { flex: none; }
171 & .repo-stats dd { font-size: var(--fs); }
172 & .repo-stats .rs-tag dd { max-width: 12ch; }
173 & .repo-commits { grid-area: recent; min-height: calc(2 * (var(--lh) + 4px)); margin-top: var(--s2); }
174 & .repo-commits li:nth-child(n+3) { display: none; }
175 & .repo-commits[data-full] li:last-child { opacity: 1; }
176 & .repo-commits[data-full] li:nth-child(2) { opacity: .65; }
177 }
178 @media (max-width: 900px) {
179 .home[data-layout="split"] .repos { grid-template-columns: minmax(0, 1fr); }
180 }
181
182 /* compact: a line per repository. Name, description, figures, CI mark and
183 a small pulse sit in one grid row; the commits and topics are left out.
184 The rows share the columns of the list (subgrid): the name column is as
185 wide as the longest name, the figures line up, and the description takes
186 what is left. */
187 .home[data-layout="compact"] {
188 & .repos {
189 display: grid; grid-template-columns: fit-content(18rem) minmax(0, 1fr) auto auto 140px;
190 gap: var(--s2) var(--s4);
191 }
192 & .repo {
193 grid-column: 1 / -1; grid-template-columns: subgrid;
194 grid-template-areas: "name desc stats ci pulse";
195 /* normal: the row takes the gaps of the list */
196 grid-template-rows: none; column-gap: normal; row-gap: 0; align-items: center;
197 padding: var(--s2) var(--s4);
198 }
199 & .repo-main, & .repo-head { display: contents; }
200 & .repo-topics, & .repo-commits { display: none; }
201 /* min-width 0: a long name is cut, it does not widen the column past its cap */
202 & .repo-name { grid-area: name; min-width: 0; flex-wrap: nowrap; gap: var(--s2); font-size: var(--fs); line-height: 24px; overflow-wrap: normal; }
203 & .repo-name a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
204 & .repo-name .pill { flex: none; }
205 & .repo-desc {
206 grid-area: desc; display: block; min-height: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
207 font-size: var(--fs-s); color: var(--ink-mute);
208 }
209 /* figures inline, the value before its label; the label of the date and
210 of the tag is left to screen readers */
211 & .repo-stats { grid-area: stats; flex-wrap: nowrap; gap: var(--s3); overflow: hidden; }
212 & .repo-stats div { flex-direction: row; align-items: baseline; gap: 4px; flex: none; }
213 & .repo-stats dt { order: 1; font-size: var(--fs-xs); line-height: 16px; letter-spacing: 0; text-transform: none; }
214 & .repo-stats dd { font-size: var(--fs-xs); line-height: 16px; color: var(--ink-dim); }
215 & .repo-stats .rs-active dt, & .repo-stats .rs-tag dt {
216 position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
217 }
218 & .repo-stats .rs-tag dd { max-width: 10ch; }
219 & .repo-stats .rs-tag dd::before {
220 content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 3px; vertical-align: -2px;
221 background: currentColor; mask: url(icons/tag.svg) center / contain no-repeat;
222 }
223 /* the CI state is its mark; the word is in the tooltip and for screen readers */
224 & .repo-ci { grid-area: ci; justify-self: center; padding-top: 0; }
225 & .repo-ci .ci-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
226 /* the pulse: the same curve, small, with a bigger dot to stay seen */
227 & .repo-pulse { grid-area: pulse; width: 100%; height: 100%; min-height: 18px; margin: 0; padding: 0; }
228 & div.repo-pulse { aspect-ratio: auto; box-sizing: border-box; }
229 & .repo-pulse svg { position: relative; top: 50%; transform: translateY(-50%); }
230 & .pulse-grid { display: none; }
231 & .pulse-dot { r: 9px; stroke: none; }
232 }
233 @media (max-width: 1100px) {
234 .home[data-layout="compact"] .repos { grid-template-columns: fit-content(14rem) minmax(0, 1fr) auto auto 96px; column-gap: var(--s3); }
235 .home[data-layout="compact"] .repo-stats .rs-tag { display: none; }
236 }
237 /* on a phone: name and CI state on a line, the description and the figures
238 under it; the pulse is dropped */
239 @media (max-width: 720px) {
240 .home[data-layout="compact"] .repo {
241 grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name ci" "desc desc" "stats stats"; column-gap: var(--s3); row-gap: 2px;
242 }
243 .home[data-layout="compact"] .repo-pulse { display: none; }
244 .home[data-layout="compact"] .repo-stats .rs-tag { display: flex; }
245 }
246 .list.passkeys {
247 & .c-name { width: auto; font-weight: 600; }
248 & .c-when { width: 120px; font-size: var(--fs-s); }
249 & .c-sync { width: 80px; font-size: var(--fs-s); }
250 & .c-act { width: 110px; text-align: right; }
251 }
252 .passkey-add {
253 display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-top: var(--s4);
254 & input {
255 flex: 1; min-width: 12ch; max-width: 320px; height: 32px; padding: 0 var(--s3);
256 background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--r-s);
257 }
258 & input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
259 & input::placeholder { color: var(--ink-mute); opacity: 1; }
260 }
261 .list.commits, .list.refs {
262 & .c-sha { width: 96px; }
263 & .c-who { width: 140px; }
264 & .c-when { width: 100px; }
265 }
266
267 /* filter: a search field above a list */
268 .filter {
269 position: relative; display: flex; max-width: 420px;
270 &::before {
271 content: ""; position: absolute; left: 11px; top: 10px; width: 16px; height: 16px; pointer-events: none;
272 background: var(--ink-mute); mask: url(icons/search.svg) center / contain no-repeat;
273 }
274 &::after {
275 content: "/"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
276 font: 600 var(--fs-xs) / 18px var(--mono); color: var(--ink-mute); padding: 0 6px;
277 border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px; pointer-events: none;
278 }
279 & input {
280 flex: 1; min-width: 0; height: 36px; padding: 0 36px 0 34px;
281 background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--r-s);
282 }
283 & input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
284 & input::placeholder { color: var(--ink-mute); opacity: 1; }
285 &:focus-within::after { display: none; }
286 }
287
288 /* file finder: the results replace the tree while the field has a query */
289 #finder {
290 & #finder-status { padding: var(--s3) var(--s4) var(--s2); font-size: var(--fs-s); }
291 & #finder-list { padding: 0 var(--s2) var(--s2); }
292 }
293
294 /* the Files view: the finder on top, the tree in a card under it */
295 .tree-find {
296 display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s3);
297 & .filter { flex: 1; max-width: none; }
298 & .filter::before { top: 14px; left: 14px; }
299 & .filter::after { right: 12px; }
300 & .filter input { height: 44px; padding-left: 42px; font-size: var(--fs); background: var(--bg-surface); }
301 }
302 .tree-keys { flex: none; color: var(--ink-mute); font-size: var(--fs-xs); white-space: nowrap; }
303 .tree-card {
304 background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden;
305 }
306 .tree-head {
307 display: flex; align-items: center; gap: var(--s3); min-height: 40px; padding: 0 var(--s4);
308 background: var(--bg-raised); border-bottom: 1px solid var(--border); font-size: var(--fs-s);
309 & .tree-path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 var(--fs-s) / 1 var(--mono); color: var(--ink-hi); }
310 & .tree-up { flex: none; font: 600 var(--fs-s) / 1 var(--mono); color: var(--ink-dim); text-decoration: none; }
311 & .tree-up:hover { color: var(--ink-hi); text-decoration: underline; }
312 & .tree-count { flex: none; color: var(--ink-mute); }
313 }
314 .tree-card > :is(.lede, .note) { margin: var(--s3) var(--s4); }
315
316 /* The tree: one flat list, a row per entry, each as deep as --depth says
317 (files.js sets it on the rows it opens in place). A row draws, from the
318 left: a vertical guide per level above it, the branch tick to its node,
319 the node, its name; then size, last commit and date, which are secondary. */
320 ul.tree {
321 --indent: 22px; --rowh: 32px; --guide: var(--border-strong);
322 & > li {
323 display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1.2fr) 96px; align-items: center;
324 min-height: var(--rowh); padding-right: var(--s4); font-size: var(--fs-s);
325 }
326 & > li:hover, & > li[data-cursor] { background: var(--bg-raised); }
327 & > li[data-cursor] { outline: 1px solid var(--accent); outline-offset: -1px; }
328 & > li:focus-visible { outline-offset: -2px; border-radius: 0; }
329 & .t-main { display: flex; align-items: stretch; min-width: 0; min-height: var(--rowh); padding-left: var(--s3); }
330 & .t-twig {
331 flex: none; width: calc(var(--depth, 0) * var(--indent));
332 background: repeating-linear-gradient(90deg,
333 transparent 0 calc(var(--indent) / 2), var(--guide) calc(var(--indent) / 2) calc(var(--indent) / 2 + 1px),
334 transparent calc(var(--indent) / 2 + 1px) var(--indent));
335 }
336 & .t-node { position: relative; flex: none; width: var(--indent); }
337 & .t-node::before, & .t-node::after { content: ""; position: absolute; }
338 /* the branch tick, from the guide of the directory to this node */
339 & .t-node::before { top: 50%; left: calc(var(--indent) / -2); right: calc(50% + 6px); height: 1px; background: var(--guide); }
340 & > li[data-depth="0"] .t-node::before { display: none; }
341 /* an open directory continues its guide down, to its first entry */
342 & > li[aria-expanded="true"] .t-node {
343 background: linear-gradient(var(--guide), var(--guide)) center bottom / 1px calc(50% - 8px) no-repeat;
344 }
345 /* the node: a ring for a file, a chevron for a directory (it turns down
346 once open), a diamond for a link, a square for a submodule */
347 & .t-node::after {
348 top: 50%; left: 50%; width: 7px; height: 7px; margin: -4px 0 0 -4px;
349 background: var(--bg-surface); border: 1px solid var(--ink-mute); border-radius: 50%;
350 }
351 & > li:hover .t-node::after, & > li[data-cursor] .t-node::after { background: var(--bg-raised); border-color: var(--ink-hi); }
352 & > li[data-kind="dir"] .t-node::after {
353 width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 0; border-radius: 0; background: var(--ink-dim);
354 mask: url(icons/chevron.svg) center / contain no-repeat; transform: rotate(-90deg);
355 }
356 & > li[data-kind="dir"][aria-expanded="true"] .t-node::after { transform: none; background: var(--accent); }
357 & > li[data-kind="link"] .t-node::after { border-radius: 1px; transform: rotate(45deg); }
358 & > li[data-kind="module"] .t-node::after { border-radius: 1px; }
359 & > li[aria-busy="true"] .t-node { opacity: .4; }
360 & .t-name {
361 align-self: center; min-width: 0; padding: 4px var(--s1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
362 font-family: var(--mono); font-size: var(--fs); color: var(--ink); text-decoration: none; cursor: pointer;
363 }
364 & > li[data-kind="dir"] .t-name { font-weight: 700; color: var(--ink-hi); }
365 & > li[data-kind="link"] .t-name, & > li[data-kind="module"] .t-name { color: var(--ink-dim); cursor: default; }
366 & > li:hover .t-name, & > li[data-cursor] .t-name { text-decoration: underline; }
367 & .t-size { padding-right: var(--s4); text-align: right; font: var(--fs-xs) / 1 var(--mono); color: var(--ink-mute); font-variant-numeric: tabular-nums; }
368 & .t-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-dim); }
369 & .t-sub a { color: inherit; text-decoration: none; }
370 & .t-sub a:hover { color: var(--ink-hi); text-decoration: underline; }
371 & .t-when { text-align: right; white-space: nowrap; color: var(--ink-mute); font-size: var(--fs-xs); }
372 & > li.tree-more { grid-template-columns: minmax(0, 1fr); }
373 & > li.tree-more .t-name { font-size: var(--fs-s); font-weight: 400; color: var(--ink-dim); text-decoration: underline; }
374 & > li.tree-more .t-node::after { display: none; }
375 }
376 @media (max-width: 900px) {
377 ul.tree > li { grid-template-columns: minmax(0, 1fr) 64px 80px; }
378 ul.tree .t-sub { display: none; }
379 }
380 @media (max-width: 720px) {
381 .tree-keys { display: none; }
382 ul.tree { --indent: 18px; }
383 ul.tree > li { grid-template-columns: minmax(0, 1fr) 72px; }
384 ul.tree .t-size { display: none; }
385 }
386
387 /* section headings inside a page */
388 .rule-h {
389 display: flex; align-items: center; gap: var(--s2); margin-top: var(--s5);
390 font-size: var(--fs);
391 & > :first-child { color: var(--ink-hi); }
392 }
393 main > .rule-h:first-child { margin-top: 0; }
394
395 /* empty / 404 / error / sign in: one card in the middle */
396 .state {
397 max-width: 560px; margin: var(--s7) auto 0 !important; padding: var(--s6);
398 background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r);
399 & .eyebrow { font: 700 var(--fs-s) / 1 var(--mono); color: var(--ink-mute); text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--s2); }
400 & h1 { margin-bottom: var(--s3); }
401 & p.dim { color: var(--ink-dim); }
402 & .state-act { margin-top: var(--s5); }
403 & .state-back { margin-top: var(--s5); display: flex; gap: var(--s4); font-size: var(--fs-s); }
404 & .clone { margin-top: var(--s4); }
405 }
406
407 /* copyable shell lines */
408 .clone {
409 display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); min-width: 0;
410 & .clone-line {
411 min-width: 0;
412 display: flex; gap: var(--s2); align-items: center; padding: var(--s1) var(--s1) var(--s1) var(--s3);
413 background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--r-s);
414 font-size: var(--fs-code);
415 }
416 & .clone-line > .mute { user-select: none; font-family: var(--mono); }
417 & code { flex: 1; min-width: 0; overflow-x: auto; white-space: pre; scrollbar-width: none; }
418 & .copy { height: 26px; padding: 0 var(--s2); font-size: var(--fs-xs); }
419 }
420}