@flood-md/react 0.2.12 → 0.2.13

package/dist/foundations.css

@@ -82,6 +82,25 @@
 .flood-root .flood-table[data-density="compact"] { --flood-data-padding: var(--flood-sys-space-2); }
 .flood-root .flood-table caption { text-align: start; padding-block-end: var(--flood-sys-space-3); font-weight: var(--flood-sys-type-label-weight); color: var(--flood-sys-color-content-default); }
 .flood-root .flood-table :is(th, td) { text-align: start; vertical-align: middle; padding: var(--flood-data-padding) var(--flood-sys-space-3); overflow-wrap: break-word; }
+.flood-root .flood-scroll-area__content:has(> .flood-table[data-bounded]) {
+  --flood-table-rail-clearance: 0px;
+  --flood-table-end-clearance: 0px;
+  --flood-table-external-clearance: var(--flood-table-rail-clearance);
+  padding-inline-end: var(--flood-table-external-clearance);
+}
+/* A bounded table keeps the same end clearance as rows grow and shrink. */
+@media (forced-colors: none) {
+  .flood-root .flood-scroll-area__viewport[data-scrollbars="overlay"] > .flood-scroll-area__content:has(> .flood-table[data-bounded]) {
+    --flood-table-rail-clearance: calc(var(--flood-sys-scrollbar-size) + 2 * var(--flood-sys-scrollbar-inset));
+  }
+}
+.flood-root .flood-scroll-area__content:has(> .flood-table[data-bounded]):not(:has(> .flood-table[data-fixed-columns], > .flood-table > thead > tr > [data-pin-edge="end"], > .flood-table > thead > tr > [data-resize-edge]:last-child)) {
+  --flood-table-end-clearance: var(--flood-table-rail-clearance);
+  --flood-table-external-clearance: 0px;
+}
+.flood-root .flood-table[data-bounded] > :is(thead, tbody, tfoot) > tr > :is(th, td):last-child {
+  padding-inline-end: calc(var(--flood-sys-space-3) + var(--flood-table-end-clearance));
+}
 .flood-root .flood-table :is(th, td)[data-wrap="anywhere"] { overflow-wrap: anywhere; }
 .flood-root .flood-table[data-cell-vertical-align="top"] > :where(thead, tbody, tfoot) > :where(tr) > :is(th, td) { vertical-align: top; }
 .flood-root .flood-table[data-cell-vertical-align="bottom"] > :where(thead, tbody, tfoot) > :where(tr) > :is(th, td) { vertical-align: bottom; }
@@ -97,6 +116,17 @@
 .flood-root .flood-table[data-sticky-header] > thead > tr:last-child > :is(th, td) {
   box-shadow: inset 0 calc(-1 * var(--flood-sys-stroke-width)) var(--flood-sys-color-divider-decorative);
 }
+/* Carry the sticky header surface and its divider through the scrollbar clearance. */
+.flood-root .flood-table[data-sticky-header] > thead::after {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 100%;
+  inline-size: var(--flood-table-external-clearance);
+  background: inherit;
+  box-shadow: inset 0 calc(-1 * var(--flood-sys-stroke-width)) var(--flood-sys-color-divider-decorative);
+  pointer-events: none;
+}
 .flood-root .flood-table > tbody > tr:not(:last-child) > :is(th, td) { border-block-end: var(--flood-sys-stroke-width) solid var(--flood-sys-color-divider-decorative); }
 .flood-root .flood-table > tfoot > tr:first-child > :is(th, td) { border-block-start: var(--flood-sys-stroke-width) solid var(--flood-sys-color-divider-decorative); }
 .flood-root .flood-table > tfoot { background: color-mix(in srgb, var(--flood-sys-color-content-default) 8%, transparent); }
@@ -368,7 +398,10 @@
   background: var(--flood-sys-color-surface-default);
   color: var(--flood-sys-color-content-default);
 }
-.flood-root .flood-code-snippet__code {
+.flood-root .flood-code-snippet__line {
+  display: flex;
+  align-items: baseline;
+  gap: var(--flood-sys-space-2);
   flex: 1 1 20ch;
   min-inline-size: 0;
   font-family: var(--flood-sys-font-mono);
@@ -376,11 +409,24 @@
   font-weight: var(--flood-sys-type-compact-weight);
   line-height: var(--flood-sys-type-compact-line-height);
   letter-spacing: normal;
+}
+.flood-root .flood-code-snippet__prompt {
+  flex: none;
+  max-inline-size: 25%;
+  overflow-wrap: anywhere;
+  color: var(--flood-sys-color-content-subtle);
+  user-select: none;
+}
+.flood-root .flood-code-snippet__code {
+  flex: 1;
+  min-inline-size: 0;
+  font: inherit;
+  text-align: start;
   white-space: pre-wrap;
   overflow-wrap: anywhere;
   user-select: text;
 }
-.flood-root .flood-code-snippet__action { flex: none; max-inline-size: 100%; }
+.flood-root .flood-code-snippet__action { flex: none; max-inline-size: 100%; margin-inline-start: auto; }
 .flood-root .flood-surface {
   box-sizing: border-box;
   border-radius: var(--flood-sys-radius-block);
@@ -1694,6 +1740,8 @@
 .flood-root .flood-data-table__table[data-inset="roomy"] > :is(thead,tbody) > tr > :last-child { padding-inline-end:var(--flood-data-table-edge); }
 .flood-root .flood-data-table__table[data-inset="roomy"] > thead > tr > th[data-sortable]:first-child { padding-inline-start:calc(var(--flood-data-table-edge) - var(--flood-sys-space-2)); }
 .flood-root .flood-data-table__table[data-inset="roomy"] > thead > tr > th[data-sortable]:last-child { padding-inline-end:calc(var(--flood-data-table-edge) - var(--flood-sys-space-2)); }
+.flood-root .flood-data-table__table[data-bounded][data-inset="roomy"] > :is(thead,tbody) > tr > :last-child { padding-inline-end:calc(var(--flood-data-table-edge) + var(--flood-table-end-clearance)); }
+.flood-root .flood-data-table__table[data-bounded][data-inset="roomy"] > thead > tr > th[data-sortable]:last-child { padding-inline-end:calc(var(--flood-data-table-edge) - var(--flood-sys-space-2) + var(--flood-table-end-clearance)); }
 .flood-root .flood-data-table[data-inset="roomy"] .flood-data-table__footer { padding-inline:var(--flood-data-table-edge); }
 .flood-root .flood-data-table .flood-data-table__primary-action {
   min-block-size:0;
@@ -1815,7 +1863,10 @@
   inset-inline-start:var(--flood-data-table-pin-offset);
 }
 .flood-root .flood-data-table__table > :is(thead,tbody) > tr > [data-pin-edge="end"] {
-  inset-inline-end:calc(var(--flood-data-table-pin-offset) + var(--flood-scroll-content-inline, 0px));
+  inset-inline-end:var(--flood-data-table-pin-offset);
+}
+.flood-root .flood-data-table__table[data-bounded] > :is(thead,tbody) > tr > [data-pin-edge="end"] {
+  inset-inline-end:calc(var(--flood-data-table-pin-offset) + var(--flood-table-external-clearance));
 }
 .flood-root .flood-data-table__table > :is(thead,tbody) > tr > [data-pin-boundary="true"]::before {
   content:"";
@@ -1934,7 +1985,8 @@
 }
 
 .flood-root .flood-sparkline[data-tone="success"] { --flood-sparkline-color: var(--flood-sys-color-feedback-success); }
-.flood-root .flood-sparkline[data-tone="accent"] { --flood-sparkline-color: var(--flood-sys-color-accent-content); }
+.flood-root .flood-sparkline[data-tone="accent"] { --flood-sparkline-color: var(--flood-chart-accent); }
+.flood-root .flood-sparkline__plot stop:first-child { stop-opacity: var(--flood-chart-fill-strength); }
 .flood-root .flood-sparkline[data-tone="warning"] { --flood-sparkline-color: var(--flood-sys-color-feedback-warning); }
 .flood-root .flood-sparkline[data-tone="error"] { --flood-sparkline-color: var(--flood-sys-color-feedback-error); }
 
@@ -1954,7 +2006,7 @@
   vector-effect: non-scaling-stroke;
 }
 
-.flood-root .flood-sparkline__line { stroke-width: calc(1.5 * var(--flood-sys-stroke-width)); }
+.flood-root .flood-sparkline__line { stroke-width: var(--flood-chart-stroke-width); }
 .flood-root .flood-sparkline__point { stroke-width: calc(3 * var(--flood-sys-stroke-width)); }
 .flood-root .flood-sparkline__point[data-latest] { stroke-width: calc(4 * var(--flood-sys-stroke-width)); }
 .flood-root .flood-sparkline__halo { stroke-width: calc(8 * var(--flood-sys-stroke-width)); opacity: .16; }
@@ -1967,7 +2019,7 @@
 }
 @media (hover: hover) and (prefers-reduced-motion: no-preference) {
   .flood-root:not([data-flood-motion="reduce"]) :is(.flood-sparkline__halo, .flood-sparkline__area):not(:where([data-flood-motion="reduce"] *)) {
-    transition: opacity var(--flood-sys-motion-duration-fast) var(--flood-sys-motion-easing);
+    transition: opacity var(--flood-chart-motion);
   }
 }
 .flood-root .flood-sparkline__empty { display: grid; place-items: center; min-block-size: var(--flood-sparkline-height); }
@@ -1977,212 +2029,1561 @@
   .flood-root :is(.flood-sparkline__area, .flood-sparkline__halo) { display: none; }
 }
 
