@flood-md/react 0.2.11 → 0.2.13

package/dist/foundations.css

@@ -35,6 +35,7 @@
 .flood-root .flood-toolbar { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--flood-sys-space-1); box-sizing: border-box; inline-size: fit-content; max-inline-size: 100%; min-inline-size: 0; padding: var(--flood-sys-space-1); 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); }
 .flood-root .flood-toolbar[data-orientation="vertical"] { flex-direction: column; align-items: stretch; }
 .flood-root .flood-toolbar[data-shape="pill"] { border-radius: var(--flood-sys-radius-action); }
+.flood-root .flood-toolbar[data-shape="pill"][data-orientation="vertical"] { flex-wrap: nowrap; align-items: center; }
 .flood-root .flood-toolbar[data-variant="plain"] { padding:0; border:0; background:transparent; }
 .flood-root .flood-toolbar[data-shape="pill"][data-orientation="horizontal"] { flex-wrap: nowrap; overflow: auto; }
 .flood-root .flood-toolbar:focus-visible { outline: var(--flood-sys-focus-width) solid var(--flood-sys-color-focus-ring); outline-offset: calc(-1 * var(--flood-sys-focus-width)); }
@@ -81,24 +82,64 @@
 .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"] :is(th, td) { vertical-align: top; }
-.flood-root .flood-table[data-cell-vertical-align="middle"] :is(th, td) { vertical-align: middle; }
-.flood-root .flood-table[data-cell-vertical-align="bottom"] :is(th, td) { vertical-align: bottom; }
+.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; }
 .flood-root .flood-table th { font-weight: var(--flood-sys-type-label-weight); }
-.flood-root .flood-table thead th { color: var(--flood-sys-color-content-subtle); border-block-end: var(--flood-sys-stroke-width) solid var(--flood-sys-color-divider-decorative); }
-.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); }
-.flood-root .flood-table tfoot :is(th, td) { font-weight: var(--flood-sys-type-label-weight); }
-.flood-root .flood-table[data-striped="true"] tbody > tr:nth-child(even) { background: color-mix(in srgb, var(--flood-sys-color-content-default) 4%, transparent); }
+.flood-root .flood-table > thead > :where(tr) > th { color: var(--flood-sys-color-content-subtle); border-block-end: var(--flood-sys-stroke-width) solid var(--flood-sys-color-divider-decorative); }
+.flood-root .flood-table[data-sticky-header] > thead {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: 2;
+  background-color: var(--flood-sys-color-surface-canvas);
+  background-image: linear-gradient(var(--flood-sys-color-surface-current), var(--flood-sys-color-surface-current));
+}
+.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); }
+.flood-root .flood-table > tfoot > :where(tr) > :is(th, td) { font-weight: var(--flood-sys-type-label-weight); }
+.flood-root .flood-table[data-striped="true"] > tbody > :where(tr:nth-child(even of :not(.flood-data-table__expanded-row))) { background: color-mix(in srgb, var(--flood-sys-color-content-default) 4%, transparent); }
 .flood-root .flood-table [data-numeric] { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
 .flood-root .flood-table [data-align="center"] { text-align: center; }
 .flood-root .flood-table [data-align="end"] { text-align: end; }
 .flood-root .flood-table [data-align="start"] { text-align: start; }
 .flood-root :is(.flood-description-list, .flood-table-container, .flood-table)[hidden] { display: none; }
 @media (forced-colors: active) {
-  .flood-root .flood-table[data-striped="true"] tbody > tr:nth-child(even) { background: Canvas; }
+  .flood-root .flood-table[data-sticky-header] > thead { background: Canvas; }
+  .flood-root .flood-table[data-striped="true"] > tbody > :where(tr:nth-child(even of :not(.flood-data-table__expanded-row))) { background: Canvas; }
   .flood-root .flood-table tfoot { background: Canvas; }
   .flood-root .flood-table :is(th, td), .flood-root .flood-description-list[data-dividers="true"] > .flood-description-list__item { border-color: CanvasText; }
 }
@@ -122,6 +163,14 @@
 .flood-root .flood-alert[data-tone="success"] { --flood-alert-color: var(--flood-sys-color-feedback-success); }
 .flood-root .flood-alert[data-tone="warning"] { --flood-alert-color: var(--flood-sys-color-feedback-warning); }
 .flood-root .flood-alert[data-tone="error"] { --flood-alert-color: var(--flood-sys-color-feedback-error); }
+.flood-root .flood-alert:not([data-tone="neutral"]) {
+  --flood-sys-color-action-subtle-rest: color-mix(in srgb, var(--flood-sys-color-surface-current), var(--flood-alert-color) 8%);
+  --flood-sys-color-action-subtle-hover: color-mix(in srgb, var(--flood-sys-color-surface-current), var(--flood-alert-color) 14%);
+  --flood-sys-color-action-subtle-pressed: color-mix(in srgb, var(--flood-sys-color-surface-current), var(--flood-alert-color) 20%);
+  --flood-sys-color-action-ghost-hover: var(--flood-sys-color-action-subtle-hover);
+  --flood-sys-color-action-ghost-pressed: var(--flood-sys-color-action-subtle-pressed);
+}
+.flood-root .flood-alert:not(:has(> .flood-alert__content > .flood-alert__title)):has(> .flood-alert__content > .flood-alert__body > .flood-inline:only-child) { align-items: center; }
 .flood-root .flood-alert__icon { display: inline-flex; flex: none; inline-size: var(--flood-sys-control-md-icon-size); block-size: var(--flood-sys-control-md-icon-size); color: var(--flood-alert-color); }
 .flood-root .flood-alert__icon > svg { inline-size: 100%; block-size: 100%; }
 .flood-root .flood-alert__content { flex: 1 1 auto; min-inline-size: 0; overflow-wrap: break-word; font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); }
