/*-------------------------------- Review card engine: shared by grw, brb and the cloud --------------------------------*/
/* .rpi-col12 marks the engine's frame: the old brb card also sits in .rpi-card. */

/* A line that does not fit wraps; inside it only the name gives way, so the product CSS must let the name shrink to nothing. */
.rpi .rpi-card .rpi-row12-center {
    flex-wrap: wrap!important;
}

.rpi .rpi-card .rpi-row12-center > .rpi-col6 {
    flex: 1 1 0;
    width: auto!important;
    min-width: min-content;
}

/* A centred line is centred as one, so its groups keep their content width. */
.rpi .rpi-card .rpi-row12-center.rpi-center > .rpi-col6 {
    flex: 0 1 auto;
}

/* The lines inside it are centred too: a group or a row of their own would start them at its start. */
.rpi .rpi-card .rpi-center :is(.rpi-col6, .rpi-row12-center):not(.rpi-push) {
    --align: center;
    justify-content: center!important;
}

.rpi .rpi-card .rpi-row12-center > :is(.rpi-stars, .rpi-logo) {
    flex: 0 0 auto!important;
}

/* A pushed item takes what the name can spare, up to its own width, so a long date wraps inside it rather than drop below the line. */
.rpi .rpi-card .rpi-row12-center > .rpi-push {
    flex: 1000 1 0!important;
    min-width: min-content;
    max-width: max-content;
}

.rpi .rpi-card .rpi-row12-center > .rpi-stars {
    --star-align-self: center;
}

