/* requires.management — component styles
   Patterns directly derived from nullpoint.nexus component CSS.
   Uses identical token names, clip-paths, color-mix tints, and hover mechanics.
*/

/* ── Buttons ── */
.btn-primary,
.btn-ghost,
.btn-primary-sm,
.btn-ghost-sm {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);
  font-family:     var(--font-family-body);
  font-weight:     var(--font-weight-heading);
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  cursor:          pointer;
  border:          none;
  outline:         none;
  text-decoration: none;
  transition: opacity var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast), box-shadow var(--transition-fast);
  white-space: nowrap;
}

.btn-primary {
  font-size:  var(--font-base);
  padding:    var(--space-3) var(--space-8);
  background: var(--color-accent);
  color:      var(--color-text-on-accent);
  clip-path:  polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}
.btn-primary:hover { opacity: 0.85; }

.btn-ghost {
  font-size:  var(--font-base);
  padding:    var(--space-3) var(--space-8);
  background: transparent;
  color:      var(--color-text-primary);
  border:     1px solid var(--color-border);
  clip-path:  polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}
.btn-ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }

.btn-primary-sm {
  font-size:  var(--font-small);
  padding:    var(--space-2) var(--space-5);
  background: var(--color-accent);
  color:      var(--color-text-on-accent);
  clip-path:  polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
}
.btn-primary-sm:hover:not(:disabled) { opacity: 0.85; }
.btn-primary-sm:disabled             { opacity: 0.35; cursor: not-allowed; }

.btn-ghost-sm {
  font-size:  var(--font-small);
  padding:    var(--space-2) var(--space-5);
  background: transparent;
  color:      var(--color-text-secondary);
  border:     1px solid var(--color-border);
  clip-path:  polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
}
.btn-ghost-sm:hover:not(:disabled) { color: var(--color-text-primary); border-color: var(--color-text-primary); }

/* Discord sign-in — no clip-path, rounded */
.btn-discord {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);
  font-family:     var(--font-family-mono);
  font-size:       var(--font-small);
  letter-spacing:  0.08em;
  text-transform:  uppercase;
  cursor:          pointer;
  border:          none;
  outline:         none;
  text-decoration: none;
  white-space:     nowrap;
  padding:         var(--space-3) var(--space-6);
  background:      #5865F2;
  color:           #ffffff;
  border-radius:   var(--radius-sm);
  transition:      opacity var(--transition-fast), box-shadow var(--transition-fast);
}
.btn-discord:hover {
  opacity:    0.9;
  box-shadow: 0 0 16px rgba(88, 101, 242, 0.35);
  color:      #ffffff;
}

/* ── Navigation ── */
/* Matches site.css .site-nav__link pattern */
.nav-link {
  font-family:     var(--font-family-mono);
  font-size:       var(--font-tiny);
  letter-spacing:  0.14em;
  text-transform:  uppercase;
  color:           var(--color-text-secondary);
  text-decoration: none;
  position:        relative;
  padding-bottom:  var(--space-1);
  transition:      color var(--transition-fast);
}
.nav-link::after {
  content:    '';
  position:   absolute;
  bottom:     0; left: 0;
  width:      0;
  height:     1px;
  background: var(--color-accent);
  transition: width var(--transition-normal);
}
.nav-link:hover,
.nav-link--active { color: var(--color-accent); }
.nav-link:hover::after,
.nav-link--active::after { width: 100%; }

/* ── Badges / tier indicators ── */
.badge {
  display:        inline-block;
  font-family:    var(--font-family-mono);
  font-size:      var(--font-tiny);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding:        2px var(--space-2);
  border:         1px solid transparent;
}

.badge-resident {
  color:        var(--color-accent);
  border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
}
.badge-operator {
  color:        var(--color-success);
  border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
}
.badge-architect {
  color:        var(--color-warning);
  border-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
}

