/* =============================================================================
   THE FORGE — Components (cards, buttons, forms, chips, rank badges, thread rows)
   ============================================================================= */

/* -------- Glass panel -------- */
.glass-panel {
  background: var(--forge-glass-bg);
  backdrop-filter: blur(var(--forge-glass-blur)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--forge-glass-blur)) saturate(1.3);
  border: var(--forge-glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

/* -------- Card -------- */
.forge-card {
  padding: var(--sp-5);
  background: var(--forge-bg-card);
  border: 1px solid var(--forge-border-glass);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .35s var(--ease-out), border-color .35s var(--ease-out), background .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.forge-card:hover {
  background: var(--forge-bg-card-hover);
  border-color: var(--forge-border-glow);
  transform: translateY(-2px);
  box-shadow: var(--shadow), 0 0 0 1px var(--app-accent) inset, 0 0 36px var(--app-glow);
}
.forge-card h3 { margin-top: 0; }
.forge-card .card-footer { display: flex; justify-content: space-between; margin-top: var(--sp-4); color: var(--forge-text-muted); font-size: .85rem; }

/* -------- Buttons -------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius);
  font-weight: 600; font-size: .92rem;
  letter-spacing: .01em;
  border: 1px solid transparent;
  transition: transform .15s var(--ease-out), background .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s var(--ease-out);
  cursor: pointer; user-select: none;
}
.btn:active { transform: translateY(1px) scale(.98); }

.btn-primary {
  color: #0A0C10;
  background: linear-gradient(135deg, var(--forge-gold) 0%, #E8BF5E 50%, #B8961A 100%);
  box-shadow: 0 6px 24px var(--forge-gold-glow);
}
.btn-primary:hover { box-shadow: 0 10px 32px var(--forge-gold-glow), 0 0 0 1px var(--forge-gold) inset; }

.btn-secondary {
  color: var(--forge-text-primary);
  background: rgba(255,255,255,.04);
  border-color: var(--forge-border-glow);
}
.btn-secondary:hover { background: rgba(255,255,255,.08); border-color: var(--forge-gold); }

.btn-ghost { color: var(--forge-text-secondary); background: transparent; }
.btn-ghost:hover { color: var(--forge-text-primary); }

.btn-danger { color: #fff; background: rgba(248,113,113,.15); border-color: rgba(248,113,113,.4); }
.btn-danger:hover { background: rgba(248,113,113,.25); }

.btn-sm { padding: var(--sp-2) var(--sp-3); font-size: .82rem; }
.btn-icon { padding: var(--sp-2); width: 36px; height: 36px; }

/* -------- Forms -------- */
.form-field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.form-field label { font-size: .85rem; color: var(--forge-text-secondary); font-weight: 500; }
.form-field .hint { font-size: .78rem; color: var(--forge-text-muted); }
.form-field .error { font-size: .8rem; color: var(--forge-status-offline); }

.input, .textarea, .select {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: rgba(0,0,0,.35);
  border: 1px solid var(--forge-border-glass);
  border-radius: var(--radius);
  color: var(--forge-text-primary);
  font-size: .95rem;
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--forge-gold);
  box-shadow: 0 0 0 3px var(--forge-gold-glow);
}
.textarea { min-height: 180px; resize: vertical; font-family: var(--font-body); line-height: 1.55; }

/* -------- Chip / Tag -------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 3px var(--sp-2);
  font-size: .72rem; font-weight: 600;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--forge-border-glass);
  color: var(--forge-text-secondary);
  letter-spacing: .02em; text-transform: uppercase;
}
.chip.chip-bug      { color: #FCA5A5; border-color: rgba(248,113,113,.3); background: rgba(248,113,113,.08); }
.chip.chip-feature  { color: #93C5FD; border-color: rgba(96,165,250,.3); background: rgba(96,165,250,.08); }
.chip.chip-question { color: #C4B5FD; border-color: rgba(167,139,250,.3); background: rgba(167,139,250,.08); }
.chip.chip-showcase { color: #86EFAC; border-color: rgba(52,211,153,.3); background: rgba(52,211,153,.08); }
.chip.chip-tip      { color: #FDE68A; border-color: rgba(251,191,36,.3); background: rgba(251,191,36,.08); }
.chip.chip-forged   { color: var(--forge-gold); border-color: var(--forge-gold-dim); background: var(--forge-gold-glow); }

/* -------- Status dots -------- */
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; box-shadow: 0 0 10px currentColor; }
.status-live    { color: var(--forge-status-live);    background: var(--forge-status-live); }
.status-dev     { color: var(--forge-status-dev);     background: var(--forge-status-dev); }
.status-issue   { color: var(--forge-status-issue);   background: var(--forge-status-issue); }
.status-offline { color: var(--forge-status-offline); background: var(--forge-status-offline); }

/* -------- Rank badge -------- */
.rank-badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 2px var(--sp-2);
  font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  border-radius: 4px;
  border: 1px solid currentColor;
}
.rank-badge[data-rank="apprentice"]  { color: var(--rank-apprentice); }
.rank-badge[data-rank="smith"]       { color: var(--rank-smith); }
.rank-badge[data-rank="master_smith"]{ color: var(--rank-master); background: var(--forge-gold-glow); }
.rank-badge[data-rank="architect"]   { color: var(--rank-architect); background: rgba(232,121,249,.1); }

