/* v0.9 Life score, better buys and quick add. Colours follow the four bands: excellent, good, poor, bad. */
:root { --ls-excellent: #1e9e5a; --ls-good: #79b93a; --ls-poor: #e8892b; --ls-bad: #d9473b; }
.b-excellent { --ls: var(--ls-excellent); } .b-good { --ls: var(--ls-good); } .b-poor { --ls: var(--ls-poor); } .b-bad { --ls: var(--ls-bad); }

.lifescore { display: flex; gap: 14px; align-items: center; margin: 0 var(--s4, 16px) var(--s4, 16px); padding: 14px 16px; border-radius: var(--r, 22px);
  background: color-mix(in srgb, var(--ls) 12%, var(--surface, #fff)); border: 1px solid color-mix(in srgb, var(--ls) 30%, transparent); }
.lifescore .ring { --v: 50; flex: none; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--ls) calc(var(--v) * 1%), color-mix(in srgb, var(--ls) 18%, transparent) 0); animation: ls-in .7s var(--spring, ease) both; }
.lifescore .ring::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--surface, #fff); }
.lifescore .ring b { position: relative; font-size: 26px; line-height: 1; font-weight: 800; color: var(--ls); letter-spacing: -.02em; }
.lifescore .ring small { position: absolute; bottom: 15px; font-size: 10px; color: var(--muted, #6b7a76); }
.lifescore strong { display: block; font-size: 20px; color: var(--ls); line-height: 1.2; }
.lifescore .eyebrow { display: block; }
.lifescore .hint { display: block; margin-top: 2px; }
.b-none { --ls: #8a9893; }
.lifescore.est .ring small { font-size: 9px; }
@keyframes ls-in { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lifescore .ring { animation: none; } }

.lsparts { margin: -6px var(--s4, 16px) var(--s4, 16px); }
.lsrow { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--line, #e2e8e5); }
.lsrow:last-child { border-bottom: 0; }
.lsrow .n { font-weight: 700; } .lsrow .v { font-weight: 800; color: var(--ls); }
.lsrow .bar { grid-column: 1 / -1; height: 6px; border-radius: 4px; background: var(--surface-3, #e9eeec); overflow: hidden; }
.lsrow .bar i { display: block; height: 100%; border-radius: 4px; background: var(--ls); }
.lsrow .hint { grid-column: 1 / -1; }
.lstips { margin: 8px 0 0; padding-left: 18px; } .lstips li { margin: 4px 0; }

/* Better buys */
.better { margin: var(--s4, 16px) var(--s4, 16px); }
.better[hidden] { display: none; }
.better .sec-h { margin: 6px 0 8px; display: flex; align-items: center; gap: 8px; }
.better .sec-h h2 { font-size: 17px; margin: 0; }
.bb { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 10px 12px; margin-bottom: 8px; border-radius: var(--r-s, 12px);
  background: var(--surface-2, #f6f8f7); border: 1px solid var(--line, #e2e8e5); color: inherit; font: inherit; cursor: pointer; }
.bb:hover { border-color: var(--line-2, #cfd8d4); }
.bb .thumbx { flex: none; width: 44px; height: 44px; border-radius: 10px; background: var(--surface-3, #e9eeec) center / cover no-repeat; display: grid; place-items: center; }
.bb .t { display: block; font-weight: 700; } .bb .s { display: block; font-size: 13px; color: var(--muted, #6b7a76); }
.bb .sc { flex: none; min-width: 46px; padding: 6px 8px; border-radius: 999px; text-align: center; font-weight: 800; color: #fff; background: var(--ls); }
.bb .sc small { font-weight: 600; opacity: .85; }

/* Quick add for barcodes nobody knows */
.quickadd .kindchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.quickadd .kindchips button { border: 1px solid var(--line-2, #cfd8d4); background: var(--surface, #fff); color: inherit; font: inherit; font-size: 14px; padding: 7px 12px; border-radius: 999px; cursor: pointer; }
.quickadd .kindchips button[aria-pressed="true"] { background: var(--accent, #0d6e66); border-color: var(--accent, #0d6e66); color: #fff; }
.quickadd .guess { min-height: 1.2em; }
.quickadd details.more { margin: 4px 0; }
.thanks { animation: ls-in .5s var(--spring, ease) both; }
.pill.lsp { background: var(--ls); color: #fff; font-weight: 800; min-width: 34px; justify-content: center; }