/* ============================================================
   PyLabs — Laptop / Small-Desktop Responsive Adjustments
   Targets: 1024px – 1440px wide screens
   (typical 13"–15" laptops, often at 125% DPI scaling)
   ============================================================ */

@media (min-width: 1025px) and (max-width: 1440px) {

  /* ── Base font scale ─────────────────────────────────── */
  body {
    font-size: 13px;
  }

  /* ── Top bar ─────────────────────────────────────────── */
  .top-bar {
    height: 40px;
    padding: 0 12px;
  }
  .nav-logo { height: 28px; }
  .breadcrumb { font-size: 11px; margin-left: 10px; }

  /* Gamification row — shrink to fit */
  .gamification-bar { gap: 5px; }
  .xp-level { font-size: 10px; padding: 2px 5px; }
  .xp-bar-container { width: 60px; }
  .xp-text { font-size: 9px; min-width: 34px; }
  .streak-display { font-size: 11px; }
  .user-name { font-size: 11px; }
  .ai-usage-display { font-size: 10px; }

  .badge-btn { font-size: 14px; }

  .leaderboard-btn,
  .reset-btn,
  .signout-btn {
    font-size: 10px;
    padding: 3px 8px;
  }

  /* ── Toolbar ─────────────────────────────────────────── */
  .toolbar {
    padding: 6px 12px;
    gap: 6px;
  }
  .toolbar select,
  .toolbar button {
    font-size: 11px;
    padding: 5px 9px;
  }

  /* ── Main container ──────────────────────────────────── */
  .main-container {
    padding: 12px;
    min-height: calc(100vh - 90px);
  }

  /* ── Left panel — content area ───────────────────────── */
  .left-panel { max-width: 640px; }
  .left-panel.shifted { margin-right: 44%; }

  /* Section heading */
  .section-heading {
    font-size: 17px;
    margin-bottom: 10px;
  }

  /* Main description / brief text */
  #description { margin-bottom: 12px; line-height: 1.6; }
  #description p    { font-size: 12px; margin: 6px 0; }
  #description li   { font-size: 12px; margin: 5px 0; line-height: 1.6; }
  #description h2   { font-size: 15px; margin-bottom: 12px; }
  #description h3   { font-size: 14px; }
  #description h4   { font-size: 13px; margin: 10px 0 6px; }
  #description code { font-size: 11px; }
  #description strong { font-size: inherit; }

  /* details/summary accordions used in section content */
  #description details {
    margin-bottom: 10px !important;
    border-radius: 7px !important;
  }
  #description details summary {
    padding: 10px 12px !important;
    font-size: 12px !important;
  }
  #description details ul,
  #description details ol {
    padding: 0 12px 12px 28px !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
  }
  #description details li {
    font-size: 12px !important;
    margin: 4px 0 !important;
  }

  /* Diagram card */
  .diagram-card {
    padding: 8px;
    margin-bottom: 10px;
    max-width: 400px;
  }
  .diagram-card svg { max-height: 200px; }
  .diagram-card img { max-height: 200px; }

  /* Lab objective card */
  .lab-objective-card {
    padding: 12px 14px;
    margin-bottom: 14px;
  }
  .lab-obj-text  { font-size: 12px; line-height: 1.5; margin-bottom: 8px; }
  .lab-obj-badge { font-size: 10px; padding: 3px 8px; }
  .lab-obj-title { font-size: 10px; letter-spacing: 1px; }
  .lab-obj-tags span { font-size: 10px; padding: 2px 6px; }
  .lab-obj-label { font-size: 10px; }

  /* Syntax accordion */
  .syntax-accordion { margin-top: 10px; }
  .syntax-accordion summary { font-size: 11px; padding: 8px 12px; }
  #syntax { font-size: 11px; padding: 10px 12px; }

  /* Hands-on challenge card */
  .hands-on-lab { padding: 12px; margin: 14px 0; }
  .lab-title    { font-size: 10px; letter-spacing: 1px; }
  .lab-task     { font-size: 12px; padding: 8px 10px; line-height: 1.6; }
  .lab-feedback { font-size: 12px; padding: 10px 12px; }
  .lab-check-btn    { font-size: 11px !important; padding: 6px 12px !important; }
  .lab-hint-btn     { font-size: 11px !important; padding: 6px 10px !important; }
  .lab-solution-btn { font-size: 11px !important; padding: 6px 10px !important; }

  /* Right panel — narrower on laptops */
  .right-panel          { width: 44%; }
  .panel-toggle.shifted { right: 44%; }
  .left-panel.shifted   { margin-right: 44%; }

  /* IDE header */
  .ide-header { height: 32px; padding: 0 10px; }
  .ide-tab { font-size: 10px; padding: 5px 10px; }
  .ide-run-btn    { font-size: 10px !important; padding: 3px 10px !important; }
  .ide-action-btn { font-size: 10px !important; padding: 3px 7px  !important; }

  /* Example tabs */
  .example-selector { padding: 6px 10px; }
  .example-btn { font-size: 10px; padding: 4px 8px; }

  /* Editor */
  .editor-area { height: 200px; }
  .CodeMirror  { font-size: 12px !important; }

  /* Editor action buttons row */
  .editor-actions { padding: 6px 10px; gap: 5px; flex-wrap: wrap; }

  /* Terminal */
  .terminal-section  { height: 120px; }
  .terminal-output   { font-size: 11px; padding: 8px 10px; }
  .terminal-title    { font-size: 9px; }
  .terminal-badge    { font-size: 8px; }

  /* AI Mentor */
  .ai-mentor-section  { flex: 0 1 260px; min-height: 180px; }
  .ai-mentor-header   { padding: 5px 10px; gap: 6px; }
  .ai-mentor-avatar   { width: 24px; height: 24px; font-size: 12px; }
  .ai-mentor-name     { font-size: 11px; }
  .ai-mentor-status   { font-size: 8px; }
  .ai-mentor-suggestions          { padding: 5px 10px; gap: 3px; max-height: 44px; }
  .ai-mentor-suggestions button   { font-size: 8px; padding: 2px 7px; }
  .ai-mentor-messages { padding: 6px 10px; max-height: 130px; min-height: 60px; }
  .ai-msg-bubble      { font-size: 10px; padding: 6px 10px; }
  .ai-msg-avatar      { width: 20px; height: 20px; font-size: 10px; }
  .ai-mentor-input       { padding: 6px 10px; }
  .ai-mentor-input input { font-size: 10px; padding: 6px 10px; }
  .ai-mentor-send     { width: 28px; height: 28px; font-size: 12px; }

  /* Status bar */
  .ide-statusbar { font-size: 9px; padding: 2px 10px; gap: 10px; }

  /* Course sidebar */
  .course-sidebar           { width: 220px; min-width: 220px; }
  .course-sidebar.collapsed { margin-left: -220px; }
  .sidebar-title            { font-size: 12px; }
  .sidebar-module-header    { font-size: 11px; padding: 8px 10px; }
  .sidebar-section-item     { font-size: 10px; padding: 4px 10px 4px 22px; }
  .sidebar-section-item.active { padding-left: 19px; }

  /* Modals */
  .leaderboard-card  { width: 480px; max-height: 80vh; }
  .badge-gallery     { max-width: 480px; }

  /* Resume banner */
  .resume-banner { font-size: 12px; }
}

