/* Return Insights' own pieces, where Polaris has no component: the hero
   with its reason ribbon, the return map, reason bars and chips. Espresso
   ink on cream, coral for the app's own accent, and one warm colour per
   reason group so a reason looks the same everywhere. */
:root {
  --ri-ink: #2b2220;
  --ri-ink-soft: #5c4f4a;
  --ri-muted: #8a7d76;
  --ri-cream: #fbf6f1;
  --ri-blush: #f6e6df;
  --ri-line: #eaded5;
  --ri-coral: #c2513f;
  --ri-coral-deep: #9a3a2b;
  --ri-serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --ri-sans: Inter, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, sans-serif;

  --g-size_fit: #c2513f;
  --g-not_as_described: #d9902b;
  --g-quality: #7e2f22;
  --g-damaged: #e3b75d;
  --g-wrong_item: #6d4c3d;
  --g-delivery: #c48a76;
  --g-changed_mind: #a99d93;
  --g-other: #d4cac0;
  --g-unknown: #ebe3da;
}

[data-group='size_fit'] { --g: var(--g-size_fit); }
[data-group='not_as_described'] { --g: var(--g-not_as_described); }
[data-group='quality'] { --g: var(--g-quality); }
[data-group='damaged'] { --g: var(--g-damaged); }
[data-group='wrong_item'] { --g: var(--g-wrong_item); }
[data-group='delivery'] { --g: var(--g-delivery); }
[data-group='changed_mind'] { --g: var(--g-changed_mind); }
[data-group='other'] { --g: var(--g-other); }
[data-group='unknown'] { --g: var(--g-unknown); }

.ri-figure { font-family: var(--ri-serif); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.01em; }
.ri-kicker { margin: 0; font: 600 11px/1.4 var(--ri-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ri-coral); }
:where(.ri-rows a, .ri-pills button, .ri-dot-link, .ri-figures a):focus-visible { outline: 2px solid var(--ri-coral); outline-offset: 2px; border-radius: 4px; }

/* Hero: the headline on the left, the reason ribbon on the right. */
.ri-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 1.1fr); gap: 28px; align-items: center;
  padding: 28px; border-radius: 16px; background: radial-gradient(120% 140% at 100% 0%, var(--ri-blush), var(--ri-cream) 55%); border: 1px solid var(--ri-line);
}
.ri-display { margin: 10px 0 0; max-inline-size: 22ch; font: 500 31px/1.18 var(--ri-serif); letter-spacing: -0.015em; color: var(--ri-ink); }
.ri-display em { font-style: normal; color: var(--ri-coral); }
.ri-hero-note { margin: 12px 0 0; color: var(--ri-ink-soft); max-inline-size: 46ch; line-height: 1.55; }
@media (max-width: 760px) { .ri-hero { grid-template-columns: 1fr; padding: 20px; } .ri-display { font-size: 24px; } }

