/* ===================================================================
   WCI: Output pane contents (INTEL-400) and Inline table (INTEL-374)
   -------------------------------------------------------------------
   PORTED from the ip-b2b design repo, the revision the prototype host
   serves (fetched 2026-09-28, http://3.17.180.155:4144):
     pages/wise.css
       lines 18434-18466   the "Responsive data tables" contract (rtbl)
       lines 18467-18489   releasing the width floor in card mode
       lines 18490-18503   real <table> -> stacked cards
       lines 18534-18581   the shared field layout inside a card
                           (label left, value right, divider above)
       lines 22026-22037   .dsc-out-ledger (the Output ledger's look)
       lines 22075-22080   .dsc-out-scroll / .dsc-out-matrix floor (heat matrix)
     js/wiseai-chat.js
       lines 2037-2069     .sc-inline-h, .sc-inline-tbl, -row, -food, -cell,
                           -lab and the @container (max-width: 520px) stack
                           (the #wiseai-chat-extras sheet it injects; wise.css
                           in this revision still carries an older <table>
                           form of the inline table, 8552-8585, which the
                           catalog no longer draws)

   WHY THIS SHEET IS GLOBAL, NOT A .razor.css: the same markup is drawn by
   two hosts. WciOutputTable renders it as a component, and the answer
   markdown (WiseAiMarkdown's table renderer) writes it into a MarkupString,
   which Blazor cannot scope. One global copy keeps both identical.

   HOW THE COLLAPSE IS DRIVEN (the one deliberate departure):
   The design measures each table with a ResizeObserver in
   js/responsive-tables.js and toggles .rtbl-cards, then tags each cell
   .rtbl-fld with a data-rlabel read from its header. That script rewrites
   classes on the DOM, and Blazor owns the class attribute of every element
   it renders: the next render would silently undo it. Here the server
   renders .rtbl-fld and data-rlabel itself, and the collapse is a
   container query on the table's own wrapper (.wci-output-table, container
   `rtbl`). The design avoided container-type only because its script ran
   over every table on a page; a wrapper this sheet owns cannot hijack a
   page's own queries. So "table.rtbl.rtbl-cards X" below reads
   "@container rtbl (max-width: 560px) { .wci-output-table table.rtbl X }".

   Not ported (no host in the app yet):
     .rtbl-grid / .rtbl-grow  the CSS-grid faux-table half ("Ingredient
                              query"); no chat card draws a grid table.
     .rtbl-lead / -ctl / -act the placement of unlabelled control cells;
                              no output table carries row controls.
     .dsc-out-def             the definition list; no chat output has one.
     .sc-surface-rail cards   the in-chat product carousel (data-force-cards).
     .dsc-out-kpis            is a rule, not a tile: WciStatTileGroup
                              MinTileWidth carries it.
   Class names are kept IDENTICAL to the design. Consumes tokens from
   wci-tokens.css (body.wci).
   =================================================================== */


/* ============================ OUTPUT TABLE ============================ */

/* APP-OWNED: the container the collapse measures (the design's
   ResizeObserver target was the table's parent). */
