1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
/* ============================================================
* rustio-admin / layout / shell
*
* Page-level flex shell: banner → topbar → (sidebar + main) →
* footer. Layout uses flex (not grid) so an absent sidebar (login,
* forbidden, error, public chrome) doesn't leave a 240px ghost
* column squeezing the main content.
*
* Mobile-first off-canvas overrides live in layout/responsive.css.
* ============================================================ */
}
}
}
/* Read-only mode banner — same shape as the demo banner but
* tinted to the info/accent family so operators can tell
* "read-only freeze" from "demo session" at a glance. */
}
/* Layout uses flex, not grid, so an absent sidebar (login page,
* forbidden, error, public chrome) doesn't leave a 240px ghost
* column squeezing the main content. With sidebar: row of two
* children, sidebar is fixed-width. Without: main takes 100%. */
}
/* v0.16 — generous content padding (32px horizontal desktop, 24px top).
* `max-width` caps reading width on ultra-wide monitors so tables stay
* scannable. The inner block is centred so 4K monitors don't leave the
* content glued to the sidebar edge. */
}
}
/* ============================================================
* Chrome cascade override (sidebar + footer).
*
* `--rio-surface-chrome` is the deep-slate surface used by the
* sidebar and footer. Components inside those two regions need
* their text and sub-surface tokens flipped to a light-on-dark
* palette. Rather than touching every component file, we redefine
* the relevant tokens locally within the two parent selectors.
* CSS custom properties cascade through descendants, so every
* `var(--rio-text)`, `var(--rio-surface-2)`, etc. inside the
* sidebar / footer picks up the dark-surface values automatically.
*
* The topbar is intentionally OUT of this cascade — it uses the
* light `--rio-surface` token (see `layout/topbar.css`) and reads
* with the same dark-on-light palette as the rest of the page.
* GitHub / Vercel / Linear pattern: light topbar over light
* canvas, with the deep-slate sidebar carrying the navigation
* weight on the side.
* ============================================================ */
}