/**
 * @file
 * Canonical Neopoet UI components.
 *
 * Token-driven component library introduced by the visual-polish pass.
 * Older bespoke selectors (.toolbar-btn, .read-more-button, .np-feed__tab,
 * .notification-empty, etc.) are aliased here onto the canonical .np-*
 * components so existing markup keeps rendering without per-template churn.
 */

/* ============================================================
 * Tabs — .np-tabs
 * Scoped to .np-tabs so Drupal core's .tabs (admin local tasks)
 * is untouched.
 * ============================================================ */
.np-tabs {
  display: flex;
  gap: 0;
  border-bottom: var(--np-border-width) solid var(--np-border-tertiary);
  margin: 0 0 var(--np-space-4) 0;
  padding: 0;
  list-style: none;
}

.np-tab,
.np-tabs > li > a,
.np-tabs > a {
  display: inline-flex;
  align-items: center;
  gap: var(--np-space-2);
  padding: var(--np-space-2) var(--np-space-4);
  font-family: var(--np-font-sans);
  font-size: var(--np-text-base);
  font-weight: var(--np-weight-medium);
  color: var(--np-text-secondary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--np-duration-base) var(--np-ease-standard),
              border-color var(--np-duration-base) var(--np-ease-standard);
}

.np-tab:hover,
.np-tabs > li > a:hover,
.np-tabs > a:hover {
  color: var(--np-text-primary);
}

.np-tab.is-active,
.np-tab[aria-selected="true"],
.np-tabs > li.is-active > a,
.np-tabs > li > a.is-active,
.np-tabs > a.is-active,
.np-tabs > a[aria-current="page"] {
  color: var(--np-text-primary);
  border-bottom-color: var(--np-text-primary);
}