/*-------------------------------- Band: reaches the card edges through the card padding --------------------------------*/
.rpi .rpi-band {
    align-self: stretch!important;
    width: auto!important;
    margin-inline: calc(-1 * var(--card-padding, 16px))!important;
    padding: 12px var(--card-padding, 16px)!important;
    background: var(--card-band-bg, #f1f1f1)!important;
}

.rpi .rpi-col12 > .rpi-band:first-child {
    margin-top: calc(-1 * var(--card-padding, 16px))!important;
    border-radius: var(--card-radius, 8px) var(--card-radius, 8px) 0 0;
}

.rpi .rpi-col12 > .rpi-band:last-child {
    margin-bottom: calc(-1 * var(--card-padding, 16px))!important;
    border-radius: 0 0 var(--card-radius, 8px) var(--card-radius, 8px);
}

.rpi .rpi-col12 > .rpi-band:only-child {
    border-radius: var(--card-radius, 8px);
}

/* The text's own band ends the card: in a card stretched to its neighbours' height it fills the rest. */
.rpi .rpi-col12 > .rpi-band:last-child:not(.rpi-push) {
    flex-grow: 1;
    align-content: flex-start;
}

/*-------------------------------- Separator above a section --------------------------------*/
.rpi .rpi-sep {
    padding-top: 12px!important;
    border-top: 1px solid var(--card-sep-color, #e2e2e2)!important;
}

/*-------------------------------- Photo on the top border --------------------------------*/
.rpi .rpi-card > .rpi-avatop {
    --overflow: visible;
    margin-top: calc(var(--img-size, 44px) / 2 + 4px)!important;
}

.rpi .rpi-card > .rpi-avatop > :first-child {
    margin-top: calc(-1 * (var(--card-padding, 16px) + var(--img-size, 44px) / 2))!important;
}

/*-------------------------------- Logo in the corner, drawn by the frame itself --------------------------------*/
.rpi .rpi-card > .rpi-col12.rpi-logo::before {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
}

/* Otherwise the first line runs under it. In a centered section only its first line is narrowed, on both sides to stay
   centered (padding would shift an element of fixed width, such as the photo); the lines below are clear of the logo. */
.rpi .rpi-card > .rpi-col12.rpi-logo > :first-child {
    padding-inline-end: calc(var(--logo-size, 14px) + 8px);
}

.rpi .rpi-card > .rpi-col12.rpi-logo > .rpi-center:first-child:not(.rpi-band) {
    padding-inline-end: 0;
}

/* A section of one line is not boxed: that line is the frame's first child, and it is the one narrowed. */
.rpi .rpi-card > .rpi-col12.rpi-logo > .rpi-center:first-child:not(.rpi-band):not(.rpi-col8),
.rpi .rpi-card > .rpi-col12.rpi-logo > .rpi-center.rpi-col8:first-child:not(.rpi-band) > :first-child {
    max-width: calc(100% - 2 * (var(--logo-size, 14px) + 8px));
}

.rpi .rpi-card > .rpi-col12.rpi-logo > .rpi-band:first-child {
    padding-inline-end: calc(var(--card-padding, 16px) + var(--logo-size, 14px) + 8px)!important;
}

.rpi .rpi-card > .rpi-col12.rpi-logo > .rpi-band.rpi-center:first-child {
    padding-inline-start: calc(var(--card-padding, 16px) + var(--logo-size, 14px) + 8px)!important;
}

/*-------------------------------- Bubble: the frame itself, the lines outside it line up with its content --------------------------------*/
.rpi .rpi-bubble {
    --overflow: visible;
}

.rpi .rpi-card > .rpi-row12-center,
.rpi .rpi-card > .rpi-col8,
.rpi .rpi-card > .rpi-col6 {
    padding-inline: var(--card-padding, 16px)!important;
}

.rpi .rpi-card > .rpi-bubble:not(:last-child) {
    margin-bottom: 0!important;
}

.rpi .rpi-card > .rpi-bubble + *,
.rpi .rpi-card > * + .rpi-bubble,
.rpi .rpi-card > * + .rpi-row12-center,
.rpi .rpi-card > * + .rpi-col8,
.rpi .rpi-card > * + .rpi-col6 {
    margin-top: 12px!important;
}

/* One rotated square makes the tail: its fill, its two outer border sides and its shadow, cut along the bubble edge. */
.rpi .rpi-card > .rpi-bubble::after {
    content: '';
    position: absolute;
    inset-inline-start: calc(var(--card-padding, 16px) + var(--img-size, 44px) / 2 - 7px);
    width: 14px;
    height: 14px;
    box-sizing: border-box;
    /* Magnified a hundred times, a gradient shows the tail one colour: the bubble's at the point where the tail meets it. */
    /* The RTL builds' rtlcss would flip the rotation and turn this size negative; the square is symmetric and placed by inset-inline-start. */
    /*!rtl:ignore*/
    background: var(--card-tail, var(--card-bg, #f4f4f4)) var(--tail-at, 50%) var(--tail-at, 50%) / 10000% 10000%;
    border: 0 none;
    box-shadow: var(--card-shadow, none);
    /*!rtl:ignore*/
    transform: rotate(45deg);
}

.rpi .rpi-card > .rpi-bubble:not(:last-child)::after {
    top: 100%;
    bottom: auto;
    margin-top: -7px;
    /*!rtl:ignore*/
    border-right: var(--card-br, none);
    border-bottom: var(--card-br, none);
    border-color: var(--card-br-color, transparent);
    clip-path: polygon(130% -30%, 130% 130%, -30% 130%);
}

/* --tail-at: how far along the bubble's 135° gradient the tail meets it, measured on cards of the usual sizes. */
.rpi .rpi-card > .rpi-bubble:last-child:not(:first-child)::after {
    --tail-at: 8%;
    top: auto;
    bottom: 100%;
    margin-bottom: -7px;
    border-top: var(--card-br, none);
    /*!rtl:ignore*/
    border-left: var(--card-br, none);
    border-color: var(--card-br-color, transparent);
    clip-path: polygon(-30% -30%, 130% -30%, -30% 130%);
}

.rpi .rpi-card > .rpi-bubble:only-child::after {
    content: none;
}

.rpi .rpi-card > .rpi-center + .rpi-bubble::after,
.rpi .rpi-card > .rpi-bubble:has(+ .rpi-center)::after {
    --tail-at: 70%;
    inset-inline-start: calc(50% - 7px);
}

.rpi .rpi-card > .rpi-center + .rpi-bubble:last-child::after {
    --tail-at: 30%;
}