/* ─────────────────────────────────────────────────────────────────────────────
   Ingredient parser tables (INTEL-548 to INTEL-551, epic INTEL-515).

   The four tables under the ingredient list on View Product and the
   Ingredients Verification page: Parsed Ingredients, Nutrients, Codes and
   Wise Code AI Engine Flavor Results. Design source: ip-b2b
   pages/table-types.html (#attb-ip-parsed, -codes, -nut, -scout), which draws
   them from View Product's own parser grid (pages/product-details.css, the
   .nfp-ia-* block), and assets/table-design.md.

   The design's grid is sized for a 400px module rail. Here the tables fill a
   page-width card, so the type follows the Table Types shell (11px / 800
   uppercase headers over a strong rule, 13px rows, tabular numbers, no zebra,
   hover on --primary-soft) rather than the rail's 0.58rem. The tone pills, the
   process-level circles, the group rows and the card reading are the design's.

   No table here scrolls sideways or clips. A table narrower than the width its
   columns need becomes labelled cards, measured on its own wrapper (a container
   query, never the viewport), and turns back into a table when there is room:
     .wci-parser--wide    560px  (Parsed Ingredients, Flavor Results: the trees)
     .wci-parser--narrow  360px  (Codes, Nutrients: a table even on a phone)
   ───────────────────────────────────────────────────────────────────────────── */

.wci-parser { container-type: inline-size; container-name: wci-parser; min-width: 0; }

.wci-parser-title {
    font-family: var(--module-title-family);
    font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text);
}

.wci-parser-tbl {
    width: 100%; border-collapse: collapse; background: var(--surface);
    font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums;
}
.wci-parser-tbl thead th {
    padding: 10px 14px 8px; text-align: left; background: var(--surface);
    font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-muted); border-bottom: 1px solid var(--border-strong);
}
.wci-parser-tbl tbody td {
    padding: 7px 14px; vertical-align: middle; color: var(--text);
    border-bottom: 1px solid var(--border); overflow-wrap: anywhere;
}
.wci-parser-tbl tbody tr:last-child td { border-bottom: 0; }
.wci-parser-tbl tbody tr { transition: background 0.12s ease; }
.wci-parser-tbl tbody tr:hover { background: var(--primary-soft); }
.wci-parser-tbl thead th.wci-parser-num,
.wci-parser-tbl tbody td.wci-parser-num { text-align: right; white-space: nowrap; }

.wci-parser-strong { font-weight: 700; }
.wci-parser-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--text-muted); }
.wci-parser-unit { margin-left: 4px; font-weight: 600; color: var(--text-muted); }
.wci-parser-den { margin-left: 2px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.wci-parser-none { color: var(--text-muted); }
/* A value and its unit or denominator (7 g, 86/100): one item, so the card reading's
   label / value split never pulls them apart. */
.wci-parser-val { white-space: nowrap; }
.wci-parser-tbl .wci-parser-tip { font-size: 16px; }

/* The mapped canon in ParsedIngredientRow: a real mapping in bold, an unconfirmed one muted. */
.parser-norm-static--mapped { text-transform: uppercase; font-weight: 700; }
.parser-norm-static--pending { text-transform: uppercase; font-style: italic; color: var(--text-muted); }

/* The Match cell wraps (pill, badges and the row's actions) rather than holding one line,
   so the table never needs to scroll or clip; below its floor it becomes cards. */
.wci-parser-tbl .match-cell { flex-wrap: wrap; }

/* Tone pills (the design's .nfp-ia-pill--ok / --warn / --bad), from the
   semantic tints so they read in both themes. */
.wci-parser-pill {
    display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
    font-size: 12px; font-weight: 700; white-space: nowrap;
    background: var(--surface-2, var(--primary-soft)); color: var(--text-muted);
}
.wci-parser-pill--good { background: var(--sec-green-10); color: var(--sec-green-text); }
.wci-parser-pill--warn { background: var(--ter-amber-10); color: var(--ter-amber-text); }
.wci-parser-pill--bad { background: var(--sec-red-10); color: var(--sec-red-text); }

/* Process level 1 to 4 on the chart-status scale, so it reads in the same
   green, amber, orange, red order as the Processing Spectrum. */
.wci-parser-pl {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 22px; height: 22px; border-radius: 50%;
    font-size: 12px; font-weight: 800; color: #fff;
}
.wci-parser-pl--1 { background: var(--chart-status-excellent); }
.wci-parser-pl--2 { background: var(--chart-status-okay); color: #5A2D0A; }
.wci-parser-pl--3 { background: var(--chart-status-fair); }
.wci-parser-pl--4 { background: var(--chart-status-poor); }

/* A group row heads the rows beneath it (the design's .is-group). */
.wci-parser-tbl tbody tr.wci-parser-group td {
    padding: 6px 14px; background: color-mix(in srgb, var(--text) 4%, transparent);
    font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-muted);
}
.wci-parser-group-btn {
    display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0;
    background: none; color: inherit; font: inherit; letter-spacing: inherit;
    text-transform: inherit; cursor: pointer;
}
.wci-parser-group-btn .material-icons { font-size: 16px; }
.wci-parser-group-meta { margin-left: 6px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-muted); }

/* A parent ingredient in a tree heads the rows nested under it and has no mapping of
   its own: the design's group tint, and in the card reading a heading, not a card. */
.wci-parser-tbl tbody tr.wci-parser-parent { background: color-mix(in srgb, var(--text) 4%, transparent); }
.wci-parser-tbl tbody tr.wci-parser-parent:hover { background: var(--primary-soft); }

