/* ====================================================================
   RESPONSIVE — viewport-driven layout collapse
   ====================================================================
   Three breakpoints, loaded LAST so it overrides shell/sidebar/home/blog
   defaults at narrow widths.

     ≥ 1400px           full layout (320 / 1fr / 320)
     1100–1399px        sidebar collapses to icons-only (62px); rail stays
      800–1099px        + right rail hidden, main expands
      < 800px           + profile/blog stack to single column

   Sidebar collapse: the grid column snaps instantly (CSS Grid track
   animation is patchy across browsers), but everything that hides inside
   the sidebar fades via opacity + max-width transitions, which is what
   sells the animation feel. The 62px figure picks up the icon (22px) +
   left/right gutter + borders comfortably.
   ==================================================================== */

/* ── sidebar collapse — applies at all breakpoints below 1400px ─────── */
@media (max-width: 1399px) {
  .io-shell {
    grid-template-columns: 62px 1fr 320px;
  }

  /* tighten the sidebar's outer padding so 22px icons sit centered in 62 */
  .pub-aside.sc {
    padding: 14px 0 14px 0;
    transition: padding 240ms ease;
  }

  /* brand block — keep logo, drop name + path */
  .sc-brand        { gap: 4px; padding: 0; }
  .sc-brand-row    { justify-content: center; gap: 0; }
  .sc-brand-name,
  .sc-brand-path-row,
  .sc-brand-footer { display: none; }

  /* hide corner brackets — they need width to look right */
  .sc-corner { display: none; }

  /* nav rows: drop the 4-column grid, center just the icon */
  .sc-nr {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 11px 0;
    border-left-width: 3px;     /* slightly thicker — easier to see in a 62px col */
    position: relative;
  }
  .sc-pfx, .sc-lb, .sc-mem, .sc-bd { display: none; }
  .sc-ic {
    width: auto;
    font-size: 16px;
  }

  /* divider art row + status block + footer — pure noise at 62px */
  .sc-divider-art-row,
  .sc-status,
  .sc-foot .sc-adiv,
  .sc-trace { display: none; }

  /* foot nav uses the same rule as main nav (already covered by .sc-nr) */

  /* fade-in hover tooltip — shows the label when hovering a collapsed row.
     Pure CSS, no JS needed. Positioned just to the right of the sidebar. */
  .sc-nr::after {
    content: attr(aria-label);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    padding: 4px 10px;
    background: var(--io-surface-raised);
    border: 1px solid var(--io-accent-dim);
    border-radius: var(--io-radius-xs);
    color: var(--io-text-primary);
    font-family: var(--io-font-mono);
    font-size: var(--io-fs-micro);
    letter-spacing: 0.04em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease;
    z-index: 50;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  }
  .sc-nr:hover::after { opacity: 1; }
}

/* ── early rail-hide for content-heavy pages (home, papers) ────────────
   The home heatmap has its own right-side menu and the papers page has
   a metrics aside — both want every horizontal pixel they can get.
   Marker class .io-shell--rail-hide-early is stamped by BlogShellRender
   on those routes. Sidebar stays at its current width (full 320 at
   ≥1400, the 62 collapse hits below as usual). */
@media (max-width: 1699px) {
  .io-shell--rail-hide-early {
    grid-template-columns: 320px 1fr 0;
  }
  .io-shell--rail-hide-early .io-shell__right { display: none; }

  /* on home + papers, collapse the page's own aside at this width too —
     same reasoning as the chassis rail. The content gets a wide single
     column instead of being squeezed next to a 320px metrics card. */
  .io-shell--rail-hide-early .prof-identity     { grid-template-columns: 1fr; gap: 24px; }
  .io-shell--rail-hide-early .prof-bottom-row   { grid-template-columns: 1fr; gap: 24px; }
  .io-shell--rail-hide-early .prof-avatar-col   { align-items: flex-start; }
  .io-shell--rail-hide-early .prof-heatmap-section { flex-direction: column; }
  .io-shell--rail-hide-early .prof-heatmap-menu    { max-width: none; flex-basis: auto; }
  .io-shell--rail-hide-early .prof-heatmap-grids   { overflow-x: auto; }
  .io-shell--rail-hide-early .papers-grid       { grid-template-columns: 1fr; gap: 24px; }
}

/* Below 1400 the sidebar collapse rule above re-sets the first column
   to 62px; we need the rail-hide-early rule to keep its 0 in that band. */
@media (max-width: 1399px) {
  .io-shell--rail-hide-early {
    grid-template-columns: 62px 1fr 0;
  }
}

/* ── right rail vanishes + page-level asides collapse ───────────────
   Same breakpoint as chassis-rail-hidden: once we lose 320px of rail,
   page-level layouts (profile 3-col, papers 2-col, etc) should claim
   the freed width as a wider single column instead of keeping their
   own asides squeezed against the now-narrower main slot. */
@media (max-width: 1099px) {
  .io-shell {
    grid-template-columns: 62px 1fr 0;
  }
  .io-shell__right { display: none; }

  /* home identity row — single column (avatar / copy / links stacked).
     .profile-body is already a flex column wrapper; the actual 3-col
     grid lives on .prof-identity. */
  .prof-identity     { grid-template-columns: 1fr; gap: 24px; }
  .prof-bottom-row   { grid-template-columns: 1fr; gap: 24px; }
  .prof-avatar-col   { align-items: flex-start; }

  /* heatmap section — stack the menu under the grid */
  .prof-heatmap-section { flex-direction: column; }
  .prof-heatmap-menu    { max-width: none; flex-basis: auto; }
  .prof-heatmap-grids   { overflow-x: auto; }

  /* papers page — collapse the 2-col layout (metrics aside drops below) */
  .papers-grid { grid-template-columns: 1fr; gap: 24px; }

  /* blog feed — toolbar wraps cleanly */
  .toolbar { flex-wrap: wrap; }
}

/* ── mobile — tighter padding + drop low-priority chrome ───────────── */
@media (max-width: 799px) {
  /* trimmed outer padding everywhere — reclaim the gutter */
  .profile-body { padding: 24px 16px; gap: 28px; }
  .blog-body    { padding: 24px 16px; }
  .papers-body  { padding: 24px 16px; }
  .reader-body  { padding: 0 16px; }

  .page-head    { flex-direction: column; gap: 14px; }

  /* topbar — drop the ticker on the smallest screens (too noisy) */
  .hdr-ticker { display: none; }
}

/* ── below the typical phone width — last-ditch density tweaks ──────── */
@media (max-width: 480px) {
  .hdr-bc          { display: none; }   /* breadcrumb consumes valuable px */
  .hdr-user-tile   { display: none; }   /* avatar tile too */
  .hdr-user-name,
  .hdr-user-role   { display: none; }
}