/* PlotterPrinters compare tool — button, tray, /compare app. Token-driven; no new colors. */

/* ---- buybox button ---- */
.pp-compare-btn { display: inline-flex; align-items: center; gap: .45em; margin-top: var(--wp--preset--spacing--3); padding: .5em 1em; border-radius: var(--wp--custom--radius, 6px); font: inherit; font-weight: 600; font-size: var(--wp--preset--font-size--step--1); cursor: pointer; background: var(--wp--preset--color--surface, #fff); color: var(--wp--preset--color--brand, #002050); border: 1.5px solid var(--wp--preset--color--brand-line, #c8d4ea); }
.pp-compare-btn:hover { border-color: var(--wp--preset--color--brand-bright, #1f5fd0); color: var(--wp--preset--color--brand-bright, #1f5fd0); }
.pp-compare-btn .pp-compare-btn-added { display: none; }
.pp-compare-btn.is-added { background: var(--wp--preset--color--brand-tint, #e8eefb); border-color: var(--wp--preset--color--brand-bright, #1f5fd0); color: var(--wp--preset--color--brand, #002050); }
.pp-compare-btn.is-added .pp-compare-btn-add { display: none; }
.pp-compare-btn.is-added .pp-compare-btn-added { display: inline; }

/* ---- sticky tray ---- */
.pp-cmp-tray { position: fixed; inset-inline: 0; bottom: 0; z-index: 60; background: var(--wp--preset--color--brand-deep, #001437); color: #fff; box-shadow: 0 -6px 24px rgba(0, 16, 44, .28); }
.pp-cmp-tray--lifted { bottom: 0; }
@media (max-width: 47.99em) { .pp-cmp-tray--lifted { bottom: 3.4rem; } } /* clear the mobile sticky cart bar */
.pp-cmp-tray-inner { display: flex; align-items: center; gap: var(--wp--preset--spacing--3, .75rem); max-width: 1100px; margin-inline: auto; padding: .55rem var(--wp--preset--spacing--4, 1rem); flex-wrap: wrap; }
.pp-cmp-tray-label { font-family: var(--wp--preset--font-family--mono, monospace); text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; opacity: .85; }
.pp-cmp-tray-items { display: flex; gap: .5rem; flex: 1 1 auto; flex-wrap: wrap; }
.pp-cmp-chip { display: inline-flex; align-items: center; gap: .4em; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; padding: .18rem .35rem .18rem .2rem; font-size: .74rem; line-height: 1.1; }
.pp-cmp-chip img { border-radius: 999px; background: #fff; object-fit: contain; }
.pp-cmp-chip-x { border: 0; background: transparent; color: #fff; opacity: .75; font-size: .95rem; line-height: 1; cursor: pointer; padding: 0 .25rem; }
.pp-cmp-chip-x:hover { opacity: 1; }
.pp-cmp-tray-go { font-weight: 700; text-decoration: none; color: #fff; background: var(--wp--preset--color--accent, #f26b1a); padding: .5em 1.05em; border-radius: 999px; font-size: .82rem; opacity: .45; pointer-events: none; white-space: nowrap; }
.pp-cmp-tray-go.is-ready { opacity: 1; pointer-events: auto; }
.pp-cmp-tray-clear { border: 0; background: transparent; color: rgba(255, 255, 255, .75); font-size: .74rem; cursor: pointer; text-decoration: underline; }
.pp-cmp-tray-clear:hover { color: #fff; }

/* ---- /compare app: picker ---- */
.pp-cmp-app { max-width: 1100px; margin-inline: auto; }
.pp-cmp-picker-h { font-family: var(--wp--preset--font-family--mono, monospace); text-transform: uppercase; letter-spacing: .12em; font-size: var(--wp--preset--font-size--step--1); color: var(--wp--preset--color--accent-ink, #b34400); margin: 0 0 var(--wp--preset--spacing--3, .75rem); }
.pp-cmp-slots { display: grid; gap: var(--wp--preset--spacing--3, .75rem); grid-template-columns: 1fr; }
@media (min-width: 48em) { .pp-cmp-slots { grid-template-columns: repeat(4, 1fr); } }
.pp-cmp-slot { position: relative; }
.pp-cmp-slot-label { display: block; font-size: .74rem; color: var(--wp--preset--color--muted, #5b6472); margin-bottom: .3rem; }
.pp-cmp-input { width: 100%; padding: .6em .8em; border: 1.5px solid var(--wp--preset--color--border, #d5dae2); border-radius: var(--wp--custom--radius, 6px); font: inherit; font-size: .9rem; background: var(--wp--preset--color--surface, #fff); }
.pp-cmp-input:focus { outline: 2px solid var(--wp--preset--color--brand-bright, #1f5fd0); outline-offset: 1px; }
.pp-cmp-drop { position: absolute; inset-inline: 0; top: 100%; z-index: 40; background: #fff; border: 1px solid var(--wp--preset--color--border, #d5dae2); border-radius: var(--wp--custom--radius, 6px); box-shadow: 0 12px 32px rgba(0, 16, 44, .14); max-height: 310px; overflow: auto; }
.pp-cmp-opt { display: flex; width: 100%; align-items: center; gap: .6em; padding: .5em .7em; border: 0; background: transparent; cursor: pointer; text-align: left; font: inherit; }
.pp-cmp-opt:hover, .pp-cmp-opt:focus { background: var(--wp--preset--color--brand-tint, #e8eefb); }
.pp-cmp-opt img { flex: none; object-fit: contain; background: #fff; border-radius: 4px; }
.pp-cmp-opt-body { display: flex; flex-direction: column; gap: .1em; min-width: 0; }
.pp-cmp-opt-name { font-size: .84rem; font-weight: 600; color: var(--wp--preset--color--ink, #10141b); }
.pp-cmp-opt-meta { font-size: .72rem; color: var(--wp--preset--color--muted, #5b6472); }
.pp-cmp-drop-empty { margin: 0; padding: .6em .8em; font-size: .8rem; color: var(--wp--preset--color--muted, #5b6472); }
.pp-cmp-actions { display: flex; align-items: center; gap: var(--wp--preset--spacing--3, .75rem); margin-top: var(--wp--preset--spacing--4, 1rem); }
.pp-cmp-run { background: var(--wp--preset--color--brand, #002050); color: #fff; border: 0; border-radius: 999px; padding: .65em 1.4em; font-weight: 700; cursor: pointer; font-size: .95rem; }
.pp-cmp-run:disabled { opacity: .4; cursor: not-allowed; }
.pp-cmp-run:not(:disabled):hover { background: var(--wp--preset--color--brand-bright, #1f5fd0); }
.pp-cmp-reset { border: 0; background: transparent; color: var(--wp--preset--color--muted, #5b6472); cursor: pointer; text-decoration: underline; font-size: .84rem; }

/* ---- status + result ---- */
.pp-cmp-status { margin-top: var(--wp--preset--spacing--5, 1.25rem); padding: .8em 1em; border-radius: var(--wp--custom--radius, 6px); background: var(--wp--preset--color--surface-2, #f2f4f8); color: var(--wp--preset--color--ink-soft, #333c49); font-size: .9rem; }
.pp-cmp-status.is-busy::before { content: ""; display: inline-block; width: .85em; height: .85em; margin-right: .55em; border: 2px solid currentColor; border-top-color: transparent; border-radius: 999px; animation: ppcmpspin .8s linear infinite; vertical-align: -.1em; }
@keyframes ppcmpspin { to { transform: rotate(360deg); } }

.pp-cmp-result { margin-top: var(--wp--preset--spacing--6, 1.5rem); }
.pp-cmp-cards { display: grid; gap: var(--wp--preset--spacing--3, .75rem); grid-template-columns: repeat(2, 1fr); margin-bottom: var(--wp--preset--spacing--5, 1.25rem); }
@media (min-width: 48em) { .pp-cmp-cards { grid-template-columns: repeat(4, 1fr); } }
.pp-cmp-card { background: var(--wp--preset--color--surface, #fff); border: 1px solid var(--wp--preset--color--border, #d5dae2); border-radius: var(--wp--custom--radius, 6px); padding: var(--wp--preset--spacing--4, 1rem); display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.pp-cmp-card img { object-fit: contain; background: #fff; align-self: center; }
.pp-cmp-card-name { margin: 0; font-weight: 700; font-size: .88rem; line-height: 1.3; }
.pp-cmp-card-name a { color: var(--wp--preset--color--ink, #10141b); text-decoration: none; }
.pp-cmp-card-name a:hover { color: var(--wp--preset--color--brand-bright, #1f5fd0); }
.pp-cmp-card-price { margin: 0; font-family: var(--wp--preset--font-family--display, inherit); font-weight: 700; color: var(--wp--preset--color--ink, #10141b); }
.pp-cmp-card-cta { margin-top: auto; text-decoration: none; font-weight: 600; font-size: .8rem; padding: .45em .95em; border-radius: 999px; border: 1.5px solid var(--wp--preset--color--brand-line, #c8d4ea); color: var(--wp--preset--color--brand, #002050); }
.pp-cmp-card-cta.is-buy { background: var(--wp--preset--color--accent, #f26b1a); border-color: var(--wp--preset--color--accent, #f26b1a); color: #fff; }
.pp-cmp-card-cta:hover { filter: brightness(1.06); }

.pp-cmp-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--wp--preset--color--border, #d5dae2); border-radius: var(--wp--custom--radius, 6px); }
.pp-cmp-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .84rem; background: var(--wp--preset--color--surface, #fff); }
.pp-cmp-table thead th { position: sticky; top: 0; background: var(--wp--preset--color--brand-deep, #001437); color: #fff; text-align: left; padding: .65em .8em; font-size: .78rem; }
.pp-cmp-table tbody th { text-align: left; font-weight: 500; color: var(--wp--preset--color--ink-soft, #333c49); width: 26%; }
.pp-cmp-table tbody th, .pp-cmp-table tbody td { padding: .6em .8em; border-block-end: 1px solid var(--wp--preset--color--border, #e3e7ee); vertical-align: top; word-break: break-word; }
.pp-cmp-table tbody tr:nth-child(odd) { background: var(--wp--preset--color--surface-2, #f7f8fb); }
.pp-cmp-table .pp-vflag { display: inline-block; margin-inline-start: .5em; padding: 1px 7px; border-radius: 999px; font-family: var(--wp--preset--font-family--mono, monospace); font-size: .58rem; letter-spacing: .04em; color: var(--wp--preset--color--band-high, #0c7a43); background: var(--wp--preset--color--band-high-tint, #e3f4ea); white-space: nowrap; }

.pp-cmp-writeup { margin-top: var(--wp--preset--spacing--6, 1.5rem); }
.pp-cmp-writeup-h { font-family: var(--wp--preset--font-family--display, inherit); font-size: var(--wp--preset--font-size--step-3, 1.6rem); margin: 0 0 var(--wp--preset--spacing--4, 1rem); }
.pp-cmp-writeup-body h3 { margin-block-start: var(--wp--preset--spacing--5, 1.25rem); }
.pp-cmp-note { color: var(--wp--preset--color--muted, #5b6472); font-size: .86rem; }

/* rows where the printers genuinely differ get a subtle accent edge */
.pp-cmp-table tbody tr.is-differs th { box-shadow: inset 3px 0 0 var(--wp--preset--color--accent, #f26b1a); }

/* measured color-gamut footprint plot */
.pp-cmp-gamut { margin-block-start: var(--wp--preset--spacing--6, 1.5rem); }
.pp-cmp-gamut-h { font-size: 1.15rem; margin: 0 0 var(--wp--preset--spacing--3, .75rem); }
.pp-gamut-plot { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--wp--preset--spacing--3, .75rem); }
.pp-gamut-plot-svg { width: 100%; max-width: 340px; height: auto; border: 1px solid var(--wp--preset--color--hairline, #e5e7eb); border-radius: 8px; }
.pp-gamut-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem .9rem; font-size: .82rem; }
.pp-gamut-key { display: inline-flex; align-items: center; gap: .4rem; color: var(--wp--preset--color--ink, #1a1a1a); }
.pp-gamut-sw { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.pp-gamut-sw--ref { background: transparent; border: 1.5px dashed #8a8a8a; border-radius: 2px; }
.pp-gamut-cap { font-size: .8rem; color: var(--wp--preset--color--muted, #5b6472); max-width: 52ch; text-align: center; }

/* brand-color in-gamut checker */
.pp-cmp-colorcheck { margin-block-start: var(--wp--preset--spacing--6, 1.5rem); padding-block-start: var(--wp--preset--spacing--5, 1.25rem); border-top: 1px solid var(--wp--preset--color--hairline, #e5e7eb); }
.pp-cc-h { font-size: 1.15rem; margin: 0 0 .35rem; }
.pp-cc-note { font-size: .86rem; color: var(--wp--preset--color--muted, #5b6472); max-width: 60ch; margin: 0 0 var(--wp--preset--spacing--3, .75rem); }
.pp-cc-form { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-block-end: var(--wp--preset--spacing--3, .75rem); }
.pp-cc-swatch { width: 34px; height: 34px; border-radius: 6px; border: 1px solid var(--wp--preset--color--hairline, #e5e7eb); background: repeating-conic-gradient(#eee 0% 25%, #fff 0% 50%) 50% / 12px 12px; flex: 0 0 auto; }
.pp-cc-swatch.is-set { border-color: rgba(0,0,0,.25); }
.pp-cc-input { flex: 1 1 220px; min-width: 160px; padding: .5rem .6rem; border: 1px solid var(--wp--preset--color--hairline, #cbd5e1); border-radius: 6px; font: inherit; font-variant-numeric: tabular-nums; }
.pp-cc-btn { flex: 0 0 auto; }
.pp-cc-msg { font-size: .84rem; margin: .25rem 0; color: var(--wp--preset--color--muted, #5b6472); font-variant-numeric: tabular-nums; }
.pp-cc-msg.is-err { color: #b42318; }
.pp-cc-msg.is-busy::after { content: ''; }
.pp-cc-results { display: flex; flex-direction: column; gap: .4rem; }
.pp-cc-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .45rem .6rem; border: 1px solid var(--wp--preset--color--hairline, #e5e7eb); border-radius: 8px; }
.pp-cc-name { font-weight: 600; flex: 1 1 40%; min-width: 40%; }
.pp-cc-verdict { font-size: .82rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; white-space: nowrap; }
.pp-cc-verdict.is-in { background: #dcfce7; color: #166534; }
.pp-cc-verdict.is-close { background: #fef9c3; color: #854d0e; }
.pp-cc-verdict.is-out { background: #fee2e2; color: #991b1b; }
.pp-cc-verdict.is-na { background: #f1f5f9; color: #64748b; }
.pp-cc-near { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--wp--preset--color--muted, #5b6472); }
.pp-cc-near-sw { width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(0,0,0,.15); }
.pp-cc-near-hex { font-variant-numeric: tabular-nums; }
.pp-cc-foot { font-size: .78rem; color: var(--wp--preset--color--muted, #5b6472); max-width: 64ch; margin: .3rem 0 0; }