@@ -261,9 +310,21 @@
 .flood-root .flood-disclosure[data-open="true"] > .flood-disclosure__heading .flood-disclosure__indicator { transform: rotate(180deg); }
 .flood-root .flood-disclosure__panel { padding: 0 var(--flood-control-padding) var(--flood-control-padding); font-size: var(--flood-sys-type-compact-size); line-height: var(--flood-sys-type-compact-line-height); overflow-wrap: break-word; }
 .flood-root .flood-disclosure__panel[hidden] { display: none; }
+.flood-root .flood-disclosure:not(.flood-accordion > .flood-disclosure, .flood-navigation-group__disclosure) {
+  --flood-disclosure-header-inset: var(--flood-sys-space-1);
+  --flood-disclosure-content-inset: calc(var(--flood-control-padding) + var(--flood-disclosure-header-inset));
+}
+.flood-root .flood-disclosure:not(.flood-accordion > .flood-disclosure, .flood-navigation-group__disclosure) > .flood-disclosure__heading {
+  padding: var(--flood-disclosure-header-inset);
+}
+.flood-root .flood-disclosure:not(.flood-accordion > .flood-disclosure, .flood-navigation-group__disclosure) > .flood-disclosure__heading > .flood-disclosure__trigger {
+  border-radius: max(0px, calc(var(--flood-sys-radius-field) - var(--flood-sys-stroke-width) - var(--flood-disclosure-header-inset)));
+}
+.flood-root .flood-disclosure:not(.flood-accordion > .flood-disclosure, .flood-navigation-group__disclosure) > .flood-disclosure__panel {
+  padding: var(--flood-sys-space-2) var(--flood-disclosure-content-inset) var(--flood-disclosure-content-inset);
+}
 .flood-root .flood-accordion > .flood-disclosure { border: 0; border-radius: 0; background: transparent; }
 .flood-root .flood-accordion > .flood-disclosure + .flood-disclosure { border-block-start: var(--flood-sys-stroke-width) solid var(--flood-sys-color-divider-decorative); }
-.flood-root .flood-disclosure[data-open="true"] > .flood-disclosure__heading > .flood-disclosure__trigger { border-end-start-radius: 0; border-end-end-radius: 0; }
 .flood-root .flood-accordion > .flood-disclosure > .flood-disclosure__heading > .flood-disclosure__trigger { border-radius: 0; }
 .flood-root .flood-accordion > .flood-disclosure:first-child > .flood-disclosure__heading > .flood-disclosure__trigger { border-start-start-radius: calc(var(--flood-sys-radius-field) - var(--flood-sys-stroke-width)); border-start-end-radius: calc(var(--flood-sys-radius-field) - var(--flood-sys-stroke-width)); }
 .flood-root .flood-accordion > .flood-disclosure:last-child[data-open="false"] > .flood-disclosure__heading > .flood-disclosure__trigger { border-end-start-radius: calc(var(--flood-sys-radius-field) - var(--flood-sys-stroke-width)); border-end-end-radius: calc(var(--flood-sys-radius-field) - var(--flood-sys-stroke-width)); }
@@ -337,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);
@@ -345,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);
@@ -632,6 +709,12 @@
   --flood-type-tracking: var(--flood-sys-type-section-tracking);
   --flood-type-weight: var(--flood-sys-type-section-weight);
 }
