/* CLAUDE 10-15: Link clips (linkui.js). Graphite: a chain mark on a linked item, a dashed outline on the rest of the selected
   item's group, a solid one on what is picked, and one quiet strip while picking. No colour: the state is the shape. */
.tl-link-mark {
  position: absolute;
  left: 3px;
  top: 2px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(10, 10, 12, 0.72);
  color: var(--c-fg, #f2f0eb);
  pointer-events: none;
}
.tl-link-mark svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* the chain sits left of the name, not over it */
.tl-block.tl-linked:not(.tl-seg):not(.tl-music) {
  padding-left: 22px;
}
.tl-seg.tl-linked .tl-seg-label {
  margin-left: 18px;
}
.tl-block.tl-link-mate {
  outline: 1.5px dashed var(--c-fg-2, #b5b3ad);
  outline-offset: 1px;
}
.tl-block.tl-picked {
  outline: 2px solid var(--c-fg, #f2f0eb);
  outline-offset: 1px;
  z-index: 3;
}

/* the strip while picking (above the lanes) */
.tl-linkbar {
  /* lies over the toolbar row (the first child of the timeline, the row's own height pulled back) */
  position: sticky;
  top: 0;
  z-index: 30;
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 38px;
  margin: 0 0 -38px;
  padding: 4px 10px;
  border-bottom: 1px solid var(--c-line, rgba(255, 255, 255, 0.06));
  background: var(--c-raised, #1c1c1f);
  color: var(--c-fg-2, #b5b3ad);
  font-size: 12px;
}
.tl-linkbar[hidden] {
  display: none;
}
.tl-linkbar-msg {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-fg, #f2f0eb);
}
.tl-linkbar button {
  flex: none;
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid var(--c-line-strong, rgba(255, 255, 255, 0.12));
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--c-fg, #f2f0eb);
  font: inherit;
  cursor: pointer;
}
.tl-linkbar .tl-linkbar-go {
  background: var(--c-fg, #f2f0eb);
  border-color: transparent;
  color: #0d0d0f;
  font-weight: 600;
}
.tl-linkbar .tl-linkbar-go:disabled {
  background: transparent;
  border-color: var(--c-line-strong, rgba(255, 255, 255, 0.12));
  color: var(--c-fg-3, #8f8e89);
  cursor: default;
}
.tl-linkbar button:focus-visible {
  outline: 2px solid var(--c-focus, rgba(242, 240, 235, 0.72));
  outline-offset: 2px;
}

/* the phone: the strip floats over the top of the lanes (the tool row is hidden there), buttons are finger size */
body.pe-on .tl-linkbar {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 6px;
  margin: 0;
  z-index: 20;
  padding: 6px 8px 6px 12px;
  border: 1px solid var(--c-line-strong, rgba(255, 255, 255, 0.12));
  border-radius: var(--r-md);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
body.pe-on .tl-linkbar button {
  min-height: 36px;
  min-width: 44px;
}
body.pe-on .tl-block.tl-picked {
  outline-width: 2.5px;
}
@media (prefers-reduced-motion: no-preference) {
  .tl-link-mark,
  .tl-block.tl-link-mate,
  .tl-block.tl-picked {
    transition:
      outline-color var(--d-hover) ease,
      opacity var(--d-hover) ease;
  }
}