/* ── EORE SHARED DESIGN SYSTEM ──────────────────────────────────────────── */
/* IMPORTANT: style.css is loaded by ALL pages (index, metadata, initialParameters,
   finalParameters, flowThrough, summary, login, welcome). Any shared/global styles
   MUST live here. index.css is NOT loaded by initialParameters, finalParameters, or
   flowThrough — do not put styles there that those pages need. */

/* ── DESIGN TOKENS ─────────────────────────────────────────────────────── */
:root {
  --navy:           #1B3A6B;
  --navy-mid:       #2E5090;
  --navy-light:     #EBF0FA;
  --navy-border:    #C2D0E8;
  --accent:         #2E6DB4;
  --text-primary:   #111827;
  --text-secondary: #4B5563;
  --text-label:     #1B3A6B;
  --page-bg:        #F4F7FC;
  --white:          #FFFFFF;
  --shadow:         0 2px 12px rgba(27, 58, 107, 0.10);
  --danger:         #DC2626;
}

/* ── NAVBAR ─────────────────────────────────────────────────────────────── */
.app-navbar {
  background: var(--navy);
  padding: 0 32px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  flex-shrink: 0;
}
.app-navbar-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.app-navbar-title {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.app-navbar-subtitle {
  font-size: 14px;
  color: rgba(255,255,255,0.65);
  margin-left: 16px;
  padding-left: 16px;
  border-left: 1px solid rgba(255,255,255,0.25);
}
.app-navbar-subtitle .hl { color: #ffffff; }
.app-navbar-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.app-navbar-home {
  color: rgba(255,255,255,0.75);
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: color 0.15s;
}
.app-navbar-home:hover { color: #ffffff; }
.logout-form { display: flex; align-items: center; margin: 0; padding: 0; }
.app-navbar-logout {
  background: none;
  border: none;
  color: rgba(255,255,255,0.75);
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}
.app-navbar-logout:hover { color: #ffffff; }
.back-warning {
  margin: 0;
  padding: 8px 18px;
  font-size: 12px;
  font-family: 'Inter', 'Segoe UI', sans-serif;
  color: #7C2020;
  background: #FDF5F5;
  border-bottom: 1px solid #E8C4C4;
  border-left: 3px solid #7C2020;
  line-height: 1.5;
}

/* ── BASE ───────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* Restore HTML hidden attribute — overrides display:flex from form-body p rule.
   jQuery .show() patch in initialParams.js / finalParams.js removes the hidden
   attribute before revealing an element so the !important doesn't block it. */
[hidden] { display: none !important; }

body {
  font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', sans-serif;
  background: var(--page-bg);
  color: var(--text-primary);
  min-height: 100vh;
}

/* ── PAGE CONTAINER ─────────────────────────────────────────────────────── */
.page-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 32px 20px 48px;
}

/* ── STEP HEADER ────────────────────────────────────────────────────────── */
.step-header {
  background: linear-gradient(135deg, #1B3A6B 0%, #2E6DB4 100%);
  border-radius: 16px;
  padding: 28px 28px 24px;
  margin-bottom: 16px;
  color: white;
  box-shadow: var(--shadow);
}

.step-badge {
  display: inline-block;
  background: rgba(255,255,255,0.2);
  color: white;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.step-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.35;
}

.step-subtitle {
  font-size: 13px;
  opacity: 0.8;
}

/* ── PROGRESS BAR ───────────────────────────────────────────────────────── */
.progress-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 24px;
}

.progress-step {
  height: 4px;
  flex: 1;
  border-radius: 2px;
  background: #C2D0E8;
}

.progress-step.active   { background: var(--navy); }
.progress-step.complete { background: var(--accent); }

/* ── SECTION CARD ───────────────────────────────────────────────────────── */
.section-card {
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
  border: 1px solid var(--navy-border);
}

.section-card-header {
  background: var(--navy-light);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--navy-border);
}

.section-icon {
  width: 28px;
  height: 28px;
  background: var(--navy);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
}

/* ── FORM BODY ──────────────────────────────────────────────────────────── */
.form-body {
  background: var(--white);
  padding: 24px 20px 28px;
}

/* <p><label><input> rows — covers both direct children and nested (gasElement etc) */
.form-body p {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid #F0F4FA;
  margin: 0;
}

.form-body > p:last-of-type { border-bottom: none; }

.form-body p label {
  min-width: 240px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: none;
  letter-spacing: 0;
  cursor: default;
}

.form-body p input[type="text"],
.form-body p input[type="number"] {
  flex: 1;
  max-width: 280px;
  height: 38px;
}

.form-body p select {
  flex: 1;
  max-width: 280px;
  height: 38px;
}

/* ── FORM GRID ──────────────────────────────────────────────────────────── */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 16px;
}

.form-grid.full-width { grid-template-columns: 1fr; }
.form-grid.three-col  { grid-template-columns: 1fr 1fr 1fr; }

/* ── FORM FIELD ─────────────────────────────────────────────────────────── */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field label,
.field-label {
  font-size: 12px;
  color: var(--text-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* ── INPUTS & SELECTS ───────────────────────────────────────────────────── */
.form-field input[type="text"],
.form-field input[type="number"],
.form-field select,
.form-body input[type="text"],
.form-body input[type="number"],
.form-body select,
.year_of_publication {
  background: var(--white);
  border: 1.5px solid #D1DCF0;
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 14px;
  padding: 10px 14px;
  height: 42px;
  width: 100%;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-family: inherit;
}

.form-field input[type="text"]::placeholder,
.form-field input[type="number"]::placeholder,
.form-body input[type="text"]::placeholder,
.form-body input[type="number"]::placeholder {
  color: #AAB8CC;
}

.form-field input:focus,
.form-field select:focus,
.form-body input[type="text"]:focus,
.form-body input[type="number"]:focus,
.form-body select:focus,
.year_of_publication:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(46,109,180,0.15);
}

/* Disabled field — greyed out with not-allowed cursor */
.form-field input:disabled,
.form-body input:disabled,
.field-with-toggle input[type="text"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: #F3F4F6 !important;
}

/* validation error border set by JS */
input[style*="red"] {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.15) !important;
}

/* ── CHECKBOXES ─────────────────────────────────────────────────────────── */
input[type="checkbox"] {
  width: 17px;
  height: 17px;
  cursor: pointer;
  accent-color: var(--navy);
  vertical-align: middle;
  margin-right: 6px;
  flex-shrink: 0;
}

/* ── RADIO BUTTONS ──────────────────────────────────────────────────────── */
input[type="radio"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--navy);
  vertical-align: middle;
  margin-right: 6px;
  flex-shrink: 0;
}

/* ── RADIO PILL GROUP ───────────────────────────────────────────────────── */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 4px;
}

.radio-pill input[type="radio"] { display: none; }

.radio-pill label {
  display: inline-block;
  padding: 8px 18px;
  border: 1.5px solid var(--navy-border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--white);
  transition: all 0.15s;
  text-transform: none;
  letter-spacing: 0;
}

