/*
  AI Playground custom CSS.

  DaisyUI and Tailwind are loaded from CDN in backend_django/templates/base.html
  for development. For production, install Tailwind locally and compile this file.
*/

html {
  scroll-behavior: smooth;
}

.movie-row {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 0.25rem 0 1rem;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}

.movie-row > .movie-card {
  flex: 0 0 clamp(180px, 18vw, 220px);
}

.movie-row-sm > .movie-card {
  flex-basis: clamp(150px, 15vw, 180px);
}

.movie-card {
  scroll-snap-align: start;
  transition: transform 160ms ease, filter 160ms ease;
}

.movie-card:hover {
  transform: translateY(-4px);
  filter: brightness(1.05);
}

.movie-poster {
  aspect-ratio: 2 / 3;
  width: 100%;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

[data-theme="ai-sunrise"] {
  color-scheme: light;
  --p: 15 86% 54%;
  --pc: 0 0% 100%;
  --s: 198 78% 42%;
  --sc: 0 0% 100%;
  --a: 144 48% 38%;
  --ac: 0 0% 100%;
  --n: 216 21% 21%;
  --nc: 42 70% 96%;
  --b1: 42 70% 97%;
  --b2: 36 42% 92%;
  --b3: 31 28% 84%;
  --bc: 216 21% 21%;
  --in: 198 78% 42%;
  --inc: 0 0% 100%;
  --su: 144 48% 38%;
  --suc: 0 0% 100%;
  --wa: 38 92% 50%;
  --wac: 216 21% 21%;
  --er: 351 74% 54%;
  --erc: 0 0% 100%;
}

[data-theme="ai-forest"] {
  color-scheme: light;
  --p: 156 42% 29%;
  --pc: 0 0% 100%;
  --s: 33 73% 46%;
  --sc: 0 0% 100%;
  --a: 190 58% 38%;
  --ac: 0 0% 100%;
  --n: 168 22% 18%;
  --nc: 94 35% 94%;
  --b1: 92 38% 96%;
  --b2: 96 24% 89%;
  --b3: 95 18% 80%;
  --bc: 168 22% 18%;
  --in: 190 58% 38%;
  --inc: 0 0% 100%;
  --su: 156 42% 29%;
  --suc: 0 0% 100%;
  --wa: 33 73% 46%;
  --wac: 0 0% 100%;
  --er: 354 62% 49%;
  --erc: 0 0% 100%;
}

[data-theme="ai-ocean"] {
  color-scheme: dark;
  --p: 190 95% 46%;
  --pc: 214 48% 13%;
  --s: 263 71% 70%;
  --sc: 215 42% 12%;
  --a: 42 86% 58%;
  --ac: 215 42% 12%;
  --n: 215 43% 13%;
  --nc: 198 70% 95%;
  --b1: 215 42% 12%;
  --b2: 216 39% 16%;
  --b3: 215 32% 22%;
  --bc: 198 70% 95%;
  --in: 190 95% 46%;
  --inc: 214 48% 13%;
  --su: 155 64% 45%;
  --suc: 215 42% 12%;
  --wa: 42 86% 58%;
  --wac: 215 42% 12%;
  --er: 349 82% 63%;
  --erc: 215 42% 12%;
}

[data-theme="ai-berry"] {
  color-scheme: dark;
  --p: 326 76% 56%;
  --pc: 0 0% 100%;
  --s: 30 91% 57%;
  --sc: 257 27% 13%;
  --a: 174 64% 42%;
  --ac: 257 27% 13%;
  --n: 257 27% 13%;
  --nc: 330 75% 97%;
  --b1: 257 27% 13%;
  --b2: 260 24% 18%;
  --b3: 266 20% 25%;
  --bc: 330 75% 97%;
  --in: 210 88% 66%;
  --inc: 257 27% 13%;
  --su: 145 56% 46%;
  --suc: 257 27% 13%;
  --wa: 30 91% 57%;
  --wac: 257 27% 13%;
  --er: 349 82% 63%;
  --erc: 257 27% 13%;
}

.image-render-pixel {
  image-rendering: pixelated;
}

* {
  min-width: 0;
}

main {
  max-width: 100vw;
  overflow-x: hidden;
}

img,
svg,
canvas,
video {
  max-width: 100%;
  height: auto;
}

.card-body {
  min-width: 0;
}

.stats {
  max-width: 100%;
  width: 100%;
}

.stat-value {
  font-size: clamp(1.5rem, 7vw, 3rem);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.table {
  min-width: max-content;
}

.badge,
.btn,
.select,
.input,
.textarea {
  max-width: 100%;
}

h1 {
  overflow-wrap: anywhere;
}

.chat-bubble-markdown {
  max-width: min(88vw, 52rem);
  overflow-x: auto;
  text-align: left;
}

.chat-markdown {
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.chat-markdown > :first-child {
  margin-top: 0;
}

.chat-markdown > :last-child {
  margin-bottom: 0;
}

.chat-markdown h1,
.chat-markdown h2,
.chat-markdown h3,
.chat-markdown h4 {
  font-weight: 800;
  line-height: 1.2;
  margin: 0.85rem 0 0.45rem;
}

.chat-markdown h1 {
  font-size: 1.35rem;
}

.chat-markdown h2 {
  font-size: 1.2rem;
}

.chat-markdown h3,
.chat-markdown h4 {
  font-size: 1.05rem;
}

.chat-markdown p,
.chat-markdown ul,
.chat-markdown ol,
.chat-markdown pre,
.chat-markdown table,
.chat-markdown blockquote {
  margin: 0.7rem 0;
}

.chat-markdown ul,
.chat-markdown ol {
  padding-left: 1.35rem;
}

.chat-markdown ul {
  list-style: disc;
}

.chat-markdown ol {
  list-style: decimal;
}

.chat-markdown li + li {
  margin-top: 0.25rem;
}

.chat-markdown code {
  background: hsl(var(--b1) / 0.9);
  border-radius: 0.3rem;
  color: inherit;
  font-size: 0.92em;
  padding: 0.1rem 0.3rem;
}

.chat-markdown pre {
  background: hsl(var(--n));
  border-radius: 0.5rem;
  color: hsl(var(--nc));
  overflow-x: auto;
  padding: 0.9rem;
}

.chat-markdown pre code {
  background: transparent;
  border-radius: 0;
  color: inherit;
  display: block;
  padding: 0;
  white-space: pre;
}

.chat-markdown table {
  border-collapse: collapse;
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.chat-markdown th,
.chat-markdown td {
  border: 1px solid hsl(var(--bc) / 0.22);
  padding: 0.45rem 0.65rem;
  text-align: left;
}

.chat-markdown th {
  background: hsl(var(--b1) / 0.65);
  font-weight: 800;
}

.chat-markdown blockquote {
  border-left: 4px solid hsl(var(--p));
  color: hsl(var(--bc) / 0.78);
  padding-left: 0.85rem;
}

.chat-markdown a {
  color: hsl(var(--p));
  font-weight: 700;
  text-decoration: underline;
}

.learning-card {
  min-height: 100%;
}

.learning-card,
.learning-card:hover {
  text-decoration: none;
}

.wizard-shell {
  min-height: calc(100vh - 4rem);
}

.wizard-progress {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.wizard-step-button {
  align-items: center;
  background: hsl(var(--b2));
  border: 1px solid hsl(var(--b3));
  border-radius: 0.5rem;
  color: hsl(var(--bc) / 0.72);
  display: flex;
  gap: 0.65rem;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.55rem;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.wizard-step-button span {
  align-items: center;
  background: hsl(var(--b1));
  border-radius: 999px;
  display: inline-flex;
  font-weight: 800;
  height: 1.8rem;
  justify-content: center;
  width: 1.8rem;
}

.wizard-step-button strong {
  font-size: 0.9rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.wizard-step-button.is-active {
  background: hsl(var(--p));
  border-color: hsl(var(--p));
  color: hsl(var(--pc));
}

.wizard-step-button.is-active span {
  background: hsl(var(--pc) / 0.18);
}

.wizard-stage {
  display: flex;
  min-height: 0;
}

.stage-view {
  display: flex;
  min-height: 0;
}

.stage-panel {
  display: grid;
  width: 100%;
}

.stage-panel[hidden] {
  display: none;
}

.stage-step-button {
  display: inline-flex;
  font-weight: 700;
  line-height: 1.2;
  max-width: 10rem;
  overflow-wrap: anywhere;
  text-align: center;
}

.stage-hero {
  border: 1px solid hsl(var(--b3));
}

.stage-hero-media {
  align-self: stretch;
  background: hsl(var(--b3));
  min-height: 20rem;
  overflow: hidden;
}

.stage-hero-media img {
  height: 100%;
  min-height: 20rem;
  object-fit: cover;
  width: 100%;
}

.stage-concepts {
  overflow: hidden;
}

.stage-concepts[hidden],
.stage-examples[hidden] {
  display: none;
}

.stage-concepts-body,
.stage-examples-body {
  display: flex;
  flex-direction: column;
  min-height: min(68vh, 44rem);
}

.stage-concepts-heading {
  border-bottom: 1px solid hsl(var(--b3));
  padding: 1.25rem;
}

.stage-concepts-heading h2 {
  font-size: clamp(1.7rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
}

.stage-concepts-heading p {
  color: hsl(var(--bc) / 0.72);
  font-size: 1rem;
  line-height: 1.65;
  margin-top: 0.75rem;
  max-width: 60rem;
}

.stage-concept-grid {
  display: grid;
  flex: 1;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  min-height: 0;
  overflow: auto;
  padding: 1rem;
}

.stage-concept-single {
  align-items: center;
  display: flex;
  flex: 1;
  justify-content: center;
  min-height: 0;
  overflow: auto;
  padding: 1.25rem;
}

.concept-slide {
  max-width: 760px;
  min-height: 20rem;
  width: 100%;
}

.concept-slide .card-body {
  justify-content: center;
  padding: clamp(1.25rem, 4vw, 2.5rem);
}

.concept-slide .card-title {
  font-size: clamp(1.6rem, 4vw, 2.75rem);
  line-height: 1.08;
}

.concept-slide p {
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.75;
}

.stage-example-grid {
  display: grid;
  flex: 1;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  overflow: auto;
  padding: 1rem;
}

.example-card {
  border: 1px solid hsl(var(--b3));
  min-height: 15rem;
  text-decoration: none;
}

.example-card:hover {
  border-color: hsl(var(--p) / 0.55);
  transform: translateY(-1px);
}

.example-card .card-body {
  justify-content: space-between;
}

.example-card p {
  color: hsl(var(--bc) / 0.72);
  line-height: 1.65;
}

.examples-stage {
  overflow: hidden;
  scroll-margin-top: 5rem;
}

.examples-stage-aside {
  border-bottom: 1px solid hsl(var(--b3));
}

.examples-card-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.examples-card-grid .example-card {
  min-height: 16rem;
}

.wizard-panel {
  align-items: stretch;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.35fr);
  width: 100%;
}

.wizard-panel[hidden] {
  display: none;
}

.wizard-panel.is-reading-concepts {
  grid-template-columns: minmax(0, 1fr);
}

.wizard-panel.is-reading-concepts .wizard-copy,
.wizard-panel.is-reading-concepts .wizard-cards {
  display: none;
}

.wizard-copy,
.wizard-cards {
  background: hsl(var(--b1));
  border: 1px solid hsl(var(--b3));
  border-radius: 0.5rem;
  min-height: 0;
  overflow: auto;
  padding: 1.25rem;
}

.wizard-copy h2 {
  font-size: clamp(1.8rem, 5vw, 3.25rem);
  font-weight: 800;
  line-height: 1.05;
}

.wizard-copy > p {
  color: hsl(var(--bc) / 0.72);
  font-size: 1.05rem;
  line-height: 1.75;
  margin-top: 1rem;
}

.wizard-concepts {
  margin-top: 1.25rem;
  overflow: hidden;
}

.wizard-concept-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: min(48vh, 26rem);
  overflow: auto;
  padding: 1rem;
}

.concept-card {
  background: hsl(var(--b2));
  border: 1px solid hsl(var(--b3));
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  min-height: 10rem;
  padding: 1rem;
  transition: border-color 160ms ease, transform 160ms ease;
}

.concept-card:hover {
  border-color: hsl(var(--p) / 0.55);
  transform: translateY(-1px);
}

.concept-card-kicker {
  color: hsl(var(--p));
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0;
  margin-bottom: 0.65rem;
  text-transform: uppercase;
}

.concept-card h3 {
  font-weight: 800;
  line-height: 1.3;
}

.concept-card p {
  color: hsl(var(--bc) / 0.72);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-top: 0.35rem;
}

.wizard-cards {
  align-content: start;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wizard-cards button.learning-card {
  border: 0;
  cursor: pointer;
}

.wizard-cards-compact {
  grid-template-columns: minmax(0, 1fr);
}

.wizard-concept-screen {
  grid-column: 1 / -1;
  overflow: hidden;
}

.wizard-concept-screen[hidden] {
  display: none;
}

.concept-window-body {
  display: flex;
  flex-direction: column;
  min-height: min(68vh, 42rem);
}

.concept-window-heading {
  align-items: start;
  border-bottom: 1px solid hsl(var(--b3));
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 1.25rem;
}

.concept-window-heading h2 {
  font-size: clamp(1.7rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
}

.concept-window-heading p {
  color: hsl(var(--bc) / 0.72);
  font-size: 1rem;
  line-height: 1.65;
  margin-top: 0.75rem;
  max-width: 56rem;
}

.wizard-concept-screen .wizard-concept-grid {
  flex: 1;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  max-height: none;
  min-height: 0;
}

.wizard-actions {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

@media (max-width: 640px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .hero {
    min-height: 320px;
  }

  .hero h1,
  main h1.text-4xl,
  main h1.text-5xl {
    font-size: clamp(2rem, 10vw, 3rem);
    line-height: 1.08;
  }

  .card-body {
    padding: 1rem;
  }

  .btn {
    min-height: 2.5rem;
    height: auto;
    white-space: normal;
  }

  .stats:not(.stats-horizontal) {
    overflow-x: visible;
  }

  #heuristicGrid {
    gap: 0.25rem;
  }

  #puzzleBoard {
    gap: 0.5rem;
  }
}

@media (max-width: 1024px) {
  .wizard-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .wizard-copy,
  .wizard-cards {
    overflow: visible;
  }
}

@media (max-width: 768px) {
  .wizard-progress {
    grid-template-columns: repeat(5, minmax(3.25rem, 1fr));
    overflow-x: auto;
    padding-bottom: 0.75rem;
  }

  .wizard-step-button {
    flex-direction: column;
    min-width: 4.5rem;
  }

  .wizard-step-button strong {
    font-size: 0.78rem;
  }

  .wizard-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .concept-window-heading {
    flex-direction: column;
  }

  .concept-window-heading .btn {
    width: 100%;
  }

  .wizard-concept-grid {
    grid-template-columns: minmax(0, 1fr);
    max-height: none;
  }

  .wizard-actions .btn {
    flex: 1;
  }
}