/* Equipment comparison (plan item 48): bag details panel, shop details and the hover tooltip. */
:root{--item-compare-good:#3d7f2b;--item-compare-bad:#b8372b;--item-compare-neutral:#8a7763}
.item-compare{margin:14px 0 4px;padding:9px 12px 8px;border:1px solid #d9c0a3aa;border-radius:10px;background:#fff8ecaa;min-width:0}
.item-compare h4{margin:0 0 4px;font-size:13px;font-weight:800;line-height:1.5;color:#7a5c3e;overflow-wrap:anywhere}
.item-compare ul{list-style:none;margin:0;padding:0}
.item-compare li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:baseline;gap:4px 10px;padding:5px 0;font-size:14px;border-bottom:1px dashed #d9c0a366}
.item-compare li:last-child{border-bottom:0}
.item-compare-label{min-width:0;overflow-wrap:anywhere}
.item-compare-value{font-weight:700;color:#5d4630}
.item-compare-delta{font-weight:800;white-space:nowrap;min-width:4.6em;text-align:right;color:var(--item-compare-neutral)}
.item-compare-arrow{font-size:.85em}
.item-compare [data-tone="good"] .item-compare-delta{color:var(--item-compare-good)}
.item-compare [data-tone="bad"] .item-compare-delta{color:var(--item-compare-bad)}
.item-compare-note{margin:2px 0 0;font-size:13px;color:var(--item-compare-neutral)}
.item-compare-level{margin:6px 0 0;font-size:13px;font-weight:800;color:var(--item-compare-bad)}
/* The tooltip follows the mouse; it never takes clicks and sits above the dialog contents. */
.item-compare-tooltip{--item-compare-good:#93e070;--item-compare-bad:#ff8f80;--item-compare-neutral:#cdbda6;position:fixed;left:0;top:0;z-index:2147483000;box-sizing:border-box;width:max-content;max-width:min(320px,90vw);padding:10px 13px 9px;border:1px solid #caa66c;border-radius:10px;background:#2a2017f2;color:#f6ead6;box-shadow:0 10px 26px #0007,inset 0 0 0 1px #fff2;font-size:15px;line-height:1.45;pointer-events:none;transform:translate(-9999px,-9999px)}
.item-compare-tooltip[hidden]{display:none}
.item-compare-title{display:block;margin-bottom:3px;font-size:15px;font-weight:800;color:#ffe2a8;overflow-wrap:anywhere}
.item-compare-tooltip .item-compare{margin:0;padding:0;border:0;border-radius:0;background:none}
.item-compare-tooltip .item-compare h4{color:#d9c3a0}
.item-compare-tooltip .item-compare li{font-size:15px;border-bottom-color:#ffffff22}
.item-compare-tooltip .item-compare-value{color:#fff}
/* Same text size as the .adventure-item-stats rows on wide screens (17px from 1301px). */
@media(min-width:1301px){.item-compare li,.item-compare-tooltip .item-compare li{font-size:17px}.item-compare h4{font-size:15px}.item-compare-title{font-size:17px}}
@media(hover:none){.item-compare-tooltip{display:none!important}}
@media(max-width:600px){.item-compare{margin:10px 0 2px;padding:7px 9px}.item-compare li{font-size:13px;gap:3px 8px}}
/* A narrow details panel (390px windows) puts the label on its own line so it does not break into one word per line.
   Only the panels are containers: the tooltip sizes to its content, which an inline-size container would collapse. */
.adventure-details .item-compare,#shop-compare .item-compare{container-type:inline-size}
@container (max-width:240px){.item-compare li{grid-template-columns:minmax(0,1fr) auto;gap:0 8px}.item-compare-label{grid-column:1/-1}.item-compare-delta{min-width:0}}
/* Shop details: a full-width row under the effects list (the narrow layout is a grid). */
#shop-compare{grid-column:1/-1;min-width:0}
#shop-compare[hidden],#shop-compare:empty{display:none}
#shop-compare .item-compare{margin:0}