/* URL-Encoder & -Parser: Moduswechsel, Parameter-Editor, Pfadsegmente. */
[data-tl="url"] [data-pane][hidden] { display: none; }
.tl-url-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.tl-url-out { display: grid; gap: 10px; }
.tl-url-out:empty { display: none; }
.tl-url-inline { padding: 1px 5px; font: 13px/1.5 var(--font-mono); color: var(--ink); background: var(--bg-sunken); border-radius: 5px; overflow-wrap: anywhere; }
.tl-note .tl-btn { margin-top: 8px; }

.tl-url-params { display: grid; gap: 6px; }
.tl-url-param { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.4fr) auto; grid-template-areas: "k eq v x"; gap: 6px 8px; align-items: center; padding: 6px; border: 1px solid transparent; border-radius: 12px; }
.tl-url-param.is-track { background: var(--tl-warn-soft); border-color: color-mix(in srgb, var(--tl-warn) 30%, transparent); }
.tl-url-param .tl-input { padding: 8px 10px; font-size: 13.5px; }
.tl-url-k { grid-area: k; }
.tl-url-eq { grid-area: eq; font: 600 14px var(--font-mono); color: var(--ink-3); }
.tl-url-v { grid-area: v; }
.tl-url-x { grid-area: x; }
.tl-url-flag { grid-column: 1 / -1; padding-left: 2px; font-size: 12px; font-weight: 600; color: var(--tl-warn); }
@media (max-width: 520px) {
  .tl-url-param { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k x" "v v"; }
  .tl-url-eq { display: none; }
}

.tl-url-segs { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.tl-url-segs li { display: inline-flex; align-items: baseline; gap: 4px; max-width: 100%; padding: 4px 10px; font-size: 13px; color: var(--ink); background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 8px; overflow-wrap: anywhere; }
.tl-url-segs li::before { content: "/"; color: var(--ink-3); font-family: var(--font-mono); }