/* ── Tree rails ──
   Directory-tree guide lines before an ingredient's name, one span per depth
   level (IngredientDisplayHelpers.ComputeRailSlots). The cell stays a real
   table cell so it fills the row when a sibling wraps; the inner flex wrapper
   takes its full height so each rail can stretch. The pipe overruns the 7px
   cell padding and the 1px rule so consecutive rows join without a gap. */
.wci-parser-tbl .tree-cell { padding-left: 4px; }
.wci-parser-tbl .tree-cell-inner { display: flex; align-items: center; }
.wci-parser-tbl .tree-cell-railed .tree-cell-inner { height: 100%; }
.wci-parser-tbl .tree-rail {
    display: inline-block; flex: 0 0 auto; width: 22px; align-self: stretch; position: relative;
}
.wci-parser-tbl .tree-rail-continue::before,
.wci-parser-tbl .tree-rail-branch::before,
.wci-parser-tbl .tree-rail-lastbranch::before {
    content: ''; position: absolute; left: 10px; width: 1.5px; background: var(--border-strong);
}
.wci-parser-tbl .tree-rail-continue::before,
.wci-parser-tbl .tree-rail-branch::before { top: -8px; bottom: -9px; }
.wci-parser-tbl .tree-rail-lastbranch::before { top: -8px; height: calc(50% + 8px); }
.wci-parser-tbl .tree-rail-branch::after,
.wci-parser-tbl .tree-rail-lastbranch::after {
    content: ''; position: absolute; top: 50%; left: 10px;
    width: 11px; height: 1.5px; background: var(--border-strong); transform: translateY(-0.5px);
}
.wci-parser-tbl .tree-name-root { font-weight: 700; color: var(--text); text-transform: capitalize; }
.wci-parser-tbl .tree-name-child { color: var(--text); text-transform: capitalize; }

@media (prefers-reduced-motion: reduce) {
    .wci-parser-tbl tbody tr { transition: none; }
}

/* ── Card reading ──
   The same block at each floor. The header row goes, each row becomes a card
   with every cell labelled from its column (data-label), the first cell leads
   the card unlabelled, and the nesting moves from the rails onto the card's
   left margin (the design's rtbl-cards rule for the parser). A group row is the
   heading of the cards beneath it, not a card. */
@container wci-parser (max-width: 559px) {
    .wci-parser--wide .wci-parser-tbl,
    .wci-parser--wide .wci-parser-tbl tbody { display: block; }
    .wci-parser--wide .wci-parser-tbl thead { display: none; }
    .wci-parser--wide .wci-parser-tbl tbody tr {
        display: flex; flex-direction: column; gap: 5px;
        margin: 0 0 8px calc(min(4, var(--tree-depth, 0)) * 10px); padding: 10px 12px;
        background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
        box-shadow: var(--shadow-1);
    }
    .wci-parser--wide .wci-parser-tbl tbody td {
        display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
        padding: 0; border: 0; text-align: left; white-space: normal;
    }
    /* The unlabelled lead cell stacks (a name over its sub-line), never side by side. */
    .wci-parser--wide .wci-parser-tbl tbody td:not([data-label]) { display: block; }
    .wci-parser--wide .wci-parser-tbl tbody td[data-label]::before {
        content: attr(data-label); flex: none; font-size: 11px; font-weight: 800;
        letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
    }
    .wci-parser--wide .wci-parser-tbl .tree-rail { display: none; }
    .wci-parser--wide .wci-parser-tbl .tree-cell { padding-left: 0; }
    .wci-parser--wide .wci-parser-tbl tbody tr.wci-parser-group,
    .wci-parser--wide .wci-parser-tbl tbody tr.wci-parser-parent {
        background: none; border: 0; box-shadow: none; padding: 4px 2px 0;
    }
    .wci-parser--wide .wci-parser-tbl tbody tr.wci-parser-parent > td:not(:first-child) { display: none; }
}
@container wci-parser (max-width: 359px) {
    .wci-parser--narrow .wci-parser-tbl,
    .wci-parser--narrow .wci-parser-tbl tbody { display: block; }
    .wci-parser--narrow .wci-parser-tbl thead { display: none; }
    .wci-parser--narrow .wci-parser-tbl tbody tr {
        display: flex; flex-direction: column; gap: 5px;
        margin: 0 0 8px; padding: 10px 12px;
        background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
        box-shadow: var(--shadow-1);
    }
    .wci-parser--narrow .wci-parser-tbl tbody td {
        display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
        padding: 0; border: 0; text-align: left; white-space: normal;
    }
    /* The unlabelled lead cell stacks (a name over its sub-line), never side by side. */
    .wci-parser--narrow .wci-parser-tbl tbody td:not([data-label]) { display: block; }
    .wci-parser--narrow .wci-parser-tbl tbody td[data-label]::before {
        content: attr(data-label); flex: none; font-size: 11px; font-weight: 800;
        letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
    }
    .wci-parser--narrow .wci-parser-tbl tbody tr.wci-parser-group,
    .wci-parser--narrow .wci-parser-tbl tbody tr.wci-parser-parent {
        background: none; border: 0; box-shadow: none; padding: 4px 2px 0;
    }
    .wci-parser--narrow .wci-parser-tbl tbody tr.wci-parser-parent > td:not(:first-child) { display: none; }
}

/* Print lays out the desktop table on white, never the card reading. */
@media print {
    .wci-parser { container-type: normal; }
    .wci-parser-tbl { break-inside: avoid; }
}