/* Internal Tool Layout - Full-Width Two-Column Design */

/* Responsive breakpoints for internal tool */
@media (max-width: 1024px) {
  /* Stack columns on tablets and below */
  .internal-tool-layout {
    flex-direction: column;
  }
  
  .internal-tool-left {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--slate-200);
    max-height: 50vh;
  }
  
  .internal-tool-right {
    width: 100%;
  }
}

@media (min-width: 1440px) {
  /* Optimize for large desktop monitors */
  .internal-tool-right {
    max-width: 65%;
  }
  
  .internal-tool-left {
    width: 35%;
  }
}

/* Readability constraints - limit line width */
.readable-text {
  max-width: 65ch; /* Optimal reading width */
  line-height: 1.7;
}

/* Increased vertical rhythm */
.section-spacing {
  margin-bottom: 2.5rem; /* 40px */
}

.section-spacing-sm {
  margin-bottom: 1.5rem; /* 24px */
}

/* Calm, scannable interface */
.internal-tool-section {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--slate-200);
}

.internal-tool-section:last-child {
  border-bottom: none;
}

/* Subtle visual separation */
.column-separator {
  border-right: 1px solid var(--slate-200);
  background: var(--slate-50);
}

.dark .column-separator {
  border-right-color: var(--slate-700);
  background: var(--slate-900);
}

/* Internal tool aesthetic - no heavy outlines */
.internal-card {
  background: white;
  border: 1px solid var(--slate-200);
  border-radius: 0.375rem;
  padding: 1rem;
}

.dark .internal-card {
  background: var(--slate-800);
  border-color: var(--slate-700);
}

/* Soft dividers */
.soft-divider {
  border-top: 1px solid var(--slate-200);
  margin: 1.5rem 0;
}

.dark .soft-divider {
  border-top-color: var(--slate-700);
}