.radio-pill input[type="radio"]:checked + label {
  background: var(--navy);
  color: white;
  border-color: var(--navy);
}

.radio-pill label:hover {
  border-color: var(--navy);
  color: var(--navy);
}

/* ── CHECKBOX ROW ───────────────────────────────────────────────────────── */
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.checkbox-row label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}

/* ── FORM SECTION DIVIDER ───────────────────────────────────────────────── */
.form-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-label);
  margin: 20px 0 14px;
}

.form-section-label:first-child { margin-top: 0; }

/* ── INLINE FIELD ERRORS ────────────────────────────────────────────────── */
.field-error {
  display: block;
  color: #d32f2f;
  font-size: 12px;
  margin-top: 4px;
  min-height: 16px;
}

/* ── BUTTON ROW ─────────────────────────────────────────────────────────── */
.btn-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding-top: 8px;
}

/* ── PRIMARY BUTTONS (all continue/submit buttons) ──────────────────────── */
#next_button,
#next_button_2,
#next_button_3,
#next_button_4,
#next_button_6,
#submit {
  background: var(--navy);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0 28px;
  height: 44px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  font-family: inherit;
}

#next_button:hover,
#next_button_2:hover,
#next_button_3:hover,
#next_button_4:hover,
#next_button_6:hover,
#submit:hover {
  background: var(--navy-mid);
  transform: translateY(-1px);
}

#next_button:active,
#next_button_2:active,
#next_button_3:active,
#next_button_4:active,
#next_button_6:active,
#submit:active { transform: translateY(0); }

#next_button span,
#next_button_2 span,
#next_button_3 span,
#next_button_4 span,
#next_button_6 span,
#submit span { display: inline-block; }

/* ── BACK BUTTONS ───────────────────────────────────────────────────────── */
#back_button_2,
#back_button_3,
#back_button_4,
#back_button_6,
#back_button_summary {
  background: var(--white);
  color: var(--navy);
  border: 1.5px solid var(--navy-border);
  border-radius: 8px;
  padding: 0 22px;
  height: 44px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  font-family: inherit;
}

#back_button_2:hover,
#back_button_3:hover,
#back_button_4:hover,
#back_button_6:hover,
#back_button_summary:hover {
  background: var(--bg);
  border-color: var(--navy);
}

/* ── SECONDARY BUTTON ───────────────────────────────────────────────────── */
#add_another_experiment {
  background: var(--white);
  color: var(--navy);
  border: 1.5px solid var(--navy-border);
  border-radius: 8px;
  padding: 0 22px;
  height: 44px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  font-family: inherit;
}

#add_another_experiment:hover {
  border-color: var(--navy);
  background: var(--navy-light);
}

/* ── ADD / REMOVE PHASE BUTTONS ─────────────────────────────────────────── */
#add_stationary_phase, #remove_stationary_phase,
#add_continuous_input, #remove_continuous_flow,
#add_gas_initial, #remove_gas_initial,
#add_solute_initial, #remove_solute_initial,
#add_solid_initial, #remove_solid_initial,
#add_gas_final, #remove_gas_final,
#add_solute_final, #remove_solute_final,
#add_solid_final, #remove_solid_final {
  background: var(--navy-light);
  color: var(--navy);
  border: 1.5px solid var(--navy-border);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}

#add_stationary_phase:hover, #remove_stationary_phase:hover,
#add_continuous_input:hover, #remove_continuous_flow:hover,
#add_gas_initial:hover, #add_solute_initial:hover, #add_solid_initial:hover,
#add_gas_final:hover, #add_solute_final:hover, #add_solid_final:hover {
  background: var(--navy-border);
}

/* ── SUBMITTING MESSAGE ─────────────────────────────────────────────────── */
#submitting_msg {
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
  background: var(--navy-light);
  border: 1px solid var(--navy-border);
  border-radius: 8px;
  padding: 10px 18px;
}

/* ── PHASE TOGGLE ROWS ──────────────────────────────────────────────────── */
/* Phase "exists?" rows styled as pill-toggle rows matching the reference design */
.phase-toggle-row {
  background: var(--navy-light) !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  margin: 6px 0 !important;
  border: 1px solid var(--navy-border) !important;
  border-bottom: 1px solid var(--navy-border) !important;
}

.phase-toggle-row label {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
  min-width: unset !important;
  flex-grow: 1;
  cursor: pointer;
}

/* CSS toggle switch — replaces default checkbox appearance for phase rows */
.phase-toggle-row input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 44px !important;
  height: 24px !important;
  background: #CBD5E0;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
  order: 100;    /* forces toggle to the far right, even after buttons appended by JS */
  margin: 0;
  vertical-align: unset;
  border: none !important;
  box-shadow: none !important;
  accent-color: unset;
}

.phase-toggle-row input[type="checkbox"]::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  top: 3px;
  left: 3px;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.phase-toggle-row input[type="checkbox"]:checked {
  background: var(--accent);
}

.phase-toggle-row input[type="checkbox"]:checked::before {
  transform: translateX(20px);
}

/* Buttons appended by JS into phase-toggle-row sit between label and toggle */
.phase-toggle-row button {
  background: var(--white);
  color: var(--navy);
  border: 1.5px solid var(--navy-border);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}

.phase-toggle-row button:hover {
  background: var(--navy);
  color: white;
  border-color: var(--navy);
}

/* ── PHASE ITEM CARDS (gasElement, liquidElement, solidElement) ──────────── */
.gasElement, .liquidElement, .solidElement {
  background: var(--white);
  border: 1px solid var(--navy-border);
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
}

.gasElement:last-child, .liquidElement:last-child, .solidElement:last-child {
  margin-bottom: 0;
}

/* CSS counter headers auto-generated per card — mirrors "GAS #1" / "SOLID #1" in mockup */
.initial_gas_phase_container { counter-reset: gas-counter; }
.final_gas_phase_container   { counter-reset: gas-counter; }
.gasElement { counter-increment: gas-counter; }
.gasElement::before {
  /* OLD: content: "Gas \0023" counter(gas-counter); */
  content: "Gas " counter(gas-counter);
  display: block;
  background: var(--navy-light);
  color: var(--navy);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--navy-border);
}

.initial_solid_phase_container { counter-reset: solid-counter; }
.final_solid_phase_container   { counter-reset: solid-counter; }
.solidElement { counter-increment: solid-counter; }
.solidElement::before {
  /* OLD: content: "Solid \0023" counter(solid-counter); */
  content: "Solid " counter(solid-counter);
  display: block;
  background: var(--navy-light);
  color: var(--navy);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--navy-border);
}

.initial_liquid_phase_container { counter-reset: solute-counter; }
.liquidElement { counter-increment: solute-counter; }
.liquidElement::before {
  /* OLD: content: "Solute \0023" counter(solute-counter); */
  content: "Solute " counter(solute-counter);
  display: block;
  background: var(--navy-light);
  color: var(--navy);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--navy-border);
}

