/* ============================================================
   components.css — Cards, flash, post stats, modals, toast
   ============================================================ */

/* ── 1. FLASH MESSAGES ─────────────────────────────────── */
.flash-stack {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-3);
  max-width:      var(--container-xl);
  margin:         0 auto;
  padding:        var(--sp-4) var(--sp-6) 0;
}
@media (max-width: 640px) {
  .flash-stack { padding-left: var(--sp-4); padding-right: var(--sp-4); }
}

.flash {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--sp-3);
  padding:       var(--sp-3) var(--sp-5);
  border-radius: var(--radius-lg);
  border:        1px solid transparent;
  font-size:     var(--text-sm);
  font-weight:   var(--weight-medium);
  line-height:   var(--leading-normal);
  animation:     fade-in .2s var(--ease);
}
.flash-success {
  background:   var(--color-success-bg);
  color:        var(--color-success);
  border-color: var(--color-success-border);
}
.flash-error   {
  background:   var(--color-error-bg);
  color:        var(--color-error);
  border-color: var(--color-error-border);
}
.flash-warning {
  background:   var(--color-warning-bg);
  color:        var(--color-warning);
  border-color: var(--color-warning-border);
}
.flash-info    {
  background:   var(--color-info-bg);
  color:        var(--color-info);
  border-color: var(--color-info-border);
}

.flash-icon    { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.flash-body    { flex: 1; min-width: 0; }
.flash-close {
  flex-shrink:   0;
  width:         20px;
  height:        20px;
  display:       flex;
  align-items:   center;
  justify-content:center;
  border-radius: var(--radius-sm);
  opacity:       0.65;
  font-size:     1.1rem;
  line-height:   1;
  color:         inherit;
  cursor:        pointer;
  transition:    opacity var(--transition);
}
.flash-close:hover { opacity: 1; }

/* ── 2. POST CARD ──────────────────────────────────────── */
.post-card {
  display:        flex;
  flex-direction: column;
  background:     var(--color-bg-card);
  border:         1px solid var(--color-border);
  border-radius:  var(--radius-lg);
  padding:        var(--sp-4) var(--sp-4) var(--sp-3);
  gap:            var(--sp-2);
  transition:     box-shadow var(--transition), border-color var(--transition);
  box-shadow:     0 1px 2px rgba(15, 31, 15, 0.04);
}
.post-card:hover {
  box-shadow:   0 2px 12px rgba(46,125,50,.10);
  border-color: var(--color-accent-border);
}

/* Meta satırı: kategori pill + nick + avatar + zaman (tek satır) */
.post-card__meta-row {
  display:     flex;
  align-items: center;
  gap:         var(--sp-2);
  flex-wrap:   nowrap;
  min-height:  24px;
}

/* Kategori pill — tümü yeşil ton */
.post-card__cat {
  display:       inline-flex;
  align-items:   center;
  padding:       2px 10px;
  border-radius: var(--radius-full);
  font-size:     var(--text-xs);
  font-weight:   var(--weight-semibold);
  white-space:   nowrap;
  background:    var(--color-accent-light);
  color:         var(--color-accent);
  letter-spacing: 0.01em;
}
.cat--dusunce,.cat--fikir,.cat--analiz,.cat--cikarim,.cat--tespit,.cat--deneme,.cat--aforizma,.cat--soz { background: var(--color-accent-light); color: var(--color-accent); }

.post-card__nick {
  font-size:       var(--text-xs);
  color:           var(--color-accent);
  text-decoration: none;
  font-weight:     var(--weight-medium);
  flex-shrink:     0;
  transition:      color var(--transition-fast);
}
.post-card__nick:hover { color: var(--color-accent-hover); }
.post-card__nick--anon { color: var(--color-text-muted); }

.post-card__avatar-wrap {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            1px;
  flex-shrink:    0;
  margin-left:    auto;
}

.post-card__avatar {
  width:         20px;
  height:        20px;
  border-radius: 50%;
  object-fit:    cover;
  flex-shrink:   0;
}

.post-card__time {
  font-size:   0.6rem;
  color:       var(--color-text-muted);
  white-space: nowrap;
  line-height: 1;
  margin-left: 0;
}

/* Başlık */
.post-card__title {
  font-size:      var(--text-sm);
  font-weight:    var(--weight-bold);
  line-height:    1.45;
  color:          var(--color-text-primary);
  margin:         0;
  letter-spacing: -0.01em;
}
.post-card__title-link {
  color:           inherit;
  text-decoration: none;
  display:         -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:        hidden;
}
.post-card__title-link:hover { color: var(--color-accent); }

/* Önizleme */
.post-card__excerpt {
  font-size:          var(--text-xs);
  color:              var(--color-text-secondary);
  line-height:        1.65;
  flex:               1;
  min-height:         0;
  display:            -webkit-box;
  -webkit-line-clamp: 999;
  -webkit-box-orient: vertical;
  overflow:           hidden;
  margin:             0;
  white-space:        normal;
  word-break:         break-word;
}

/* Footer */
.post-card__footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--sp-2);
  padding-top:     var(--sp-2);
  border-top:      1px solid var(--color-border-subtle);
}

