/* What every dashboard page shares beyond base.css and charts.css: the loading placeholders and the controls in
   its toolbar. Tokens only (light + dark). A dashboard's own rules go in a sheet of its own.
   (A box that scrolls inside the page fades at the edge that hides more: parts.js v-fade-x sets base.css's
   .fade-r / .fade-l / .fade-b.) */

/* ---- loading placeholders in the final layout: the frames are the real cards, only the content shimmers */
.skeleton.sk-dot { width: 15px; height: 15px; border-radius: 50%; }
.skeleton.sk-val { width: 76px; height: 26px; margin: 3px 0; border-radius: var(--radius-xs); }
.skeleton.sk-fig { width: 112px; height: 40px; margin: 6px 0 12px; border-radius: var(--radius-sm); }
.sk-chart { position: relative; margin-top: 8px; border-radius: var(--radius); background: var(--fill-3); }
.sk-chart::after { content: ""; position: absolute; left: 14px; right: 14px; top: 62%; border-top: 1px dotted var(--chart-baseline); }
/* a control that comes with the data keeps its place while the page loads, so nothing moves when it arrives */
.sk-ctl { display: block; flex: none; height: var(--ctl-h); border-radius: calc(var(--radius-ctl) + 1px); }

/* ---- page actions: controls keep their natural width beside the title */
.dash-h-a .select { width: auto; min-width: 150px; max-width: 320px; }
.dash-h-a .seg { flex-wrap: nowrap; }