/*
 * OpenYardage — social.css
 * Gehört zu public/js/social.js (Teilaufgabe D: Sterne, Follower, Profilseite).
 * Einbindung durch die Integration:  <link rel="stylesheet" href="css/social.css">
 *
 * Design-Tokens aus MIGRATION-PLAN.md §2. Die Variablen stammen aus dem :root
 * von index.html — jede Angabe hat denselben Wert als Fallback, damit die
 * Komponenten auch allein (z. B. in einer ds/-Karte) korrekt aussehen.
 * Alle UI-Labels: UPPERCASE in 'Courier New'. Rot ausschließlich ⚠-Zeile und
 * Fahne — hier also nirgends.
 */

/* ==========================================================================
   Stern-Button (Book-Zeile, Book-Kopf, Profil)
   Klassen-Selektoren, damit sie die generische button-Regel aus index.html
   sicher überschreiben.
   ========================================================================== */
.oy-star {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-weight: 700; font-size: 12px; line-height: 1; letter-spacing: .04em;
  padding: 7px 12px; white-space: nowrap;
  border: 1.5px solid var(--line, #d8d1c0); border-radius: 3px;
  background: var(--card2, #fffdf7); color: var(--mut, #6b6252);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.oy-star .ico { font-size: 13px; line-height: 1; }
.oy-star .n { font-variant-numeric: tabular-nums; min-width: 1ch; text-align: left; }

.oy-star:hover,
.oy-star:focus-visible {
  background: var(--card2, #fffdf7);
  border-color: var(--gold, #a08c4f); color: var(--gold, #a08c4f);
  outline: none;
}
/* markiert = gefüllt in Gold */
.oy-star.on,
.oy-star.on:hover {
  background: var(--gold, #a08c4f); border-color: var(--gold, #a08c4f); color: #fffdf7;
}
.oy-star.busy { opacity: .65; cursor: progress; }
.oy-star.oy-err { animation: oy-nudge .3s ease-in-out 2; border-color: var(--ink, #21251f); }

/* reine Anzeige (kein Book-Kontext / kein Schreiben möglich) */
.oy-star-static { cursor: default; }
.oy-star-static:hover { border-color: var(--line, #d8d1c0); color: var(--mut, #6b6252); }

@keyframes oy-nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}
@media (prefers-reduced-motion: reduce) {
  .oy-star.oy-err { animation: none; }
}

/* ==========================================================================
   Folgen-Button
   ========================================================================== */
.oy-follow {
  display: block; width: 100%; margin-top: 18px;
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-weight: 700; font-size: 13px; letter-spacing: .04em;
  padding: 11px 0; text-align: center;
  border: 1.5px solid var(--green, #2f6b46); border-radius: 3px;
  background: none; color: var(--green, #2f6b46);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.oy-follow:hover,
.oy-follow:focus-visible { background: var(--green, #2f6b46); color: #f5f1e6; outline: none; }
.oy-follow.on { background: var(--green, #2f6b46); color: #f5f1e6; }
.oy-follow.on:hover { background: var(--green-dk, #1d4a2f); color: #f5f1e6; }
.oy-follow.busy { opacity: .65; cursor: progress; }
.oy-follow.oy-err { animation: oy-nudge .3s ease-in-out 2; }

.oy-selfnote {
  margin-top: 18px; padding: 11px 0; text-align: center;
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em;
  color: var(--faint, #8a8170);
  border: 1px dashed var(--line, #d8d1c0); border-radius: 3px;
}

/* ==========================================================================
   Profilseite  /u/<uid>
   ========================================================================== */
.oy-profile { max-width: 900px; margin: 0 auto; }

.oy-back {
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--green, #2f6b46); cursor: pointer;
  display: inline-block; margin-bottom: 14px;
}
.oy-back:hover { color: var(--green-dk, #1d4a2f); }

.oy-profgrid {
  display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: start;
}
@media (max-width: 720px) {
  .oy-profgrid { grid-template-columns: 1fr; gap: 20px; }
}

/* --- Identitätskarte links --- */
.oy-idcard {
  background: var(--card, #faf7ef);
  border: 1px solid var(--line, #d8d1c0); border-radius: 4px;
  box-shadow: 0 2px 6px rgba(60, 52, 36, .08);
  padding: 24px; text-align: center;
}
.oy-bigavatar {
  width: 84px; height: 84px; border-radius: 50%; margin: 0 auto;
  display: grid; place-items: center; object-fit: cover;
  background: var(--green, #2f6b46); color: #f5f1e6;
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-weight: 700; font-size: 34px;
}
.oy-name {
  margin: 14px 0 0; font-family: var(--serif, Georgia, serif);
  font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--ink, #21251f);
}
.oy-handle {
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-size: 12px; color: var(--mut, #6b6252); margin-top: 4px;
}
.oy-club {
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-size: 11px; letter-spacing: .12em; color: var(--faint, #8a8170); margin-top: 3px;
}
.oy-stats {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px;
  margin-top: 16px;
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-size: 11px; letter-spacing: .06em; color: var(--ink2, #4a463c);
}
.oy-stats b { font-size: 16px; color: var(--ink, #21251f); font-variant-numeric: tabular-nums; }
.oy-bio {
  margin-top: 14px; font-family: var(--serif, Georgia, serif); font-style: italic;
  font-size: 13.5px; color: var(--mut, #6b6252); line-height: 1.55;
}

/* --- Book-Liste rechts --- */
.oy-rulehead { display: flex; align-items: baseline; gap: 14px; margin: 0 0 14px; }
.oy-rulehead .t {
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-size: 12px; font-weight: 700; letter-spacing: .22em; color: var(--green, #2f6b46);
}
.oy-rulehead .r { flex: 1; border-bottom: 1px solid var(--line, #d8d1c0); }

.oy-bookitem {
  background: var(--card2, #fffdf7);
  border: 1px solid var(--line, #d8d1c0); border-radius: 3px;
  padding: 16px 20px; margin-bottom: 10px; cursor: pointer;
}
.oy-bookitem:hover { border-color: var(--green, #2f6b46); }
.oy-bookhead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.oy-bookhead .t {
  font-family: var(--serif, Georgia, serif); font-weight: 700; font-size: 16px;
  color: var(--ink, #21251f);
}
.oy-bookhead .c {
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-size: 11.5px; color: var(--faint, #8a8170);
}
.oy-bookteaser {
  font-family: var(--serif, Georgia, serif); font-style: italic; font-size: 13.5px;
  color: var(--ink2, #4a463c); margin-top: 4px;
}
.oy-bookfoot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.oy-chip {
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-size: 12px; font-weight: 700; white-space: nowrap;
  border: 1.5px solid var(--green, #2f6b46); border-radius: 3px;
  padding: 6px 12px; color: var(--green, #2f6b46); background: var(--card2, #fffdf7);
}
.oy-meta {
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-size: 11.5px; color: var(--faint, #8a8170);
}
.oy-empty {
  font-family: var(--serif, Georgia, serif); font-style: italic;
  color: var(--mut, #6b6252); padding: 20px 0;
}
.oy-note {
  margin-top: 16px;
  font-family: var(--mono, 'Courier New', Courier, monospace);
  font-size: 11.5px; letter-spacing: .04em; color: var(--faint, #8a8170);
}

/* ==========================================================================
   Druck — soziale Bedienelemente gehören nie aufs Yardage Book
   ========================================================================== */
@media print {
  .oy-star, .oy-follow, .oy-selfnote, .oy-back, .oy-note { display: none !important; }
  .oy-profgrid { grid-template-columns: 1fr; }
  .oy-idcard { box-shadow: none; }
}