.post-card__stats {
  display:     flex;
  align-items: center;
  gap:         var(--sp-3);
}

.post-card__stat {
  display:     inline-flex;
  align-items: center;
  gap:         3px;
  font-size:   var(--text-xs);
  color:       var(--color-text-muted);
}

.post-card__readmore {
  font-size:       var(--text-xs);
  font-weight:     var(--weight-medium);
  color:           var(--color-accent);
  text-decoration: none;
  white-space:     nowrap;
  transition:      color var(--transition-fast);
}
.post-card__readmore:hover { color: var(--color-accent-hover); text-decoration: underline; }

/* Eski sınıf geriye uyumluluk */
.post-card-read-more { font-size: var(--text-xs); color: var(--color-accent); text-decoration: none; }
.stat-btn { display:inline-flex; align-items:center; gap:3px; font-size:var(--text-xs); color:var(--color-text-muted); background:none; border:none; cursor:pointer; }
.post-card__header { display: none; }
.post-card__author { display: none; }
.post-card__cat-row { display: none; }
.post-card__byline { display: none; }

/* ── 3. POST DETAIL ────────────────────────────────────── */
.post-detail-header { margin-bottom: var(--sp-6); }
.post-detail-title {
  font-size:     var(--text-3xl);
  font-weight:   var(--weight-bold);
  line-height:   var(--leading-tight);
  margin-bottom: var(--sp-5);
  letter-spacing:-0.02em;
}
.post-detail-meta {
  display:     flex;
  align-items: center;
  gap:         var(--sp-4);
  flex-wrap:   wrap;
  margin-bottom: var(--sp-6);
}
.post-author-info {
  display:     flex;
  align-items: center;
  gap:         var(--sp-3);
  text-decoration: none;
}
.post-author-name {
  font-size:   var(--text-sm);
  font-weight: var(--weight-semibold);
  color:       var(--color-text-primary);
}
.post-author-name:hover { color: var(--color-accent); }
.post-date {
  font-size: var(--text-sm);
  color:     var(--color-text-muted);
}

.post-detail-body {
  font-size:   var(--text-md);
  color:       var(--color-text-secondary);
  line-height: var(--leading-loose);
  white-space: pre-wrap;
  word-break:  break-word;
}

.post-actions {
  display:      flex;
  align-items:  center;
  gap:          var(--sp-4);
  padding:      var(--sp-6) 0;
  border-top:   1px solid var(--color-border);
  border-bottom:1px solid var(--color-border);
  margin:       var(--sp-8) 0;
  flex-wrap:    wrap;
}

