/* URL Encoder & Decoder (ROADMAP-Calcs-PinPin.md PP30) — the text in, the answer out with its Copy button, the notes,
   what changed, the link part by part and the three encoded forms. Everything else is the core stylesheet (and the
   UTM tools' textarea rule, repeated here: 16px, so an iPhone does not zoom on focus). */
.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: 16px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--chqt-ink, #191320); padding: 12px; min-height: 48px; border-radius: 12px; word-break: break-all;
}
.ud-answer { margin: 0; }
.chqt .ud-answer .chqt-kicker { display: block; }
.ud-answer .chqt-btn, .ud-once .chqt-btn { margin-top: .4rem; }
.ud-answer textarea { background: #fff; border-radius: 12px; }
.ud-notes { list-style: none; margin: .3rem 0 0; padding: 0; }
.ud-notes li { padding: .4rem .6rem; margin: .3rem 0; border-radius: 8px; border-left: 4px solid var(--chqt-line, #ddd5e6); background: #fff; font-size: .95rem; overflow-wrap: anywhere; }
.ud-notes li.is-fix { border-left-color: #b26b00; }
.ud-notes li.is-fail { border-left-color: #b3124e; }
.ud-once { margin-top: .8rem; }
.ud-utm { overflow-wrap: anywhere; }
.chqt .ud-h { font-size: 1rem; margin: .9rem 0 .3rem; }
.ud-changes { width: auto; }
.ud-changes td { padding: 4px 14px 4px 0; overflow-wrap: anywhere; }
.ud-changes td:first-child::after { content: ' →'; color: var(--chqt-muted, #4c4658); }
.ud-parts { margin: 0; }
.ud-parts > div { display: grid; grid-template-columns: minmax(6.5em, max-content) 1fr; gap: 12px; padding: .4rem 0; border-top: 1px solid var(--chqt-line, #ddd5e6); }
.ud-parts > div:first-child { border-top: 0; }
.ud-parts dt { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95rem; font-weight: 700; overflow-wrap: anywhere; }
.ud-parts dd { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95rem; overflow-wrap: anywhere; min-width: 0; }
.ud-parts .is-utm dt { color: var(--chqt-accent, #b3124e); }
.ud-parts .ud-inner { font-family: inherit; white-space: nowrap; }
.ud-form { padding: .5rem 0; border-top: 1px solid var(--chqt-line, #ddd5e6); }
.ud-form:first-of-type { border-top: 0; }
.chqt .ud-form-h { margin: 0 0 .25rem; font-weight: 700; }
.ud-form-h small { display: block; font-weight: 400; color: var(--chqt-muted, #4c4658); font-size: .9rem; }
.ud-form code { display: block; padding: .5rem .6rem; background: #fff; border: 1px solid var(--chqt-line, #ddd5e6); border-radius: 8px; font-size: .9rem; word-break: break-all; max-height: 7.5em; overflow: auto; }
.ud-form .chqt-btn { margin-top: .4rem; }
/* the answer on the first phone screen (390×664): the lede and the "nothing is fetched" line go on a phone — the FAQ and
   the page's copy say both — and the answer box grows to its text (ui.js), so nothing is cut under a scroll */
@media (max-width: 460px) {
  .chqt[data-tool="url-encoder-decoder"] .chqt-lede, .chqt[data-tool="url-encoder-decoder"] .chqt-form > .chqt-hint { display: none; }
}