/* Comparison in the app's own language — the same cards, radii, type and tints as the product screen:
   surface cards with a hairline border, Manrope, the accent for links and the chosen value, ok/warn tints. */
.comparison .topbar { margin-bottom:8px; }

/* Heading like the product screen's headline; swap as a round icon button */
.comparison-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:4px 0 14px; }
.comparison-heading .h2 { font-size:1.375rem; font-weight:800; line-height:1.2; letter-spacing:-.02em; }
.comparison-swap { flex:none; width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:var(--surface); color:var(--accent-text); font-size:1.25rem; cursor:pointer; }
.comparison-swap span { display:none; }

/* Two products in one card, split by a hairline */
.comparison-products { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); background:var(--surface); border:1px solid var(--line); border-radius:16px; margin-bottom:12px; overflow:hidden; }
.comparison-product { position:relative; min-width:0; display:flex; flex-direction:column; align-items:flex-start; text-align:left; padding:12px; }
.comparison-product + .comparison-product { border-left:1px solid var(--line); }
.comparison-product.is-winner { background:linear-gradient(var(--ok-bg), transparent 70%); }
.comparison-product .thumb { order:1; width:64px; height:64px; margin:10px 0; border-radius:12px; background:var(--thumb); }
.comparison-product .thumb img { width:100%; height:100%; max-height:64px; object-fit:contain; border-radius:12px; }
.comparison-number { order:0; width:24px; height:24px; display:grid; place-items:center; border-radius:8px; background:var(--accent-soft); color:var(--accent-text); font-size:.8125rem; font-weight:800; }
.comparison-product.is-winner .comparison-number { background:var(--ok-text); color:var(--surface); }
.comparison-winner { order:0; position:absolute; top:12px; left:44px; right:8px; min-height:24px; display:flex; align-items:center; font-size:.75rem; font-weight:700; color:var(--ok-text); line-height:1.2; }
.comparison-product h2 { order:2; font-size:.9375rem; font-weight:700; line-height:1.3; margin:0 0 4px; overflow-wrap:anywhere; }
.comparison-product p { order:3; font-size:.8125rem; color:var(--text-2); line-height:1.4; margin:0; }
.comparison-product .link { order:4; margin-top:auto; padding-top:6px; display:inline-flex; align-items:center; gap:4px; min-height:40px; font-size:.8125rem; font-weight:700; color:var(--accent-text); }