/* ── 4. COMMENT ────────────────────────────────────────── */
.comment {
  display:    flex;
  gap:        var(--sp-4);
  padding:    var(--sp-5) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.comment:last-child { border-bottom: none; }

.comment-body { flex: 1; min-width: 0; }
.comment-header {
  display:       flex;
  align-items:   center;
  gap:           var(--sp-2);
  margin-bottom: var(--sp-2);
  flex-wrap:     wrap;
}
.comment-author {
  font-size:   var(--text-sm);
  font-weight: var(--weight-semibold);
  color:       var(--color-text-primary);
  text-decoration: none;
}
.comment-author:hover { color: var(--color-accent); }
.comment-time {
  font-size: var(--text-xs);
  color:     var(--color-text-muted);
}
.comment-text {
  font-size:  var(--text-sm);
  color:      var(--color-text-secondary);
  line-height:var(--leading-relaxed);
  white-space:pre-wrap;
  word-break: break-word;
}

/* Comment form */
.comment-form {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-3);
  margin-top:     var(--sp-6);
}
.comment-form-row {
  display:     flex;
  align-items: flex-end;
  gap:         var(--sp-3);
}

/* ── 5. TOAST ──────────────────────────────────────────── */
.toast-container {
  position:       fixed;
  bottom:         var(--sp-6);
  right:          var(--sp-6);
  z-index:        var(--z-toast);
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-2);
  max-width:      380px;
  width:          100%;
  pointer-events: none;
}
.toast {
  display:       flex;
  align-items:   center;
  gap:           var(--sp-3);
  padding:       var(--sp-3) var(--sp-4);
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow-xl);
  border:        1px solid transparent;
  font-size:     var(--text-sm);
  font-weight:   var(--weight-medium);
  pointer-events:all;
  animation:     fade-in .2s var(--ease);
}
.toast-success {
  background:   var(--color-success-bg);
  color:        var(--color-success);
  border-color: var(--color-success-border);
}
.toast-error {
  background:   var(--color-error-bg);
  color:        var(--color-error);
  border-color: var(--color-error-border);
}
.toast-warning {
  background:   var(--color-warning-bg);
  color:        var(--color-warning);
  border-color: var(--color-warning-border);
}
.toast-info {
  background:   var(--color-info-bg);
  color:        var(--color-info);
  border-color: var(--color-info-border);
}
.toast-icon  { flex-shrink: 0; }
.toast-msg   { flex: 1; }
.toast-close {
  opacity:  .65;
  cursor:   pointer;
  flex-shrink: 0;
  font-size:1.1rem;
  line-height:1;
  color:    inherit;
  background:none;
  border:   none;
  padding:  0;
}
.toast-close:hover { opacity: 1; }

/* ── 6. MODAL ──────────────────────────────────────────── */
.modal-backdrop {
  position:   fixed;
  inset:      0;
  background: var(--color-bg-overlay);
  z-index:    var(--z-overlay);
  display:    flex;
  align-items:center;
  justify-content: center;
  padding:    var(--sp-4);
}
.modal-backdrop[hidden] { display: none; }

.modal {
  background:    var(--color-bg-card);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow:    var(--shadow-xl);
  width:         100%;
  max-width:     520px;
  max-height:    90vh;
  overflow-y:    auto;
  animation:     fade-in .2s var(--ease);
}
.modal-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--sp-6) var(--sp-6) var(--sp-4);
  border-bottom:   1px solid var(--color-border);
}
.modal-title   { font-size: var(--text-lg); font-weight: var(--weight-bold); }
.modal-close   {
  width:         32px;
  height:        32px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  border-radius: var(--radius-md);
  color:         var(--color-text-muted);
  font-size:     1.4rem;
  line-height:   1;
  cursor:        pointer;
  transition:    background var(--transition), color var(--transition);
  border:        none;
  background:    none;
}
.modal-close:hover { background: var(--color-bg-muted); color: var(--color-text-primary); }
.modal-body    { padding: var(--sp-6); }
.modal-footer  {
  padding:        var(--sp-4) var(--sp-6) var(--sp-6);
  display:        flex;
  gap:            var(--sp-3);
  justify-content:flex-end;
}

