/* "Sales on CREA-run shops" (views/creator-sales.js, docs/prd-creator-sales-view.md).
   LIVE and video get the same frame everywhere: two matching cards, a stacked bar for
   each week, one row each per shop. They keep the tab's colours (t-c0 / t-c1), and
   words always say the same thing, so it is never colour alone. Blue means LIVE here,
   so controls in this section are neutral.

   One piece of markup serves every width, measured on the section itself: the dock
   and the drawer are narrow, full width isn't. */
.cp-tt-crea { container-type: inline-size; }
.cp-tt-crea > .cp-sec-h { align-items: center; flex-wrap: wrap; }
.cp-tt-hgroup { display: flex; align-items: baseline; gap: 10px; }
.cp-tt-hgroup .cp-note { margin: 0; }
.cp-tt-win { display: inline-flex; }
.cp-tt-win button {
  margin-left: -1px; padding: 4px 11px; border: 1px solid var(--border); background: none;
  color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.cp-tt-win button:first-child { margin-left: 0; border-radius: 8px 0 0 8px; }
.cp-tt-win button:last-child { border-radius: 0 8px 8px 0; }
.cp-tt-win button.on { position: relative; background: var(--text); border-color: var(--text); color: var(--surface); }
.cp-tt-win button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.cp-tt-win button:disabled { opacity: .6; cursor: default; }

/* The answer first. */
.cp-sales-read { margin: 8px 0 10px; font-size: 17px; font-weight: 600; line-height: 1.35; }
.cp-sales-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cp-sales-tag {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px;
  border: 1px solid var(--border); color: var(--text);
}
.cp-sales-tag.up { border-color: color-mix(in srgb, var(--good) 50%, var(--border)); color: var(--good); }
.cp-sales-tag.warn { border-color: color-mix(in srgb, var(--warn) 55%, var(--border)); color: var(--warn); }
.cp-sales-change { font-size: 12px; font-variant-numeric: tabular-nums; }
.cp-sales-change.up { color: var(--good); }
.cp-sales-change.down { color: var(--bad); }
.cp-sales-key { display: inline-block; flex: none; width: 9px; height: 9px; margin-right: 6px; border-radius: 2px; background: var(--tt, var(--tt-other)); }

.cp-sales-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 2fr); gap: 8px; margin-bottom: 8px; }
.cp-sales-box { display: flex; flex-direction: column; min-width: 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; }
.cp-sales-where .cp-tt-tl { margin-bottom: 8px; }
.cp-sales-split { display: flex; gap: 2px; height: 12px; border-radius: 3px; overflow: hidden; }
.cp-sales-split span { display: block; height: 100%; background: var(--tt, var(--tt-other)); }
.cp-sales-splitw { display: flex; justify-content: space-between; gap: 10px; margin-top: 5px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.cp-sales-splitw span { display: inline-flex; align-items: center; }

/* LIVE and video: the same frame, whichever sold more. */
.cp-sales-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.cp-sales-card {
  display: flex; flex-direction: column; min-width: 0; padding: 12px 14px; background: var(--bg);
  border: 1px solid var(--border); border-top: 3px solid var(--tt, var(--tt-other)); border-radius: 10px;
}
.cp-sales-ch { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cp-sales-cn { display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; }
.cp-sales-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 2px; }
.cp-sales-gmv { font-size: 26px; font-weight: 650; line-height: 1.25; font-variant-numeric: tabular-nums; }
.cp-sales-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.cp-sales-stat { display: flex; flex-direction: column; min-width: 0; }
.cp-sales-sv { font-size: 18px; font-weight: 650; line-height: 1.25; font-variant-numeric: tabular-nums; }
.cp-sales-sl { font-size: 12.5px; }
.cp-sales-rows { margin: 10px 0 0; padding-top: 7px; border-top: 1px solid var(--border); font-size: 13px; }
.cp-sales-rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.cp-sales-rows dt { color: var(--muted); }
.cp-sales-rows dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.cp-sales-card.is-empty { border-top-color: var(--border); }
.cp-sales-none { margin: 14px 0 2px; font-size: 15px; font-weight: 600; }
.cp-sales-card .cp-note { margin: 0; }

/* The chart: a stacked bar a week, then that week's posts. Each week is one button
   the height of all three rows, so pointing anywhere in a column reads that week. */
.cp-tt-weeks { margin: 0 0 10px; }
.cp-tt-wkh { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.cp-sales-wkt { display: flex; flex: none; flex-direction: column; gap: 3px; }
.cp-sales-legend { display: inline-flex; gap: 12px; font-size: 12.5px; }
.cp-sales-legend span { display: inline-flex; align-items: center; }
/* Two lines reserved, whatever it says, so the chart below never moves. */
.cp-tt-wkread { min-width: 0; min-height: 36px; font-size: 12.5px; line-height: 18px; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.cp-tt-wkplot { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 8px; row-gap: 4px; margin-top: 10px; }
.cp-sales-wkside, .cp-tt-wkbars > button { display: grid; grid-template-rows: 98px 34px 34px; row-gap: 6px; }
/* The top label sits on the dashed line the tallest bar reaches. */
.cp-tt-wkaxis {
  display: flex; flex-direction: column; justify-content: space-between; height: 114px; margin: -8px 0;
  font-size: 11px; line-height: 16px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums;
}
.cp-sales-lanel { align-self: end; font-size: 11px; line-height: 14px; color: var(--muted); text-align: right; }
.cp-tt-wkbars { display: flex; min-width: 0; }
.cp-tt-wkbars > button {
  flex: 1 1 0; min-width: 0; padding: 0 1px; border: 0; border-radius: 4px; background: none; cursor: pointer;
  color: inherit; font: inherit; transition: background-color .12s;
}
.cp-tt-wkbars > button:hover, .cp-tt-wkbars > button.on, .cp-tt-wkbars > button.sel { background: color-mix(in srgb, var(--muted) 14%, transparent); }
.cp-tt-wkbars > button:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
/* The lines run the whole width: each cell reaches over the button's 1px padding. */
.cp-sales-col {
  display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; margin: 0 -1px; padding: 0 1px;
  border-bottom: 1px solid var(--border);
}
.cp-sales-col.stack { gap: 2px; border-top: 1px dashed color-mix(in srgb, var(--muted) 35%, transparent); }
.cp-sales-col i { display: block; flex: none; background: var(--tt, var(--tt-other)); transition: opacity .12s; }
.cp-sales-col.stack i:first-child { border-radius: 3px 3px 0 0; }
.cp-sales-col.stack i.none { height: 2px; background: color-mix(in srgb, var(--muted) 35%, transparent); }
.cp-sales-col.lane i { border-radius: 2px 2px 0 0; opacity: .7; }
.cp-sales-col em { font-style: normal; font-size: 11px; line-height: 14px; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; transition: opacity .12s; }
/* Pointing at a week or keeping one steps the others back. */
.cp-tt-wkbars:hover > button:not(:hover) :is(i, em), .cp-tt-weeks.has-sel .cp-tt-wkbars > button:not(.sel):not(.on) :is(i, em) { opacity: .4; }
.cp-tt-wkplot .cp-tt-ends { grid-column: 2; }

.cp-tt-scope { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 2px 6px; font-size: 12px; color: var(--muted); }
.cp-tt-scope [data-tt-scope] { color: var(--text); font-variant-numeric: tabular-nums; }

/* The shop table: one row per format, so every number lines up down the page. Each
   row keeps its second line, empty or not, so a moving pointer never changes its height. */
.cp-sales-shops { table-layout: fixed; }
.cp-sales-shops col.w-shop { width: 186px; }
.cp-sales-shops col.w-fmt { width: 84px; }
.cp-sales-shops col.w-gmv { width: 84px; }
.cp-sales-shops col.w-per { width: 136px; }
.cp-sales-shops col.w-post { width: 128px; }
.cp-sales-shops col.w-last { width: 112px; }
.cp-sales-shops col.w-rank { width: 124px; }
.cp-sales-shops tbody + tbody tr:first-child > * { border-top-width: 2px; }
.cp-sales-shops tr[data-fmt="video"] td { border-top-color: color-mix(in srgb, var(--border) 45%, transparent); }
.cp-sales-shops td, .cp-sales-shops th.c-shop { vertical-align: middle; transition: opacity .12s; }
.cp-sales-shops th.c-shop {
  padding: 9px 12px; background: none; border-top: 1px solid var(--border); color: var(--text);
  font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; text-align: left; vertical-align: top; overflow-wrap: anywhere;
}
.cp-sales-shops tr.dim td { opacity: .4; }
.cp-sales-shops tbody.dim th.c-shop { opacity: .4; }
.cp-sales-shops td.num { font-variant-numeric: tabular-nums; font-weight: 550; }
.cp-sales-shops .c-fmt { white-space: nowrap; }
.cp-sales-shops .c-post > span, .cp-sales-shops .c-last > span, .cp-sales-shops .c-rank > span { display: block; }
.cp-sales-top { min-height: 18px; font-size: 12px; color: var(--muted); }
.cp-sales-top.good { color: var(--good); }
.cp-sales-shops [data-f="postedsub"] { min-height: 18px; }
.cp-sales-shops [data-f="lastflag"]:empty { display: none; }
.cp-tt-shop { font-weight: 550; }
.cp-sales-shopn { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cp-sales-shopn b { color: var(--text); font-weight: 600; }
.cp-sales-track { display: block; height: 5px; margin-top: 4px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--muted) 18%, transparent); }
.cp-sales-track span { display: block; height: 100%; border-radius: 3px; background: var(--muted); }
.cp-tt-cell { display: flex; align-items: center; gap: 10px; }
.cp-sales-spark { flex: none; }
.cp-sales-spark rect { fill: var(--tt, var(--tt-other)); }
.cp-sales-spark rect.none { fill: color-mix(in srgb, var(--muted) 28%, transparent); }
.cp-sales-flag { font-size: 12px; color: var(--warn); }
.cp-tt-quiet { margin-top: 8px; }
.cp-sales-small { margin-top: 2px; font-size: 12px; }

/* The two extras: the campaign, and the share of TikTok sales. */
.cp-sales-extra { margin: 0 0 10px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 10px; }
.cp-tt-quiet + .cp-sales-extra, .cp-tt-tablebox + .cp-sales-extra { margin-top: 10px; }
.cp-sales-extra h4 { margin: 0; font-size: 13px; font-weight: 600; }
.cp-sales-extra > .cp-note { margin: 6px 0 0; }
.cp-sales-camp { background: color-mix(in srgb, var(--text) 4%, transparent); }
.cp-sales-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(84px, auto) minmax(84px, auto); gap: 3px 12px; margin-top: 8px; font-size: 13px; font-variant-numeric: tabular-nums; }
.cp-sales-grid .k { color: var(--muted); }
.cp-sales-grid .r { display: inline-flex; align-items: center; justify-content: flex-end; text-align: right; }
/* "From this campaign's posts" (Step 2 Part 3b): order value from the posts, under the card's own rows. */
.cp-sales-posts { margin-top: 10px; padding-top: 6px; border-top: 1px dashed var(--border); }
.cp-sales-posts .cp-note { margin: 6px 0 0; }
.cp-sales-rows > div.strong { font-weight: 600; }
.cp-sales-rows > div.strong dt { color: var(--text); }
.cp-sales-shareh { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; font-variant-numeric: tabular-nums; }
.cp-sales-shareh > span:first-child { display: inline-flex; align-items: center; }
.cp-sales-shareh b { font-weight: 650; }
.cp-sales-sharer { margin-top: 8px; }
.cp-sales-track span.fmt { background: var(--tt, var(--tt-other)); }

/* The shop table needs about 1040px. Below that each shop stacks: its name and total,
   then a compact block for each format, instead of a table to scroll sideways. */
@container (max-width: 1040px) {
  .cp-sales-shops thead, .cp-sales-shops colgroup { display: none; }
  .cp-sales-shops, .cp-sales-shops tbody { display: block; }
  .cp-sales-shops tbody { padding: 9px 12px; }
  .cp-sales-shops tbody + tbody { border-top: 1px solid var(--border); }
  .cp-sales-shops tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 12px; padding-top: 7px;
    grid-template-areas: "fmt gmv" "per trend" "post last" "rank rank";
  }
  .cp-sales-shops tr:first-child { grid-template-areas: "shop shop" "fmt gmv" "per trend" "post last" "rank rank"; padding-top: 0; }
  .cp-sales-shops td, .cp-sales-shops th.c-shop { display: block; padding: 0; border: 0 !important; }
  .cp-sales-shops th.c-shop { grid-area: shop; padding-bottom: 7px; }
  .cp-sales-shops .c-fmt { grid-area: fmt; font-weight: 550; }
  .cp-sales-shops .c-gmv { grid-area: gmv; }
  .cp-sales-shops .c-per { grid-area: per; color: var(--muted); font-size: 12.5px; }
  .cp-sales-shops .c-post { grid-area: post; color: var(--muted); font-size: 12.5px; }
  .cp-sales-shops .c-post > span { display: inline; min-height: 0; }
  .cp-sales-shops .c-post > span + span:not(:empty)::before { content: " · "; }
  .cp-sales-shops .c-last { grid-area: last; text-align: right; color: var(--muted); font-size: 12.5px; }
  .cp-sales-shops .c-trend { grid-area: trend; justify-self: end; }
  .cp-sales-shops .c-rank { grid-area: rank; color: var(--muted); font-size: 12.5px; }
  .cp-sales-shops .c-rank > span { display: inline; min-height: 0; }
  .cp-sales-shops .c-rank > span + span:not(:empty)::before { content: " · "; color: var(--muted); }
  .cp-sales-shops .cp-sales-spark { display: none; }
  /* A format with nothing on this shop all window: one line, not four blanks. */
  .cp-sales-shops tr.is-none, .cp-sales-shops tr.is-none:first-child { grid-template-areas: "fmt gmv"; }
  .cp-sales-shops tr.is-none:first-child { grid-template-areas: "shop shop" "fmt gmv"; }
  .cp-sales-shops tr.is-none :is(.c-per, .c-post, .c-last, .c-trend, .c-rank) { display: none; }
}
@container (max-width: 620px) {
  .cp-sales-read { font-size: 16px; }
  .cp-sales-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-sales-where { grid-column: 1 / -1; }
  .cp-sales-card { padding: 10px; }
  .cp-sales-gmv { font-size: 23px; }
  .cp-sales-card .cp-sales-rows > div { display: block; padding: 2px 0; }
  .cp-sales-card .cp-sales-rows dt { font-size: 12px; }
  .cp-sales-card .cp-sales-rows dd { text-align: left; }
  .cp-tt-wkh { display: block; }
  .cp-sales-wkt { flex-direction: row; justify-content: space-between; align-items: center; }
  .cp-tt-wkread { display: block; margin-top: 4px; min-height: 54px; text-align: left; }
}