/* The verdict: one card, the answer large, the key number in the accent like the product headline */
.comparison-conclusion { margin:0 0 24px; }
.cmp-verdict { padding:14px 16px 4px; background:var(--surface); border:1px solid var(--line); border-radius:16px; }
.cmp-verdict-pick { border-color:color-mix(in srgb, var(--ok-text) 35%, var(--line)); }
.comparison .cmp-verdict-kicker { margin:0 0 8px; color:var(--text-2); font-size:.8125rem; line-height:1.4; }
.cmp-verdict-plain { margin:0 0 8px; font-size:1.0625rem; font-weight:800; line-height:1.35; }
.cmp-verdict-label { display:inline-block; margin:0 0 8px; padding:3px 10px; border-radius:999px; background:var(--ok-bg); color:var(--ok-text); font-size:.75rem; font-weight:700; }
.cmp-verdict-title { margin:0; font-size:1.25rem; font-weight:800; line-height:1.25; letter-spacing:-.02em; }
.cmp-verdict-no { color:var(--ok-text); margin-right:6px; }
.cmp-verdict-reason { margin:8px 0 6px; font-size:.9375rem; line-height:1.5; color:var(--text-body); }
.cmp-verdict-reason b { font-weight:800; color:var(--accent-text); }
.cmp-verdict-warning { margin:0 0 10px; padding:10px 12px; border-radius:12px; background:var(--warn-bg); color:var(--warn-text); font-size:.875rem; font-weight:600; line-height:1.45; }
.cmp-verdict-tradeoff { margin:10px 0; padding:10px 12px; border-radius:12px; background:var(--warn-bg); color:var(--warn-text); font-size:.8125rem; line-height:1.45; }
.cmp-verdict-notes { margin:8px 0 0; padding-left:16px; font-size:.8125rem; color:var(--text-2); line-height:1.5; }
.cmp-verdict-how { margin-top:8px; border-top:1px solid var(--line); font-size:.8125rem; color:var(--text-2); }
.cmp-verdict-how summary { min-height:44px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; list-style:none; font-weight:700; color:var(--accent-text); }
.cmp-verdict-how summary::-webkit-details-marker { display:none; }
.cmp-verdict-how summary::after { content:'▾'; font-size:.875rem; transition:transform .15s; }
.cmp-verdict-how[open] summary::after { transform:rotate(180deg); }
.cmp-verdict-how p { line-height:1.5; }
.cmp-verdict-goal { display:inline-flex; align-items:center; min-height:44px; font-weight:700; }
/* Bars like the meters on the nutrient tiles */
.cmp-metrics { list-style:none; padding:0; margin:0 0 8px; }
.cmp-metric { padding:10px 0; border-top:1px solid var(--line); }
.cmp-metric:first-child { border-top:0; padding-top:2px; }
.cmp-metric-head { display:flex; justify-content:space-between; gap:6px; flex-wrap:wrap; color:var(--text); font-weight:700; }
.cmp-metric .dial-dot { display:none; }
.cmp-metric-tag { font-weight:500; color:var(--text-2); }
.cmp-bar { display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:8px; margin-top:6px; }
.cmp-bar-no { font-weight:700; color:var(--text-2); }
.cmp-bar-track { height:6px; background:var(--field); border-radius:3px; overflow:hidden; }
.cmp-bar-fill { display:block; height:100%; border-radius:3px; background:var(--text-3); opacity:.5; }
.cmp-bar-win .cmp-bar-fill { background:var(--ok-text); opacity:1; }
.cmp-bar-val { font-variant-numeric:tabular-nums; color:var(--text); }
.cmp-bar-mark { color:var(--ok-text); font-weight:800; }

