/* ==========================
   Merged Styles: layout.css + markup.css (cleaned)
   ========================== */

/* 1) Base reset & typography */
html, body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background-color: #fafafa;
  color: #202124;
}

/* 2) Container and Sections */
.container {
  width: min(1200px, 92%);
  margin: 0 auto;
}

.layout-section1 {
  background-color: #80f1bc;
  box-shadow: 0 1px 3px rgba(60,64,67,.1), 0 4px 6px rgba(60,64,67,.05);
  padding: 12px 0;
}
.layout-section2,
.layout-section {
  background-color: #fff;
  padding: 12px 0;
  margin-bottom: 20px;
}

/* 3) Two-column layout */
#section-3 .container {
  display: flex;
  gap: 24px;
}
#left-container { flex: 7; }
#right-container { flex: 3; }

/* >>> Your request: better font size and line spacing in both containers <<< */
#left-container,
#right-container {
  padding: 8px;
  max-height: 80vh;
  overflow-y: auto;
  border: 2px solid #e0e0e0;
  border-radius: 8px;

  /* Readability defaults */
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.75;
}

/* Make transcript inherit the container rhythm */
.transcript-column {
  font-size: inherit;
  line-height: inherit;
}

/* 4) Buttons and nav */
#theme-nav,
#theme-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

#theme-nav button { margin: 4px 8px 4px 0; }

button, .theme-button {
  padding: 6px 14px;
  font-size: 14px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  border: 2px solid transparent;
  transition: transform .15s ease, opacity .15s ease;
  text-transform: capitalize;
}
button:hover, .theme-button:hover {
  opacity: .95;
  transform: scale(1.02);
}

/* 5) Theme button colors (from layout.css) */
.theme-button.market-opportunity { background: #2da309; color: #fff; }
.theme-button.challenges { background: #e4523e; color: #fff; }
.theme-button.business-optimisation { background: #f4f153; color: #000; }
.theme-button.product-launch { background: #f453ce; color: #fff; }
.theme-button.differentiated-capability { background: #53e9f4; color: #000; }
.theme-button.transactions { background: #b6f453; color: #000; }
.theme-button.market-size { background: #a7e4c7; color: #000; }
.theme-button.esg { background: #58f453; color: #000; }
.theme-button.spin-off { background: #f4a80f; color: #fff; }
.theme-button.partnerships { background: #7ff1aa; color: #000; }
.theme-button.capex { background: #f0b4dd; color: #000; }
.theme-button.growth-drivers { background: #cae3a2; color: #000; }
.theme-button.restructuring { background: #d4e02a; color: #000; }
.theme-button.company-focus { background: #dabef1; color: #000; }
.theme-button.digital { background: #f5b581; color: #000; }

/* Prevent inherited borders from markup styles */
.theme-button.growth-drivers,
.theme-button.restructuring,
.theme-button.company-focus,
.theme-button.digital {
  border: none !important;
}

/* 6) Tag chips & numeric highlights (from markup.css) */
.theme-tag {
  display: inline-block;
  margin: 0.1em 0;
  padding: 0.3em 0.6em;
  border-radius: 0.3em;
  font-size: 0.95em;
}

.money {
  background: #d0f0c0;
  padding: 0.2em 0.4em;
  border-radius: 0.2em;
  color: #006400;
}

.percent {
  background: #ffe0b2;
  padding: 0.2em 0.4em;
  border-radius: 0.2em;
  color: #e65100;
}

/* Non-button theme chips (from markup.css) */
.market-opportunity { background: #2da309; color: white; }
.challenges { background: #e4523e; color: white; }
.business-optimisation { background: #f4f153; color: black; }
.product-launch { background: #f453ce; color: white; }
.differentiated-capability { background: #53e9f4; color: black; }
.transactions { background: #b6f453; color: black; }
.market-size { background: #a7e4c7; color: black; }
.esg { background: #58f453; color: black; }
.spin-off { background: #f4a80f; color: black; }
.partnerships { background: #7ff1aa; color: black; }
.capex { background: #f0b4dd; color: black; }
.growth-drivers { background: #cae3a2; color: black; }
.restructuring { background: #d4e02a; color: black; }
.company-focus { background: #dabef1; color: black; }
.digital { background: #f5b581; color: black; }

/* 7) Headings, media, responsiveness */
h1 { font-size: clamp(20px, 3.2vw, 32px); margin: 0; }
h3 { font-size: clamp(16px, 2.2vw, 22px); margin: 12px 0; }
img { max-width: 100%; height: auto; }
table { width: 100%; border-collapse: collapse; }

/* Stack on narrow screens */
@media (max-width: 900px) {
  #section-3 .container { flex-direction: column; }
  #left-container, #right-container { max-height: none; }
}

/* ==========
   Raw source notes (not rendered):
   - Portions merged from layout.css and markup.css
   - Readability set via #left-container/#right-container
   - .transcript-column inherits to avoid conflicts
   ========== */