/* ============================================
   STATUS SECTION
   Pipeline execution status display
   ============================================ */

.status-section {
  /* Layout */
  flex: 2;
  display: block;
  max-width: 43.75rem;
  height: 31.25rem;
  padding: 0.625rem;
  overflow-y: none;
  overflow-x: scroll;
  
  /* Typography */
  font-family: 'Montserrat', monospace;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #d9cfc9;
  
  /* Visual - original colors preserved */
  background-color: #0d1117;
  border-radius: 0.625rem;
}


/* ============================================
   STATUS HEADING
   Section title
   ============================================ */

.status-section h2 {
  /* Typography */
  font-family: 'Montserrat', monospace;
  font-size: 1.5rem;
  text-align: center;
  
  /* Spacing */
  margin-top: 0;
  margin-bottom: 0;
  
  /* Visual - original color preserved */
  color: #c9d1d9;
}


/* ============================================
   STATUS CONTENT
   Status text and code blocks
   ============================================ */

.status-section p,
.status-section pre {
  margin: 0;
  padding: 0;
}


/* ============================================
   VIEW RUN BUTTON
   Action button to view pipeline run
   ============================================ */

.view-run {
  /* Layout */
  display: inline-block;
  padding: 0.3125rem 0.625rem;
  margin-top: 0.625rem;
  text-align: center;
  cursor: pointer;
  
  /* Typography */
  font-size: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #000;
  
  /* Visual - original colors preserved */
  background: var(--color-text-white);
  border: none;
  border-radius: 0.1875rem;
  
  /* Animation */
  transition: all 0.3s ease;
}

.view-run:hover {
  /* Visual - original colors preserved */
  background-color: #2c3e50;
  color: #000;
  transform: translateY(-0.1875rem);
  box-shadow: 
    0 0 0.625rem var(--feature-box-bg),
    0 0 1.25rem var(--feature-box-bg);
}


/* ============================================
   RESPONSIVE DESIGN
   Mobile status section adjustments
   ============================================ */

/* Tablet: up to 1024px */
@media (max-width: 64rem) {
  .status-section {
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    height: 31.25rem;
    padding: 0.3125rem;
    overflow-y: scroll;
    overflow-x: scroll;
    word-wrap: break-word;
  }
}

/* Mobile: up to 768px */
@media (max-width: 48rem) {
  .status-section {
    width: 100%;
    max-width: 100%;
    height: 31.25rem;
    font-size: 0.875rem;
    padding: 0.3125rem;
    overflow-y: scroll;
    overflow-x: scroll;
    word-wrap: break-word;
  }

  .status-section h2 {
    font-size: 1rem;
  }
}