v0.24.8

src/admin/web/style.css

@@ -7351,4 +7351,95 @@ body[data-density="compact"] .page-footer {
 #cache-memory-warning {
     color: var(--notice-text);
     font-weight: 600;
-}
+}
+/* 0.24.8 cache occupancy charts and compact memory-accounting help */
+.mini-heading-actions {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 7px;
+    min-width: 0;
+}
+
+.metric-info {
+    position: relative;
+}
+
+.metric-info>summary {
+    width: 18px;
+    height: 18px;
+    display: inline-grid;
+    place-items: center;
+    list-style: none;
+    cursor: pointer;
+    border: 1px solid var(--line);
+    border-radius: 50%;
+    color: var(--muted);
+    background: var(--panel2);
+    font: 700 10px var(--mono);
+    user-select: none;
+}
+
+.metric-info>summary::-webkit-details-marker {
+    display: none;
+}
+
+.metric-info>summary:hover,
+.metric-info>summary:focus-visible,
+.metric-info[open]>summary {
+    color: var(--text);
+    border-color: var(--border-hover);
+    outline: none;
+}
+
+.metric-info-popover {
+    position: absolute;
+    z-index: 40;
+    top: calc(100% + 7px);
+    right: 0;
+    width: min(360px, calc(100vw - 44px));
+    padding: 10px 11px;
+    border: 1px solid var(--line);
+    border-radius: 6px;
+    background: var(--panel2);
+    box-shadow: 0 12px 30px var(--shadow-mid);
+}
+
+.metric-info-popover .fine {
+    margin: 0;
+    line-height: 1.5;
+}
+
+.cache-hot-line,
+.cache-transient-total-line {
+    stroke: var(--accent);
+}
+
+.cache-fill-line {
+    stroke: var(--green);
+}
+
+.cache-queue-line,
+.cache-cold-line {
+    stroke: var(--blue);
+}
+
+.cache-io-line {
+    stroke: var(--transform-chart);
+}
+
+.cache-transient-total-key {
+    color: var(--accent);
+}
+
+.cache-fill-key {
+    color: var(--green);
+}
+
+.cache-queue-key {
+    color: var(--blue);
+}
+
+.cache-io-key {
+    color: var(--transform-chart);
+}