/* eBay Quick List — a packing-bench tool: legible, calm, one blue accent, one label-shaped ticket. */
:root {
  --ground: #f3f5f7; --sheet: #ffffff; --ink: #14181d; --muted: #5b6672; --line: #d9dee3; --line-strong: #b9c2cb;
  --accent: #1f4fd8; --accent-ink: #163aa0; --tint: #eef3ff; --ok: #1e7f4f; --ok-bg: #e8f5ee; --warn: #b7791f; --bad: #c0392b; --bad-bg: #fbeceb;
  --r: 6px; --r-lg: 10px; --focus: 0 0 0 3px rgba(31, 79, 216, .28);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: 15px; }
body { margin: 0; font-family: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; line-height: 1.45; color: var(--ink); background: var(--ground); -webkit-font-smoothing: antialiased; }
h1 { font-size: 1.85rem; font-weight: 600; letter-spacing: -.01em; margin: 0 0 .6rem; }
h2 { font-size: 1.05rem; font-weight: 600; margin: 0 0 .9rem; display: flex; align-items: center; gap: .55rem; }
h3 { font-size: .95rem; font-weight: 600; margin: 1rem 0 .5rem; }
a { color: var(--accent); }
code { font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; font-size: .92em; background: #eef1f4; padding: 1px 5px; border-radius: 4px; }
small, .small { font-size: .82rem; }
.muted, .hint { color: var(--muted); }
.hint { font-size: .85rem; margin: .35rem 0 0; }
.count { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 400; font-size: .8rem; }
.error { color: var(--bad); }
.ok { color: var(--ok); }
.req { color: var(--bad); font-weight: 600; }

/* Top bar */
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1.25rem; background: var(--sheet); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.top .brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; color: var(--ink); text-decoration: none; letter-spacing: -.01em; }
.brand-logo { width: 40px; height: 40px; border-radius: 8px; display: block; image-rendering: auto; }
@media (max-width: 700px) { .top .brand span { font-size: .95rem; } }
.top nav { display: flex; gap: .2rem; align-items: center; flex-wrap: wrap; }
.top nav a { color: var(--muted); text-decoration: none; padding: .35rem .6rem; border-radius: var(--r); font-size: .93rem; }
.top nav a:hover { color: var(--ink); background: var(--ground); }
.top nav a[aria-current="page"] { color: var(--ink); font-weight: 500; }
/* align-items: stretch overrides the global button rule, whose centering shrinks the bars to nothing. */
.menu-toggle { display: none; width: 42px; height: 42px; padding: 9px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--sheet); flex-direction: column; justify-content: space-between; align-items: stretch; gap: 0; min-height: 0; }
.menu-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 1px; transition: transform .2s, opacity .2s; }
.menu-toggle.open span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }
.menu-toggle:hover { background: var(--ground); }
main { max-width: 1120px; margin: 0 auto; padding: 1.5rem 1.25rem 5rem; overflow-x: hidden; overflow-x: clip; } /* clip: dropdowns can extend past the bottom without a scrollbar */
.step, .ticket, .card, .sheet { overflow-wrap: anywhere; }

