/* ============================================================
   GTM Chemistry Framework — /growth/gtmchemistry/
   Extends growth/growth.css (Frutiger Aero / Vista Explorer).
   Only the chemistry-specific components live here; all chrome,
   typography and background come from growth.css.
   ============================================================ */

/* ===== Periodic table of the four discovery elements ===== */
.chem-table {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 14px 0 18px;
}

.chem-element {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 50, 100, 0.35);
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #e8f4fc 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 4px 12px rgba(15, 99, 176, 0.2);
  transition: transform 0.15s, box-shadow 0.15s;
  text-decoration: none;
  color: inherit;
}
.chem-element:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 8px 18px rgba(15, 99, 176, 0.3);
  text-decoration: none;
}

.chem-el-cap {
  position: relative;
  padding: 9px 12px 11px;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 30, 70, 0.5);
}
.chem-el-cap::after {
  content: '';
  position: absolute;
  inset: 0 0 52% 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.04));
  pointer-events: none;
}
.chem-el-num { font-size: 10px; font-weight: 700; opacity: 0.9; }
.chem-el-symbol { font-size: 30px; font-weight: 700; line-height: 1.05; }
.chem-el-mass { font-size: 10px; opacity: 0.92; }

.chem-el-body { padding: 9px 12px 12px; }
.chem-el-name { font-weight: 700; color: var(--aero-blue-deep); font-size: 12px; }
.chem-el-q { font-size: 11px; color: var(--aero-text-soft); margin-top: 4px; line-height: 1.4; }

