/* Responsive behaviour. Reference widths: 1440 (Figma desktop) / 1280 / 1024 / 768 / 390 (Figma mobile).
   The sidebar becomes an off-canvas drawer at 1100px; at 640px the layout switches to the Figma mobile design. */

/* ---- Laptop: content gets narrower, grids rebalance ------------------------------------ */
@media (max-width: 1280px) {
  .grid-lesson { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); }
  .grid-lab { grid-template-columns: minmax(250px, 340px) minmax(0, 1fr); }
  .grid-lower { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
}

@media (max-width: 1200px) {
  .grid-lower { grid-template-columns: minmax(0, 1fr); }
  .grid-resources { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-glow { left: 380px; }
}

/* Sidebar still visible but content is narrow: 3 + 2 balanced rows instead of an orphan card */
@media (min-width: 1101px) and (max-width: 1200px), (max-width: 900px) {
  .grid-days,
  .grid-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .grid-days > *,
  .grid-stats > * { grid-column: span 2; }
  .grid-days > :nth-child(n + 4),
  .grid-stats > :nth-child(n + 4) { grid-column: span 3; }
}

/* ---- Tablet / small laptop: sidebar becomes a drawer --------------------------------------- */
@media (max-width: 1100px) {
  .app { grid-template-columns: minmax(0, 1fr); }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(300px, 86vw);
    transform: translateX(-102%);
    visibility: hidden;
    transition: transform var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med);
    box-shadow: var(--shadow-pop);
  }

  .sidebar[data-open="true"] {
    transform: none;
    visibility: visible;
    transition: transform var(--dur-med) var(--ease-out), visibility 0s;
  }

  .sidebar .sidebar__close { display: inline-grid; }
  .sidebar__mobile-actions { display: flex; }
  .mobile-header { display: flex; padding: 18px var(--sp-6) 0; }
  .topbar { display: none; }
  .main-inner { padding: 18px var(--sp-6) var(--sp-8); }
  .page-glow { display: none; }
  .outline { position: static; }
  .outline__summary { display: flex; }
  .nav-item { padding: 12px 14px; }
}

@media (max-width: 900px) {
  .grid-lesson,
  .grid-lab { grid-template-columns: minmax(0, 1fr); }
  .hero { flex-direction: column; }
  .progress-module { width: 100%; min-height: 170px; }
  .grid-resources { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Phone: Figma "Mobile / Course Dashboard" -------------------------------------------------- */
@media (max-width: 640px) {
  :root {
    --section-gap: 16px;
  }

  .main-inner { padding: 16px var(--sp-4) var(--sp-6); }
  .mobile-header { padding: 18px var(--sp-4) 0; }

  .only-desktop,
  .only-desktop-block { display: none !important; }
  .only-mobile { display: inline; }
  .pill.only-mobile { display: inline-flex; }

  .hero { padding: 18px; min-height: 0; gap: 10px; border-radius: var(--r-3xl); }
  .hero__title { font-size: var(--fs-28); }
  .hero__lead { font-size: var(--fs-13); }
  .mobile-progress { display: flex; }
  .grid-days-mobile { display: flex; }
  .grid-lower { grid-template-columns: minmax(0, 1fr); }
  .lab-preview { background: #10182a; border-color: #333a56; padding: var(--sp-4); gap: 9px; }
  :root[data-theme="light"] .lab-preview { background: var(--surface-lab); border-color: var(--border-lab); }
  .lab-preview__title { font-size: var(--fs-17); }
  .lab-preview__text { font-size: var(--fs-11); }
  .section-head-row__title,
  .section-heading__title--lg { font-size: var(--fs-20); }

  .section-heading__title { font-size: var(--fs-20); }
  .article { padding: var(--sp-4); border-radius: var(--r-2xl); }
  .article__title { font-size: var(--fs-24); }
  .workspace { padding: var(--sp-4); }
  .workspace__title { font-size: var(--fs-20); }

  .grid-resources { grid-template-columns: minmax(0, 1fr); }
  .resource-card { min-height: 0; }
  .grid-agenda,
  .glossary-list,
  .settings-grid,
  .quiz-list,
  .grid-cards--wide { grid-template-columns: minmax(0, 1fr); }
  .grid-days { grid-template-columns: minmax(0, 1fr); }
  .grid-days > *,
  .grid-days > :nth-child(n + 4) { grid-column: auto; }

  .quiz-card { padding: var(--sp-5) var(--sp-4); border-radius: var(--r-3xl); }
  .quiz-card__question { font-size: var(--fs-18); }
  .quiz-option { min-height: 56px; }
  .quiz-actions .pill { flex: 1 1 140px; }
  .results { padding: var(--sp-5) var(--sp-4); }

  .arch { flex-wrap: wrap; padding: var(--sp-4); gap: 14px; }
  .arch-node { flex: 1 1 40%; }
  .arch-node + .arch-node::before { display: none; }

  .pipe { grid-template-columns: minmax(0, 1fr); }
  .melt { flex-direction: column; align-items: stretch; }
  .melt__signals { padding-right: 0; }
  .melt__arrow { transform: rotate(90deg); }
  .topo { height: 300px; }
  .topo__node { width: 22%; padding: 5px 3px; }
  .topo__name { font-size: 10px; }
  .topo__status { font-size: 8px; }

  .wf__row { grid-template-columns: minmax(0, 1fr); }
  .wf__axis { padding-left: 0; }

  .log-row { grid-template-columns: 60px 56px minmax(0, 1fr); }
  .log-row__msg { grid-column: 1 / -1; }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .sim { padding: var(--sp-4); }
  .sim__readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .toast-root { left: var(--sp-4); right: var(--sp-4); align-items: stretch; }
  .modal { padding: var(--sp-5); }
  .modal__actions .pill { flex: 1 1 120px; }
  .kv-list { grid-template-columns: minmax(0, 1fr); }
  .kv-list dt { margin-top: 6px; }
}

/* ---- Touch devices: comfortable targets -------------------------------------------------------------- */
@media (pointer: coarse) {
  .nav-item { min-height: 44px; }
  .module-row,
  .lab-step { min-height: 56px; }
  .flag-btn { min-height: 36px; padding: 8px 12px; }
  .icon-btn { width: 44px; height: 44px; }
  .choice,
  .log-row { min-height: 48px; }
}

/* Phone landscape / very short viewports: the drawer must scroll */
@media (max-height: 520px) {
  .sidebar { overflow-y: auto; }
}