-.flood-root .flood-file-list { box-sizing:border-box; padding-inline:var(--flood-sys-space-4); border:var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); border-radius:var(--flood-sys-radius-field); background:var(--flood-sys-color-surface-default); container-type:inline-size; container-name:flood-files; }
-.flood-root .flood-file-item__thumbnail { display:grid; place-items:center; flex:none; inline-size:var(--flood-sys-control-md-height); block-size:var(--flood-sys-control-md-height); border-radius:var(--flood-sys-radius-action); color:var(--flood-sys-color-content-subtle); overflow:hidden; background:var(--flood-sys-color-field-background); }
-.flood-root .flood-file-item__thumbnail img { display:block; inline-size:100%; block-size:100%; object-fit:cover; }
-.flood-root .flood-file-item__name { overflow-wrap:anywhere; }
-.flood-root .flood-file-item__heading { display:flex; align-items:center; flex-wrap:wrap; gap:var(--flood-sys-space-1) var(--flood-sys-space-2); min-inline-size:0; }
-.flood-root .flood-file-item__heading>.flood-file-item__name { min-inline-size:0; }
-.flood-root .flood-file-meta { flex:0 1 auto; max-inline-size:100%; flex-wrap:wrap; white-space:normal; overflow-wrap: break-word; color:var(--flood-sys-color-content-subtle); font-weight:400; }
-.flood-root .flood-file-meta>span { min-inline-size:0; }
-.flood-root .flood-file-item .flood-data-list-item__trailing { flex:none; max-inline-size:none; }
-.flood-root .flood-upload-item .flood-data-list-item__copy { align-self:center; }
-.flood-root .flood-upload-item__status-row { display:flex; align-items:center; gap:var(--flood-sys-space-2); min-inline-size:0; }
-.flood-root .flood-upload-item__status-row[data-progress]>.flood-status-indicator { flex:none; white-space:nowrap; }
-.flood-root .flood-upload-item .flood-indicator { flex:1; min-inline-size:0; }
-.flood-root .flood-upload-item .flood-status-indicator { overflow-wrap:break-word; }
-.flood-root .flood-image-preview { inline-size:min(56rem,calc(100% - var(--flood-sys-space-8))); }
-.flood-root .flood-image-preview__figure { margin:0; }
-.flood-root .flood-image-preview__media { display:grid; place-items:center; min-block-size:12rem; max-inline-size:100%; background:var(--flood-sys-color-surface-canvas); border-radius:var(--flood-sys-radius-field); overflow:hidden; }
-.flood-root .flood-image-preview__image { grid-area:1/1; inline-size:auto; max-inline-size:100%; max-block-size:60dvh; object-fit:contain; }
-.flood-root .flood-image-preview__media[data-state="loading"] .flood-image-preview__image { visibility:hidden; }
-.flood-root .flood-image-preview__media>[role="status"] { grid-area:1/1; }
-.flood-root .flood-image-preview__caption { margin-block-start:var(--flood-sys-space-2); font-size:var(--flood-sys-type-compact-size); line-height:var(--flood-sys-type-compact-line-height); color:var(--flood-sys-color-content-subtle); }
-.flood-root .flood-image-preview__actions { display:flex; justify-content:flex-end; margin-block-start:var(--flood-sys-space-4); }
-@media(max-width:30rem){.flood-root .flood-file-list>.flood-file-item { flex-wrap:nowrap; }.flood-root .flood-file-item__thumbnail{inline-size:var(--flood-sys-control-sm-height);block-size:var(--flood-sys-control-sm-height);}}
-@container flood-files (max-width:16rem){
- .flood-root .flood-file-list>.flood-file-item:not([hidden]) { display:grid; grid-template-columns:minmax(0,1fr); }
- .flood-root .flood-file-item .flood-data-list-item__trailing { justify-content:flex-start; }
- .flood-root .flood-file-item .flood-data-list-item__actions { flex-wrap:wrap; }
- .flood-root .flood-upload-item__status-row { flex-wrap:wrap; }
- .flood-root .flood-upload-item__status-row[data-progress]>.flood-status-indicator { flex:0 1 auto; min-inline-size:0; white-space:normal; }
- .flood-root .flood-upload-item .flood-indicator { flex-basis:100%; }
+.flood-root :is(.flood-line-chart, .flood-bar-chart, .flood-donut-chart, .flood-heatmap, .flood-sparkline, .flood-bar-list, .flood-scatter-chart, .flood-range-chart, .flood-bullet-chart, .flood-waterfall-chart, .flood-histogram, .flood-box-plot, .flood-dumbbell-chart) {
+  --flood-chart-stroke-width: calc(2 * var(--flood-sys-stroke-width));
+  --flood-chart-tip-gap: var(--flood-sys-space-4);
+  --flood-chart-accent: var(--flood-sys-color-accent-content);
+  --flood-chart-motion: var(--flood-sys-motion-duration-fast) var(--flood-sys-motion-easing);
+  --flood-chart-fill-strength: .3;
+  --flood-chart-grid: radial-gradient(circle, var(--flood-sys-color-divider-decorative) .045rem, transparent .06rem) 0 0 / var(--flood-sys-space-3) var(--flood-sys-space-3);
 }
-
-.flood-root .flood-time-picker__panel { inline-size:min(var(--flood-time-picker-width,22rem),var(--flood-overlay-available-width,calc(100dvw - 1rem))); padding:var(--flood-sys-space-1); }
-.flood-root .flood-time-picker__scroll { max-block-size:min(15rem,calc(var(--flood-overlay-available-height,60dvh) - 1rem)); }
-
-.flood-root .flood-date-time-range-picker { min-inline-size:0; inline-size:100%; }
-
-.flood-root .flood-overflow-actions { position:relative; inline-size:100%; min-inline-size:0; }
-.flood-root .flood-overflow-actions__bar { display:flex; flex-wrap:nowrap; gap:var(--flood-sys-space-2); inline-size:fit-content; max-inline-size:100%; min-inline-size:0; overflow:auto; }
-.flood-root .flood-overflow-actions__bar > button { flex:none; }
-.flood-root :is(.flood-overflow-actions__leading,.flood-overflow-actions__trailing) { display:flex; align-items:center; flex:none; min-inline-size:0; }
-.flood-root .flood-overflow-actions__trailing { margin-inline-start:auto; }
-.flood-root .flood-overflow-actions__measure { position:absolute; visibility:hidden; pointer-events:none; inline-size:max-content; block-size:0; overflow:hidden; display:flex; gap:var(--flood-sys-space-2); }
-.flood-root .flood-menubar { display:flex; align-items:center; gap:var(--flood-sys-space-1); min-inline-size:0; max-inline-size:100%; overflow:auto; }
-.flood-root .flood-menubar > button { flex:none; }
-.flood-root .flood-button[data-tone="danger"] { --flood-action-content:var(--flood-sys-color-action-danger-content); }
-.flood-root .flood-button--solid[data-tone="danger"] {
-  --flood-action-rest:var(--flood-sys-color-action-danger-content);
-  --flood-action-hover:color-mix(in srgb,var(--flood-sys-color-action-danger-content),white 10%);
-  --flood-action-pressed:color-mix(in srgb,var(--flood-sys-color-action-danger-content),black 10%);
-  --flood-action-content:var(--flood-sys-color-surface-canvas);
+.flood-root .flood-line-chart { --flood-chart-height: 15rem; min-inline-size: 0; container-type: inline-size; }
+.flood-root .flood-line-chart__body {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--flood-sys-space-2) var(--flood-sys-space-3);
+  direction: ltr;
 }
-
-/* BulkActionBar shares Toolbar geometry and adaptive command ownership. */
-.flood-root .flood-bulk-action-bar { inline-size:100%; max-inline-size:32rem; }
-.flood-root .flood-bulk-action-bar > .flood-overflow-actions__bar { inline-size:100%; background:var(--flood-sys-color-surface-floating); border-color:var(--flood-sys-color-border-floating); box-shadow:0 var(--flood-sys-effect-floating-shadow-offset) var(--flood-sys-effect-floating-shadow-blur) var(--flood-sys-color-shadow-floating); }
-.flood-root .flood-bulk-action-bar > .flood-overflow-actions__bar > .flood-overflow-actions__leading { max-inline-size:35%; }
-.flood-root .flood-bulk-action-bar__selection { box-sizing:border-box; inline-size:7rem; max-inline-size:100%; padding-inline:var(--flood-sys-space-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; }
-.flood-root .flood-bulk-action-bar__selection[data-counter="number"] { inline-size:3rem; text-align:center; }
-@media(forced-colors:active) { .flood-root .flood-bulk-action-bar > .flood-overflow-actions__bar { background:Canvas; border-color:CanvasText; box-shadow:none; } }
-
-/* Nearest material owners establish their own inherited recipes. Absolute surface
-   palette roles stay unchanged; descendants consume the existing semantic roles. */
-.flood-root :where(.flood-surface, .flood-dialog, .flood-overlay-panel,
-  .flood-select__menu, .flood-toast, .flood-toolbar:not([data-variant="plain"]), .flood-calendar:not(.flood-date-picker__panel .flood-calendar):not(.flood-date-range-picker__panel .flood-calendar),
-  .flood-file-list, .flood-color-picker__panel, .flood-bulk-action-bar,
-  .flood-tabs:not([data-variant="line"]), .flood-disclosure:not(.flood-accordion > .flood-disclosure), .flood-accordion,
-  .flood-segmented .flood-choice-group, .flood-data-table__footer, .flood-code-snippet),
-.flood-root :where([data-flood-surface="filled"], [data-flood-surface="floating"]),
-.flood-root:is([data-flood-surface="filled"], [data-flood-surface="floating"]) {
-  --flood-sys-color-action-subtle-rest: var(--flood-sys-color-context-filled-action-rest);
-  --flood-sys-color-action-subtle-hover: var(--flood-sys-color-context-filled-action-hover);
-  --flood-sys-color-action-subtle-pressed: var(--flood-sys-color-context-filled-action-pressed);
-  --flood-sys-color-action-subtle-disabled: var(--flood-sys-color-context-filled-action-disabled);
-  --flood-sys-color-action-ghost-hover: var(--flood-sys-color-context-filled-action-hover);
-  --flood-sys-color-action-ghost-pressed: var(--flood-sys-color-context-filled-action-pressed);
-  --flood-sys-color-action-on-surface-rest: var(--flood-sys-color-context-filled-action-rest);
-  --flood-sys-color-action-on-surface-hover: var(--flood-sys-color-context-filled-action-hover);
-  --flood-sys-color-action-on-surface-pressed: var(--flood-sys-color-context-filled-action-pressed);
-  --flood-sys-color-action-on-surface-disabled: var(--flood-sys-color-context-filled-action-disabled);
-  --flood-sys-color-field-background: var(--flood-sys-color-context-filled-field-background);
-  --flood-sys-color-field-border: var(--flood-sys-color-context-filled-field-border);
-  --flood-sys-color-field-readonly: var(--flood-sys-color-context-filled-field-readonly);
-  --flood-sys-color-field-disabled: var(--flood-sys-color-context-filled-field-disabled);
-  --flood-sys-color-selection-background: var(--flood-sys-color-context-filled-selection-background);
-  --flood-sys-color-border-decorative: var(--flood-sys-color-context-filled-border-decorative);
-  --flood-sys-color-divider-decorative: var(--flood-sys-color-context-filled-divider-decorative);
-  --flood-sys-color-surface-supporting: var(--flood-sys-color-context-filled-supporting-background);
-  --flood-sys-color-surface-avatar: var(--flood-sys-color-context-filled-avatar-background);
-  --flood-sys-color-surface-muted: var(--flood-sys-color-context-filled-muted-background);
-  --flood-sys-color-indicator-track: var(--flood-sys-color-context-filled-indicator-track);
-  --flood-sys-color-loading-placeholder: var(--flood-sys-color-context-filled-loading-placeholder);
+.flood-root .flood-line-chart__body[data-y-axis] { grid-template-columns: fit-content(28%) minmax(0, 1fr); }
+.flood-root .flood-line-chart__y {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  text-align: end;
+  overflow-wrap: anywhere;
+  font-variant-numeric: tabular-nums;
+}
+.flood-root .flood-line-chart__x { display: flex; justify-content: space-between; gap: var(--flood-sys-space-2); min-block-size: var(--flood-sys-space-6); align-items: start; }
+.flood-root .flood-line-chart__body[data-y-axis] > .flood-line-chart__x { grid-column: 2; }
+.flood-root .flood-line-chart__y[data-flat] { justify-content: center; }
+.flood-root .flood-line-chart__x > [data-covered] { visibility: hidden; }
+.flood-root .flood-line-chart__x > :only-child { margin-inline: auto; }
+.flood-root .flood-line-chart__x > * { min-inline-size: 0; overflow-wrap: anywhere; }
+.flood-root .flood-line-chart__plot {
+  --flood-chart-x: var(--flood-chart-pointer, var(--flood-chart-point));
+  --flood-chart-ratio: var(--flood-chart-pointer-ratio, var(--flood-chart-point-ratio));
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  block-size: var(--flood-chart-height);
+  padding-block: var(--flood-sys-space-2);
+  cursor: crosshair;
 }
-
-.flood-root[data-flood-surface="filled"],
-.flood-root :where([data-flood-surface="filled"], .flood-surface[data-flood-elevation="default"], .flood-toolbar:not([data-variant="plain"]), .flood-file-list, .flood-color-picker__panel,
-  .flood-tabs:not([data-variant="line"]), .flood-disclosure:not(.flood-accordion > .flood-disclosure), .flood-accordion,
-  .flood-segmented .flood-choice-group, .flood-data-table__footer, .flood-code-snippet) {
-  --flood-sys-color-surface-current: var(--flood-sys-color-surface-default);
+.flood-root :is(.flood-line-chart__plot, .flood-bar-chart__plot, .flood-donut-chart__plot, .flood-dumbbell-chart__plot):focus-visible {
+  outline: var(--flood-sys-focus-width) solid var(--flood-sys-color-focus-ring);
+  outline-offset: var(--flood-sys-focus-offset);
+  border-radius: var(--flood-sys-radius-indicator);
 }
-.flood-root :where(.flood-surface[data-flood-elevation="raised"], .flood-calendar:not(.flood-date-picker__panel .flood-calendar):not(.flood-date-range-picker__panel .flood-calendar)) {
-  --flood-sys-color-surface-current: var(--flood-sys-color-surface-raised);
+.flood-root .flood-line-chart__plot > svg {
+  position: relative;
+  display: block;
+  inline-size: 100%;
+  overflow: visible;
 }
-.flood-root :where(.flood-surface[data-flood-elevation="overlay"], .flood-dialog) {
-  --flood-sys-color-surface-current: var(--flood-sys-color-surface-overlay);
+.flood-root .flood-line-chart__plot::before {
+  content: "";
+  position: absolute;
+  inset: var(--flood-sys-space-2) 0;
+  background: var(--flood-chart-grid);
+  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent),
+    linear-gradient(transparent, black 12%, black 88%, transparent);
+  mask-composite: intersect;
+  pointer-events: none;
 }
-.flood-root[data-flood-surface="floating"],
-.flood-root :where(.flood-overlay-panel, .flood-select__menu, .flood-toast, .flood-bulk-action-bar,
-  .flood-bulk-action-bar > .flood-overflow-actions__bar, [data-flood-surface="floating"]) {
-  --flood-sys-color-surface-current: var(--flood-sys-color-surface-floating);
+.flood-root .flood-line-chart__grid { stroke: var(--flood-sys-color-divider-decorative); opacity: .65; }
+.flood-root :is(.flood-line-chart__grid, .flood-line-chart__stroke, .flood-line-chart__point) {
+  fill: none;
+  vector-effect: non-scaling-stroke;
 }
-/* Picker calendars shed their standalone material; the popup is their owner. */
-.flood-root :where(.flood-date-picker__panel, .flood-date-range-picker__panel) .flood-calendar {
-  --flood-sys-color-surface-current: inherit;
+.flood-root .flood-line-chart__gradient,
+.flood-root :is(.flood-line-chart, .flood-bar-chart) [data-series="0"] { color: var(--flood-chart-accent); }
+.flood-root .flood-line-chart__gradient > stop:first-child { stop-opacity: var(--flood-chart-fill-strength); }
+.flood-root :is(.flood-line-chart, .flood-bar-chart) [data-series="1"] { color: var(--flood-sys-color-content-subtle); --flood-chart-dash: 5 4; }
+.flood-root :is(.flood-line-chart, .flood-bar-chart) [data-series="2"] { color: var(--flood-sys-color-content-default); --flood-chart-dash: 1 4; }
+.flood-root :is(.flood-line-chart, .flood-bar-chart) [data-series="3"] { color: var(--flood-sys-color-content-subtle); --flood-chart-dash: 8 4 2 4; }
+.flood-root .flood-line-chart__stroke {
+  stroke: currentColor;
+  stroke-width: var(--flood-chart-stroke-width);
+  stroke-linejoin: round;
+  stroke-linecap: round;
+  stroke-dasharray: var(--flood-chart-dash, none);
+}
+.flood-root .flood-line-chart__point { stroke: currentColor; stroke-width: .4rem; stroke-linecap: round; }
+.flood-root .flood-line-chart__plot[data-inspecting] > svg > [data-series] { opacity: .46; }
+.flood-root .flood-line-chart__highlight { opacity: 0; }
+.flood-root .flood-line-chart__plot[data-inspecting] .flood-line-chart__highlight { opacity: 1; }
+.flood-root .flood-line-chart__highlight-window { translate: calc(var(--flood-chart-ratio) * 600px) 0; }
+.flood-root .flood-line-chart__inspection {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
 }
-
-/* Explicit canvas scopes reset every role after automatic material owners. */
-.flood-root[data-flood-surface="base"],
-.flood-root :where([data-flood-surface="base"], .flood-dropzone,
-  .flood-tabs:not([data-variant="line"]) > .flood-tabs__scroll) {
-  --flood-sys-color-action-subtle-rest: var(--flood-sys-color-context-base-action-rest);
-  --flood-sys-color-action-subtle-hover: var(--flood-sys-color-context-base-action-hover);
-  --flood-sys-color-action-subtle-pressed: var(--flood-sys-color-context-base-action-pressed);
-  --flood-sys-color-action-subtle-disabled: var(--flood-sys-color-context-base-action-disabled);
-  --flood-sys-color-action-ghost-hover: var(--flood-sys-color-context-base-action-hover);
-  --flood-sys-color-action-ghost-pressed: var(--flood-sys-color-context-base-action-pressed);
-  --flood-sys-color-action-on-surface-rest: var(--flood-sys-color-context-base-on-surface-action-rest);
-  --flood-sys-color-action-on-surface-hover: var(--flood-sys-color-context-base-on-surface-action-hover);
-  --flood-sys-color-action-on-surface-pressed: var(--flood-sys-color-context-base-on-surface-action-pressed);
-  --flood-sys-color-action-on-surface-disabled: var(--flood-sys-color-context-base-on-surface-action-disabled);
-  --flood-sys-color-field-background: var(--flood-sys-color-context-base-field-background);
-  --flood-sys-color-field-border: var(--flood-sys-color-context-base-field-border);
-  --flood-sys-color-field-readonly: var(--flood-sys-color-context-base-field-readonly);
-  --flood-sys-color-field-disabled: var(--flood-sys-color-context-base-field-disabled);
-  --flood-sys-color-selection-background: var(--flood-sys-color-context-base-selection-background);
-  --flood-sys-color-border-decorative: var(--flood-sys-color-context-base-border-decorative);
-  --flood-sys-color-divider-decorative: var(--flood-sys-color-context-base-divider-decorative);
-  --flood-sys-color-surface-supporting: var(--flood-sys-color-context-base-supporting-background);
-  --flood-sys-color-surface-avatar: var(--flood-sys-color-context-base-avatar-background);
-  --flood-sys-color-surface-muted: var(--flood-sys-color-context-base-muted-background);
-  --flood-sys-color-indicator-track: var(--flood-sys-color-context-base-indicator-track);
-  --flood-sys-color-loading-placeholder: var(--flood-sys-color-context-base-loading-placeholder);
-  --flood-sys-color-surface-current: var(--flood-sys-color-surface-canvas);
+.flood-root .flood-line-chart__plot[data-inspecting] > .flood-line-chart__inspection { opacity: 1; visibility: visible; }
+.flood-root .flood-line-chart__cursor {
+  position: absolute;
+  left: var(--flood-chart-x);
+  inset-block: var(--flood-sys-space-2);
+  inline-size: var(--flood-sys-stroke-width);
+  translate: -50% 0;
+  background: linear-gradient(transparent, var(--flood-chart-accent) 22% 78%, transparent);
 }
-
-/* Explicit host preference also works in engines without the media feature. */
-.flood-root[data-flood-transparency="reduced"] :is(.flood-overlay-panel, .flood-select__menu),
-.flood-root [data-flood-transparency="reduced"] :is(.flood-overlay-panel, .flood-select__menu),
-.flood-root :is(.flood-overlay-panel, .flood-select__menu)[data-flood-transparency="reduced"] {
-  background: var(--flood-sys-color-surface-floating);
-  backdrop-filter: none;
+.flood-root .flood-line-chart__marker {
+  position: absolute;
+  left: 50%;
+  inline-size: .4375rem;
+  aspect-ratio: 1;
+  translate: -50% -50%;
+  border-radius: 50%;
+  background: currentColor;
+  box-shadow: 0 0 0 .1875rem color-mix(in srgb, currentColor 24%, transparent);
 }
-
-@media (forced-colors: active) {
-  .flood-root[data-flood-transparency="reduced"] :is(.flood-overlay-panel, .flood-select__menu),
-  .flood-root [data-flood-transparency="reduced"] :is(.flood-overlay-panel, .flood-select__menu),
-  .flood-root :is(.flood-overlay-panel, .flood-select__menu)[data-flood-transparency="reduced"] {
-    background: Canvas;
-  }
-  .flood-root, .flood-root :where(.flood-surface, .flood-dialog, .flood-overlay-panel,
-    .flood-select__menu, .flood-toast, .flood-toolbar:not([data-variant="plain"]), .flood-calendar:not(.flood-date-picker__panel .flood-calendar):not(.flood-date-range-picker__panel .flood-calendar),
-    .flood-file-list, .flood-color-picker__panel, .flood-bulk-action-bar,
-    .flood-tabs:not([data-variant="line"]), .flood-disclosure:not(.flood-accordion > .flood-disclosure), .flood-accordion,
-    .flood-segmented .flood-choice-group, .flood-data-table__footer, .flood-code-snippet,
-    .flood-dropzone, .flood-tabs:not([data-variant="line"]) > .flood-tabs__scroll, [data-flood-surface]) {
-    --flood-sys-color-surface-current: Canvas;
-    --flood-sys-color-surface-supporting: Canvas;
-    --flood-sys-color-surface-avatar: Canvas;
-    --flood-sys-color-surface-muted: Canvas;
-    --flood-sys-color-field-readonly: Canvas;
-  }
+.flood-root .flood-line-chart__date {
+  position: absolute;
+  top: 100%;
+  left: clamp(0px, calc(var(--flood-chart-x) - 3rem), calc(100% - min(100%, 6rem)));
+  inline-size: min(100%, 6rem);
+  display: flex;
+  justify-content: center;
+  pointer-events: none;
 }
-
-.flood-root .flood-filter-condition { container: flood-filter-condition / inline-size; min-inline-size:0; }
-.flood-root .flood-filter-condition__row { grid-template-columns:minmax(7rem,.9fr) minmax(8rem,1fr) minmax(10rem,1.6fr); align-items:center; }
-.flood-root .flood-filter-condition[data-removable="true"] .flood-filter-condition__row { grid-template-columns:minmax(7rem,.9fr) minmax(8rem,1fr) minmax(10rem,1.6fr) auto; }
-.flood-root .flood-filter-condition__values { min-inline-size:0; }
-@container flood-filter-condition (max-width:34rem) {
-  .flood-root .flood-filter-condition__row,
-  .flood-root .flood-filter-condition[data-removable="true"] .flood-filter-condition__row { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
-  .flood-root .flood-filter-condition[data-removable="true"] .flood-filter-condition__row { grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; }
-  .flood-root .flood-filter-condition__values { grid-column:1 / -1; }
-  .flood-root .flood-filter-condition[data-removable="true"] .flood-filter-condition__values { grid-column:1 / 3; }
-  .flood-root .flood-filter-condition__remove { grid-column:3; grid-row:2; }
+.flood-root .flood-line-chart__date > .flood-text {
+  display: block;
+  max-inline-size: 100%;
+  box-sizing: border-box;
+  padding: var(--flood-sys-space-1) var(--flood-sys-space-2);
+  background: var(--flood-sys-color-surface-raised);
+  border: var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative);
+  border-radius: var(--flood-sys-radius-action);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-@container flood-filter-condition (max-width:22rem) {
-  .flood-root .flood-filter-condition__row,
-  .flood-root .flood-filter-condition[data-removable="true"] .flood-filter-condition__row { grid-template-columns:minmax(0,1fr); }
-  .flood-root .flood-filter-condition__row > :is(.flood-field,.flood-filter-condition__values) { grid-column:1 / -1; }
-  .flood-root .flood-filter-condition__remove { grid-column:1; grid-row:auto; justify-self:end; }
+.flood-root .flood-line-chart__tooltip-position {
+  --flood-chart-tip-y: var(--flood-chart-pointer-tip-y, var(--flood-chart-point-y));
+  --flood-chart-tip-y-ratio: var(--flood-chart-pointer-tip-ratio, var(--flood-chart-point-y-ratio));
+  --flood-chart-tip-lift: clamp(0, calc((var(--flood-chart-ratio) - .52) / .23), 1);
+  --flood-chart-tip-width: min(9rem, calc(100% - 2 * var(--flood-sys-space-2)));
+  position: absolute;
+  z-index: 1;
+  inset: var(--flood-sys-space-2) 0;
 }
-.flood-root .flood-filter-group .flood-segmented > .flood-fieldset__body { grid-template-columns: minmax(0, 1fr); }
-.flood-root .flood-filter-group .flood-segmented .flood-choice-group { max-inline-size: 100%; }
-.flood-root .flood-filter-group .flood-segmented .flood-choice { flex: 1 1 auto; min-inline-size: 0; }
-
-.flood-root .flood-collection-toolbar { inline-size:100%; min-inline-size:0; container-type:inline-size; }
-.flood-root .flood-collection-toolbar__row { min-inline-size:0; display:grid; grid-template-columns:minmax(12rem,24rem) minmax(0,1fr) auto; }
-.flood-root .flood-collection-toolbar__search { min-inline-size:0; max-inline-size:100%; }
-.flood-root .flood-collection-toolbar__summaries { min-inline-size:0; max-inline-size:100%; }
-.flood-root .flood-collection-toolbar__commands { margin-inline-start:auto; max-inline-size:100%; justify-content:flex-end; }
-.flood-root .flood-collection-toolbar__clear[data-visible="false"] { visibility:hidden; }
-.flood-root .flood-collection-toolbar__commands { grid-column:3; }
-@container (max-width:46rem) {
-  .flood-root .flood-collection-toolbar__row { grid-template-columns:minmax(0,1fr) auto; }
-  .flood-root .flood-collection-toolbar__commands { grid-column:2; grid-row:1; }
-  .flood-root .flood-collection-toolbar__summaries { grid-column:1 / -1; grid-row:2; }
+.flood-root :is(.flood-line-chart__tooltip, .flood-bar-chart__tooltip) {
+  position: absolute;
+  --flood-chart-tip-height: 0px;
+  --flood-chart-tip-direction: clamp(0, sign(var(--flood-chart-tip-y-ratio) - .31), 1);
+  --flood-chart-tip-offset: calc(.5 * (1 - var(--flood-chart-tip-lift)) + var(--flood-chart-tip-direction) * var(--flood-chart-tip-lift));
+  top: clamp(0px,
+    calc(var(--flood-chart-tip-y) - var(--flood-chart-tip-height) * var(--flood-chart-tip-offset) + var(--flood-chart-tip-lift) * var(--flood-chart-tip-gap) * (1 - 2 * var(--flood-chart-tip-direction))),
+    max(0px, calc(100% - var(--flood-chart-tip-height))));
+  left: clamp(var(--flood-sys-space-2), calc(var(--flood-chart-x) + var(--flood-chart-tip-gap)), calc(100% - var(--flood-chart-tip-width) - var(--flood-sys-space-2)));
+  display: grid;
+  gap: var(--flood-sys-space-1);
+  inline-size: var(--flood-chart-tip-width);
+}
+.flood-root :is(.flood-line-chart__tooltip, .flood-bar-chart__tooltip, .flood-heatmap__tooltip, .flood-chart__tooltip) {
+  box-sizing: border-box;
+  border: var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative);
+  border-radius: var(--flood-sys-radius-field);
+  box-shadow: 0 .35rem 1.1rem rgb(0 0 0 / .18);
+  pointer-events: none;
+  overflow-wrap: anywhere;
+  font-variant-numeric: tabular-nums;
+}
+.flood-root .flood-line-chart__tooltip-row {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) minmax(0, auto);
+  align-items: baseline;
+  gap: var(--flood-sys-space-2);
+}
+.flood-root .flood-line-chart__tooltip-row > :last-child { text-align: end; }
+.flood-root .flood-line-chart__tooltip-row .flood-line-chart__key { inline-size: var(--flood-sys-space-3); }
+@container (max-width: 24rem) {
+  .flood-root .flood-line-chart__tooltip-row { gap: var(--flood-sys-space-1); }
+  .flood-root .flood-line-chart__tooltip-position { --flood-chart-tip-lift: clamp(0, calc((var(--flood-chart-ratio) - .34) / .25), 1); }
+  .flood-root .flood-line-chart__x > [data-intermediate] { display: none; }
+}
+.flood-root .flood-line-chart__key {
+  inline-size: var(--flood-sys-space-6);
+  block-size: var(--flood-sys-space-1);
+  flex: none;
+}
+.flood-root .flood-line-chart__readout {
+  display: grid;
+  gap: var(--flood-sys-space-1);
+  border-block-start: var(--flood-sys-stroke-width) solid var(--flood-sys-color-divider-decorative);
+  margin-block-start: var(--flood-sys-space-3);
+  padding-block-start: var(--flood-sys-space-3);
+  font-variant-numeric: tabular-nums;
+  overflow-wrap: anywhere;
+}
+.flood-root .flood-line-chart__empty { display: grid; place-items: center; min-block-size: var(--flood-chart-height); }
+.flood-root .flood-bar-chart {
+  --flood-chart-height: 13rem;
+  min-inline-size: 0;
+  container-type: inline-size;
+}
+.flood-root .flood-bar-chart__plot { position: relative; cursor: crosshair; }
+.flood-root .flood-bar-chart__marks {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(var(--flood-bar-categories), minmax(0, 1fr));
+}
+.flood-root .flood-bar-chart__marks::before {
+  content: "";
+  position: absolute;
+  inset: 0 0 auto;
+  block-size: var(--flood-chart-height);
+  background: var(--flood-chart-grid);
+  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent),
+    linear-gradient(transparent, black 18%, black 84%, transparent);
+  mask-composite: intersect;
+  pointer-events: none;
+}
+.flood-root .flood-bar-chart__marks::after {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  inset-block-start: calc((1 - var(--flood-bar-zero)) * var(--flood-chart-height));
+  block-size: var(--flood-sys-stroke-width);
+  background: var(--flood-sys-color-divider-decorative);
+  pointer-events: none;
+}
+.flood-root .flood-bar-chart__group {
+  position: relative;
+  display: grid;
+  min-inline-size: 0;
+  gap: var(--flood-sys-space-2);
+  border-radius: var(--flood-sys-radius-indicator);
+}
+.flood-root .flood-bar-chart__group[data-active] {
+  background: color-mix(in srgb, var(--flood-chart-accent) 5%, transparent);
+}
+.flood-root .flood-bar-chart__plot[data-inspecting] .flood-bar-chart__group:not([data-active]) .flood-bar-chart__pair {
+  opacity: .45;
+}
+.flood-root .flood-bar-chart__pair {
+  display: flex;
+  justify-content: center;
+  gap: min(5%, var(--flood-sys-space-1));
+  block-size: var(--flood-chart-height);
+  padding-inline: min(9%, var(--flood-sys-space-2));
+}
+.flood-root .flood-bar-chart__slot {
+  position: relative;
+  flex: 0 1 1.75rem;
+  min-inline-size: 0;
+}
+.flood-root .flood-bar-chart__bar {
+  --flood-bar-direction: to bottom;
+  --flood-bar-end-radius: .375rem;
+  position: absolute;
+  inset-inline: 0;
+  min-block-size: var(--flood-sys-stroke-width);
+  box-sizing: border-box;
+  box-shadow: inset 0 0 0 var(--flood-chart-stroke-width) color-mix(in srgb, currentColor 64%, transparent);
+  border-radius: var(--flood-bar-end-radius) var(--flood-bar-end-radius) 0 0;
+  background: linear-gradient(var(--flood-bar-direction), color-mix(in srgb, currentColor 58%, transparent), color-mix(in srgb, currentColor 22%, transparent));
+}
+.flood-root .flood-bar-chart__bar[data-negative] {
+  --flood-bar-direction: to top;
+  border-radius: 0 0 var(--flood-bar-end-radius) var(--flood-bar-end-radius);
+}
+.flood-root .flood-bar-chart[data-layout="grouped"] :where(.flood-bar-chart__slot[data-series]:not([data-series="0"])) .flood-bar-chart__bar:not([data-zero]) {
+  border: var(--flood-chart-stroke-width) dashed color-mix(in srgb, currentColor 55%, transparent);
+  box-shadow: none;
+  background: color-mix(in srgb, currentColor 12%, transparent);
+}
+.flood-root .flood-bar-chart__bar[data-zero] { border-radius: 0; background: currentColor; }
+.flood-root .flood-bar-chart:is([data-layout="stacked"], [data-layout="percent"]) .flood-bar-chart__pair {
+  display: grid;
+  grid-template-columns: minmax(0, 2.5rem);
+}
+.flood-root .flood-bar-chart:is([data-layout="stacked"], [data-layout="percent"]) .flood-bar-chart__slot { grid-area: 1 / 1; }
+.flood-root .flood-bar-chart:is([data-layout="stacked"], [data-layout="percent"]) [data-series="2"] { color: var(--flood-sys-color-feedback-info); }
+.flood-root .flood-bar-chart:is([data-layout="stacked"], [data-layout="percent"]) [data-series="3"] { color: var(--flood-sys-color-content-default); }
+.flood-root .flood-bar-chart:is([data-layout="stacked"], [data-layout="percent"]) .flood-bar-chart__bar {
+  background: color-mix(in srgb, currentColor 32%, var(--flood-sys-color-surface-raised));
+}
+.flood-root .flood-bar-chart:is([data-layout="stacked"], [data-layout="percent"]) .flood-bar-chart__bar:not([data-outer]) { border-radius: 0; }
+.flood-root .flood-bar-chart:is([data-layout="stacked"], [data-layout="percent"]) .flood-line-chart__stroke { stroke-dasharray: none; }
+.flood-root .flood-bar-chart__category {
+  padding-inline: var(--flood-sys-space-1);
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.flood-root .flood-bar-chart__tooltip {
+  --flood-chart-tip-width: min(9rem, 100%);
+  --flood-bar-tip-gap: min(4rem, calc(50% / var(--flood-bar-categories) + var(--flood-sys-space-1)));
+  --flood-bar-tip-offset: calc(var(--flood-bar-tip-side) * (var(--flood-chart-tip-width) + 2 * var(--flood-bar-tip-gap)) + var(--flood-bar-tip-gap));
+  z-index: 2;
+  top: var(--flood-sys-space-2);
+  left: clamp(0px, calc(var(--flood-bar-active) + var(--flood-bar-tip-offset)), calc(100% - var(--flood-chart-tip-width)));
+}
+@container (max-width: 22rem) {
+  .flood-root .flood-bar-chart__tooltip {
+    --flood-chart-tip-width: min(6.5rem, 45%);
+    --flood-bar-tip-gap: min(2rem, calc(50% / var(--flood-bar-categories) + var(--flood-sys-space-1)));
+  }
+}
+.flood-root .flood-bar-chart[data-layout="percent"] .flood-bar-chart__tooltip {
+  --flood-chart-tip-width: min(10rem, 46%);
+}
+.flood-root .flood-bar-chart[data-layout="percent"] .flood-line-chart__tooltip-row .flood-line-chart__key {
+  inline-size: var(--flood-sys-space-2);
+}
+.flood-root .flood-donut-chart { min-inline-size: 0; }
+.flood-root .flood-donut-chart__plot {
+  position: relative;
+  display: grid;
+  inline-size: min(100%, 17rem);
+  aspect-ratio: 1;
+  margin-inline: auto;
+  border-radius: 50%;
+}
+.flood-root .flood-donut-chart__plot:focus-visible { border-radius: 50%; }
+.flood-root .flood-donut-chart__plot::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--flood-chart-grid);
+  mask-image: radial-gradient(circle closest-side, transparent 48%, black 67% 88%, transparent);
+  pointer-events: none;
+}
+.flood-root .flood-donut-chart__plot > svg { position: relative; inline-size: 100%; block-size: 100%; }
+.flood-root .flood-donut-chart__track {
+  fill: none;
+  stroke: var(--flood-sys-color-divider-decorative);
+  stroke-width: 16;
+}
+.flood-root .flood-donut-chart__segment {
+  fill: color-mix(in srgb, currentColor 16%, transparent);
+  stroke: color-mix(in srgb, currentColor 52%, transparent);
+  stroke-width: var(--flood-chart-stroke-width);
+  stroke-linejoin: round;
+  vector-effect: non-scaling-stroke;
+}
+.flood-root .flood-donut-chart__segment[data-active] {
+  stroke: currentColor;
+}
+.flood-root .flood-donut-chart :is([data-slice="0"], [data-series="0"]) { color: var(--flood-chart-accent); }
+.flood-root .flood-donut-chart :is([data-slice="1"], [data-series="1"]) { color: var(--flood-sys-color-content-subtle); }
+.flood-root .flood-donut-chart :is([data-slice="2"], [data-series="2"]) {
+  color: color-mix(in srgb, var(--flood-chart-accent) 30%, var(--flood-sys-color-content-subtle));
+}
+.flood-root .flood-donut-chart :is([data-slice="3"], [data-series="3"]) {
+  color: color-mix(in srgb, var(--flood-sys-color-feedback-info) 25%, var(--flood-sys-color-content-subtle));
+}
+.flood-root .flood-donut-chart :is([data-slice="4"], [data-series="4"]) { color: var(--flood-sys-color-content-subtle); }
+.flood-root .flood-donut-chart :is([data-slice="5"], [data-series="5"]) { color: var(--flood-sys-color-content-default); }
+.flood-root .flood-donut-chart__key {
+  inline-size: var(--flood-sys-space-2);
+  block-size: var(--flood-sys-space-2);
+  border-radius: 50%;
+  background: currentColor;
+  flex: none;
+}
+.flood-root .flood-donut-chart__readout {
+  position: absolute;
+  inset: 19%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--flood-sys-space-1);
+  text-align: center;
+  pointer-events: none;
+}
+.flood-root .flood-donut-chart__readout :is(dt, dd) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.flood-root .flood-donut-chart__readout .flood-metric { position: relative; }
+.flood-root .flood-donut-chart__readout .flood-metric__hint {
+  position: absolute;
+  inset-block-start: calc(100% + var(--flood-sys-space-1));
+  inset-inline: 0;
+}
+.flood-root .flood-heatmap { position: relative; min-inline-size: 0; }
+.flood-root .flood-heatmap__tooltip {
+  position: absolute;
+  z-index: 1;
+  display: grid;
+  row-gap: var(--flood-sys-space-1);
+  column-gap: var(--flood-sys-space-2);
+  inline-size: max-content;
+  max-inline-size: min(10rem, calc(100% - 2 * var(--flood-sys-space-2)));
+}
+.flood-root .flood-heatmap__table.flood-table {
+  --flood-heatmap-inset: calc(var(--flood-sys-space-1) / 2);
+  table-layout: fixed;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+.flood-root .flood-heatmap__table.flood-table :is(th, td) {
+  padding: var(--flood-heatmap-inset);
+  border: 0;
+}
+.flood-root .flood-heatmap__table thead tr > :first-child { inline-size: clamp(2rem, 15%, 5rem); }
+.flood-root .flood-heatmap__table.flood-table > tbody > tr > th { border-block-end: 0; }
+.flood-root .flood-heatmap__table.flood-table thead th { text-align: center; }
+.flood-root .flood-heatmap__table th > .flood-text {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.flood-root .flood-heatmap__table.flood-table .flood-heatmap__cell {
+  position: relative;
+  block-size: calc(1.75rem + var(--flood-sys-space-1));
+  padding: 0;
+  border: 0;
+}
+.flood-root .flood-heatmap__cell::before {
+  --flood-heatmap-fill: calc(var(--flood-heatmap-level) * 58%);
+  content: "";
+  position: absolute;
+  inset: var(--flood-heatmap-inset);
+  pointer-events: none;
+  border: var(--flood-chart-stroke-width) solid color-mix(in srgb, var(--flood-chart-accent) var(--flood-heatmap-fill), var(--flood-sys-color-border-decorative));
+  border-radius: var(--flood-sys-radius-indicator);
+  background: color-mix(in srgb, var(--flood-chart-accent) var(--flood-heatmap-fill), var(--flood-sys-color-surface-raised));
+}
+.flood-root .flood-heatmap__cell[data-missing]::before {
+  border-style: dashed;
+  background: var(--flood-chart-grid);
+}
+.flood-root .flood-heatmap__cell[data-active]::before {
+  border-color: var(--flood-sys-color-content-default);
+}
+.flood-root .flood-heatmap__cell:focus-visible { outline: none; }
+.flood-root .flood-heatmap__cell:focus-visible::before {
+  outline: var(--flood-sys-focus-width) solid var(--flood-sys-color-focus-ring);
+  outline-offset: -2px;
+}
+.flood-root .flood-bar-list__items {
+  display: grid;
+  gap: var(--flood-sys-space-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.flood-root .flood-bar-list .flood-indicator {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  min-block-size: var(--flood-sys-control-md-height);
+}
+.flood-root .flood-bar-list :is(.flood-indicator__caption, .flood-indicator__track) { grid-area: 1 / 1; }
+.flood-root .flood-bar-list .flood-indicator__caption {
+  align-items: center;
+  z-index: 1;
+  margin: 0;
+  padding: var(--flood-sys-space-2) var(--flood-sys-space-3);
+}
+.flood-root .flood-bar-list .flood-indicator__caption > span { min-inline-size: 0; overflow-wrap: anywhere; }
+.flood-root .flood-bar-list .flood-indicator__value { color: var(--flood-sys-color-content-default); font-weight: var(--flood-sys-type-label-weight); }
+.flood-root .flood-bar-list .flood-indicator__track { block-size: 100%; background: transparent; border-radius: var(--flood-sys-radius-indicator); }
+.flood-root .flood-bar-list .flood-indicator__fill {
+  --flood-chart-bar-color: var(--flood-indicator-color);
+  background: linear-gradient(to right, color-mix(in srgb, var(--flood-chart-bar-color) 12%, transparent), color-mix(in srgb, var(--flood-chart-bar-color) 22%, transparent));
+  border-radius: inherit;
+  box-shadow: inset 0 calc(-1 * var(--flood-chart-stroke-width)) color-mix(in srgb, var(--flood-chart-bar-color) 38%, transparent);
+}
+.flood-root .flood-bar-list .flood-indicator[data-tone="accent"] .flood-indicator__fill { --flood-chart-bar-color: var(--flood-chart-accent); }
+.flood-root .flood-bar-list:dir(rtl) .flood-indicator__fill { background: linear-gradient(to left, color-mix(in srgb, var(--flood-chart-bar-color) 12%, transparent), color-mix(in srgb, var(--flood-chart-bar-color) 22%, transparent)); }
+@media (hover: hover) {
+  .flood-root .flood-bar-list li:hover .flood-indicator__fill { filter: brightness(1.25); }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .flood-root:not([data-flood-motion="reduce"]) .flood-donut-chart__segment:not(:where([data-flood-motion="reduce"] *)) {
+    transition: stroke var(--flood-chart-motion);
+  }
+  .flood-root:not([data-flood-motion="reduce"]) :is(.flood-bar-chart__group, .flood-bar-chart__pair):not(:where([data-flood-motion="reduce"] *)) {
+    transition: background-color var(--flood-chart-motion), opacity var(--flood-chart-motion);
+  }
+  .flood-root:not([data-flood-motion="reduce"]) :is(.flood-line-chart__plot > svg > [data-series], .flood-line-chart__highlight, .flood-line-chart__inspection):not(:where([data-flood-motion="reduce"] *)) {
+    transition: opacity var(--flood-chart-motion), visibility var(--flood-chart-motion) allow-discrete;
+  }
+  .flood-root:not([data-flood-motion="reduce"]) .flood-bar-list .flood-indicator__fill:not(:where([data-flood-motion="reduce"] *)) {
+    transition: inline-size var(--flood-sys-motion-duration-normal) var(--flood-sys-motion-easing), filter var(--flood-chart-motion);
+  }
+}
+@media (forced-colors: active) {
+  .flood-root .flood-donut-chart__track { stroke: GrayText; }
+  .flood-root .flood-donut-chart .flood-donut-chart__segment { forced-color-adjust: none; stroke: CanvasText; fill: Canvas; }
+  .flood-root .flood-donut-chart .flood-donut-chart__segment[data-active] { stroke: Highlight; }
+  .flood-root :is(.flood-line-chart, .flood-bar-chart) [data-series] { color: CanvasText; }
+  .flood-root .flood-bar-chart__marks::after { forced-color-adjust: none; background: GrayText; }
+  .flood-root .flood-bar-chart__group[data-active] { outline: 1px solid Highlight; outline-offset: -1px; }
+  .flood-root .flood-line-chart__grid { stroke: GrayText; }
+  .flood-root .flood-line-chart__cursor { forced-color-adjust: none; background: Highlight; }
+  .flood-root .flood-line-chart__marker { forced-color-adjust: none; background: CanvasText; }
+  .flood-root .flood-line-chart__area { display: none; }
+  .flood-root .flood-bar-list .flood-indicator__track { outline: none; }
+  .flood-root .flood-bar-list .flood-indicator__fill { forced-color-adjust: none; background: transparent; border-block-end: 2px solid Highlight; }
+}
+
+.flood-root .flood-scatter-chart {
+  --flood-scatter-inset: var(--flood-sys-space-2);
+  --flood-scatter-height: 13rem;
+  min-inline-size: 0;
+  container-type: inline-size;
+}
+
+.flood-root .flood-scatter-chart__layout {
+  display: grid;
+  grid-template-columns: fit-content(26%) minmax(0, 1fr);
+  gap: var(--flood-sys-space-1) var(--flood-sys-space-2);
+}
+
+.flood-root .flood-scatter-chart__plot {
+  position: relative;
+  min-inline-size: 0;
+  block-size: var(--flood-scatter-height);
+  cursor: crosshair;
+}
+
+.flood-root .flood-scatter-chart__plot:focus-visible {
+  outline: var(--flood-sys-focus-width) solid var(--flood-sys-color-focus-ring);
+  outline-offset: var(--flood-sys-focus-offset);
+  border-radius: var(--flood-sys-radius-indicator);
+}
+
+.flood-root .flood-scatter-chart__area {
+  position: absolute;
+  inset: var(--flood-scatter-inset);
+  pointer-events: none;
+}
+
+.flood-root .flood-scatter-chart__area::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--flood-chart-grid);
+  mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent),
+    linear-gradient(transparent, black 12%, black 88%, transparent);
+  mask-composite: intersect;
+}
+
+.flood-root .flood-scatter-chart__point {
+  position: absolute;
+  box-sizing: border-box;
+  inline-size: calc(1.6 * var(--flood-sys-space-1));
+  aspect-ratio: 1;
+  translate: -50% -50%;
+  border-radius: 50%;
+  border: var(--flood-chart-stroke-width) solid color-mix(in srgb, var(--flood-chart-accent) 68%, transparent);
+  background: color-mix(in srgb, var(--flood-chart-accent) 22%, transparent);
+}
+
+.flood-root .flood-scatter-chart__point[data-active] {
+  z-index: 1;
+  border-color: var(--flood-chart-accent);
+  background: var(--flood-chart-accent);
+  box-shadow: 0 0 0 .1875rem color-mix(in srgb, var(--flood-chart-accent) 24%, transparent);
+}
+
+.flood-root .flood-scatter-chart__guides {
+  position: absolute;
+  inset: 0;
+}
+
+.flood-root .flood-scatter-chart__guides::before,
+.flood-root .flood-scatter-chart__guides::after {
+  content: "";
+  position: absolute;
+  opacity: .65;
+}
+
+.flood-root .flood-scatter-chart__guides::before {
+  left: var(--flood-scatter-x);
+  inset-block: 0;
+  inline-size: var(--flood-sys-stroke-width);
+  translate: -50% 0;
+  background: linear-gradient(transparent, var(--flood-chart-accent) 25% 75%, transparent);
+}
+
+.flood-root .flood-scatter-chart__guides::after {
+  top: var(--flood-scatter-y);
+  inset-inline: 0;
+  block-size: var(--flood-sys-stroke-width);
+  translate: 0 -50%;
+  background: linear-gradient(90deg, transparent, var(--flood-chart-accent) 25% 75%, transparent);
+}
+
+.flood-root .flood-scatter-chart__ticks {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--flood-sys-space-2);
+  min-inline-size: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.flood-root .flood-scatter-chart__ticks--y {
+  flex-direction: column;
+  text-align: end;
+}
+
+.flood-root .flood-scatter-chart__ticks--x,
+.flood-root .flood-scatter-chart__horizontal-label {
+  grid-column: 2;
+  padding-inline: var(--flood-scatter-inset);
+}
+.flood-root .flood-scatter-chart__ticks--x {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.flood-root .flood-scatter-chart__ticks > * {
+  min-inline-size: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.flood-root .flood-scatter-chart__ticks--x > :nth-child(2) { text-align: center; }
+.flood-root .flood-scatter-chart__ticks--x > :last-child { grid-column: 3; text-align: end; }
+.flood-root .flood-scatter-chart__ticks--x > :only-child { grid-column: 2; text-align: center; }
+.flood-root .flood-scatter-chart__ticks--y > :only-child { margin-block: auto; }
+.flood-root .flood-scatter-chart__horizontal-label { text-align: center; }
+.flood-root .flood-scatter-chart__vertical-label {
+  display: block;
+  margin-block-end: var(--flood-sys-space-1);
+}
+
+.flood-root .flood-scatter-chart__tooltip {
+  position: absolute;
+  z-index: 2;
+  column-gap: var(--flood-chart-tip-gap);
+  inline-size: max-content;
+  max-inline-size: min(10rem, max(5rem, calc(50% - 1.25 * var(--flood-chart-tip-gap) - var(--flood-sys-stroke-width))));
+  visibility: hidden;
+}
+.flood-root .flood-scatter-chart__tooltip-content {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
+  align-items: baseline;
+  gap: var(--flood-sys-space-1) var(--flood-sys-space-2);
+}
+
+.flood-root .flood-scatter-chart__tooltip[data-positioned] { visibility: visible; }
+.flood-root .flood-scatter-chart__tooltip-content > [data-point-label] { grid-column: 1 / -1; }
+.flood-root .flood-scatter-chart__tooltip-content > [data-coordinate] { text-align: end; }
+.flood-root .flood-scatter-chart__empty {
+  display: grid;
+  place-items: center;
+  min-block-size: var(--flood-scatter-height);
+}
+
+@container (max-width: 20rem) {
+  .flood-root .flood-scatter-chart__plot { --flood-scatter-height: 10rem; }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .flood-root:not([data-flood-motion="reduce"]) .flood-scatter-chart__point:not(:where([data-flood-motion="reduce"] *)) {
+    transition: background-color var(--flood-chart-motion), border-color var(--flood-chart-motion), box-shadow var(--flood-chart-motion);
+  }
+}
+
+@media (forced-colors: active) {
+  .flood-root .flood-scatter-chart__point { forced-color-adjust: none; background: Canvas; border-color: CanvasText; }
+  .flood-root .flood-scatter-chart__point[data-active] { background: Highlight; border-color: Highlight; box-shadow: none; }
+  .flood-root .flood-scatter-chart__guides::before,
+  .flood-root .flood-scatter-chart__guides::after { forced-color-adjust: none; background: Highlight; }
+}
+
+.flood-root .flood-range-chart {
+  --flood-range-height: 13rem;
+  min-inline-size: 0;
+  container-type: inline-size;
+}
+.flood-root .flood-range-chart__plot {
+  position: relative;
+  cursor: crosshair;
+}
+.flood-root .flood-range-chart__plot:focus-visible {
+  outline: var(--flood-sys-focus-width) solid var(--flood-sys-color-focus-ring);
+  outline-offset: var(--flood-sys-focus-offset);
+  border-radius: var(--flood-sys-radius-indicator);
+}
+.flood-root .flood-range-chart__columns {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(var(--flood-range-columns), minmax(0, 1fr));
+}
+.flood-root .flood-range-chart__columns::before {
+  content: "";
+  position: absolute;
+  inset: var(--flood-sys-space-2) 0 auto;
+  block-size: var(--flood-range-height);
+  background: var(--flood-chart-grid);
+  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent),
+    linear-gradient(transparent, black 14%, black 86%, transparent);
+  mask-composite: intersect;
+  pointer-events: none;
+}
+.flood-root .flood-range-chart__column {
+  position: relative;
+  display: grid;
+  min-inline-size: 0;
+  gap: var(--flood-sys-space-2);
+  padding-block: var(--flood-sys-space-2);
+  border-radius: var(--flood-sys-radius-indicator);
+}
+.flood-root .flood-range-chart__column[data-active] {
+  background: color-mix(in srgb, var(--flood-chart-accent) 5%, transparent);
+}
+.flood-root .flood-range-chart__track {
+  position: relative;
+  block-size: var(--flood-range-height);
+  inline-size: min(1.5rem, 68%);
+  margin-inline: auto;
+}
+.flood-root .flood-range-chart__band,
+.flood-root .flood-range-chart__midpoint {
+  position: absolute;
+  inset-inline: 0;
+  box-sizing: border-box;
+}
+.flood-root .flood-range-chart__band {
+  border-radius: var(--flood-sys-radius-indicator);
+  box-shadow: inset 0 0 0 var(--flood-chart-stroke-width) color-mix(in srgb, var(--flood-chart-accent) 65%, transparent);
+  background: linear-gradient(180deg,
+    color-mix(in srgb, var(--flood-chart-accent) 40%, transparent),
+    color-mix(in srgb, var(--flood-chart-accent) 10%, transparent));
+}
+.flood-root .flood-range-chart__band[data-flat] {
+  box-shadow: none;
+  block-size: var(--flood-chart-stroke-width);
+  translate: 0 -50%;
+  background: var(--flood-chart-accent);
+}
+.flood-root .flood-range-chart__midpoint {
+  inset-inline: var(--flood-chart-stroke-width);
+  block-size: var(--flood-chart-stroke-width);
+  translate: 0 -50%;
+  border-radius: var(--flood-sys-radius-action);
+  background: var(--flood-sys-color-content-default);
+}
+.flood-root .flood-range-chart__category {
+  padding-inline: var(--flood-sys-space-1);
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.flood-root .flood-range-chart__tooltip {
+  --flood-range-tip-width: min(9rem, 42%);
+  --flood-range-tip-gap: min(2.75rem, calc(50% / var(--flood-range-columns) + var(--flood-sys-space-1)));
+  --flood-range-tip-offset: calc(var(--flood-range-tip-side) * (var(--flood-range-tip-width) + 2 * var(--flood-range-tip-gap)) + var(--flood-range-tip-gap));
+  position: absolute;
+  z-index: 2;
+  inset-block-start: var(--flood-sys-space-2);
+  left: clamp(0px, calc(var(--flood-range-position) + var(--flood-range-tip-offset)), calc(100% - var(--flood-range-tip-width)));
+  display: grid;
+  gap: var(--flood-sys-space-1);
+  inline-size: var(--flood-range-tip-width);
+}
+.flood-root .flood-range-chart__reading {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: var(--flood-sys-space-1);
+}
+.flood-root .flood-range-chart__reading > :last-child { text-align: end; }
+.flood-root .flood-range-chart__empty {
+  display: grid;
+  place-items: center;
+  min-block-size: var(--flood-range-height);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .flood-root:not([data-flood-motion="reduce"]) .flood-range-chart__column:not(:where([data-flood-motion="reduce"] *)) {
+    transition: background-color var(--flood-chart-motion);
+  }
+}
+@media (forced-colors: active) {
+  .flood-root .flood-range-chart__band:not([data-flat]) { outline: 1px solid CanvasText; outline-offset: -1px; }
+  .flood-root .flood-range-chart__band[data-flat],
+  .flood-root .flood-range-chart__midpoint {
+    forced-color-adjust: none;
+    background: CanvasText;
+  }
+  .flood-root .flood-range-chart__column[data-active] { outline: 1px solid Highlight; outline-offset: -1px; }
+}
+
+.flood-root .flood-bullet-chart { min-inline-size: 0; }
+
+.flood-root .flood-bullet-chart__items {
+  display: grid;
+  gap: var(--flood-sys-space-4);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.flood-root .flood-bullet-chart__caption {
+  justify-content: space-between;
+  overflow-wrap: anywhere;
+}
+
+.flood-root .flood-bullet-chart__numbers {
+  justify-content: flex-end;
+  max-inline-size: 100%;
+  margin-inline-start: auto;
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+
+.flood-root .flood-bullet-chart__actual { font-weight: var(--flood-sys-type-label-weight); }
+
+.flood-root .flood-bullet-chart__plot {
+  --flood-bullet-fill-direction: to right;
+  position: relative;
+  display: grid;
+  align-items: center;
+  min-block-size: 1.25rem;
+}
+
+.flood-root .flood-bullet-chart__plot:dir(rtl) { --flood-bullet-fill-direction: to left; }
+
+.flood-root .flood-bullet-chart .flood-indicator__track {
+  block-size: .75rem;
+  border-radius: var(--flood-sys-radius-action);
+  background: var(--flood-chart-grid), var(--flood-sys-color-surface-raised);
+}
+
+.flood-root .flood-bullet-chart .flood-indicator__fill {
+  background: linear-gradient(var(--flood-bullet-fill-direction),
+    color-mix(in srgb, var(--flood-chart-accent) 28%, transparent),
+    color-mix(in srgb, var(--flood-chart-accent) 58%, transparent));
+  box-shadow: inset 0 0 0 var(--flood-chart-stroke-width)
+    color-mix(in srgb, var(--flood-chart-accent) 65%, transparent);
+}
+
+.flood-root .flood-bullet-chart__plot[data-zero] .flood-indicator__fill { box-shadow: none; }
+
+.flood-root .flood-bullet-chart__target {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: clamp(0px, calc(var(--flood-bullet-target) - var(--flood-chart-stroke-width) / 2),
+    calc(100% - var(--flood-chart-stroke-width)));
+  inline-size: var(--flood-chart-stroke-width);
+  border-radius: var(--flood-sys-radius-action);
+  background: var(--flood-sys-color-content-default);
+  pointer-events: none;
+}
+
+@media (forced-colors: active) {
+  .flood-root .flood-bullet-chart .flood-indicator__track { background: Canvas; }
+  .flood-root .flood-bullet-chart .flood-indicator__fill { background: Highlight; }
+  .flood-root .flood-bullet-chart__target {
+    forced-color-adjust: none;
+    background: CanvasText;
+  }
+}
+
+.flood-root .flood-waterfall-chart {
+  --flood-waterfall-height: 13rem;
+  --flood-waterfall-bar-width: min(2.75rem, 58%);
+  min-inline-size: 0;
+  container-type: inline-size;
+}
+.flood-root .flood-waterfall-chart__plot {
+  position: relative;
+  cursor: crosshair;
+}
+.flood-root .flood-waterfall-chart__plot:focus-visible {
+  outline: var(--flood-sys-focus-width) solid var(--flood-sys-color-focus-ring);
+  outline-offset: var(--flood-sys-focus-offset);
+  border-radius: var(--flood-sys-radius-indicator);
+}
+.flood-root .flood-waterfall-chart__columns {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(var(--flood-waterfall-columns), minmax(0, 1fr));
+}
+.flood-root .flood-waterfall-chart__columns::before {
+  content: "";
+  position: absolute;
+  inset: var(--flood-sys-space-2) 0 auto;
+  block-size: var(--flood-waterfall-height);
+  background: var(--flood-chart-grid);
+  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent),
+    linear-gradient(transparent, black 14%, black 86%, transparent);
+  mask-composite: intersect;
+  pointer-events: none;
+}
+.flood-root .flood-waterfall-chart__columns::after {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  inset-block-start: calc(var(--flood-sys-space-2) + var(--flood-waterfall-height) * var(--flood-waterfall-zero));
+  block-size: var(--flood-sys-stroke-width);
+  background: var(--flood-sys-color-divider-decorative);
+  pointer-events: none;
+}
+.flood-root .flood-waterfall-chart__column {
+  position: relative;
+  display: grid;
+  min-inline-size: 0;
+  gap: var(--flood-sys-space-2);
+  padding-block: var(--flood-sys-space-2);
+  border-radius: var(--flood-sys-radius-indicator);
+}
+.flood-root .flood-waterfall-chart__column[data-active] {
+  background: color-mix(in srgb, var(--flood-chart-accent) 5%, transparent);
+}
+.flood-root .flood-waterfall-chart__track {
+  position: relative;
+  block-size: var(--flood-waterfall-height);
+}
+.flood-root .flood-waterfall-chart__bar {
+  --flood-waterfall-color: var(--flood-sys-color-content-subtle);
+  position: absolute;
+  inset-inline-start: 50%;
+  translate: -50% 0;
+  inline-size: var(--flood-waterfall-bar-width);
+  border-radius: var(--flood-sys-radius-indicator);
+  background: linear-gradient(180deg, color-mix(in srgb, var(--flood-waterfall-color) 39%, transparent),
+    color-mix(in srgb, var(--flood-waterfall-color) 12%, transparent));
+  box-shadow: inset 0 0 0 var(--flood-chart-stroke-width) color-mix(in srgb, var(--flood-waterfall-color) 60%, transparent);
+}
+.flood-root .flood-waterfall-chart__bar[data-kind="total"] { --flood-waterfall-color: var(--flood-chart-accent); }
+.flood-root .flood-waterfall-chart__bar[data-kind="decrease"] {
+  background: color-mix(in srgb, var(--flood-waterfall-color) 12%, transparent);
+  outline: var(--flood-chart-stroke-width) dashed color-mix(in srgb, var(--flood-waterfall-color) 58%, transparent);
+  outline-offset: calc(-1 * var(--flood-chart-stroke-width));
+  box-shadow: none;
+}
+.flood-root .flood-waterfall-chart__bar[data-flat] {
+  min-block-size: var(--flood-chart-stroke-width);
+  outline: none;
+  background: var(--flood-waterfall-color);
+  box-shadow: none;
+}
+.flood-root .flood-waterfall-chart__connector {
+  position: absolute;
+  inline-size: calc((100% - var(--flood-waterfall-bar-width)) / 2);
+  border-block-start: var(--flood-sys-stroke-width) solid var(--flood-sys-color-content-subtle);
+  opacity: .46;
+}
+.flood-root .flood-waterfall-chart__connector[data-side="before"] { inset-inline-start: 0; }
+.flood-root .flood-waterfall-chart__connector[data-side="after"] { inset-inline-end: 0; }
+.flood-root .flood-waterfall-chart__category {
+  padding-inline: var(--flood-sys-space-1);
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.flood-root .flood-waterfall-chart__tooltip {
+  --flood-waterfall-tip-width: min(9rem, 42%);
+  --flood-waterfall-tip-gap: min(calc(2 * var(--flood-chart-tip-gap)), calc(50% / var(--flood-waterfall-columns)));
+  --flood-waterfall-tip-offset: calc(var(--flood-waterfall-tip-side) * (var(--flood-waterfall-tip-width) + 2 * var(--flood-waterfall-tip-gap)) + var(--flood-waterfall-tip-gap));
+  position: absolute;
+  z-index: 2;
+  inset-block-start: var(--flood-sys-space-2);
+  left: clamp(0px, calc(var(--flood-waterfall-position) + var(--flood-waterfall-tip-offset)), calc(100% - var(--flood-waterfall-tip-width)));
+  display: grid;
+  gap: var(--flood-sys-space-1);
+  inline-size: var(--flood-waterfall-tip-width);
+}
+.flood-root .flood-waterfall-chart__reading {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: var(--flood-sys-space-1);
+}
+.flood-root .flood-waterfall-chart__reading > :last-child { text-align: end; }
+.flood-root .flood-waterfall-chart__empty {
+  display: grid;
+  min-block-size: var(--flood-waterfall-height);
+  place-items: center;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .flood-root:not([data-flood-motion="reduce"]) .flood-waterfall-chart__column:not(:where([data-flood-motion="reduce"] *)) {
+    transition: background-color var(--flood-chart-motion);
+  }
+}
+@media (forced-colors: active) {
+  .flood-root .flood-waterfall-chart__bar {
+    forced-color-adjust: none;
+    background: Canvas;
+    box-shadow: inset 0 0 0 var(--flood-chart-stroke-width) CanvasText;
+  }
+  .flood-root .flood-waterfall-chart__bar[data-kind="total"] { background: Highlight; }
+  .flood-root .flood-waterfall-chart__bar[data-kind="decrease"] {
+    outline-color: CanvasText;
+    box-shadow: none;
+  }
+  .flood-root .flood-waterfall-chart__bar[data-flat] { background: CanvasText; }
+}
+
+.flood-root .flood-histogram {
+  --flood-histogram-height: var(--flood-chart-plot-height, 13rem);
+  min-inline-size: 0;
+  container-type: inline-size;
+}
+.flood-root .flood-histogram__plot { position: relative; cursor: crosshair; }
+.flood-root .flood-histogram__plot:focus-visible {
+  outline: var(--flood-sys-focus-width) solid var(--flood-sys-color-focus-ring);
+  outline-offset: var(--flood-sys-focus-offset);
+  border-radius: var(--flood-sys-radius-indicator);
+}
+.flood-root .flood-histogram__columns {
+  position: relative;
+  display: flex;
+  block-size: var(--flood-histogram-height);
+  box-sizing: border-box;
+  padding-block-start: var(--flood-sys-space-3);
+  border-block-end: var(--flood-sys-stroke-width) solid var(--flood-sys-color-divider-decorative);
+}
+.flood-root .flood-histogram__columns::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--flood-chart-grid);
+  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent),
+    linear-gradient(transparent, black 18%, black 84%, transparent);
+  mask-composite: intersect;
+  pointer-events: none;
+}
+.flood-root .flood-histogram__bin { position: relative; flex: 1 1 0; min-inline-size: 0; }
+.flood-root .flood-histogram__bin[data-active] {
+  background: color-mix(in srgb, var(--flood-chart-accent) 5%, transparent);
+}
+.flood-root .flood-histogram__bar {
+  position: absolute;
+  inset-inline: min(7%, var(--flood-sys-space-1) / 2);
+  inset-block-end: 0;
+  block-size: var(--flood-histogram-bin-height);
+  border-radius: var(--flood-sys-radius-indicator) var(--flood-sys-radius-indicator) 0 0;
+  background: linear-gradient(to bottom, color-mix(in srgb, var(--flood-chart-accent) 32%, transparent), color-mix(in srgb, var(--flood-chart-accent) 5%, transparent));
+  --flood-histogram-ink: color-mix(in srgb, var(--flood-chart-accent) 72%, transparent);
+  box-shadow: inset 0 var(--flood-chart-stroke-width) var(--flood-histogram-ink);
+}
+.flood-root .flood-histogram__bar[data-zero] {
+  block-size: var(--flood-sys-stroke-width);
+  border-radius: 0;
+  background: var(--flood-sys-color-border-decorative);
+  box-shadow: none;
+}
+.flood-root .flood-histogram__bin[data-active] > .flood-histogram__bar {
+  --flood-histogram-ink: var(--flood-chart-accent);
+}
+.flood-root .flood-histogram__bin[data-active] > .flood-histogram__bar[data-zero] { background: var(--flood-histogram-ink); }
+.flood-root .flood-histogram__axis {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  margin-block-start: var(--flood-sys-space-2);
+  font-variant-numeric: tabular-nums;
+}
+.flood-root .flood-histogram__axis > .flood-text {
+  max-inline-size: 30%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.flood-root .flood-histogram__mid-label { position: absolute; translate: -50% 0; }
+.flood-root .flood-histogram__axis-label { display: block; text-align: center; margin-block-start: var(--flood-sys-space-2); }
+.flood-root .flood-histogram__tooltip {
+  --flood-histogram-tip-gap: calc(var(--flood-histogram-half-bin) + var(--flood-chart-tip-gap));
+  --flood-histogram-tip-width: min(8rem, max(5rem, calc(50% - var(--flood-histogram-tip-gap))));
+  --flood-histogram-tip-offset: calc(var(--flood-histogram-tip-side) * (var(--flood-histogram-tip-width) + 2 * var(--flood-histogram-tip-gap)) + var(--flood-histogram-tip-gap));
+  position: absolute;
+  z-index: 1;
+  top: var(--flood-sys-space-2);
+  left: clamp(0px, calc(var(--flood-histogram-active) + var(--flood-histogram-tip-offset)), calc(100% - var(--flood-histogram-tip-width)));
+  inline-size: var(--flood-histogram-tip-width);
+  display: grid;
+  gap: var(--flood-sys-space-1);
+}
+.flood-root .flood-histogram__tooltip-count { justify-content: space-between; }
+.flood-root .flood-histogram__plot:has(.flood-histogram__bin:only-child) .flood-histogram__tooltip {
+  left: 50%;
+  translate: -50% 0;
+}
+.flood-root .flood-histogram__empty { display: grid; place-items: center; min-block-size: var(--flood-histogram-height); }
+@media (prefers-reduced-motion: no-preference) {
+  .flood-root:not([data-flood-motion="reduce"]) .flood-histogram__bar:not(:where([data-flood-motion="reduce"] *)) {
+    transition: box-shadow var(--flood-chart-motion);
+  }
+}
+@media (forced-colors: active) {
+  .flood-root .flood-histogram__columns::before { display: none; }
+  .flood-root .flood-histogram__bar[data-zero] { forced-color-adjust: none; background: GrayText; }
+  .flood-root .flood-histogram__bin[data-active] > .flood-histogram__bar[data-zero] { background: Highlight; }
+  .flood-root .flood-histogram__bar:not([data-zero]) {
+    forced-color-adjust: none;
+    background: Canvas;
+    box-shadow: inset 0 0 0 var(--flood-chart-stroke-width) CanvasText;
+  }
+  .flood-root .flood-histogram__bin[data-active] > .flood-histogram__bar:not([data-zero]) {
+    box-shadow: inset 0 0 0 var(--flood-chart-stroke-width) Highlight;
+  }
+}
+
+.flood-root .flood-box-plot {
+  --flood-box-label: clamp(3.75rem, 19%, 7rem);
+  --flood-box-row-height: 3rem;
+  --flood-box-gutter: var(--flood-sys-space-2);
+  min-inline-size: 0;
+}
+.flood-root .flood-box-plot__plot {
+  position: relative;
+  min-block-size: 11rem;
+  cursor: crosshair;
+}
+.flood-root .flood-box-plot__plot:focus-visible {
+  outline: var(--flood-sys-focus-width) solid var(--flood-sys-color-focus-ring);
+  outline-offset: var(--flood-sys-focus-offset);
+  border-radius: var(--flood-sys-radius-indicator);
+}
+.flood-root .flood-box-plot__rows {
+  position: relative;
+  isolation: isolate;
+  display: grid;
+  box-sizing: border-box;
+  grid-auto-rows: minmax(var(--flood-box-row-height), 1fr);
+  min-block-size: var(--flood-chart-plot-height, 0px);
+  border-block-end: var(--flood-sys-stroke-width) solid var(--flood-sys-color-divider-decorative);
+}
+.flood-root .flood-box-plot__rows::before {
+  content: "";
+  position: absolute;
+  inset: 0 var(--flood-box-gutter) 0 var(--flood-box-label);
+  background: var(--flood-chart-grid);
+  mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
+  pointer-events: none;
+}
+.flood-root .flood-box-plot__row {
+  display: grid;
+  grid-template-columns: var(--flood-box-label) minmax(0, 1fr);
+  align-items: center;
+  min-block-size: var(--flood-box-row-height);
+  padding-inline-end: var(--flood-box-gutter);
+  border-radius: var(--flood-sys-radius-indicator);
+}
+.flood-root .flood-box-plot__row[data-active] {
+  background: color-mix(in srgb, var(--flood-chart-accent) 5%, transparent);
+}
+.flood-root .flood-box-plot__category {
+  padding-inline: var(--flood-box-gutter);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.flood-root .flood-box-plot__track {
+  position: relative;
+  block-size: var(--flood-box-row-height);
+}
+.flood-root .flood-box-plot__track > :is(.flood-box-plot__box, .flood-box-plot__whisker, .flood-box-plot__median, .flood-box-plot__outlier, .flood-box-plot__missing) {
+  position: absolute;
+  inset-block-start: 50%;
+  translate: 0 -50%;
+}
+.flood-root .flood-box-plot__whisker {
+  block-size: var(--flood-sys-stroke-width);
+  background: color-mix(in srgb, var(--flood-chart-accent) 54%, transparent);
+}
+.flood-root .flood-box-plot__whisker::before {
+  content: "";
+  position: absolute;
+  inset-block-start: 50%;
+  translate: -50% -50%;
+  inline-size: var(--flood-chart-stroke-width);
+  block-size: .75rem;
+  border-radius: var(--flood-sys-radius-action);
+  background: color-mix(in srgb, var(--flood-chart-accent) 64%, transparent);
+}
+.flood-root .flood-box-plot__whisker[data-side="start"]::before { left: 0; }
+.flood-root .flood-box-plot__whisker[data-side="end"]::before { left: 100%; }
+.flood-root .flood-box-plot__box {
+  block-size: 1.5rem;
+  min-inline-size: var(--flood-chart-stroke-width);
+  border-radius: var(--flood-sys-radius-indicator);
+  box-shadow: inset 0 0 0 var(--flood-chart-stroke-width) color-mix(in srgb, var(--flood-chart-accent) 68%, transparent);
+  background: linear-gradient(90deg,
+    color-mix(in srgb, var(--flood-chart-accent) 17%, transparent),
+    color-mix(in srgb, var(--flood-chart-accent) 39%, transparent));
+}
+.flood-root .flood-box-plot__median {
+  inline-size: var(--flood-chart-stroke-width);
+  block-size: 1.25rem;
+  border-radius: var(--flood-sys-radius-action);
+  background: var(--flood-sys-color-content-default);
+}
+.flood-root .flood-box-plot__outlier {
+  box-sizing: border-box;
+  inline-size: .45rem;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  border: var(--flood-chart-stroke-width) solid color-mix(in srgb, var(--flood-chart-accent) 68%, transparent);
+}
+.flood-root .flood-box-plot__track > :is(.flood-box-plot__median, .flood-box-plot__outlier) { translate: -50% -50%; }
+.flood-root .flood-box-plot__missing {
+  inset-inline: 0;
+  border-block-start: var(--flood-sys-stroke-width) dashed var(--flood-sys-color-divider-decorative);
+}
+.flood-root .flood-box-plot__axis {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--flood-sys-space-2);
+  margin-inline: var(--flood-box-label) var(--flood-box-gutter);
+  padding-block-start: var(--flood-sys-space-2);
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+.flood-root .flood-box-plot__axis > :only-child { margin-inline: auto; }
+.flood-root .flood-box-plot__axis > * { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.flood-root .flood-box-plot__tooltip {
+  position: absolute;
+  z-index: 1;
+  display: grid;
+  row-gap: var(--flood-sys-space-1);
+  column-gap: var(--flood-chart-tip-gap);
+  inline-size: min(12rem, calc(50% - 2 * var(--flood-chart-tip-gap)));
+  visibility: hidden;
+}
+.flood-root .flood-box-plot__tooltip[data-positioned] { visibility: visible; }
+.flood-root .flood-box-plot__reading {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--flood-sys-space-1);
+}
+.flood-root .flood-box-plot__reading > :last-child { text-align: end; }
+.flood-root .flood-box-plot__reading > :first-child,
+.flood-root .flood-box-plot__reading > :last-child > span { white-space: nowrap; }
+.flood-root .flood-box-plot__empty {
+  display: grid;
+  place-items: center;
+  min-block-size: calc(var(--flood-box-row-height) * 3);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .flood-root:not([data-flood-motion="reduce"]) .flood-box-plot__row:not(:where([data-flood-motion="reduce"] *)) {
+    transition: background-color var(--flood-chart-motion);
+  }
+}
+@media (forced-colors: active) {
+  .flood-root .flood-box-plot__whisker,
+  .flood-root .flood-box-plot__whisker::before,
+  .flood-root .flood-box-plot__median { forced-color-adjust: none; background: CanvasText; }
+  .flood-root .flood-box-plot__box { outline: 1px solid CanvasText; outline-offset: -1px; }
+  .flood-root .flood-box-plot__row[data-active] { outline: 1px solid Highlight; outline-offset: -1px; }
+}
+
+.flood-root .flood-dumbbell-chart {
+  --flood-dumbbell-label-width: clamp(3.5rem, 20%, 7rem);
+  --flood-dumbbell-inset: var(--flood-sys-space-2);
+  min-inline-size: 0;
+}
+.flood-root .flood-dumbbell-chart__plot { position: relative; cursor: crosshair; }
+.flood-root .flood-dumbbell-chart__rows {
+  position: relative;
+  isolation: isolate;
+}
+.flood-root .flood-dumbbell-chart__rows::before {
+  content: "";
+  position: absolute;
+  inset: 0 var(--flood-dumbbell-inset) 0 var(--flood-dumbbell-label-width);
+  background: var(--flood-chart-grid);
+  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
+  pointer-events: none;
+}
+.flood-root .flood-dumbbell-chart__row {
+  display: grid;
+  grid-template-columns: var(--flood-dumbbell-label-width) minmax(0, 1fr);
+  align-items: center;
+  min-block-size: 2.75rem;
+  border-radius: var(--flood-sys-radius-indicator);
+  position: relative;
+}
+.flood-root .flood-dumbbell-chart__row[data-active] {
+  background: color-mix(in srgb, var(--flood-chart-accent) 6%, transparent);
+  z-index: 1;
+}
+.flood-root .flood-dumbbell-chart__name {
+  padding-inline: var(--flood-dumbbell-inset);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.flood-root .flood-dumbbell-chart__track {
+  position: relative;
+  margin-inline: var(--flood-dumbbell-inset);
+}
+.flood-root .flood-dumbbell-chart__connector {
+  position: absolute;
+  block-size: var(--flood-chart-stroke-width);
+  translate: 0 -50%;
+  background: color-mix(in srgb, var(--flood-chart-accent) 55%, transparent);
+}
+.flood-root :is(.flood-dumbbell-chart__point, .flood-dumbbell-chart__key) {
+  box-sizing: border-box;
+  inline-size: .625rem;
+  block-size: .625rem;
+  border-radius: 50%;
+  border: var(--flood-chart-stroke-width) solid var(--flood-chart-accent);
+  background: var(--flood-chart-accent);
+}
+.flood-root .flood-dumbbell-chart__point { position: absolute; translate: -50% -50%; }
+.flood-root .flood-dumbbell-chart [data-point="before"] {
+  inline-size: .875rem;
+  block-size: .875rem;
+  border-color: var(--flood-sys-color-content-subtle);
+  background: var(--flood-sys-color-surface-raised);
+}
+.flood-root .flood-dumbbell-chart [data-point="after"] {
+  inline-size: .4375rem;
+  block-size: .4375rem;
+}
+.flood-root .flood-dumbbell-chart__axis {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--flood-sys-space-2);
+  margin-inline: calc(var(--flood-dumbbell-label-width) + var(--flood-dumbbell-inset)) var(--flood-dumbbell-inset);
+  margin-block-start: var(--flood-sys-space-2);
+  font-variant-numeric: tabular-nums;
+}
+.flood-root .flood-dumbbell-chart__axis > :only-child { margin-inline: auto; }
+.flood-root .flood-dumbbell-chart__axis > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.flood-root .flood-dumbbell-chart__legend { margin-block-start: var(--flood-sys-space-3); }
+.flood-root .flood-dumbbell-chart__tooltip {
+  --flood-dumbbell-tip-width: min(9rem, 80%);
+  position: absolute;
+  z-index: 1;
+  display: grid;
+  gap: var(--flood-sys-space-1);
+  inline-size: var(--flood-dumbbell-tip-width);
+  --flood-dumbbell-track-width: calc(100% - var(--flood-dumbbell-label-width) - 2 * var(--flood-dumbbell-inset));
+  left: clamp(0px, calc(var(--flood-dumbbell-label-width) + var(--flood-dumbbell-inset) + var(--flood-dumbbell-anchor) * var(--flood-dumbbell-track-width) - var(--flood-dumbbell-tip-width) / 2), calc(100% - var(--flood-dumbbell-tip-width)));
+}
+.flood-root .flood-dumbbell-chart__tooltip[data-side="below"] { inset-block-start: calc(100% + var(--flood-dumbbell-inset)); }
+.flood-root .flood-dumbbell-chart__tooltip[data-side="above"] { inset-block-end: calc(100% + var(--flood-dumbbell-inset)); }
+.flood-root .flood-dumbbell-chart__reading { justify-content: space-between; }
+@media (prefers-reduced-motion: no-preference) {
+  .flood-root:not([data-flood-motion="reduce"]) .flood-dumbbell-chart__row:not(:where([data-flood-motion="reduce"] *)) {
+    transition: background-color var(--flood-chart-motion);
+  }
+}
+@media (forced-colors: active) {
+  .flood-root .flood-dumbbell-chart__connector { forced-color-adjust: none; background: GrayText; }
+  .flood-root .flood-dumbbell-chart [data-point] { forced-color-adjust: none; border-color: CanvasText; background: Canvas; }
+  .flood-root .flood-dumbbell-chart [data-point="after"] { background: CanvasText; }
+  .flood-root .flood-dumbbell-chart__row[data-active] { outline: 1px solid Highlight; outline-offset: -1px; }
+}
+
+.flood-root .flood-file-list { box-sizing:border-box; padding-inline:var(--flood-sys-space-4); border:var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); border-radius:var(--flood-sys-radius-field); background:var(--flood-sys-color-surface-default); container-type:inline-size; container-name:flood-files; }
+.flood-root .flood-file-item__thumbnail { display:grid; place-items:center; flex:none; inline-size:var(--flood-sys-control-md-height); block-size:var(--flood-sys-control-md-height); border-radius:var(--flood-sys-radius-action); color:var(--flood-sys-color-content-subtle); overflow:hidden; background:var(--flood-sys-color-field-background); }
+.flood-root .flood-file-item__thumbnail img { display:block; inline-size:100%; block-size:100%; object-fit:cover; }
+.flood-root .flood-file-item__name { overflow-wrap:anywhere; }
+.flood-root .flood-file-item__heading { display:flex; align-items:center; flex-wrap:wrap; gap:var(--flood-sys-space-1) var(--flood-sys-space-2); min-inline-size:0; }
+.flood-root .flood-file-item__heading>.flood-file-item__name { min-inline-size:0; }
+.flood-root .flood-file-meta { flex:0 1 auto; max-inline-size:100%; flex-wrap:wrap; white-space:normal; overflow-wrap: break-word; color:var(--flood-sys-color-content-subtle); font-weight:400; }
+.flood-root .flood-file-meta>span { min-inline-size:0; }
+.flood-root .flood-file-item .flood-data-list-item__trailing { flex:none; max-inline-size:none; }
+.flood-root .flood-upload-item .flood-data-list-item__copy { align-self:center; }
+.flood-root .flood-upload-item__status-row { display:flex; align-items:center; gap:var(--flood-sys-space-2); min-inline-size:0; }
+.flood-root .flood-upload-item__status-row[data-progress]>.flood-status-indicator { flex:none; white-space:nowrap; }
+.flood-root .flood-upload-item .flood-indicator { flex:1; min-inline-size:0; }
+.flood-root .flood-upload-item .flood-status-indicator { overflow-wrap:break-word; }
+.flood-root .flood-image-preview { inline-size:min(56rem,calc(100% - var(--flood-sys-space-8))); }
+.flood-root .flood-image-preview__figure { margin:0; }
+.flood-root .flood-image-preview__media { display:grid; place-items:center; min-block-size:12rem; max-inline-size:100%; background:var(--flood-sys-color-surface-canvas); border-radius:var(--flood-sys-radius-field); overflow:hidden; }
+.flood-root .flood-image-preview__image { grid-area:1/1; inline-size:auto; max-inline-size:100%; max-block-size:60dvh; object-fit:contain; }
+.flood-root .flood-image-preview__media[data-state="loading"] .flood-image-preview__image { visibility:hidden; }
+.flood-root .flood-image-preview__media>[role="status"] { grid-area:1/1; }
+.flood-root .flood-image-preview__caption { margin-block-start:var(--flood-sys-space-2); font-size:var(--flood-sys-type-compact-size); line-height:var(--flood-sys-type-compact-line-height); color:var(--flood-sys-color-content-subtle); }
+.flood-root .flood-image-preview__actions { display:flex; justify-content:flex-end; margin-block-start:var(--flood-sys-space-4); }
+@media(max-width:30rem){.flood-root .flood-file-list>.flood-file-item { flex-wrap:nowrap; }.flood-root .flood-file-item__thumbnail{inline-size:var(--flood-sys-control-sm-height);block-size:var(--flood-sys-control-sm-height);}}
+@container flood-files (max-width:16rem){
+ .flood-root .flood-file-list>.flood-file-item:not([hidden]) { display:grid; grid-template-columns:minmax(0,1fr); }
+ .flood-root .flood-file-item .flood-data-list-item__trailing { justify-content:flex-start; }
+ .flood-root .flood-file-item .flood-data-list-item__actions { flex-wrap:wrap; }
+ .flood-root .flood-upload-item__status-row { flex-wrap:wrap; }
+ .flood-root .flood-upload-item__status-row[data-progress]>.flood-status-indicator { flex:0 1 auto; min-inline-size:0; white-space:normal; }
+ .flood-root .flood-upload-item .flood-indicator { flex-basis:100%; }
+}
+
+.flood-root .flood-time-picker__panel { inline-size:min(var(--flood-time-picker-width,22rem),var(--flood-overlay-available-width,calc(100dvw - 1rem))); padding:var(--flood-sys-space-1); }
+.flood-root .flood-time-picker__scroll { max-block-size:min(15rem,calc(var(--flood-overlay-available-height,60dvh) - 1rem)); }
+
+.flood-root .flood-date-time-range-picker { min-inline-size:0; inline-size:100%; }
+
+.flood-root .flood-overflow-actions { position:relative; inline-size:100%; min-inline-size:0; }
+.flood-root .flood-overflow-actions__bar { display:flex; flex-wrap:nowrap; gap:var(--flood-sys-space-2); inline-size:fit-content; max-inline-size:100%; min-inline-size:0; overflow:auto; }
+.flood-root .flood-overflow-actions__bar > button { flex:none; }
+.flood-root :is(.flood-overflow-actions__leading,.flood-overflow-actions__trailing) { display:flex; align-items:center; flex:none; min-inline-size:0; }
+.flood-root .flood-overflow-actions__trailing { margin-inline-start:auto; }
+.flood-root .flood-overflow-actions__measure { position:absolute; visibility:hidden; pointer-events:none; inline-size:max-content; block-size:0; overflow:hidden; display:flex; gap:var(--flood-sys-space-2); }
+.flood-root .flood-menubar { display:flex; align-items:center; gap:var(--flood-sys-space-1); min-inline-size:0; max-inline-size:100%; overflow:auto; }
+.flood-root .flood-menubar > button { flex:none; }
+.flood-root .flood-button[data-tone="danger"] { --flood-action-content:var(--flood-sys-color-action-danger-content); }
+.flood-root .flood-button--solid[data-tone="danger"] {
+  --flood-action-rest:var(--flood-sys-color-action-danger-content);
+  --flood-action-hover:color-mix(in srgb,var(--flood-sys-color-action-danger-content),white 10%);
+  --flood-action-pressed:color-mix(in srgb,var(--flood-sys-color-action-danger-content),black 10%);
+  --flood-action-content:var(--flood-sys-color-surface-canvas);
+}
+
+/* BulkActionBar shares Toolbar geometry and adaptive command ownership. */
+.flood-root .flood-bulk-action-bar { inline-size:100%; max-inline-size:32rem; }
+.flood-root .flood-bulk-action-bar > .flood-overflow-actions__bar { inline-size:100%; background:var(--flood-sys-color-surface-floating); border-color:var(--flood-sys-color-border-floating); box-shadow:0 var(--flood-sys-effect-floating-shadow-offset) var(--flood-sys-effect-floating-shadow-blur) var(--flood-sys-color-shadow-floating); }
+.flood-root .flood-bulk-action-bar > .flood-overflow-actions__bar > .flood-overflow-actions__leading { max-inline-size:35%; }
+.flood-root .flood-bulk-action-bar__selection { box-sizing:border-box; inline-size:7rem; max-inline-size:100%; padding-inline:var(--flood-sys-space-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; }
+.flood-root .flood-bulk-action-bar__selection[data-counter="number"] { inline-size:3rem; text-align:center; }
+@media(forced-colors:active) { .flood-root .flood-bulk-action-bar > .flood-overflow-actions__bar { background:Canvas; border-color:CanvasText; box-shadow:none; } }
+
+/* Nearest material owners establish their own inherited recipes. Absolute surface
+   palette roles stay unchanged; descendants consume the existing semantic roles. */
+.flood-root :where(.flood-surface, .flood-dialog, .flood-overlay-panel,
+  .flood-select__menu, .flood-toast, .flood-toolbar:not([data-variant="plain"]), .flood-calendar:not(.flood-date-picker__panel .flood-calendar):not(.flood-date-range-picker__panel .flood-calendar),
+  .flood-file-list, .flood-color-picker__panel, .flood-bulk-action-bar,
+  .flood-tabs:not([data-variant="line"]), .flood-disclosure:not(.flood-accordion > .flood-disclosure), .flood-accordion,
+  .flood-segmented .flood-choice-group, .flood-data-table__footer, .flood-code-snippet),
+.flood-root :where([data-flood-surface="filled"], [data-flood-surface="floating"]),
+.flood-root:is([data-flood-surface="filled"], [data-flood-surface="floating"]) {
+  --flood-sys-color-action-subtle-rest: var(--flood-sys-color-context-filled-action-rest);
+  --flood-sys-color-action-subtle-hover: var(--flood-sys-color-context-filled-action-hover);
+  --flood-sys-color-action-subtle-pressed: var(--flood-sys-color-context-filled-action-pressed);
+  --flood-sys-color-action-subtle-disabled: var(--flood-sys-color-context-filled-action-disabled);
+  --flood-sys-color-action-ghost-hover: var(--flood-sys-color-context-filled-action-hover);
+  --flood-sys-color-action-ghost-pressed: var(--flood-sys-color-context-filled-action-pressed);
+  --flood-sys-color-action-on-surface-rest: var(--flood-sys-color-context-filled-action-rest);
+  --flood-sys-color-action-on-surface-hover: var(--flood-sys-color-context-filled-action-hover);
+  --flood-sys-color-action-on-surface-pressed: var(--flood-sys-color-context-filled-action-pressed);
+  --flood-sys-color-action-on-surface-disabled: var(--flood-sys-color-context-filled-action-disabled);
+  --flood-sys-color-field-background: var(--flood-sys-color-context-filled-field-background);
+  --flood-sys-color-field-border: var(--flood-sys-color-context-filled-field-border);
+  --flood-sys-color-field-readonly: var(--flood-sys-color-context-filled-field-readonly);
+  --flood-sys-color-field-disabled: var(--flood-sys-color-context-filled-field-disabled);
+  --flood-sys-color-selection-background: var(--flood-sys-color-context-filled-selection-background);
+  --flood-sys-color-border-decorative: var(--flood-sys-color-context-filled-border-decorative);
+  --flood-sys-color-divider-decorative: var(--flood-sys-color-context-filled-divider-decorative);
+  --flood-sys-color-surface-supporting: var(--flood-sys-color-context-filled-supporting-background);
+  --flood-sys-color-surface-avatar: var(--flood-sys-color-context-filled-avatar-background);
+  --flood-sys-color-surface-muted: var(--flood-sys-color-context-filled-muted-background);
+  --flood-sys-color-indicator-track: var(--flood-sys-color-context-filled-indicator-track);
+  --flood-sys-color-loading-placeholder: var(--flood-sys-color-context-filled-loading-placeholder);
+}
+
+.flood-root[data-flood-surface="filled"],
+.flood-root :where([data-flood-surface="filled"], .flood-surface[data-flood-elevation="default"], .flood-toolbar:not([data-variant="plain"]), .flood-file-list, .flood-color-picker__panel,
+  .flood-tabs:not([data-variant="line"]), .flood-disclosure:not(.flood-accordion > .flood-disclosure), .flood-accordion,
+  .flood-segmented .flood-choice-group, .flood-data-table__footer, .flood-code-snippet) {
+  --flood-sys-color-surface-current: var(--flood-sys-color-surface-default);
+}
+.flood-root :where(.flood-surface[data-flood-elevation="raised"], .flood-calendar:not(.flood-date-picker__panel .flood-calendar):not(.flood-date-range-picker__panel .flood-calendar)) {
+  --flood-sys-color-surface-current: var(--flood-sys-color-surface-raised);
+}
+.flood-root :where(.flood-surface[data-flood-elevation="overlay"], .flood-dialog) {
+  --flood-sys-color-surface-current: var(--flood-sys-color-surface-overlay);
+}
+.flood-root[data-flood-surface="floating"],
+.flood-root :where(.flood-overlay-panel, .flood-select__menu, .flood-toast, .flood-bulk-action-bar,
+  .flood-bulk-action-bar > .flood-overflow-actions__bar, [data-flood-surface="floating"]) {
+  --flood-sys-color-surface-current: var(--flood-sys-color-surface-floating);
+}
+/* Picker calendars shed their standalone material; the popup is their owner. */
+.flood-root :where(.flood-date-picker__panel, .flood-date-range-picker__panel) .flood-calendar {
+  --flood-sys-color-surface-current: inherit;
+}
+
+/* Explicit canvas scopes reset every role after automatic material owners. */
+.flood-root[data-flood-surface="base"],
+.flood-root :where([data-flood-surface="base"], .flood-dropzone,
+  .flood-tabs:not([data-variant="line"]) > .flood-tabs__scroll) {
+  --flood-sys-color-action-subtle-rest: var(--flood-sys-color-context-base-action-rest);
+  --flood-sys-color-action-subtle-hover: var(--flood-sys-color-context-base-action-hover);
+  --flood-sys-color-action-subtle-pressed: var(--flood-sys-color-context-base-action-pressed);
+  --flood-sys-color-action-subtle-disabled: var(--flood-sys-color-context-base-action-disabled);
+  --flood-sys-color-action-ghost-hover: var(--flood-sys-color-context-base-action-hover);
+  --flood-sys-color-action-ghost-pressed: var(--flood-sys-color-context-base-action-pressed);
+  --flood-sys-color-action-on-surface-rest: var(--flood-sys-color-context-base-on-surface-action-rest);
+  --flood-sys-color-action-on-surface-hover: var(--flood-sys-color-context-base-on-surface-action-hover);
+  --flood-sys-color-action-on-surface-pressed: var(--flood-sys-color-context-base-on-surface-action-pressed);
+  --flood-sys-color-action-on-surface-disabled: var(--flood-sys-color-context-base-on-surface-action-disabled);
+  --flood-sys-color-field-background: var(--flood-sys-color-context-base-field-background);
+  --flood-sys-color-field-border: var(--flood-sys-color-context-base-field-border);
+  --flood-sys-color-field-readonly: var(--flood-sys-color-context-base-field-readonly);
+  --flood-sys-color-field-disabled: var(--flood-sys-color-context-base-field-disabled);
+  --flood-sys-color-selection-background: var(--flood-sys-color-context-base-selection-background);
+  --flood-sys-color-border-decorative: var(--flood-sys-color-context-base-border-decorative);
+  --flood-sys-color-divider-decorative: var(--flood-sys-color-context-base-divider-decorative);
+  --flood-sys-color-surface-supporting: var(--flood-sys-color-context-base-supporting-background);
+  --flood-sys-color-surface-avatar: var(--flood-sys-color-context-base-avatar-background);
+  --flood-sys-color-surface-muted: var(--flood-sys-color-context-base-muted-background);
+  --flood-sys-color-indicator-track: var(--flood-sys-color-context-base-indicator-track);
+  --flood-sys-color-loading-placeholder: var(--flood-sys-color-context-base-loading-placeholder);
+  --flood-sys-color-surface-current: var(--flood-sys-color-surface-canvas);
+}
+
+/* Explicit host preference also works in engines without the media feature. */
+.flood-root[data-flood-transparency="reduced"] :is(.flood-overlay-panel, .flood-select__menu),
+.flood-root [data-flood-transparency="reduced"] :is(.flood-overlay-panel, .flood-select__menu),
+.flood-root :is(.flood-overlay-panel, .flood-select__menu)[data-flood-transparency="reduced"] {
+  background: var(--flood-sys-color-surface-floating);
+  backdrop-filter: none;
+}
+
+@media (forced-colors: active) {
+  .flood-root[data-flood-transparency="reduced"] :is(.flood-overlay-panel, .flood-select__menu),
+  .flood-root [data-flood-transparency="reduced"] :is(.flood-overlay-panel, .flood-select__menu),
+  .flood-root :is(.flood-overlay-panel, .flood-select__menu)[data-flood-transparency="reduced"] {
+    background: Canvas;
+  }
+  .flood-root, .flood-root :where(.flood-surface, .flood-dialog, .flood-overlay-panel,
+    .flood-select__menu, .flood-toast, .flood-toolbar:not([data-variant="plain"]), .flood-calendar:not(.flood-date-picker__panel .flood-calendar):not(.flood-date-range-picker__panel .flood-calendar),
+    .flood-file-list, .flood-color-picker__panel, .flood-bulk-action-bar,
+    .flood-tabs:not([data-variant="line"]), .flood-disclosure:not(.flood-accordion > .flood-disclosure), .flood-accordion,
+    .flood-segmented .flood-choice-group, .flood-data-table__footer, .flood-code-snippet,
+    .flood-dropzone, .flood-tabs:not([data-variant="line"]) > .flood-tabs__scroll, [data-flood-surface]) {
+    --flood-sys-color-surface-current: Canvas;
+    --flood-sys-color-surface-supporting: Canvas;
+    --flood-sys-color-surface-avatar: Canvas;
+    --flood-sys-color-surface-muted: Canvas;
+    --flood-sys-color-field-readonly: Canvas;
+  }
+}
+
+.flood-root .flood-filter-condition { container: flood-filter-condition / inline-size; min-inline-size:0; }
+.flood-root .flood-filter-condition__row { grid-template-columns:minmax(7rem,.9fr) minmax(8rem,1fr) minmax(10rem,1.6fr); align-items:center; }
+.flood-root .flood-filter-condition[data-removable="true"] .flood-filter-condition__row { grid-template-columns:minmax(7rem,.9fr) minmax(8rem,1fr) minmax(10rem,1.6fr) auto; }
+.flood-root .flood-filter-condition__values { min-inline-size:0; }
+@container flood-filter-condition (max-width:34rem) {
+  .flood-root .flood-filter-condition__row,
+  .flood-root .flood-filter-condition[data-removable="true"] .flood-filter-condition__row { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
+  .flood-root .flood-filter-condition[data-removable="true"] .flood-filter-condition__row { grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; }
+  .flood-root .flood-filter-condition__values { grid-column:1 / -1; }
+  .flood-root .flood-filter-condition[data-removable="true"] .flood-filter-condition__values { grid-column:1 / 3; }
+  .flood-root .flood-filter-condition__remove { grid-column:3; grid-row:2; }
+}
+@container flood-filter-condition (max-width:22rem) {
+  .flood-root .flood-filter-condition__row,
+  .flood-root .flood-filter-condition[data-removable="true"] .flood-filter-condition__row { grid-template-columns:minmax(0,1fr); }
+  .flood-root .flood-filter-condition__row > :is(.flood-field,.flood-filter-condition__values) { grid-column:1 / -1; }
+  .flood-root .flood-filter-condition__remove { grid-column:1; grid-row:auto; justify-self:end; }
+}
+.flood-root .flood-filter-group .flood-segmented > .flood-fieldset__body { grid-template-columns: minmax(0, 1fr); }
+.flood-root .flood-filter-group .flood-segmented .flood-choice-group { max-inline-size: 100%; }
+.flood-root .flood-filter-group .flood-segmented .flood-choice { flex: 1 1 auto; min-inline-size: 0; }
+
+.flood-root .flood-collection-toolbar { inline-size:100%; min-inline-size:0; container-type:inline-size; }
+.flood-root .flood-collection-toolbar__row { min-inline-size:0; display:grid; grid-template-columns:minmax(12rem,24rem) minmax(0,1fr) auto; }
+.flood-root .flood-collection-toolbar__search { min-inline-size:0; max-inline-size:100%; }
+.flood-root .flood-collection-toolbar__summaries { min-inline-size:0; max-inline-size:100%; }
+.flood-root .flood-collection-toolbar__commands { margin-inline-start:auto; max-inline-size:100%; justify-content:flex-end; }
+.flood-root .flood-collection-toolbar__clear[data-visible="false"] { visibility:hidden; }
+.flood-root .flood-collection-toolbar__commands { grid-column:3; }
+@container (max-width:46rem) {
+  .flood-root .flood-collection-toolbar__row { grid-template-columns:minmax(0,1fr) auto; }
+  .flood-root .flood-collection-toolbar__commands { grid-column:2; grid-row:1; }
+  .flood-root .flood-collection-toolbar__summaries { grid-column:1 / -1; grid-row:2; }
 }
 @container (max-width:28rem) {
   .flood-root .flood-collection-toolbar__row { grid-template-columns:minmax(0,1fr); }
@@ -2190,6 +3591,22 @@
   .flood-root .flood-collection-toolbar__summaries { grid-row:3; }
 }
 
+.flood-root .flood-collection-toolbar[data-align="end"] .flood-collection-toolbar__row {
+  display:flex;
+  justify-content:flex-end;
+}
+.flood-root .flood-collection-toolbar[data-align="end"] .flood-collection-toolbar__search {
+  flex:0 1 24rem;
+  min-inline-size:min(100%, 12rem);
+}
+.flood-root .flood-collection-toolbar[data-align="end"] :is(.flood-collection-toolbar__summaries, .flood-collection-toolbar__commands) {
+  justify-content:flex-end;
+}
+.flood-root .flood-collection-toolbar[data-align="end"] .flood-collection-toolbar__commands { margin-inline-start:0; }
+@container (max-width:28rem) {
+  .flood-root .flood-collection-toolbar[data-align="end"] .flood-collection-toolbar__search { flex-basis:100%; }
+}
+
 .flood-root .flood-collection-view-switcher { min-inline-size:0; }
 .flood-root .flood-collection-view-switcher__select { flex:0 1 13rem; min-inline-size:0; max-inline-size:100%; }
 .flood-root .flood-collection-view-switcher__actions { flex:1 1 16rem; min-inline-size:0; max-inline-size:36rem; }