/* Movie page: poster rail, synopsis column, action panel and reviews. */

/* --movie-star-colour, --movie-star-empty and .movie-stars are global: a grade is
   read the same way here and in a feed. See css/app.css. */

.movie-poster {
    max-width: 15rem;
}

/* The poster column is as tall as everything else, so it can follow the scroll. */
@media (min-width: 768px) {
    .movie-poster-rail {
        position: sticky;
        top: 4.5rem;
    }
}

.movie-title {
    font-size: calc(1.5rem + 1vw);
    font-weight: 600;
    letter-spacing: -0.015em;
}

.movie-title-year {
    font-weight: 400;
    color: var(--bs-secondary-color);
}

.movie-synopsis {
    max-width: 62ch;
    line-height: 1.65;
}

/* Separators trail their item, so a wrap never starts a line with a dot. */
.movie-meta .list-inline-item:not(:last-child)::after {
    content: "·";
    margin-left: 0.5rem;
    color: var(--bs-tertiary-color);
}

.movie-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: 0.35rem;
}

/* A legend is a heading by default; here it only labels a field. */
.rating-fieldset legend {
    float: none;
    width: auto;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

/* Rating input: half-star radio group, no script needed. The stars read left to
   right in the document, so every half is drawn filled and the stylesheet swaps
   in the hollow star for the halves that follow the checked radio. */
.rating-field {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.rating-input-group {
    position: relative;
    display: inline-flex;
    font-size: 1.75rem;
    line-height: 1;
}

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

.rating-star {
    position: relative;
    display: block;
    width: 0.5em;
    height: 1em;
    overflow: hidden;
    cursor: pointer;
}

.rating-star-glyph {
    position: absolute;
    top: 0;
    left: 0;
    width: 1em;
    line-height: 1;
}

.rating-star-right .rating-star-glyph {
    left: -0.5em;
}

.rating-star-on {
    color: var(--movie-star-colour);
}

.rating-star-off {
    color: var(--movie-star-empty);
    visibility: hidden;
}

/* Hollow out every half that follows the checked radio. The selectors are kept
   at a low specificity with :where() so that pointing at the strip wins. */
:where(.rating-input:checked ~ .rating-input) + .rating-star .rating-star-on,
:where(.rating-input-none:checked ~ .rating-input-group) .rating-star-on {
    visibility: hidden;
}

:where(.rating-input:checked ~ .rating-input) + .rating-star .rating-star-off,
:where(.rating-input-none:checked ~ .rating-input-group) .rating-star-off {
    visibility: visible;
}

/* Pointing at the strip previews the rating under the pointer. The group hugs
   the stars, so hovering it always means hovering a star. */
.rating-input-group:hover .rating-star-on {
    visibility: visible;
}

.rating-input-group:hover .rating-star-off {
    visibility: hidden;
}

.rating-input-group:hover .rating-star:hover ~ .rating-star .rating-star-on {
    visibility: hidden;
}

.rating-input-group:hover .rating-star:hover ~ .rating-star .rating-star-off {
    visibility: visible;
}

.rating-input:focus-visible + .rating-star {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.rating-clear {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.rating-input-none:checked ~ .rating-clear {
    color: var(--bs-body-color);
    text-decoration: none;
    font-weight: 600;
}

.rating-input-none:focus-visible ~ .rating-clear {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.movie-review-avatar {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: cover;
}

/* The whole of what the reader did to this movie, behind the short answer the
   panel above gives. A disclosure, so it opens with scripting off; the triangle
   is kept rather than hidden, because here it is the only thing saying there is
   more under the summary than the summary. */
.movie-log-history-toggle {
    cursor: pointer;
    color: var(--bs-secondary-color);
}

.movie-log-history-toggle:hover,
.movie-log-history[open] > .movie-log-history-toggle {
    color: var(--bs-body-color);
}

.movie-log-history-row + .movie-log-history-row {
    border-top: 1px solid var(--bs-border-color);
}