/*
  Classroom Layout — Learning Path Session Experience
  Token-first, logical properties, follows creator_studio.css patterns.
  Implements the three-panel classroom: sidebar + conversation + activity.
*/

/* ── Shell ── */

.classroom-shell {
  min-block-size: 100vh;
  min-block-size: 100dvh;
  background: var(--canvas-bg);
  color: var(--theme-text);
}

/* ── Grid ── */

.classroom {
  display: grid;
  grid-template-columns: var(--classroom-sidebar-inline, 16rem) 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "sidebar conversation activity";
  min-block-size: 100vh;
  min-block-size: 100dvh;
  background: var(--canvas-bg);
}

/* ── Sidebar ── */

.classroom__sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  background: var(--theme-surface);
  border-inline-end: 1px solid var(--theme-border);
  padding-block: var(--space-lg);
  padding-inline: var(--space-md);
  overflow-y: auto;
  gap: var(--space-md);
}

.classroom__sidebar-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-block-end: var(--space-sm);
  border-block-end: 1px solid var(--theme-border);
}

.classroom__tutor-avatar {
  font-size: var(--text-2xl);
  line-height: 1;
}

.classroom__path-title {
  font-family: var(--font-display, var(--font-sans));
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--theme-text);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Progress bar */

.classroom__progress-bar {
  inline-size: 100%;
  block-size: 6px;
  border-radius: var(--radius-full);
  background: var(--theme-border);
  overflow: hidden;
}

.classroom__progress-fill {
  block-size: 100%;
  background: var(--color-primary, #4f46e5);
  border-radius: var(--radius-full);
  transition: inline-size var(--transition-normal);
}

.classroom__progress-label {
  font-size: var(--text-xs);
  color: var(--theme-muted);
}

/* Step list */

.classroom__step-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex: 1;
  overflow-y: auto;
}

.classroom__step {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  transition: background var(--transition-fast);
}

