/* /cases — page-only additions on top of site.css (tokens + .rb-* components, incl. .rb-chart / .rb-hbars /
   .rb-fact-card / .rb-reels / .rb-fineprint). Logical properties only (RTL). */

/* #report: report header card, KPI grid, three numbered blocks */
.rbp-report-head{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem}
.rbp-report-head__title{color:var(--rb-ink);text-wrap:balance}
.rbp-report-head .rb-chip-row{margin-top:.25rem}
.rbp-report-kpis{margin-top:1.25rem}
.rbp-report-block{margin-top:3.5rem}
@media (min-width:1024px){.rbp-report-block{margin-top:4.5rem}}
.rbp-report-block__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem 1rem;margin-bottom:1.25rem;padding-bottom:.875rem;border-bottom:1px solid var(--rb-line)}
.rbp-report-highlights{margin-top:1.5rem}
.rbp-report-block .rb-card > .rb-chart{block-size:100%}

/* Chart caption line (yoy) */
.rbp-chart-caption{margin-top:.75rem}

/* GEO mocks (restyled, anonymised): query chip, answer with rank chip, skeleton lines */
.rbp-geo{display:flex;flex-direction:column;height:100%}
.rbp-geo .rb-figure__body{flex:1;display:grid;align-content:start;gap:.875rem;padding:1.25rem}
.rbp-geo__title{font-size:1.05rem;font-weight:800;line-height:1.35;color:var(--rb-ink)}
.rbp-geo__query{display:flex;align-items:center;gap:.5rem;padding:.625rem .875rem;border:1px solid var(--rb-line);border-radius:var(--rb-radius-pill);background:#fff;font-size:.88rem;font-weight:600;color:var(--rb-ink-2)}
.rbp-geo__query svg{flex:none;width:1rem;height:1rem;color:var(--rb-muted)}
.rbp-geo__answer{display:grid;gap:.5rem;padding:1rem;border-radius:var(--rb-radius-md);background:var(--rb-surface-2)}
.rbp-geo__rank{display:flex;align-items:center;gap:.625rem}
.rbp-geo__rank .rb-tag{flex:none}
.rbp-geo__line{display:block;block-size:.5rem;border-radius:var(--rb-radius-pill);background:var(--rb-line)}
.rbp-geo__line--name{flex:1;max-inline-size:9rem;block-size:.625rem;background:var(--rb-line-strong)}
.rbp-geo__line--short{inline-size:62%}
.rbp-geo__places{display:grid;gap:.5rem}
.rbp-geo__place{display:flex;align-items:center;gap:.625rem;padding:.625rem .875rem;border:1px solid var(--rb-line);border-radius:var(--rb-radius-sm);background:#fff}
.rbp-geo__place.is-first{border-color:rgb(var(--rb-accent-rgb) / .35)}
.rbp-geo__place:not(.is-first){opacity:.6}
.rbp-geo__pin{display:grid;place-items:center;flex:none;color:var(--rb-muted)}
.rbp-geo__pin svg{width:1rem;height:1rem}
.rbp-geo__place .rbp-geo__rank{flex:1}
.rbp-geo__caption{padding:0 1.25rem 1rem}

/* #yoy: the headline stat under the heading */
.rbp-yoy-stat{margin-top:2rem;max-inline-size:22rem}

/* #response (night): bars card, then what Rebeauty does */
.rbp-response-bars{max-inline-size:48rem;margin:2rem auto 0}
.rbp-response-bars + .rb-fineprint{margin-inline:auto}
.rbp-response-do{margin-top:3.5rem}
.rbp-do{display:flex;align-items:flex-start;gap:1rem;height:100%;padding:1.5rem;border-radius:var(--rb-radius-lg)}
.rbp-do__title{font-size:1.1rem;font-weight:800;line-height:1.35;color:var(--rb-on-night)}
.rbp-do__text{margin-top:.375rem;font-size:.95rem;line-height:var(--rb-leading-relaxed);color:var(--rb-on-night-2);text-wrap:pretty}

/* #references: two stats side by side at every width; department chart card */
.rbp-stat-pair{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:2rem}
.rbp-dept__title{margin-bottom:1.25rem;font-size:1rem;font-weight:800;color:var(--rb-ink)}

/* #shorts: reference cards with an abstract reels row on top */
.rbp-ref{display:flex;flex-direction:column}
.rbp-ref__reels{inline-size:100%}
/* 640–1023: one card per row (2-up squeezes the 4-frame reels to ~50–70px frames and wraps the style labels) */
@media (min-width:640px) and (max-width:1023px){
#shorts .rb-card-grid--2{grid-template-columns:minmax(0,1fr)}
.rbp-ref__reels{max-inline-size:28rem;margin-inline:0}
}
/* ref 02: the wide frame carries two language badges side by side */
.rbp-ref__reels--mix .rb-reel--wide .rb-code-badge:not(:last-child){inset-inline-end:2.3rem}

/* Phones */
@media (max-width:639px){
.rbp-report-block{margin-top:2.75rem}
.rbp-report-facts{gap:.5rem}
.rbp-report-facts .rb-fact-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:1rem;row-gap:.125rem;padding:1rem 1.25rem}
.rbp-report-facts .rb-fact-card__value{grid-column:2;grid-row:1 / span 2;font-size:1.35rem}
.rbp-report-facts .rb-fact-card__sub{grid-column:1}
.rbp-do{padding:1.25rem}
.rbp-geo .rb-figure__body{padding:1rem}
.rbp-ref__reels{max-inline-size:15rem}
}

/* Japanese headings: phrase-aware breaks (Chromium auto-phrase; other engines ignore it). Stopgap until core covers all ja pages */
html:lang(ja) main :is(h1,h2,h3,h4){word-break:auto-phrase}

/* Korean fallback body on a non-ko page (no cases pack yet; wrapper set in the template): keep-all as under
   html:lang(ko), and undo the html[dir=rtl] icon / breadcrumb flips inside the LTR wrapper */
.rbp-ko-fallback{word-break:keep-all}
.rbp-ko-fallback .rb-icon-flip{transform:none}
.rbp-ko-fallback .rb-breadcrumb li + li::before{transform:rotate(45deg)}