.wci-output-table { container: rtbl / inline-size; position: relative; width: 100%; min-width: 0; }
.wci-output-table-body { min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.wci-output-table-body--capped { overflow-y: auto; }

/* ---- The ledger's look, wise.css 22026-22037 ---- */
.dsc-out-ledger { width: 100%; border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.dsc-out-ledger th {
  text-align: right; padding: 10px 8px 8px; font-size: 9.5px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: var(--text-subtle); white-space: nowrap;
}
.dsc-out-ledger th:first-child, .dsc-out-ledger td:first-child { text-align: left; padding-left: 12px; }
.dsc-out-ledger td { padding: 9px 8px; text-align: right; color: var(--text); border-top: 1px solid var(--border); }
.dsc-out-ledger td:first-child { font-weight: 600; white-space: nowrap; }
.dsc-out-ledger tbody tr:hover td { background: var(--surface-2); }
html.dark .dsc-out-ledger tbody tr:hover td { background: rgba(255,255,255,0.035); }

/* ---- APP-OWNED ADDITIONS to the ledger ----
   The design's ledger is all numbers after its first column; a card's
   ledger also carries text columns (a category, a firm), which read left. */
.dsc-out-ledger th.is-text, .dsc-out-ledger td.is-text { text-align: left; }
.dsc-out-ledger th:last-child, .dsc-out-ledger td:last-child { padding-right: 12px; }
/* A long first column (a product name) may wrap; the design's nowrap is for
   a short intervention name. */
.dsc-out-ledger td:first-child.is-wrap { white-space: normal; }
/* The header stays on screen while a capped body scrolls. */
.wci-output-table-body--capped .dsc-out-ledger thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); }
/* Sortable header: a real button, the caret of js/sort-arrow.js. */
.dsc-out-ledger .wci-th-sort {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
.dsc-out-ledger .wci-th-sort:hover { color: var(--text-muted); }
.dsc-out-ledger .wci-th-sort:focus-visible { outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: 2px; border-radius: 4px; }
.dsc-out-ledger .rtbl-sort-arrow { display: inline-flex; width: 10px; height: 10px; opacity: 0; transition: transform .15s ease, opacity .15s ease; }
.dsc-out-ledger .rtbl-sort-arrow svg { width: 10px; height: 10px; }
.dsc-out-ledger th[aria-sort="ascending"] .rtbl-sort-arrow { opacity: 1; transform: rotate(180deg); }
.dsc-out-ledger th[aria-sort="descending"] .rtbl-sort-arrow { opacity: 1; }
.dsc-out-ledger th[aria-sort] { color: var(--text-muted); }
/* A group row (a parent of the indented rows under it) and its children. */
.dsc-out-ledger tr.is-group td { background: var(--surface-2); font-weight: 700; }
.dsc-out-ledger tr.is-child td:first-child { padding-left: 28px; font-weight: 500; }
/* A muted remainder row ("Other"). */
.dsc-out-ledger tr.is-muted td { color: var(--text-muted); font-style: italic; }
.dsc-out-ledger td.is-sub { color: var(--text-muted); }
.dsc-out-ledger td.is-strong { font-weight: 700; }
.dsc-out-ledger th.is-rule, .dsc-out-ledger td.is-rule { border-left: 1px solid var(--border); }
.dsc-out-ledger td.wci-output-table-empty { text-align: left; padding: 0; }
.dsc-out-ledger .wci-td-none { color: var(--text-subtle); }
/* A cell's value is one element (.rtbl-val), so a card's flex line separates only the label from the
   whole value; a markdown cell's paragraphs keep a small gap between them. */
.dsc-out-ledger .rtbl-val > p { margin: 0; }
.dsc-out-ledger .rtbl-val > p + p { margin-top: 0.45em; }

/* The sort strip a card still needs once its header row is gone (card mode only). */
.wci-output-table-sortbar { display: none; }
.wci-output-table-sortbar-label { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }
.wci-output-table-sort {
  all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; color: var(--text-muted); background: var(--surface);
}
.wci-output-table-sort:hover { color: var(--text); }
.wci-output-table-sort:focus-visible { outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: 2px; }
.wci-output-table-sort[aria-pressed="true"] { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.wci-output-table-sort .rtbl-sort-arrow { display: inline-flex; width: 10px; height: 10px; opacity: 0; transition: transform .15s ease, opacity .15s ease; }
.wci-output-table-sort .rtbl-sort-arrow svg { width: 10px; height: 10px; }
.wci-output-table-sort[data-dir="asc"] .rtbl-sort-arrow { opacity: 1; transform: rotate(180deg); }
.wci-output-table-sort[data-dir="desc"] .rtbl-sort-arrow { opacity: 1; }

/* ---- Heat matrix: the floor stays and the card scrolls, wise.css 22075-22076 ----
   The design's matrix is a grid; the app's crosstab is a real table, so the
   floor is the table's min-width and --scroll exempts it from card mode. */
.wci-output-table--scroll .wci-output-table-body { overflow-x: auto; scrollbar-width: thin; }

/* ---- Releasing the width floor, wise.css 18467-18489 ----
   !important because the floor is inline (style="min-width: 700px"). Scoped
   to card mode only: outside it every floor still holds. */
@container rtbl (max-width: 560px) {
  .wci-output-table:not(.wci-output-table--scroll) table.rtbl { min-width: 0 !important; }
  .wci-output-table:not(.wci-output-table--scroll) table.rtbl tbody > tr > td.rtbl-fld { min-width: 0 !important; }

  /* ---- Real <table> -> stacked cards, wise.css 18490-18503 ---- */
  .wci-output-table:not(.wci-output-table--scroll) table.rtbl { display: block; width: 100%; border-collapse: collapse; }
  .wci-output-table:not(.wci-output-table--scroll) table.rtbl > thead,
  .wci-output-table:not(.wci-output-table--scroll) table.rtbl > tbody,
  .wci-output-table:not(.wci-output-table--scroll) table.rtbl > tfoot { display: block; width: 100%; }
  .wci-output-table:not(.wci-output-table--scroll) table.rtbl thead { display: none; }
  .wci-output-table:not(.wci-output-table--scroll) table.rtbl tbody > tr {
    margin: 0 0 10px;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-1);
  }
  .wci-output-table:not(.wci-output-table--scroll) table.rtbl tbody > tr:last-child { margin-bottom: 0; }

  /* One wrapping flex line per field, top-aligned (wise.css 18521-18532). */
  .wci-output-table:not(.wci-output-table--scroll) table.rtbl tbody > tr {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 0;
  }

  /* ---- Shared field layout inside a card, wise.css 18534-18581 ---- */
  .wci-output-table:not(.wci-output-table--scroll) table.rtbl tbody > tr > td.rtbl-fld {
    flex: 1 1 100%;
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0;
    border: 0;
    order: 4;
    padding: 5px 0;
    text-align: left;
    white-space: normal;
    border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  }
  .wci-output-table:not(.wci-output-table--scroll) table.rtbl tbody > tr > td.rtbl-fld[data-rlabel] {
    display: flex;
    align-items: baseline;
    gap: 10px 16px;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .wci-output-table:not(.wci-output-table--scroll) table.rtbl tbody > tr > td.rtbl-fld[data-rlabel]::before {
    content: attr(data-rlabel);
    flex: 0 0 auto;
    margin-right: auto;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-subtle);
    white-space: nowrap;
  }
  .wci-output-table:not(.wci-output-table--scroll) table.rtbl tbody > tr > td.rtbl-fld:not([data-rlabel]) { display: block; }
  /* APP-OWNED: the value beside its label. The design's script left values loose in the cell; with one
     wrapper the value shrinks and wraps as a unit, never splitting its own words apart. */
  .wci-output-table:not(.wci-output-table--scroll) table.rtbl tbody > tr > td.rtbl-fld > .rtbl-val { min-width: 0; }

  /* A card that opens straight onto a labelled field loses its first
     divider (wise.css 18641-18645). */
  .wci-output-table:not(.wci-output-table--scroll) table.rtbl tbody > tr > td.rtbl-fld:not(.rtbl-fld ~ .rtbl-fld) { border-top: 0; }

  /* APP-OWNED: the ledger's own paint gives way to the card's. */
  .wci-output-table:not(.wci-output-table--scroll) table.rtbl tbody > tr:hover td,
  .wci-output-table:not(.wci-output-table--scroll) table.rtbl tr.is-group td { background: none; }
  .wci-output-table:not(.wci-output-table--scroll) table.rtbl tr.is-group { background: var(--surface-2); }
  .wci-output-table:not(.wci-output-table--scroll) table.rtbl tr.is-child { margin-left: 14px; }
  .wci-output-table:not(.wci-output-table--scroll) table.rtbl tr.is-child td:first-child { padding-left: 0; }
  .wci-output-table:not(.wci-output-table--scroll) table.rtbl td.wci-output-table-empty { padding: 0; }
  .wci-output-table:not(.wci-output-table--scroll) > .wci-output-table-sortbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 0 0 10px;
  }
  /* The sticky header is gone; so is the reason to cap the height. */
  .wci-output-table:not(.wci-output-table--scroll) .wci-output-table-body { overflow: visible; max-height: none !important; }
  .wci-output-table:not(.wci-output-table--scroll) table.rtbl tbody > tr > td.rtbl-fld[data-rlabel]::before { font-style: normal; }
}


