/* Listings (the Listings mockup): one panel whose tab row is the page's header (the tabs, the marketplace chips,
   Sync stock now), the offers table under it, and the 360 px side panel at the right that maps the selected offer
   to its item. The filters and the sync queue are drawers under the tab row, closed unless a filter is on.
   Page-only classes; the shell, tokens and component classes come from app.css. Nothing moves under the pointer. */

/* ── the two columns: the table, the side panel (sticky under the top bar) ── */
.lst { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
@media (min-width: 1700px) { .lst { grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; } }
.lst--one { grid-template-columns: minmax(0, 1fr); }
.lst__main { min-width: 0; display: grid; gap: 16px; }
.lst__side { position: sticky; top: calc(var(--top-h) + 16px); }
@media (max-width: 1100px) { .lst { grid-template-columns: minmax(0, 1fr); } .lst__side { position: static; } }

/* the tab row is the panel's first row: tabs at the left, the chips, the drawer toggles and the buttons at the right */
.lst__panel > .toolbar { border: 0; border-radius: 0; border-bottom: 1px solid var(--line); background: transparent; box-shadow: none; }
.lst__panel .ftab__dot { display: none; }
.lst__panel .ftab__n { color: var(--ink-3); }
.lst__panel .ftab.is-active .ftab__n { background: var(--panel-2); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }
.lst__panel .ftab__n--attn, .lst__panel .ftab.is-active .ftab__n--attn { background: var(--attn); color: var(--on-attn); box-shadow: none; }
.lst__toggle { gap: 6px; }
.lst__toggle.is-on { background: var(--panel-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.lst__toggle-n { font: 600 11px/18px var(--mono); padding: 0 6px; border-radius: 9px; background: var(--accent-bg); color: var(--accent); }

/* the drawers: the filters (with the view switch and the bulk action on every offer shown), the sync queue */
.lst__drawer { border-bottom: 1px solid var(--line); background: color-mix(in oklab, var(--panel-2) 55%, transparent); }
.lst__drawer > .filterbar { padding: 10px 14px; border-bottom: 0; }
.lst__drawer > .filterbar + .filterbar { border-top: 1px dashed var(--line-2); }
.lst__drawer .filterbar .input, .lst__drawer .filterbar select, .lst__drawer .filterbar .dd { min-width: 110px; }
.lst__check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.lst__view { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--panel); }
.lst__view a { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 7px; color: var(--ink-2); font-size: 12px; font-weight: 500; white-space: nowrap; }
.lst__view a:hover { color: var(--ink); text-decoration: none; }
.lst__view a.is-active { background: var(--panel-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
/* the bulk bar: shows above the table once an offer is ticked; its boxes are the table's first column */
.lst__bulk { padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--accent-bg); }
.lst__bulk-n { font: 600 12.5px/1 var(--mono); color: var(--ink); white-space: nowrap; }
.lst__bulk-note { font-size: 12px; }
.lst__bulk .input, .lst__bulk select, .lst__bulk .dd { width: auto; min-width: 120px; }
.lst__bulk select[name=action], .lst__bulk .dd { max-width: 100%; }
.lst__queue { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; }
@media (max-width: 1100px) { .lst__queue { grid-template-columns: minmax(0, 1fr); } }
.lst__qpart { min-width: 0; }
.lst__qhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 18px 6px; }
.lst__qhead--sub { padding-top: 8px; border-top: 1px dashed var(--line-2); }
.lst__qtitle { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.lst__qhead .inline-form { margin-left: auto; }
.lst__queue .table td { vertical-align: top; }
.lst__queue .mchip strong { color: var(--ink); }
.lst__limits { font-size: 11.5px; color: var(--ink-3); max-width: 300px; white-space: normal; }
.lst__sub { font-size: 12px; }
.lst__botcell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lst__botcell .bavatar { margin-right: 4px; }
.lst__botname { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.lst__botname a { color: var(--ink); font-weight: 500; }
.lst__botname .faint { font-size: 11.5px; }
.lst__cover a { font-weight: 500; }
.lst__missing { display: block; font-size: 12px; color: var(--warn); }

/* ── the table: the mockup's six columns, dashed rules, the whole title, the selected row on the accent tint ── */
.lst__table { min-width: 640px; }
.lst__table th, .lst__table td { padding: 10px 10px; white-space: nowrap; }
.panel .lst__table th:first-child, .panel .lst__table td:first-child { padding-left: 16px; }
.panel .lst__table th:last-child, .panel .lst__table td:last-child { padding-right: 16px; }
@media (min-width: 1700px) { .lst__table th, .lst__table td { padding: 10px 16px; } }
.lst__table tr.is-sel td { background: var(--accent-bg); }
.lst__table tr.is-sel:hover td { background: var(--accent-bg); }
.lst__table .mono-cell { white-space: nowrap; font-size: 12.5px; }
.panel .lst__table th.lst__pick, .panel .lst__table td.lst__pick { width: 34px; padding-right: 0; }
.lst__pick input { width: 15px; height: 15px; margin: 0; vertical-align: middle; accent-color: var(--accent); cursor: pointer; }
.offer { display: flex; align-items: center; gap: 10px; min-width: 0; }
.offer .mlogo { width: 20px; height: 20px; border-radius: 5px; vertical-align: 0; flex: none; }
.offer__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.offer__title { font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
/* beside the side panel on a 1440 screen the title keeps 210 px (the whole title is its tooltip); 260 px from 1700 */
@media (max-width: 1699px) { .lst:not(.lst--one) .offer__title { max-width: 200px; } .lst:not(.lst--one) .dl__names { max-width: 120px; } }
.offer__title:hover { color: var(--accent); text-decoration: none; }
.offer__id { font: 11.5px/1.3 var(--mono); color: var(--ink-3); }
.dls { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dl { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; color: var(--ink); min-width: 0; max-width: 100%; }
.dl .iname { min-width: 0; }
.dl__names { display: inline-block; vertical-align: middle; min-width: 0; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 20px; }
.dl__names .iname { vertical-align: middle; }
.dl__names .dl__qty, .dl__names .dl__plus { margin-left: 5px; vertical-align: middle; }
.dl__names .dl__plus + .iname { margin-left: 5px; }
.dl__img { width: 30px; height: 30px; flex: none; border-radius: 8px; object-fit: cover; display: block; background: var(--panel-2); border: 1px solid var(--line); }
.dl__img--empty { display: grid; place-items: center; color: var(--ink-3); background: repeating-linear-gradient(135deg, var(--stripe) 0 5px, var(--panel-2) 5px 10px); }
.dl__qty, .dl__plus { font: 12px/1 var(--mono); color: var(--ink-3); }
.unmapped-pick { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; font-size: 12px; border: 1px dashed var(--attn); border-radius: 8px; color: var(--attn); font-weight: 500; white-space: nowrap; }
.unmapped-pick:hover { background: var(--attn-bg); text-decoration: none; }
.lst__stock { font-weight: 600; color: var(--ink); }
.lst__stock--warn { color: var(--warn); }
/* the Sync cell: the chip with the same 6 px dot in every state, the time of the last push beside it in mono */
.lst__sync { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.lst__sync .pill__g { display: none; }
.lst__sync .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.lst__rel { font: 11px/1 var(--mono); color: var(--ink-3); white-space: nowrap; }
.lst__rel:empty { display: none; }
.lst__empty td { padding: 0; }
.lst__empty .empty { border: 0; border-radius: 0; }

/* ── the side panel: the offer's head, the item tiles (a label over a hidden checkbox), the quantities, the text ── */
.offer-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); min-width: 0; }
.offer-head .mlogo { width: 22px; height: 22px; border-radius: 6px; vertical-align: 0; flex: none; }
.offer-head__text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.offer-head__title { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.offer-head__title:hover { color: var(--accent); text-decoration: none; }
.offer-head__meta { font: 11.5px/1.3 var(--mono); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.offer-body { padding: 14px 18px; display: flex; flex-direction: column; gap: 14px; }
.offer-body > .banner { padding: 10px 12px; }
.offer-form { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.offer-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.offer-label { font-size: 12px; color: var(--ink-3); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.itile__img { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; display: block; background: var(--panel-2); border: 1px solid var(--line); }
.itile__img--empty { display: grid; place-items: center; color: var(--ink-3); background: repeating-linear-gradient(135deg, var(--stripe) 0 5px, var(--panel-2) 5px 10px); }
.itile__name { font-size: 11px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-align: center; }
.itile__name .iname { gap: 3px; max-width: 100%; }
.itile__name .iname__text { overflow: hidden; text-overflow: ellipsis; }
.offer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* "Which item does this offer sell?": one item box with pictures, per sale, Save; "+ another item" for a bundle */
.linkbox { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.linkbox__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.linkbox__auto { font-size: 12px; color: var(--ink-2); padding: 2px 8px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); }
.linkform { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.linkrow { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.linkrow__item { flex: 1 1 200px; min-width: 0; }
.linkrow__qty { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); height: 32px; white-space: nowrap; }
.linkrow__qty .input { width: 60px; text-align: center; }
.linkpick__chosen { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 32px; }
.linkpick__name { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linkpick__game { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.linkpick__pic { width: 32px; height: 32px; flex: none; object-fit: contain; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line); }
.linkpick__pic--empty { display: grid; place-items: center; color: var(--ink-3); }
.linkpick__list { list-style: none; margin: 6px 0 0; padding: 4px; max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); }
.linkpick__opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 5px 8px; border: 0; border-radius: var(--r-xs); background: transparent; text-align: left; cursor: pointer; color: var(--ink); }
.linkpick__opt:hover, .linkpick__opt:focus-visible { background: var(--panel-2); }
.linkpick__none { padding: 6px 8px; font-size: 12px; color: var(--ink-3); }
.linkform__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dl__auto { display: block; margin-top: 2px; font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.offer-value { min-height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 10px; font: 500 12.5px/1 var(--mono); color: var(--ink); white-space: nowrap; overflow: hidden; }
.offer-value__hint { margin-left: auto; font: 11px/1 var(--sans); color: var(--ink-3); }
/* Units per sale: one line per ticked item (its name, × and the number), the box growing only for a bundle */
.upsale__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 500 11.5px/1 var(--sans); color: var(--ink-2); }
.upsale__name .iname { max-width: 100%; }
.upsale__name .iname__text { overflow: hidden; text-overflow: ellipsis; }
.upsale__x { color: var(--ink-3); font-size: 11px; }
.offer-preview { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font-size: 12.5px; color: var(--ink-2); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow: auto; }
.offer-preview--empty { white-space: normal; color: var(--ink-3); }
.offer-actions { display: flex; gap: 8px; }
.offer-actions .btn--primary { flex: 1; height: 36px; }
.offer-actions .inline-form .btn { height: 36px; }

/* ── By item: one panel per stock pool with the item's picture ── */
.lst__group .panel__head { gap: 12px; }
.lst__group-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.lst__group-text .panel__title a { color: var(--ink); }
.lst__group-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }

/* ── the offer's own page: head strip and the three panels ── */
.lst__strip { margin-top: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.lst__strip .sstrip { border-top: 0; }
.lst__detail .form .btn { justify-self: start; }
.lst__items .dl { padding: 6px 0; border-bottom: 1px dashed var(--line-2); width: 100%; }
.lst__items .dl:last-child { border-bottom: 0; }
.lst__items .dl__name { flex: 1; min-width: 0; }
.lst__items .dl__name a { color: var(--ink); font-weight: 500; }
.lst__gallery .thumb { width: 120px; height: 68px; }

/* ── the New listing page: the form beside the recent creations and the capability matrix ── */
.lst__new { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
@media (max-width: 1100px) { .lst__new { grid-template-columns: minmax(0, 1fr); } }
.lst__mks { display: flex; flex-wrap: wrap; gap: 8px; }
.lst__mk { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 9px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel); cursor: pointer; font-weight: 500; }
.lst__mk:has(input:checked) { border-color: var(--btn); background: var(--accent-bg); }
.lst__mk:has(input:disabled) { opacity: .6; cursor: not-allowed; }
.lst__mk .mlogo { width: 18px; height: 18px; border-radius: 5px; vertical-align: 0; }
.lst__itemlist { display: flex; flex-direction: column; gap: 2px; max-height: 300px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 6px; }
.lst__itemrow { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 8px; cursor: pointer; min-width: 0; }
.lst__itemrow:hover { background: var(--panel-2); }
.lst__itemrow:has(input:checked) { background: var(--accent-bg); }
.lst__itemrow .dl__name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.25; white-space: nowrap; }
.lst__itemrow .dl__name .iname { min-width: 0; max-width: 100%; }
.lst__itemrow .dl__name .iname__text { overflow: hidden; text-overflow: ellipsis; }
.lst__itemrow .dl__name .faint { font-size: 11px; }
.lst__itemrow .dl__name .gchip .glogo { width: 13px; height: 13px; vertical-align: -3px; }
.lst__itemrow .input { width: 64px; height: 26px; }
.lst__caps td, .lst__caps th { text-align: center; }
.lst__caps td:first-child, .lst__caps th:first-child { text-align: left; }
.lst__caps .mchip { justify-content: center; }

/* ── description templates: the tag and block palettes ── */
.lst__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.lst__block > summary { padding: 10px 18px; }
.lst__block .form { padding: 0 18px 14px; }
.lst__block + .lst__block { border-top: 1px solid var(--line); }

/* ── bulk actions: the per-platform cards and the progress list ── */
.lst__plat { display: flex; flex-direction: column; gap: 8px; }
.lst__plat-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; }

@media (max-width: 760px) {
  .lst__qhead .panel__meta, .lst__group .panel__meta { display: none; }
  .lst__panel > .toolbar { padding: 0 8px; }
  .lst__panel > .toolbar .toolbar__end { margin-left: 0; width: 100%; padding-top: 0; }
  .offer__title { max-width: 200px; }
  .offer-body { padding: 12px 14px; }
  .lst__gallery .thumb { width: 96px; height: 54px; }
}

/* the template editor's crumbs: Listings / Description templates */
.lst-crumbs { display: flex; align-items: center; gap: 6px; }