/* Named-lists UI additions: two-table cantrip grid, the per-field List select, the loud
   non-equivalence warning. Kept apart from loot-editor.css / loot-form.css on purpose. */

/* ---- Cantrip grid: up to two real tables, stacked by default, side by side only when both fit ----
   A table needs (tier count x 72px) + 180px of stem name. Four tiers: 468px, so two tables and the
   20px gap need 956px (threshold 960). With the Moderate column: 540px each, 1100px (threshold 1120). */
.le-grid { container-type: inline-size; }
.le-grid-tables { display: block; }
.le-grid-tables > .le-grid-table { width: 100%; table-layout: fixed; margin-top: 0; }
.le-grid-tables > .le-grid-table + .le-grid-table { margin-top: 8px; }
.le-grid-table th:not(.le-grid-stem),
.le-grid-table td.le-grid-cell { width: 72px; min-width: 0; padding-left: 2px; padding-right: 2px; text-align: center; }
/* Header cells are plain labels; the tier checkboxes live once, in the toolbar. */
.le-grid-tiers { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.le-grid-tiers-head { color: var(--muted, #8a8f98); font-size: 13px; }
.le-grid-table th.le-grid-stem { text-align: left; }
@container (min-width: 960px) {
  .le-grid-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-items: start; }
  .le-grid-tables > .le-grid-table + .le-grid-table { margin-top: 0; }
  .le-grid-tables-legacy { display: block; }
  .le-grid-tables-legacy > .le-grid-table + .le-grid-table { margin-top: 8px; }
}
@container (min-width: 1120px) {
  .le-grid-tables-legacy { display: grid; }
  .le-grid-tables-legacy > .le-grid-table + .le-grid-table { margin-top: 0; }
}

/* ---- The List select under a regex field ---- */
.lf-list-assign { font-size: 12px; color: var(--muted, #8a8f98); }
.lf-list-select { width: auto; max-width: 260px; min-width: 150px; padding: 2px 6px; font-size: 13px; }

/* ---- Cantrip conversion: a non-equivalent grid must be impossible to miss ---- */
.le-convert-warn { border: 1px solid var(--warn); border-left-width: 4px; border-radius: 4px; padding: 6px 10px; margin-top: 8px; }
.le-convert-headline { font-weight: 700; }
.le-convert-names { max-height: 140px; overflow: auto; margin: 4px 0 0; padding-left: 20px; font-size: 13px; }