+.flood-root .flood-type--group {
+  --flood-type-size: var(--flood-sys-type-group-title-size);
+  --flood-type-line: var(--flood-sys-type-group-title-line-height);
+  --flood-type-tracking: var(--flood-sys-type-group-title-tracking);
+  --flood-type-weight: var(--flood-sys-type-group-title-weight);
+}
 .flood-root .flood-type--body {
   --flood-type-size: var(--flood-sys-type-body-size);
   --flood-type-line: var(--flood-sys-type-body-line-height);
@@ -920,6 +1003,7 @@
 .flood-root .flood-file-input__file > .flood-icon-button { flex: none; }
 
 .flood-root .flood-alert-dialog { inline-size: min(26rem, calc(100% - var(--flood-sys-space-8))); }
+.flood-root .flood-alert-dialog > .flood-overlay-description { white-space: pre-line; }
 .flood-root .flood-alert-dialog__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--flood-sys-space-2); margin-block-start: var(--flood-sys-space-6); }
 .flood-root .flood-alert-dialog__actions > .flood-button { max-inline-size: 100%; overflow-wrap: break-word; }
 @media (max-width: 32rem) {
@@ -937,6 +1021,14 @@
 .flood-root .flood-drawer:is([data-side="top"], [data-side="bottom"]) { left: 0; right: auto; inline-size: 100vw; block-size: min(var(--flood-drawer-size), 100dvh); }
 .flood-root .flood-drawer[data-side="top"] { inset-block-start: 0; inset-block-end: auto; border-end-start-radius: var(--flood-sys-radius-block); border-end-end-radius: var(--flood-sys-radius-block); --flood-drawer-y: -100%; }
 .flood-root .flood-drawer[data-side="bottom"] { inset-block-start: auto; inset-block-end: 0; border-start-start-radius: var(--flood-sys-radius-block); border-start-end-radius: var(--flood-sys-radius-block); --flood-drawer-y: 100%; }
+.flood-root .flood-drawer.flood-sheet[data-side="bottom"] {
+  inset-inline: 0;
+  margin-inline: auto;
+  inline-size: min(100%, 36rem);
+  block-size: auto;
+  max-block-size: min(var(--flood-drawer-size), calc(100dvh - max(var(--flood-sys-space-4), env(safe-area-inset-top))));
+  grid-template-rows: auto auto minmax(0, 1fr) auto;
+}
 .flood-root .flood-drawer > .flood-overlay-header { grid-area: header; }
 .flood-root .flood-drawer > .flood-overlay-description { grid-area: description; }
 .flood-root .flood-drawer__body { grid-area: body; min-block-size: 0; min-inline-size: 0; margin-block-start: var(--flood-sys-space-4); }
@@ -949,6 +1041,13 @@
 .flood-root .flood-drawer > .flood-overlay-header { position: relative; padding-inline-end: calc(max(var(--flood-sys-control-sm-height), var(--flood-sys-size-touch)) + var(--flood-sys-space-2)); align-items: flex-start; }
 .flood-root .flood-drawer > .flood-overlay-header > .flood-overlay-close { position: absolute; inset-block-start: 0; inset-inline-end: 0; }
 .flood-root .flood-drawer > .flood-overlay-description { margin-block-start: var(--flood-sys-space-1); padding-inline-end: calc(max(var(--flood-sys-control-sm-height), var(--flood-sys-size-touch)) + var(--flood-sys-space-2)); }
+.flood-root .flood-sheet > .flood-overlay-header { align-items: center; padding-inline-end: 0; }
+.flood-root .flood-sheet > .flood-overlay-header > .flood-overlay-close { position: static; align-self: center; }
+.flood-root .flood-sheet > .flood-overlay-description { padding-inline-end: 0; }
+.flood-root .flood-sheet > .flood-drawer__body { margin-block-start: var(--flood-sys-space-2); }
+.flood-root .flood-sheet { --flood-sheet-scroll-offset: calc(var(--flood-sys-scrollbar-size) + var(--flood-sys-scrollbar-inset) + var(--flood-sys-stroke-width)); }
+.flood-root .flood-sheet:dir(rtl) { --flood-sheet-scroll-offset: calc(-1 * (var(--flood-sys-scrollbar-size) + var(--flood-sys-scrollbar-inset) + var(--flood-sys-stroke-width))); }
+.flood-root .flood-sheet > .flood-drawer__body > .flood-scroll-area > .flood-scroll-area__track--vertical { translate: var(--flood-sheet-scroll-offset); }
 @container flood-drawer (max-width:20rem) {
   .flood-root .flood-drawer > .flood-overlay-description { padding-inline-end: 0; }
 }
@@ -1095,6 +1194,9 @@
 .flood-root .flood-app-top-bar__end { margin-inline-start: auto; }
 .flood-root :is(.flood-app-shell, .flood-app-top-bar)[hidden] { display: none; }
 .flood-root .flood-section__body { margin-block-start: var(--flood-sys-space-4); min-inline-size: 0; }
+.flood-root .flood-section:has(> .flood-section__header .flood-type--group) > .flood-section__body {
+  margin-block-start: var(--flood-sys-space-3);
+}
 
 .flood-root .flood-split { container: flood-split / inline-size; min-inline-size: 0; inline-size: 100%; }
 .flood-root .flood-split__layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--flood-layout-gap); align-items: start; min-inline-size: 0; }
@@ -1207,8 +1309,35 @@
 .flood-root .flood-editable__preview { justify-content: space-between; min-inline-size: 0; inline-size: 100%; text-align: start; gap: var(--flood-sys-space-2); }
 .flood-root .flood-editable__value { flex: 1 1 0; min-inline-size: 0; overflow-wrap: break-word; }
 .flood-root .flood-editable__value[data-empty] { color: var(--flood-sys-color-content-subtle); }
