/* ---------- stage 2: icons, round buttons, stacks ---------- */

.rv-icon { width: 18px; height: 18px; flex: none; }
.rv-stack-xs { display: grid; gap: 4px; }
.rv-stack-sm { display: grid; gap: 8px; }
.rv-gap-sm { gap: 8px; }
.rv-end { justify-content: flex-end; }
.rv-top { align-items: flex-start; }
.rv-hidden { display: none !important; }

.rv-round {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--rv-line);
    background: rgba(190, 217, 233, .08);
    cursor: pointer;
    flex: none;
}
@media (hover: hover) { .rv-round:hover { background: rgba(190, 217, 233, .16); } }
.rv-round.rv-small-round { width: 36px; height: 36px; }
.rv-round:disabled { opacity: .4; cursor: not-allowed; }

.rv-grid-2 { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rv-grid-3 { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .rv-grid-2, .rv-grid-3 { grid-template-columns: 1fr; } }

.rv-field textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
.rv-field-hint { font-size: 11px; color: var(--rv-faint); }
.rv-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }

/* screenshots of a feedback form: thumbnails and a button that also takes a dropped file */
.rv-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 360px; }
.rv-shot { position: relative; margin: 0; aspect-ratio: 3 / 4; border-radius: var(--rv-radius); overflow: hidden; border: 1px solid var(--rv-line); background: var(--rv-field-bg); }
.rv-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-shot-remove { position: absolute; top: 6px; right: 6px; background: rgba(8, 22, 40, .72); }
.rv-shot-add {
    position: relative; display: grid; place-content: center; justify-items: center; gap: 4px; aspect-ratio: 3 / 4; padding: 10px;
    border: 1px dashed var(--rv-line); border-radius: var(--rv-radius); background: var(--rv-field-bg); color: var(--rv-muted);
    font-size: 12px; text-align: center; cursor: pointer;
}
@media (hover: hover) { .rv-shot-add:hover { border-color: var(--rv-focus); color: var(--rv-text); } }
.rv-shot-add small { font-size: 11px; color: var(--rv-faint); }
.rv-shot-add .rv-icon { width: 22px; height: 22px; }
.rv-shot-add input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.rv-shot-add:has(input:focus-visible) { outline: 2px solid var(--rv-focus); outline-offset: 3px; }

.rv-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: var(--rv-radius-pill);
    border: 1px solid var(--rv-line-soft);
    background: rgba(204, 229, 243, .06);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.rv-chip.rv-selected { background: var(--rv-accent); color: var(--rv-on-accent); border-color: transparent; }

/* ---------- segmented control ---------- */

.rv-segmented {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 4px;
    padding: 4px;
    border-radius: var(--rv-radius-lg);
    border: 1px solid var(--rv-line-soft);
    background: rgba(8, 26, 44, .35);
}
.rv-segmented button {
    padding: 8px 16px;
    border: 0;
    border-radius: 17px;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    color: var(--rv-muted);
    cursor: pointer;
    white-space: nowrap;
}
.rv-segmented button.rv-selected { background: rgba(233, 244, 255, .92); color: var(--rv-on-accent); }
/* Tabs that scroll (page tabs and the period picker on a phone) fade out at the edge that has more, so a cut tab reads
   as "scroll for more". The fade follows the scroll position; tabs that fit have no scroll timeline and no fade. */
.rv-segmented { scrollbar-width: none; }
.rv-segmented::-webkit-scrollbar { display: none; }
@property --rv-fade-start { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --rv-fade-end { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes rv-scroll-fade {
    from { --rv-fade-start: 0px; --rv-fade-end: 36px; }
    12%, 88% { --rv-fade-start: 36px; --rv-fade-end: 36px; }
    to { --rv-fade-start: 36px; --rv-fade-end: 0px; }
}
@supports (animation-timeline: scroll()) {
    .rv-segmented {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--rv-fade-start), #000 calc(100% - var(--rv-fade-end)), transparent);
        mask-image: linear-gradient(to right, transparent, #000 var(--rv-fade-start), #000 calc(100% - var(--rv-fade-end)), transparent);
        animation: rv-scroll-fade linear both;
        animation-timeline: scroll(self inline);
    }
}