/* WideMath molarity and solution preparation calculator (/molarity-calculator/).
   Loaded after wm-tools.css on that page only. Every rule is scoped to the
   widget (.wm-mol) or to the page class the widget sets on <body>
   (.wm-mol-page), plus print rules for the lab prep sheet. */

.wm-mol .wm-card { padding-top: 14px; }
.wm-mol .wm-tabs { margin-bottom: 16px; }
.wm-mol .wm-tabs button { min-height: 40px; }
.wm-mol .wm-stat-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.wm-mol .wm-stat-cards b { font-size: 1.05rem; }
.wm-mol .wm-row + .wm-row, .wm-mol .wm-mol-solve + .wm-row, .wm-mol .wm-mol-pair + .wm-row, .wm-mol .wm-row + .wm-mol-pair { margin-top: 12px; }
.wm-mol .wm-row > label { min-width: 0; }
.wm-mol .wm-row > label small, .wm-mol .wm-mol-rrow label small { font-weight: 400; color: var(--wm-mute); }
.wm-mol .wm-field { min-height: 42px; }
.wm-mol select.wm-field { font-family: 'Segoe UI', system-ui, sans-serif; font-size: .95rem; cursor: pointer; }

/* "solve for" and other choices: pills that wrap on a phone */
.wm-mol-solve { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 12px; }
.wm-mol-lbl { font-size: .86rem; font-weight: 600; color: var(--wm-text); }
.wm-mol .wm-seg { border: 0; background: transparent; flex-wrap: wrap; gap: 6px; overflow: visible; }
.wm-mol .wm-seg button { border: 1px solid var(--wm-line); border-radius: 999px; min-height: 40px; padding: 0 14px; font-size: .84rem; font-weight: 600; letter-spacing: 0;
  color: var(--wm-text); background: #fff; }
.wm-mol .wm-seg button + button { border-left: 1px solid var(--wm-line); }
.wm-mol .wm-seg button[aria-pressed="true"] { background: var(--wm-green); border-color: var(--wm-green); color: #fff; }

/* value + unit pairs */
.wm-mol-f { flex: 1 1 200px; }
.wm-mol-q { display: flex; min-width: 0; }
.wm-mol-q input.wm-field { flex: 1 1 90px; min-width: 64px; border-radius: 7px 0 0 7px; }
.wm-mol-q select.wm-field { flex: 0 0 auto; width: auto; max-width: 112px; border-left: 0; border-radius: 0 7px 7px 0; background: var(--wm-soft); padding-left: 6px; padding-right: 4px; }
.wm-mol-mw { flex: 0 1 200px; }
.wm-mol-df, .wm-mol-n { flex: 0 1 160px; }
.wm-mol-ph, .wm-mol-t { flex: 0 1 140px; }
.wm-mol-titr, .wm-mol-salt { flex: 0 1 180px; }
.wm-mol-moderow { align-items: flex-end; }
.wm-mol-moderow .wm-mol-solve { margin-bottom: 0; flex: 1 1 260px; }
.wm-mol-segrow { align-items: flex-start; gap: 6px 24px; }
.wm-mol-segrow .wm-mol-solve { margin-bottom: 0; }

/* the field being solved shows the answer */
.wm-mol .wm-field.wm-mol-solved { background: var(--wm-green-bg); border-color: var(--wm-green-line); color: #14532d; font-weight: 700; cursor: default; }

.wm-mol-info { margin: 10px 0 0; font-size: .92rem; line-height: 1.55; color: var(--wm-text); }
.wm-mol-info:empty { display: none; }
.wm-mol-fml { font-family: var(--wm-math); font-size: 1.05em; }
.wm-mol-dim { color: var(--wm-mute); font-size: .86rem; }
.wm-mol-err { color: var(--wm-err); }
.wm-mol .wm-out { transition: opacity var(--wm-fast); }
.wm-mol .wm-out.wm-mol-stale { opacity: .5; }
.wm-mol .wm-result b { font-weight: 700; }
.wm-mol .wm-result + .wm-note { margin-top: 10px; }

/* stock and diluted boxes */
.wm-mol-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.wm-mol-box { border: 1px solid var(--wm-line); border-radius: 12px; padding: 6px 14px 14px; margin: 0; min-width: 0; }
.wm-mol-box legend { font-size: .82rem; font-weight: 700; color: var(--wm-green); padding: 0 6px; }

/* tables inside the tool: sentence case headers, never F(X) or G/MOL */
.wm-mol th, body.wm-mol-page .content th { text-transform: none; letter-spacing: 0; font-size: .82rem; }
.wm-mol .table-wrap { margin: 14px 0 0; }
.wm-mol table { font-variant-numeric: tabular-nums; }
.wm-mol caption { caption-side: top; text-align: left; font-size: .86rem; color: var(--wm-mute); padding: 0 0 6px; }
.wm-mol td small { color: var(--wm-mute); }
.wm-mol .wm-mol-total td { background: var(--wm-soft); }
.wm-mol-steps { margin-top: 14px; }
.wm-mol-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.wm-mol-actions .wm-btn { min-height: 40px; padding: 8px 14px; }

/* serial dilution tube diagram */
.wm-mol-tubes { display: flex; align-items: flex-end; gap: 2px; overflow-x: auto; padding: 16px 4px 8px; margin-top: 12px; border: 1px solid var(--wm-line); border-radius: 12px; background: var(--wm-soft); }
.wm-mol-tube { flex: none; min-width: 66px; padding: 0 2px; text-align: center; font-size: .74rem; color: var(--wm-mute); }
.wm-mol-glass { position: relative; width: 26px; height: 74px; margin: 0 auto 6px; border: 2px solid #94a3b8; border-top: 0; border-radius: 0 0 14px 14px; overflow: hidden; background: #fff; }
.wm-mol-glass i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--wm-green); }
.wm-mol-tube.is-stock .wm-mol-glass { border-color: var(--wm-green); }
.wm-mol-tube b { display: block; color: var(--wm-ink); font-size: .8rem; }
.wm-mol-tube span { display: block; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wm-mol-arrow { flex: none; align-self: center; padding-bottom: 34px; font-size: .68rem; line-height: 1.15; text-align: center; color: var(--wm-green); white-space: nowrap; }

/* recipe rows */
.wm-mol-rrow { position: relative; border: 1px solid var(--wm-line); border-radius: 12px; padding: 12px 48px 12px 12px; margin-top: 10px; background: var(--wm-soft); }
.wm-mol-rrow label { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; font-weight: 600; color: var(--wm-text); min-width: 0; }
.wm-mol-rrow .wm-field { font-size: 1rem; padding: 8px 10px; }
.wm-mol-rmain { display: grid; grid-template-columns: minmax(150px, 1.3fr) minmax(170px, 1.2fr) minmax(150px, 1fr) minmax(170px, 1.2fr); gap: 8px; align-items: end; }
.wm-mol-rmore { margin-top: 8px; }
.wm-mol-rmore summary { font-size: .82rem; padding: 4px 0; }
.wm-mol-rmore-in { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.wm-mol-rmore-in label { flex: 0 1 180px; }
.wm-mol-rmore-in label.grow { flex: 1 1 240px; }
.wm-mol-del { position: absolute; top: 8px; right: 6px; width: 38px; height: 38px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #94a3b8; font-size: 22px; line-height: 1; cursor: pointer; }
.wm-mol-del:hover { color: var(--wm-err); background: var(--wm-err-bg); }
.wm-mol-del:focus-visible { outline: 2px solid var(--wm-green-2); outline-offset: 2px; }
.wm-mol-rinfo { margin: 8px 0 0; font-size: .86rem; line-height: 1.5; color: var(--wm-text); }
.wm-mol-rinfo:empty { display: none; }
.wm-mol-rtable td:nth-child(5) { min-width: 150px; }

/* buffer amounts */
.wm-mol-amounts { list-style: none; padding: 0; margin: 12px 0 0; }
.wm-mol-amounts li { padding: 9px 12px; border: 1px solid var(--wm-line); border-radius: 10px; margin-top: 6px; background: #fff; line-height: 1.5; }
.wm-mol-warn { margin: 12px 0 0; }
.wm-mol-warn p { margin: 0 0 6px; }

@media (max-width: 860px) {
  .wm-mol-rmain { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wm-mol-rname { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .wm-mol-pair { grid-template-columns: minmax(0, 1fr); }
  .wm-mol-rstock { grid-column: 1 / -1; }
  .wm-mol-rrow { padding-right: 12px; }
  .wm-mol-rname { padding-right: 36px; }
  .wm-mol th, .wm-mol td { padding: 8px 8px; }
  .wm-mol-rtable th:nth-child(3), .wm-mol-rtable td:nth-child(3) { display: none; }
  .wm-mol-rtable td:nth-child(5) { min-width: 0; }
  [data-panel="molarity"] .wm-row > label.grow { flex: 1 1 55%; }
  [data-panel="molarity"] .wm-row > label.wm-mol-mw { flex: 1 1 35%; }
  .wm-mol .wm-seg button { padding: 0 11px; font-size: .8rem; }
  .wm-mol-f, .wm-mol-df, .wm-mol-n, .wm-mol-ph, .wm-mol-t, .wm-mol-titr, .wm-mol-salt { flex: 1 1 100%; }
  .wm-mol-df, .wm-mol-n, .wm-mol-ph, .wm-mol-t { flex: 1 1 calc(50% - 6px); }
}

/* ---- printing ------------------------------------------------------------ */
.wm-mol-sheet { display: none; }
@media print {
  body.wm-mol-page nav.nav, body.wm-mol-page .breadcrumb, body.wm-mol-page .wm-examples, body.wm-mol-page footer, body.wm-mol-page .related,
  body.wm-mol-page .author-box, body.wm-mol-page ins.adsbygoogle, body.wm-mol-page iframe, body.wm-mol-page .wm-mol .wm-tabs,
  body.wm-mol-page .wm-mol-actions, body.wm-mol-page .wm-mol-del, body.wm-mol-page .wm-disclaimer, body.wm-mol-page .wm-mol .wm-mol-add { display: none !important; }
  body.wm-mol-page .wm-mol .wm-card { box-shadow: none; border-color: #cbd5e1; }
  body.wm-mol-page .wm-mol .wm-out.wm-mol-stale { opacity: 1; }
  /* "Print prep sheet": only the sheet */
  body.wm-mol-print-sheet > *:not(main), body.wm-mol-print-sheet main > *:not(#app), body.wm-mol-print-sheet .wm-mol > .wm-card { display: none !important; }
  body.wm-mol-print-sheet .wm-solver { max-width: none; padding: 0; }
  body.wm-mol-print-sheet .wm-mol-sheet { display: block !important; color: #000; font: 10.5pt/1.45 'Segoe UI', system-ui, sans-serif; }
  .wm-mol-sheet h2 { font-size: 17pt; margin: 0 0 4pt; border: 0; padding: 0; }
  .wm-mol-sheet .wm-mol-sheet-meta { margin: 0 0 10pt; font-size: 10pt; }
  .wm-mol-sheet table { width: 100%; border-collapse: collapse; font-size: 10pt; border: 1px solid #555; border-radius: 0; }
  .wm-mol-sheet th, .wm-mol-sheet td { border: 1px solid #777; padding: 5pt 6pt; text-align: left; vertical-align: top; text-transform: none; letter-spacing: 0; color: #000; background: none; font-size: 10pt; }
  .wm-mol-sheet th { background: #eee; font-weight: 700; }
  .wm-mol-sheet td.blank { width: 20%; }
  .wm-mol-sheet td.box { width: 7%; }
  .wm-mol-sheet small { color: #333; }
  .wm-mol-sheet .wm-mol-sheet-steps { margin: 12pt 0 10pt 16pt; padding: 0; }
  .wm-mol-sheet .wm-mol-sheet-steps li { margin: 0 0 5pt; }
  .wm-mol-sheet .wm-mol-sheet-foot { font-size: 8pt; color: #333; word-break: break-all; margin: 10pt 0 0; }
  @page { margin: 14mm; }
}