/* The UTM builder (/utm-builder): the tools' page (tool.css) with one sheet. On the left, what you paste (in a well,
   the identity's tile for what you type into), where it's posted, and its four tags as rows between hairlines; on the
   right, the tagged link set big on its well with each tag on its own line, the line on how its network shows it, then
   Copy link in ink and the pennant. */
.utm { --deep: color-mix(in srgb, var(--well) 92%, var(--ink)); }
.utm .tool { grid-template-columns: 380px minmax(0, 1fr); gap: 0 56px; align-items: stretch; }
.utm .editor { position: static; }
.seg.full { display: flex; }
.seg.full button { flex: 1; }

/* What you paste. Focused, the well deepens a step; the caret does the rest. */
.paste { margin: 16px 0 24px; border-radius: 12px; background: var(--well); transition: background .15s ease-out; }
.paste:focus-within { background: var(--deep); }
.paste input, .tool .paste textarea {
  display: block; width: 100%; margin: 0; border: 0; border-radius: 12px; background: none; outline: none;
  font: 400 18px/1.45 var(--font); letter-spacing: -0.01em; color: var(--ink);
}
.paste input { height: 60px; padding: 0 20px; }
.tool .paste textarea { min-height: 188px; padding: 17px 20px 20px; overflow-wrap: anywhere; }
.paste ::placeholder { color: var(--muted); opacity: 1; }
.paste[hidden] { display: none; }

/* The four tags: a name and its value on one line, between hairlines. The focused row's rule turns ink. */
.tags { margin-top: 24px; border-bottom: 1px solid var(--hair); }
.tag { display: flex; align-items: center; min-height: 52px; border-top: 1px solid var(--hair); cursor: text; transition: border-color .15s ease-out; }
.tag:focus-within { border-top-color: var(--ink); }
.tag span { flex: none; width: 100px; font-size: 14.5px; color: var(--muted); }
.tag input { flex: 1; min-width: 0; height: 51px; padding: 0; border: 0; background: none; outline: none; font-size: 16px; letter-spacing: -0.005em; color: var(--ink); }
.tag input::placeholder { color: var(--muted); opacity: 1; }

/* The tagged link: what it was, then each tag on its own line, the names quiet and the values set firm. Until something
   is pasted it's an example, all in the muted ink. */
.utm .view { display: flex; flex-direction: column; align-items: stretch; }
.out { flex: 1; display: flex; flex-direction: column; padding: 36px 40px 28px; border-radius: 12px; background: var(--well); }
.url { margin: 0; font-size: 24px; line-height: 1.35; letter-spacing: -0.015em; color: var(--ink); overflow-wrap: anywhere; }
.url .base, .url b { overflow-wrap: anywhere; }
.list .url { overflow-wrap: normal; }
.url .kv, .url .frag { display: block; }
.url i { font-style: normal; color: var(--muted); }
.url b { font-weight: 600; }
.url .frag { color: var(--ink-2); }
.ghost .url, .url.ghost, .ghost .url b, .url.ghost b { color: var(--muted); }
.ghost .url b, .url.ghost b { font-weight: 400; }
.url[hidden], .list[hidden] { display: none; }
.how { margin: auto 0 0; padding-top: 32px; font-size: 16px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.how b { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.how .to { display: inline-flex; align-items: center; min-height: 44px; margin: -11px 0; font-weight: 500; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.how .to:hover { text-decoration-thickness: 2px; }

/* Several links: one row each, numbered, the tags inline, and its own Copy. */
.list { margin: -12px 0 0; padding: 0; list-style: none; }
.list li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 0 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--hair); }
.list li:first-child { border-top: 0; }
.list .n { font-size: 14.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.list .url { font-size: 16px; line-height: 1.5; letter-spacing: -0.005em; }
.list .url .kv, .list .url .frag { display: inline; }
.list .link { min-height: 44px; margin: -12px 0; }

/* The one thing the page is for, onto the clipboard: ink on the sheet; the pennant stays the CTA's. */
.utm .result { margin-top: 20px; }
.acts { display: flex; align-items: center; gap: 24px; }
.copy {
  display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 24px; border: 0; border-radius: 12px;
  background: var(--ink); color: var(--sheet); font-size: 16px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: opacity .15s ease-out;
}
.copy:hover { opacity: .88; }

@media (max-width: 1119px) {
  .utm .tool { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 759px) {
  .paste { margin: 12px 0 20px; }
  .tags { margin-top: 20px; }
  .out { margin: 0 -20px; padding: 28px 20px 24px; border-radius: 0; }
  .url { font-size: 20px; line-height: 1.4; }
  .list .url { font-size: 15px; }
  .how { padding-top: 24px; }
  .utm .result { display: flex; flex-direction: column; align-items: stretch; gap: 16px; margin-top: 20px; }
  .acts { justify-content: space-between; gap: 16px; }
  .utm .result .cta { order: 0; align-self: flex-start; margin: 0; }
  .copy { flex: 1; height: 54px; }
}
@media (max-width: 359px) {
  .out { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
}