/* ============================ INLINE TABLE ============================ */

/* ---- js/wiseai-chat.js 2037-2069 ---- */
.sc-inline-h {
  font-family: inherit; font-size: 1.05em; font-weight: 700; line-height: 1.35;
  margin: 0.9em 0 0.35em; color: inherit;
}
.sc-inline-tbl {
  display: flex; flex-direction: column; width: 100%;
  margin: 0.55em 0 0.15em; padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; font-size: 0.94em; line-height: 1.5;
  container-type: inline-size;
}
.sc-inline-tbl-row {
  display: grid; grid-template-columns: var(--sc-inline-cols, minmax(6.5em, 0.85fr) 1fr 1.4fr);
  gap: 10px 18px; margin: 0; padding: 14px 0; border: 0;
  border-top: 1px solid var(--border); border-radius: 0;
  background: none; box-shadow: none;
}
.sc-inline-tbl-row:last-child { border-bottom: 1px solid var(--border); }
.sc-inline-tbl-row--head { font-weight: 600; }
.sc-inline-tbl-food { font-weight: 700; }
.sc-inline-tbl-cell { font-weight: 400; min-width: 0; }
.sc-inline-tbl-lab { display: none; }
html.dark .sc-inline-tbl-row { border-top-color: color-mix(in srgb, var(--text) 14%, transparent); }
html.dark .sc-inline-tbl-row:last-child { border-bottom-color: color-mix(in srgb, var(--text) 14%, transparent); }
@container (max-width: 520px) {
  .sc-inline-tbl-row { grid-template-columns: 1fr; gap: 8px; padding: 16px 0; }
  .sc-inline-tbl-row--head { display: none; }
  .sc-inline-tbl-lab {
    display: block; font-size: 0.68em; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-subtle); margin: 0 0 2px;
  }
}

/* ---- APP-OWNED ADDITIONS to the inline table ----
   The design's comparison is always three columns (the default track list
   above, verbatim). A markdown table has two to four, so the renderer sets
   --sc-inline-cols for any other count; a column the markdown aligned right
   or centre keeps that alignment beside the stack. The cell's own <p> (a
   paragraph Markdig wraps multi-block cells in) carries no margin. */
.sc-inline-tbl-cell.is-right { text-align: right; }
.sc-inline-tbl-cell.is-center { text-align: center; }
.sc-inline-tbl-food > p, .sc-inline-tbl-cell > p { margin: 0; }
.sc-inline-tbl-food > p + p, .sc-inline-tbl-cell > p + p { margin-top: 0.45em; }
@container (max-width: 520px) {
  .sc-inline-tbl-cell.is-right, .sc-inline-tbl-cell.is-center { text-align: left; }
}