@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

:root {
  /* Colors */
  --text-color: rgb(36, 35, 36);
  --subtle-text-color: rgb(77, 79, 80);
  --background-color: #fafafb;
  --button-bg-color: rgb(240, 70, 57);
}

body {
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--background-color);
  margin: 0 auto; /* Center the body on the page */
}
.container-narrow {
  max-width: 720px; /* A good width for readable text */
  margin-left: auto;  /* This is the key to centering */
  margin-right: auto; /* This is the key to centering */
  padding: 0 2rem; /* Safety padding for small screens */
}

/* This is for your "breakout" elements like the mockup and logo */
.container-wide {
  display: flex !important;
  width: 100%;
  box-sizing: border-box;
  padding: 1rem 2rem;  
  justify-content: space-between;
  align-items: center;
}

p, li {
  color: var(--text-color);
}

.subtle-text {
  color: var(--subtle-text-color);
}

h1 {
  text-align: center;
}
h2 {
  text-align: center;
}

.large-image {
  width: 1294px;
  position: relative;
  left: 50%;
  margin-left: -647px;
  display: block;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.logo {
  font-weight: bold;
  font-size: 1.25rem;
}

.container-wide .profile {
	display: flex !important;
	align-items: center;
	gap: 0.5rem;
}

.profile-image {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}


/* * Button Styles 
 */
button, .button {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  background-color: var(--button-bg-color);
  color: #ffffff; /* White text for contrast on the red button */
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  text-decoration: none; /* For .button used on <a> tags */
  transition: background-color 0.3s ease;
}

button:hover, .button:hover {
  background-color: rgb(200, 60, 48); /* Slightly darker on hover */
}
.profile-container {
            /* Sets a max width to keep the content readable */
  max-width: 800px;
  margin: 20px auto; /* Centers the container on the page */
  padding: 20px;
  border: 0px solid #ccc; 
}

.headshot {
  float: left;
  width: 100px;
  height: 100px;
  object-fit: cover; /* Ensures the image covers the area without stretching */
  border-radius: 50%; /* Makes it a circle */
  margin-right: 15px;
  margin-bottom: 10px; 
}

.clear-float {
  clear: both;
}

    .highlighted-element {
                background-color: #2d82fe;
                color: #fefefe;
                font-family: monospace;
                padding: 0.2em 0.4em;
                border-radius: 3px;
                font-size: 0.9em;
                padding: 2px;
                /* white-space: nowrap; */

            }
   

    .muted-element {
        color: rgb(200, 200, 200);
    }












/*
 *
 * PROGRESS BAR
 *
 */
/* 
  Corrected and Simplified CSS for Progress Bar
*/

#progress-component .step-completed-bg { background-color: #2d82fe; }
#progress-component .step-completed-color { color: #2d82fe; }
#progress-component .step-incomplete-bg { background-color: #d9d9d9; }
#progress-component .step-incomplete-color { color: #d9d9d9; }

#progress-component .progress-container {
    width: 100%;
    text-align: center;
}

#progress-component .progress-bar {
    position: relative;
    height: 20px;
    margin-bottom: 10px;
}

/* 
  This is the single connecting line element.
  It is gray or blue by default.
*/
#progress-component .progress-bar::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 3px;
    left: 50%;
    width: 100%;
    z-index: 1; /* Below the square */
    background-color: #d9d9d9; /* Default to incomplete color */
}

/* Color the line blue if the step is completed */
#progress-component .line-completed .progress-bar::after {
    background-color: #2d82fe;
}

/* 
  THE ANIMATION FIX:
  When a container has '.in-progress', we TARGET ITS LINE (::after)
  and REPLACE its background with the animated gradient.
*/
#progress-component .in-progress .progress-bar::after {
    --c: no-repeat linear-gradient(#2d82fe 0 0);
    background: var(--c), var(--c), #d7b8fc; /* Blue moving over gray #d9d9d9 */
    background-size: 60% 100%;
    animation: l16 3s infinite;
}

@keyframes l16 {
    0%   { background-position: -150% 0, -150% 0; }
    66%  { background-position: 250% 0, -150% 0; }
    100% { background-position: 250% 0, 250% 0; }
}

/* --- Square and Text Styling (Unchanged) --- */
#progress-component .square {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    z-index: 2; /* The square is always on top */
}

#progress-component .checkmark {
    color: white;
    font-size: 18px;
    font-weight: bold;
}

#progress-component .progress-text {
    margin-top: 20px;
    font-size: 0.8em;
    font-weight: bold;
}

/* Hide the connecting line for the very last step */
#progress-component .last-step .progress-bar::after {
    display: none;
}

/* Container for the list of detailed steps */
#progress-component .step-details-container {
    margin-top: 40px;
    font-family: sans-serif;
}

/* A single row for a step's details */
#progress-component .step-detail-row {
    border: 1px solid #e2e8f0; /* light gray border */
    border-radius: 8px;
    margin-bottom: 15px;
    padding: 15px;
}

/* The header part of a row (description + status) */
#progress-component .step-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

#progress-component .step-description {
    font-size: 1.1em;
    font-weight: bold;
    color: #2d3748; /* dark gray */
}

/* Styling for the status box (Completed, In Progress, etc.) */
#progress-component .status-box {
    padding: 4px 12px;
    border-radius: 9999px; /* pill shape */
    font-size: 0.8em;
    font-weight: bold;
    color: white;
}

#progress-component .status-completed { background-color: #16a34a; } /* Green */
#progress-component .status-in-progress { background-color: #2d82fe; } /* Blue */
#progress-component .status-pending { background-color: #a0aec0; } /* Gray */

/* The collapsible container for the step's output data */
#progress-component .details-content {
    margin-top: 15px;
    padding: 15px;
    background-color: #f7fafc; /* very light gray */
    border-radius: 5px;
    border: 1px solid #e2e8f0;
}

/* Make the content inside pre-formatted for readability */
#progress-component .details-content pre {
    white-space: pre-wrap;
    word-break: break-all;
    font-family: monospace;
    font-size: 0.9em;
}

/* Styling for the SQL code block */
#progress-component .sql-code-block {
    background-color: #282c34; /* dark background */
    color: #abb2bf;
    padding: 15px;
    border-radius: 5px;
    font-family: monospace;
    white-space: pre-wrap;
}

#progress-component .sql-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

#progress-component .sql-title {
    font-size: 0.9em;
    font-weight: bold;
    color: #4a5568;
}

#progress-component .copy-button {
    background-color: #4a5568;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 0.8em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background-color 0.2s;
}

#progress-component .copy-button:hover {
    background-color: #2d3748;
}

#progress-component .copy-button svg {
    width: 14px;
    height: 14px;
}