/* ============================================
   ArchiTail AI — Layout System
   ============================================ */

/* --- Grid System (12-column) --- */
.container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--space-6); }
.container-narrow { max-width: 1080px; }
.container-wide { max-width: 1680px; }

.grid { display: grid; gap: var(--space-6); }
.grid-12 { grid-template-columns: repeat(12, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.col-span-1  { grid-column: span 1; }
.col-span-2  { grid-column: span 2; }
.col-span-3  { grid-column: span 3; }
.col-span-4  { grid-column: span 4; }
.col-span-5  { grid-column: span 5; }
.col-span-6  { grid-column: span 6; }
.col-span-7  { grid-column: span 7; }
.col-span-8  { grid-column: span 8; }
.col-span-9  { grid-column: span 9; }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; }

/* --- Flex Utilities --- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-center { align-items: center; justify-content: center; }
.flex-between { justify-content: space-between; }
.flex-start { align-items: flex-start; }
.items-center { align-items: center; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-wrap { flex-wrap: wrap; }

/* --- Spacing Utilities --- */
.p-0 { padding: 0; }
.p-1 { padding: 4px; }
.p-2 { padding: 8px; }
.p-3 { padding: 12px; }
.p-4 { padding: 16px; }
.p-6 { padding: 24px; }
.p-8 { padding: 32px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.px-6 { padding-left: 24px; padding-right: 24px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.py-6 { padding-top: 24px; padding-bottom: 24px; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

/* --- Other Utilities --- */
.w-full { width: 100%; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow-y: auto; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.hidden { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.cursor-pointer { cursor: pointer; }
.select-none { user-select: none; }
.pointer-events-none { pointer-events: none; }

/* ========================
   SHELL 1: Marketing Shell
   ======================== */
.shell-marketing {
  min-height: 100vh;
  background: var(--color-bg-canvas);
}

.topbar-marketing {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-public);
  display: flex;
  align-items: center;
  padding: 0 var(--space-8);
  z-index: var(--z-topbar);
  transition: border-color var(--duration-default) var(--ease-default);
  border-bottom: 1px solid transparent;
}
.topbar-marketing.scrolled {
  border-bottom-color: var(--color-border-subtle);
}

.topbar-marketing .topbar-logo {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.topbar-marketing .topbar-nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-left: auto;
}

.topbar-marketing .topbar-nav a {
  font-size: 14px;
  color: var(--color-text-secondary);
  transition: color var(--duration-default);
}
.topbar-marketing .topbar-nav a:hover { color: var(--color-text-primary); }

.topbar-marketing .topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: var(--space-8);
}

.marketing-content {
  padding-top: var(--topbar-public);
}

/* Marketing sections */
.marketing-section {
  padding: var(--space-24) 0;
  position: relative;
}
.marketing-section:first-child {
  padding-top: var(--space-32);
}

/* Alternating section backgrounds for visual rhythm */
.marketing-section-alt {
  background: var(--color-bg-primary);
}
.marketing-section-darker {
  background: rgba(0, 0, 0, 0.15);
}

.marketing-hero {
  min-height: calc(100vh - var(--topbar-public));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: var(--space-16) var(--space-6);
}

.marketing-hero .hero-title {
  max-width: 900px;
}
.marketing-hero .hero-subtitle {
  max-width: 640px;
  margin-top: var(--space-6);
  color: var(--color-text-secondary);
}
.marketing-hero .hero-cta {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-10);
}

/* Marketing footer */
.marketing-footer {
  border-top: 1px solid var(--color-border-subtle);
  padding: var(--space-16) 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: var(--space-12);
}
.footer-col-title {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.footer-col a {
  display: block;
  font-size: 14px;
  color: var(--color-text-secondary);
  padding: var(--space-1) 0;
  transition: color var(--duration-default);
}
.footer-col a:hover { color: var(--color-text-primary); }
.footer-bottom {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-subtle);
  font-size: 13px;
  color: var(--color-text-muted);
}

/* ========================
   SHELL 2: Workspace Shell
   ======================== */
.shell-workspace {
  display: grid;
  grid-template-columns: var(--sidebar-workspace) 1fr;
  grid-template-rows: var(--topbar-workspace) 1fr;
  height: 100vh;
  overflow: hidden;
}
.shell-workspace.sidebar-collapsed {
  grid-template-columns: var(--sidebar-rail) 1fr;
}

.topbar-workspace {
  grid-column: 1 / -1;
  height: var(--topbar-workspace);
  display: flex;
  align-items: center;
  padding: 0 var(--space-6);
  border-bottom: 1px solid var(--color-border-subtle);
  z-index: var(--z-topbar);
}

.sidebar-workspace {
  height: calc(100vh - var(--topbar-workspace));
  overflow-y: auto;
  border-right: 1px solid var(--color-border-subtle);
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  transition: width var(--duration-panel) var(--ease-panel-open);
}

.workspace-main {
  overflow-y: auto;
  padding: var(--space-6);
}

/* ========================
   SHELL 3: Studio Shell
   ======================== */
.shell-studio {
  display: grid;
  grid-template-columns: var(--sidebar-studio) 1fr var(--panel-standard);
  grid-template-rows: var(--topbar-studio) 1fr var(--bottombar-status);
  height: 100vh;
  overflow: hidden;
}
.shell-studio.sidebar-collapsed {
  grid-template-columns: var(--sidebar-rail) 1fr var(--panel-standard);
}
.shell-studio.panel-collapsed {
  grid-template-columns: var(--sidebar-studio) 1fr 0;
}
.shell-studio.sidebar-collapsed.panel-collapsed {
  grid-template-columns: var(--sidebar-rail) 1fr 0;
}

.topbar-studio {
  grid-column: 1 / -1;
  height: var(--topbar-studio);
  display: flex;
  align-items: center;
  padding: 0 var(--space-4);
  gap: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  z-index: var(--z-topbar);
}

.topbar-studio .topbar-left,
.topbar-studio .topbar-center,
.topbar-studio .topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.topbar-studio .topbar-center { margin: 0 auto; }
.topbar-studio .topbar-right { margin-left: auto; }

.sidebar-studio {
  height: calc(100vh - var(--topbar-studio) - var(--bottombar-status));
  overflow-y: auto;
  border-right: 1px solid var(--color-border-subtle);
  display: flex;
  flex-direction: column;
  transition: width var(--duration-panel) var(--ease-panel-open);
}

.studio-canvas {
  position: relative;
  overflow: hidden;
  /* Canvas slightly cooler than page bg for depth. Subtle dot grid for spatial reference. */
  background-color: #ECECEA;
  background-image: radial-gradient(circle, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 24px 24px;
}

.panel-studio {
  height: calc(100vh - var(--topbar-studio) - var(--bottombar-status));
  overflow-y: auto;
  border-left: 1px solid var(--color-border-subtle);
  transition: width var(--duration-panel) var(--ease-panel-open);
}

.bottombar-studio {
  grid-column: 1 / -1;
  height: var(--bottombar-status);
  display: flex;
  align-items: center;
  padding: 0 var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
  font-size: 12px;
  color: var(--color-text-muted);
}
.bottombar-studio .bottombar-left,
.bottombar-studio .bottombar-center,
.bottombar-studio .bottombar-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.bottombar-studio .bottombar-center { margin: 0 auto; }
.bottombar-studio .bottombar-right { margin-left: auto; }

/* Floating toolbar (Board Studio) */
.floating-toolbar {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
  border-radius: var(--radius-xl);
  z-index: var(--z-sticky);
}
.floating-toolbar .tool-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--duration-default);
}
.floating-toolbar .tool-btn:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-hover);
}
.floating-toolbar .tool-btn.active {
  color: var(--accent-ai-500);
  background: rgba(143, 175, 209, 0.12);
}
.floating-toolbar .tool-divider {
  width: 1px;
  height: 24px;
  background: var(--color-border-subtle);
  margin: 0 var(--space-1);
}