+.flood-root .flood-editable__error { margin: 0; white-space: normal; overflow-wrap: break-word; }
+.flood-root .flood-editable__preview[aria-hidden="true"] { visibility: hidden; }
+.flood-root .flood-overlay-panel.flood-editable__overlay {
+  padding: 0;
+  border: 0;
+  background: var(--flood-sys-color-surface-floating);
+  backdrop-filter: none;
+}
+.flood-root .flood-editable__overlay > .flood-editable__error { padding: var(--flood-sys-space-2) var(--flood-sys-space-3); }
+.flood-root .flood-table td[data-numeric] .flood-editable :is(.flood-editable__preview, input) { text-align: end; }
 .flood-root .flood-editable__preview > .flood-icon { flex: none; color: var(--flood-sys-color-content-subtle); }
-.flood-root .flood-editable .flood-input-group:has(.flood-editable__actions) { padding-inline-end: calc(var(--flood-group-inset) - var(--flood-group-stroke)); }
+.flood-root .flood-editable .flood-input-group:has(.flood-editable__actions) {
+  flex-wrap: nowrap;
+  padding-inline-end: calc(var(--flood-group-inset) - var(--flood-group-stroke));
+}
+.flood-root .flood-editable .flood-input-group:has(.flood-editable__actions) > .flood-input {
+  flex: 1 1 0;
+  min-inline-size: 0;
+}
+.flood-root .flood-editable__overlay[data-fit-draft] .flood-input-group > .flood-input {
+  flex: 1 1 auto;
+  inline-size: auto;
+  min-inline-size: 4ch;
+  field-sizing: content;
+}
+.flood-root .flood-editable .flood-input-group__addon:has(> .flood-editable__actions) {
+  flex: none;
+  max-inline-size: none;
+}
 .flood-root .flood-editable__actions { display: inline-flex; align-items: center; gap: var(--flood-sys-space-1); flex: none; }
 .flood-root .flood-editable__actions > .flood-button { --flood-control-height: calc(var(--flood-group-height) - 2 * var(--flood-group-inset)); min-inline-size: var(--flood-control-height); flex: none; border-radius: max(0px, calc(var(--flood-sys-radius-field) - var(--flood-group-inset))); }
 @media (forced-colors: active) { .flood-root .flood-editable__value[data-empty] { color: CanvasText; } }
@@ -1603,10 +1732,16 @@
 .flood-root .flood-data-table__toolbar {
   padding:var(--flood-sys-space-4) var(--flood-data-table-edge,var(--flood-sys-space-3));
 }
-.flood-root .flood-data-table[data-inset="roomy"] tr > :first-child { padding-inline-start:var(--flood-data-table-edge); }
-.flood-root .flood-data-table[data-inset="roomy"] tr > :last-child { padding-inline-end:var(--flood-data-table-edge); }
-.flood-root .flood-data-table[data-inset="roomy"] th[data-sortable]:first-child { padding-inline-start:calc(var(--flood-data-table-edge) - var(--flood-sys-space-2)); }
-.flood-root .flood-data-table[data-inset="roomy"] th[data-sortable]:last-child { padding-inline-end:calc(var(--flood-data-table-edge) - var(--flood-sys-space-2)); }
+.flood-root .flood-data-table__toolbar-content { flex: 1 1 auto; min-inline-size: 0; }
+.flood-root .flood-data-table__columns { margin-inline-start: auto; max-inline-size: 100%; }
+.flood-root .flood-data-table__table { --flood-data-table-edge:var(--flood-sys-space-3); }
+.flood-root .flood-data-table__table[data-inset="roomy"] { --flood-data-table-edge:var(--flood-sys-space-6); }
+.flood-root .flood-data-table__table[data-inset="roomy"] > :is(thead,tbody) > tr > :first-child { padding-inline-start:var(--flood-data-table-edge); }
+.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;
@@ -1624,237 +1759,1852 @@
 .flood-root .flood-data-table .flood-data-table__primary-action:is(:hover,:active) { background:transparent; }
 .flood-root .flood-data-table .flood-data-table__primary-action:disabled,
 .flood-root .flood-data-table .flood-data-table__primary-action[aria-disabled="true"] { color:var(--flood-sys-color-field-disabled-content); }
-.flood-root .flood-data-table tr[data-primary-action] { cursor:pointer; }
-.flood-root .flood-data-table tr[data-primary-action]:not([data-selected]):focus-within { background:var(--flood-sys-color-action-on-surface-hover); }
+.flood-root .flood-data-table__table > tbody > tr[data-primary-action] { cursor:pointer; }
+.flood-root .flood-data-table__table > tbody > tr[data-primary-action]:not([data-selected]):focus-within { background:var(--flood-sys-color-action-on-surface-hover); }
 @media (hover:hover) {
-  .flood-root .flood-data-table tr[data-primary-action]:not([data-selected]):hover { background:var(--flood-sys-color-action-on-surface-hover); }
+  .flood-root .flood-data-table__table > tbody > tr[data-primary-action]:not([data-selected]):hover { background:var(--flood-sys-color-action-on-surface-hover); }
 }
 .flood-root .flood-data-table[hidden] { display:none; }
