/* "What each LIVE and video sold" (views/creator-orders.js, docs/prd-creator-sales-step2.md
   Part 2). It reuses the sales section's cards, tags and tables (creator-sales.css), so
   the two read as one panel; this adds the lists, the product split and the status bars.
   Blue means LIVE here, so nothing else in this section is blue.

   One piece of markup serves every width, measured on the section itself. */
.cp-ord { container-type: inline-size; }
.cp-ord > .cp-sec-h { align-items: center; flex-wrap: wrap; gap: 6px 12px; }

.cp-ord-strip { margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 13px; }
.cp-ord-strip.warn {
  border-color: color-mix(in srgb, var(--warn) 55%, var(--border));
  background: color-mix(in srgb, var(--warn) 12%, transparent);
}

.cp-ord-block { margin-bottom: 12px; }
.cp-ord-bh { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 2px 6px; }
.cp-ord-bh h4 { margin: 0; font-size: 13px; font-weight: 600; }
.cp-ord-none { margin: 0; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 10px; font-size: 13px; color: var(--muted); }

/* The lists: the name gets the room, the numbers line up. */
.cp-ord-table, .cp-ord-products { table-layout: fixed; }
/* Eleven columns at full width: a narrower name, tighter cells, headers that may wrap. */
.cp-ord-table th.c-name { width: 22%; }
.cp-ord-table th, .cp-ord-table td { padding-left: 10px; padding-right: 10px; }
.cp-ord-table th.r { white-space: normal; }
.cp-ord-table td, .cp-ord-products td { vertical-align: middle; font-variant-numeric: tabular-nums; }
.cp-ord-table td.num, .cp-ord-products td.num { font-weight: 550; }
.cp-ord-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cp-ord-name > div { display: flex; flex-direction: column; min-width: 0; }
.cp-ord-n { font-weight: 600; }
.cp-ord-thumb {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 5px; font-size: 9.5px; font-weight: 700; letter-spacing: .03em; text-decoration: none;
  background: color-mix(in srgb, var(--tt, var(--tt-other)) 20%, transparent); color: var(--tt, var(--tt-other));
}
.cp-ord-thumb.live { --tt: var(--tt-c0); }
.cp-ord-thumb.video { --tt: var(--tt-c1); }
.cp-ord-thumb svg path { fill: currentColor; }
a.cp-ord-thumb:hover { background: color-mix(in srgb, var(--tt) 35%, transparent); }
a.cp-ord-thumb:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.cp-ord-older {
  display: inline-block; width: fit-content; margin-top: 3px; padding: 0 7px; border-radius: 999px; font-size: 11.5px;
  border: 1px solid color-mix(in srgb, var(--warn) 55%, var(--border)); color: var(--warn);
}
.cp-ord-more { margin-top: 6px; }

/* Every header ranks its list. The arrow keeps its room, so a label never jumps; on the
   right-aligned numbers it sits before the label, so the label stays over its column. */
.cp-ord-sort {
  display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
.cp-ord-table th.r .cp-ord-sort { flex-direction: row-reverse; }
.cp-ord-arrow { display: inline-block; width: 9px; text-align: center; font-size: 12px; line-height: 1; }
.cp-ord-sort:hover, .cp-ord-table th.is-sorted { color: var(--text); }
.cp-ord-sort:hover .cp-ord-arrow:empty::after { content: '↓'; opacity: .45; }
.cp-ord-sort:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 3px; }
.cp-ord-table td.is-sorted { font-weight: 600; }

/* The menu shows only where some columns are hidden; full width, the headers do it. */
.cp-ord-bh { flex-wrap: wrap; }
.cp-ord-rank { display: none; align-items: center; gap: 6px; margin: 0 0 0 auto; font-size: 12px; color: var(--muted); }
.cp-ord-rank select.input { width: auto; margin: 0; padding: 3px 8px; font-size: 12.5px; }

.cp-ord-products th.c-name { width: 32%; }
.cp-ord-products th.c-split { width: 24%; }
.cp-ord-products td.c-name { overflow-wrap: anywhere; }
/* Product names run long: two lines, the whole name on hover. */
.cp-ord-pn { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.cp-ord-products tr.rest td { color: var(--muted); font-weight: 400; }
.cp-ord-products th .cp-sales-key { vertical-align: -1px; }
.cp-ord-mini { display: flex; align-items: center; gap: 10px; }
.cp-ord-mini .cp-sales-split { flex: 1; height: 8px; }
.cp-ord-mini > span { flex: none; width: 76px; font-size: 12.5px; color: var(--muted); }

/* Where the value went: one bar per format, its words under it, so never colour alone. */
.cp-ord-went { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.cp-ord-went .cp-sales-extra { margin: 0; }
.cp-ord-fmt { margin-top: 12px; }
.cp-ord-fmt > .cp-sales-cn { margin-bottom: 6px; font-size: 13px; }
.cp-ord-stack { display: flex; gap: 2px; height: 12px; border-radius: 3px; overflow: hidden; }
.cp-ord-stack span { display: block; height: 100%; }
.cp-ord-stack span, .cp-ord-keys i { background: var(--tt, var(--tt-other)); }
.cp-ord-stack .pending, .cp-ord-keys i.pending { background: color-mix(in srgb, var(--tt, var(--tt-other)) 40%, transparent); }
.cp-ord-stack .cancelled, .cp-ord-keys i.cancelled { background: color-mix(in srgb, var(--bad) 50%, transparent); }
.cp-ord-stack .open, .cp-ord-keys i.open { background: color-mix(in srgb, var(--muted) 35%, transparent); }
.cp-ord-keys { display: flex; flex-wrap: wrap; gap: 3px 14px; margin-top: 6px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.cp-ord-keys > span { display: inline-flex; align-items: center; gap: 6px; }
.cp-ord-keys i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
.cp-ord-keys .k { color: var(--muted); }
.cp-ord-note { margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--border); }

/* Between full width and docked: items, products and cancelled ฿ step out (cancel rate stays). */
@container (max-width: 1100px) {
  .cp-ord-table .c-wide { display: none; }
  .cp-ord-table .c-wide.is-sorted { display: table-cell; }
  .cp-ord-rank { display: inline-flex; }
  .cp-ord-table th.c-name { width: 26%; }
}

/* Docked or in the drawer: the lists keep the name, order value, share and last order. */
@container (max-width: 860px) {
  .cp-ord-table .c-more, .cp-ord-products .c-more { display: none; }
  /* Ranked by a hidden column: it takes Share's place, so there are still four. */
  .cp-ord-table.by-hidden .c-share { display: none; }
  .cp-ord-table .c-more.is-sorted { display: table-cell; }
  .cp-ord-rank { display: inline-flex; }
  .cp-ord-table th.c-name { width: 46%; }
  .cp-ord-products th.c-name { width: 40%; }
  .cp-ord-products th.c-split { width: 30%; }
}
@container (max-width: 620px) {
  .cp-ord-went { grid-template-columns: minmax(0, 1fr); }
  .cp-ord-table th, .cp-ord-table td, .cp-ord-products th, .cp-ord-products td { padding-left: 8px; padding-right: 8px; }
  .cp-ord-table th.r, .cp-ord-products th.r { white-space: normal; }
  .cp-ord-table th.c-name { width: 40%; }
  .cp-ord-name { gap: 8px; }
  .cp-ord-bh { flex-direction: column; gap: 2px; }
  .cp-ord-rank { margin: 4px 0 0; }
  .cp-ord-products .c-split { display: none; }
  .cp-ord-products th.c-name { width: 50%; }
  .cp-ord-thumb { width: 28px; height: 28px; font-size: 8.5px; }
}