/* Review request card - heading, equal destination buttons, optional QR. */
:root { --rr-star: #c27c00; }
html[data-theme="dark"] { --rr-star: #fbbf24; }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] { --rr-star: #fbbf24; } }

.rr { display: grid; gap: 12px; }
.rr-head { display: flex; align-items: flex-start; gap: 12px; }
.rr-badge { flex: none; display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--e-hero); border: 1px solid color-mix(in srgb, var(--e-accent) 14%, var(--e-line)); }
.rr-badge .rr-i { width: 22px; height: 22px; }
.rr-ht { display: grid; gap: 2px; min-width: 0; }
.rr-name { margin: 0; font-size: .76em; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--e-accent-fg); overflow-wrap: anywhere; }
.rr-title { margin: 0; font-size: 1.22em; line-height: 1.25; font-weight: 750; letter-spacing: -.015em; overflow-wrap: anywhere; }
.rr-msg { margin: 0; color: var(--e-ink-2); font-size: .94em; line-height: 1.5; overflow-wrap: anywhere; }
.rr-i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.rr-i.rr-star { fill: var(--rr-star); stroke: var(--rr-star); stroke-width: 1.2; }

.rr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rr-btn {
    display: flex; align-items: center; gap: 11px; min-height: 52px; padding: 9px 12px; text-decoration: none; color: var(--e-ink);
    border: 1px solid var(--e-line-strong); border-radius: var(--e-radius-sm); background: var(--e-bg);
    transition: border-color .15s var(--e-ease), background-color .15s var(--e-ease), box-shadow .15s var(--e-ease);
}
.rr-btn:hover { border-color: var(--e-accent); background: var(--e-surface); box-shadow: 0 3px 10px color-mix(in srgb, var(--e-accent) 14%, transparent); }
.rr-bt { display: grid; gap: 1px; min-width: 0; flex: 1; }
.rr-bt strong { font-size: .95em; font-weight: 700; overflow-wrap: anywhere; }
.rr-bt span { font-size: .78em; color: var(--e-ink-3); overflow-wrap: anywhere; }
.rr-out { width: 16px; height: 16px; color: var(--e-ink-3); }
.rr-btn:hover .rr-out { color: var(--e-accent-fg); }
.rr-fair { margin: -4px 0 0; font-size: .78em; color: var(--e-ink-3); }

.rr-qr { display: flex; align-items: center; gap: 14px; padding: 10px; border: 1px dashed var(--e-line-strong); border-radius: var(--e-radius-sm); }
.rr-qr-code { flex: none; width: 112px; height: 112px; border-radius: 8px; overflow: hidden; background: #fff; }
.rr-qr-code svg, .rr-qr-code canvas { display: block; width: 100%; height: 100%; }
.rr-qr p { margin: 0; display: grid; gap: 2px; font-size: .86em; min-width: 0; }
.rr-qr p span { color: var(--e-ink-3); font-size: .92em; }
.rr-issues { padding-left: 28px; }

@media (min-width: 520px) {
    .rr-list.rr-n2, .rr-list.rr-n4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 360px) {
    .rr-badge { width: 36px; height: 36px; }
    .rr-title { font-size: 1.1em; }
    .rr-qr { flex-direction: column; align-items: flex-start; }
}
html[data-compact="1"] .rr { gap: 9px; }
html[data-compact="1"] .rr-btn { min-height: 44px; padding: 7px 10px; }