/* Parcel — Weekly report (SPEC-v2 §8). Owned by the report screen builder. Scoped under .view-report (ctx.el is
   .view-today.view-report). A reading column (max 720px, centred at every width) that adapts to its own width (container "rep"). */

.view-report .rep, .view-report .rep-loading { max-width: 720px; margin-inline: auto; container: rep / inline-size; min-width: 0; }
.view-report .rep-empty { padding-top: var(--sp-6); }
.view-report .rep-block > .section-header { flex-wrap: wrap; row-gap: 2px; }
/* The pair's first block is :first-child of its wrapper; give it the same space above as every other section (V015). */
.view-report .rep-pair > .section:first-child { margin-top: var(--sp-7); }
.view-report .rep-aside { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: pretty; }
.view-report .rep-foot {
  margin-top: var(--sp-7); padding: 0 var(--sp-1);
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: pretty;
}
.view-report .rep-none {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 14px 16px; border-radius: var(--r-card); background: var(--bg-2);
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2);
}
.view-report .rep-none svg { flex: none; margin-top: 2px; color: var(--green); }

/* ---------------------------------------------------------------- hero */
.view-report .rep-hero { padding: 18px 16px 20px; }
@container rep (min-width: 560px) { .view-report .rep-hero { padding: 24px 24px 22px; } }
.view-report .rep-eyebrow {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: var(--w-semibold); color: var(--label-2);
}
.view-report .rep-eyebrow svg { flex: none; margin-top: 2px; color: var(--accent); }
.view-report .rep-week { margin-top: 6px; font-size: var(--fs-title2); line-height: var(--lh-title2); font-weight: var(--w-bold); letter-spacing: var(--ls-title2, -0.3px); }
.view-report .rep-partial { margin-top: 2px; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); }
.view-report .rep-profit { margin-top: 18px; }
.view-report .rep-profit-label { font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: var(--w-semibold); color: var(--label-2); }
.view-report .rep-profit-amount {
  font-family: var(--font-rounded); font-size: var(--fs-hero, 48px); line-height: 1.08; font-weight: var(--w-bold); letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}
.view-report .rep-profit-amount.is-pos { color: var(--green-text); }
.view-report .rep-profit-amount.is-neg { color: var(--red-text); }
.view-report .rep-change {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0 5px; margin-top: 4px;
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); font-weight: var(--w-semibold); color: var(--label-2);
}
.view-report .rep-change.is-up { color: var(--green-text); }
.view-report .rep-change.is-down { color: var(--red-text); }
.view-report .rep-change-suffix { font-weight: var(--w-regular); color: var(--label-2); }
/* First full week: the words on one line, what the go-live days came to on the next. */
.view-report .rep-change.is-first { flex-direction: column; align-items: flex-start; color: var(--label); }

.view-report .rep-cmp { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.view-report .rep-cmp-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
.view-report .rep-cmp-label { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); }
.view-report .rep-cmp-row.is-now .rep-cmp-label { color: var(--label); font-weight: var(--w-semibold); }
.view-report .rep-cmp-track { display: block; height: 10px; border-radius: 5px; background: var(--fill-3); overflow: hidden; }
.view-report .rep-cmp-fill { display: block; height: 100%; border-radius: 5px; min-width: 4px; }
.view-report .rep-cmp-fill.is-zero { min-width: 0; }
.view-report .rep-cmp-fill.is-pos { background: var(--green); }
.view-report .rep-cmp-fill.is-neg { background: var(--red); }
.view-report .rep-cmp-row:not(.is-now) .rep-cmp-fill { opacity: .42; }
.view-report .rep-cmp-value { min-width: 84px; text-align: right; font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-variant-numeric: tabular-nums; color: var(--label-2); }
.view-report .rep-cmp-row.is-now .rep-cmp-value { color: var(--label); font-weight: var(--w-semibold); }

.view-report .rep-headline { margin-top: 18px; font-size: var(--fs-body); line-height: 24px; color: var(--label); text-wrap: pretty; }

.view-report .rep-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px;
  margin-top: 18px; padding-top: 16px; box-shadow: inset 0 var(--hairline) 0 var(--sep);
}
@container rep (min-width: 560px) { .view-report .rep-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.view-report .rep-sup .rep-facts { margin-top: 0; padding-top: 0; box-shadow: none; }
.view-report .rep-fact { min-width: 0; }
.view-report .rep-fact-label { font-size: 13px; line-height: 18px; font-weight: var(--w-semibold); color: var(--label-2); }
.view-report .rep-fact-value {
  font-family: var(--font-rounded); font-size: 20px; line-height: 26px; font-weight: var(--w-bold); letter-spacing: -0.3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums;
}
.view-report .rep-fact-value[class*="tone-"] { color: var(--tone-text); }
.view-report .rep-fact-sub { font-size: 12px; line-height: 16px; color: var(--label-2); text-wrap: pretty; }

/* ---------------------------------------------------------------- lists (products, money, archive) */
.view-report .rep-list { margin: 0; padding: 0; list-style: none; background: var(--bg-2); border-radius: var(--r-card); overflow: hidden; }
.view-report .rep-li { position: relative; }
.view-report .rep-li + .rep-li::before { content: ''; position: absolute; top: 0; left: 16px; right: 0; height: var(--hairline); background: var(--sep); z-index: 1; }
.view-report .rep-row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 14px; column-gap: 12px; align-items: center;
  min-height: 60px; padding: 10px 16px; color: inherit;
}
.view-report a.rep-row:active { background: var(--highlight, var(--fill-3)); }
@media (hover: hover) and (pointer: fine) { .view-report a.rep-row:hover { background: var(--fill-4); } }
.view-report .rep-s-archive .rep-row { grid-template-columns: minmax(0, 1fr) auto; min-height: 56px; }
.view-report .rep-s-archive a.rep-row { grid-template-columns: minmax(0, 1fr) 14px; }
.view-report .rep-thumb { width: 40px; height: 40px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--fill-4); color: var(--label-2); }
.view-report .rep-thumb svg { width: 100%; height: 100%; display: block; }
.view-report .rep-thumb.is-blank svg { width: 18px; height: 18px; }
.view-report .rep-row-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.view-report .rep-row-title { display: flex; align-items: center; gap: 8px; font-size: var(--fs-subhead); line-height: 20px; min-width: 0; }
.view-report .rep-row-sub { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: pretty; }
.view-report .rep-row-amount { font-size: var(--fs-subhead); line-height: 20px; font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.view-report .rep-row-amount.is-pos { color: var(--green-text); }
.view-report .rep-row-amount.is-neg { color: var(--red-text); }
.view-report .rep-chev { color: var(--label-3); }
.view-report .rep-row.is-current { background: transparent; }
.view-report .rep-reading { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); white-space: nowrap; }
.view-report .rep-latest { flex: none; }