/* -------- Thread row -------- */
.thread-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--forge-border-glass);
  cursor: pointer;
  transition: background .2s var(--ease-out), transform .2s var(--ease-out);
}
.thread-row:hover { background: rgba(255,255,255,.03); transform: translateX(2px); }
.thread-row .votes {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--sp-2); border-radius: var(--radius);
  background: rgba(0,0,0,.2); border: 1px solid var(--forge-border-glass);
  font-weight: 700; font-size: .95rem;
}
.thread-row .votes small { font-size: .65rem; color: var(--forge-text-muted); }
.thread-row .meta {
  display: flex; gap: var(--sp-3); font-size: .8rem; color: var(--forge-text-muted);
  margin-top: var(--sp-2);
}
.thread-row .title {
  color: var(--forge-text-primary); font-weight: 600; font-size: 1rem;
  line-height: 1.3; margin-bottom: 2px;
}
.thread-row .title:hover { color: var(--forge-gold); }
.thread-row .app-tag {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  border: 1px solid var(--forge-border-glass);
  font-size: .8rem; font-weight: 600;
  align-self: flex-start;
}
.thread-row .app-tag .app-letter {
  width: 22px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: .7rem;
  color: #0A0C10;
  background: var(--app-accent);
  box-shadow: 0 0 10px var(--app-glow);
}

/* -------- Avatar -------- */
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--forge-gold), var(--forge-gold-dim));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #0A0C10; font-size: .8rem;
  flex-shrink: 0;
}
.avatar-lg { width: 56px; height: 56px; font-size: 1.2rem; }

/* -------- Badge count -------- */
.badge-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  font-size: .7rem; font-weight: 700;
  border-radius: 999px;
  color: #0A0C10;
  background: var(--forge-gold);
}

/* -------- Toast -------- */
.toast-container { position: fixed; top: 20px; right: 20px; display: flex; flex-direction: column; gap: var(--sp-2); z-index: 100; }
.toast {
  padding: var(--sp-3) var(--sp-5);
  background: var(--forge-bg-card);
  border: 1px solid var(--forge-border-glow);
  border-radius: var(--radius);
  backdrop-filter: blur(var(--forge-glass-blur));
  box-shadow: var(--shadow-lg);
  min-width: 280px; max-width: 380px;
  animation: toast-in .35s var(--ease-spring);
}
.toast.success { border-left: 3px solid var(--forge-status-live); }
.toast.error   { border-left: 3px solid var(--forge-status-offline); }
.toast.info    { border-left: 3px solid var(--forge-status-dev); }

@keyframes toast-in {
  from { transform: translateX(20px) scale(.95); opacity: 0; }
  to   { transform: translateX(0) scale(1);     opacity: 1; }
}

/* -------- Empty state -------- */
.empty-state {
  text-align: center; padding: var(--sp-16) var(--sp-6);
  color: var(--forge-text-muted);
}
.empty-state h3 { color: var(--forge-text-secondary); }

/* -------- Skeleton -------- */
.skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,.03) 0%,
    rgba(255,255,255,.08) 50%,
    rgba(255,255,255,.03) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
  border-radius: var(--radius-sm);
  height: 16px; margin: 6px 0;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* -------- Progress -------- */
.progress-bar {
  width: 100%; height: 6px;
  background: rgba(255,255,255,.05);
  border-radius: 999px; overflow: hidden;
}
.progress-bar .fill {
  height: 100%; background: linear-gradient(90deg, var(--forge-gold-dim), var(--forge-gold));
  box-shadow: 0 0 12px var(--forge-gold-glow);
  transition: width .6s var(--ease-out);
}

/* -------- Reply -------- */
.reply {
  padding: var(--sp-5);
  border: 1px solid var(--forge-border-glass);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.02);
  margin-bottom: var(--sp-4);
  transition: border-color .3s var(--ease-out);
}
.reply.is-solution {
  border-color: var(--forge-gold);
  background: linear-gradient(180deg, rgba(252, 209, 22,.06) 0%, transparent 80%);
  box-shadow: 0 0 32px var(--forge-gold-glow);
}
.reply .reply-head { display: flex; justify-content: space-between; margin-bottom: var(--sp-3); }
.reply .reply-author { display: flex; gap: var(--sp-2); align-items: center; }
.reply .solution-flag { color: var(--forge-gold); font-family: var(--font-display); font-weight: 700; font-size: .8rem; letter-spacing: .1em; }

/* -------- Markdown body -------- */
.md-body { line-height: 1.65; }
.md-body a { color: var(--forge-gold); text-decoration: underline; text-decoration-color: var(--forge-gold-dim); }
.md-body a:hover { text-decoration-color: var(--forge-gold); }
.md-body code {
  padding: 1px 6px; border-radius: 4px;
  background: rgba(252, 209, 22,.1); color: var(--forge-gold);
  font-size: .88em;
}
.md-body pre {
  padding: var(--sp-4);
  background: rgba(0,0,0,.35);
  border: 1px solid var(--forge-border-glass);
  border-radius: var(--radius);
  overflow-x: auto;
}
.md-body pre code { background: transparent; color: var(--forge-text-primary); padding: 0; }
.md-body blockquote {
  margin: 0; padding: var(--sp-2) var(--sp-4);
  border-left: 3px solid var(--forge-gold-dim);
  color: var(--forge-text-secondary);
  background: rgba(252, 209, 22,.04);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* -------- Diagnostic card -------- */
.diag-card {
  padding: var(--sp-4);
  background: rgba(0,0,0,.25);
  border: 1px solid var(--forge-border-glass);
  border-radius: var(--radius);
  font-family: var(--font-mono); font-size: .82rem;
  color: var(--forge-text-secondary);
}
.diag-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-4); }
.diag-card dt { color: var(--forge-text-muted); }
.diag-card dd { margin: 0; color: var(--forge-text-primary); }