-.flood-root .flood-data-table thead th { vertical-align:middle; }
-.flood-root .flood-data-table thead th[data-sortable] { padding-inline:max(0px,calc(var(--flood-data-padding) - var(--flood-sys-space-2))); }
-.flood-root .flood-data-table__sort { gap:var(--flood-sys-space-2); min-block-size:var(--flood-sys-control-sm-height); padding-inline:calc(var(--flood-sys-space-2) - var(--flood-sys-stroke-width)); color:inherit; font:inherit; font-weight:500; }
+.flood-root .flood-data-table__table > thead > tr > th { vertical-align:middle; }
+.flood-root .flood-data-table__table > thead > tr > th[data-sortable] { padding-inline:max(0px,calc(var(--flood-data-padding) - var(--flood-sys-space-2))); }
+.flood-root .flood-data-table__sort { gap:var(--flood-sys-space-1); min-block-size:var(--flood-sys-control-sm-height); padding-inline:calc(var(--flood-sys-space-2) - var(--flood-sys-stroke-width)); color:inherit; font:inherit; font-weight:500; }
+.flood-root .flood-data-table__header-content { display:inline-flex; align-items:center; gap:var(--flood-sys-space-1); max-inline-size:100%; vertical-align:middle; }
+.flood-root .flood-data-table__header-content:focus-visible { outline:var(--flood-sys-focus-width) solid var(--flood-sys-color-focus-ring); border-radius:var(--flood-sys-radius-indicator); }
+.flood-root .flood-data-table__header-label { min-inline-size:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
+.flood-root .flood-data-table__table:not([data-fixed-columns]) .flood-data-table__header-label { min-inline-size:max-content; }
+.flood-root .flood-data-table__header-unit { flex:none; color:var(--flood-sys-color-content-subtle); }
 .flood-root .flood-data-table__choice { inline-size:1%; white-space:nowrap; }
 .flood-root .flood-data-table__choice .flood-choice { min-block-size:var(--flood-sys-control-sm-height); }
-.flood-root .flood-data-table tr[data-selected] { background:var(--flood-sys-color-selection-background); }
+.flood-root .flood-data-table__table > tbody > tr[data-selected] { background:var(--flood-sys-color-selection-background); }
 .flood-root .flood-data-table th[aria-sort="descending"] .flood-data-table__sort svg { rotate:180deg; }
 .flood-root .flood-data-table .flood-data-table__state { padding-block:var(--flood-sys-space-8); text-align:center; }
 .flood-root .flood-data-table__state>.flood-stack { align-items:center; }
 .flood-root .flood-data-table__footer { display:flex; align-items:center; flex-wrap:wrap; gap:var(--flood-sys-space-3); padding:var(--flood-sys-space-3) var(--flood-sys-space-4); border-block-start:var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative); background:var(--flood-sys-color-surface-default); border-end-start-radius:var(--flood-sys-radius-field); border-end-end-radius:var(--flood-sys-radius-field); }
 .flood-root .flood-data-table__footer p { margin:0; }
 .flood-root .flood-data-table__footer nav { margin-inline-start:auto; max-inline-size:100%; }
-@media(forced-colors:active) { .flood-root .flood-data-table tr[data-selected] { outline:1px solid Highlight; } }
+@media(forced-colors:active) { .flood-root .flood-data-table__table > tbody > tr[data-selected] { outline:1px solid Highlight; } }
 
-.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-data-table__table[data-fixed-columns] > thead > tr > th { box-sizing:border-box; }
+.flood-root .flood-data-table__table[data-fixed-columns] > :is(thead,tbody) > tr > [data-data-table-column] {
+  overflow:hidden;
+  overflow-wrap:anywhere;
 }
-
-.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-data-table__table[data-fixed-columns] > thead > tr > th > .flood-data-table__sort {
+  max-inline-size:100%;
+  text-align:inherit;
 }
