/* Shared "How is it?" guest rating form styles — PR 5 of the 2026-09-28
   batches/ratings/archive plan pulled these out of container.css into their
   own stylesheet once batch.php grew the same form (rating_form_handler.php,
   partials/rating_form.php): a scanned bottle has no linked keg, so the form
   needed a home that isn't container-page-specific. Class names are kept as
   `.container-*` on purpose — they're the ones the shared partial already
   used, and renaming them would only add churn with no behaviour change.
   Linked from both container.php and batch.php, after theme.css. Same token
   language as assets/view.css's .flash-success/.flash-error and
   .suggest-beer-form — this is the closest existing public-form pattern. */

.container-rating-flash {
    padding: 12px 14px;
    border-radius: var(--radius);
    margin-bottom: 14px;
    font-weight: 600;
}

.container-rating-flash-success {
    background: var(--paper);
    color: var(--pine);
    border: 2px solid var(--pine);
}

.container-rating-flash-error {
    background: var(--paper);
    color: var(--rust);
    border: 2px solid var(--rust);
}

.container-rating-existing {
    color: var(--ink-soft);
    margin-bottom: 14px;
}

.container-rating-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 480px;
}

.container-star-rating {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border: none;
    padding: 0;
    margin: 0;
}

.container-star-rating-legend {
    width: 100%;
    color: var(--ink-soft);
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: 4px;
    padding: 0;
}

/* A star is a normal radio + label pair — no JS, no CSS-only hover trick —
   just enough sizing/spacing to make each one a comfortable tap target on a
   phone. The radio itself is visually hidden behind its label rather than
   display:none (which some assistive tech treats as removed from the
   accessibility tree); it's still focusable and operable by keyboard. */
.container-star-option {
    position: relative;
}

.container-star-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.container-star-option label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 6px 10px;
    border: var(--border);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink-soft);
    font-size: 1.3em;
    cursor: pointer;
}

.container-star-option input[type="radio"]:checked + label {
    background: var(--moss-lift);
    color: var(--ink-deep);
    border-color: var(--moss);
}

.container-star-option input[type="radio"]:focus-visible + label {
    outline: 2px solid var(--moss);
    outline-offset: 2px;
}

/* Visually hidden but still announced by assistive tech — the accessible
   name for each star option ("3 stars"), since the visible glyphs are
   marked aria-hidden. */
.container-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.container-rating-comment-label {
    color: var(--ink-soft);
    font-size: 0.85em;
}

.container-rating-comment {
    background: var(--paper);
    border: var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    color: var(--ink);
    font-family: inherit;
    font-size: 0.95em;
    resize: vertical;
    min-height: 60px;
}

.container-rating-comment::placeholder {
    color: var(--ink-soft);
}

.container-rating-submit {
    position: relative;
    align-self: flex-start;
    background-color: var(--ink);
    color: var(--paper);
    border: none;
    padding: 10px 20px;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.container-rating-submit:hover {
    background-color: var(--moss-lift);
}