/* One family per row. Exact tier effects use the shared attached panel. */
.alchemy-effect-comparisons { min-width:0; margin-block:1rem 1.5rem; }
.alchemy-workshop .alchemy-effect-compare { table-layout:fixed; width:100%; margin:0; }
.alchemy-effect-compare__label { width:31%; }
.alchemy-workshop .alchemy-effect-compare :is(th,td) { min-width:0; padding:.75rem .375rem; vertical-align:middle; text-align:center; overflow-wrap:normal; word-break:normal; }
.alchemy-workshop .alchemy-effect-compare th:first-child { text-align:left; }
.alchemy-workshop .alchemy-effect-compare tbody th { background:transparent; }
.alchemy-workshop .alchemy-effect-compare tbody tr:last-child th { border-bottom:0; }
.alchemy-effect-identity { display:flex; align-items:center; gap:.625rem; }
.alchemy-effect-identity > img { flex:none; border-radius:var(--radius-sm); }
.alchemy-effect-identity > span { min-width:0; }
.alchemy-effect-purpose,.alchemy-effect-caution { display:block; margin-top:.125rem; color:var(--text-secondary); }
.alchemy-effect-caution { color:var(--lu4-accent); }
.alchemy-effect-trigger { display:grid; grid-template-columns:auto minmax(0,1fr); justify-content:center; gap:.125rem .375rem; width:100%; padding:.25rem; text-align:left; }
.alchemy-effect-trigger img { border-radius:var(--radius-sm); }
.alchemy-effect-trigger > span[data-effect-value] { min-width:0; }
.alchemy-effect-metric { display:block; color:var(--text-muted); }
.alchemy-effect-trigger strong { font-variant-numeric:tabular-nums; white-space:nowrap; }
.alchemy-effect-gate { grid-column:1/-1; color:var(--text-secondary); white-space:nowrap; }
.alchemy-effect-mobile-tier { display:none; }
.alchemy-effect-unavailable { color:var(--text-muted); }
.alchemy-effect-preview__head { display:flex; align-items:start; justify-content:space-between; gap:.5rem; }
.alchemy-effect-preview__head > a { flex:1; }
.alchemy-effect-duration { display:block; color:var(--text-muted); margin-top:.75rem; }
.alchemy-workshop .alchemy-effect-detail__body p { margin:.75rem 0; }
/* At narrow reading widths, the identity sits over the same five ordered tier
   cells. The table stays inside the reading column instead of page overflow. */
@media(max-width:639px) {
 .alchemy-effect-compare,.alchemy-effect-compare tbody { display:block; }
 .alchemy-effect-compare colgroup,.alchemy-effect-compare thead { display:none; }
 .alchemy-effect-compare tbody tr { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); padding-block:.75rem; border-bottom:1px solid var(--border); }
 .alchemy-workshop .alchemy-effect-compare tbody :is(th,td) { padding:.25rem .125rem; border:0; }
 .alchemy-effect-compare tbody th { grid-column:1/-1; }
 .alchemy-effect-identity { align-items:start; margin-bottom:.5rem; }
 .alchemy-effect-purpose { display:inline; margin-left:.625rem; }
 .alchemy-effect-mobile-tier { display:block; color:var(--text-muted); text-align:center; }
 .alchemy-effect-trigger { grid-template-columns:minmax(0,1fr); justify-items:center; gap:.25rem; text-align:center; }
 .alchemy-effect-gate { white-space:normal; }
 .alchemy-effect-unavailable { align-content:start; }
}