/* Resale Listing Kit: layout on top of /assets/base.css tokens. */
[hidden] { display: none !important; }
.flush { margin-top: 0; }
section[id], h2[id] { scroll-margin-top: 12px; }
/* A long unbroken word (a title, a source) wraps instead of pushing the page sideways. */
.wrap p, .wrap dd, .wrap dt, .wrap h2, .wrap h3, .wrap label, .wrap [role="status"], .wrap [role="alert"] { overflow-wrap: anywhere; }
h3 { font-size: 16px; margin: 20px 0 6px; }
h3.flush { margin: 0 0 8px; }
.card .row { margin-bottom: 8px; }
.card p.small { font-size: 13px; }
.card form { margin: 0; }

.alert { background: var(--surface); border: 2px solid var(--warn); color: var(--warn); border-radius: 10px; padding: 10px 12px; margin: 0 0 16px; font-weight: 600; }
.jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.jump a { display: inline-flex; align-items: center; min-height: 32px; padding: 2px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--ink); text-decoration: none; font-size: 14px; }

/* Forms: a label above each control, two columns where the width allows. */
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 12px; margin: 0 0 10px; align-items: end; }
.fgrid > * { min-width: 0; }
.f { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.f.wide { grid-column: 1 / -1; }
.f.end { justify-content: flex-end; }
.f label { font-size: 13px; color: var(--muted); }
.f input, .f select, .f textarea { min-width: 0; max-width: 100%; }
.f input, .f select { min-height: 42px; }
.f textarea { resize: vertical; }
.f.end button { width: 100%; }
#lt-text { margin-bottom: 4px; white-space: pre-wrap; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--warn); outline: 2px solid var(--warn); outline-offset: 0; }
.chk { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 10px; min-height: 32px; }
.chk input[type="checkbox"] { width: 20px; height: 20px; padding: 0; margin: 2px 0 0; flex: none; }
.chk label { font-size: 14px; }
.bundle { border: 1px dashed var(--line); border-radius: 10px; padding: 10px 12px; margin: 0 0 10px; }
.bundle .list { margin: 8px 0; }
.bundle-total { font-size: 17px; margin: 8px 0 0; }

/* Lists: items, bundle parts and the summary share one card layout. */
.list { list-style: none; padding: 0; margin: 12px 0 0; }
.list li { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; align-items: start; }
.list li.undated { display: block; border-style: dashed; font-size: 14px; color: var(--muted); }
.list .t { font-weight: 600; overflow-wrap: anywhere; }
.list .amt { font-weight: 700; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.list .meta, .list .parts { grid-column: 1 / -1; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.list .parts { color: var(--ink); }
.list .pill { margin: 0; justify-self: end; }
.list .acts { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.list .acts button { min-height: 32px; padding: 2px 10px; font-size: 13px; }
.stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; margin: 0; }
.stats > div { min-width: 0; }
.stats dt { font-size: 12px; color: var(--muted); }
.stats dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
@media (min-width: 560px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.neg { color: var(--warn); }
.card p.warn-text { color: var(--warn); font-weight: 600; }
li[data-status="sold"] { box-shadow: inset 4px 0 0 var(--accent); }
li[data-status="kept"] { opacity: 0.92; }
form.sell { grid-column: 1 / -1; margin: 4px 0 0; padding-top: 8px; border-top: 1px solid var(--line); }
form.sell .row { margin: 0; }

/* Headline totals in the summary. */
.totals { margin: 12px 0; padding: 10px 12px; background: var(--chip); border-radius: 10px; }
.totals > div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.totals dt { color: var(--muted); min-width: 0; flex: 1 1 auto; }
.totals dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; white-space: nowrap; flex: none; }
.totals .grand { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 8px; font-size: 18px; font-weight: 700; }
.totals .grand dt { color: var(--ink); }