/* pH method finder widget — works standalone (tool page) and inline in an article. */
.phmf{--phmf-accent:var(--blue,#58a6ff)}
.phmf-step{margin:0 0 18px}
.phmf-q{font-size:1rem;font-weight:600;color:var(--text,#e6edf3);margin:0 0 10px;display:flex;align-items:center;gap:9px}
.phmf-n{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:.82rem;font-weight:700;color:var(--phmf-accent);background:var(--blue-bg,#0d1f38);border:1px solid var(--phmf-accent)}
.phmf-opts{display:grid;gap:9px}
.phmf-opt{display:flex;flex-direction:column;gap:3px;text-align:left;width:100%;cursor:pointer;
  background:var(--field-bg,#0d1117);border:1px solid var(--field-border,#30363d);border-radius:11px;
  padding:12px 15px;color:var(--text,#e6edf3);font:inherit;font-size:.95rem;font-weight:600;transition:border-color .12s,background .12s}
.phmf-opt span{font-weight:400;font-size:.83rem;color:var(--muted,#7d8590)}
.phmf-opt:hover{border-color:var(--field-border-hover,#484f58)}
.phmf-opt.is-on{border-color:var(--phmf-accent);background:var(--blue-bg,#0d1f38)}
.phmf-opt.is-on span{color:var(--text2,#c9d1d9)}

/* Result card */
.phmf-result{margin:4px 0 0}
.phmf-rec{background:var(--blue-bg,#0d1f38);border:1px solid rgba(88,166,255,.4);border-radius:13px;padding:16px 18px}
.phmf-rec-label{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--phmf-accent);margin-bottom:5px}
.phmf-rec-title{margin:0 0 8px;font-size:1.12rem;line-height:1.3;color:var(--text,#e6edf3)}
.phmf-rec-why{margin:0;font-size:.95rem;line-height:1.55;color:var(--text2,#c9d1d9)}
.phmf-caveat{margin:10px 0 0;font-size:.88rem;line-height:1.5;color:var(--text2,#c9d1d9);
  background:rgba(210,153,34,.1);border-left:3px solid var(--amber,#d29922);border-radius:0 8px 8px 0;padding:8px 12px}
.phmf-caveat strong{color:var(--amber,#d29922)}
.phmf-links{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:13px}
.phmf-link{font-size:.88rem;font-weight:600;color:var(--phmf-accent);text-decoration:none}
.phmf-link:hover{text-decoration:underline}
.phmf-reset{margin-top:13px;background:none;border:0;padding:0;cursor:pointer;
  font:inherit;font-size:.85rem;font-weight:600;color:var(--muted,#7d8590)}
.phmf-reset:hover{color:var(--text,#e6edf3)}

@media(hover:none)and(pointer:coarse){.phmf-opt{font-size:1rem}}