/* ── 7. PROFILE CARD ────────────────────────────────────── */
.profile-header-top {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             var(--sp-6);
  margin-bottom:   var(--sp-5);
  flex-wrap:       wrap;
}
.profile-info    { display: flex; align-items: flex-start; gap: var(--sp-5); flex: 1; }
.profile-nick    {
  font-size:   var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  color:       var(--color-text-primary);
}
.profile-bio     {
  font-size:   var(--text-sm);
  color:       var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-top:  var(--sp-2);
}
.profile-bio-more {
  font-size:   var(--text-xs);
  font-weight: var(--weight-semibold);
  color:       var(--color-accent);
  cursor:      pointer;
  background:  none;
  border:      none;
  padding:     0;
  margin-left: var(--sp-2);
}

.profile-stats   {
  display:    flex;
  gap:        var(--sp-8);
  flex-wrap:  wrap;
}
.profile-stat    {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--sp-1);
}
.profile-stat-number {
  font-size:   var(--text-2xl);
  font-weight: var(--weight-bold);
  color:       var(--color-text-primary);
  line-height: 1;
}
.profile-stat-label {
  font-size:   var(--text-xs);
  color:       var(--color-text-muted);
}

.profile-actions {
  display:     flex;
  align-items: center;
  gap:         var(--sp-2);
  flex-shrink: 0;
}

/* ── 8. WRITE FORM ─────────────────────────────────────── */
.write-page {
  max-width: 720px;
  margin:    0 auto;
}
.write-page-title {
  font-size:     var(--text-2xl);
  font-weight:   var(--weight-bold);
  margin-bottom: var(--sp-2);
}
.write-page-subtitle {
  font-size:     var(--text-sm);
  color:         var(--color-text-muted);
  margin-bottom: var(--sp-8);
}

.category-selector {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--sp-2);
  margin-bottom: var(--sp-6);
}
.category-btn {
  padding:       0.3125rem var(--sp-4);
  border-radius: var(--radius-full);
  font-size:     var(--text-sm);
  font-weight:   var(--weight-medium);
  border:        1.5px solid var(--color-border-strong);
  color:         var(--color-text-secondary);
  background:    var(--color-bg-card);
  cursor:        pointer;
  transition:    all var(--transition);
  white-space:   nowrap;
}
.category-btn:hover {
  border-color: var(--color-accent);
  color:        var(--color-accent);
  background:   var(--color-accent-light);
}
.category-btn.selected {
  background:   var(--color-accent);
  color:        var(--color-accent-text);
  border-color: var(--color-accent);
}

.write-textarea {
  min-height: 240px;
  font-size:  var(--text-base);
  line-height:var(--leading-relaxed);
}
.write-char-count {
  text-align: right;
  font-size:  var(--text-xs);
  color:      var(--color-text-muted);
}
.write-char-count.warn { color: var(--color-warning); }
.write-char-count.over { color: var(--color-error); }

.write-options {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-3);
  padding:        var(--sp-5);
  background:     var(--color-bg-subtle);
  border-radius:  var(--radius-xl);
  border:         1px solid var(--color-border);
  margin:         var(--sp-5) 0;
}
.write-paid-option {
  border:        1.5px dashed var(--color-accent-border);
  border-radius: var(--radius-lg);
  padding:       var(--sp-4);
  background:    var(--color-accent-light);
  transition:    background var(--transition);
}
.write-paid-option .form-check-label {
  font-weight: var(--weight-semibold);
  color:       var(--color-accent);
}
.write-paid-desc {
  font-size:   var(--text-xs);
  color:       var(--color-text-muted);
  margin-left: calc(1rem + var(--sp-3));
  margin-top:  var(--sp-1);
}

.write-footer {
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  padding-top:     var(--sp-5);
  border-top:      1px solid var(--color-border);
}

