/* Custom overrides — Tailwind (CDN) handles the rest. */

:root {
  --sidebar-width: 4rem;
}

/* Tailwind display utilities (.grid, .flex) otherwise beat the hidden attribute. */
[hidden] { display: none !important; }

.flash-message { animation: slideIn 0.2s ease-out; }
@keyframes slideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .flash-message { animation: none; } }

/* Initials badge */
.person-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border-radius: 9999px;
  font-size: 0.65rem; font-weight: 700;
}

/* Term tooltips: {{ term('key', 'Word') }} from partials/_help.html */
.term { position: relative; display: inline; }
.term__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.1rem; height: 1.1rem; margin-left: 0.25rem; vertical-align: text-top;
  border-radius: 9999px; border: 1px solid #a8a29e; background: #fff;
  color: #57534e; font-size: 0.65rem; font-weight: 700; line-height: 1; cursor: pointer;
}
.term__btn:hover, .term__btn[aria-expanded="true"] { background: #dc2626; border-color: #dc2626; color: #fff; }
.term__btn:focus-visible { outline: 2px solid #dc2626; outline-offset: 2px; }
.term__pop {
  position: absolute; z-index: 40; left: 0; top: calc(100% + 0.35rem);
  width: min(18rem, 80vw); padding: 0.6rem 0.75rem;
  background: #292524; color: #fafaf9; border-radius: 0.5rem;
  font-size: 0.8rem; font-weight: 400; line-height: 1.4; text-align: left;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18); white-space: normal;
}
.term__pop a { color: #fca5a5; text-decoration: underline; }

/* Help page anchors clear the mobile top bar */
.help-section { scroll-margin-top: 4.5rem; }