1.storage .fill:not(.explorer) { overflow: auto; }
2.storage .list-body > .segmented { margin-bottom: 8px; }
3.storage table.data th { white-space: nowrap; }
4.storage .stats .mono { font-weight: 500; }
5.storage td .chip { margin-left: 8px; }
6.storage tr.pickable { cursor: pointer; }
7.storage .snapshots tr.pickable { user-select: none; }
8.storage tr.pickable:hover, .storage tr.hover { background: var(--hover); }
9.storage tr.selected, .storage tr.selected:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
10
11.storage tr.trouble > td { background: color-mix(in srgb, var(--critical) 13%, transparent); }
12
13.storage tr.vdev td { color: var(--text-2); background: var(--panel); padding-block: 4px; }
14.storage td.disk .muted { font-size: 12px; }
15
16.storage .datasets td .name { display: flex; align-items: center; min-width: 0; }
17.storage .expander {
18 display: inline-flex;
19 align-items: center;
20 gap: 4px;
21 border: 0;
22 background: none;
23 padding: 0;
24 cursor: pointer;
25}
26.storage .expander .chevron { color: var(--muted); }
27.storage td.action { width: 1%; padding-block: 0; }
28.storage td.action div { display: flex; justify-content: flex-end; gap: 6px; }
29.storage tr:is(.open, .hover) .row-icon { opacity: 1; }
30.storage .datasets tr.expansion > td { padding-block: 0 10px; background: var(--panel); }
31.storage .expansion .facts { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 6px 0 8px 16px; font-size: 12px; }
32.storage .expansion .facts div { display: flex; gap: 6px; align-items: baseline; }
33.storage .expansion .facts dt { color: var(--muted); }
34.storage .expansion .facts dd { margin: 0; }
35.storage td.disk .capacity { margin-left: 6px; }
36.storage .snapshots { border-left: 2px solid var(--line); margin-left: 14px; padding-left: 10px; }
37.storage .snapshots .empty { padding: 12px 0; text-align: left; }
38.storage .selection {
39 position: sticky;
40 bottom: 0;
41 display: flex;
42 align-items: center;
43 gap: 12px;
44 padding: 6px 8px;
45 min-height: 42px;
46 background: var(--panel);
47 font-size: 13px;
48}
49
50.dialog .description .target { overflow-wrap: anywhere; margin-bottom: 6px; color: var(--text); }
51
52.files-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12px; }
53
54.storage .treemap { position: relative; margin: 0 var(--gutter) 6px; }
55.storage .tm-cell {
56 position: absolute;
57 overflow: hidden;
58 border: 1px solid var(--page);
59 border-radius: var(--radius);
60 background: color-mix(in srgb, var(--kind) 42%, var(--page));
61 padding: 4px 6px;
62 font-size: 12px;
63 line-height: 1.3;
64 display: flex;
65 flex-direction: column;
66 transition: background-color 150ms;
67}
68.storage .tm-cell.dir { cursor: pointer; }
69.storage .tm-cell.rest { background: repeating-linear-gradient(135deg, var(--raised) 0 4px, var(--page) 4px 8px); }
70.storage .tm-cell.hover:not(.rest) { background: color-mix(in srgb, var(--kind) 62%, var(--page)); }
71.storage .tm-cell > span { flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
72.storage .tm-cell .name { color: var(--text); font-weight: 550; }
73.storage .tm-cell .size { color: var(--text-2); font-variant-numeric: tabular-nums; }
74
75
76.storage td.path { overflow-wrap: anywhere; }
77
78.storage .map { display: flex; flex-direction: column; padding: 0 var(--gutter); }
79/* A fixed share, so hovering a long path can't reflow the crumbs and resize the map under the pointer. */
80.storage .map .map-status { display: flex; flex: none; justify-content: flex-end; gap: 8px; width: 40%; }
81.storage .map-status .path { overflow: hidden; text-overflow: ellipsis; direction: rtl; text-align: left; }
82.storage .map-status b { color: var(--text); font-weight: 600; }
83.storage .map-body { display: grid; grid-template-columns: 1fr 184px; gap: 12px; flex: 1; min-height: 0; padding-bottom: 12px; }
84.storage .map-frame { position: relative; overflow: hidden; border-radius: var(--radius); outline-offset: 2px; }
85.storage .map-frame.zoomable { cursor: zoom-in; }
86.storage .map-frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
87.storage .map-frame .skeleton { position: absolute; inset: 0; }
88.storage .map-frame .empty { position: absolute; inset: 0; display: grid; place-items: center; }
89.storage .map-frame .outline { position: absolute; pointer-events: none; box-sizing: border-box; }
90.storage .map-frame .outline.target { border: 1px solid color-mix(in srgb, white 70%, transparent); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.5); }
91.storage .map-frame .outline.leaf { border: 2px solid white; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.6); }
92.storage .map-legend { list-style: none; margin: 0; padding: 0; overflow: auto; font-size: 12px; }
93.storage .map-legend li {
94 display: grid;
95 grid-template-columns: 10px 1fr auto;
96 align-items: center;
97 gap: 8px;
98 padding: 3px 6px;
99 border-radius: var(--radius);
100}
101.storage .map-legend li[tabindex] { cursor: default; }
102.storage .map-legend li[tabindex]:is(:hover, :focus-visible) { background: var(--hover); }
103.storage .map-legend .swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--other); }
104.storage .map-legend .swatch.small { background: color-mix(in srgb, var(--other) 50%, var(--page)); }
105.storage .map-legend .v { color: var(--text-2); font-variant-numeric: tabular-nums; }
106.storage td.num > span[data-tip] { padding-block: 8px; margin-block: -8px; }
107
108.storage .regions { display: flex; flex-wrap: wrap; gap: 2px; list-style: none; margin: 0 0 0 -8px; padding: 0; }
109.storage .regions li { display: flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--radius); color: var(--text-2); }
110.storage .regions li:is(:hover, :focus-visible) { background: var(--hover); }
111.storage .regions b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
112.storage :is(.regions, .held-key) .swatch { flex: none; width: 10px; height: 10px; border-radius: 3px; }
113.storage .regions .swatch { background: color-mix(in srgb, var(--kind) 70%, var(--page)); }
114.storage .held-key { display: flex; align-items: center; gap: 6px; color: var(--text-2); }
115.storage .held-key .swatch { --kind: var(--other); }
116.storage .regions-map { flex: none; }
117.storage .region {
118 position: absolute;
119 border-radius: calc(var(--radius) + 2px);
120 background: color-mix(in srgb, var(--kind) 16%, var(--page));
121 transition: opacity 150ms;
122}
123.storage .region.dim { opacity: 0.3; }
124.storage :is(.regions-map .tm-cell.dir, .held-key .swatch) {
125 --fill: color-mix(in srgb, var(--kind) 42%, var(--page));
126 background:
127 linear-gradient(to top, transparent var(--held, 100%), var(--fill) var(--held, 100%)),
128 repeating-linear-gradient(135deg, var(--fill) 0 2px, color-mix(in srgb, var(--kind) 20%, var(--page)) 2px 5px);
129}
130.storage .regions-map .tm-cell.hover { --fill: color-mix(in srgb, var(--kind) 62%, var(--page)); }
131.storage .regions-map .tm-cell.open { box-shadow: inset 0 0 0 2px var(--text); }
132.storage .datasets tr { scroll-margin-top: 34px; }
133.storage .regions-map .tm-cell.rest { background: color-mix(in srgb, var(--kind) 26%, var(--page)); }