/* ── abyOS responsive — OS chrome is desktop-only ── */

/* ─── Mobile (< 900px) ─── */
@media (max-width: 899px) {

  /* body scrolls normally */
  body { overflow: auto !important; height: auto !important; }
  body::before { display: none; } /* no grid overlay on mobile */

  /* hide OS-specific chrome */
  #taskbar,
  #sys-tray,
  .desktop-icons,
  .sticky-note { display: none !important; }

  /* restore minimised windows on mobile — no controls to bring them back */
  .os-window.is-minimized { display: block !important; }

  /* OS desktop becomes a normal flow container */
  #os-desktop {
    position: static !important;
    overflow: visible !important;
    height: auto !important;
  }

  /* All three views visible and stacked */
  .os-view { display: block !important; }

  /* windows become normal block cards */
  .os-window {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    right: auto !important;
    left:  auto !important;
    top:   auto !important;
    bottom: auto !important;
    margin-bottom: 12px;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.25) !important;
  }

  /* titlebar not draggable on mobile — remove grab cursor */
  .win-titlebar { cursor: default !important; }
  .win-controls { display: none !important; }

  /* ── Home view mobile layout ── */
  #view-home { padding: 12px 14px 80px; }

  /* ── Works view mobile ── */
  .polaroid-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .works-body { padding: 14px 14px 80px !important; }
  .works-title { font-size: 28px !important; }

  /* ── About view mobile ── */
  .about-body {
    grid-template-columns: 1fr !important;
    gap: 20px;
    padding: 14px 14px 80px !important;
  }
  .about-photos { flex-wrap: wrap; }
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── Mobile bottom nav ── */
  #mobile-nav {
    display: flex !important;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
    background: var(--win-bg);
    border-top: 1px solid var(--win-border);
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
    justify-content: space-around; align-items: center;
  }
  .mob-nav-item {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    font-family: var(--font-mono); font-size: 8px; color: var(--text-muted);
    text-decoration: none; padding: 4px 10px; cursor: pointer;
    background: none; border: none;
  }
  .mob-icon { font-size: 18px; line-height: 1; }
  .mob-nav-item.active { color: var(--accent); }
  .mob-nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* ── Project pages (myboo, myrtle, contact) ── */
  .mb-body, .myrtle-body { grid-template-columns: 1fr !important; gap: 20px; padding: 16px 14px 60px !important; }
  .mb-title  { font-size: 40px !important; }
  .myrtle-title { font-size: 36px !important; }
  .contact-body { padding: 20px 14px !important; }
}

/* ─── Very small (< 400px) ─── */
@media (max-width: 399px) {
  .polaroid-grid { grid-template-columns: 1fr !important; }
  .about-photos  { flex-direction: column; }
}

/* ─── Print ─── */
@media print {
  #taskbar, #sys-tray, .desktop-icons, #mobile-nav,
  .sticky-note, .win-controls { display: none !important; }
  .os-view { display: block !important; }
  .os-window {
    position: static !important; width: 100% !important;
    box-shadow: none !important; backdrop-filter: none !important;
  }
  body { overflow: auto !important; height: auto !important; background: white !important; color: black !important; }
  @page { margin: 1.5cm; }
}