/* --- III. TAB-SPECIFIC STYLES --- */
/* --- Detailed Calculations Tab (`#calculationsTab`) Styles --- */

/* The `#calculationsTab` itself is a `.tab-content` div,
   which gets its basic visibility and fade-in animation from Shared Component styles.
   The primary content within this tab is structured using the
   `.calculation-section` component, which is also defined in Shared Component Styles.
   Therefore, there are very few, if any, styles *exclusively* for elements
   that *only* appear in the Detailed Calculations tab and nowhere else,
   beyond the ID of the main container.
*/

/* Main container for the detailed calculations content */
#calculationsDetails {
  /* This div will be populated by JavaScript with a series of
     `.calculation-section` elements.
     No specific styles are applied directly to `#calculationsDetails` itself
     in the provided CSS, as its children manage their own appearance.
  */

  /* Example of a style that *could* be specific to this container if needed:
     padding-top: var(--spacing-md); // Add some top padding if not within a card
  */
}

/*
Reminder: The following shared component styles are heavily used in this tab:
- `.calculation-section` (and its :hover state)
- `.calculation-section h4` (and its ::after pseudo-element)
- `.calculation-section h5` (and its ::before pseudo-element)
- `.calculation-formula` (and its scrollbar styles)
- `.calc-var-named`
- `.calc-var-numerical`
- `.calculation-result` (and its ::after pseudo-element)
- `a.citation-badge` (and its related styles for inline citations within formulas)

These styles are defined in the "Shared Component Styles" section
because they are designed to be reusable.

Mindstate: When converting the shared components, ensure:
- Remove all border-radius (set to 0)
- Replace neuomorphic shadows with minimal shadows
- Update colors to Mindstate palette
- Remove gradients from any backgrounds
- Use sharp corners throughout
*/

/* If there were any unique elements *only* found inside #calculationsDetails
 and not part of the .calculation-section component, their styles would go here.
 For example:

 #calculationsDetails .unique-calculation-summary {
   background-color: var(--color-bg-light); /* Mindstate: Would be #FAFAFA */
   padding: var(--spacing-sm);
   border-radius: 0; /* Mindstate: Sharp corners */
   margin-top: var(--spacing-lg);
 }
 (This is a hypothetical example, as no such unique elements are in the current HTML/CSS)
*/