/* Sheets and cards (settings, lists) */
.card, .sheet { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.25rem 1.4rem; margin: 0 0 1rem; }
.notice { padding: .75rem .9rem; border-radius: var(--r); border: 1px solid var(--line); background: #fff8e6; border-color: #eed9a2; }
.ok-box { background: var(--ok-bg); border-color: #b6dcc4; }
.error-box { background: var(--bad-bg); border-color: #efc3bf; }

/* Controls */
label { display: block; font-weight: 500; font-size: .9rem; margin: 0 0 .3rem; }
label small { color: var(--muted); font-weight: 400; }
input[type=text], input[type=password], input[type=number], select, textarea {
  display: block; width: 100%; min-width: 0; max-width: 100%; padding: .6rem .7rem; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--sheet); color: var(--ink); font: inherit; min-height: 42px;
}
textarea { resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus, button:focus-visible, .dropzone:focus-within { outline: none; border-color: var(--accent); box-shadow: var(--focus); }
input.field-error, select.field-error, textarea.field-error { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(192, 57, 43, .18); }
.field { margin: 0 0 .9rem; }
.field label + input, .field label + select, .field label + textarea, .field label + .money { margin-top: 0; }
.money { display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--sheet); padding-left: .7rem; }
.money span { color: var(--muted); }
.money input { border: 0; min-height: 40px; padding-left: .3rem; }
.money:focus-within { border-color: var(--accent); box-shadow: var(--focus); }
.money input:focus { box-shadow: none; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .8rem; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.row { display: flex; gap: .8rem; flex-wrap: wrap; }
.row label { flex: 1 1 140px; }
.check { display: flex; align-items: center; gap: .5rem; font-weight: 500; margin: .4rem 0 .2rem; }
.check input { width: 1.05rem; height: 1.05rem; margin: 0; }
button, .button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .6rem 1rem; border: 1px solid transparent; border-radius: var(--r); background: var(--accent); color: #fff; font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; min-height: 40px; }
button:hover, .button:hover { background: var(--accent-ink); }
button.secondary, .button.secondary { background: var(--sheet); color: var(--ink); border-color: var(--line-strong); }
button.secondary:hover, .button.secondary:hover { background: var(--ground); }
button.small, .button.small { padding: .35rem .7rem; min-height: 32px; font-size: .88rem; }
button.link { background: none; color: var(--accent); padding: 0; min-height: 0; border: 0; }
button.link:hover { background: none; text-decoration: underline; }
button.big { width: 100%; padding: .85rem 1rem; font-size: 1.05rem; }
button[disabled] { opacity: .5; cursor: not-allowed; }
form.inline { display: inline; }
.actions { white-space: nowrap; }
.actions > * + * { margin-left: .4rem; }

/* Quick list layout */
.ql { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 1.25rem; align-items: start; }
.ql-head { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.ql-head h1 { margin: 0; }
.save-state { font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.save-state.saving { color: var(--warn); }
.save-state.saved { color: var(--ok); }
.ql-main { min-width: 0; }
/* The price panel scrolls with the page (no scrollbar of its own). It sticks by its top when it
   fits the window, and by its bottom when it is taller, so the List button stays reachable.
   --side-h is the panel's height, kept current by quicklist.js. */
.ql-side { position: sticky; align-self: start; min-width: 0; top: min(4.2rem, calc(100vh - var(--side-h, 0px) - var(--foot-h, 0px) - 1rem)); }
@supports (height: 100dvh) { .ql-side { top: min(4.2rem, calc(100dvh - var(--side-h, 0px) - var(--foot-h, 0px) - 1rem)); } }
.banner { grid-column: 1 / -1; border-radius: var(--r-lg); padding: .9rem 1.1rem; margin: 0; }
.banner.ok { background: var(--ok-bg); border: 1px solid #b6dcc4; }
.banner.bad { background: var(--bad-bg); border: 1px solid #efc3bf; color: var(--bad); padding-left: 2rem; }
.banner.bad li { margin: .15rem 0; }
.step { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.1rem 1.25rem 1rem; margin: 0 0 1rem; }
.step-n { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--ink); color: #fff; font-size: .8rem; font-weight: 600; }
.dropzone { display: block; position: relative; border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg); padding: 1.1rem; background: var(--ground); cursor: pointer; font-weight: 400; }
.dropzone:hover { border-color: var(--accent); background: var(--tint); }
.dropzone input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } /* covers the whole target so drops land on the input */
.dropzone-text { color: var(--muted); font-size: .92rem; }
.dropzone-text strong { color: var(--accent); }
.thumbs { display: flex; gap: .55rem; flex-wrap: wrap; margin-top: .8rem; }
.thumb { position: relative; width: 96px; height: 96px; }
.thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r); border: 1px solid var(--line); display: block; }
.thumb.main img { outline: 2px solid var(--accent); outline-offset: 1px; }
.thumb .main-tag { position: absolute; left: 4px; bottom: 4px; background: var(--accent); color: #fff; font-size: .68rem; padding: 1px 6px; border-radius: 3px; }
.thumb .remove { position: absolute; top: -8px; right: -8px; width: 28px; height: 28px; padding: 0; min-height: 0; border-radius: 50%; background: var(--ink); color: #fff; font-size: 1rem; line-height: 1; }
.thumb.uploading img { opacity: .45; }
.suggest { border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--sheet); max-height: 260px; overflow: auto; margin-top: .3rem; }
.suggest button { display: block; width: 100%; text-align: left; background: none; color: var(--ink); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: .55rem .7rem; font-weight: 400; min-height: 0; }
.suggest button:last-child { border-bottom: 0; }
.suggest button:hover { background: var(--tint); }
.chosen:not(:empty) { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; color: var(--ink); background: var(--tint); border: 1px solid #c9d7fb; border-radius: var(--r); padding: .5rem .7rem; font-size: .9rem; }
.chosen .chip-label { color: var(--muted); }
.chosen button.link { margin-left: auto; }
.aspect-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .6rem .8rem; margin-bottom: .6rem; }

/* The ticket: a shipping-label shaped summary that fills in as you type */
.ticket { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.1rem 1.25rem 1.25rem; overflow: hidden; overflow: clip; min-width: 0; }
/* The button pins to the bottom of the screen while the panel is in view (clip, not hidden,
   on .ticket so this can stick to the window). */
/* The List button lives in a bar fixed to the bottom of the window, always in view.
   --foot-h (set by quicklist.js) keeps page content, the price panel and the toast clear of it. */
.ticket-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--sheet); border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(20, 24, 29, .08); padding: .6rem 1.25rem calc(.6rem + env(safe-area-inset-bottom, 0px)); }
.ticket-foot-inner { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: .5rem 1rem; flex-wrap: wrap; }
.ticket-foot #missing, .ticket-foot #busy { flex: 1 1 14rem; margin: 0; text-align: right; font-size: .88rem; }
.ticket-foot #missing:empty { display: none; }
.ticket-foot button.big { width: auto; min-width: 15rem; flex: 0 0 auto; }
@media (max-width: 560px) {
  .ticket-foot { padding-left: 1rem; padding-right: 1rem; }
  .ticket-foot #missing, .ticket-foot #busy { flex-basis: 100%; text-align: left; }
  .ticket-foot button.big { width: 100%; min-width: 0; }
}
body { padding-bottom: var(--foot-h, 0px); }
.ticket-tear { height: 0; border-top: 2px dashed var(--line-strong); margin: 1rem -1.25rem .9rem; position: relative; }
.ticket-tear::before, .ticket-tear::after { content: ""; position: absolute; top: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--ground); border: 1px solid var(--line); }
.ticket-tear::before { left: -9px; } .ticket-tear::after { right: -9px; }
.summary { margin: 0 0 1rem; display: grid; gap: .35rem; }
.summary div { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; min-width: 0; }
.summary dt { color: var(--muted); }
.summary dd { margin: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.summary dt { flex: 0 0 auto; }
.summary .total { border-top: 1px solid var(--line); padding-top: .5rem; margin-top: .2rem; }
.missing:not(:empty) { color: var(--warn); margin: 0 0 .6rem; }
.summary .total dd { font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* Lists and tables */
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { padding: .35rem 0; }
.checklist li.done { color: var(--ok); }
.checklist li.todo { color: var(--bad); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .82rem; color: var(--muted); font-weight: 500; }
table.policies input[type=text] { min-height: 36px; padding: .4rem .6rem; }
tr.status-live td:nth-child(5) { color: var(--ok); }
tr.status-failed td:nth-child(5) { color: var(--bad); }
tr.bad td { background: #fff7f6; }
dt { font-weight: 600; margin-top: .6rem; }
dd { margin: .2rem 0 0; }
pre.out { background: #f4f6f8; border: 1px solid var(--line); border-radius: var(--r); padding: .7rem; max-height: 420px; overflow: auto; font-size: .8rem; white-space: pre-wrap; }
input.short { display: inline-block; width: 5.5em; padding: .3rem .4rem; min-height: 0; margin: 0 .15rem; }

@media (max-width: 700px) {
  .top { flex-wrap: wrap; }
  .menu-toggle { display: flex; }
  .top nav { display: none; flex-direction: column; align-items: stretch; width: 100%; gap: 0; padding-top: .6rem; border-top: 1px solid var(--line); margin-top: .6rem; }
  .top nav.open { display: flex; }
  .top nav a, .top nav form.inline { display: block; padding: .7rem .4rem; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .top nav a:last-of-type { border-bottom: 0; }
  .top nav form.inline button.link { padding: 0; font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .menu-toggle span, .value-display::after { transition: none; } }
@media (max-width: 960px) {
  .ql { grid-template-columns: minmax(0, 1fr); }
  main { padding-left: .9rem; padding-right: .9rem; }
  .step, .ticket { padding-left: .9rem; padding-right: .9rem; }
  .ticket-tear { margin-left: -.9rem; margin-right: -.9rem; }
  .label-row { flex-wrap: wrap; }
  .ql-side { position: static; }
  .grid4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  main { padding-bottom: 2rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .save-state { transition: color .25s; }
}

/* UPC scan and own-inventory panels */
.with-button { display: flex; gap: .5rem; align-items: stretch; min-width: 0; }
.with-button input, .with-button .value-display { flex: 1 1 0; min-width: 0; }
.with-button button { flex: 0 0 auto; }
button.icon { width: 44px; padding: 0; justify-content: center; }
button.icon svg { display: block; }
.mine { margin-top: .6rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--sheet); font-size: .9rem; }
.mine .mine-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .5rem .7rem; border-bottom: 1px solid var(--line); font-weight: 500; }
.mine .mine-head.listed { color: var(--warn); }
.mine .mine-head.clear { color: var(--ok); border-bottom: 0; }
.mine ul { list-style: none; margin: 0; padding: 0; }
.mine li { border-bottom: 1px solid var(--line); }
.mine .mine-row { display: flex; align-items: center; gap: .6rem; padding: .45rem .7rem; color: inherit; text-decoration: none; }
.mine a.mine-row:hover .t, .mine a.mine-row:focus-visible .t { text-decoration: underline; }
.mine li:last-child { border-bottom: 0; }
.mine img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); flex: 0 0 auto; }
.mine .t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mine .p { font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.scanner { position: fixed; inset: 0; background: rgba(20, 24, 29, .92); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.scanner-box { width: min(560px, 100%); background: #000; border-radius: var(--r-lg); overflow: hidden; text-align: center; }
.scanner-box video { width: 100%; max-height: 70vh; display: block; background: #000; }
.scanner-status { color: #fff; margin: .6rem 0; font-size: .95rem; }
.scanner-box button { margin: 0 0 .8rem; }
.scanner-view { overflow: hidden; background: #000; }
.scanner-view video { transform-origin: center; transition: transform .15s ease; cursor: pointer; }
.scanner-controls { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .6rem; padding: .7rem .7rem 0; }
.scanner-zoom { display: inline-flex; border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; overflow: hidden; }
.scanner-box .scanner-zoom button { margin: 0; min-height: 40px; min-width: 52px; padding: .3rem .8rem; border: 0; border-radius: 0; background: transparent; color: #fff; font-variant-numeric: tabular-nums; }
.scanner-box .scanner-zoom button[aria-pressed="true"] { background: #fff; color: #111; }
.scanner-box .scanner-focus { margin: 0; min-height: 40px; background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; }
.scanner-box .scanner-focus:hover, .scanner-box .scanner-zoom button:hover { background: rgba(255, 255, 255, .15); }
.scanner-box .scanner-zoom button[aria-pressed="true"]:hover { background: #fff; }
.scanner-tip { color: #d6dae0; font-size: .85rem; line-height: 1.45; margin: 0 1rem .8rem; }
.scanner-tip strong { color: #fff; }
.scanner-box .scanner-tip-ok { margin: 0 0 0 .3rem; min-height: 30px; padding: .15rem .6rem; font-size: .8rem; background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .4); }
@media (prefers-reduced-motion: reduce) { .scanner-view video { transition: none; } }

/* Photo choices gathered from listings for the scanned UPC */
.choices { margin-top: .6rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--sheet); padding: .6rem .7rem; }
.choices h4 { margin: .2rem 0 .4rem; font-size: .85rem; font-weight: 600; }
.choices h4 small { color: var(--muted); font-weight: 400; }
.choices .strip { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.choices button.pick { padding: 0; border: 2px solid transparent; border-radius: var(--r); background: none; width: 84px; height: 84px; min-height: 0; overflow: hidden; position: relative; }
.choices button.pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.choices button.pick:hover, .choices button.pick:focus-visible { border-color: var(--accent); }
.choices button.pick.added { border-color: var(--ok); }
.choices button.pick.added::after { content: "Added"; position: absolute; left: 0; right: 0; bottom: 0; background: var(--ok); color: #fff; font-size: .7rem; padding: 1px 0; }
.choices button.pick.busy { opacity: .5; }

/* UPC / model toggle */
.label-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .3rem; }
.label-row label { margin: 0; }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px; margin: 0; gap: 2px; }
.seg label { margin: 0; font-size: .82rem; font-weight: 500; padding: .2rem .7rem; border-radius: 999px; cursor: pointer; color: var(--muted); display: flex; align-items: center; gap: .3rem; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label:has(input:checked) { background: var(--ink); color: #fff; }
.seg label:has(input:focus-visible) { box-shadow: var(--focus); }

/* Other sellers' asking prices by condition */
.prices { margin-top: .6rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--sheet); padding: .5rem .7rem; font-size: .9rem; }
.prices .prices-head { font-weight: 500; margin-bottom: .3rem; }
.prices button.prices-head { display: block; width: auto; min-height: 0; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 500; text-align: left; cursor: pointer; }
.prices button.prices-head:hover .hint-inline, .prices button.prices-head:focus-visible .hint-inline { text-decoration: underline; }
.prices .hint-inline { font-weight: 400; color: var(--accent-ink); font-size: .85rem; }
.prices { overflow-x: auto; }
.prices table { width: auto; }
.prices th, .prices td { padding: .25rem .6rem .25rem 0; border: 0; font-variant-numeric: tabular-nums; }
.prices th { font-weight: 400; color: var(--muted); }
.prices td.median { font-weight: 600; }
.prices .none { color: var(--muted); }

/* Loaded values collapse to text; click to edit */
.field.collapsed > input, .field.collapsed > select, .field.collapsed > textarea, .field.collapsed > .money, .field.collapsed > .with-button > input { display: none; }
/* A loaded value is shown as plain text, not a box; the pencil appears on hover or focus. */
.value-display { display: none; width: 100%; text-align: left; background: none; color: var(--ink); border: 0; border-radius: var(--r); padding: .15rem 1.6rem .15rem 0; margin: 0; font: inherit; font-size: 1rem; font-weight: 500; line-height: 1.4; min-height: 0; cursor: text; white-space: pre-wrap; overflow-wrap: anywhere; position: relative; }
.field.collapsed .value-display { display: block; }
.value-display::after { content: "✎"; position: absolute; right: .2rem; top: .1rem; color: var(--muted); opacity: 0; transition: opacity .15s; }
.value-display:hover::after, .value-display:focus-visible::after { opacity: 1; }
.value-display:hover { background: var(--ground); box-shadow: 0 0 0 4px var(--ground); }
.value-display:focus-visible { outline: none; box-shadow: var(--focus); }
.field.collapsed { margin-bottom: .7rem; }
.field.collapsed > label { font-size: .78rem; color: var(--muted); margin-bottom: 0; }
.value-display.muted-value { color: var(--muted); }
.with-button.has-display { align-items: stretch; }

/* Where a value came from: gray = an eBay listing, green = the owner */
:root { --from-listing: #4b5563; --from-mine: #14532d; }
input[data-origin="listing"], textarea[data-origin="listing"], select[data-origin="listing"], .value-display[data-origin="listing"], .chosen[data-origin="listing"] strong { color: var(--from-listing); }
input[data-origin="mine"], textarea[data-origin="mine"], select[data-origin="mine"], .value-display[data-origin="mine"], .chosen[data-origin="mine"] strong { color: var(--from-mine); }
.origin-legend { font-size: .8rem; color: var(--muted); }
.origin-legend .sw { display: inline-block; width: .7em; height: .7em; border-radius: 2px; vertical-align: -1px; margin: 0 .25em 0 .6em; }
.origin-legend .sw.listing { background: var(--from-listing); }
.origin-legend .sw.mine { background: var(--from-mine); }

/* Compact condition select; collapsed dropdown text */
#condition { width: auto; min-width: 11rem; max-width: 100%; }
.field.collapsed > select { display: none; }

.prices .sold-line { margin: 0 0 .5rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); line-height: 1.5; font-size: .85rem; }
.prices .sold-line a { color: var(--ink); }

/* Match picker */
.picker { position: fixed; inset: 0; background: rgba(20, 24, 29, .55); z-index: 40; display: flex; align-items: flex-start; justify-content: center; padding: 4vh 1rem; overflow-y: auto; }
.picker-box { width: min(760px, 100%); background: var(--sheet); border-radius: var(--r-lg); padding: 1rem 1.1rem 1.1rem; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
.picker-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.picker-head h2 { margin: 0; }
.picker-list { display: grid; gap: .5rem; margin-top: .6rem; }
.cand { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: .7rem; align-items: center; text-align: left; width: 100%; padding: .55rem; border: 1.5px solid var(--line); border-radius: var(--r-lg); background: var(--sheet); color: var(--ink); font: inherit; font-weight: 400; cursor: pointer; min-height: 0; }
.cand:hover, .cand:focus-visible { border-color: var(--accent); background: var(--tint); }
.cand.best { border-color: var(--ok); }
.cand img, .cand .noimg { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r); border: 1px solid var(--line); background: var(--ground); }
.cand .cand-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cand .cand-meta { color: var(--muted); font-size: .85rem; margin-top: .15rem; display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; }
.cand .badge { display: inline-block; font-size: .72rem; font-weight: 600; padding: 1px 6px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); border: 1px solid #b6dcc4; }
.cand .badge.count { background: var(--ground); color: var(--muted); border-color: var(--line); font-variant-numeric: tabular-nums; }
.cand .badge.count.most { background: #fff4d6; color: #7a5200; border-color: #f0d692; }
.cand .badge.best-badge { background: var(--tint); color: var(--accent-ink); border-color: #c9d7fb; }
.cand .cand-ids { color: var(--ink); font-size: .85rem; margin-top: .2rem; display: flex; flex-wrap: wrap; gap: .2rem .8rem; font-variant-numeric: tabular-nums; }
.cand .cand-ids .id { font-weight: 700; }
.cand .cand-ids .id-value { color: #d9700b; font-weight: 700; }
.cand .cand-ids .hit .id-value { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }
.cand .cand-price > div:first-child { font-weight: 600; }
.cand .cand-ship, .cand .cand-total { font-size: .8rem; font-weight: 400; color: var(--muted); }
.cand .cand-ship.free { color: var(--ok); }
.cand .cand-price { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
@media (max-width: 520px) { .cand { grid-template-columns: 56px minmax(0, 1fr); } .cand .cand-ids { color: var(--ink); font-size: .85rem; margin-top: .2rem; display: flex; flex-wrap: wrap; gap: .2rem .8rem; font-variant-numeric: tabular-nums; }
.cand .cand-ids .id { font-weight: 700; }
.cand .cand-ids .id-value { color: #d9700b; font-weight: 700; }
.cand .cand-ids .hit .id-value { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }
.cand .cand-price > div:first-child { font-weight: 600; }
.cand .cand-ship, .cand .cand-total { font-size: .8rem; font-weight: 400; color: var(--muted); }
.cand .cand-ship.free { color: var(--ok); }
.cand .cand-price { grid-column: 2; } .cand img, .cand .noimg { width: 56px; height: 56px; } }
.prices .sold-line:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

/* Photos: direct camera button on touch devices, and drag-to-reorder thumbnails */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; }
.camera-button { display: none; align-items: center; gap: .45rem; margin-top: .6rem; cursor: pointer; }
@media (pointer: coarse) { .camera-button { display: inline-flex; } }
#photo-preview .thumb[data-url] { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: transform .12s ease; }
#photo-preview .thumb[data-url]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r); }
#photo-preview .thumb.dragging { cursor: grabbing; opacity: .75; transform: scale(1.08); z-index: 2; }
#photo-preview .thumb.dragging img { box-shadow: 0 8px 20px rgba(0, 0, 0, .3); }
@media (prefers-reduced-motion: reduce) { #photo-preview .thumb[data-url] { transition: none; } }

/* View Matched Listings button, collapsed photo group, duplicate-listing toast */
.view-matches { margin-top: .5rem; }
.choices details.choice-group { margin: .2rem 0 .3rem; }
.choices details.choice-group summary { cursor: pointer; font-size: .85rem; font-weight: 600; padding: .2rem 0; }
.choices details.choice-group[open] summary { margin-bottom: .4rem; }
.ticket .prices { margin: 0 0 .9rem; }
.dup-toast { position: fixed; left: 50%; bottom: calc(var(--foot-h, 0px) + 1rem); transform: translateX(-50%); width: min(560px, calc(100% - 2rem)); z-index: 60; display: flex; align-items: flex-start; gap: .8rem; padding: .85rem 1rem; background: var(--bad); color: #fff; border-radius: var(--r-lg); box-shadow: 0 12px 32px rgba(0, 0, 0, .3); animation: dup-toast-in .2s ease-out; }
.dup-toast-body { flex: 1; min-width: 0; line-height: 1.45; }
.dup-toast ul { margin: .35rem 0 0; padding-left: 1.1rem; }
.dup-toast a { color: #fff; text-decoration: underline; overflow-wrap: anywhere; }
.dup-toast button { flex: none; background: #fff; color: var(--bad); border: 0; }
.dup-toast button:hover { background: #fde8e6; }
@keyframes dup-toast-in { from { opacity: 0; transform: translate(-50%, 1rem); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .dup-toast { animation: none; } }

/* Shipping switch confirmation (reuses the picker overlay) */
.ship-confirm { align-items: center; z-index: 45; }
.confirm-box { width: min(440px, 100%); }
.confirm-box h2 { margin: 0 0 .4rem; }
.confirm-box p { margin: 0 0 1rem; line-height: 1.45; }
.confirm-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* Instant suggestions under an item specific */
.field.suggesting { position: relative; z-index: 26; }
.aspect-suggest { position: absolute; left: 0; right: 0; top: 100%; margin-top: 2px; z-index: 26; max-height: 264px; overflow-y: auto; background: var(--sheet); border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: 0 10px 24px rgba(20, 24, 29, .14); }
.aspect-suggest .opt { padding: .5rem .7rem; cursor: pointer; font-size: .92rem; line-height: 1.3; }
.aspect-suggest .opt + .opt { border-top: 1px solid var(--line); }
.aspect-suggest .opt:hover, .aspect-suggest .opt[aria-selected="true"] { background: var(--tint); }
.aspect-suggest mark { background: none; color: inherit; font-weight: 700; }