/* ══════════════════════════════════════════════════════
  TABLET — 601px to 1180px (loaded via media attribute in index.html)
  Desktop lives in styles.css. Phones get mobile.css instead.
══════════════════════════════════════════════════════ */

/* ── Layout (moved from styles.css, unchanged) ── */
@media (max-width:1100px){ .seo-grid{ grid-template-columns:1fr; } }
@media (max-width:1000px){ .set-grid{ grid-template-columns:1fr; } }
@media (max-width:780px){ .plans-grid{ grid-template-columns:1fr; } }

@media (max-width:1024px){
  :root{ --sidebar-w:200px; }
}

/* Portrait: icon-rail sidebar */
@media (max-width:820px){
  :root{ --sidebar-w:var(--sidebar-sm); }
  .sidebar{ width:var(--sidebar-sm) !important; min-width:var(--sidebar-sm) !important; }
  .sidebar .nav-label{ opacity:0 !important; width:0 !important; pointer-events:none; }
  .sidebar .nav-icon{ margin:0 auto; }
  .sidebar .plan-anchor-info,
  .sidebar .suite-switcher-info{ opacity:0 !important; width:0 !important; pointer-events:none; }
  .sidebar .plan-anchor,
  .sidebar .suite-switcher{ padding:6px; gap:0; width:auto; justify-content:center; }
  .sidebar .plan-anchor-icon,
  .sidebar .suite-switcher-icon{ width:36px; height:36px; }
  .sidebar-bottom{ padding:0 0 14px; align-items:center; }
  .sidebar-bottom::before{ margin:0 12px 10px; align-self:stretch; }
  .collapse-btn{ display:none; }
}

/* ── Touch tablets only (iPad etc.) ── */
@media (hover:none) and (pointer:coarse){
  /* 16px stops iOS zooming the page when an input is focused */
  .studio-inp, .studio-textarea, .url-inp, .slash-inp, .vl-niche-inp, .regen-notes-inp{ font-size:16px; }

  /* No "stuck" hover lift after a tap */
  .dash-nav-card:hover, .hub-card:hover{ transform:none; }
  .dash-nav-card:hover .dash-nav-card-arrow, .hub-card:hover .hub-card-arrow{ transform:none; }

  /* Replace label is hover-only on desktop */
  .vl-drop.has-img .vl-drop-swap{ display:block; }

  /* Bigger tap targets */
  .vl-fb-btn{ width:44px; height:44px; }
  .dash-tips-dot{ position:relative; }
  .dash-tips-dot::after{ content:''; position:absolute; inset:-12px; }
  .studio-tag-remove{ position:relative; }
  .studio-tag-remove::after{ content:''; position:absolute; inset:-10px; }
  .user-menu-item{ min-height:42px; }
}