.ri-ribbon { margin: 0; }
.ri-ribbon svg { inline-size: 100%; block-size: auto; overflow: visible; }
.ri-band { fill: var(--g); opacity: .55; transition: opacity .2s ease; }
.ri-band[data-group='unknown'], .ri-band-cap[data-group='unknown'] { fill: url(#ri-unknown); opacity: 1; }
.ri-band-cap { fill: var(--g); }
.ri-ribbon:hover .ri-band { opacity: .35; }
.ri-ribbon .ri-band:hover { opacity: .85; }
.ri-ribbon-stem { fill: var(--ri-ink); }
.ri-ribbon-label { font: 13px var(--ri-sans); fill: var(--ri-ink); }
.ri-ribbon-name { font-weight: 600; }
.ri-ribbon-figure { fill: var(--ri-muted); font-variant-numeric: tabular-nums; }
.ri-unknown-bg { fill: var(--g-unknown); }
.ri-unknown-line { stroke: #cbbfb3; stroke-width: 2; }

/* Sync strip. */
.ri-sync { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; }
.ri-sync-mark { inline-size: 34px; block-size: 34px; }
.ri-sync-mark circle { fill: none; stroke: var(--ri-line); stroke-width: 3; }
.ri-sync-mark path { fill: none; stroke: var(--ri-coral); stroke-width: 3; stroke-linecap: round; }
.ri-sync[data-state='running'] .ri-sync-mark { animation: ri-spin 1.4s linear infinite; }
.ri-sync[data-state='failed'] .ri-sync-mark path { stroke: var(--ri-coral-deep); }
.ri-sync[data-state='fresh'] .ri-sync-mark path { stroke: var(--ri-ink); }
@keyframes ri-spin { to { transform: rotate(360deg); } }
@media (max-width: 560px) { .ri-sync { grid-template-columns: auto 1fr; } .ri-sync > s-button { grid-column: 1 / -1; } }

/* Four figures, each with what it means underneath. */
.ri-figures { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; }
.ri-figures li { padding: 18px 20px 20px; display: grid; gap: 4px; align-content: start; }
.ri-figures li + li { border-inline-start: 1px solid var(--ri-line); }
.ri-figures .ri-figure { font-size: 34px; line-height: 1.05; color: var(--ri-ink); }
.ri-figures [data-accent] .ri-figure { color: var(--ri-coral); }
.ri-figure-label { font: 600 12px/1.4 var(--ri-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ri-ink-soft); }
.ri-figure-hint { font-size: 13px; color: var(--ri-muted); line-height: 1.45; }
@media (max-width: 760px) {
  .ri-figures { grid-template-columns: 1fr 1fr; }
  .ri-figures li + li { border-inline-start: 0; }
  .ri-figures li { border-block-end: 1px solid var(--ri-line); }
}

/* Return map. */
.ri-map { margin: 0; }
.ri-map svg { inline-size: 100%; block-size: auto; }
.ri-grid { stroke: var(--ri-line); stroke-width: 1; }
.ri-average { stroke: var(--ri-ink-soft); stroke-width: 1.2; stroke-dasharray: 4 5; }
.ri-axis { font: 11px var(--ri-sans); fill: var(--ri-muted); }
.ri-dot { fill: var(--g, #d9cfc5); fill-opacity: .82; stroke: #fff; stroke-width: 1.5; transition: transform .15s ease; transform-box: fill-box; transform-origin: center; }
.ri-dot[data-group='none'] { fill: #d9cfc5; }
.ri-dot[data-group='unknown'] { fill: #cbbfb3; }
.ri-dot-link { cursor: pointer; outline: none; }
.ri-dot-link:hover .ri-dot, .ri-dot-link:focus-visible .ri-dot { transform: scale(1.25); stroke: var(--ri-ink); }
.ri-dot-label { font: 600 12px var(--ri-sans); fill: var(--ri-ink); paint-order: stroke; stroke: #fff; stroke-width: 4px; }

/* Reasons: a swatch, a chip and a stacked bar. */
.ri-swatch { display: inline-block; inline-size: 10px; block-size: 10px; border-radius: 3px; background: var(--g); flex: none; }
.ri-swatch[data-group='unknown'] { background: repeating-linear-gradient(45deg, var(--g-unknown) 0 3px, #cbbfb3 3px 4px); }
.ri-chip { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--ri-line); font: 550 12px/1.5 var(--ri-sans); color: var(--ri-ink); white-space: nowrap; }
.ri-chip-count { color: var(--ri-muted); font-variant-numeric: tabular-nums; }
.ri-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ri-bar { display: flex; gap: 2px; block-size: 10px; inline-size: 100%; border-radius: 999px; overflow: hidden; background: var(--ri-line); }
.ri-bar > span { background: var(--g); min-inline-size: 3px; }
.ri-bar > span[data-group='unknown'] { background: repeating-linear-gradient(45deg, var(--g-unknown) 0 3px, #cbbfb3 3px 4px); }
.ri-bar-empty { background: var(--ri-line); opacity: .6; }

/* Product rows. */
.ri-rows { border-block-start: 1px solid var(--ri-line); }
.ri-row {
  display: grid; grid-template-columns: minmax(0, 1.6fr) 90px 90px 92px minmax(140px, 1.3fr); gap: 16px; align-items: center;
  padding: 13px 16px; border-block-end: 1px solid var(--ri-line); color: inherit; text-decoration: none; font-size: 13px;
}
.ri-row:last-child { border-block-end: 0; }
a.ri-row { transition: background-color .12s ease; }
a.ri-row:hover { background: var(--ri-cream); }
a.ri-row:hover .ri-row-title { color: var(--ri-coral); }
.ri-row-head { padding-block: 10px; background: var(--ri-cream); font-weight: 600; color: var(--ri-ink-soft); }
.ri-row > :nth-child(2), .ri-row > :nth-child(3), .ri-row > :nth-child(4) { text-align: end; font-variant-numeric: tabular-nums; }
.ri-row-who { display: grid; gap: 3px; min-inline-size: 0; }
.ri-row-who > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ri-row-title { font-weight: 600; color: var(--ri-ink); }
.ri-row-who span { color: var(--ri-muted); }
.ri-rate { font: 500 16px var(--ri-serif); color: var(--ri-ink); }
.ri-rate[data-high] { color: var(--ri-coral); }
.ri-settling { display: block; font: 11px var(--ri-sans); color: var(--ri-muted); }
@media (max-width: 760px) {
  .ri-row { grid-template-columns: 1fr auto; }
  .ri-row > :nth-child(2), .ri-row > :nth-child(3) { display: none; }
  .ri-row > :last-child { grid-column: 1 / -1; }
  .ri-row-head { display: none; }
}

/* Suggestions: a quiet card with the evidence that earned it. */
.ri-suggest { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 12px; background: var(--ri-cream); border: 1px solid var(--ri-line); }
.ri-suggest-mark { inline-size: 36px; block-size: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--g); }
.ri-suggest-mark svg { inline-size: 20px; block-size: 20px; }
.ri-suggest-mark path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ri-suggest p { margin: 0; }
.ri-suggest small { color: var(--ri-muted); font-size: 12px; }
@media (max-width: 560px) { .ri-suggest { grid-template-columns: auto 1fr; } .ri-suggest > s-button { grid-column: 1 / -1; } }

/* Filters. */
.ri-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ri-pills button {
  display: inline-flex; align-items: center; gap: 7px; font: 550 13px/1 var(--ri-sans); padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--ri-line); background: #fff; color: var(--ri-ink-soft);
}
.ri-pills button:hover { border-color: #d6c8bc; color: var(--ri-ink); }
.ri-pills button[aria-pressed='true'] { background: var(--ri-ink); border-color: var(--ri-ink); color: var(--ri-cream); }

/* Evidence notes. */
.ri-quote { margin: 0; padding: 8px 12px; border-inline-start: 3px solid var(--g, var(--ri-line)); background: var(--ri-cream); border-radius: 0 8px 8px 0; color: var(--ri-ink-soft); font-size: 13px; line-height: 1.5; }

.ri-facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 13px; }
.ri-facts dt { color: var(--ri-muted); }
.ri-facts dd { margin: 0; color: var(--ri-ink); }

.ri-step { display: grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: 50%; font: 600 13px var(--ri-sans); border: 1.5px solid var(--ri-ink); color: var(--ri-ink); }
.ri-step[data-done] { background: var(--ri-ink); color: var(--ri-cream); }

.ri-price { margin: 0; font-size: 34px; line-height: 1; }
.ri-tick { inline-size: 16px; block-size: 16px; color: var(--ri-coral); margin-block-start: 2px; }

.ri-parcel { inline-size: 120px; block-size: 84px; }
.ri-parcel-arc { fill: none; stroke: var(--ri-coral); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2 6; }
.ri-parcel-head { fill: none; stroke: var(--ri-coral); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ri-parcel-box { fill: var(--ri-blush); stroke: var(--ri-ink); stroke-width: 2; }
.ri-parcel-tape { stroke: var(--ri-ink); stroke-width: 2; }

.ri-progress { block-size: 6px; border-radius: 999px; background: var(--ri-line); overflow: hidden; }
.ri-progress > div { block-size: 100%; border-radius: inherit; background: var(--ri-ink); }

@media (prefers-reduced-motion: reduce) {
  .ri-band, .ri-dot, a.ri-row { transition: none; }
  .ri-sync[data-state='running'] .ri-sync-mark { animation: none; }
}