.classroom__step[data-state="active"] {
  background: color-mix(in srgb, var(--color-primary, #4f46e5) 10%, transparent);
  font-weight: var(--weight-semibold);
}

.classroom__step[data-state="completed"] {
  color: var(--theme-muted);
}

.classroom__step[data-state="skipped"] {
  color: var(--theme-muted);
  text-decoration: line-through;
  opacity: 0.6;
}

.classroom__step-indicator {
  inline-size: 1.25rem;
  text-align: center;
  flex-shrink: 0;
  font-size: var(--text-xs);
}

.classroom__step-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.classroom__step-type {
  font-size: var(--text-2xs, 0.625rem);
  color: var(--theme-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.classroom__step-empty {
  font-size: var(--text-sm);
  color: var(--theme-muted);
  font-style: italic;
  padding: var(--space-md) 0;
}

.classroom__sidebar-footer {
  margin-block-start: auto;
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid var(--theme-border);
}

/* ── Conversation Panel ── */

.classroom__conversation {
  grid-area: conversation;
  display: flex;
  flex-direction: column;
  border-inline-end: 1px solid var(--theme-border);
  min-block-size: 0;
}

.classroom__messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.classroom__composer {
  padding: var(--space-sm) var(--space-md);
  border-block-start: 1px solid var(--theme-border);
  background: var(--theme-surface);
}

.classroom__composer-form {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-end;
}

.classroom__composer-input {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-lg);
  background: var(--canvas-bg);
  color: var(--theme-text);
  font: inherit;
  font-size: var(--text-sm);
  resize: none;
  min-block-size: 2.5rem;
  max-block-size: 8rem;
}

.classroom__composer-input:focus {
  outline: 2px solid var(--color-primary, #4f46e5);
  outline-offset: -1px;
  border-color: var(--color-primary, #4f46e5);
}

.classroom__no-conversation {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: var(--theme-muted);
}

/* ── Activity Panel ── */

.classroom__activity {
  grid-area: activity;
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  overflow-y: auto;
  background: var(--canvas-bg);
}

.classroom__activity-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-block-end: var(--space-md);
  border-block-end: 1px solid var(--theme-border);
  margin-block-end: var(--space-md);
}

.classroom__activity-type {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary, #4f46e5);
  background: color-mix(in srgb, var(--color-primary, #4f46e5) 10%, transparent);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-full);
}

.classroom__activity-title {
  font-family: var(--font-display, var(--font-sans));
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin: 0;
}

.classroom__activity-content {
  flex: 1;
}

.classroom__activity-waiting,
.classroom__activity-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: var(--theme-muted);
  font-size: var(--text-sm);
  font-style: italic;
  min-block-size: 12rem;
}

/* ── Learning Path Index ── */

.learning-paths-index {
  max-inline-size: 64rem;
  margin: 0 auto;
  padding: var(--space-xl);
}

.learning-paths-header {
  margin-block-end: var(--space-xl);
}

.learning-paths-title {
  font-family: var(--font-display, var(--font-sans));
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  margin: 0 0 var(--space-xs);
}

.learning-paths-subtitle {
  font-size: var(--text-sm);
  color: var(--theme-muted);
  margin: 0;
}

.learning-paths-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--space-lg);
}

.learning-path-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border-radius: var(--radius-xl);
  border: 1px solid var(--theme-border);
  background: var(--theme-surface);
  text-decoration: none;
  color: var(--theme-text);
  transition: all var(--transition-fast);

  /* Glass effect matching studio */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.learning-path-card:hover {
  border-color: var(--color-primary, #4f46e5);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-primary, #4f46e5) 15%, transparent);
  transform: translateY(-2px);
}

.learning-path-card__avatar {
  font-size: var(--text-3xl);
  line-height: 1;
}

.learning-path-card__title {
  font-family: var(--font-display, var(--font-sans));
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  margin: 0;
}

.learning-path-card__subject {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary, #4f46e5);
}

.learning-path-card__description {
  font-size: var(--text-sm);
  color: var(--theme-muted);
  margin: 0;
  line-height: var(--leading-relaxed);
}

.learning-path-card__meta {
  margin-block-start: auto;
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid var(--theme-border);
}

.learning-path-card__tutor {
  font-size: var(--text-xs);
  color: var(--theme-muted);
}

.learning-paths-empty {
  text-align: center;
  padding: var(--space-3xl);
  color: var(--theme-muted);
}

/* ── Syllabus Page ── */

.learning-path-syllabus {
  max-inline-size: 40rem;
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-xl);
}

.learning-path-syllabus__hero {
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
  margin-block-end: var(--space-2xl);
}

.learning-path-syllabus__avatar {
  flex-shrink: 0;
}

.learning-path-syllabus__avatar-emoji {
  font-size: 4rem;
  line-height: 1;
}

.learning-path-syllabus__title {
  font-family: var(--font-display, var(--font-sans));
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  margin: 0 0 var(--space-xs);
}

.learning-path-syllabus__tutor {
  font-size: var(--text-sm);
  color: var(--theme-muted);
  margin: 0 0 var(--space-sm);
}

.learning-path-syllabus__description {
  font-size: var(--text-base);
  color: var(--theme-text);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-md);
}

.learning-path-syllabus__badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary, #4f46e5);
  background: color-mix(in srgb, var(--color-primary, #4f46e5) 10%, transparent);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-full);
  margin-inline-end: var(--space-xs);
}

.learning-path-syllabus__actions {
  display: flex;
  gap: var(--space-md);
  align-items: center;
}

/* ── Responsive: stack on small screens ── */

@media (max-inline-size: 768px) {
  .classroom {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "sidebar"
      "conversation"
      "activity";
  }

  .classroom__sidebar {
    border-inline-end: none;
    border-block-end: 1px solid var(--theme-border);
    max-block-size: 10rem;
    overflow-x: auto;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: var(--space-sm) var(--space-md);
  }

  .classroom__step-list {
    flex-direction: row;
    gap: var(--space-sm);
    overflow-x: auto;
  }

  .classroom__step {
    white-space: nowrap;
    flex-shrink: 0;
  }

  .classroom__sidebar-header,
  .classroom__sidebar-footer,
  .classroom__progress-bar,
  .classroom__progress-label {
    display: none;
  }

  .classroom__conversation {
    border-inline-end: none;
    border-block-end: 1px solid var(--theme-border);
  }

  .classroom__activity {
    min-block-size: 40vh;
  }
}

/* ── Dark mode token overrides ── */

@media (prefers-color-scheme: dark) {
  .learning-path-card {
    background: color-mix(in srgb, var(--theme-surface) 80%, transparent);
  }

  .learning-path-card:hover {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-primary, #4f46e5) 25%, transparent);
  }
}