/* Alias: legacy activity-feed tab classes inherit canonical look. */
.np-feed__tabs {
  display: flex;
  gap: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-bottom: var(--np-border-width) solid var(--np-border-tertiary);
  margin-bottom: var(--np-space-4);
}
.np-feed__tabs .np-feed__tab { white-space: nowrap; flex-shrink: 0; }
.np-feed__tab {
  padding: var(--np-space-2) var(--np-space-4);
  font-family: var(--np-font-sans);
  font-size: var(--np-text-base);
  font-weight: var(--np-weight-medium);
  color: var(--np-text-secondary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color var(--np-duration-base) var(--np-ease-standard),
              border-color var(--np-duration-base) var(--np-ease-standard);
}
.np-feed__tab:hover { color: var(--np-text-primary); }
.np-feed__tab.is-active {
  color: var(--np-text-primary);
  border-bottom-color: var(--np-text-primary);
}

.np-feed__count {
  font-size: var(--np-text-xs);
  background: var(--np-bg-secondary);
  padding: 1px var(--np-space-2);
  border-radius: var(--np-radius-pill);
  color: var(--np-text-secondary);
}

/* ============================================================
 * Empty states — .np-empty-state
 * ============================================================ */
.np-empty-state,
.np-feed__empty,
.notification-empty {
  text-align: center;
  padding: var(--np-space-12) var(--np-space-6);
  color: var(--np-text-tertiary);
  background: var(--np-bg-secondary);
  border-radius: var(--np-radius-md);
  font-size: var(--np-text-sm);
  font-style: normal;
}

.np-empty-state__icon {
  display: block;
  margin: 0 auto var(--np-space-4) auto;
  width: 48px;
  height: 48px;
  color: var(--np-text-tertiary);
}

.np-empty-state__title {
  font-family: var(--np-font-serif);
  font-size: var(--np-text-lg);
  font-weight: var(--np-weight-medium);
  color: var(--np-text-primary);
  margin: 0 0 var(--np-space-2) 0;
  line-height: var(--np-leading-tight);
}

.np-empty-state__body {
  font-size: var(--np-text-sm);
  color: var(--np-text-tertiary);
  margin: 0 0 var(--np-space-4) 0;
  line-height: var(--np-leading-normal);
}

.np-empty-state__actions {
  margin-top: var(--np-space-4);
  display: flex;
  gap: var(--np-space-2);
  justify-content: center;
}

/* ============================================================
 * Headings — global page-title scale
 * Olivero's heading rules are strong; we don't undo them
 * site-wide. We standardize via .np-page-title and .np-card-title
 * surfaces. .np-h1/.np-h2/.np-h3 are escape hatches.
 * ============================================================ */
.np-page-title,
.np-h1 {
  font-family: var(--np-font-serif);
  font-size: var(--np-text-2xl);
  font-weight: var(--np-weight-medium);
  line-height: var(--np-leading-tight);
  color: var(--np-text-primary);
  margin: 0 0 var(--np-space-4) 0;
}

.np-page-title--lg {
  font-size: var(--np-text-3xl);
}

.np-page-title--sm {
  font-size: var(--np-text-xl);
}

.np-h2 {
  font-family: var(--np-font-serif);
  font-size: var(--np-text-xl);
  font-weight: var(--np-weight-medium);
  line-height: var(--np-leading-tight);
  color: var(--np-text-primary);
  margin: 0 0 var(--np-space-3) 0;
}

.np-h3 {
  font-family: var(--np-font-serif);
  font-size: var(--np-text-lg);
  font-weight: var(--np-weight-medium);
  line-height: var(--np-leading-tight);
  color: var(--np-text-primary);
  margin: 0 0 var(--np-space-2) 0;
}

/* ============================================================
 * Buttons — .np-btn family
 * ============================================================ */
.np-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--np-space-2);
  padding: var(--np-space-2) var(--np-space-5);
  font-family: var(--np-font-sans);
  font-size: var(--np-text-base);
  font-weight: var(--np-weight-medium);
  font-style: normal;
  line-height: var(--np-leading-tight);
  border: var(--np-border-width) solid transparent;
  border-radius: var(--np-radius-md);
  background: transparent;
  color: var(--np-text-primary);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--np-duration-base) var(--np-ease-standard),
              color var(--np-duration-base) var(--np-ease-standard),
              border-color var(--np-duration-base) var(--np-ease-standard),
              box-shadow var(--np-duration-base) var(--np-ease-standard);
}

.np-btn:disabled,
.np-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.np-btn--primary {
  background: var(--np-text-primary);
  color: var(--np-text-inverse);
  border-color: var(--np-text-primary);
}
.np-btn--primary:hover {
  background: var(--np-text-secondary);
  color: var(--np-text-inverse);
  border-color: var(--np-text-secondary);
}

.np-btn--secondary {
  background: var(--np-bg-primary);
  color: var(--np-text-primary);
  border-color: var(--np-border-secondary);
}
.np-btn--secondary:hover {
  background: var(--np-bg-secondary);
  border-color: var(--np-border-primary);
  color: var(--np-text-primary);
}

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

.np-btn--danger {
  background: var(--np-color-danger);
  color: var(--np-text-inverse);
  border-color: var(--np-color-danger);
}
.np-btn--danger:hover {
  background: var(--np-color-danger-deep);
  border-color: var(--np-color-danger-deep);
  color: var(--np-text-inverse);
}