/* <p> rows inside phase item cards — column layout, generous side padding */
/* OLD horizontal layout:
.gasElement p, .liquidElement p, .solidElement p {
  padding: 8px 20px !important;
}
.gasElement p label, .liquidElement p label, .solidElement p label {
  min-width: 200px !important;
  font-size: 13px !important;
  color: var(--text-label) !important;
}
*/
.gasElement p, .liquidElement p, .solidElement p {
  padding: 10px 28px !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 5px !important;
}

/* OLD: uppercase + gray labels
.gasElement p label, .liquidElement p label, .solidElement p label {
  min-width: auto !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
*/
.gasElement p label, .liquidElement p label, .solidElement p label {
  min-width: auto !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Per-phase label colors */
.phase-card--gas .gasElement p label     { color: #92400E !important; }
.phase-card--liquid .liquidElement p label { color: #1E40AF !important; }
.phase-card--solid .solidElement p label   { color: #065F46 !important; }

.gasElement p input[type="text"],
.gasElement p input[type="number"],
.liquidElement p input[type="text"],
.liquidElement p input[type="number"],
.solidElement p input[type="text"],
.solidElement p input[type="number"] {
  flex: none !important;
  width: 100% !important;
  max-width: none !important;
  height: 38px !important;
}

.gasElement p:last-child, .liquidElement p:last-child, .solidElement p:last-child {
  border-bottom: none;
}

/* ── PHASE SUB-CARDS (card-within-card per phase type) ──────────────────── */
.phase-card {
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
  border: 1.5px solid var(--navy-border);
  background: var(--white);
}
.phase-card:last-child { margin-bottom: 0; }

/* Override phase-toggle-row when used as a sub-card header */
.phase-card .phase-toggle-row {
  border-radius: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-bottom: 1.5px solid transparent !important;
}

.phase-card-body {
  padding: 12px 16px;
}

/* Gas — amber */
.phase-card--gas .phase-toggle-row {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%) !important;
  border-bottom-color: #FDE68A !important;
}
.phase-card--gas .phase-toggle-row label { color: #92400E !important; }
.phase-card--gas .phase-toggle-row input[type="checkbox"]:checked { background: #D97706; }
.phase-card--gas .gasElement::before,
.phase-card--gas .gasElementFinal::before {
  background: #FEF9C3;
  color: #92400E;
  border-bottom-color: #FDE68A;
}

/* Liquid — blue */
.phase-card--liquid .phase-toggle-row {
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%) !important;
  border-bottom-color: #BFDBFE !important;
}
.phase-card--liquid .phase-toggle-row label { color: #1E40AF !important; }
.phase-card--liquid .phase-toggle-row input[type="checkbox"]:checked { background: #2563EB; }
.phase-card--liquid .liquidElement::before,
.phase-card--liquid .liquidElementFinal::before {
  background: #DBEAFE;
  color: #1E40AF;
  border-bottom-color: #BFDBFE;
}

/* Solid — green */
.phase-card--solid .phase-toggle-row {
  background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%) !important;
  border-bottom-color: #BBF7D0 !important;
}
.phase-card--solid .phase-toggle-row label { color: #065F46 !important; }
.phase-card--solid .phase-toggle-row input[type="checkbox"]:checked { background: #059669; }
.phase-card--solid .solidElement::before,
.phase-card--solid .solidElementFinal::before {
  background: #DCFCE7;
  color: #065F46;
  border-bottom-color: #BBF7D0;
}

/* Per-phase glow dots (override generic rule) */
.phase-card--gas .phase-toggle-row:has(input[type="checkbox"]:checked) .phase-dot {
  background: #F59E0B;
  animation: gas-glow 1.5s ease-in-out infinite;
}
.phase-card--liquid .phase-toggle-row:has(input[type="checkbox"]:checked) .phase-dot {
  background: #3B82F6;
  animation: liquid-glow 1.5s ease-in-out infinite;
}
.phase-card--solid .phase-toggle-row:has(input[type="checkbox"]:checked) .phase-dot {
  background: #10B981;
  animation: solid-glow 1.5s ease-in-out infinite;
}

@keyframes gas-glow {
  0%, 100% { box-shadow: 0 0 4px 3px rgba(245,158,11,0.5); }
  50%       { box-shadow: 0 0 10px 5px rgba(245,158,11,0.2); }
}
@keyframes liquid-glow {
  0%, 100% { box-shadow: 0 0 4px 3px rgba(59,130,246,0.5); }
  50%       { box-shadow: 0 0 10px 5px rgba(59,130,246,0.2); }
}
@keyframes solid-glow {
  0%, 100% { box-shadow: 0 0 4px 3px rgba(16,185,129,0.5); }
  50%       { box-shadow: 0 0 10px 5px rgba(16,185,129,0.2); }
}

/* Remove nested container box — phase-card-body already provides context */
.phase-card .initial_gas_phase_container,
.phase-card .initial_liquid_phase_container,
.phase-card .initial_solid_phase_container,
.phase-card .final_gas_phase_container,
.phase-card .final_liquid_phase_container,
.phase-card .final_solid_phase_container,
.phase-card .known_polymer_lengths_container {
  background: transparent;
  border: none;
  padding: 0;
  margin-top: 8px;
}
/* Hide empty polymer-lengths containers entirely */
.phase-card .known_polymer_lengths_container:empty {
  display: none;
}

/* Disabled Add/Remove buttons when ambient atmosphere is checked */
.phase-toggle-row button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Rows inside phase element cards that hold a toggle (not a text input) use row layout */
.gasElement p:has(input[type="checkbox"].inline-toggle),
.liquidElement p:has(input[type="checkbox"].inline-toggle),
.solidElement p:has(input[type="checkbox"].inline-toggle) {
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Two-column grid inside solute cards */
.liquidElement .solute-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
  padding: 10px 28px;
}
/* Strip the per-p padding inside the grid columns — grid handles spacing */
.liquidElement .solute-col p {
  padding: 5px 0 !important;
  border-bottom: none !important;
}
/* Inputs inside grid columns fill their column width */
.liquidElement .solute-col p input[type="text"],
.liquidElement .solute-col p input[type="number"] {
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
}

/* Cap text input width outside the grid (polymer section) */
.liquidElement p input[type="text"],
.liquidElement p input[type="number"] {
  max-width: 360px !important;
}

/* Greyed-out disabled state for concentration field when unknown is toggled */
.liquidElement p input:disabled,
.gasElement p input:disabled,
.solidElement p input:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  background: #F3F4F6 !important;
}

/* Liquid-blue toggle colour for inline toggles inside liquid element cards */
.phase-card--liquid .liquidElement p input[type="checkbox"].inline-toggle:checked {
  background: #2563EB;
}

/* Number of unique monomers row: label + compact number input + button all inline */
.liquidElementPolymer p.numberOfUniqueMonomers {
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
}
.liquidElementPolymer p.numberOfUniqueMonomers input[type="number"] {
  width: 70px !important;
  max-width: 70px !important;
  flex: none !important;
  height: 36px;
}

/* Monomer details button */
.monomer-details-btn {
  background: var(--white);
  color: var(--navy);
  border: 1.5px solid var(--navy-border);
  border-radius: 6px;
  padding: 5px 14px;
  height: 36px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.monomer-details-btn:hover {
  background: var(--navy);
  color: white;
  border-color: var(--navy);
}

/* Max and Avg polymer length sit side by side inside the polymer section */
.liquidElementPolymer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
}
.liquidElementPolymer > p {
  grid-column: 1 / -1;
}
.liquidElementPolymer > p.maxPolymerLength,
.liquidElementPolymer > p.avgPolymerLength,
.liquidElementPolymer > p.maxPolymerLengthSt,
.liquidElementPolymer > p.avgPolymerLengthSt {
  grid-column: auto;
}

/* Gas phase input — brown highlight on focus */
.phase-card--gas .gasElement p input:focus {
  border-color: #D97706 !important;
  box-shadow: 0 0 0 3px rgba(217,119,6,0.15) !important;
}

/* Per-phase input border colors — reverted, default blue border looks cleaner
.phase-card--gas .gasElement p input[type="text"],
.phase-card--gas .gasElement p input[type="number"] { border-color: #D97706 !important; }
.phase-card--gas .gasElement p input:focus { border-color: #B45309 !important; box-shadow: 0 0 0 3px rgba(217,119,6,0.15) !important; }
.phase-card--liquid .liquidElement p input[type="text"],
.phase-card--liquid .liquidElement p input[type="number"] { border-color: #93C5FD !important; }
.phase-card--liquid .liquidElement p input:focus { border-color: #2563EB !important; box-shadow: 0 0 0 3px rgba(37,99,235,0.15) !important; }
.phase-card--solid .solidElement p input[type="text"],
.phase-card--solid .solidElement p input[type="number"] { border-color: #6EE7B7 !important; }
.phase-card--solid .solidElement p input:focus { border-color: #059669 !important; box-shadow: 0 0 0 3px rgba(5,150,105,0.15) !important; }
*/

/* Per-phase Add/Remove button color schemes — reverted, default navy style looks cleaner
.phase-card--gas .phase-toggle-row button { background: #FEF3C7 !important; color: #92400E !important; border-color: #D97706 !important; }
.phase-card--gas .phase-toggle-row button:hover { background: #D97706 !important; color: white !important; border-color: #D97706 !important; }
.phase-card--liquid .phase-toggle-row button { background: #DBEAFE !important; color: #1E40AF !important; border-color: #93C5FD !important; }
.phase-card--liquid .phase-toggle-row button:hover { background: #2563EB !important; color: white !important; border-color: #2563EB !important; }
.phase-card--solid .phase-toggle-row button { background: #D1FAE5 !important; color: #065F46 !important; border-color: #6EE7B7 !important; }
.phase-card--solid .phase-toggle-row button:hover { background: #059669 !important; color: white !important; border-color: #059669 !important; }
*/

/* Tighter vertical spacing for direct-child <p> rows in phase card bodies
   (use > so it does NOT reach inside gasElement/liquidElement/solidElement) */
/* OLD: .phase-card-body p { padding: 6px 0 !important; } */
.phase-card-body > p {
  padding: 6px 0 !important;
}

/* Ambient atmosphere label fits content width (no 240px stretch) */
.ambientAtmInit label {
  min-width: auto !important;
}

/* Direct-child <p> rows in phase card bodies: compact label, no 240px stretch */
.phase-card-body > p label {
  min-width: auto !important;
}

/* Solvent row: select fixed width, inline other-input fills remaining space */
.phase-card-body > p select {
  flex: none !important;
  width: 160px !important;
  height: 38px;
}
.phase-card-body > p input[type="text"] {
  flex: 1 !important;
  max-width: none !important;
  height: 38px;
}

/* ── DYNAMIC PHASE CONTAINERS ───────────────────────────────────────────── */
.initial_gas_phase_container,
.initial_liquid_phase_container,
.initial_solid_phase_container,
.final_gas_phase_container,
.final_liquid_phase_container,
.final_solid_phase_container,
.stationary_phase_container,
.continuous_flow_container,
.output_analyzed_container,
.solid_analyzed_container,
.known_polymer_lengths_container {
  margin-top: 8px;
  padding: 12px;
  background: var(--navy-light);
  border-radius: 8px;
  border: 1px solid var(--navy-border);
}

/* Hide containers that are empty (no phase items added yet) */
.initial_gas_phase_container:empty,
.initial_solid_phase_container:empty,
.final_gas_phase_container:empty,
.final_liquid_phase_container:empty,
.final_solid_phase_container:empty,
.stationary_phase_container:empty,
.continuous_flow_container:empty,
.output_analyzed_container:empty,
.solid_analyzed_container:empty {
  display: none;
}

/* Hide liquid container when no solute cards present (it has a nested div even when "empty") */
.initial_liquid_phase_container:not(:has(.liquidElement)) { display: none; }
.final_liquid_phase_container:not(:has(.liquidElementFinal)) { display: none; }

/* ── SUMMARY PAGE ───────────────────────────────────────────────────────── */
.summary-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px 20px;
  text-align: center;
}

.summary-body p {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.6;
}

/* ── FIELD WITH INLINE TOGGLE ───────────────────────────────────────────── */
.field-with-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}

.field-with-toggle input[type="text"] {
  width: 110px !important;
  flex-shrink: 0;
}

.toggle-note {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-label);
  white-space: nowrap;
}

input[type="checkbox"].inline-toggle {
  -webkit-appearance: none;
  appearance: none;
  width: 36px !important;
  height: 20px !important;
  background: #CBD5E0;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
  margin: 0 !important;
  vertical-align: unset;
  border: none !important;
  box-shadow: none !important;
  accent-color: unset;
}

input[type="checkbox"].inline-toggle::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: white;
  top: 3px;
  left: 3px;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

input[type="checkbox"].inline-toggle:checked {
  background: var(--accent);
}

input[type="checkbox"].inline-toggle:checked::before {
  transform: translateX(16px);
}

/* ── PHASE DOT INDICATOR ────────────────────────────────────────────────── */
.phase-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #CBD5E0;
  flex-shrink: 0;
  transition: background 0.3s, box-shadow 0.3s;
}

/* OLD generic glow — replaced by per-phase gas/liquid/solid animations below
.phase-toggle-row:has(input[type="checkbox"]:checked) .phase-dot {
  background: #22C55E;
  animation: phase-glow 1.5s ease-in-out infinite;
}
@keyframes phase-glow {
  0%, 100% { box-shadow: 0 0 4px 3px rgba(34, 197, 94, 0.45); }
  50%       { box-shadow: 0 0 10px 5px rgba(34, 197, 94, 0.2); }
}
*/

/* solidName and solidMassInitial side by side — all other rows span full width */
.solidElement {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
}
.solidElement::before,
.solidElement > p {
  grid-column: 1 / -1;
}
.solidElement > p.solidName,
.solidElement > p.solidMassInitial {
  grid-column: auto;
}

/* Min/max particle size + unknown toggle on one line */
.solidElement .grain-size-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding: 0 28px;
}
.solidElement .grain-size-row > p {
  flex: 1;
  padding: 10px 0 !important;
  border-bottom: none !important;
}
.solidElement .grain-size-row > p.grainSizeUnknown {
  flex: none;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  padding-bottom: 14px !important;
}

/* ── MONOMER DETAILS TABLE ──────────────────────────────────────────────── */
/* Span both columns of the liquidElementPolymer grid */
.monomer_table_div {
  grid-column: 1 / -1;
  padding: 10px 28px 4px;
}

.monomer_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-family: inherit;
  border: 1.5px solid var(--navy-border);
  border-radius: 8px;
  overflow: hidden;
}