/* Element accents echo the .aero-stack level ramp in growth.css */
.chem-element.el-1 .chem-el-cap { background: linear-gradient(180deg, #b2e57c 0%, #6cba2e 100%); }
.chem-element.el-2 .chem-el-cap { background: linear-gradient(180deg, #66c0ee 0%, #2b8bd1 100%); }
.chem-element.el-3 .chem-el-cap { background: linear-gradient(180deg, #4f9fdb 0%, #1d6db0 100%); }
.chem-element.el-4 .chem-el-cap { background: linear-gradient(180deg, #2a7bbf 0%, #093e6e 100%); }

@media (max-width: 700px) {
  .chem-table { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .chem-table { grid-template-columns: 1fr; }
}

/* ===== Reaction cards: orb + orb -> compound ===== */
.chem-reactions { display: grid; gap: 8px; margin: 14px 0 18px; }
.chem-reaction {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border-radius: 10px;
  border: 1px solid rgba(15, 99, 176, 0.22);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(222, 240, 252, 0.78) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 6px rgba(15, 99, 176, 0.1);
}
.chem-reaction.final {
  border-color: rgba(62, 122, 31, 0.42);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(224, 240, 200, 0.8) 100%);
}
.chem-orb {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 700;
  font-size: 13px;
  text-shadow: 0 1px 2px rgba(0, 30, 70, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -7px 11px rgba(0, 0, 0, 0.13),
    0 3px 7px rgba(0, 30, 80, 0.25);
}
.chem-orb.el-1 { background: radial-gradient(circle at 50% 22%, #cdf0a2 0%, #6cba2e 70%, #4d901c 100%); }
.chem-orb.el-2 { background: radial-gradient(circle at 50% 22%, #a9dcf7 0%, #2b8bd1 70%, #1a6ba6 100%); }
.chem-orb.el-3 { background: radial-gradient(circle at 50% 22%, #93c8ec 0%, #1d6db0 70%, #145286 100%); }
.chem-orb.el-4 { background: radial-gradient(circle at 50% 22%, #6ba6d8 0%, #093e6e 70%, #052a4c 100%); }

.chem-plus, .chem-arrow {
  flex-shrink: 0;
  color: var(--aero-blue);
  font-weight: 700;
  font-size: 15px;
}
.chem-arrow { font-size: 19px; padding: 0 2px; }
.chem-yield { flex: 1 1 220px; margin-left: 3px; }
.chem-yield strong { display: block; color: var(--aero-blue-deep); font-size: 13px; }
.chem-yield span { font-size: 11px; color: var(--aero-text-soft); }

/* ===== Formula blocks: the sticky note and the outcome template ===== */
.chem-formula {
  margin: 8px 0 12px;
  padding: 10px 13px;
  border-radius: 10px;
  border: 1px solid rgba(15, 99, 176, 0.24);
  background: linear-gradient(180deg, #ffffff 0%, #eef7fd 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
  font-size: 12px;
  line-height: 1.7;
}
.chem-formula-label {
  display: block;
  margin-bottom: 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aero-blue);
}
.chem-formula.sticky {
  background: linear-gradient(180deg, #fffdf1 0%, #fdf2c4 100%);
  border-color: rgba(186, 156, 38, 0.42);
}
.chem-formula.sticky .chem-formula-label { color: #8a6c11; }
.chem-formula.filled {
  background: linear-gradient(180deg, #ffffff 0%, #eaf6e0 100%);
  border-color: rgba(62, 122, 31, 0.38);
}
.chem-formula.filled .chem-formula-label { color: var(--aero-green-deep); }

/* The [bracketed] slot participants fill in.
   Kept `display: inline` (not inline-block) so the punctuation that follows a
   slot can't be pushed onto a line of its own, which an atomic inline box
   would allow. box-decoration-break re-draws the padding and border on each
   fragment when a long slot wraps across two lines. */
.chem-slot {
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 6px;
  border-radius: 5px;
  background: linear-gradient(180deg, #dcefcb 0%, #b9dd97 100%);
  border: 1px solid rgba(62, 122, 31, 0.35);
  color: #2c5c14;
  font-weight: 600;
  font-style: normal;
}
.chem-formula.filled .chem-slot {
  background: linear-gradient(180deg, #ffffff 0%, #d9ecfa 100%);
  border-color: rgba(15, 99, 176, 0.35);
  color: var(--aero-blue-deep);
}

/* ===== Full element card =====
   The sticky note and the outcome template live inside the element, the way
   each column of the original board stacks discovery, stickies and outcome. */
.chem-element-full {
  margin: 14px 0 18px;
  border-radius: 14px;
  border: 1px solid rgba(0, 50, 100, 0.35);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(228, 243, 253, 0.9) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 5px 14px rgba(15, 99, 176, 0.18);
}
.chem-element-full > header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 30, 70, 0.5);
}
.chem-element-full > header::after {
  content: '';
  position: absolute;
  inset: 0 0 52% 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.04));
  pointer-events: none;
}
.chem-element-full.el-1 > header { background: linear-gradient(180deg, #b2e57c 0%, #6cba2e 100%); }
.chem-element-full.el-2 > header { background: linear-gradient(180deg, #66c0ee 0%, #2b8bd1 100%); }
.chem-element-full.el-3 > header { background: linear-gradient(180deg, #4f9fdb 0%, #1d6db0 100%); }
.chem-element-full.el-4 > header { background: linear-gradient(180deg, #2a7bbf 0%, #093e6e 100%); }

.cef-mark { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.cef-num { font-size: 10px; font-weight: 700; opacity: 0.9; }
.cef-symbol { font-size: 32px; font-weight: 700; }
.cef-id { display: flex; flex-direction: column; gap: 1px; }
.cef-name { font-size: 15px; font-weight: 700; }
.cef-role { font-size: 11px; opacity: 0.92; }

.cef-body { padding: 12px 16px 6px; }
.cef-body > p:first-child { margin-top: 0; }
.chem-question {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--aero-blue-deep);
}

/* ===== Reaction steps: question -> sticky -> outcome -> compound ===== */
.chem-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 14px 0 18px;
}
.chem-step {
  position: relative;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid rgba(15, 99, 176, 0.28);
  background: linear-gradient(180deg, #ffffff 0%, #e3f1fa 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 3px 8px rgba(15, 99, 176, 0.14);
}
/* Same quiet micro-label as .chem-formula-label. A glossy pill here fought
   the card it sits in, and a text-shadow under 9.5px type just muddies it. */
.chem-step-num {
  display: block;
  margin-bottom: 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aero-blue);
}
.chem-step strong { display: block; font-size: 12.5px; color: var(--aero-blue-deep); }
.chem-step span { font-size: 11px; color: var(--aero-text-soft); line-height: 1.4; }

@media (max-width: 760px) {
  .chem-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .chem-steps { grid-template-columns: 1fr; }
}

/* Headline result — the artifact the reaction produces */
.chem-output {
  margin: 10px 0 14px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid rgba(62, 122, 31, 0.4);
  background: linear-gradient(180deg, #f3fbe9 0%, #ddefc6 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  text-align: center;
}
.chem-output-label {
  display: block;
  margin-bottom: 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aero-green-deep);
}
.chem-output q {
  font-size: 15px;
  font-weight: 600;
  color: var(--aero-blue-deep);
  line-height: 1.45;
}

/* ===== Legend row under the periodic table ===== */
.chem-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -6px 0 16px;
  font-size: 11px;
  color: var(--aero-text-soft);
}
.chem-legend span {
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(15, 99, 176, 0.2);
}

/* ===== Structural formula (SVG skeletal diagram) =====
   The four elements sit in a row; every bond drops to the compound it makes.
   Depth encodes distance: neighbouring elements bond in the shallow tier,
   the two elements at opposite ends bond at the bottom of the sheet. */
.chem-molecule-wrap {
  margin: 14px 0 8px;
  padding: 8px;
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid rgba(15, 99, 176, 0.22);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(224, 241, 252, 0.62) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.chem-molecule { display: block; width: 100%; min-width: 680px; height: auto; }

.chem-molecule .bond-line {
  stroke: rgba(15, 99, 176, 0.5);
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke 0.15s, stroke-width 0.15s;
}
.chem-molecule .bond:hover .bond-line { stroke: #3e7a1f; stroke-width: 4; }
.chem-molecule .compound-ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1;
}
.chem-molecule .bond:hover .compound-body { filter: brightness(1.12); }

.chem-molecule text { pointer-events: none; }
.chem-molecule .el-symbol {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 25px; font-weight: 700; fill: #ffffff; text-anchor: middle;
}
.chem-molecule .el-word {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 12px; font-weight: 600; fill: #ffffff;
}
.chem-molecule .cp-word {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 9.5px; font-weight: 700; fill: #ffffff; text-anchor: middle;
}
.chem-molecule .tier-label {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 10px; font-weight: 600; fill: rgba(26, 61, 86, 0.55);
  letter-spacing: 0.06em; text-transform: uppercase;
}

.chem-molecule-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 16px;
  font-size: 11px;
  color: var(--aero-text-soft);
}
.chem-molecule-legend span {
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(15, 99, 176, 0.2);
}

/* ===== Audience cards ===== */
.chem-audience {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 14px 0 18px;
}
.chem-aud {
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid rgba(15, 99, 176, 0.24);
  background: linear-gradient(180deg, #ffffff 0%, #e8f4fc 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 2px 6px rgba(15, 99, 176, 0.1);
}
.chem-aud strong { display: block; margin-bottom: 3px; font-size: 12.5px; color: var(--aero-blue-deep); }
.chem-aud span { font-size: 11.5px; line-height: 1.45; color: var(--aero-text-soft); }

@media (max-width: 620px) {
  .chem-audience { grid-template-columns: 1fr; }
}

/* ===== Disclosure panels: the worked case and the FAQ ===== */
.chem-toggle {
  margin: 12px 0 16px;
  border-radius: 12px;
  border: 1px solid rgba(15, 99, 176, 0.3);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 3px 10px rgba(15, 99, 176, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(226, 242, 252, 0.85) 100%);
}
.chem-toggle > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  font-size: 12.5px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 30, 70, 0.5);
  background: linear-gradient(180deg, #66c0ee 0%, #2b8bd1 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.chem-toggle > summary::-webkit-details-marker { display: none; }
.chem-toggle > summary::marker { content: ''; }
.chem-toggle > summary::before {
  content: '\25B8';
  font-size: 11px;
  transition: transform 0.15s;
}
.chem-toggle[open] > summary::before { transform: rotate(90deg); }
.chem-toggle > summary:hover { filter: brightness(1.06); }
.chem-toggle-body { padding: 12px 14px 4px; }
.chem-toggle-hint { font-weight: 400; opacity: 0.88; }


/* ===== Prompt list =====
   Each reaction restated as something you can paste into a model. The copy
   is real markup; gtmchemistry.js only replays it as typing on scroll. */
.chem-prompts { display: grid; gap: 8px; margin: 14px 0 16px; }

.chem-prompt {
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(15, 99, 176, 0.24);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(230, 244, 253, 0.85) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 6px rgba(15, 99, 176, 0.1);
}
.chem-prompt.final { border-color: rgba(62, 122, 31, 0.42); }

.cp-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-bottom: 1px solid rgba(15, 99, 176, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(217, 237, 251, 0.75) 100%);
}
.chem-prompt.final .cp-head {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(224, 240, 200, 0.8) 100%);
}
.cp-yield {
  flex: 1;
  margin-left: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--aero-blue-deep);
}

/* Compact orbs so a four-element reaction still fits on one row */
.chem-orb.sm { width: 26px; height: 26px; font-size: 10px; }
.cp-head .chem-plus { font-size: 12px; }
.cp-head .chem-arrow { font-size: 15px; }

.cp-copy {
  flex-shrink: 0;
  padding: 3px 11px;
  border: 1px solid rgba(15, 99, 176, 0.35);
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--aero-blue-deep);
  cursor: pointer;
  background: linear-gradient(180deg, #ffffff 0%, #dcedfa 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition: filter 0.15s;
}
.cp-copy:hover { filter: brightness(0.97); }
.cp-copy.copied {
  color: var(--aero-green-deep);
  border-color: rgba(62, 122, 31, 0.45);
  background: linear-gradient(180deg, #f4fbea 0%, #d9edc6 100%);
}

.cp-text {
  margin: 0 !important;
  padding: 11px 13px;
  font-family: "Consolas", "Menlo", "Segoe UI Mono", monospace;
  font-size: 11.5px !important;
  line-height: 1.65;
  color: var(--aero-text);
}

@media (max-width: 560px) {
  .cp-head { flex-wrap: wrap; }
  .cp-yield { flex-basis: 100%; margin-left: 0; }
}

/* ===== Prompt console =====
   The one animated spot on the page: after every element is answered, this
   types out each reaction as a prompt you could paste. Decorative only, the
   readable and copyable versions are the cards below it. */
.chem-console {
  margin: 14px 0 18px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0, 50, 100, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 5px 16px rgba(9, 62, 110, 0.28);
  background: linear-gradient(180deg, #0f3f68 0%, #07314f 100%);
}
.cc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.03) 100%);
}
.cc-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #cdf0a2 0%, #6cba2e 70%, #4d901c 100%);
  box-shadow: 0 0 7px rgba(124, 200, 60, 0.8);
}
.cc-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
.cc-tag {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: #9fd4f5;
}
.cc-line {
  margin: 0 !important;
  padding: 14px 16px 16px;
  min-height: 92px;
  font-family: "Consolas", "Menlo", "Segoe UI Mono", monospace;
  font-size: 12.5px !important;
  line-height: 1.7;
  color: #dcefff;
}
.cc-line::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 13px;
  margin-left: 3px;
  vertical-align: -2px;
  background: #7cc83c;
  animation: cc-caret 1s steps(1, end) infinite;
}
@keyframes cc-caret {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

@media (max-width: 560px) {
  .cc-tag { display: none; }
  .cc-line { min-height: 120px; }
}