/* quick-rating.css version: 1.0.1 - the "N more letters for the credit" line under the words box
 * version: 1.0.0 - the small star box under a picture set, an edit and a video (quick-rating.js):
 *   one line of title and credits, five big stars, then one short question at a time; 44px+ taps, one hand on a phone. */
.fqr-slot:empty { display: none; }
.fs-quick-rating {
    box-sizing: border-box;
    width: 100%;
    max-width: 480px;
    margin: 12px auto 4px;
    padding: 10px 12px 8px;
    border: 1px solid var(--surface-border-accent, rgba(200, 164, 92, .35));
    border-radius: 14px;
    background: var(--bg-elevated, #18181b);
    color: var(--text-primary, #f4f2ee);
    text-align: left;
}
.fs-quick-rating [hidden] { display: none !important; }
.fs-quick-rating button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fqr-head { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.fqr-title { flex: 1 1 auto; min-width: 0; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.fqr-pill {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(200, 164, 92, .16);
    color: var(--accent-blue-light, #e8cc94);
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
}
.fqr-x {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    margin: -8px -10px -8px 0;
    border: 0; border-radius: 10px;
    background: transparent;
    color: var(--text-secondary, #a6a29a);
    font-size: 26px; line-height: 1;
}
.fqr-stars { display: flex; justify-content: space-between; gap: 6px; margin: 6px 0 2px; }
.fqr-star {
    flex: 1 1 0;
    min-width: 44px; height: 48px;
    border: 1px solid var(--bg-active, #27272a); border-radius: 12px;
    background: var(--bg-tertiary, #1a1a1d);
    color: var(--text-disabled, #52525b);
    font-size: 28px; line-height: 1;
    transition: color .12s ease, border-color .12s ease;
}
.fqr-star.is-on { color: #ffcc73; border-color: #c8a45c; }
.fqr-star:focus-visible, .fqr-chip:focus-visible, .fqr-send:focus-visible, .fqr-x:focus-visible, .fqr-link:focus-visible {
    outline: 2px solid var(--accent-blue, #c8a45c); outline-offset: 2px;
}
.fqr-step:empty { display: none; }
.fqr-step { margin-top: 8px; }
.fqr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.fqr-chip {
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--bg-active, #3f3f46); border-radius: 999px;
    background: var(--bg-tertiary, #1a1a1d);
    color: var(--text-primary, #f4f2ee);
    font-size: .95rem;
}
.fqr-chip[aria-pressed="true"] { border-color: #c8a45c; background: rgba(200, 164, 92, .2); color: #ffe2a8; }
.fqr-send {
    width: 100%;
    min-height: 46px;
    border: 0; border-radius: 12px;
    background: var(--accent-blue, #c8a45c);
    color: #17140d;
    font-weight: 700;
}
.fqr-send:disabled { opacity: .45; cursor: default; }
.fqr-words { display: flex; flex-direction: column; gap: 8px; }
.fqr-text {
    box-sizing: border-box;
    width: 100%;
    min-height: 64px;
    padding: 10px 12px;
    border: 1px solid var(--bg-active, #3f3f46); border-radius: 12px;
    background: var(--bg-tertiary, #1a1a1d);
    color: var(--text-primary, #f4f2ee);
    font: inherit; font-size: 16px; /* no zoom on tap (iPhone) */
    resize: vertical;
}
.fqr-link {
    display: block;
    min-height: 44px;
    margin: 4px auto 0;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: var(--text-secondary, #a6a29a);
    font-size: .9rem;
    text-decoration: underline;
}
.fqr-hint { margin: 4px 0 0; color: var(--text-secondary, #a6a29a); font-size: .85rem; line-height: 1.4; }
.fqr-hint[hidden] { display: none; }
.fqr-note { margin: 4px 0 0; min-height: 0; color: var(--accent-blue-light, #e8cc94); font-size: .9rem; line-height: 1.4; }
.fqr-note:empty { display: none; }
/* Under the video: the box spans the card like the buttons above it. */
.generation-item .fqr-slot .fs-quick-rating { max-width: none; margin: 10px 0 4px; }
@media (prefers-reduced-motion: reduce) { .fqr-star { transition: none; } }