/* Shared story actions: quiet, touch-sized controls with no purchase semantics. */
.story-card { position: relative; }
.favorite-form { position: absolute; z-index: 2; top: .65rem; right: .65rem; margin: 0; }
.favorite-button { display: grid; place-items: center; width: 46px; height: 46px; padding: 8px; border: 0; border-radius: 50%; background: transparent; color: #fff8e6; cursor: pointer; filter: drop-shadow(0 1px 2px #302a23); }
.story-card > a.favorite-button { position: absolute; z-index: 2; top: .65rem; right: .65rem; }
.favorite-button svg { width: 30px; height: 30px; overflow: visible; }
.favorite-button path { fill: transparent; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.favorite-button[aria-pressed="true"] { color: #ffc34f; }
.favorite-button[aria-pressed="true"] path { fill: #ffc34f; stroke: #ffdf8a; }
.favorite-button:hover { background: #20232133; }
.favorite-button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; background: #193b43; }
.favorite-button:disabled, .vote-button:disabled { cursor: wait; opacity: .65; }
.story-rating { width: 44px; height: 44px; flex: none; position: relative; display: inline-grid; place-items: center; color: var(--teal); font-size: .83rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.story-rating svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke-width: 3; }
.rating-track { stroke: var(--control-line); opacity: .4; }
.rating-fill { stroke: var(--teal); stroke-linecap: round; }
.card-meta .story-rating { margin-left: auto; order: 2; }
.story-votes { margin-block: 2rem 1rem; padding: 1.5rem 0; border-block: 1px solid var(--control-line); }
.story-votes h2 { margin: 0; font-size: 1.35rem; }
.story-votes p { margin: .5rem 0; font-size: .9rem; color: var(--muted); }
.vote-actions, .vote-actions form { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; }
.vote-actions { margin-top: 1rem; }
.vote-button { min-height: 46px; padding: .65rem .85rem; border: 1px solid var(--control-line); border-radius: 2rem; background: var(--card); color: var(--ink); font: inherit; font-size: .9rem; cursor: pointer; }
.vote-button span { font-size: 1.25em; margin-right: .3rem; }
.vote-button[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: var(--button-ink); }
.vote-button:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.reaction-status:empty { display: none; }
.reaction-status { color: var(--ink); font-size: .9rem; line-height: 1.5; }
@media (max-width: 620px) {
  .favorite-form, .story-card > a.favorite-button { top: .15rem; right: .15rem; }
  .favorite-button { color: var(--teal); filter: none; width: 44px; height: 44px; }
  .favorite-button svg { width: 25px; height: 25px; }
  .story-card:has(.favorite-button) .card-content h3 { padding-right: 2.2rem; }
  .favorite-button[aria-pressed="true"] path { stroke: #a56717; }
  .story-rating { width: 36px; height: 36px; font-size: .72rem; }
}
@media (max-width: 380px) { .vote-actions { gap: .4rem; } .vote-button { padding-inline: .6rem; } }