/* ==========================================================================
   TOOLPULSE SINGLE INTERACTIVE TOOL WORKSPACE ARCHITECTURE
   ========================================================================== */

/* 1. SINGLE WORKSPACE TITLE HERO HEADER */
.tool-hero { 
  padding: 56px 0 28px; 
}

.tool-hero h1 { 
  margin: 12px 0 16px; 
  font-size: clamp(2rem, 4vw, 3rem); 
  font-weight: 800;
  line-height: 1.15;
}

.tool-hero p { 
  max-width: 720px; 
  margin: 0;
  color: var(--color-muted); 
  font-size: 1.05rem;
  line-height: 1.6;
}

/* 2. SPLIT INTERFACE FLEX ARCHITECTURE */
.tool-shell { 
  display: grid; 
  grid-template-columns: minmax(0, 1fr) 280px; 
  align-items: start; 
  gap: 32px; 
  padding-bottom: 80px; 
}

/* Primary Execution Control Desk Wrapper */
.tool-panel { 
  padding: clamp(20px, 4vw, 36px); 
  background: var(--color-surface); 
  border: 1px solid var(--color-border); 
  border-radius: var(--radius-lg); 
  box-shadow: var(--shadow-sm); 
}

.tool-panel h2 { 
  margin-top: 0; 
  font-size: 1.5rem;
  font-weight: 700;
}

/* Supplementary Info & Google AdSense Sidebar Column */
.tool-sidebar { 
  display: grid; 
  gap: 20px; 
}

.tool-sidebar .card { 
  padding: 24px; 
}

.tool-sidebar h3 {
  margin-top: 0;
  font-size: 1.15rem;
  margin-bottom: 12px;
}

/* 3. WORKSPACE MODIFIERS & MANIPULATORS */
.tool-actions { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 12px; 
  margin-top: 20px; 
}

.tool-output { 
  margin-top: 24px; 
}

/* Lower Descriptive SEO Content & Manual instructions */
.tool-description { 
  max-width: 850px; 
  margin: 0 auto 64px; 
  color: var(--color-muted); 
  font-size: 1.05rem;
  line-height: 1.7;
}

/* 4. ACCESSIBLE FAQ SCHEMA INTERFACES */
.tool-faq { 
  max-width: 850px; 
  margin: 48px auto; 
}

.tool-faq details { 
  padding: 18px 0; 
  border-bottom: 1px solid var(--color-border); 
}

.tool-faq summary { 
  cursor: pointer; 
  font-weight: 700; 
  font-size: 1.1rem;
  color: var(--color-text);
  list-style: none; /* Hide default native arrows cleanly */
  position: relative;
  padding-right: 32px;
}

/* Custom indicator state decoration elements */
.tool-faq summary::-webkit-details-marker {
  display: none;
}

.tool-faq summary::after {
  content: '+';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  color: var(--color-primary);
  font-weight: normal;
  transition: transform 0.2s ease;
}

.tool-faq details[open] summary::after {
  content: '−';
  transform: translateY(-50%) rotate(180deg);
}

.tool-faq details p {
  margin-top: 12px;
  margin-bottom: 0;
  color: var(--color-muted);
  line-height: 1.6;
}

/* 5. SIDEBAR RESPONSIVE COLLAPSE CONTEXT */
@media (max-width: 960px) {
  .tool-shell { 
    grid-template-columns: 1fr; /* Stack sidebar directly beneath workspace grid track */
    gap: 32px;
  }
  
  .tool-sidebar {
    width: 100%;
  }
}