/* ============================================================
   CLINK — WERTIGKEITS-POLITUR (zuletzt geladen, verfeinert nur)
   Drei Achsen: Bewegung · Feinschliff · Typografie.
   Ändert kein Layout, keine Logik — nur wie es sich anfühlt.
   Editor (Studio) bleibt bewusst unangetastet (Lightroom-Regel).
   ============================================================ */

/* ── Feste Maße für ruhigen Rhythmus ── */
:root {
  --r-sm: 8px;      /* kleine Rundung */
  --r-md: 12px;     /* Karten */
  --r-lg: 16px;     /* Modals */
  --ease: cubic-bezier(0.2, 0.75, 0.2, 1);
}

/* ════════════════════════════════════════════
   1 · BEWEGUNG & ÜBERGÄNGE
   ════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {

  /* Dezentes Druck-Feedback auf allem Tippbaren — der „teure" Effekt */
  .btn-primary, .btn-add, .btn-ghost, .fr-btn, .nav-btn, .seg-btn,
  .app-cta, .shop-buy, .set-link, .post-edit, .post-del, .c-del,
  .tn-clink, .notif-bell, .up-close, .legal-close {
    transition: transform 0.14s var(--ease), opacity 0.14s, border-color 0.14s,
                color 0.14s, background 0.14s;
    -webkit-tap-highlight-color: transparent;
  }
  .btn-primary:active, .btn-add:active, .btn-ghost:active, .fr-btn:active,
  .nav-btn:active, .seg-btn:active, .app-cta:active, .shop-buy:active,
  .tn-clink:active { transform: scale(0.955); }
  .notif-bell:active, .up-close:active, .post-edit:active,
  .post-del:active, .c-del:active { transform: scale(0.88); }

  /* Klickbare Namen/Tags leuchten kurz auf */
  .tag-link, .mention-link, .pn-part, .c-name, .post-name, .friend-id { transition: opacity 0.14s; }
  .tag-link:active, .mention-link:active, .pn-part:active { opacity: 0.6; }

  /* Modals gleiten sanft ein statt hart aufzuploppen (Backdrop + Karte) */
  .up-modal:not([hidden]), .legal-modal:not([hidden]) { animation: clinkFade 0.28s ease both; }
  .up-modal:not([hidden]) .up-card,
  .legal-modal:not([hidden]) .legal-card { animation: clinkSheet 0.36s var(--ease) both; }
  @keyframes clinkFade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes clinkSheet {
    from { opacity: 0; transform: translateY(16px) scale(0.99); }
    to   { opacity: 1; transform: none; }
  }

  /* Feed-Karten & Listenzeilen erscheinen weich */
  .post-card, .friend-row, .notif-row, .hist-item, .ht-item { animation: clinkRise 0.34s var(--ease) both; }
  @keyframes clinkRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* ════════════════════════════════════════════
   2 · FEINSCHLIFF — Laden & leere Zustände
   ════════════════════════════════════════════ */

/* Eleganter Spinner statt nacktem „Lädt …" (Text wird ausgeblendet) */
.feed-loading { position: relative; font-size: 0 !important; padding: 30px 0 !important; }
.feed-loading::after {
  content: ''; display: block; margin: 0 auto;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--chrome-border);
  border-top-color: var(--chrome-text);
  animation: clinkSpin 0.7s linear infinite;
}
@keyframes clinkSpin { to { transform: rotate(360deg); } }

/* Skeleton-Schimmer (Feed-Ladezustand, feed.js) */
.sk-card {
  border: 1px solid var(--chrome-border); border-radius: var(--r-md);
  padding: 14px; margin-bottom: 16px;
}
.sk { position: relative; overflow: hidden; background: var(--chrome-surface); border-radius: var(--r-sm); }
.sk::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.05) 50%, transparent 80%);
  transform: translateX(-100%); animation: clinkShimmer 1.4s ease-in-out infinite;
}
@keyframes clinkShimmer { to { transform: translateX(100%); } }
.sk-line { height: 10px; border-radius: 3px; }
.sk-head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.sk-ava { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.sk-img { height: 210px; border-radius: var(--r-sm); }

/* Leere Zustände: ruhig, zentriert, editorial */
.friend-empty, .draft-empty {
  text-align: center; color: var(--chrome-muted);
  font-size: 11px; letter-spacing: 0.08em; line-height: 1.7;
  padding: 22px 14px;
}

/* Eingaben: zarter Fokus-Ring statt harter Sprung */
.field { transition: border-color 0.16s, box-shadow 0.16s; }
.app-view .field:focus, .up-card .field:focus {
  outline: none; border-color: var(--chrome-muted);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.04);
}

/* Feed-Karten bekommen etwas mehr Ruhe & konsistente Rundung */
.post-card { border-radius: var(--r-md); }
.up-card, .legal-card { border-radius: 0; }

/* ════════════════════════════════════════════
   3 · TYPOGRAFIE & HIERARCHIE
   Space Mono bleibt die Handschrift — nur Rhythmus,
   Tracking und Kontrast werden editorial-ruhiger.
   ════════════════════════════════════════════ */

/* Micro-Labels: mehr Luft zwischen den Buchstaben = teurer */
.set-label, .config-label, .notif-title, .shop-tag, .app-empty-mark {
  letter-spacing: 0.3em !important;
}
.set-label, .notif-title { font-weight: 400; }

/* Titel: größer, leichter, mehr Luft */
.profile-name { font-size: 19px !important; font-weight: 400; letter-spacing: 0.04em !important; }
.app-empty-title { font-size: 17px !important; font-weight: 400; margin-bottom: 14px !important; }
.notif-title { margin-bottom: 20px !important; }

/* Fließtext bekommt mehr Zeilenhöhe (ruhiger, lesbarer) */
.app-empty-text { line-height: 1.75 !important; }
.post-caption { line-height: 1.6; letter-spacing: 0.01em; }
.comment { line-height: 1.6; }

/* Feed-Kopf: Name klarer, Unterzeile leiser */
.post-name { font-size: 13px; letter-spacing: 0.01em; }
.post-sub { font-size: 10px; letter-spacing: 0.06em; opacity: 0.85; }

/* Mehr vertikale Ruhe zwischen Profil-Abschnitten */
.friends-area .set-label { margin-top: 26px; }
.profile-history { gap: 16px; }