/* ==========================================================
   ClipEngine — layout shells
   ----------------------------------------------------------
   Layout ONLY. Colour lives in themes.css. Each block is
   scoped under a single [data-shell="…"] on <html> and only
   ever touches box/flex/position/size properties.

   Gated to >= 1024px: below that, index.css already governs
   the 900–1024 icon rail and the <900 hamburger drawer, and
   those are the proven fallback for every design.
   ========================================================== */
@media (min-width: 1024px) {

  /* ---------- RAIL: 64px icon-only sidebar ---------- */
  [data-shell="rail"] .sidebar {
    width: 64px;
    padding-inline: 8px;
    overflow: visible;
  }
  [data-shell="rail"] .logo-text,
  [data-shell="rail"] .nav-link span,
  [data-shell="rail"] .profile-switcher-label,
  [data-shell="rail"] .theme-switch-label,
  [data-shell="rail"] .profile-manage-link,
  [data-shell="rail"] .ai-badge { font-size: 0; }
  [data-shell="rail"] .ai-badge .dot { font-size: 0; }
  [data-shell="rail"] .sidebar-logo { justify-content: center; padding-inline: 0; }
  [data-shell="rail"] .nav-link { justify-content: center; padding: 8px; }
  [data-shell="rail"] .nav-link svg { margin: 0; }
  [data-shell="rail"] .profile-switcher { padding-inline: 0; align-items: center; }
  [data-shell="rail"] .profile-select,
  [data-shell="rail"] #design-select {
    width: 44px; padding: 6px; text-indent: 0; overflow: hidden;
  }
  [data-shell="rail"] .sidebar-footer { padding-inline: 0; }
  [data-shell="rail"] .ai-status { align-items: center; }

  /* right-anchored hover/focus tooltip built from data-label */
  [data-shell="rail"] .nav-link { position: relative; }
  [data-shell="rail"] .nav-link::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--bg-tertiary, #1a1a22);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
    z-index: 80;
  }
  [data-shell="rail"] .nav-link:hover::after,
  [data-shell="rail"] .nav-link:focus-visible::after { opacity: 1; }

  /* ---------- SPATIAL: the app is a centred floating card ---------- */
  [data-shell="spatial"] .app {
    max-width: 1180px;
    height: 88vh;
    margin: 6vh auto;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--glass-border);
  }
  [data-shell="spatial"] .content-column { height: auto; min-height: 0; flex: 1; }
  [data-shell="spatial"] .bg-gradient {
    background:
      radial-gradient(60% 60% at 15% 15%, rgba(192, 132, 252, 0.18) 0%, transparent 60%),
      radial-gradient(55% 55% at 85% 80%, rgba(96, 165, 250, 0.16) 0%, transparent 60%),
      radial-gradient(40% 40% at 50% 50%, rgba(59, 130, 246, 0.10) 0%, transparent 70%);
  }

  /* ---------- TOPNAV: horizontal bar, no left sidebar ---------- */
  [data-shell="topnav"] .app { flex-direction: column; height: 100vh; }
  [data-shell="topnav"] .sidebar {
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-sm) var(--space-lg);
    border-right: none;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
  }
  [data-shell="topnav"] .sidebar-logo { margin: 0; padding: 0; flex-shrink: 0; }
  [data-shell="topnav"] .profile-switcher {
    flex-direction: row; align-items: center; padding: 0; gap: var(--space-sm); flex-shrink: 0;
  }
  [data-shell="topnav"] .profile-switcher-label,
  [data-shell="topnav"] .profile-manage-link { display: none; }
  [data-shell="topnav"] .nav-links {
    flex-direction: row;
    flex: 1;
    gap: var(--space-xs);
    overflow-x: auto;
    scrollbar-width: none;
    min-width: 0;
  }
  [data-shell="topnav"] .nav-links::-webkit-scrollbar { display: none; }
  [data-shell="topnav"] .nav-link { white-space: nowrap; padding: var(--space-sm) var(--space-md); }
  [data-shell="topnav"] .nav-link.active::before { content: none; }
  [data-shell="topnav"] .nav-link.active {
    border-bottom: 2px solid var(--accent-primary);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }
  [data-shell="topnav"] .sidebar-footer {
    flex-direction: row;
    align-items: center;
    gap: var(--space-md);
    padding: 0;
    margin-left: auto;
    border-top: none;
    flex-shrink: 0;
  }
  [data-shell="topnav"] .theme-switch { margin: 0; }
  [data-shell="topnav"] .theme-switch-label { display: none; }
  [data-shell="topnav"] .ai-status { flex-direction: row; }
  [data-shell="topnav"] .content-column { height: auto; flex: 1; min-height: 0; }
  [data-shell="topnav"] .content { --content-max: 1400px; }
}