/* Bring in the design tokens from styles.css by relying on the same vars */
.tutorial-full {
  height: calc(100vh - 72px); /* nav height removed via header override */
  display: flex;
  flex-direction: column;
  overflow: visible; /* allow the page to scroll if needed so spacing to footer can be visible */
  gap: 12px;
  min-height: calc(100vh - 72px); /* nav height removed via header override */
  padding-bottom: 64px; /* extra space so footer gap is preserved on short pages */
}

/* We'll use an aspect-ratio for the windows to get a wide 24:9 look (~8:3)
   and make both windows the same size. */
.tutor-window,
.person-window {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
}

.tutor-window__inner,
.person-window__inner {
  width: 100%;
  max-width: 1150px;
  padding: 12px; /* reduced from 18px to save more vertical space */
  display: flex;
  align-items: stretch;
  justify-content: center;
}

/* Define a wide container for each window with the same aspect ratio */
.window-frame {
  width: 100%;
  aspect-ratio: 24/9; /* wide rectangle */
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  gap: 16px;
  max-height: 320px; /* reduced from 380px to make sections smaller */
  box-sizing: border-box;
}

/* The tutor and person inner containers will use the window-frame */
.tutor-window__inner > .window-frame,
.person-window__inner > .window-frame {
  width: 100%;
}

/* For the person window the left panel is 2/3 and right panel 1/3 */
.person-panel-left {
  flex: 2 1 0; /* left panel */
  background: #0b0b0d;
  border-radius: 12px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.03);
}
.person-panel-right {
  flex: 1 1 0; /* right panel */
  background: #0b0b0d;
  border-radius: 12px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.03);
  overflow: auto;
}

.tutor-window,
.person-window {
  flex: 0 0 auto;
  display: flex;
  background: var(--card);
  padding-bottom: 8px; /* small spacing so panels don't touch footer */
}

/* Make sure the tutorial header items are strictly centered and aligned */
.tutorial-nav .nav-inner {
  display: flex;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}
.tutorial-nav .brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  align-self: center;
}

/* Match the main site's brand sizing so logo + text align the same */
.tutorial-nav .brand {
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--accent);
}
.tutorial-nav .brand img {
  height: 1em; /* same as font-size so the image aligns with the text */
  width: auto;
}

/* Ensure the brand and CTA line up exactly with the main site's .nav-inner */
.tutorial-nav .nav-inner {
  padding: 12px 0; /* reduced from 20px to save vertical space */
}
.tutorial-nav .tutorial-cta {
  justify-self: end; /* keep the Back button on the right */
}

/* Make tutor panel visually identical to person panels */
.tutor-panel,
.person-panel-left,
.person-panel-right {
  background: #0b0b0d;
  border-radius: 12px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.03);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
  overflow: auto;
}

/* Make tutor panel occupy the full width of the window-frame (like the combined person panels) */
.tutor-panel {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

/* Ensure person window has bottom spacing from footer */
.person-window {
  margin-bottom: 48px; /* reduced gap so section fits better on shorter viewports */
}

/* If the tutor window's content is smaller, make its inner frame match the
   person window width visually by forcing the same max-width and centering */
.tutor-window__inner .window-frame,
.person-window__inner .window-frame {
  width: 100%;
  max-width: 1150px;
}

.tutor-window__inner,
.person-window__inner {
  width: 100%;
  max-width: 1150px;
  padding: 12px; /* reduced from 18px to save more vertical space */
}

/* Person window: horizontal layout 2/3 + 1/3 */
.person-input,
.person-output {
  background: transparent; /* content lives inside panels now */
  padding: 0;
  border: none;
  max-width: 100%;
  box-sizing: border-box;
}

/* Prevent horizontal overflow */
html,
body {
  overflow-x: hidden;
}

/* Disable hover animations and scroll-trigger animations specifically in tutorial windows */
.tutor-window .card,
.person-window .card,
.tutor-window *,
.person-window * {
  transition: none !important;
}
.animate-on-scroll {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Responsive: stack person input/output vertically on small screens */
@media (max-width: 900px) {
  .person-window__inner {
    grid-template-columns: 1fr;
  }
  .person-input,
  .person-output {
    height: auto;
  }
}

/* Respect site responsive breakpoints */
@media (max-width: 900px) {
  .person-grid {
    grid-template-columns: 1fr;
  }
}

/* Small typographic helpers */
.lead {
  color: var(--muted);
}

/* Reuse the animate-on-scroll appearance from index.css if present */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(12px) scale(0.98);
}

.animate-on-scroll.in-view {
  animation: appear 300ms linear both;
}
.person-input p,
.person-output p {
  color: #9aa1a9;
}
.tutor-panel button {
  width: fit-content;
  border: none;
  transition: transform var(--transition), box-shadow var(--transition);
}
.tutor-panel button:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 25px rgba(139, 92, 246, 0.5);
}
.brand {
  margin-top: 1.5rem;
}
.person-run {
  border: none;
  display: flex;
  justify-self: flex-end;
}
.nav-inner {
  justify-content: space-between;
}
.person-input {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.person-input textarea {
  width: 100%;
  height: auto; /* override fixed % */
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 12px;
  padding: 5px;
  box-sizing: border-box;
  background-color: var(--card);
  color: var(--muted);
  border: none;
}

/* Make panels layout their content vertically and allow inner children to grow/shrink */
.tutor-panel,
.person-panel-left,
.person-panel-right {
  display: flex;
  flex-direction: column;
  min-height: 0; /* allows children to shrink inside the flex container */
}

/* Bot area: take remaining space inside tutor-panel, keep buttons visible at the bottom */
#bot-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
}
#bot-code {
  flex: 1 1 auto;
  overflow: auto;
}

/* Person output: allow output pre to grow and scroll if needed */
.person-output {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#output {
  flex: 1 1 auto;
  overflow: auto;
  margin: 0;
}

/* Ensure buttons don't stretch */
.tutor-panel button,
.person-input .person-run {
  flex: 0 0 auto;
}

/* Small safeguard: don't let pre elements add unexpected margin/space */
pre {
  margin: 0;
}
#runBtn {
  width: fit-content;
}