/* dashboard.css
   Uses the CSS variables and fonts already defined at :root in
   index.html (--bg-card, --border, --shadow-soft, --text-primary,
   --text-secondary, --text-muted, --brown, --brown-dim, --brown-light)
   so this matches the rest of the site automatically, including dark
   mode — nothing to duplicate or keep in sync by hand. */

/* Prevents iOS Safari from auto-inflating font sizes in narrow text
   columns (like the What's new list) relative to the wider desktop
   layout around them. Without this, text can render far larger than
   its actual font-size on mobile, especially in landscape. */
.whats-new__list,
.whats-new__title,
.whats-new__tag,
.dash-card-title {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.dash-whats-new { margin: 32px 0; }
.dash-continue-editing { margin-bottom: 32px; }

.glass-card {
  background: var(--bg-card);
  backdrop-filter: blur(var(--glass-blur, 22px)) saturate(160%);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
  padding: 22px;
}

.dash-card-title {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--brown-dim);
  margin-bottom: 14px;
}

/* Nav profile (login/avatar in the header) */
.nav-profile { display: flex; align-items: center; position: relative; }
.nav-profile__login-btn {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #5865F2;
  background: transparent;
  border: 1.5px solid #5865F2;
  border-radius: 20px;
  padding: 6px 14px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.nav-profile__login-btn:hover { opacity: 0.75; }

.nav-profile__wrap { position: relative; }
.nav-profile__trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 8px 4px 4px;
  border-radius: 20px;
  transition: background 0.15s;
}
.nav-profile__trigger:hover { background: var(--bg-hover); }
.nav-profile__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--brown-light);
}
.nav-profile__username {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
}

.nav-profile__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 180px;
  background: var(--bg-card);
  backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-pop);
  padding: 14px 16px;
  z-index: 200;
}
.nav-profile__dropdown--open { display: block; }
.nav-profile__rank,
.nav-profile__rep,
.nav-profile__joined {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.nav-profile__roles {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.nav-profile__role-pill {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 10px;
  background: var(--bg-hover);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.nav-profile__logout-btn {
  margin-top: 10px;
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-hover);
  border-radius: 12px;
  padding: 6px 0;
  cursor: pointer;
}

/* Continue editing */
.ce-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  min-width: 0;
}
@media (max-width: 700px) {
  .ce-columns { grid-template-columns: minmax(0, 1fr); }
}
.ce-group { min-width: 0; }
.ce-group-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--brown-light);
  margin-bottom: 8px;
}
.ce-card-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.ce-expand-btn {
  margin-top: 8px;
  width: 100%;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--brown-light);
  background: transparent;
  border: 1px solid var(--border-hover);
  border-radius: 10px;
  padding: 6px 0;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ce-expand-btn:hover { background: var(--bg-hover); color: var(--brown-dim); }
.ce-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-hover);
  border: 1px solid var(--border-hover);
  border-radius: 12px;
  padding: 8px 10px 8px 12px;
  min-width: 0;
}
.ce-card__link {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
}
.ce-card__type {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ce-card__title {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  display: block;
}
.ce-bookmark-btn {
  flex-shrink: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--text-muted);
  padding: 2px 4px;
  line-height: 1;
}
.ce-bookmark-btn--active { color: #f2a623; }

/* Bookmark toggle used directly on guide/plugin/tutorial cards (not just
   inside the dashboard's Continue Editing lists) */
.hunnids-bookmark-toggle {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.hunnids-bookmark-toggle:hover { background: rgba(0, 0, 0, 0.65); }
.hunnids-bookmark-toggle.hunnids-bookmark-toggle--active { color: #f2a623; }
.ce-empty {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: var(--text-muted);
}

/* What's new */
.dash-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash-card-title__pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e6672f;
  box-shadow: 0 0 0 3px rgba(230,103,47,0.2);
  animation: hunnidsPulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes hunnidsPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .dash-card-title__pulse { animation: none; }
}

.whats-new__list { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.whats-new__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--border-hover);
  min-width: 0;
  opacity: 0;
  transform: translateY(6px);
  animation: whatsNewFadeIn 0.35s ease forwards;
  transition: transform 0.15s, background 0.15s;
  border-radius: 8px;
}
.whats-new__item:hover {
  transform: translateX(4px);
  background: var(--bg-hover);
}
@keyframes whatsNewFadeIn {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .whats-new__item { opacity: 1; transform: none; animation: none; }
  .whats-new__item:hover { transform: none; }
}
.whats-new__tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 8px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.whats-new__tag-icon { font-size: 10px; line-height: 1; }
.whats-new__tag--tutorial { background: rgba(112, 122, 138, 0.15); color: var(--brown-light); }
.whats-new__tag--plugin { background: rgba(58, 63, 74, 0.12); color: var(--brown); }
.whats-new__title {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
}
.whats-new__empty {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: var(--text-muted);
}

/* Bookmark bounce — plays whenever the --active class is freshly applied */
.hunnids-bookmark-toggle--active,
.ce-bookmark-btn--active {
  animation: bookmarkBounce 0.3s ease;
}
@keyframes bookmarkBounce {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hunnids-bookmark-toggle--active,
  .ce-bookmark-btn--active { animation: none; }
}

/* Stat count-up numbers */
.stat-val { transition: color 0.2s; }