/*
 * The audit's findings and a project's results, drawn the same way on the public report, the
 * project Overview and Insights: tier rows, one square per conversation, the day-by-day calendar,
 * the places table and figures. Intent is the --i5 … --i0 ramp (tokens.css: green decision intent, blue has the problem, yellow around the topic); what happened
 * to a reply is green (live) or yellow (posted, confirming), drawn on top of the intent it was for.
 */
.i5 { --c: var(--i5); background: var(--c); } .i4 { --c: var(--i4); background: var(--c); } .i3 { --c: var(--i3); background: var(--c); }
.i2 { --c: var(--i2); background: var(--c); } .i0 { --c: var(--i0); background: var(--c); }
.ir { --c: var(--i3); background: color-mix(in srgb, var(--i3) 35%, var(--i0)); }   /* related, not rated yet */
/* What happened to the reply, in the intent's own colour: outline, solid, solid with a tick. */
.rp-sq i.out, .rp-legend i.out { background: transparent; box-shadow: inset 0 0 0 2px var(--c, var(--ink-2)); }
.rp-sq i.ok, .rp-legend i.ok { position: relative; }
.rp-sq i.ok::after, .rp-legend i.ok::after { content: ""; position: absolute; left: 32%; top: 16%; width: 28%; height: 48%; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* Insights' tier rows: the bar is the tier's colour, solid for live, half for posted, faint for not replied. */
.rp-tiers.outcomes .fill { background: color-mix(in srgb, var(--c) 18%, var(--surface)); }
.rp-tiers.outcomes .o-live { background: var(--c); }
.rp-tiers.outcomes .o-conf { background: color-mix(in srgb, var(--c) 50%, var(--surface)); }
.rp-legend .o-live { background: var(--ink-2); } .rp-legend .o-conf { background: color-mix(in srgb, var(--ink-2) 50%, var(--surface)); }
.rp-legend .o-none { background: color-mix(in srgb, var(--ink-2) 18%, var(--surface)); }

/* Figures: one numeral style everywhere, so the audit's "~10" and Overview's "8" look alike. */
.rp-fig { font: 700 44px/1 var(--f-sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rp-figs { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.rp-figs b { display: block; font: 700 24px/1.15 var(--f-sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rp-figs span { font-size: 12.5px; color: var(--muted); }

/* The ramp: every related conversation, by tier. */
.rp-ramp { display: flex; height: 12px; border-radius: 999px; overflow: hidden; gap: 2px; background: var(--i0); }
.rp-ramp i { display: block; height: 100%; min-width: 2px; }

/* Tier rows: swatch, name, a bar as long as the tier, its outcome drawn inside, the counts. */
.rp-tiers { display: grid; gap: 8px; }
.rp-tier { display: grid; grid-template-columns: 12px minmax(118px, 30%) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px; }
.rp-tier .sw { width: 12px; height: 12px; border-radius: 3px; }
.rp-tier .lb { min-width: 0; }
.rp-tier .lb small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.rp-tier .tr { height: 14px; }
.rp-tier .fill { display: flex; height: 100%; border-radius: 4px; overflow: hidden; }   /* none at all for an empty tier */
.rp-tier .fill i { display: block; height: 100%; }
.rp-tier .n { text-align: right; white-space: nowrap; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.rp-tier .n b { color: var(--ink); font-size: 15px; margin-right: 4px; }
@media (max-width: 560px) {   /* name and count on one line, the bar under them */
  .rp-tier { grid-template-columns: 12px minmax(0, 1fr) auto; grid-template-areas: "sw lb n" ". tr tr"; row-gap: 4px; }
  .rp-tier .sw { grid-area: sw; } .rp-tier .lb { grid-area: lb; } .rp-tier .n { grid-area: n; } .rp-tier .tr { grid-area: tr; }
}

/* One square per conversation. */
.rp-sq { display: flex; flex-wrap: wrap; gap: 3px; }
.rp-sq i { display: block; width: 11px; height: 11px; border-radius: 2px; }
.rp-sq.big { gap: 4px; } .rp-sq.big i { width: 16px; height: 16px; border-radius: 3px; }
.rp-legend i { position: relative; }
@media (max-width: 480px) { .rp-sq { gap: 2px; } .rp-sq i { width: 7px; height: 7px; } .rp-sq.big i { width: 12px; height: 12px; } }
.rp-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--muted); }
.rp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rp-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }

/* Day by day: weeks as columns, Monday first, darker for more. */
.rp-cal-wrap { display: flex; gap: 8px; }
.rp-cal-days { display: grid; grid-template-rows: repeat(7, 12px); gap: 3px; font-size: 10.5px; color: var(--muted); }
.rp-cal-days span { line-height: 12px; }
.rp-cal { display: grid; grid-template-rows: repeat(7, 12px); grid-auto-flow: column; grid-auto-columns: 12px; gap: 3px; }
.rp-cal i { display: block; border-radius: 2px; background: var(--i0); }
.rp-cal i.pad { background: transparent; }
.rp-cal .c1, .rp-cal-foot .c1 { background: color-mix(in srgb, var(--data) 30%, var(--empty)); }   /* volume, not intent: one blue */
.rp-cal .c2, .rp-cal-foot .c2 { background: color-mix(in srgb, var(--data) 60%, var(--empty)); }
.rp-cal .c3, .rp-cal-foot .c3 { background: var(--data); } .rp-cal .c4, .rp-cal-foot .c4 { background: var(--sidebar); }
.rp-cal-foot { display: flex; justify-content: space-between; gap: 12px; align-items: center; font-size: 12px; color: var(--muted); margin-top: 8px; max-width: 420px; }
.rp-cal-foot .scale { display: inline-flex; align-items: center; gap: 3px; }
.rp-cal-foot .scale i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.rp-cal-foot .scale i:not([class]) { background: var(--i0); }

/* Places: one row per place, how much is there as a bar, then what was replied and is live. */
.rp-places { display: grid; grid-template-columns: minmax(96px, 1fr) minmax(0, 2fr) auto auto; gap: 9px 14px; align-items: center; font-size: 14px; }
.rp-places .h { font-size: 12.5px; color: var(--muted); }
.rp-places .r { text-align: right; font-variant-numeric: tabular-nums; }
.rp-places .nm { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-places .bar { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rp-places .bar > i { display: block; height: 10px; border-radius: 3px; background: var(--data); min-width: 3px; }
.rp-places .bar b { font-weight: 600; font-variant-numeric: tabular-nums; }
.rp-places em { font-style: normal; color: var(--muted); font-size: 12px; }
.rp-places.five { grid-template-columns: minmax(96px, 1.2fr) minmax(0, 1.4fr) auto auto auto; }
.rp-places .nm .pill { margin-left: 4px; }
@media (max-width: 560px) {
  .rp-places, .rp-places.five { grid-template-columns: minmax(64px, 1fr) minmax(0, 1.3fr) auto auto; gap: 8px 10px; font-size: 13.5px; }
  .rp-places.five > :nth-child(5n) { display: none; }   /* upvotes: in the wide view */
  .rp-places .bar em { display: none; }
  .rp-places em { font-size: 11.5px; }
}
.rp-places .bar .stack { display: flex; height: 10px; border-radius: 3px; overflow: hidden; gap: 1px; min-width: 3px; }
.rp-places .bar .stack i { display: block; height: 100%; min-width: 2px; border-radius: 0; }