/* UTM Builder for Pinterest (ROADMAP-Calcs-PinPin.md PP3) — the text boxes, the link box, the warnings
   and one link per pin design. Everything else is the core stylesheet. */
/* the core styles <input> inside .chqt-input; a <textarea> needs the same: 17px (under 16 iPhone
   zooms the page on focus), and min-width 0 — a textarea's intrinsic width (20 cols) otherwise pushes
   the flex row wider than a phone (measured: 61px of sideways scroll on an iPhone) */
.chqt-input textarea {
  flex: 1 1 auto; min-width: 0; width: 100%; box-sizing: border-box;
  border: 0; background: transparent; outline: none; resize: vertical;
  font: inherit; font-size: 17px; color: var(--chqt-ink, #191320); padding: 12px; min-height: 48px; border-radius: 12px;
}
.chqt-utm-link { margin-top: .6rem; }
.chqt-utm-link textarea { font: 16px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
.chqt-utm-warn { margin: .7rem 0 .2rem; padding-left: 1.2rem; font-size: .95rem; overflow-wrap: anywhere; }
.chqt-utm-warn li { margin: .25rem 0; }
.chqt-utm-variants h3 { font-size: 1rem; margin: .9rem 0 .4rem; }
.chqt-utm-variants ul { list-style: none; margin: 0 0 .5rem; padding: 0; }
.chqt-utm-variants li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .6rem; align-items: center; padding: .45rem 0; border-top: 1px solid var(--chqt-line, #ddd5e6); }
.chqt-utm-variants code { grid-column: 1; font-size: .82rem; word-break: break-all; }
.chqt-utm-variants .chqt-btn { grid-column: 2; grid-row: 1 / span 2; }
.chqt-utm-why { overflow-wrap: anywhere; }
/* the copy quotes a whole link and Google's regex in <code>: let them wrap on a phone (measured: 61px sideways) */
.chqt-content code { overflow-wrap: anywhere; word-break: break-word; }