/* Header row — liquid blue tint matching solute card header */
.monomer_table th {
  background: #DBEAFE;
  color: #1E40AF;
  font-weight: 600;
  font-size: 12px;
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1.5px solid var(--navy-border);
}

/* Data rows */
.monomer_table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--navy-border);
  vertical-align: middle;
}
.monomer_table tr:last-child td {
  border-bottom: none;
}
.monomer_table tr:nth-child(even) td {
  background: #F5F8FF;
}

/* Inputs inside table cells — match rest of form */
.monomer_table td input[type="text"],
.monomer_table td input[type="number"] {
  width: 100% !important;
  max-width: none !important;
  height: 32px !important;
  padding: 4px 8px !important;
  border: 1.5px solid var(--navy-border) !important;
  border-radius: 5px !important;
  font-size: 13px !important;
  font-family: inherit !important;
  color: var(--text-primary) !important;
  background: var(--white) !important;
  box-sizing: border-box !important;
}
.monomer_table td input[type="text"]:focus,
.monomer_table td input[type="number"]:focus {
  border-color: #2563EB !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12) !important;
  outline: none !important;
}

/* ── FINAL PHASE ELEMENT CARDS (mirrors initial variants) ──────────────────── */
.gasElementFinal, .liquidElementFinal, .solidElementFinal {
  background: var(--white);
  border: 1px solid var(--navy-border);
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
}
.gasElementFinal:last-child, .liquidElementFinal:last-child, .solidElementFinal:last-child {
  margin-bottom: 0;
}