-
-/* 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-data-table__table > thead > tr > th[data-resize-edge] {
+  --flood-data-table-resize-hit:var(--flood-sys-space-6);
+  --flood-data-table-resize-inset:var(--flood-sys-space-1);
+  position:relative;
 }
-
-.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 .flood-data-table__table > thead > tr > th[data-resize-edge="end"] {
+  padding-inline-end:max(calc(var(--flood-data-table-resize-hit) + 2 * var(--flood-data-table-resize-inset)),var(--flood-data-table-edge));
 }
-.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-data-table__table > thead > tr > th[data-resize-edge="start"] {
+  padding-inline-start:max(calc(var(--flood-data-table-resize-hit) + 2 * var(--flood-data-table-resize-inset)),var(--flood-data-table-edge));
 }
-.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-data-table__resize {
+  position:absolute;
+  inset-block:0;
+  inset-inline-end:0;
+  inline-size:calc(var(--flood-data-table-resize-hit) + var(--flood-data-table-resize-inset));
+  padding-inline-end:var(--flood-data-table-resize-inset);
+  box-sizing:border-box;
+  display:grid;
+  place-items:center;
+  cursor:col-resize;
+  touch-action:none;
+  user-select:none;
+}
+.flood-root .flood-data-table__resize-icon {
+  box-sizing:border-box;
+  inline-size:var(--flood-data-table-resize-hit);
+  block-size:var(--flood-data-table-resize-hit);
+  display:grid;
+  place-items:center;
+  color:var(--flood-sys-color-content-default);
+  background:var(--flood-sys-color-action-on-surface-hover);
+  border:var(--flood-sys-stroke-width) solid var(--flood-sys-color-border-decorative);
+  border-radius:var(--flood-sys-radius-action);
 }
-.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 th[data-resize-edge="start"] > .flood-data-table__resize {
+  inset-inline:0 auto;
+  padding-inline:var(--flood-data-table-resize-inset) 0;
 }
-/* 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-data-table__resize:is(:hover,:focus-visible,[data-dragging]) > .flood-data-table__resize-icon {
+  background:var(--flood-sys-color-surface-supporting);
+  border-color:var(--flood-sys-color-content-subtle);
 }
-
-/* 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-data-table__resize:focus-visible { outline:none; }
+.flood-root .flood-data-table__resize:focus-visible > .flood-data-table__resize-icon {
+  outline:var(--flood-sys-focus-width) solid var(--flood-sys-color-focus-ring);
+  outline-offset:calc(-1 * var(--flood-sys-focus-width));
 }
-
-/* 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 (hover:hover) and (pointer:fine) {
+  .flood-root .flood-data-table__resize:not(:hover,:focus-visible,[data-dragging]) > .flood-data-table__resize-icon { opacity:0; }
 }
-
-@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-data-table__resize[aria-disabled="true"] { visibility:hidden; }
+@media (pointer:coarse) {
+  .flood-root .flood-data-table__table > thead > tr > th[data-resize-edge] {
+    --flood-data-table-resize-hit:var(--flood-sys-space-8);
   }
-  .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-data-table__table > :is(thead,tbody) > tr > :is(th,td)[data-pin-edge] {
+  --flood-data-table-pin-state:transparent;
+  position:sticky;
+  z-index:1;
+  background-color:var(--flood-sys-color-surface-canvas);
+  background-image:
+    linear-gradient(var(--flood-data-table-pin-state),var(--flood-data-table-pin-state)),
+    linear-gradient(var(--flood-sys-color-surface-current),var(--flood-sys-color-surface-current));
+}
+.flood-root .flood-data-table__table > :is(thead,tbody) > tr > [data-pin-edge="start"] {
+  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: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:"";
+  position:absolute;
+  inset-block:0;
+  inset-inline-end:0;
+  inline-size:var(--flood-sys-stroke-width);
+  background:var(--flood-sys-color-divider-decorative);
+  pointer-events:none;
+}
+.flood-root .flood-data-table__table > :is(thead,tbody) > tr > [data-pin-edge="end"][data-pin-boundary="true"]::before {
+  inset-inline:0 auto;
+}
+.flood-root .flood-data-table__table[data-striped="true"] > tbody > :where(tr:nth-child(even of :not(.flood-data-table__expanded-row))) > [data-pin-edge] {
+  --flood-data-table-pin-state:color-mix(in srgb,var(--flood-sys-color-content-default) 4%,transparent);
+}
+.flood-root .flood-data-table__table > tbody > tr[data-primary-action]:not([data-selected]):focus-within > [data-pin-edge] {
+  --flood-data-table-pin-state:var(--flood-sys-color-action-on-surface-hover);
+}
+@media (hover:hover) {
+  .flood-root .flood-data-table__table > tbody > tr[data-primary-action]:not([data-selected]):hover > [data-pin-edge] {
+    --flood-data-table-pin-state:var(--flood-sys-color-action-on-surface-hover);
   }
 }
-
-.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-data-table__table > tbody > tr[data-selected] > [data-pin-edge] {
+  --flood-data-table-pin-state:var(--flood-sys-color-selection-background);
 }
-@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; }
+@media (forced-colors:active) {
+  .flood-root .flood-data-table__resize-icon { color:CanvasText; }
+  .flood-root .flood-data-table__resize:focus-visible > .flood-data-table__resize-icon { outline-color:Highlight; }
+  .flood-root .flood-data-table__table > :is(thead,tbody) > tr > [data-pin-edge] { background:Canvas; }
 }
-.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 .flood-table :is(th, td).flood-data-table__expand {
+  inline-size: 1%;
+  padding-block: 0;
+  padding-inline: var(--flood-data-table-edge);
+  text-align: center;
+  white-space: nowrap;
 }
-@container (max-width:28rem) {
-  .flood-root .flood-collection-toolbar__row { grid-template-columns:minmax(0,1fr); }
-  .flood-root .flood-collection-toolbar__commands { grid-column:1; grid-row:2; }
-  .flood-root .flood-collection-toolbar__summaries { grid-row:3; }
+.flood-root .flood-data-table__expand:not([data-pin-edge]) { position: relative; }
+.flood-root .flood-data-table__expand[data-detail-visible]::after {
+  content: "";
+  position: absolute;
+  inset-block: calc(50% + var(--flood-sys-space-2)) 0;
+  inset-inline-start: calc(50% - var(--flood-sys-stroke-width) / 2);
+  border-inline-start: var(--flood-sys-stroke-width) solid var(--flood-sys-color-divider-decorative);
+  pointer-events: none;
+}
+.flood-root .flood-data-table__disclosure[aria-expanded="true"] svg { rotate: 180deg; }
+.flood-root .flood-data-table__expanded-row > td {
+  padding-block: 0;
+  background: color-mix(in srgb, var(--flood-sys-color-content-default) 3%, transparent);
+}
+.flood-root .flood-data-table__detail-reveal {
+  display: grid;
+  grid-template-rows: 0fr;
+}
+.flood-root .flood-data-table__detail-reveal[data-open] { grid-template-rows: 1fr; }
+.flood-root .flood-data-table__detail-clip { min-block-size: 0; overflow: clip; }
+.flood-root .flood-data-table__expanded-content {
+  --flood-data-table-branch-start: max(0px, calc(var(--flood-data-table-disclosure-center, var(--flood-data-table-edge)) - var(--flood-data-table-edge)));
+  --flood-data-table-branch-arm: var(--flood-sys-space-3);
+  contain: inline-size;
+  position: sticky;
+  inset-inline-start: var(--flood-data-table-edge);
+  box-sizing: border-box;
+  padding-block: var(--flood-sys-space-3) var(--flood-sys-space-4);
+  padding-inline: calc(var(--flood-data-table-branch-start) + var(--flood-data-table-branch-arm) + var(--flood-sys-space-2)) var(--flood-sys-space-2);
+}
+.flood-root .flood-data-table__expanded-content::before {
+  content: "";
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: calc(var(--flood-data-table-branch-start) - var(--flood-sys-stroke-width) / 2);
+  inline-size: var(--flood-data-table-branch-arm);
+  box-sizing: border-box;
+  block-size: calc(var(--flood-data-table-branch-target, var(--flood-sys-space-6)) + var(--flood-sys-stroke-width) / 2);
+  border-inline-start: var(--flood-sys-stroke-width) solid var(--flood-sys-color-divider-decorative);
+  border-block-end: var(--flood-sys-stroke-width) solid var(--flood-sys-color-divider-decorative);
+  border-end-start-radius: var(--flood-sys-radius-indicator);
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .flood-root .flood-data-table__detail-reveal:not([data-flood-motion="reduce"] *) {
+    transition: grid-template-rows var(--flood-sys-motion-duration-exit) var(--flood-sys-motion-easing);
+  }
+  .flood-root .flood-data-table__detail-reveal[data-open]:not([data-flood-motion="reduce"] *) {
+    transition-duration: var(--flood-sys-motion-duration-enter);
+  }
+  @starting-style {
+    .flood-root .flood-data-table__detail-reveal[data-open]:not([data-flood-motion="reduce"] *) {
+      grid-template-rows: 0fr;
+    }
+  }
+  .flood-root:not([data-flood-motion="reduce"]) .flood-data-table__disclosure:not(:where([data-flood-motion="reduce"] *)) svg {
+    transition: rotate var(--flood-sys-motion-duration-normal) var(--flood-sys-motion-easing);
+  }
+}
+
+.flood-root .flood-sparkline {
+  --flood-sparkline-color: var(--flood-sys-color-content-subtle);
+  --flood-sparkline-height: var(--flood-sys-space-8);
+  display: inline-grid;
+  gap: var(--flood-sys-space-1);
+  inline-size: 6rem;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  vertical-align: middle;
+}
+
+.flood-root .flood-sparkline[data-size="sm"] {
+  --flood-sparkline-height: var(--flood-sys-space-6);
+  inline-size: 5rem;
+}
+
+.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-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); }
+
+.flood-root .flood-sparkline__plot {
+  display: block;
+  inline-size: 100%;
+  block-size: var(--flood-sparkline-height);
+  color: var(--flood-sparkline-color);
+  overflow: visible;
+}
+
+.flood-root :is(.flood-sparkline__line, .flood-sparkline__point, .flood-sparkline__halo) {
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  vector-effect: non-scaling-stroke;
+}
+
+.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; }
+.flood-root .flood-sparkline__area { opacity: .88; }
+.flood-root .flood-sparkline__label { overflow-wrap: anywhere; }
+
+@media (hover: hover) {
+  .flood-root .flood-sparkline:hover .flood-sparkline__halo { opacity: .34; }
+  .flood-root .flood-sparkline:hover .flood-sparkline__area { opacity: 1; }
+}
+@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-chart-motion);
+  }
+}
+.flood-root .flood-sparkline__empty { display: grid; place-items: center; min-block-size: var(--flood-sparkline-height); }
+
+@media (forced-colors: active) {
+  .flood-root .flood-sparkline__plot { color: CanvasText; }
+  .flood-root :is(.flood-sparkline__area, .flood-sparkline__halo) { display: none; }
+}
+
+.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-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;
+}
+.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 :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 .flood-line-chart__plot > svg {
+  position: relative;
+  display: block;
+  inline-size: 100%;
+  overflow: visible;
+}
+.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 .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;
+}
+.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;
+}
+.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);
+}
+.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);
+}
+.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-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;
+}
+.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 :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); }
+  .flood-root .flood-collection-toolbar__commands { grid-column:1; grid-row:2; }
+  .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; }
@@ -1882,6 +3632,13 @@
   justify-self:start;
   margin-inline-start:calc((var(--flood-sidebar-rail-width) - var(--flood-sys-stroke-width) - var(--flood-sidebar-row)) / 2 - var(--flood-sidebar-edge) - var(--flood-sys-space-3));
 }
+@media (forced-colors: none) {
+  .flood-root .flood-sidebar__toggle.flood-icon-button:focus-visible {
+    outline:none;
+    background:var(--flood-sys-color-selection-background);
+    color:var(--flood-sys-color-selection-content);
+  }
+}
 @media(pointer:coarse) {
   .flood-root .flood-sidebar { --flood-sidebar-rail-width:5rem; }
   .flood-root .flood-sidebar:not([data-collapsed="true"]) .flood-sidebar__toggle {
@@ -1891,6 +3648,12 @@
 .flood-root .flood-sidebar > .flood-scroll-area { flex:1; min-block-size:0; min-inline-size:0; }
 .flood-root .flood-sidebar__body { block-size:100%; min-block-size:0; min-inline-size:0; }
 .flood-root .flood-sidebar__navigation { padding-inline:var(--flood-sidebar-edge); }
+.flood-root .flood-sidebar__navigation :is(.flood-navigation-group__label,.flood-navigation-item__label,.flood-navigation-item__description) {
+  min-inline-size:0;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
 .flood-root .flood-sidebar__group-label { padding-inline:var(--flood-sys-space-3); }
 .flood-root .flood-sidebar__group[data-icon-column] .flood-navigation-group__label { padding-inline-start:calc(var(--flood-sys-space-3) + var(--flood-sidebar-icon) + var(--flood-sys-space-2)); }
 .flood-root .flood-sidebar__footer { display:flex; flex-direction:column; align-items:stretch; gap:var(--flood-sys-space-1); flex:none; min-inline-size:0; padding-block-start:var(--flood-sys-space-3); padding-inline:var(--flood-sidebar-edge); }
@@ -2111,9 +3874,13 @@
   from { translate: var(--flood-motion-layer-x, 0) var(--flood-motion-layer-y, 0); }
 }
 
+@keyframes flood-toast-enter {
+  from { opacity: .35; translate: 0 var(--flood-toast-entry-offset, 0px); }
+}
+
 @media (prefers-reduced-motion: no-preference) {
   /* The native layer owns open state and positioning. Its measured box stays still. */
