/* ===== SUGGESTIONS TAB: feature-request list + star rating =====
   Loaded after rocoto-ui.css / rocoto-app.css (see suggestions.html's css block), so these
   rules are written to match the roughening pass already in force: 2-3px radii, hard 1px #000
   borders, inset recessed panels, dotted post separators, small caps labels. */

.compose-sugg{display:flex;gap:8px;align-items:center}
.compose-sugg textarea{flex:1;min-width:0;margin:0;resize:none;height:30px;min-height:30px;max-height:30px;box-sizing:border-box;padding:6px 8px;line-height:16px;overflow:hidden}
.compose-sugg .slab{height:30px;width:64px;min-width:0;flex:none;justify-content:center}

.sugg-list-note{margin:-4px 0 10px}

.sugg-row{display:flex;gap:9px;padding:10px 0;border-top:1px dotted #666}
.sugg-row:first-child{border-top:0}

.sugg-rank{flex:none;width:24px;padding-top:1px;text-align:center;font:700 15px var(--f-logo);color:var(--muted)}
.sugg-rank.r1{color:var(--ac)}

.sugg-body{flex:1;min-width:0}
.sugg-top{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}

.sugg-text{font-size:13px;line-height:1.5;margin:2px 0 8px;color:var(--text)}

.starline{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:6px 8px;border-radius:2px;background:linear-gradient(var(--inset-a),var(--inset-b));border:1px solid #000;box-shadow:inset 0 1px 4px rgba(0,0,0,.9)}

/* skeuomorphic star icons: SVG "enamel pin" treatment - the same radial-highlight-plus-hard-edge
   formula the theme already uses for .playbtn / .sw, recolored per state. Gradients are defined
   once in a hidden <svg><defs> at the top of suggestions.html (#starGradRed/Green/Blue/Off).
   Red = the average rating (shown to everyone, left-most in the row); blue = your own locked-in vote. */
.stars{display:inline-flex;flex-direction:row-reverse;gap:2px;align-items:center}
.staricon{display:block;width:17px;height:17px;overflow:visible;filter:drop-shadow(0 1px 1px rgba(0,0,0,.65))}
.staricon path{stroke:#000;stroke-width:1;stroke-linejoin:round;fill:url(#starGradOff)}
.starbtn{display:inline-block;border:0;background:none;padding:2px;margin:0;cursor:pointer;line-height:0;border-radius:2px}
.stars.readonly .staricon.lit path{fill:url(#starGradRed)}
.stars.readonly.mine .staricon.lit path{fill:url(#starGradBlue)}
.stars:not(.readonly) .starbtn:hover .staricon path,
.stars:not(.readonly) .starbtn:hover ~ .starbtn .staricon path{fill:url(#starGradBlue)}
.stars:not(.readonly) .starbtn:hover .staricon,
.stars:not(.readonly) .starbtn:hover ~ .starbtn .staricon{filter:drop-shadow(0 1px 1px rgba(0,0,0,.65)) brightness(1.18)}
.starbtn:disabled{cursor:default}
.starbtn:focus-visible{outline:1px dotted #6aa9ea;outline-offset:1px}
.starbtn:active .staricon{transform:translateY(1px)}

.avgline{font-size:10px;color:var(--muted)}
.avgline b{color:var(--head)}

.voteline{font-size:10px;color:#6aa9ea;font-weight:700;padding:2px 7px;border-radius:2px;background:rgba(106,169,234,.14);border:1px solid rgba(106,169,234,.5)}
.voteline.show{animation:sugg-voteflash 1.1s ease-out}
@keyframes sugg-voteflash{0%{box-shadow:0 0 0 2px #6aa9ea}70%{box-shadow:0 0 0 2px #6aa9ea}100%{box-shadow:0 0 0 0 rgba(106,169,234,0)}}

.sugg-error{font-size:10px;color:#e0895a;font-weight:700}

.owner-only{display:none}
#suggestions-page[data-viewer-admin="1"] .owner-only{display:inline-flex}
.sugg-owner-ctl{align-items:center;gap:10px;margin-left:auto}
.sugg-action{display:inline-flex;align-items:center;gap:6px}
/* same look as the post action buttons (report/pin/delete) -- see .rx in rocoto-ui.css */
.complete-btn,.delete-btn{padding:1px 7px;border-radius:3px;font:700 10px var(--f-body);color:#ddd;
  background:linear-gradient(#5a5a5a,#3e3e3e);border:1px solid #000;box-shadow:inset 0 1px 0 rgba(255,255,255,.25);text-shadow:0 -1px 0 #000}
.complete-btn:hover,.delete-btn:hover{filter:brightness(1.15)}
.delete-btn{color:#e2554a}
.confirm-row{display:none;align-items:center;gap:7px;font-size:10px}
.confirm-row.show{display:inline-flex}
.confirm-row .yes{color:#e2554a;font-weight:700;cursor:pointer;text-decoration:underline}
.confirm-row .no{color:var(--muted);cursor:pointer;text-decoration:underline}

.sugg-row.leaving{opacity:0;max-height:0;padding:0;margin:0;overflow:hidden;transition:opacity .5s ease,max-height .5s ease,padding .5s ease,margin .5s ease}
.sugg-done-badge{display:none}
.sugg-row.done .sugg-done-badge{display:inline-block}
.sugg-row.done .sugg-text{color:var(--muted);text-decoration:line-through}
.sugg-row.done .starline{opacity:.5}

.done-log{margin-top:10px;padding-top:8px;border-top:1px dotted #666;font-size:10px;color:var(--muted);line-height:1.6}
.done-log b{color:var(--ac)}

.sugg-empty{font-size:12px;color:var(--muted);padding:6px 0}

/* ===== "Rate Rocoto": a star-INPUT widget, distinct from the read-only/vote stars above -----
   The suggestion-vote widget above swaps to a separate readonly block the instant you vote, so
   it never needs to show a lit star without a hover. This one stays editable (post again any
   time to change your rating), so the chosen stars need to stay lit on their own. */
.stars:not(.readonly) .staricon.lit path{fill:url(#starGradBlue)}
.rate-form{display:flex;flex-direction:column;gap:8px}
.rate-form-row{display:flex;gap:8px;align-items:center}
.rate-form-row textarea{flex:1;min-width:0;margin:0;resize:none;height:30px;min-height:30px;max-height:30px;box-sizing:border-box;padding:6px 8px;line-height:16px;overflow:hidden}
.rate-form-row .slab{height:30px;width:64px;min-width:0;flex:none;justify-content:center}

@keyframes sugg-star-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.sugg-error-shake{animation:sugg-star-shake .4s ease}