/* ── 9. GOOGLE SIGN-IN BUTTON ──────────────────────────── */
.btn-google {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--sp-3);
  width:           100%;
  padding:         0.65rem var(--sp-4);
  background:      var(--color-bg-card);
  border:          1.5px solid var(--color-border-strong);
  border-radius:   var(--radius-lg);
  font-size:       var(--text-sm);
  font-weight:     var(--weight-semibold);
  color:           var(--color-text-primary);
  cursor:          pointer;
  text-decoration: none;
  transition:      background var(--transition), border-color var(--transition);
}
.btn-google:hover {
  background:   var(--color-bg-subtle);
  border-color: var(--color-text-muted);
  color:        var(--color-text-primary);
}
.btn-google-icon {
  width:      18px;
  height:     18px;
  flex-shrink:0;
}

/* ── 10. SORT BAR ──────────────────────────────────────── */
.sort-bar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--sp-4);
  flex-wrap:       wrap;
  margin-bottom:   var(--sp-5);
}
.sort-bar-title {
  font-size:   var(--text-xl);
  font-weight: var(--weight-bold);
  color:       var(--color-text-primary);
}
.sort-options  {
  display:     flex;
  align-items: center;
  gap:         var(--sp-2);
  flex-wrap:   wrap;
}
.sort-btn {
  padding:       0.25rem var(--sp-3);
  border-radius: var(--radius-full);
  font-size:     var(--text-xs);
  font-weight:   var(--weight-medium);
  color:         var(--color-text-secondary);
  border:        1px solid var(--color-border);
  background:    var(--color-bg-card);
  cursor:        pointer;
  white-space:   nowrap;
  text-decoration: none;
  transition:    all var(--transition);
}
.sort-btn:hover {
  border-color: var(--color-accent);
  color:        var(--color-accent);
}
.sort-btn.active {
  background:   var(--color-accent);
  color:        var(--color-accent-text);
  border-color: var(--color-accent);
  font-weight:  var(--weight-semibold);
}

/* ── 11. CATEGORY HUB CARD ─────────────────────────────── */
.hub-category-card {
  display:         flex;
  align-items:     center;
  gap:             var(--sp-3);
  padding:         var(--sp-4) var(--sp-5);
  background:      var(--color-bg-card);
  border:          1px solid var(--color-border);
  border-radius:   var(--radius-lg);
  text-decoration: none;
  color:           var(--color-text-secondary);
  font-size:       var(--text-sm);
  font-weight:     var(--weight-medium);
  transition:      all var(--transition);
}
.hub-category-card:hover {
  border-color: var(--color-accent);
  color:        var(--color-accent);
  background:   var(--color-accent-light);
  transform:    translateY(-1px);
  box-shadow:   var(--shadow-sm);
}
.hub-category-icon { font-size: 1.25rem; line-height: 1; }

/* ── 12. THEME TOGGLE ───────────────────────────────────── */
.theme-toggle {
  width:         36px;
  height:        20px;
  background:    var(--color-border-strong);
  border-radius: var(--radius-full);
  position:      relative;
  cursor:        pointer;
  border:        none;
  transition:    background var(--transition);
  flex-shrink:   0;
}
.theme-toggle.on  { background: var(--color-accent); }
.theme-toggle::after {
  content:     '';
  position:    absolute;
  width:       14px;
  height:      14px;
  background:  white;
  border-radius: 50%;
  top:         3px;
  left:        3px;
  transition:  transform .2s var(--ease);
  box-shadow:  var(--shadow-xs);
}
.theme-toggle.on::after { transform: translateX(16px); }

/* ── 13. SETTINGS LAYOUT ───────────────────────────────── */
.settings-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap:     var(--sp-8);
  align-items: start;
}
.settings-nav {
  background:    var(--color-bg-card);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow:      hidden;
  position:      sticky;
  top:           calc(var(--navbar-h) + var(--sp-4));
}
.settings-nav-item {
  display:       flex;
  align-items:   center;
  gap:           var(--sp-3);
  padding:       var(--sp-3) var(--sp-5);
  font-size:     var(--text-sm);
  font-weight:   var(--weight-medium);
  color:         var(--color-text-secondary);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-subtle);
  transition:    background var(--transition), color var(--transition);
}
.settings-nav-item:last-child { border-bottom: none; }
.settings-nav-item:hover      { background: var(--color-bg-subtle); color: var(--color-text-primary); }
.settings-nav-item.active     { background: var(--color-accent-light); color: var(--color-accent); font-weight: var(--weight-semibold); }

