/* ====================================================================
   MOBILE — purpose-built simple layout for phones (≤ 640px)
   ====================================================================
   This file is loaded AFTER responsive.css and is allowed to use
   !important freely. The goal isn't pretty — it's functional. The
   desktop CSS Grid shell is dismantled and replaced with a plain
   block-flow layout; the sidebar becomes an off-canvas drawer
   triggered by a hamburger that's hidden on desktop.

   Breakpoint chosen at 640px — covers phones in portrait + small
   landscape. The 641-799 band keeps the responsive.css "single column
   asides, tighter padding" layout (still recognizably the desktop
   chrome). Below 640 we burn it down.
   ==================================================================== */

@media (max-width: 640px) {

  /* ─── shell — kill the grid, become block flow ────────────────────── */
  .io-shell {
    display: block !important;
    height: auto !important;
    width: 100% !important;
    min-height: 100vh;
    overflow-x: hidden;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-template-areas: none !important;
  }

  /* topbar stays at the top, full width */
  .io-shell__top {
    position: sticky !important;
    top: 0; left: 0; right: 0;
    z-index: 60;
    height: 52px;
    grid-area: auto !important;
  }

  /* sidebar becomes an off-canvas drawer */
  .io-shell__left {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: 270px !important;
    z-index: 90;
    transform: translateX(-100%);
    transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--io-surface-sunken);
    border-right: 1px solid var(--io-accent-dim);
    grid-area: auto !important;
    overflow-y: auto;
  }
  .io-shell.is-menu-open .io-shell__left {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.6);
  }

  /* right rail — gone */
  .io-shell__right { display: none !important; }

  /* main column — full width, normal scroll */
  .io-shell__main {
    width: 100% !important;
    height: auto !important;
    overflow-y: visible !important;
    grid-area: auto !important;
  }

  /* drawer backdrop — real div emitted by the shell, click-to-close
     is handled in mobile-menu.js. Only paints when menu is open. */
  .io-shell__overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 85;
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms ease;
  }
  .io-shell.is-menu-open .io-shell__overlay {
    opacity: 1;
    pointer-events: auto;
  }

  /* ─── topbar — drop most chrome, surface the hamburger ────────────── */
  .hdr-bc, .hdr-ticker,
  .hdr-bell, .hdr-term, .hdr-settings, .hdr-mail,
  .hdr-sep,
  .hdr-user-meta { display: none !important; }
  .hdr-progress { display: none !important; }   /* laser sweep — unused on mobile */

  /* surface the hamburger button (hidden on desktop) */
  .hdr-menu-toggle { display: inline-flex !important; }

  .hdr-user-tile { width: 36px; height: 36px; }
  .hdr-icon-btn  { min-width: 44px; min-height: 44px; }   /* tap target */

  /* ─── inside the drawer, RESTORE the full sidebar (override the
        responsive.css icon-only collapse rules) ───────────────────── */
  .pub-aside.sc {
    padding: 18px 14px 14px !important;
  }
  .pub-aside.sc .sc-brand        { gap: 10px !important; padding: 4px 4px 12px !important; }
  .pub-aside.sc .sc-brand-row    { justify-content: flex-start !important; gap: 12px !important; }
  .pub-aside.sc .sc-brand-name,
  .pub-aside.sc .sc-brand-path-row,
  .pub-aside.sc .sc-brand-footer { display: revert !important; }
  .pub-aside.sc .sc-corner       { display: revert !important; }
  .pub-aside.sc .sc-status,
  .pub-aside.sc .sc-foot .sc-adiv,
  .pub-aside.sc .sc-trace,
  .pub-aside.sc .sc-divider-art-row { display: revert !important; }
  .pub-aside.sc .sc-nr {
    display: grid !important;
    grid-template-columns: 30px 22px 1fr auto !important;
    justify-content: initial !important;
    padding: 8px 10px !important;
    border-left-width: 2px !important;
  }
  .pub-aside.sc .sc-pfx,
  .pub-aside.sc .sc-lb,
  .pub-aside.sc .sc-mem,
  .pub-aside.sc .sc-bd  { display: revert !important; }
  .pub-aside.sc .sc-nr::after { display: none !important; }   /* no hover tooltip in drawer */

  /* ─── home profile — single column, tight ─────────────────────────── */
  .profile-body {
    padding: 16px 12px !important;
    gap: 20px !important;
  }
  /* the actual 3-col grid is on .prof-identity, not .profile-body */
  .prof-identity {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  .prof-avatar       { width: 180px !important; height: 180px !important; margin: 0 auto !important; }
  .prof-avatar-col   { align-items: center !important; }
  .prof-avatar-actions { width: 100%; }
  .prof-avatar-actions .kr-btn { width: 100%; justify-content: center; }
  .prof-bottom-row   { display: flex !important; flex-direction: column; gap: 20px; }
  .prof-right-col    { gap: 16px; }
  .prof-side-widgets { display: none !important; }
  .prof-links-col    { width: 100%; }

  /* heatmap — let it scroll horizontally inside its own container */
  .prof-heatmap-section { flex-direction: column !important; gap: 14px !important; }
  .prof-heatmap-grids   { overflow-x: auto; max-width: 100%; padding-bottom: 6px; }
  .prof-heatmap-menu {
    flex: 1 1 auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    width: 100%;
  }

  /* now-playing card — keep cover but tighten meta */
  .prof-now-card { width: 100%; }

  /* ─── blog feed — single column ──────────────────────────────────── */
  .blog-body { padding: 16px 12px !important; }
  .cards-grid,
  .cards-stack,
  .cards-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .card-a, .card-b, .card-c { width: 100% !important; }
  .page-head { flex-direction: column; gap: 12px; align-items: flex-start; }
  .toolbar   { flex-wrap: wrap; gap: 4px; }
  .pagination { flex-wrap: wrap; }

  /* ─── papers — stack everything ──────────────────────────────────── */
  .papers-body { padding: 16px 12px !important; }
  .papers-grid { display: flex !important; flex-direction: column; gap: 20px; }
  .paper-row {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
  }
  .paper-year   { font-size: var(--io-fs-lg); }
  .paper-actions {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* ─── reader — flow narrow, code blocks scroll ────────────────────── */
  .reader-body { padding: 16px 12px !important; max-width: 100% !important; }
  .reader-body pre {
    overflow-x: auto !important;
    max-width: 100% !important;
    white-space: pre !important;
  }
  .reader-body table { display: block; overflow-x: auto; }
  .reader-head     { padding: 16px 12px !important; }
  .reader-toc-fixed,
  .reader-aside    { display: none !important; }
  .reader-byline   { flex-wrap: wrap; gap: 8px; }

  /* comments — tighter avatars + padding */
  .reader-comment       { padding: 12px 8px !important; }
  .reader-comment-avatar { width: 32px !important; height: 32px !important; }
  .reader-comment-actions { flex-wrap: wrap; }
  .reader-composer-anchor { padding: 12px !important; }
  .reader-composer textarea { font-size: var(--io-fs-sm); }

  /* ─── modals — viewport-fit ──────────────────────────────────────── */
  .modal-backdrop .modal,
  .cx-modal,
  .sr-modal,
  .set-modal,
  .lk-modal,
  .mg-pop {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 80px) !important;
  }
  .sr-backdrop { padding-top: 16px !important; }
  /* contact form — let the textarea take all available height */
  .cx-textarea { min-height: 100px !important; }

  /* ─── terminal — go fullscreen on mobile ─────────────────────────── */
  .kr-surface {
    width: 100vw !important; height: 100vh !important;
    top: 0 !important; left: 0 !important;
    transform: none !important;
    border-radius: 0 !important;
  }
  .kr-surface.dragging { transform: none !important; }   /* drag is meaningless when maximized */

  /* ─── CV — lock modal sits centered, drop bracket-corners noise ── */
  .lk-modal { width: calc(100vw - 16px) !important; }
}

/* ── hamburger button — hidden by default, .hdr-menu-toggle shown via
   the mobile media query above. Lives in the topbar markup always so
   we don't need a conditional render. Same goes for the overlay div:
   present in the DOM always, but stays display:none until ≤640px. */
.hdr-menu-toggle  { display: none; }
.io-shell__overlay { display: none; }
@media (max-width: 640px) {
  .io-shell__overlay { display: block; }
}