.view-report .rep-mrow {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 12px; align-items: center;
  min-height: 56px; padding: 10px 16px; position: relative;
}
.view-report .rep-mrow + .rep-mrow::before { content: ''; position: absolute; top: 0; left: 58px; right: 0; height: var(--hairline); background: var(--sep); }
.view-report .rep-mrow-value { font-size: var(--fs-subhead); line-height: 20px; font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------------------------------------------------------------- what autopilot changed */
.view-report .rep-ch-card { padding: 4px 16px; }
@container rep (min-width: 560px) { .view-report .rep-ch-card { padding: 4px 20px; } }
.view-report .rep-ch-group { padding: 14px 0 6px; }
.view-report .rep-ch-group + .rep-ch-group { box-shadow: inset 0 var(--hairline) 0 var(--sep); }
.view-report .rep-ch-head {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-headline); line-height: var(--lh-headline); font-weight: var(--w-semibold);
}
.view-report .rep-ch-count {
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px;
  display: inline-grid; place-items: center;
  font-size: 13px; font-weight: var(--w-semibold); color: var(--label-2); background: var(--fill-3);
}
.view-report .rep-ch-list { margin: 6px 0 0; padding: 0 0 0 34px; list-style: none; }
.view-report .rep-ch + .rep-ch { box-shadow: inset 0 var(--hairline) 0 var(--sep); }
.view-report .rep-ch-link { display: flex; flex-direction: column; gap: 2px; padding: 9px 0; color: inherit; }
.view-report a.rep-ch-link:active { opacity: .55; }
@media (hover: hover) and (pointer: fine) { .view-report a.rep-ch-link:hover .rep-ch-text { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--label-3); } }
.view-report .rep-ch-text { font-size: var(--fs-subhead); line-height: 21px; color: var(--label); text-wrap: pretty; }
.view-report .rep-ch-when { font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); }
.view-report .rep-more-wrap { padding-left: 34px; }
.view-report .rep-more {
  min-height: 36px; padding: 0;
  font: inherit; font-size: var(--fs-subhead); color: var(--accent-text);
  background: none; border: 0; cursor: pointer;
}
.view-report .rep-more[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .view-report .rep-more:hover { text-decoration: underline; text-underline-offset: 2px; } }

/* ---------------------------------------------------------------- customer service */
.view-report .rep-sup { padding: 16px; }
@container rep (min-width: 560px) { .view-report .rep-sup { padding: 20px; } }
.view-report .rep-sup-line {
  margin-top: 14px; padding-top: 12px; box-shadow: inset 0 var(--hairline) 0 var(--sep);
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-wrap: pretty;
}

/* ---------------------------------------------------------------- what's next */
.view-report .rep-next { padding: 16px; }
@container rep (min-width: 560px) { .view-report .rep-next { padding: 20px; } }
.view-report .rep-next-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.view-report .rep-next-item { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; font-size: var(--fs-callout); line-height: 22px; text-wrap: pretty; }
.view-report .rep-next-item svg { margin-top: 3px; color: var(--purple); }
.view-report .rep-needs { margin-top: 16px; padding-top: 14px; box-shadow: inset 0 var(--hairline) 0 var(--sep); }
.view-report .rep-needs-title { font-size: var(--fs-footnote); line-height: var(--lh-footnote); font-weight: var(--w-semibold); color: var(--label-2); }
.view-report .rep-needs-list { margin: 6px 0 0; padding-left: 20px; font-size: var(--fs-subhead); line-height: 21px; }
.view-report .rep-needs-none { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; font-size: var(--fs-subhead); line-height: var(--lh-subhead); }
.view-report .rep-needs-none svg { flex: none; margin-top: 2px; color: var(--green); }
.view-report .rep-needs-now {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 10px;
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--accent-text);
}
@media (hover: hover) and (pointer: fine) { .view-report .rep-needs-now:hover { text-decoration: underline; text-underline-offset: 2px; } }

/* ---------------------------------------------------------------- forced colours */
@media (forced-colors: active) {
  .view-report .rep-cmp-track { border: 1px solid CanvasText; background: Canvas; }
  .view-report .rep-cmp-fill { forced-color-adjust: none; background: Highlight; }
  .view-report .rep-list, .view-report .rep-none { border: 1px solid CanvasText; }
}