/* ── User avatar ── */
.user-avatar {
  width:         28px;
  height:        28px;
  border-radius: 50%;
  background:    var(--color-foreground);
  border:        1px solid var(--color-border);
  overflow:      hidden;
  flex-shrink:   0;
  transition:    border-color var(--transition-fast);
}
.user-avatar:hover { border-color: var(--color-accent); }
.user-avatar img   { width: 100%; height: 100%; object-fit: cover; }

/* ── Service cards ── */
/* Matches rules-index-card pattern from nullpoint rules.css exactly */
.service-card {
  display:         flex;
  flex-direction:  column;
  gap:             var(--space-3);
  padding:         var(--space-5);
  background:      var(--color-surface-raised);
  border:          1px solid var(--color-border);
  text-decoration: none;
  color:           inherit;
  position:        relative;
  overflow:        hidden;
  transition:      border-color var(--transition-normal),
                   transform var(--transition-normal),
                   box-shadow var(--transition-normal);
}

/* Accent line slides in on hover — same as rules-index-card::before */
.service-card::before {
  content:          '';
  position:         absolute;
  top: 0; left: 0; right: 0;
  height:           2px;
  background:       var(--color-accent);
  transform:        scaleX(0);
  transform-origin: left;
  transition:       transform var(--transition-normal);
}

.service-card:not(.service-card--offline):hover {
  border-color: var(--color-accent);
  transform:    translateY(-2px);
  box-shadow:   0 8px 32px color-mix(in srgb, var(--color-accent) 8%, transparent);
}
.service-card:not(.service-card--offline):hover::before { transform: scaleX(1); }

.service-card--offline { opacity: 0.45; cursor: default; pointer-events: none; }

.service-card__name {
  font-family:    var(--font-family-display);
  font-size:      var(--font-h4);
  letter-spacing: 0.04em;
  color:          var(--color-text-primary);
}

.service-card__desc {
  font-size:   var(--font-small);
  color:       var(--color-text-secondary);
  line-height: 1.6;
  flex:        1;
}

.service-card__footer {
  display:      flex;
  align-items:  center;
  gap:          var(--space-3);
  margin-top:   auto;
  padding-top:  var(--space-3);
  border-top:   1px solid var(--color-divider);
}

.service-card__tag {
  font-family:    var(--font-family-mono);
  font-size:      var(--font-tiny);
  letter-spacing: 0.1em;
  color:          var(--color-text-disabled);
}

.service-card__badge {
  font-family:    var(--font-family-mono);
  font-size:      var(--font-tiny);
  letter-spacing: 0.1em;
  padding:        2px var(--space-2);
}
.service-card__badge--available {
  color:   var(--color-accent);
  border:  1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
}
.service-card__badge--offline {
  color:   var(--color-text-disabled);
  border:  1px solid var(--color-border);
}

/* ── Pillar cards — for feature listing ── */
/* Matches pillar-card pattern from nullpoint index.css */
.pillar-card {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
  background:     var(--color-surface-raised);
  border:         1px solid var(--color-border);
  padding:        var(--space-4) var(--space-5);
  position:       relative;
  overflow:       hidden;
  transition:     border-color var(--transition-normal), transform var(--transition-normal);
}
.pillar-card::before {
  content:    '';
  position:   absolute;
  top: 0; left: 0; right: 0;
  height:     1px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  opacity:    0;
  transition: opacity var(--transition-normal);
}
.pillar-card:hover                { border-color: var(--color-accent); transform: translateY(-2px); }
.pillar-card:hover::before        { opacity: 1; }

.pillar-card__icon  { font-size: 1.6rem; color: var(--color-accent); line-height: 1; }
.pillar-card__title { font-family: var(--font-family-display); font-size: var(--font-base); color: var(--color-text-primary); }
.pillar-card__body  { font-size: var(--font-small); color: var(--color-text-secondary); line-height: 1.6; }

/* ── Status dot ── */
.status-dot {
  display:       inline-block;
  width:         8px; height: 8px;
  border-radius: 50%;
  background:    var(--color-accent);
  box-shadow:    0 0 8px var(--color-accent);
  animation:     pulse 2s ease-in-out infinite;
}