/* Nutrition: the app's segmented control, then the table as a card */
.comparison .h3 { font-size:1.125rem; font-weight:800; letter-spacing:-.01em; }
.comparison .segmented { display:flex; gap:4px; padding:4px; border-radius:14px; background:var(--field); }
.comparison .segmented .chip { flex:1; min-width:0; min-height:40px; padding:8px 4px; border:0; border-radius:10px; color:var(--text-2); background:transparent; font-size:.8125rem; font-weight:700; }
.comparison .segmented .chip.selected { background:var(--surface); color:var(--accent-text); box-shadow:var(--shadow-card); }
.comparison .segmented .chip:disabled { opacity:.45; }
.comparison [data-difference] { display:inline-flex; align-items:center; gap:10px; border:0; border-radius:0; background:none; padding:0; min-height:44px; margin-top:6px; font-size:.875rem; font-weight:600; color:var(--text); }
.comparison [data-difference]::before { content:''; flex:none; width:20px; height:20px; border:1.5px solid var(--chip-border); border-radius:6px; background:var(--surface); }
.comparison [data-difference].selected::before { content:'✓'; display:grid; place-items:center; background:var(--accent); border-color:var(--accent); color:#fff; font-size:12px; font-weight:800; }
.comparison-table { display:block; width:100%; margin-top:8px; border-collapse:collapse; font-variant-numeric:tabular-nums; background:var(--surface); border:1px solid var(--line); border-radius:16px; }
.comparison-table thead,.comparison-table tbody { display:block; }
/* Each nutrient: a coloured dot and its name, then one line per product — number, bar, value. Bars are scaled
   within the row; colours are the day screen's rings, product 2 the same paint at half strength. */
.cmp-row-energy_kcal { --cmp-c:#FF375F; } .cmp-row-protein { --cmp-c:#30D158; } .cmp-row-sugar { --cmp-c:#FF9F0A; }
.cmp-row-salt { --cmp-c:#22B8CF; } .cmp-row-saturated_fat { --cmp-c:#BF5AF2; }
.comparison-table tbody th::before { content:''; display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; background:var(--cmp-c, var(--accent)); vertical-align:1px; }
.cmp-legend { display:flex; flex-direction:column; gap:6px; margin:14px 0 0; font-size:.8125rem; color:var(--text-2); }
.cmp-legend span { display:flex; align-items:center; gap:8px; min-width:0; overflow-wrap:anywhere; }
.cmp-legend .comparison-cell-no { flex:none; }
.comparison-cell-no { width:20px; height:20px; display:grid; place-items:center; border-radius:6px; font-size:.6875rem; font-weight:800; background:var(--accent-soft); color:var(--accent-text); }
.comparison-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.comparison-table tbody tr { display:grid; grid-template-columns:minmax(0,1fr); row-gap:6px; padding:12px 14px; border-bottom:1px solid var(--line); }
.comparison-table tbody tr:last-child { border-bottom:0; }
.comparison-table tbody th { font-size:.875rem; font-weight:700; text-align:left; color:var(--text); }
.comparison-table td { min-width:0; display:grid; grid-template-columns:20px minmax(0,1fr) minmax(64px,auto); align-items:center; column-gap:8px; color:var(--text); }
.cmp-cell-bar { height:8px; border-radius:4px; background:var(--field); overflow:hidden; }
.cmp-cell-bar i { display:block; height:100%; border-radius:4px; background:var(--cmp-c, var(--accent)); }
.comparison-table td + td .cmp-cell-bar i { opacity:.5; }
.comparison-table td b { text-align:right; font-size:.9375rem; font-weight:800; white-space:nowrap; }
.comparison-table td b.comparison-none { font-size:.75rem; font-weight:500; color:var(--text-2); }
.comparison-cell-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.comparison-delta { grid-column:2 / -1; text-align:right; font-size:.6875rem; color:var(--text-2); }
.comparison-sources { font-size:.8125rem; color:var(--text-2); }
.comparison-sources summary { cursor:pointer; min-height:44px; display:flex; align-items:center; font-weight:700; color:var(--accent-text); }
.comparison-sources > div { margin:12px 0; }
.comparison-source { font-size:.75rem; line-height:1.5; color:var(--text-2); margin:10px 0; overflow-wrap:anywhere; }
.comparison-source a { color:var(--accent-text); }
.comparison-notice { font-size:.8125rem; line-height:1.5; margin:12px 0; padding:12px 14px; border-radius:14px; background:var(--warn-bg); color:var(--warn-text); }

/* Ingredients: one card per product */
.comparison-ingredients { margin-top:10px; padding:14px 16px 4px; background:var(--surface); border:1px solid var(--line); border-radius:16px; font-size:.875rem; line-height:1.55; overflow-wrap:anywhere; color:var(--text-body); }
.comparison-ingredients h3 { display:flex; align-items:flex-start; gap:8px; font-size:.9375rem; font-weight:700; line-height:1.35; margin:0 0 6px; color:var(--text); }
.comparison-inline-number { flex:none; width:22px; height:22px; display:grid; place-items:center; border-radius:7px; background:var(--accent-soft); color:var(--accent-text); font-size:.75rem; font-weight:800; }
.comparison-ingredients .link { display:inline-flex; align-items:center; min-height:44px; font-size:.8125rem; font-weight:700; color:var(--accent-text); }
.comparison-portion { padding:14px; background:var(--surface); border:1px solid var(--line); border-radius:16px; }
.comparison-portion[hidden] { display:none; }
.comparison-portion label { display:block; font-size:.875rem; font-weight:600; margin-bottom:8px; }
.comparison-portion .field { width:100%; min-height:44px; }
.comparison-portion .field[aria-invalid='true'] { outline:1px solid var(--warn-text); }
.comparison .btn { text-decoration:none; }
.comparison-swap:focus-visible,.cmp-verdict:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media(max-width:360px) { .comparison-heading .h2 { font-size:1.25rem; } .comparison-table tbody tr { padding:12px 10px; }.comparison-table td b { font-size:.875rem; } .comparison-table td { grid-template-columns:20px minmax(0,1fr) minmax(56px,auto); }.comparison-product { padding:10px; } .comparison-winner { left:40px; font-size:.6875rem; } .comparison-product .thumb { margin-top:16px; } }