@layer styles {
  /* Semantic inventory table plus the labeled record used at narrow widths.
     Both presentations are fed by the same caller data; CSS only hides one. */
  .ui-floral-dataset { min-width: 0; }

  .ui-floral-dataset__table {
    min-width: 0;
    overflow-x: auto;
    border: 1px solid var(--floral-line);
    border-radius: var(--floral-control-radius);
  }

  .ui-floral-dataset .ui-floral-dataset__table {
    border: 1px solid var(--floral-line);
    border-radius: var(--floral-control-radius);
  }

  .ui-floral-table {
    width: 100%;
    min-width: 36rem;
    border-collapse: collapse;
    background: var(--floral-paper);
    color: var(--floral-ink);
    font-family: var(--floral-sans);
    font-size: var(--floral-control-text);
    line-height: 1.45;
    white-space: normal;
    text-align: left;
  }

  .ui-floral-table caption {
    padding: var(--space-sm);
    color: var(--floral-muted);
    font-size: var(--floral-control-text);
    line-height: 1.4;
    text-align: left;
  }

  .ui-floral-table th,
  .ui-floral-table td {
    padding: var(--space-xs) var(--space-sm);
    border-bottom: 1px solid var(--floral-line);
    overflow-wrap: anywhere;
    white-space: normal;
    vertical-align: top;
  }

  .ui-floral-table thead th {
    background: var(--floral-blush);
    color: var(--floral-ink);
    font-weight: 600;
  }

  .ui-floral-table tbody tr:last-child th,
  .ui-floral-table tbody tr:last-child td { border-bottom: 0; }

  .ui-floral-table tbody th {
    font-weight: 600;
    text-align: left;
  }

  .ui-floral-table__number {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
  }

  .ui-floral-table__reference {
    display: block;
    margin-top: var(--space-3xs);
    color: var(--floral-muted);
    font-size: var(--floral-control-text);
    font-weight: 400;
    line-height: 1.4;
  }

  .ui-floral-dataset__records { display: none; }

  .ui-floral-record {
    min-width: 0;
    padding: var(--space-sm);
    border: 1px solid var(--floral-line);
    border-radius: var(--floral-control-radius);
    background: var(--floral-paper);
    color: var(--floral-ink);
    font-family: var(--floral-sans);
    font-size: var(--floral-control-text);
    line-height: 1.45;
  }

  .ui-floral-record__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3xs) var(--space-sm);
    padding-bottom: var(--space-2xs);
    border-bottom: 1px solid var(--floral-line);
  }

  .ui-floral-record__title {
    margin: 0;
    font-size: var(--floral-control-text);
    font-weight: 600;
    overflow-wrap: anywhere;
  }

  .ui-floral-record__reference {
    margin: 0;
    color: var(--floral-muted);
    font-size: var(--floral-control-text);
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  .ui-floral-record__fields {
    display: grid;
    gap: var(--space-3xs);
    margin: var(--space-2xs) 0 0;
  }

  .ui-floral-record__field {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2xs) var(--space-sm);
    min-width: 0;
  }

  .ui-floral-record__field dt { color: var(--floral-muted); }
  .ui-floral-record__field dd { margin: 0; overflow-wrap: anywhere; }

  .ui-floral-record__field--number dd {
    font-variant-numeric: tabular-nums;
    text-align: right;
  }

  .ui-floral-record__unit { color: var(--floral-muted); }

  @media (max-width: 56.25rem) {
    .ui-floral-dataset__table { display: none; }

    .ui-floral-dataset__records {
      display: grid;
      gap: var(--space-sm);
    }
  }
}