-  .flood-root :where(.flood-overlay-panel, .flood-select__menu, .flood-dialog, .flood-toast__message) {
+  .flood-root :where(.flood-overlay-panel, .flood-select__menu, .flood-dialog) {
     --flood-motion-layer-x: 0;
     --flood-motion-layer-y: 0;
   }
@@ -2155,14 +3922,26 @@
     animation: flood-motion-hint-in var(--flood-sys-motion-duration-enter) var(--flood-sys-motion-easing-enter);
   }
 
-  .flood-root .flood-toast-region:not([data-inline]) .flood-toast__message:not([data-flood-motion="reduce"] *) {
-    --flood-motion-layer-y: var(--flood-sys-motion-distance-small);
-    animation: flood-motion-hint-in var(--flood-sys-motion-duration-enter) var(--flood-sys-motion-easing-enter),
-      flood-motion-layer-content-in var(--flood-sys-motion-duration-enter) var(--flood-sys-motion-easing-enter);
+  .flood-root .flood-toast-region:not([data-inline]):not([data-flood-motion="reduce"] *) {
+    --flood-toast-travel: calc(2 * var(--flood-sys-motion-distance-small));
+    box-sizing: border-box;
+  }
+
+  /* Reserve room within the scrolling region for the card's entry. */
+  .flood-root .flood-toast-region[data-placement^="bottom"]:has(.flood-toast):not([data-inline]):not([data-flood-motion="reduce"] *) {
+    --flood-toast-entry-offset: var(--flood-toast-travel);
+    padding-block-end: var(--flood-toast-travel);
+    margin-block-end: calc(-1 * var(--flood-toast-travel));
+  }
+
+  .flood-root .flood-toast-region[data-placement^="top"]:has(.flood-toast):not([data-inline]):not([data-flood-motion="reduce"] *) {
+    --flood-toast-entry-offset: calc(-1 * var(--flood-toast-travel));
+    padding-block-start: var(--flood-toast-travel);
+    margin-block-start: calc(-1 * var(--flood-toast-travel));
   }
 
-  .flood-root .flood-toast-region[data-placement^="top"] .flood-toast__message {
-    --flood-motion-layer-y: calc(-1 * var(--flood-sys-motion-distance-small));
+  .flood-root .flood-toast:not([data-flood-motion="reduce"] *) {
+    animation: flood-toast-enter var(--flood-sys-motion-duration-enter) var(--flood-sys-motion-easing-enter);
   }
 }