/* General Chemistry section styles. Legacy periodic-table rules are opt-in. */

html:where(.genchem-periodic),
:where(html.genchem-periodic) * { box-sizing: border-box; padding:0; margin:0; }

:where(html.genchem-periodic) body {
  background:linear-gradient(#dbeaf8, #dbeaf8);
  color:#222;
	padding: 20px;
  font-family: verdana, arial, helvetica;
}

:where(html.genchem-periodic) .wrapper {
  margin:30px auto;
  position:relative;
}

:where(html.genchem-periodic) .main:after {
 	clear:both;
  content:"";
  display:table;
}

:where(html.genchem-periodic) .main li {
 	width:5.3%;
  height:5%;
  border:1px solid rgba(0,0,0,0.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.4);
  position:relative;
  font-size:18px;
  float:left;
  padding:0 2px;
  margin:1px;
  cursor:pointer;
  padding-top:20px;
  overflow:hidden;
  transition:all .2s ease-in;
  text-shadow:0 1px 0 rgba(255,255,255,0.2);
}

:where(html.genchem-periodic) .main li span {
  display:block;
  line-height:1;
  font-size:9px;
  color:black; 
  padding-top:7px;
}

:where(html.genchem-periodic) .main .empty {
 	border:none; 
  box-shadow:none;
  cursor:default;
}

:where(html.genchem-periodic) .main li:before,
:where(html.genchem-periodic) .main li:after {
   position:absolute;
  top:3px;
  left:3px;
  color:black;
  font-size:8px;
  line-height:1;
}

:where(html.genchem-periodic) .main li:after {
  content:attr(data-nb);
  left:auto;
  right:3px;
}

:where(html.genchem-periodic) .cellAttributes { background:#4CAFFA; }

/* Demo Lab index: inherit the site's top-level text family in lists and tables. */
.genchem-demo-index {
  font-family: verdana, arial, helvetica;
}
.genchem-memoriam {
  max-width: 52rem;
  margin: 2rem auto;
  padding: 1.25rem 1.5rem;
  border: 1px solid #ddd2dc;
  border-left: 4px solid #8a5a80;
  border-radius: .5rem;
  background: #faf5f9;
  color: #222;
  box-sizing: border-box;
  text-align: left;
}
.genchem-memoriam h2 {
  margin: 0 0 .75rem;
  font-family: verdana, arial, helvetica;
  font-size: 1em;
  line-height: 1.4;
}
.genchem-memoriam p {
  margin: 0;
  background: transparent;
  line-height: 1.6;
}

/* Keep legacy Demo Lab media and tables inside narrow viewports. */
.genchem-demo img, .genchem-demo video { max-width: 100%; height: auto; }
.genchem-demo table { max-width: 100%; }
@media (max-width: 600px) {
  .genchem-demo table { display: block; overflow-x: auto; }
  .genchem-memoriam { padding: 1rem; }
}

.genchem-demo .genchem-nowrap { white-space: nowrap; }
@media (max-width: 600px) { .genchem-demo .genchem-nowrap { white-space: normal; } }


/* Periodic Table Challenge: two fixed-size boards inside a scrolling region. */
body.periodic-quiz-page { background: #f4f7fb; padding: 12px; }
.periodic-page { max-width: 1200px; margin: 0 auto; padding: 0; }
.periodic-page .page-title { color: #18344b; margin: 1.25rem 0; }
.periodic-challenge { margin: 1rem auto 2rem; }
.periodic-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 16px 20px; background: white; border: 1px solid #d8e1eb; border-radius: 12px; box-shadow: 0 3px 12px #152d4510; }
.periodic-stat { display: flex; flex-direction: column; gap: 5px; min-width: 130px; }
.periodic-stat label { font-size: 12px; font-weight: bold; color: #53657a; }
.periodic-stat label span { font-weight: normal; }
.periodic-stat input { display: block; width: 110px; border: 0; background: transparent; color: #18344b; font: bold 24px/1.2 verdana, arial, sans-serif; padding: 0; }
.periodic-hints { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; cursor: pointer; }
.periodic-hints input { width: 20px; height: 20px; accent-color: #20639b; }
.periodic-reset { margin-left: auto; min-height: 44px; padding: 10px 18px; border: 1px solid #20639b; border-radius: 8px; background: #20639b; color: white; font: bold 14px verdana, arial, sans-serif; cursor: pointer; }
.periodic-reset:hover { background: #174b76; }
.periodic-help { margin: 14px 0; background: transparent; color: #53657a; font-size: 13px; line-height: 1.6; }
.periodic-scroll { max-width: 100%; overflow-x: auto; padding: 10px 0 16px; border-radius: 10px; overscroll-behavior-x: contain; }
.periodic-board { width: 1080px; min-width: 1080px; max-width: none; table-layout: fixed; border-collapse: separate; border-spacing: 4px; margin: 0 auto; }
.periodic-board th { height: 24px; font-size: 11px; font-weight: normal; text-align: center; color: #53657a; }
.periodic-board td { padding: 0; text-align: center; vertical-align: middle; }
.periodic-cell { height: 64px; border-radius: 8px; --cell-color: #bfd8ee; }
.periodic-answer { width: 100%; height: 64px; box-sizing: border-box; min-width: 0; border: 1px solid #c6d4e3; border-radius: 8px; background: var(--cell-color); color: #18344b; text-align: center; font: bold 20px verdana, arial, sans-serif; padding: 2px; box-shadow: 0 2px 3px #152d4508; }
.periodic-answer:hover { border-color: #6f8eaf; }
.periodic-answer:focus { outline: 3px solid #20639b; outline-offset: 0; background: #fff; }
.periodic-empty { background: transparent; border: 0; }
.periodic-spacer td { height: 20px; }
.periodic-s { --cell-color: #bfd8ee; }
.periodic-d { --cell-color: #b8ddd1; }
.periodic-p { --cell-color: #f1cea0; }
.periodic-f { --cell-color: #d5bee8; }
.periodic-lanthanide { --cell-color: #c7b5e6; }
.periodic-actinide { --cell-color: #e8bacf; }
.periodic-continuation { color: #70517f; font-size: 22px; background: var(--cell-color); border-radius: 8px; }
.periodic-legend { display: flex; flex-wrap: wrap; gap: 12px 20px; justify-content: center; padding-top: 10px; font-size: 11px; color: #53657a; }
.periodic-legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border: 1px solid #c6d4e3; border-radius: 3px; background: #bfd8ee; }
.periodic-legend span:nth-child(2)::before { background: #b8ddd1; }
.periodic-legend span:nth-child(3)::before { background: #f1cea0; }
.periodic-legend span:nth-child(4)::before { background: #d5bee8; }
.periodic-page h3 { margin: 1rem 0 .75rem; }
.periodic-page > ul { padding-left: 24px; }
.periodic-page > ul li { line-height: 1.6; }
.periodic-page > p { background: transparent; margin: 1rem 0; line-height: 1.6; }
@media (max-width: 1100px) {
  .periodic-board { width: 864px; min-width: 864px; }
  .periodic-cell, .periodic-answer { height: 52px; }
  .periodic-answer { font-size: 18px; }
}
@media (max-width: 600px) {
  body.periodic-quiz-page { padding: 8px; }
  .periodic-toolbar { padding: 12px; gap: 12px; }
  .periodic-stat { flex: 1 1 30%; min-width: 88px; }
  .periodic-stat input { width: 85px; font-size: 20px; }
  .periodic-stat label { font-size: 10px; }
  .periodic-reset { margin-left: 0; }
}

.periodic-instructions { font-size: 1rem; margin: 1rem 0 .75rem; }

.periodic-message { margin: 12px 0 0; padding: 12px 16px; background: #fff9e9; border: 1px solid #ead7a5; border-radius: 8px; color: #574118; font-size: 14px; line-height: 1.5; white-space: pre-line; }
.periodic-message[hidden] { display: none; }

.periodic-page > ul li { background: transparent; }

/* Atomic numbers remain visible without reducing the answer hit area. */
.periodic-cell { position: relative; }
.periodic-answer { padding: 2px 2px 14px; border-color: #97adc2; }
.periodic-number { position: absolute; right: 6px; bottom: 5px; color: #34465a; font: 10px/1 verdana, arial, sans-serif; pointer-events: none; }
/* One non-modal, dismissible hint card floats over the table's lower edge. */
.periodic-message { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 1000; display: flex; align-items: flex-start; gap: 12px; width: 360px; max-width: calc(100vw - 32px); box-sizing: border-box; margin: 0; padding: 14px 12px 14px 16px; background: #fff8df; border: 1px solid #bfa465; border-radius: 12px; color: #473917; box-shadow: 0 8px 28px #17324d30; font-size: 14px; line-height: 1.5; }
.periodic-message #quiz-message-text { flex: 1; }
.periodic-message-dismiss { flex: 0 0 44px; width: 44px; height: 44px; margin: -8px -6px -8px 0; border: 0; border-radius: 8px; background: transparent; color: #473917; font: 24px/1 arial, sans-serif; cursor: pointer; }
.periodic-message-dismiss:hover { background: #eedeb4; }
.periodic-message-dismiss:focus-visible { outline: 2px solid #20639b; }
@media (max-width: 600px) { .periodic-number { right: 5px; bottom: 5px; } }

/* Keep the hint in the empty groups 3–12 area between Be and B. */
.periodic-hint-slot { position: relative; }
.periodic-hint-slot .periodic-message {
  position: absolute;
  top: 50%;
  bottom: auto;
  left: 12px;
  right: 12px;
  width: auto;
  max-width: none;
  max-height: 160px;
  overflow-y: auto;
  transform: translateY(-50%);
  z-index: 1;
  text-align: left;
}

/* Give the quiz explanation one continuous background and nest its versions. */
.genchem-howitworks p,
.genchem-howitworks li,
.genchem-howitworks ul,
.genchem-howitworks ol { background: transparent; }
.genchem-howitworks { line-height: 1.6; }
.genchem-howitworks ul,
.genchem-howitworks ol { padding-left: 1.5rem; }
.genchem-version-explanations { margin-left: 1.5rem; }
.genchem-version-explanations > h3 { margin: 1rem 0 .75rem; }
@media (max-width: 600px) {
  .genchem-version-explanations { margin-left: .75rem; }
}

/* Extra indentation for some subheadings */
.indent2  { margin-left: 2rem; }

/* Three quiz modes share one table and keep grading controls mode-specific. */
.periodic-modes-toolbar { display: block; }
.periodic-toolbar-top, .periodic-toolbar-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.periodic-toolbar-top { justify-content: space-between; }
.periodic-mode-picker { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 8px; background: #edf2f7; }
.periodic-mode-picker button { min-height: 44px; padding: 10px 12px; border: 0; border-radius: 6px; background: transparent; color: #18344b; font: bold 14px verdana, arial, sans-serif; cursor: pointer; }
.periodic-mode-picker button[aria-pressed="true"] { background: #20639b; color: white; }
.periodic-toolbar-top select { min-height: 44px; padding: 8px; border: 1px solid #97adc2; border-radius: 6px; background: white; font: inherit; }
.periodic-mode-description { margin: 14px 0 18px; background: transparent; color: #53657a; font-size: 14px; line-height: 1.5; }
.periodic-toolbar-bottom { border-top: 1px solid #e1e8f0; padding-top: 16px; }
.periodic-toolbar-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.periodic-toolbar-actions .periodic-reset { margin-left: 0; background: white; color: #20639b; }
.periodic-submit { min-height: 44px; padding: 10px 18px; border: 1px solid #20639b; border-radius: 8px; background: #20639b; color: white; font: bold 14px verdana, arial, sans-serif; cursor: pointer; }
.periodic-submit:disabled { background: #e5ebf2; border-color: #d8e1eb; color: #64758a; cursor: default; }
.periodic-submit-note { margin: 12px 0 0; color: #53657a; background: transparent; font-size: 13px; }
.periodic-answer.quiz-correct { border: 2px solid #247553; }
.periodic-answer.quiz-incorrect { border: 2px solid #a82f3c; background: #f5d9dd; }
.periodic-mode-dialog { margin: auto; padding: 24px; width: 420px; max-width: calc(100vw - 32px); border: 1px solid #d8e1eb; border-radius: 12px; color: #18344b; box-shadow: 0 12px 36px #17324d30; }
.periodic-mode-dialog::backdrop { background: #17324d66; }
.periodic-mode-dialog h2 { font: bold 18px verdana, arial, sans-serif; margin-bottom: 14px; }
.periodic-mode-dialog p { margin: 0 0 22px; line-height: 1.6; }
.periodic-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }
.periodic-dialog-actions button { min-height: 44px; padding: 10px 18px; border: 1px solid #97adc2; border-radius: 6px; background: white; color: #18344b; font: bold 14px verdana, arial, sans-serif; cursor: pointer; }
.periodic-dialog-actions #quiz-mode-no { background: #20639b; border-color: #20639b; color: white; }
.periodic-mode-picker button:focus-visible, .periodic-dialog-actions button:focus-visible, .periodic-submit:focus-visible { outline: 2px solid #20639b; outline-offset: 3px; }
.periodic-modes-toolbar [hidden] { display: none; }
#quiz-answered { width: 100%; max-width: 135px; }
@media (max-width: 600px) { .periodic-toolbar-actions { margin-left: 0; } }

/* Magnesium / carbon dioxide demonstration. */
.genchem-co2mg { font-family: verdana, arial, helvetica; line-height: 1.6; }
.genchem-co2mg p, .genchem-co2mg li, .genchem-co2mg td, .genchem-co2mg th { font-family: inherit; line-height: inherit; }
.genchem-co2mg p, .genchem-co2mg li { background: transparent; }
.genchem-co2mg .genchem-demo-subtitle { font: bold 1.15rem verdana, arial, helvetica; color: #18344b; text-align: center; margin: 1rem 0 1.5rem; }
.genchem-co2mg h2.header { margin: 1.5rem 0 1rem; }
.genchem-energy-explanation { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 1fr); align-items: start; gap: 24px; margin: 1.5rem 0; }
.genchem-energy-text p { margin: 0 0 1rem; }
.genchem-energy-figure { margin: 0; }
.genchem-energy-figure img { display: block; width: 100%; height: auto; }
.genchem-energy-figure figcaption { padding-top: .5rem; color: #42566b; font-size: .8rem; line-height: 1.5; text-align: center; }
.genchem-safety-notes { background: #dcecf5; color: #18344b; margin: 1.25rem 0; padding: 1.25rem 1.5rem; border-radius: 8px; }
.genchem-safety-notes h3 { margin: 0 0 .75rem; color: inherit; font-size: 1rem; }
.genchem-safety-notes p { margin: 0; background: transparent; }
@media (max-width: 800px) { .genchem-energy-explanation { grid-template-columns: minmax(0, 1fr); } }

/* Ordinary outside bullets and aligned continuation paragraphs in Comments. */
.genchem-co2mg .genchem-comments-list { padding-inline-start: 2em; margin: 1em 0; list-style-position: outside; }
.genchem-co2mg .genchem-comments-list > li { text-indent: 0; list-style-position: outside; margin: .75em 0; }
.genchem-co2mg .genchem-comments-list > li p { margin: .75em 0; text-indent: 0; }

/* Liquid nitrogen demonstration: content only; navigation and footer retain site styles. */
.genchem-liquidnitrogen { font-family: verdana, arial, helvetica; line-height: 1.6; }
.genchem-liquidnitrogen p, .genchem-liquidnitrogen li, .genchem-liquidnitrogen td, .genchem-liquidnitrogen th { font-family: inherit; line-height: inherit; }
.genchem-liquidnitrogen p, .genchem-liquidnitrogen li { background: transparent; }
.genchem-liquidnitrogen .genchem-demo-subtitle { font: bold 1.15rem verdana, arial, helvetica; color: #18344b; text-align: center; margin: 1rem 0 1.5rem; }
.genchem-liquidnitrogen h2.header { margin: 1.5rem 0 1rem; }
.genchem-temperature-figure { margin: 1.5rem auto; max-width: 1100px; }
.genchem-temperature-scroll { overflow-x: auto; }
.genchem-temperature-figure img { display: block; width: 100%; min-width: 720px; height: auto; }
.genchem-temperature-figure figcaption { color: #42566b; font-size: .8rem; text-align: center; padding: .5rem; }

/* Liquid nitrogen media layout and replacements for obsolete alignment attributes. */
.genchem-liquidnitrogen .genchem-centered { text-align: center; }
.genchem-liquidnitrogen .genchem-demo-sponsor img { max-width: 100%; height: auto; border: 0; }
.genchem-liquidnitrogen .genchem-centered > img { max-width: 100%; }
.genchem-nitrogen-demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 480px); align-items: start; gap: 24px; margin: 1.5rem 0; }
.genchem-nitrogen-demo p { margin: 0 0 1rem; }
.genchem-nitrogen-player video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; background: #000; }
@media (max-width: 800px) { .genchem-nitrogen-demo { grid-template-columns: minmax(0, 1fr); } .genchem-nitrogen-player { width: 100%; max-width: 480px; margin: auto; } }

/* Pressure / volume equilibrium demonstration: content typography only. */
.genchem-n2o4pressure { font-family: verdana, arial, helvetica; line-height: 1.6; }
.genchem-n2o4pressure p, .genchem-n2o4pressure li, .genchem-n2o4pressure td, .genchem-n2o4pressure th { font-family: inherit; line-height: inherit; }
.genchem-n2o4pressure p, .genchem-n2o4pressure li { background: transparent; }
.genchem-n2o4pressure .genchem-demo-subtitle { font: bold 1.15rem verdana, arial, helvetica; color: #18344b; text-align: center; margin: 1rem 0 1.5rem; }
.genchem-n2o4pressure h2.header { margin: 1.5rem 0 1rem; }
.genchem-n2o4pressure img { max-width: 100%; height: auto; }
.genchem-n2o4pressure video { display: block; max-width: 100%; height: auto; margin: auto; background: #000; }

/* Surface tension demonstration: content fonts and sponsor layout. */
.genchem-tension { font-family: verdana, arial, helvetica; line-height: 1.6; }
.genchem-tension p, .genchem-tension li, .genchem-tension td, .genchem-tension th { font-family: inherit; line-height: inherit; }
.genchem-tension p, .genchem-tension li { background: transparent; }
.genchem-tension .genchem-demo-subtitle { font: bold 1.15rem verdana, arial, helvetica; color: #18344b; text-align: center; margin: 1rem 0 1.5rem; }
.genchem-tension h2.header { margin: 1.5rem 0 1rem; }
.genchem-tension .genchem-tension-sponsor { text-align: center; margin: 1rem 0; }
.genchem-tension-sponsor img { max-width: 100%; height: auto; border: 0; }

/* Thermite demonstration: typography, content layout, and static safety notices. */
.genchem-thermite { font-family: verdana, arial, helvetica; line-height: 1.6; }
.genchem-thermite p, .genchem-thermite li, .genchem-thermite td, .genchem-thermite th { font-family: inherit; line-height: inherit; }
.genchem-thermite p, .genchem-thermite li { background: transparent; }
.genchem-thermite .genchem-demo-subtitle { font: bold 1.15rem verdana, arial, helvetica; color: #18344b; text-align: center; margin: 1rem 0 1.5rem; }
.genchem-thermite h2.header { margin: 1.5rem 0 1rem; }
.genchem-thermite-sponsor { text-align: center; margin: 1rem 0; }
.genchem-thermite img { max-width: 100%; height: auto; }
.genchem-thermite-sponsor img { border: 0; }
.genchem-thermite-warning { background: #fff0ed; color: #40211d; border-left: 6px solid #a6281d; border-radius: 6px; padding: 1.25rem 1.5rem; margin: 1.5rem 0; }
.genchem-thermite-warning h3 { font-family: inherit; color: #982419; font-size: 1.15rem; margin: 0 0 .75rem; }
.genchem-thermite-warning p { margin: .75rem 0 0; }
.genchem-thermite-warning a { overflow-wrap: anywhere; }
.genchem-thermite-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); gap: 24px; align-items: center; margin: 1.5rem 0; }
.genchem-thermite-media { text-align: center; }
.genchem-thermite-media video { display: block; max-width: 100%; height: auto; margin: auto; background: #000; }
.genchem-thermite-photos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; }
.genchem-thermite-photos img { margin: 0 !important; }
@media (max-width: 700px) { .genchem-thermite-layout { grid-template-columns: minmax(0, 1fr); } .genchem-thermite-warning { padding: 1rem; } }

/* Local JSmol surfactant viewer. */
.genchem-molecule { max-width: 900px; margin: 1.5rem auto; padding: 1.25rem; border: 1px solid #bdcdd9; border-radius: 10px; background: #f5f8fa; }
.genchem-molecule h3 { font-family: inherit; color: #18344b; margin: 0 0 .75rem; }
.genchem-molecule .genchem-molecule-instructions, .genchem-molecule .genchem-molecule-credit { margin: .75rem 0; font-size: .85rem; }
.genchem-molecule-viewer { position: relative; width: 100%; height: 380px; background: #edf3f7; }
.genchem-molecule .genchem-molecule-status { margin: .5rem 0; font-size: .85rem; min-height: 1.6em; }
.genchem-molecule-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.genchem-molecule-controls button { font: inherit; padding: .55rem .85rem; min-height: 44px; border: 1px solid #6c879c; border-radius: 5px; color: #18344b; background: white; cursor: pointer; }
.genchem-molecule-controls button[aria-pressed="true"] { background: #245d86; color: white; }
.genchem-molecule-controls button:disabled { opacity: .5; cursor: wait; }
.genchem-molecule-controls button:focus-visible { outline: 3px solid #c67600; outline-offset: 2px; }
@media (max-width: 600px) { .genchem-molecule { padding: .75rem; } .genchem-molecule-viewer { height: 300px; } }
/* JSmol's zero-size startup image must not inherit responsive image sizing. */
.genchem-molecule-viewer img[width="0"] { display: none; }
.genchem-molecule-viewer canvas { display: block; }

/* Demo index: consistent outside bullets and dedicated thumbnail columns. */
.genchem-demo-index .genchem-demo-features { margin: 1rem 0; padding-inline-start: 2em; }
.genchem-demo-index .genchem-demo-features > li { margin: .5rem 0; padding: 0; text-indent: 0; list-style-position: outside; line-height: 1.5; }
.genchem-demo-index .genchem-demo-list { width: 100%; table-layout: fixed; border: 0; border-collapse: collapse; margin: 1rem auto; }
.genchem-demo-list td { text-align: left; vertical-align: middle; padding: 12px; overflow-wrap: break-word; line-height: 1.5; }
.genchem-demo-list td:first-child { width: 180px; }
.genchem-demo-list td:first-child img { display: block; max-width: 160px; width: auto; height: auto; margin: auto !important; }
@media (max-width: 600px) {
 .genchem-demo-list td:first-child { width: 100px; }
 .genchem-demo-list td:first-child img { max-width: 100%; }
 .genchem-demo-list td { padding: 10px 6px; }
}