add: pairwise elo voting workflow

assets/css/rankings.css

@@ -42,6 +42,186 @@ body.rankings-page #giftwo {
     transform: none;
 }
 
+#voting {
+    padding: 0 2.25rem 1.75rem 2.25rem;
+}
+
+.voting-panel {
+    background:
+        linear-gradient(140deg, rgba(255, 255, 255, 0.97), rgba(240, 248, 247, 0.94));
+    border: 1px solid rgba(16, 16, 16, 0.08);
+    border-radius: 1.5rem;
+    box-shadow: 0 1.75rem 3.5rem rgba(16, 16, 16, 0.08);
+    padding: 1.5rem;
+}
+
+.voting-panel__intro h2,
+.voting-panel__intro p {
+    margin: 0;
+}
+
+.voting-panel__eyebrow {
+    color: #00a892;
+    font-size: 0.8rem;
+    letter-spacing: 0.12em;
+    margin-bottom: 0.75rem;
+    text-transform: uppercase;
+}
+
+.voting-panel__intro h2 {
+    color: #333;
+    font-size: 2rem;
+}
+
+.vote-status {
+    color: #666;
+    margin-top: 0.5rem;
+}
+
+.voting-panel__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    margin-top: 1.25rem;
+}
+
+.vote-message {
+    color: #333;
+    font-size: 0.95rem;
+    margin: 1rem 0 0 0;
+}
+
+.duel-grid {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    margin-top: 1.25rem;
+}
+
+.duel-placeholder {
+    color: #666;
+    grid-column: 1 / -1;
+    margin: 0;
+}
+
+.duel-card {
+    background: #ffffff;
+    border: 1px solid rgba(16, 16, 16, 0.08);
+    border-radius: 1.25rem;
+    box-shadow: 0 1rem 2.5rem rgba(16, 16, 16, 0.08);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.duel-card__button {
+    background: transparent;
+    border: 0;
+    color: inherit;
+    cursor: pointer;
+    display: block;
+    padding: 0;
+    text-align: left;
+    white-space: normal;
+    width: 100%;
+}
+
+.duel-card__button:hover,
+.duel-card__button:focus-visible {
+    color: inherit;
+}
+
+.duel-card__button:focus-visible {
+    outline: 3px solid rgba(0, 211, 183, 0.55);
+    outline-offset: -3px;
+}
+
+.duel-card__button:hover .duel-card__media img,
+.duel-card__button:focus-visible .duel-card__media img {
+    transform: scale(1.02);
+}
+
+.duel-card__media {
+    background: #eff3f8;
+    overflow: hidden;
+}
+
+.duel-card__media img {
+    aspect-ratio: 3 / 4;
+    display: block;
+    object-fit: cover;
+    transition: transform 0.2s ease;
+    width: 100%;
+}
+
+.duel-card__body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.7rem;
+    padding: 1.25rem;
+}
+
+.duel-card__label,
+.duel-card__meta,
+.duel-card__description,
+.duel-card__body h3 {
+    margin: 0;
+}
+
+.duel-card__label,
+.duel-card__meta {
+    text-transform: uppercase;
+}
+
+.duel-card__label {
+    color: #00a892;
+    font-size: 0.78rem;
+    letter-spacing: 0.12em;
+}
+
+.duel-card__title {
+    color: #333;
+    font-size: 1.5rem;
+}
+
+.duel-card__meta {
+    color: #666;
+    font-size: 0.78rem;
+    letter-spacing: 0.08em;
+}
+
+.duel-card__description {
+    color: #777;
+}
+
+.duel-card__cta {
+    color: #101010;
+    display: inline-flex;
+    font-size: 0.92rem;
+    font-weight: 700;
+    margin-top: 0.35rem;
+}
+
+.duel-card__open {
+    align-self: flex-start;
+    border-bottom: 0;
+    color: #666;
+    font-size: 0.82rem;
+    letter-spacing: 0.08em;
+    margin: 0 1.25rem 1.25rem 1.25rem;
+    text-transform: uppercase;
+}
+
+.duel-card__open:hover {
+    color: #00a892;
+}
+
+.vote-hint {
+    color: #666;
+    font-size: 0.85rem;
+    margin: 1rem 0 0 0;
+}
+
 #rankings-summary {
     padding: 0 2.25rem 1.25rem 2.25rem;
 }
@@ -138,6 +318,7 @@ body.rankings-page #giftwo {
     }
 
     #rankings-summary,
+    #voting,
     #rankings,
     body.rankings-page #header,
     body.rankings-page #footer {
@@ -145,6 +326,14 @@ body.rankings-page #giftwo {
         padding-right: 1.25rem;
     }
 
+    .voting-panel {
+        padding: 1.25rem;
+    }
+
+    .duel-grid {
+        grid-template-columns: 1fr;
+    }
+
     .ranking-card {
         grid-template-columns: 1fr;
     }