/**
 * responsive.css — breakpoint overrides. Mobile-first tweaks only;
 * base rules in layout.css/components.css already target desktop.
 */

/* ---------------------------- Tablet ---------------------------- */
@media (max-width: 1024px) {
  #app-shell { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }
  #app-shell:not(.sidebar-collapsed) .sidebar-brand__text,
  #app-shell:not(.sidebar-collapsed) .nav-item__label,
  #app-shell:not(.sidebar-collapsed) .sidebar-section__label,
  #app-shell:not(.sidebar-collapsed) .sidebar-search { display: none; }
  .tool-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* ---------------------------- Mobile ---------------------------- */
@media (max-width: 720px) {
  #app-shell { grid-template-columns: 1fr; }

  #sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: min(84vw, 320px);
    transform: translateX(-100%);
    transition: transform var(--duration-slow) var(--ease-out);
  }
  #app-shell.mobile-sidebar-open #sidebar { transform: translateX(0); }
  #app-shell.mobile-sidebar-open .mobile-backdrop { display: block; }
  #app-shell.mobile-sidebar-open .sidebar-brand__text,
  #app-shell.mobile-sidebar-open .nav-item__label,
  #app-shell.mobile-sidebar-open .sidebar-section__label,
  #app-shell.mobile-sidebar-open .sidebar-search { display: revert; }

  #topbar { padding: 0 var(--space-4); }
  #btn-mobile-menu { display: inline-flex; }
  #topbar-search-wrap { display: none; }
  #workspace { padding: var(--space-4) var(--space-4) calc(var(--dock-h) + 64px); }
  #prompt-dock { left: var(--space-3); right: var(--space-3); bottom: calc(56px + var(--space-3)); }

  .tool-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .data-table { display: block; overflow-x: auto; }
  .data-table table, .data-table { min-width: 460px; }
  .board { grid-template-columns: 1fr; }
  .result-strip { gap: var(--space-4); padding: var(--space-4); }
  .resume-row-grid { grid-template-columns: 1fr !important; }

  #mobile-tabbar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 56px;
    background: var(--color-bg-glass);
    backdrop-filter: blur(var(--glass-blur));
    border-top: 1px solid var(--color-border);
    z-index: var(--z-topbar);
  }
  #mobile-tabbar .tab-item {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    background: none; border: none;
    color: var(--color-text-faint);
    font-size: var(--fs-2xs);
    font-weight: 600;
  }
  #mobile-tabbar .tab-item.is-active { color: var(--color-primary); }
  #mobile-tabbar .tab-item svg { width: 20px; height: 20px; }

  #toast-region { left: var(--space-3); right: var(--space-3); bottom: calc(56px + var(--space-3)); }
  .toast { min-width: 0; max-width: none; width: 100%; }
}

@media (max-width: 420px) {
  .tool-grid { grid-template-columns: 1fr; }
}