.platform-instructions h3 {
  margin-top: 0;
}

.padded-image {
    padding: 1em;
    border: none;
    outline: none;
}

/* Default image styles for block images */
img {
    max-width: 100%;
    height: auto;
    display: block; /* Ensures images are treated as block elements */
    margin: 0 auto; /* Centers the image horizontally */
}

/* Inline images for small icons */
.inline-img {
    display: inline;
    max-width: none; /* Allow images to retain their natural size unless otherwise specified */
    vertical-align: middle; /* Align with text vertically */
}

/*
 * Updated Callout Styles
 */

/* Base style for all our new callouts */
blockquote.callout {
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border-radius: 0.375rem;
}

blockquote.callout-mac {
  border-left: 0.3rem solid #d73a49;
}

blockquote.callout-win {
  border-left: 0.3rem solid #0366d6;
}

blockquote.callout-mac strong {
  color: #cb2431;
}

blockquote.callout-win strong {
  color: #0366d6;
}

blockquote.callout-warn {
  border-left: 0.3rem solid #8a63d2;
}

blockquote.callout-warn strong {
  color: #8a63d2;
}

blockquote.callout-note {
  border-left: 0.3rem solid #2ea44f;  /* GitHub's "success" green */
}

blockquote.callout-note strong {
  color: #2ea44f;
}


/* ===================================================== */
/* === TUTORIAL NAVIGATION (BREADCRUMB & PREV/NEXT) === */
/* ===================================================== */

/* --- 1. TOP BREADCRUMB (LIGHT MODE) --- */

.stepper {
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 0.9em;
  margin-bottom: 2em;
  border-bottom: none;
}

/* The ">" arrow */
.stepper li::after {
  content: '>';
  margin: 0 0.75em;
  color: #aaa;
}

/* Remove arrow from last step */
.stepper li:last-child::after {
  content: '';
}

/* Standard links (NOT current) */
.stepper li a {
  text-decoration: underline;
  color: #007bff;
  background-color: transparent;
  padding: 0;
}

/* Current item (the <li>) */
.stepper li.current {
  font-weight: bold;
}

/* Current item text (the <span>) */
.stepper li.current span {
  color: #111; /* DARK TEXT for light mode */
  padding: 0;
  text-decoration: none;
}


/* --- 2. BOTTOM PREV/NEXT (LIGHT MODE) --- */

.prev-next {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  border-top: 1px solid #eee;
  padding-top: 1em;
  margin-top: 2em;
}

.prev-next a {
  font-weight: bold;
  font-size: 1.1em;
}

.prev-next .divider {
  font-size: 1.1em;
  color: #ccc;
}

/* ===================================================== */
/* === DARK MODE OVERRIDES (Based on dark theme var) === */
/* ===================================================== */

body[style*="--main-bg-color: #0d1117"] .stepper li::after {
  color: #777;
}

body[style*="--main-bg-color: #0d1117"] .stepper li a {
  color: #58a6ff;
}

body[style*="--main-bg-color: #0d1117"] .stepper li.current span {
  color: #eee;
}

body[style*="--main-bg-color: #0d1117"] .prev-next {
  border-top-color: #333;
}

body[style*="--main-bg-color: #0d1117"] .prev-next .divider {
  color: #555;
}

/* ===================================================== */
/* === For staff page === */
/* ===================================================== */

/* Add some margin so the cards aren't stuck to the edge of the screen */
#labs {
  margin: 2em auto;
  max-width: 1200px; /* Optional: keeps them from getting too wide */
  padding: 0 1em;
}

/* Fix for the tooltips if they don't appear */
[data-tooltip]:after {
  z-index: 999 !important; /* Ensures emojis/text don't cover the tooltip */
}

/* --- Main H2 Headings --- */
h2 {
  font-size: 2em !important;
  font-weight: 600 !important;      /* A strong, but not-too-heavy, bold */
  margin-top: 3rem !important;       /* BIG space above to separate sections */
  padding-left: 0.75rem !important;  /* Space for the bar */
  
  /* This is the accent bar! */
  border-left: 32px solid #0366d6 !important; /* A nice, noticeable blue */
  
  /* Remove the old bottom border */
  border-bottom: none !important;
}

/* --- Sub-H3 Headings --- */
h3 {
  font-size: 1.5em !important;
  font-weight: 600 !important;
  margin-top: 2rem !important;        /* Generous space above */
  padding-left: 0.5rem !important;    /* Space for the bar */
  
  /* This is the lighter, thinner accent bar */
  border-left: 24px solid #959da5 !important; /* A more subtle grey */

  /* Remove the old bottom border */
  border-bottom: none !important;
}

/* ===== Good / Bad Styling for Style Guide ===== */

.code-border-good .Box {
  border-left: 4px solid #28a745 !important;
}

.code-border-bad .Box {
  /* A strong, dark purple for light backgrounds */
  border-left: 4px solid #8812f7 !important;
}