/* ── Very compact laptops: 1025–1199px ────────────────────
   e.g. 13" displays or 1080p with 125% scaling             */
@media (min-width: 1025px) and (max-width: 1199px) {

  body { font-size: 12px; }

  .section-heading { font-size: 15px; }

  /* Content text even smaller */
  #description p, #description li         { font-size: 11px !important; }
  #description details summary            { font-size: 11px !important; }
  #description details ul, #description details li { font-size: 11px !important; }
  #description h2 { font-size: 14px; }
  #description h3 { font-size: 13px; }
  #description h4 { font-size: 12px; }

  .diagram-card  { max-width: 340px; }
  .diagram-card img, .diagram-card svg { max-height: 170px; }

  .lab-obj-text { font-size: 11px; }
  .lab-task     { font-size: 11px; }
  .lab-feedback { font-size: 11px; }

  /* Narrow the right panel a bit more */
  .right-panel          { width: 46%; }
  .panel-toggle.shifted { right: 46%; }
  .left-panel.shifted   { margin-right: 46%; }
  .left-panel           { max-width: 520px; }

  /* Editor even more compact */
  .editor-area { height: 170px; }
  .terminal-section { height: 100px; }
  .ai-mentor-section { flex: 0 1 220px; }
  .ai-mentor-messages { max-height: 100px; }

  /* Gamification — hide verbose items */
  .leaderboard-btn { display: none; }
  .xp-bar-container { width: 50px; }

  /* Course sidebar slimmer */
  .course-sidebar           { width: 200px; min-width: 200px; }
  .course-sidebar.collapsed { margin-left: -200px; }
}