/* ========================
   RESPONSIVE
   ======================== */
/* M: 1280-1439px */
@media (max-width: 1439px) {
  .shell-studio {
    grid-template-columns: var(--sidebar-rail) 1fr var(--panel-standard);
  }
  .sidebar-studio .sidebar-label { display: none; }
  .sidebar-studio .nav-item { justify-content: center; padding: 8px; }
  .sidebar-studio .nav-item .nav-icon { margin: 0; }
}

/* S: 1024-1279px */
@media (max-width: 1279px) {
  .shell-studio {
    grid-template-columns: 0 1fr 0;
  }
  .sidebar-studio, .panel-studio {
    position: fixed;
    top: var(--topbar-studio);
    bottom: var(--bottombar-status);
    z-index: var(--z-sidebar);
    transform: translateX(-100%);
    transition: transform var(--duration-panel) var(--ease-panel-open);
  }
  .sidebar-studio.open { transform: translateX(0); width: var(--sidebar-studio); }
  .panel-studio {
    right: 0;
    left: auto;
    transform: translateX(100%);
  }
  .panel-studio.open { transform: translateX(0); width: var(--panel-standard); }

  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Below 1024px */
@media (max-width: 1023px) {
  .shell-workspace {
    grid-template-columns: 1fr;
  }
  .sidebar-workspace {
    position: fixed;
    left: 0;
    top: var(--topbar-workspace);
    bottom: 0;
    z-index: var(--z-sidebar);
    transform: translateX(-100%);
    width: var(--sidebar-workspace);
    transition: transform var(--duration-panel) var(--ease-panel-open);
  }
  .sidebar-workspace.open { transform: translateX(0); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}