/* ==========================================================================
   Reviews — page-scoped, linked only by reviews.html and review-write.html
   (house style 2026-10-01: a rule for one page goes in that page's own sheet).
   Started 2026-10-01 with the reviews build.
   ========================================================================== */
/* ---- reviews.html: the aggregate in the hero ---- */
.reviews-score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
}

.reviews-score .rating-score {
    /* .rating-score is dark blue for light grounds; this one sits on the starfield. */
    color: var(--c-white-soft);
    font-family: var(--font-heading-fat);
    font-size: 3rem;
    line-height: 1;
}

.reviews-score .star-rating {
    margin-bottom: 0;
}

.reviews-score .star-rating img {
    max-height: 1.5rem;
}

/* ---- a reviewer's photo of their book, under the text ----
   Thumbnails, not a gallery: a few, square, opening the full file. A square
   crop is safe because the book photos are 1:1 (2100 x 2100). */
.review-photos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.review-photo {
    display: block;
    width: 4.5rem;
    height: 4.5rem;
    overflow: hidden;
    border: 1px solid var(--c-black-25);
}

.review-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition);
}

@media (hover: hover) {
    .review-photo:hover img {
        transform: scale(1.06);
    }
}

/* ==========================================================================
   review-write.html — the page the emailed link opens
   data-review-state says which of four cases the token is in (write, change,
   expired, invalid; "sent" became its own page, review-thank-you.html, 2026-10-02); every case's
   copy is in the markup and CSS shows one (house style: state is an
   attribute). The state is set by Rails from the token, not by script.
   ========================================================================== */
[data-review-state] [data-review-part] {
    display: none;
}

[data-review-state="write"] [data-review-part~="write"],
[data-review-state="change"] [data-review-part~="change"],
[data-review-state="expired"] [data-review-part~="expired"],
[data-review-state="invalid"] [data-review-part~="invalid"] {
    display: block;
}

/* The star picker: five radios in reverse order, so "this one and every one
   before it" is the sibling selector ~. Arrow keys move between radios
   natively. :hover is a bonus on top of the checked state, never the only
   way to see a choice (83% of traffic is touch). */
.rating-input {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    gap: .25rem;
    margin: 0 0 var(--space-3);
    padding: 0;
    border: 0;
}

.rating-input input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.rating-input label {
    width: 2.75rem;
    height: 2.75rem;
    margin: 0;
    cursor: pointer;
    background: url('../img/star-orange.svg') no-repeat center / 2rem;
    opacity: .35;
    transition: opacity var(--transition-fast);
}

.rating-input input:checked ~ label,
.rating-input label:hover,
.rating-input label:hover ~ label {
    opacity: 1;
}

.rating-input input:focus-visible + label {
    outline: 2px solid var(--c-blue-700);
    outline-offset: 2px;
}

/* The photo field: the native file input inside a dashed target. */
.photo-drop {
    padding: var(--space-4);
    border: 2px dashed var(--c-tan);
    background: var(--c-white-soft);
}

.photo-drop input[type="file"] {
    width: 100%;
    font-family: var(--font-body);
    font-size: var(--fs-base);
}

/* The order the review is for: a recap, not a form field. */
.review-order {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--c-tan);
    justify-content: center;
    text-align: left;
}

.review-order img {
    width: 4.5rem;
    height: 4.5rem;
    object-fit: cover;
    flex: none;
}

.review-order p {
    margin: 0;
}

.review-expiry {
    margin-top: var(--space-4);
    color: var(--c-grey-text);
    font-size: var(--fs-sm);
}

.review-form-card {
    max-width: var(--max-form-width);
    margin: 0 auto;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    padding-top: 0;
}

/* Everything on the form is centred, at every width (Zlatan, 2026-10-01: the
   "Your review" label was left-aligned on a phone). The fields themselves stay
   left-aligned: text is typed from the left. The label row and its counter
   sit centred on one line, wrapping if they must. */
.review-form-card {
    text-align: center;
}

.review-form-card .label-row {
    justify-content: center;
    flex-wrap: wrap;
}

.review-form-card .w-input,
.review-form-card .photo-drop input[type="file"] {
    text-align: left;
}