/* Counter headers */
.final_liquid_phase_container { counter-reset: solute-counter; }
.gasElementFinal { counter-increment: gas-counter; }
.gasElementFinal::before {
  content: "Gas " counter(gas-counter);
  display: block; background: var(--navy-light); color: var(--navy);
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; padding: 8px 14px; border-bottom: 1px solid var(--navy-border);
}
.solidElementFinal { counter-increment: solid-counter; }
.solidElementFinal::before {
  content: "Solid " counter(solid-counter);
  display: block; background: var(--navy-light); color: var(--navy);
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; padding: 8px 14px; border-bottom: 1px solid var(--navy-border);
}
.liquidElementFinal { counter-increment: solute-counter; }
.liquidElementFinal::before {
  content: "Solute " counter(solute-counter);
  display: block; background: var(--navy-light); color: var(--navy);
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; padding: 8px 14px; border-bottom: 1px solid var(--navy-border);
}

/* <p> rows */
.gasElementFinal p, .liquidElementFinal p, .solidElementFinal p {
  padding: 10px 28px !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 5px !important;
}
.gasElementFinal p label, .liquidElementFinal p label, .solidElementFinal p label {
  min-width: auto !important; font-size: 13px !important;
  font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important;
}

/* Per-phase label colors */
.phase-card--gas .gasElementFinal p label      { color: #92400E !important; }
.phase-card--liquid .liquidElementFinal p label { color: #1E40AF !important; }
.phase-card--solid .solidElementFinal p label   { color: #065F46 !important; }

/* Input sizing */
.gasElementFinal p input[type="text"],
.gasElementFinal p input[type="number"],
.liquidElementFinal p input[type="text"],
.liquidElementFinal p input[type="number"],
.solidElementFinal p input[type="text"],
.solidElementFinal p input[type="number"] {
  flex: none !important; width: 100% !important; max-width: none !important; height: 38px !important;
}
.gasElementFinal p:last-child, .liquidElementFinal p:last-child, .solidElementFinal p:last-child {
  border-bottom: none;
}

/* Toggle rows inside Final element cards */
.gasElementFinal p:has(input[type="checkbox"].inline-toggle),
.liquidElementFinal p:has(input[type="checkbox"].inline-toggle),
.solidElementFinal p:has(input[type="checkbox"].inline-toggle) {
  flex-direction: row !important; align-items: center !important; gap: 10px !important;
}

/* Disabled inputs */
.liquidElementFinal p input:disabled,
.gasElementFinal p input:disabled,
.solidElementFinal p input:disabled {
  opacity: 0.4 !important; cursor: not-allowed !important; background: #F3F4F6 !important;
}

/* Focus colors */
.phase-card--gas .gasElementFinal p input:focus {
  border-color: #D97706 !important;
  box-shadow: 0 0 0 3px rgba(217,119,6,0.15) !important;
}

/* Liquid blue toggle */
.phase-card--liquid .liquidElementFinal p input[type="checkbox"].inline-toggle:checked { background: #2563EB; }

/* Liquid input max-width outside solute grid */
.liquidElementFinal p input[type="text"],
.liquidElementFinal p input[type="number"] { max-width: 360px !important; }

/* Solute 2-col grid — Final */
.liquidElementFinal .solute-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; padding: 10px 28px;
}
.liquidElementFinal .solute-col p { padding: 5px 0 !important; border-bottom: none !important; }
.liquidElementFinal .solute-col p input[type="text"],
.liquidElementFinal .solute-col p input[type="number"] {
  width: 100% !important; max-width: none !important; flex: none !important;
}

/* liquidElementPolymerFinal grid — max/avg side by side */
.liquidElementPolymerFinal {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px;
}
.liquidElementPolymerFinal > p { grid-column: 1 / -1; }
.liquidElementPolymerFinal > p.maxPolymerLengthFinal,
.liquidElementPolymerFinal > p.avgPolymerLengthFinal { grid-column: auto; }

/* Monomer row inline — Final */
.liquidElementPolymerFinal p.numberOfUniqueMonomersFinal {
  flex-direction: row !important; align-items: center !important; gap: 10px !important;
}
.liquidElementPolymerFinal p.numberOfUniqueMonomersFinal input[type="number"] {
  width: 70px !important; max-width: 70px !important; flex: none !important; height: 36px;
}

/* Monomer table — Final */
.monomer_table_div_final {
  grid-column: 1 / -1; padding: 10px 28px 4px;
}
.monomer_table_final {
  width: 100%; border-collapse: collapse; font-size: 13px; font-family: inherit;
  border: 1.5px solid var(--navy-border); border-radius: 8px; overflow: hidden;
}
.monomer_table_final th {
  background: #DBEAFE; color: #1E40AF; font-weight: 600; font-size: 12px;
  text-align: left; padding: 8px 12px; border-bottom: 1.5px solid var(--navy-border);
}
.monomer_table_final td {
  padding: 5px 8px; border-bottom: 1px solid var(--navy-border); vertical-align: middle;
}
.monomer_table_final tr:last-child td { border-bottom: none; }
.monomer_table_final tr:nth-child(even) td { background: #F5F8FF; }
.monomer_table_final td input[type="text"],
.monomer_table_final td input[type="number"] {
  width: 100% !important; max-width: none !important; height: 32px !important;
  padding: 4px 8px !important; border: 1.5px solid var(--navy-border) !important;
  border-radius: 5px !important; font-size: 13px !important; font-family: inherit !important;
  color: var(--text-primary) !important; background: var(--white) !important;
  box-sizing: border-box !important;
}
.monomer_table_final td input:focus {
  border-color: #2563EB !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12) !important;
  outline: none !important;
}

/* Is measured + Method of measurement on one line */
.is-measured-row {
  display: flex;
  align-items: stretch;
  gap: 16px;
  padding: 0 28px;
  border-top: 1px solid #F0F4FA;
}
.is-measured-row > p {
  flex: 0 0 auto;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 0 !important;
  border-bottom: none !important;
}
/* Method field: label inline, input compact */
.is-measured-row > p.gasMeasurementMethod,
.is-measured-row > p.soluteMeasurementMethod,
.is-measured-row > p.solidMethodOfMeasurement {
  flex: 1;
}
.is-measured-row > p.gasMeasurementMethod input,
.is-measured-row > p.soluteMeasurementMethod input,
.is-measured-row > p.solidMethodOfMeasurement input {
  flex: 1 !important;
  width: auto !important;
  max-width: 200px !important;
  height: 36px !important;
}
/* Is measured toggle — orange across all phase types */
.is-measured-row input[type="checkbox"].inline-toggle:checked {
  background: #D97706 !important;
}
/* span full width when inside a 2-col grid (solidElementFinal) */
.solidElementFinal .is-measured-row { grid-column: 1 / -1; }

/* solidElementFinal grid — name/mass side by side */
.solidElementFinal {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px;
}
.solidElementFinal::before,
.solidElementFinal > p { grid-column: 1 / -1; }
.solidElementFinal > p.solidNamFinal,
.solidElementFinal > p.solidMassFinal { grid-column: auto; }

/* Min/max particle size + unknown toggle on one line — Final */
.solidElementFinal .grain-size-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding: 0 28px;
}
.solidElementFinal .grain-size-row > p {
  flex: 1;
  padding: 10px 0 !important;
  border-bottom: none !important;
}
.solidElementFinal .grain-size-row > p.grainSizeUnknownFinal {
  flex: none;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  padding-bottom: 14px !important;
}

/* ── FLOW-THROUGH PAGE ──────────────────────────────────────────────────── */

/* Section label with inline toggle (Isobaric / Isothermal / Isochoric) */
.form-section-label.metrics-label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.form-section-label.metrics-label .toggle-note { margin-left: auto; }

/* System Metrics <p> rows — match the form-grid label style of Loading Conditions above */
.metrics-p label {
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  color: var(--text-label) !important;
  min-width: 200px !important;
}

/* <p> rows that hold only a button — strip the default label/border styling */
.btn-p {
  flex-direction: row !important;
  padding: 8px 0 !important;
  border-bottom: none !important;
}

/* ── INNER ADD/REMOVE BUTTONS (inside element_block / element_block_cf) ─── */
#add_solid_stat, #remove_solid_stat,
#add_liquid_stat, #remove_liquid_stat,
#add_gas_stat, #remove_gas_stat,
#add_solid_analyzed, #remove_solid_analyzed,
#add_analyzed_output, #remove_output_analyzed,
#add_liquid_cf, #remove_liquid_cf,
#add_gas_cf, #remove_gas_cf,
#add_liquid_analyzed, #remove_liquid_analyzed,
#add_gas_analyzed, #remove_gas_analyzed {
  background: var(--navy-light);
  color: var(--navy);
  border: 1.5px solid var(--navy-border);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
#add_solid_stat:hover, #remove_solid_stat:hover,
#add_liquid_stat:hover, #remove_liquid_stat:hover,
#add_gas_stat:hover, #remove_gas_stat:hover,
#add_solid_analyzed:hover, #remove_solid_analyzed:hover,
#add_analyzed_output:hover, #remove_output_analyzed:hover,
#add_liquid_cf:hover, #remove_liquid_cf:hover,
#add_gas_cf:hover, #remove_gas_cf:hover,
#add_liquid_analyzed:hover, #remove_liquid_analyzed:hover,
#add_gas_analyzed:hover, #remove_gas_analyzed:hover {
  background: var(--navy-border);
}

/* ── STATIONARY PHASE BLOCK ─────────────────────────────────────────────── */
/* Each "Add Stationary Phase" entry — type selector on top, element block below */
.stationary_phase_block {
  flex-wrap: wrap !important;
  padding: 12px !important;
  background: var(--navy-light);
  border: 1px solid var(--navy-border);
  border-radius: 8px;
  margin-bottom: 8px;
  gap: 6px 12px !important;
}
/* Force the element_block to its own full-width row below the label+select */
.stationary_phase_block .element_block {
  flex: 0 0 100%;
}

/* Phase color schemes applied when a type is selected */
.stationary_phase_block.sp-gas  { background: #FFFBEB; border-color: #FDE68A; }
.stationary_phase_block.sp-liquid { background: #EFF6FF; border-color: #BFDBFE; }
.stationary_phase_block.sp-solid  { background: #F0FDF4; border-color: #BBF7D0; }

/* Label colors inside phase-typed blocks */
.stationary_phase_block.sp-gas p label   { color: #92400E !important; }
.stationary_phase_block.sp-liquid p label { color: #1E40AF !important; }
.stationary_phase_block.sp-solid p label  { color: #065F46 !important; }

/* Sub-element card headers match phase color */
.sp-gas .gas_stat_block::before {
  content: "Gas " counter(gas-stat-counter);
  display: block; background: #FEF3C7; color: #92400E;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; padding: 6px 12px; border-bottom: 1px solid #FDE68A;
}
.sp-gas .element_block { counter-reset: gas-stat-counter; }
.sp-gas .gas_stat_block { counter-increment: gas-stat-counter; }

.sp-liquid .liquid_stat_block::before {
  content: "Solute " counter(liquid-stat-counter);
  display: block; background: #DBEAFE; color: #1E40AF;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; padding: 6px 12px; border-bottom: 1px solid #BFDBFE;
}
.sp-liquid .element_block { counter-reset: liquid-stat-counter; }
.sp-liquid .liquid_stat_block { counter-increment: liquid-stat-counter; }

.sp-solid .solid_stat_block::before {
  content: "Solid " counter(solid-stat-counter);
  display: block; background: #DCFCE7; color: #065F46;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; padding: 6px 12px; border-bottom: 1px solid #BBF7D0;
}
.sp-solid .element_block { counter-reset: solid-stat-counter; }
.sp-solid .solid_stat_block { counter-increment: solid-stat-counter; }

/* ── ELEMENT BLOCK CONTAINERS ───────────────────────────────────────────── */
/* Holds the inner Add/Remove buttons and the sub-element cards */
.element_block, .element_block_cf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 0 6px;
}

/* ── CONTINUOUS FLOW BLOCK LAYOUT ───────────────────────────────────────── */
/* Allow the element_block_cf to drop to its own row below Input type: select */
.continuous_flow_block {
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 6px 12px !important;
}
.continuous_flow_block .element_block_cf {
  flex: 0 0 100%;
}

/* Force each p row in CF blocks to full width; buttons share the row below */
.element_block_cf.cf-gas > p,
.element_block_cf.cf-liquid > p {
  flex: 0 0 100%;
}

/* Tighten label gap for flow rate and any other p-rows inside CF blocks */
.element_block_cf.cf-gas p label,
.element_block_cf.cf-liquid p label {
  min-width: auto;
  white-space: nowrap;
}

/* Gas CF — amber color scheme */
.element_block_cf.cf-gas {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 8px;
  padding: 10px 12px;
  gap: 6px 8px;
}
.element_block_cf.cf-gas p label   { color: #92400E !important; }
.cf-gas .gas_cf_block::before {
  content: "Gas " counter(gas-cf-counter);
  display: block; background: #FEF3C7; color: #92400E;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; padding: 6px 12px; border-bottom: 1px solid #FDE68A;
}
.element_block_cf.cf-gas { counter-reset: gas-cf-counter; }
.cf-gas .gas_cf_block { counter-increment: gas-cf-counter; }
.cf-gas .gas_cf_block p label { color: #92400E !important; }

/* Liquid CF — blue color scheme */
.element_block_cf.cf-liquid {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: 8px;
  padding: 10px 12px;
  gap: 6px 8px;
}
.element_block_cf.cf-liquid > p label { color: #1E40AF !important; }
.cf-liquid .liquid_cf_block::before {
  content: "Solute " counter(liquid-cf-counter);
  display: block; background: #DBEAFE; color: #1E40AF;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; padding: 6px 12px; border-bottom: 1px solid #BFDBFE;
}
.element_block_cf.cf-liquid { counter-reset: liquid-cf-counter; }
.cf-liquid .liquid_cf_block { counter-increment: liquid-cf-counter; }
.cf-liquid .liquid_cf_block p label { color: #1E40AF !important; }

/* Liquid CF defaults card — matches liquid-defaults-st */
.liquid-defaults-cf {
  flex: 0 0 100%;
  background: var(--white);
  border: 1px solid #BFDBFE;
  border-radius: 6px;
  overflow: hidden;
}
.liquid-defaults-cf p label,
.liquid-defaults-cf .solvent-row > p label {
  min-width: auto;
  white-space: nowrap;
}
/* pH + Unknown toggle row inside CF defaults */
.liquid-defaults-cf > p.solutePhCf {
  padding: 8px 12px !important;
  border-bottom: none !important;
  gap: 10px !important;
}

/* Liquid stationary defaults (solvent + pH) — white card with blue border */
.liquid-defaults-st {
  flex: 0 0 100%;
  background: var(--white);
  border: 1px solid #BFDBFE;
  border-radius: 6px;
  overflow: hidden;
}

/* Solvent row — solvent select + "Name of solvent" on the same line when Other */
.solvent-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid #EFF6FF;
}
.solvent-row > p {
  flex: 1;
  padding: 0 !important;
  border-bottom: none !important;
  margin: 0;
}

/* Tighten label-to-field gap inside the defaults card — no 240px min-width */
.liquid-defaults-st p label,
.solvent-row > p label {
  min-width: auto;
  white-space: nowrap;
}

/* Solute pH + Unknown toggle — single <p> row inside liquid-defaults-st */
.liquid-defaults-st > p.solutePhSt {
  padding: 8px 12px !important;
  border-bottom: none !important;
  gap: 10px !important;
}

/* ── GAS / LIQUID / SOLID STAT BLOCKS (stationary phase sub-elements) ───── */
.gas_stat_block, .liquid_stat_block, .solid_stat_block,
.gas_cf_block, .liquid_cf_block {
  flex: 0 0 100%;
  background: var(--white);
  border: 1px solid var(--navy-border);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 4px;
}

/* p rows inside stat/CF blocks inherit form-body p layout — just tighten padding */
.gas_stat_block p, .liquid_stat_block p, .solid_stat_block p,
.gas_cf_block p, .liquid_cf_block p {
  padding: 8px 14px !important;
  border-bottom: 1px solid #F0F4FA !important;
}
.gas_stat_block p:last-child, .liquid_stat_block p:last-child,
.gas_cf_block p:last-child, .liquid_cf_block p:last-child {
  border-bottom: none !important;
}

/* Tighten label-to-field gap inside solute sub-cards */
.liquid_stat_block p label,
.liquid_cf_block p label {
  min-width: auto;
  white-space: nowrap;
}

/* Toggle rows inside stat blocks */
.liquid_stat_block p:has(input[type="checkbox"].inline-toggle),
.liquid_cf_block p:has(input[type="checkbox"].inline-toggle),
.solid_stat_block p:has(input[type="checkbox"].inline-toggle) {
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
}
.solid_stat_block p label { min-width: auto !important; font-size: 13px !important; }

/* Polymer section reuses .liquidElementPolymer CSS; CF uses its own class */
.liquidElementPolymerCf {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
}
.liquidElementPolymerCf > p { grid-column: 1 / -1; }
.liquidElementPolymerCf > p.maxPolymerLengthCf,
.liquidElementPolymerCf > p.avgPolymerLengthCf { grid-column: auto; }

/* Monomer button + table — CF variant (same style as regular) */
.monomer_button_div_cf { grid-column: 1 / -1; }
.monomer_table_div_cf { grid-column: 1 / -1; padding: 10px 14px 4px; }

/* ── SOLID ANALYSED TYPE CARD ───────────────────────────────────────────── */
.solid_analysed_type {
  background: var(--white);
  border: 1px solid var(--navy-border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
}
.solid_analysed_type:last-child { margin-bottom: 0; }

/* Counter header */
.solid_analysed_types { counter-reset: solid-analyzed-counter; }
.solid_analysed_type { counter-increment: solid-analyzed-counter; }
.solid_analysed_type::before {
  content: "Solid " counter(solid-analyzed-counter);
  grid-column: 1 / -1;
  display: block;
  background: #DCFCE7; color: #065F46;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; padding: 8px 14px;
  border-bottom: 1px solid #BBF7D0;
}

/* All p rows span both columns by default */
.solid_analysed_type > p { grid-column: 1 / -1; }
.solid_analysed_type > p { padding: 8px 14px !important; border-bottom: 1px solid #F0F4FA !important; }
.solid_analysed_type > p:last-of-type { border-bottom: none !important; }
.solid_analysed_type > p label { color: #065F46 !important; min-width: auto !important; font-size: 13px !important; }
.solid_analysed_type > p input[type="text"],
.solid_analysed_type > p input[type="number"],
.solid_analysed_type > p select { min-width: 0; max-width: 160px; }

/* Name and mass side by side */
.solid_analysed_type > p.solidNameAnalyzed,
.solid_analysed_type > p.solidMassAnalyzed { grid-column: auto; }

/* Grain-size-row: min, max, unknown on one line */
.solid_analysed_type .grain-size-row {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 16px;
  padding: 0 14px;
}
.solid_analysed_type .grain-size-row > p {
  flex: 1 1 120px;
  min-width: 0;
  padding: 8px 0 !important;
  border-bottom: none !important;
}
.solid_analysed_type .grain-size-row > p label { min-width: auto !important; font-size: 13px !important; }
.solid_analysed_type .grain-size-row > p input { max-width: 110px; min-width: 0; }
.solid_analysed_type .grain-size-row > p.grainSizeUnknownAnalyzed {
  flex: none;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  padding-bottom: 12px !important;
}

/* ── STATIONARY SOLID GRAIN SIZE (amorph/rock/other powder blocks) ───────── */
/* Min/max/unknown on one line inside the powder type sub-blocks */
.amorph_powder_block, .rock_powder_block, .other_powder_block {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 16px;
  padding: 0;
}
.amorph_powder_block > p, .rock_powder_block > p, .other_powder_block > p {
  flex: 1 1 120px;
  min-width: 0;
  padding: 8px 0 !important;
  border-bottom: none !important;
}
/* Tighten label so it doesn't blow the width */
.amorph_powder_block p label,
.rock_powder_block p label,
.other_powder_block p label {
  min-width: auto;
  white-space: nowrap;
  font-size: 13px;
}
.amorph_powder_block p input,
.rock_powder_block p input,
.other_powder_block p input[type="text"] {
  max-width: 100px;
  min-width: 60px;
}
.amorph_powder_block > p.grainSizeUnknown,
.rock_powder_block > p.grainSizeUnknown,
.other_powder_block > p.grainSizeUnknown {
  flex: none;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  padding-bottom: 12px !important;
}

/* Inline "Length unknown" span inside Is polymer? row */
.poly-len-unknown {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
}

/* ── OUTPUT ANALYSED SECTION ────────────────────────────────────────────── */
.output_analysed_div, .solid_analysed_div {
  padding: 8px 0;
}

/* Card wrapper — no padding; children handle their own spacing */
.output_analysed_type {
  background: var(--white);
  border: 1px solid var(--navy-border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
}

/* Type-select header row — wraps so element_block drops to its own row */
.output_analysed_type > p.output_analyzed_type {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 8px 14px;
  border-bottom: 1px solid #F0F4FA;
  margin: 0;
}
.output_analyzed_type label {
  min-width: auto;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}
.output_analyzed_type select {
  flex: 1;
  max-width: 280px;
  height: 38px;
}

/* element_block_output_cf — inline with label+select+buttons on one row */
.element_block_output_cf {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Once sub-cards are added, expand to full width on its own row */
.element_block_output_cf:has(.gas_analyzed_block),
.element_block_output_cf:has(.liquid_analyzed_block) {
  flex: 0 0 100%;
  padding-top: 8px;
}

/* Color schemes based on output type */
.output_analysed_type.output-liquid { background: #EFF6FF; border-color: #BFDBFE; }
.output_analysed_type.output-gas    { background: #FFFBEB; border-color: #FDE68A; }
.output_analysed_type.output-liquid .output_analyzed_type label { color: #1E40AF !important; }
.output_analysed_type.output-gas    .output_analyzed_type label { color: #92400E !important; }
.output_analysed_type.output-liquid > p.output_analyzed_type { border-bottom-color: #BFDBFE; }
.output_analysed_type.output-gas    > p.output_analyzed_type { border-bottom-color: #FDE68A; }

/* Sub-element cards for output analyzed */
.gas_analyzed_block, .liquid_analyzed_block {
  flex: 0 0 100%;
  background: var(--white);
  border: 1px solid var(--navy-border);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 4px;
}

.gas_analyzed_block p, .liquid_analyzed_block p {
  padding: 8px 14px !important;
  border-bottom: 1px solid #F0F4FA !important;
}
.gas_analyzed_block p:last-child, .liquid_analyzed_block p:last-child,
.liquid_analyzed_block .liquidElementPolymerOutputCf p:last-child {
  border-bottom: none !important;
}
/* Tighten labels inside analyzed cards */
.liquid_analyzed_block p label,
.gas_analyzed_block p label {
  min-width: auto;
  white-space: nowrap;
}
/* Toggle-bearing rows */
.liquid_analyzed_block p:has(input[type="checkbox"].inline-toggle),
.gas_analyzed_block p:has(input[type="checkbox"].inline-toggle) {
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Output polymer section — max/avg side by side */
.liquidElementPolymerOutputCf {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
}
.liquidElementPolymerOutputCf > p { grid-column: 1 / -1; }
.liquidElementPolymerOutputCf > p.maxPolymerLengthOutputCf,
.liquidElementPolymerOutputCf > p.avgPolymerLengthOutputCf { grid-column: auto; }
.liquidElementPolymerOutputCf p label { min-width: auto; white-space: nowrap; }
/* Amber header for gas output sub-cards */
.output-gas .gas_analyzed_block::before {
  content: "Gas " counter(gas-output-counter);
  display: block; background: #FEF3C7; color: #92400E;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; padding: 6px 12px; border-bottom: 1px solid #FDE68A;
}
.element_block_output_cf.output-gas { counter-reset: gas-output-counter; }
.output-gas .gas_analyzed_block { counter-increment: gas-output-counter; }
.output-gas .gas_analyzed_block p label { color: #92400E !important; }
/* Blue header for liquid output sub-cards */
.output-liquid .liquid_analyzed_block::before {
  content: "Solute " counter(liquid-output-counter);
  display: block; background: #DBEAFE; color: #1E40AF;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; padding: 6px 12px; border-bottom: 1px solid #BFDBFE;
}
.element_block_output_cf.output-liquid { counter-reset: liquid-output-counter; }
.output-liquid .liquid_analyzed_block { counter-increment: liquid-output-counter; }
.output-liquid .liquid_analyzed_block p label { color: #1E40AF !important; }