.settings-section {
  background:    var(--color-bg-card);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow:      hidden;
  margin-bottom: var(--sp-5);
}
.settings-section-header {
  padding:       var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--color-border);
  background:    var(--color-bg-subtle);
}
.settings-section-title {
  font-size:   var(--text-base);
  font-weight: var(--weight-semibold);
  color:       var(--color-text-primary);
}
.settings-section-desc {
  font-size:   var(--text-xs);
  color:       var(--color-text-muted);
  margin-top:  var(--sp-1);
}
.settings-section-body { padding: var(--sp-6); }
.settings-section-footer {
  padding:     var(--sp-4) var(--sp-6);
  border-top:  1px solid var(--color-border-subtle);
  background:  var(--color-bg-subtle);
  display:     flex;
  justify-content: flex-end;
  gap:         var(--sp-3);
}

@media (max-width: 768px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav    { position: static; }
}

/* ── Canlı arama dropdown ─────────────────────────── */
.live-search {
  position: relative;
}
.live-search__panel {
  position:         absolute;
  top:              calc(100% + 6px);
  left:             0;
  right:            0;
  z-index:          1200;
  max-height:       min(70vh, 420px);
  overflow-y:       auto;
  background:       var(--color-bg);
  border:           1px solid var(--color-border);
  border-radius:    var(--radius-lg);
  box-shadow:       0 8px 28px rgba(0, 0, 0, .12);
  padding:          var(--sp-2) 0;
}
.live-search__panel[hidden] { display: none; }
.live-search__empty {
  margin:    0;
  padding:   var(--sp-3) var(--sp-4);
  font-size: var(--text-sm);
  color:     var(--color-text-muted);
}
.live-search__section + .live-search__section {
  border-top: 1px solid var(--color-border);
  margin-top: var(--sp-1);
  padding-top: var(--sp-1);
}
.live-search__heading {
  margin:         0;
  padding:        var(--sp-2) var(--sp-4) var(--sp-1);
  font-size:      0.68rem;
  font-weight:    var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--color-text-muted);
}
.live-search__list {
  list-style: none;
  margin:     0;
  padding:    0;
}
.live-search__link {
  display:         block;
  padding:         10px var(--sp-4);
  text-decoration: none;
  color:           inherit;
  transition:      background var(--transition-fast);
}
.live-search__link:hover,
.live-search__link:focus-visible {
  background: var(--color-bg-muted);
  outline:    none;
}
.live-search__link--user {
  display:     flex;
  align-items: center;
  gap:         var(--sp-3);
}
.live-search__avatar {
  width:        32px;
  height:       32px;
  border-radius: 50%;
  object-fit:   cover;
  flex-shrink:  0;
}
.live-search__user-info {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  min-width:      0;
}
.live-search__user-info strong {
  font-size:   var(--text-sm);
  color:       var(--color-accent);
  font-weight: var(--weight-semibold);
}
.live-search__user-info small {
  font-size:     var(--text-xs);
  color:         var(--color-text-muted);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.live-search__post-title {
  display:    block;
  font-size:  var(--text-sm);
  font-weight: var(--weight-semibold);
  color:      var(--color-text);
  line-height: 1.35;
}
.live-search__post-meta {
  display:   block;
  font-size: var(--text-xs);
  color:     var(--color-text-muted);
  margin-top: 2px;
}
.live-search__post-excerpt {
  display:    block;
  font-size:  var(--text-xs);
  color:      var(--color-text-muted);
  margin-top: 4px;
  line-height: 1.5;
}
.live-search--mobile .live-search__panel {
  left:  var(--sp-3);
  right: var(--sp-3);
}