.np-btn--link {
  background: transparent;
  color: var(--np-text-link);
  border-color: transparent;
  padding: 0;
  font-weight: var(--np-weight-regular);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.np-btn--link:hover {
  color: var(--np-text-link-hover);
  background: transparent;
}

.np-btn--sm {
  font-size: var(--np-text-sm);
  padding: var(--np-space-2) var(--np-space-4);
}

.np-btn--lg {
  font-size: var(--np-text-md);
  padding: var(--np-space-3) var(--np-space-6);
}

/* ============================================================
 * Cards — .np-card
 * ============================================================ */
.np-card {
  background: var(--np-bg-primary);
  border: var(--np-border-width) solid var(--np-border-tertiary);
  border-radius: var(--np-radius-md);
  padding: var(--np-space-5);
  box-shadow: var(--np-shadow-xs);
  transition: box-shadow var(--np-duration-base) var(--np-ease-standard);
}

.np-card:hover {
  box-shadow: var(--np-shadow-sm);
}

.np-card--flush {
  padding: 0;
}

.np-card__header {
  margin-bottom: var(--np-space-3);
}

.np-card__title {
  font-family: var(--np-font-serif);
  font-size: var(--np-text-lg);
  font-weight: var(--np-weight-medium);
  line-height: var(--np-leading-tight);
  color: var(--np-text-primary);
  margin: 0;
}

/* ============================================================
 * Avatar — .np-avatar
 * ============================================================ */
.np-avatar,
.initials-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--np-radius-circle);
  background: var(--np-bg-secondary);
  color: var(--np-text-primary);
  font-family: var(--np-font-serif);
  font-weight: var(--np-weight-medium);
  overflow: hidden;
}

.np-avatar--admin,
.initials-avatar--admin {
  border: 2px solid var(--np-role-administrative);
}
.np-avatar--premium,
.initials-avatar--premium {
  border: 2px solid var(--np-role-premium);
}
.np-avatar--guide,
.initials-avatar--guide {
  border: 2px solid var(--np-role-guide);
}
.np-avatar--workshop-leader,
.initials-avatar--workshop-leader {
  border: 2px solid var(--np-role-workshop-leader);
}

/* ============================================================
 * Sidebar active state — applied to common menu shapes.
 * ============================================================ */
.np-sidebar-link.is-active,
.np-sidebar-link[aria-current="page"],
.region-sidebar-first .menu-item--active-trail > a,
.region-sidebar-first li.menu-item.is-active > a,
.region-sidebar-first li.menu-item > a.is-active,
.region-sidebar-first li.menu-item > a[aria-current="page"] {
  border-left: calc(var(--np-border-width) * 3) solid var(--np-text-primary);
  background: var(--np-bg-secondary);
  color: var(--np-text-primary);
  font-weight: var(--np-weight-medium);
  transition: background-color var(--np-duration-base) var(--np-ease-standard),
              color var(--np-duration-base) var(--np-ease-standard),
              border-color var(--np-duration-base) var(--np-ease-standard);
}

/* ============================================================
 * Floating action button — .np-fab
 * Used for the poem detail Comment/Critique trigger.
 * ============================================================ */
.np-fab {
  position: fixed;
  right: var(--np-space-6);
  bottom: var(--np-space-6);
  display: inline-flex;
  align-items: center;
  gap: var(--np-space-2);
  padding: var(--np-space-3) var(--np-space-5);
  font-family: var(--np-font-sans);
  font-size: var(--np-text-base);
  font-weight: var(--np-weight-medium);
  color: var(--np-text-primary);
  background: var(--np-bg-primary);
  border: var(--np-border-width) solid var(--np-border-tertiary);
  border-radius: var(--np-radius-pill);
  box-shadow: var(--np-shadow-md);
  text-decoration: none;
  z-index: var(--np-z-sticky);
  transition: box-shadow var(--np-duration-base) var(--np-ease-standard),
              transform var(--np-duration-base) var(--np-ease-standard);
}

.np-fab:hover {
  box-shadow: var(--np-shadow-lg);
  color: var(--np-text-primary);
  text-decoration: none;
}

@media (max-width: 480px) {
  .np-fab { display: none; }
}

/* ============================================================
 * Breadcrumb overflow — keep on one line, ellipsize trailing item.
 * ============================================================ */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow: hidden;
  min-width: 0;
}
.breadcrumb > *:last-child,
.breadcrumb li:last-child,
.breadcrumb li:last-child a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ============================================================
 * Focus ring — global
 * ============================================================ */
:focus-visible {
  outline: 3px solid var(--np-border-focus);
  outline-offset: 2px;
  box-shadow: var(--np-shadow-focus);
  border-radius: inherit;
}